From 07f4721d5d66a5e8a00508bbe5ba81326ccb71f0 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 16 Sep 2025 01:33:00 -0700
Subject: [PATCH] enhance button with more variants from hensei-web

---
 src/lib/components/Button.svelte              |  64 +--
 src/lib/components/ui/button/Button.svelte    | 113 +++++
 .../components/ui/button/button.module.scss   | 450 ++++++++++++++++++
 3 files changed, 567 insertions(+), 60 deletions(-)
 create mode 100644 src/lib/components/ui/button/Button.svelte
 create mode 100644 src/lib/components/ui/button/button.module.scss

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
index ca6d1501..740d522f 100644
--- a/src/lib/components/Button.svelte
+++ b/src/lib/components/Button.svelte
@@ -1,64 +1,8 @@
+<!-- Re-export the enhanced Button component from UI directory -->
 <script lang="ts">
-  import { Button } from 'bits-ui';
-  import Icon from './Icon.svelte';
-  import styles from './Button.module.scss';
-  import type { HTMLButtonAttributes } from 'svelte/elements';
+  import Button from './ui/button/Button.svelte';
 
-  interface Props extends HTMLButtonAttributes {
-    variant?: 'primary' | 'secondary' | 'ghost' | 'text' | 'unstyled';
-    size?: 'small' | 'medium' | 'large';
-    icon?: string;
-    iconPosition?: 'left' | 'right';
-    iconOnly?: boolean;
-    fullWidth?: boolean;
-    href?: string;
-    children?: any;
-  }
-
-  const {
-    variant = 'primary',
-    size = 'medium',
-    icon,
-    iconPosition = 'left',
-    iconOnly = false,
-    fullWidth = false,
-    href,
-    disabled = false,
-    class: className = '',
-    children,
-    ...restProps
-  }: Props = $props();
-
-  const iconSizes = {
-    small: 14,
-    medium: 16,
-    large: 20
-  };
-
-  const classes = variant === 'unstyled' 
-    ? className 
-    : [
-        styles.button,
-        styles[variant],
-        styles[size],
-        iconOnly && styles.iconOnly,
-        icon && !iconOnly && iconPosition === 'right' && styles.iconRight,
-        icon && !iconOnly && iconPosition === 'left' && styles.iconLeft,
-        fullWidth && styles.fullWidth,
-        className
-      ].filter(Boolean).join(' ');
+  const props = $props();
 </script>
 
-<Button.Root 
-  {href}
-  {disabled}
-  class={classes}
-  {...restProps}
->
-  {#if icon}
-    <Icon name={icon} size={iconSizes[size]} />
-  {/if}
-  {#if !iconOnly && children}
-    {@render children()}
-  {/if}
-</Button.Root>
\ No newline at end of file
+<Button {...props} />
\ No newline at end of file
diff --git a/src/lib/components/ui/button/Button.svelte b/src/lib/components/ui/button/Button.svelte
new file mode 100644
index 00000000..f745255b
--- /dev/null
+++ b/src/lib/components/ui/button/Button.svelte
@@ -0,0 +1,113 @@
+<script lang="ts">
+  import { Button } from 'bits-ui';
+  import Icon from '../../Icon.svelte';
+  import styles from './button.module.scss';
+  import type { HTMLButtonAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLButtonAttributes {
+    variant?: 'primary' | 'secondary' | 'ghost' | 'text' | 'unstyled' | 'blended' | 'bound' | 'destructive' | 'notice' | 'modal';
+    size?: 'icon' | 'small' | 'medium' | 'large';
+    element?: 'wind' | 'fire' | 'water' | 'earth' | 'dark' | 'light' | null;
+    active?: boolean;
+    floating?: boolean;
+    save?: boolean;
+    saved?: boolean;
+    leftIcon?: string;
+    rightIcon?: string;
+    leftAccessoryClass?: string;
+    rightAccessoryClass?: string;
+    // Legacy props for compatibility
+    icon?: string;
+    iconPosition?: 'left' | 'right';
+    iconOnly?: boolean;
+    fullWidth?: boolean;
+    href?: string;
+    children?: any;
+  }
+
+  const {
+    variant = 'primary',
+    size = 'medium',
+    element = null,
+    active = false,
+    floating = false,
+    save = false,
+    saved = false,
+    leftIcon,
+    rightIcon,
+    leftAccessoryClass = '',
+    rightAccessoryClass = '',
+    // Legacy props
+    icon,
+    iconPosition = 'left',
+    iconOnly = false,
+    fullWidth = false,
+    href,
+    disabled = false,
+    class: className = '',
+    children,
+    ...restProps
+  }: Props = $props();
+
+  // Handle legacy icon prop
+  const effectiveLeftIcon = leftIcon || (icon && iconPosition === 'left' ? icon : undefined);
+  const effectiveRightIcon = rightIcon || (icon && iconPosition === 'right' ? icon : undefined);
+
+  const iconSizes = {
+    icon: 16,
+    small: 14,
+    medium: 16,
+    large: 20
+  };
+
+  const classes = variant === 'unstyled'
+    ? className
+    : [
+        styles.button,
+        styles[variant],
+        styles[size],
+        element && styles[element],
+        active && styles.active,
+        floating && styles.floating,
+        save && styles.save,
+        saved && styles.saved,
+        iconOnly && styles.iconOnly,
+        fullWidth && styles.fullWidth,
+        className
+      ].filter(Boolean).join(' ');
+
+  const leftAccessoryClasses = [
+    styles.accessory,
+    styles.left,
+    leftAccessoryClass
+  ].filter(Boolean).join(' ');
+
+  const rightAccessoryClasses = [
+    styles.accessory,
+    styles.right,
+    rightAccessoryClass
+  ].filter(Boolean).join(' ');
+</script>
+
+<Button.Root
+  {href}
+  {disabled}
+  class={classes}
+  {...restProps}
+>
+  {#if effectiveLeftIcon}
+    <span class={leftAccessoryClasses}>
+      <Icon name={effectiveLeftIcon} size={iconSizes[size]} />
+    </span>
+  {/if}
+  {#if !iconOnly && children}
+    <span class={styles.text}>
+      {@render children()}
+    </span>
+  {/if}
+  {#if effectiveRightIcon}
+    <span class={rightAccessoryClasses}>
+      <Icon name={effectiveRightIcon} size={iconSizes[size]} />
+    </span>
+  {/if}
+</Button.Root>
\ No newline at end of file
diff --git a/src/lib/components/ui/button/button.module.scss b/src/lib/components/ui/button/button.module.scss
new file mode 100644
index 00000000..bd55d1c1
--- /dev/null
+++ b/src/lib/components/ui/button/button.module.scss
@@ -0,0 +1,450 @@
+@use 'themes/spacing';
+@use 'themes/mixins';
+@use 'themes/colors';
+@use 'themes/typography';
+@use 'themes/effects';
+@use 'themes/layout';
+
+.button {
+  align-items: center;
+  background: var(--button-bg);
+  border: 2px solid transparent;
+  border-radius: layout.$input-corner;
+  color: var(--button-text);
+  display: inline-flex;
+  font-size: typography.$font-button;
+  font-weight: typography.$normal;
+  justify-content: center;
+  gap: 6px;
+  transition: 0.18s opacity ease-in-out;
+  user-select: none;
+  transition: background-color 0.18s ease-out, color 0.18s ease-out;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  white-space: nowrap;
+  text-decoration: none;
+  line-height: 1;
+
+  .text {
+    align-items: center;
+    color: inherit;
+    display: flex;
+  }
+
+  &:hover,
+  &.blended:hover,
+  &.blended.active {
+    background: var(--button-bg-hover);
+    cursor: pointer;
+    color: var(--button-text-hover);
+
+    .accessory svg {
+      fill: var(--button-text-hover);
+    }
+
+    .accessory svg.stroke {
+      fill: none;
+      stroke: var(--button-text-hover);
+    }
+  }
+
+  &:disabled {
+    background-color: var(--button-bg-disabled);
+    color: var(--button-text-disabled);
+    cursor: not-allowed;
+    opacity: 0.5;
+
+    &:hover {
+      background-color: var(--button-bg-disabled);
+      color: var(--button-text-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  &:focus-visible {
+    border: 2px solid colors.$blue;
+    outline: none;
+  }
+
+  &:active:not(:disabled) {
+    transform: translateY(1px);
+  }
+}
+
+// Variants
+.primary {
+  background-color: var(--button-contained-bg);
+  color: var(--button-text);
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-contained-bg-hover);
+  }
+}
+
+.secondary {
+  background-color: var(--button-bg);
+  color: var(--button-text);
+  border: 1px solid var(--separator-bg);
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-bg-hover);
+    color: var(--button-text-hover);
+  }
+}
+
+.ghost {
+  background-color: transparent;
+  color: var(--text-secondary);
+
+  &:hover:not(:disabled) {
+    background-color: var(--button-bg);
+    color: var(--text-primary);
+  }
+}
+
+.text {
+  background-color: transparent;
+  color: var(--accent-blue);
+  padding: 0;
+  min-height: auto;
+
+  &:hover:not(:disabled) {
+    color: var(--accent-blue-focus);
+    text-decoration: underline;
+  }
+
+  &:active:not(:disabled) {
+    transform: none;
+  }
+}
+
+.blended {
+  background: transparent;
+
+  &:hover:not(:disabled) {
+    background: var(--button-bg-hover);
+  }
+}
+
+.bound {
+  background: var(--button-contained-bg);
+
+  &:hover:not(:disabled) {
+    background: var(--button-contained-bg-hover);
+  }
+
+  &.save:hover .accessory svg {
+    fill: colors.$save-red;
+    stroke: colors.$save-red;
+  }
+
+  &.save {
+    color: colors.$save-red;
+
+    &.active .accessory svg {
+      fill: colors.$save-red;
+      stroke: colors.$save-red;
+    }
+
+    &:hover {
+      color: darken(colors.$save-red, 30);
+
+      .accessory svg {
+        fill: darken(colors.$save-red, 30);
+        stroke: darken(colors.$save-red, 30);
+      }
+    }
+  }
+}
+
+.bound.blended {
+  background: var(--dialog-bg);
+
+  &:hover:not(:disabled) {
+    background: var(--input-bound-bg);
+  }
+}
+
+.floating {
+  pointer-events: none;
+  position: absolute;
+  opacity: 0;
+  z-index: 99;
+}
+
+.destructive {
+  background: colors.$error;
+  color: white;
+
+  &:hover:not(:disabled) {
+    background: darken(colors.$error, 15);
+  }
+
+  @include mixins.breakpoint(phone) {
+    background: colors.$error;
+    color: colors.$grey-100;
+
+    .accessory svg {
+      fill: colors.$grey-100;
+    }
+  }
+}
+
+.notice {
+  background-color: var(--notice-button-bg);
+  color: var(--notice-button-text);
+
+  &:hover:not(:disabled) {
+    background-color: var(--notice-button-bg-hover);
+  }
+}
+
+.modal {
+  &:hover:not(:disabled) {
+    background: colors.$grey-90;
+  }
+
+  &.destructive {
+    color: colors.$error;
+
+    &:hover:not(:disabled) {
+      color: darken(colors.$error, 10);
+    }
+  }
+}
+
+// Modifiers
+.full {
+  width: 100%;
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.grow {
+  flex-grow: 1;
+}
+
+.no-shrink {
+  flex-shrink: 0;
+}
+
+.active {
+  background: var(--button-bg-hover);
+  color: var(--button-text-hover);
+}
+
+// Sizes
+.icon {
+  aspect-ratio: 1 / 1;
+  padding: spacing.$unit * 1.5;
+  height: 44px;
+  width: 44px;
+
+  .text {
+    display: none;
+
+    @include mixins.breakpoint(tablet) {
+      display: block;
+    }
+
+    @include mixins.breakpoint(phone) {
+      display: block;
+    }
+  }
+}
+
+.small {
+  padding: spacing.$unit spacing.$unit-2x;
+  font-size: typography.$font-small;
+  min-height: 28px;
+
+  &.iconOnly {
+    padding: spacing.$unit;
+    width: 28px;
+    height: 28px;
+  }
+}
+
+.medium {
+  height: spacing.$unit * 5.5;
+  padding: (spacing.$unit * 1.5) spacing.$unit-2x;
+  font-size: typography.$font-regular;
+
+  &.iconOnly {
+    padding: spacing.$unit * 1.5;
+    width: 44px;
+    height: 44px;
+  }
+}
+
+.large {
+  font-size: typography.$font-large;
+  padding: spacing.$unit-2x spacing.$unit-3x;
+  min-height: 52px;
+
+  &.iconOnly {
+    padding: spacing.$unit-2x;
+    width: 52px;
+    height: 52px;
+  }
+}
+
+// Special features
+.save {
+  .accessory svg {
+    fill: none;
+    stroke: var(--button-text);
+  }
+
+  &.saved {
+    color: colors.$save-red;
+
+    .accessory svg {
+      fill: colors.$save-red;
+      stroke: colors.$save-red;
+    }
+
+    &:hover:not(:disabled) {
+      color: colors.$save-red;
+
+      .accessory svg {
+        fill: none;
+        stroke: colors.$save-red;
+      }
+    }
+  }
+
+  &:hover:not(:disabled) {
+    color: colors.$save-red;
+
+    .accessory svg {
+      fill: colors.$save-red;
+      stroke: colors.$save-red;
+    }
+  }
+}
+
+// Element colors
+.wind {
+  background: var(--wind-bg);
+  color: var(--wind-text-contrast);
+
+  &:hover:not(:disabled) {
+    background: var(--wind-bg-hover);
+    color: var(--wind-text-hover);
+  }
+}
+
+.fire {
+  background: var(--fire-bg);
+  color: var(--fire-text-contrast);
+
+  &:hover:not(:disabled) {
+    background: var(--fire-bg-hover);
+    color: var(--fire-text-hover);
+  }
+}
+
+.water {
+  background: var(--water-bg);
+  color: var(--water-text-contrast);
+
+  &:hover:not(:disabled) {
+    background: var(--water-bg-hover);
+    color: var(--water-text-hover);
+  }
+}
+
+.earth {
+  background: var(--earth-bg);
+  color: var(--earth-text-contrast);
+
+  &:hover:not(:disabled) {
+    background: var(--earth-bg-hover);
+    color: var(--earth-text-hover);
+  }
+}
+
+.dark {
+  background: var(--dark-bg);
+  color: var(--dark-text-contrast);
+
+  &:hover:not(:disabled) {
+    background: var(--dark-bg-hover);
+    color: var(--dark-text-hover);
+  }
+}
+
+.light {
+  background: var(--light-bg);
+  color: var(--light-text-contrast);
+
+  &:hover:not(:disabled) {
+    background: var(--light-bg-hover);
+    color: var(--light-text-hover);
+  }
+}
+
+// Icon-only specific
+.iconOnly {
+  gap: 0;
+  aspect-ratio: 1;
+}
+
+// Accessories
+.accessory {
+  $dimension: spacing.$unit-2x;
+
+  display: flex;
+  align-items: center;
+
+  &.arrow {
+    margin-top: spacing.$unit-half;
+  }
+
+  &.flipped {
+    transform: rotate(180deg);
+  }
+
+  svg {
+    fill: var(--button-text);
+    height: $dimension;
+    width: $dimension;
+
+    &.stroke {
+      fill: none;
+      stroke: var(--button-text);
+    }
+
+    &.Add {
+      height: 18px;
+      width: 18px;
+    }
+
+    &.Check {
+      height: 22px;
+      width: 22px;
+    }
+  }
+
+  &.check svg {
+    margin-top: 1px;
+    height: 14px;
+    width: auto;
+  }
+
+  &.settings svg {
+    height: 13px;
+    width: 13px;
+  }
+}
+
+// CSS modules workaround for floating button behavior
+:global(.unit:hover) .floating,
+:global(.unit) .floating.active {
+  pointer-events: initial;
+  opacity: 1;
+}
\ No newline at end of file