@marianmeres/stuic 2.66.0 → 3.0.0

package/dist/components/Button/Button.svelte.d.ts

@@ -1,40 +1,52 @@
-import type { Snippet } from "svelte";
 import type { HTMLButtonAttributes } from "svelte/elements";
+import type { Snippet } from "svelte";
+import type { IntentColorKey } from "../../utils/design-tokens.js";
+export type ButtonVariant = "solid" | "outline" | "ghost" | "soft" | "link";
+export type ButtonSize = "sm" | "md" | "lg" | "xl";
 export interface Props extends Omit<HTMLButtonAttributes, "children"> {
-    /** Style variant (primary = accent colors, secondary = neutral) */
-    variant?: "primary" | "secondary" | string;
-    size?: "sm" | "md" | "lg" | string;
-    /** Reduce text contrast for less emphasis */
+    /** Color intent (semantic meaning) */
+    intent?: IntentColorKey;
+    /** Visual variant (how colors are applied) */
+    variant?: ButtonVariant | string;
+    /** Size preset */
+    size?: ButtonSize | string;
+    /** Reduce emphasis */
     muted?: boolean;
-    noshadow?: boolean;
-    noborder?: boolean;
+    /** 3D push effect */
+    raised?: boolean;
     /** Skip all default styling, use only custom classes */
     unstyled?: boolean;
-    /** Transparent bg, styled on hover */
-    inverse?: boolean;
+    /** Render as rounded-full */
+    roundedFull?: boolean;
+    /** Render as aspect ratio 1 */
+    aspect1?: boolean;
+    /** Additional CSS classes */
     class?: string;
     /** Render as anchor tag instead of button */
     href?: string;
+    /** Content snippet */
     children?: Snippet<[{
         checked?: boolean;
     }]>;
-    /** Enable switch/toggle behavior (uses aria-checked) */
-    roleSwitch?: boolean;
+    /** Toggle state for switch behavior */
     checked?: boolean;
-    el?: Element;
-    tooltip?: TooltipConfig;
-}
-export interface ButtonPresetClasses {
-    size: Record<string, string>;
-    variant: Record<string, string>;
-    muted: string;
-    shadow: string;
-    inverse: string;
+    /** Enable switch/toggle behavior */
+    roleSwitch?: boolean;
+    /** Bindable element reference */
+    el?: HTMLElement;
+    /** Optional tooltip configuration or direct content */
+    tooltip?: string | TooltipConfig;
+    /** Is this button a "X" button (this is a pragmatic convenience) */
+    x?: boolean | XProps;
+    /** Optional out-of-the-box spinner support  */
+    spinner?: boolean | THC;
+    /** Show only spinner when spinner? */
+    spinnerOnly?: boolean;
 }
-export declare const BUTTON_STUIC_BASE_CLASSES = "\n\t\tbg-button-bg text-button-text\n\t\tdark:bg-button-bg-dark dark:text-button-text-dark\n\t\ttext-base text-center\n\t\tleading-none\n\t\tborder-1\n\t\tborder-button-border dark:border-button-border-dark\n\t\trounded-lg\n\t\tinline-flex items-center justify-center gap-x-2\n\t\tpx-4 py-3\n\t\tselect-none\n\t\tmin-h-[44px] min-w-[44px]\n\n\t\thover:brightness-105\n\t\tactive:brightness-95\n\t\tdisabled:hover:brightness-100 disabled:opacity-50\n\n\t\tfocus:brightness-105\n\t\tfocus:border-button-border-focus focus:dark:border-button-border-focus-dark\n\n\t\t        focus:outline-4         focus:outline-black/10         focus:dark:outline-white/20\n\t\tfocus-visible:outline-4 focus-visible:outline-black/10 focus-visible:dark:outline-white/20\n\t";
-export declare const BUTTON_STUIC_PRESET_CLASSES: ButtonPresetClasses;
 import "./index.css";
-import { type TooltipConfig } from "../../actions/index.js";
+import { type TooltipConfig } from "../../actions/tooltip/tooltip.svelte.js";
+import { type XProps } from "../X/index.js";
+import { type THC } from "../Thc/Thc.svelte";
 declare const Button: import("svelte").Component<Props, {}, "checked" | "el">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/Button/README.md

@@ -1,22 +1,21 @@
 # Button
 
-A flexible button component with style variants, sizes, and optional toggle/switch behavior. Can render as a button or anchor tag.
+A flexible button component with semantic intents, visual variants, sizes, and optional toggle/switch behavior. Can render as a button or anchor tag.
 
 ## Props
 
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `variant` | `"primary" \| "secondary" \| string` | - | Style variant |
-| `size` | `"sm" \| "md" \| "lg" \| string` | - | Button size |
-| `muted` | `boolean` | `false` | Reduce text contrast for less emphasis |
-| `noshadow` | `boolean` | `false` | Remove shadow effect |
-| `noborder` | `boolean` | `false` | Remove border |
+| `intent` | `"primary" \| "accent" \| "destructive" \| "warning" \| "success" \| "info"` | - | Semantic color intent |
+| `variant` | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"` | `"solid"` | Visual variant (how colors are applied) |
+| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Button size |
+| `muted` | `boolean` | `false` | Reduce emphasis (lower opacity) |
+| `raised` | `boolean` | `false` | 3D push effect |
 | `unstyled` | `boolean` | `false` | Skip all default styling |
-| `inverse` | `boolean` | `false` | Transparent bg, styled on hover |
 | `href` | `string` | - | Render as anchor tag with this URL |
 | `roleSwitch` | `boolean` | `false` | Enable toggle/switch behavior |
 | `checked` | `boolean` | `false` | Toggle state when `roleSwitch` is true (bindable) |
-| `el` | `Element` | - | Element reference (bindable) |
+| `el` | `HTMLElement` | - | Element reference (bindable) |
 | `class` | `string` | - | Additional CSS classes |
 
 ## Snippet Props
@@ -25,32 +24,45 @@ The `children` snippet receives `{ checked }` when `roleSwitch` is enabled.
 
 ## Usage
 
-### Basic Variants
+### Intent x Variant
 
 ```svelte
 <script lang="ts">
-  import { Button } from 'stuic';
+  import { Button } from '@marianmeres/stuic';
 </script>
 
-<Button>Default</Button>
-<Button variant="primary">Primary</Button>
-<Button variant="secondary">Secondary</Button>
+<!-- Intent determines the color palette -->
+<Button intent="primary">Primary</Button>
+<Button intent="destructive">Destructive</Button>
+<Button intent="success">Success</Button>
+
+<!-- Variant determines how colors are applied -->
+<Button intent="primary" variant="solid">Solid</Button>
+<Button intent="primary" variant="outline">Outline</Button>
+<Button intent="primary" variant="ghost">Ghost</Button>
+<Button intent="primary" variant="soft">Soft</Button>
+<Button intent="primary" variant="link">Link</Button>
+```
+
+### Sizes
+
+```svelte
 <Button size="sm">Small</Button>
+<Button size="md">Medium</Button>
 <Button size="lg">Large</Button>
+<Button size="xl">Extra Large</Button>
 ```
 
-### Inverse Style (Ghost Button)
+### 3D Push Effect
 
 ```svelte
-<Button inverse>
-  Hover to see background
-</Button>
+<Button intent="primary" raised>Push Me</Button>
 ```
 
 ### As Link
 
 ```svelte
-<Button href="/dashboard">
+<Button href="/dashboard" intent="primary">
   Go to Dashboard
 </Button>
 ```
@@ -59,7 +71,7 @@ The `children` snippet receives `{ checked }` when `roleSwitch` is enabled.
 
 ```svelte
 <script lang="ts">
-  import { Button } from 'stuic';
+  import { Button } from '@marianmeres/stuic';
 
   let isActive = $state(false);
 </script>
@@ -74,10 +86,64 @@ The `children` snippet receives `{ checked }` when `roleSwitch` is enabled.
 ### Custom Styling
 
 ```svelte
+<!-- Using unstyled for full control -->
 <Button
   unstyled
-  class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+  class="bg-gradient-to-red from-purple-500 to-pink-500 text-white px-4 py-2 rounded-lg"
 >
-  Fully Custom
+  Gradient Button
+</Button>
+
+<!-- Override component tokens inline -->
+<Button intent="primary" style="--stuic-button-radius: 9999px;">
+  Pill Shape
 </Button>
 ```
+
+## CSS Variables
+
+### Component Tokens
+
+| Variable | Default | Description |
+|----------|---------|-------------|
+| `--stuic-button-radius` | `--radius-md` | Border radius |
+| `--stuic-button-font-family` | `--font-sans` | Font family |
+| `--stuic-button-font-weight` | `--font-weight-medium` | Font weight |
+| `--stuic-button-transition` | `100ms` | Transition duration |
+| `--stuic-button-ring-width` | `3px` | Focus ring width |
+| `--stuic-button-ring-color` | `--stuic-color-ring` | Focus ring color |
+| `--stuic-button-raised-offset` | `2px` | 3D effect offset |
+| `--stuic-button-raised-color` | `rgb(0 0 0 / 0.8)` | 3D shadow color |
+
+### Size Tokens
+
+Each size (sm, md, lg, xl) has corresponding tokens:
+- `--stuic-button-padding-x-{size}`
+- `--stuic-button-padding-y-{size}`
+- `--stuic-button-font-size-{size}`
+- `--stuic-button-min-height-{size}`
+
+### Intent Color Tokens
+
+Override these to customize intent colors globally:
+
+```css
+:root {
+  --stuic-color-primary: var(--color-blue-600);
+  --stuic-color-primary-hover: var(--color-blue-700);
+  --stuic-color-primary-active: var(--color-blue-800);
+  --stuic-color-primary-foreground: var(--color-white);
+}
+```
+
+Available intents: `primary`, `accent`, `destructive`, `warning`, `success`, `info`
+
+## Data Attributes
+
+The component uses data attributes for styling:
+- `data-intent` - The intent value
+- `data-variant` - The variant value
+- `data-size` - The size value
+- `data-muted` - Present when muted
+- `data-raised` - Present when raised
+- `data-checked` - Present when roleSwitch is enabled and checked