@tessera-ui/core 0.4.0

package/dist/collection/components/button/button.js

@@ -0,0 +1,347 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for button label content.
+ * @slot prefix - Content before the label (e.g., icon).
+ * @slot suffix - Content after the label (e.g., icon).
+ *
+ * @part base - The native button element.
+ * @part label - The label wrapper.
+ * @part prefix - The prefix slot wrapper.
+ * @part suffix - The suffix slot wrapper.
+ * @part spinner - The loading spinner element.
+ */
+export class TsButton {
+    hostEl;
+    /** The button's visual variant. */
+    variant = 'primary';
+    /** The button's visual weight / appearance. */
+    appearance = 'solid';
+    /** The button's size. */
+    size = 'md';
+    /** Renders the button in a disabled state. */
+    disabled = false;
+    /** Renders a loading spinner and disables the button. */
+    loading = false;
+    /** Makes the button take the full width of its container. */
+    block = false;
+    /** The type attribute for the native button. */
+    type = 'button';
+    /** An optional href — renders an anchor instead of a button. */
+    href;
+    /** Target attribute when href is set. */
+    target;
+    /** Emitted when the button is clicked (not fired when disabled/loading). */
+    tsClick;
+    /** Emitted when the button receives focus. */
+    tsFocus;
+    /** Emitted when the button loses focus. */
+    tsBlur;
+    handleClick = (event) => {
+        if (this.disabled || this.loading) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.tsClick.emit();
+    };
+    handleFocus = () => {
+        this.tsFocus.emit();
+    };
+    handleBlur = () => {
+        this.tsBlur.emit();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderSpinner() {
+        return (h("span", { class: "button__spinner", part: "spinner", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-dasharray": "31.4 31.4" }))));
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const isLink = !!this.href;
+        const Tag = isLink ? 'a' : 'button';
+        const attrs = isLink
+            ? {
+                href: this.disabled ? undefined : this.href,
+                target: this.target,
+                rel: this.target === '_blank' ? 'noopener noreferrer' : undefined,
+                role: 'button',
+            }
+            : {
+                type: this.type,
+                disabled: this.disabled || this.loading,
+            };
+        return (h(Host, { key: '235cf7dbe6284358fbdc55c2ce7550d6214336c1', class: {
+                'ts-button': true,
+                [`ts-button--${this.variant}`]: true,
+                [`ts-button--${this.appearance}`]: true,
+                [`ts-button--${this.size}`]: true,
+                'ts-button--disabled': this.disabled,
+                'ts-button--loading': this.loading,
+                'ts-button--block': this.block,
+            } }, h(Tag, { key: '23f3665b903ec3c95db788082a0ebcb1e49cceb7', ...attrs, class: "button__native", part: "base", "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.loading && this.renderSpinner(), h("span", { key: 'c08cc2427e4e97787dd6aca934bc90296b528f3e', class: "button__prefix", part: "prefix" }, h("slot", { key: 'b78c2bd8685f9ceea5bfe0645b091cdea9cbef99', name: "prefix" })), h("span", { key: 'c402094ba85026064f300b90311a84a35a0f1b72', class: "button__label", part: "label" }, h("slot", { key: '38801473cf5e03292a66344434ce1fd882e60ca7' })), h("span", { key: '559ee29b7ebe3f9746d83d69863454c65e251aba', class: "button__suffix", part: "suffix" }, h("slot", { key: '52fd64d18e25367625bbff0e995103245cbdaaa4', name: "suffix" })))));
+    }
+    static get is() { return "ts-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsVariant",
+                    "resolved": "\"danger\" | \"info\" | \"neutral\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {
+                        "TsVariant": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsVariant",
+                            "referenceLocation": "TsVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The button's visual variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'primary'"
+            },
+            "appearance": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsAppearance",
+                    "resolved": "\"ghost\" | \"link\" | \"outline\" | \"solid\"",
+                    "references": {
+                        "TsAppearance": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsAppearance",
+                            "referenceLocation": "TsAppearance"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The button's visual weight / appearance."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "appearance",
+                "defaultValue": "'solid'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "TsSize",
+                    "resolved": "\"lg\" | \"md\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {
+                        "TsSize": {
+                            "location": "import",
+                            "path": "../../types",
+                            "id": "src/types/index.ts::TsSize",
+                            "referenceLocation": "TsSize"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The button's size."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders the button in a disabled state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Renders a loading spinner and disables the button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "block": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Makes the button take the full width of its container."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "block",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The type attribute for the native button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "An optional href \u2014 renders an anchor instead of a button."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_blank' | '_self' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Target attribute when href is set."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsClick",
+                "name": "tsClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is clicked (not fired when disabled/loading)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsFocus",
+                "name": "tsFocus",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button receives focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "tsBlur",
+                "name": "tsBlur",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button loses focus."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=button.js.map

package/dist/collection/components/button/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button/button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsVariant, TsAppearance } from '../../types';\n\n/**\n * @slot - Default slot for button label content.\n * @slot prefix - Content before the label (e.g., icon).\n * @slot suffix - Content after the label (e.g., icon).\n *\n * @part base - The native button element.\n * @part label - The label wrapper.\n * @part prefix - The prefix slot wrapper.\n * @part suffix - The suffix slot wrapper.\n * @part spinner - The loading spinner element.\n */\n@Component({\n  tag: 'ts-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class TsButton {\n  @Element() hostEl!: HTMLElement;\n\n  /** The button's visual variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'primary';\n\n  /** The button's visual weight / appearance. */\n  @Prop({ reflect: true }) appearance: TsAppearance = 'solid';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the button in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders a loading spinner and disables the button. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Makes the button take the full width of its container. */\n  @Prop({ reflect: true }) block = false;\n\n  /** The type attribute for the native button. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** An optional href — renders an anchor instead of a button. */\n  @Prop() href?: string;\n\n  /** Target attribute when href is set. */\n  @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /** Emitted when the button is clicked (not fired when disabled/loading). */\n  @Event({ eventName: 'tsClick' }) tsClick!: EventEmitter<void>;\n\n  /** Emitted when the button receives focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.tsClick.emit();\n  };\n\n  private handleFocus = (): void => {\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderSpinner() {\n    return (\n      <span class=\"button__spinner\" part=\"spinner\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n        </svg>\n      </span>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isLink = !!this.href;\n    const Tag = isLink ? 'a' : 'button';\n\n    const attrs = isLink\n      ? {\n          href: this.disabled ? undefined : this.href,\n          target: this.target,\n          rel: this.target === '_blank' ? 'noopener noreferrer' : undefined,\n          role: 'button',\n        }\n      : {\n          type: this.type,\n          disabled: this.disabled || this.loading,\n        };\n\n    return (\n      <Host\n        class={{\n          'ts-button': true,\n          [`ts-button--${this.variant}`]: true,\n          [`ts-button--${this.appearance}`]: true,\n          [`ts-button--${this.size}`]: true,\n          'ts-button--disabled': this.disabled,\n          'ts-button--loading': this.loading,\n          'ts-button--block': this.block,\n        }}\n      >\n        <Tag\n          {...attrs}\n          class=\"button__native\"\n          part=\"base\"\n          aria-disabled={this.disabled || this.loading ? 'true' : undefined}\n          aria-busy={this.loading ? 'true' : undefined}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          {this.loading && this.renderSpinner()}\n\n          <span class=\"button__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <span class=\"button__label\" part=\"label\">\n            <slot />\n          </span>\n\n          <span class=\"button__suffix\" part=\"suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/button/button.stories.js

@@ -0,0 +1,219 @@
+// Hand-written stories for ts-button
+export default {
+    title: 'Components/Button',
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],
+            description: 'The button\'s visual variant.',
+        },
+        appearance: {
+            control: 'select',
+            options: ['solid', 'outline', 'ghost', 'link'],
+            description: 'The button\'s visual weight / appearance.',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md', 'lg', 'xl'],
+            description: 'The button\'s size.',
+        },
+        disabled: { control: 'boolean', description: 'Renders the button in a disabled state.' },
+        loading: { control: 'boolean', description: 'Renders a loading spinner and disables the button.' },
+        block: { control: 'boolean', description: 'Makes the button take the full width of its container.' },
+        type: {
+            control: 'select',
+            options: ['button', 'submit', 'reset'],
+            description: 'The type attribute for the native button.',
+        },
+        href: { control: 'text', description: 'An optional href — renders an anchor instead of a button.' },
+        target: {
+            control: 'select',
+            options: ['_blank', '_self', '_parent', '_top'],
+            description: 'Target attribute when href is set.',
+        },
+        slotContent: { control: 'text', description: 'Button label text' },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.variant !== undefined && args.variant !== null)
+        attrs.push(`variant="${args.variant}"`);
+    if (args.appearance !== undefined && args.appearance !== null)
+        attrs.push(`appearance="${args.appearance}"`);
+    if (args.size !== undefined && args.size !== null)
+        attrs.push(`size="${args.size}"`);
+    if (args.disabled)
+        attrs.push('disabled');
+    if (args.loading)
+        attrs.push('loading');
+    if (args.block)
+        attrs.push('block');
+    if (args.type !== undefined && args.type !== null)
+        attrs.push(`type="${args.type}"`);
+    if (args.href !== undefined && args.href !== null && args.href !== '')
+        attrs.push(`href="${args.href}"`);
+    if (args.target !== undefined && args.target !== null)
+        attrs.push(`target="${args.target}"`);
+    return `<ts-button ${attrs.join(' ')}>${args.slotContent || 'Save Changes'}</ts-button>`;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        variant: 'primary',
+        appearance: 'solid',
+        size: 'md',
+        disabled: false,
+        loading: false,
+        block: false,
+        type: 'button',
+        slotContent: 'Save Changes',
+    },
+});
+export const Variants = () => `
+  <ts-row gap="2">
+    <ts-button variant="primary">Primary</ts-button>
+    <ts-button variant="secondary">Secondary</ts-button>
+    <ts-button variant="success">Publish Now</ts-button>
+    <ts-button variant="warning">Proceed Anyway</ts-button>
+    <ts-button variant="danger">Delete Account</ts-button>
+    <ts-button variant="info">Learn More</ts-button>
+    <ts-button variant="neutral">Cancel</ts-button>
+  </ts-row>
+`;
+export const Sizes = () => `
+  <ts-row gap="2">
+    <ts-button size="xs">Extra Small</ts-button>
+    <ts-button size="sm">Small</ts-button>
+    <ts-button size="md">Medium</ts-button>
+    <ts-button size="lg">Large</ts-button>
+    <ts-button size="xl">Extra Large</ts-button>
+  </ts-row>
+`;
+export const Appearances = () => `
+  <ts-stack gap="4">
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Solid</p>
+      <ts-row gap="2">
+        <ts-button appearance="solid" variant="primary">Save Changes</ts-button>
+        <ts-button appearance="solid" variant="danger">Delete</ts-button>
+        <ts-button appearance="solid" variant="neutral">Cancel</ts-button>
+      </ts-row>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Outline</p>
+      <ts-row gap="2">
+        <ts-button appearance="outline" variant="primary">Edit Profile</ts-button>
+        <ts-button appearance="outline" variant="danger">Remove Item</ts-button>
+        <ts-button appearance="outline" variant="neutral">View Details</ts-button>
+      </ts-row>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Ghost</p>
+      <ts-row gap="2">
+        <ts-button appearance="ghost" variant="primary">Settings</ts-button>
+        <ts-button appearance="ghost" variant="neutral">More Options</ts-button>
+      </ts-row>
+    </div>
+    <div>
+      <p style="margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);">Link</p>
+      <ts-row gap="2">
+        <ts-button appearance="link" variant="primary">Forgot Password?</ts-button>
+        <ts-button appearance="link" variant="primary">View Documentation</ts-button>
+      </ts-row>
+    </div>
+  </ts-stack>
+`;
+export const States = () => `
+  <ts-stack gap="3">
+    <ts-row gap="2">
+      <ts-button>Default</ts-button>
+      <ts-button disabled>Disabled</ts-button>
+      <ts-button loading>Saving...</ts-button>
+      <ts-button loading variant="danger">Deleting...</ts-button>
+    </ts-row>
+    <div>
+      <ts-button block>Full Width Submit</ts-button>
+    </div>
+    <div>
+      <ts-button block loading>Processing Payment...</ts-button>
+    </div>
+  </ts-stack>
+`;
+export const WithIcons = () => `
+  <ts-row gap="2">
+    <ts-button variant="primary">
+      <ts-icon slot="prefix" name="plus" size="sm"></ts-icon>
+      New Project
+    </ts-button>
+    <ts-button variant="danger">
+      <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
+      Delete
+    </ts-button>
+    <ts-button appearance="outline" variant="neutral">
+      <ts-icon slot="prefix" name="download" size="sm"></ts-icon>
+      Export CSV
+    </ts-button>
+    <ts-button variant="success">
+      <ts-icon slot="prefix" name="check" size="sm"></ts-icon>
+      Approve
+    </ts-button>
+    <ts-button appearance="ghost" variant="primary">
+      Settings
+      <ts-icon slot="suffix" name="chevron-right" size="sm"></ts-icon>
+    </ts-button>
+    <ts-button appearance="outline" variant="primary">
+      <ts-icon slot="prefix" name="log-in" size="sm"></ts-icon>
+      Sign In
+    </ts-button>
+  </ts-row>
+`;
+export const AsLink = () => `
+  <ts-row gap="2">
+    <ts-button href="https://example.com" target="_blank">
+      Visit Website
+      <ts-icon slot="suffix" name="external-link" size="sm"></ts-icon>
+    </ts-button>
+    <ts-button href="https://example.com/docs" appearance="outline" variant="neutral">
+      <ts-icon slot="prefix" name="book-open" size="sm"></ts-icon>
+      Documentation
+    </ts-button>
+  </ts-row>
+`;
+export const Composition = () => `
+  <ts-stack gap="4" style="max-width: 400px;">
+    <ts-row gap="2" justify="end">
+      <ts-button appearance="outline" variant="neutral">Cancel</ts-button>
+      <ts-button variant="primary">
+        <ts-icon slot="prefix" name="save" size="sm"></ts-icon>
+        Save Changes
+      </ts-button>
+    </ts-row>
+
+    <ts-card bordered>
+      <span slot="header"><h3 style="margin: 0;">Danger Zone</h3></span>
+      <p style="margin: 0; color: var(--ts-color-text-secondary);">Once you delete your account, there is no going back. Please be certain.</p>
+      <span slot="footer">
+        <ts-row gap="2" justify="end">
+          <ts-button variant="danger" appearance="outline">
+            <ts-icon slot="prefix" name="trash-2" size="sm"></ts-icon>
+            Delete Account
+          </ts-button>
+        </ts-row>
+      </span>
+    </ts-card>
+
+    <ts-row gap="1">
+      <ts-button size="sm" appearance="ghost" variant="neutral">
+        <ts-icon slot="prefix" name="chevron-left" size="sm"></ts-icon>
+        Back
+      </ts-button>
+      <ts-spacer></ts-spacer>
+      <ts-button size="sm" appearance="outline" variant="neutral">Skip</ts-button>
+      <ts-button size="sm" variant="primary">
+        Continue
+        <ts-icon slot="suffix" name="chevron-right" size="sm"></ts-icon>
+      </ts-button>
+    </ts-row>
+  </ts-stack>
+`;
+//# sourceMappingURL=button.stories.js.map

package/dist/collection/components/button/button.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.stories.js","sourceRoot":"","sources":["../../../src/components/button/button.stories.ts"],"names":[],"mappings":"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","sourcesContent":["// Hand-written stories for ts-button\n\nexport default {\n  title: 'Components/Button',\n  tags: ['autodocs'],\n  argTypes: {\n    variant: {\n      control: 'select',\n      options: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'neutral'],\n      description: 'The button\\'s visual variant.',\n    },\n    appearance: {\n      control: 'select',\n      options: ['solid', 'outline', 'ghost', 'link'],\n      description: 'The button\\'s visual weight / appearance.',\n    },\n    size: {\n      control: 'select',\n      options: ['xs', 'sm', 'md', 'lg', 'xl'],\n      description: 'The button\\'s size.',\n    },\n    disabled: { control: 'boolean', description: 'Renders the button in a disabled state.' },\n    loading: { control: 'boolean', description: 'Renders a loading spinner and disables the button.' },\n    block: { control: 'boolean', description: 'Makes the button take the full width of its container.' },\n    type: {\n      control: 'select',\n      options: ['button', 'submit', 'reset'],\n      description: 'The type attribute for the native button.',\n    },\n    href: { control: 'text', description: 'An optional href — renders an anchor instead of a button.' },\n    target: {\n      control: 'select',\n      options: ['_blank', '_self', '_parent', '_top'],\n      description: 'Target attribute when href is set.',\n    },\n    slotContent: { control: 'text', description: 'Button label text' },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.variant !== undefined && args.variant !== null) attrs.push(`variant=\"${args.variant}\"`);\n  if (args.appearance !== undefined && args.appearance !== null) attrs.push(`appearance=\"${args.appearance}\"`);\n  if (args.size !== undefined && args.size !== null) attrs.push(`size=\"${args.size}\"`);\n  if (args.disabled) attrs.push('disabled');\n  if (args.loading) attrs.push('loading');\n  if (args.block) attrs.push('block');\n  if (args.type !== undefined && args.type !== null) attrs.push(`type=\"${args.type}\"`);\n  if (args.href !== undefined && args.href !== null && args.href !== '') attrs.push(`href=\"${args.href}\"`);\n  if (args.target !== undefined && args.target !== null) attrs.push(`target=\"${args.target}\"`);\n  return `<ts-button ${attrs.join(' ')}>${args.slotContent || 'Save Changes'}</ts-button>`;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    variant: 'primary',\n    appearance: 'solid',\n    size: 'md',\n    disabled: false,\n    loading: false,\n    block: false,\n    type: 'button',\n    slotContent: 'Save Changes',\n  },\n});\n\nexport const Variants = (): string => `\n  <ts-row gap=\"2\">\n    <ts-button variant=\"primary\">Primary</ts-button>\n    <ts-button variant=\"secondary\">Secondary</ts-button>\n    <ts-button variant=\"success\">Publish Now</ts-button>\n    <ts-button variant=\"warning\">Proceed Anyway</ts-button>\n    <ts-button variant=\"danger\">Delete Account</ts-button>\n    <ts-button variant=\"info\">Learn More</ts-button>\n    <ts-button variant=\"neutral\">Cancel</ts-button>\n  </ts-row>\n`;\n\nexport const Sizes = (): string => `\n  <ts-row gap=\"2\">\n    <ts-button size=\"xs\">Extra Small</ts-button>\n    <ts-button size=\"sm\">Small</ts-button>\n    <ts-button size=\"md\">Medium</ts-button>\n    <ts-button size=\"lg\">Large</ts-button>\n    <ts-button size=\"xl\">Extra Large</ts-button>\n  </ts-row>\n`;\n\nexport const Appearances = (): string => `\n  <ts-stack gap=\"4\">\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Solid</p>\n      <ts-row gap=\"2\">\n        <ts-button appearance=\"solid\" variant=\"primary\">Save Changes</ts-button>\n        <ts-button appearance=\"solid\" variant=\"danger\">Delete</ts-button>\n        <ts-button appearance=\"solid\" variant=\"neutral\">Cancel</ts-button>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Outline</p>\n      <ts-row gap=\"2\">\n        <ts-button appearance=\"outline\" variant=\"primary\">Edit Profile</ts-button>\n        <ts-button appearance=\"outline\" variant=\"danger\">Remove Item</ts-button>\n        <ts-button appearance=\"outline\" variant=\"neutral\">View Details</ts-button>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Ghost</p>\n      <ts-row gap=\"2\">\n        <ts-button appearance=\"ghost\" variant=\"primary\">Settings</ts-button>\n        <ts-button appearance=\"ghost\" variant=\"neutral\">More Options</ts-button>\n      </ts-row>\n    </div>\n    <div>\n      <p style=\"margin: 0 0 8px; font-weight: 600; color: var(--ts-color-text-secondary);\">Link</p>\n      <ts-row gap=\"2\">\n        <ts-button appearance=\"link\" variant=\"primary\">Forgot Password?</ts-button>\n        <ts-button appearance=\"link\" variant=\"primary\">View Documentation</ts-button>\n      </ts-row>\n    </div>\n  </ts-stack>\n`;\n\nexport const States = (): string => `\n  <ts-stack gap=\"3\">\n    <ts-row gap=\"2\">\n      <ts-button>Default</ts-button>\n      <ts-button disabled>Disabled</ts-button>\n      <ts-button loading>Saving...</ts-button>\n      <ts-button loading variant=\"danger\">Deleting...</ts-button>\n    </ts-row>\n    <div>\n      <ts-button block>Full Width Submit</ts-button>\n    </div>\n    <div>\n      <ts-button block loading>Processing Payment...</ts-button>\n    </div>\n  </ts-stack>\n`;\n\nexport const WithIcons = (): string => `\n  <ts-row gap=\"2\">\n    <ts-button variant=\"primary\">\n      <ts-icon slot=\"prefix\" name=\"plus\" size=\"sm\"></ts-icon>\n      New Project\n    </ts-button>\n    <ts-button variant=\"danger\">\n      <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n      Delete\n    </ts-button>\n    <ts-button appearance=\"outline\" variant=\"neutral\">\n      <ts-icon slot=\"prefix\" name=\"download\" size=\"sm\"></ts-icon>\n      Export CSV\n    </ts-button>\n    <ts-button variant=\"success\">\n      <ts-icon slot=\"prefix\" name=\"check\" size=\"sm\"></ts-icon>\n      Approve\n    </ts-button>\n    <ts-button appearance=\"ghost\" variant=\"primary\">\n      Settings\n      <ts-icon slot=\"suffix\" name=\"chevron-right\" size=\"sm\"></ts-icon>\n    </ts-button>\n    <ts-button appearance=\"outline\" variant=\"primary\">\n      <ts-icon slot=\"prefix\" name=\"log-in\" size=\"sm\"></ts-icon>\n      Sign In\n    </ts-button>\n  </ts-row>\n`;\n\nexport const AsLink = (): string => `\n  <ts-row gap=\"2\">\n    <ts-button href=\"https://example.com\" target=\"_blank\">\n      Visit Website\n      <ts-icon slot=\"suffix\" name=\"external-link\" size=\"sm\"></ts-icon>\n    </ts-button>\n    <ts-button href=\"https://example.com/docs\" appearance=\"outline\" variant=\"neutral\">\n      <ts-icon slot=\"prefix\" name=\"book-open\" size=\"sm\"></ts-icon>\n      Documentation\n    </ts-button>\n  </ts-row>\n`;\n\nexport const Composition = (): string => `\n  <ts-stack gap=\"4\" style=\"max-width: 400px;\">\n    <ts-row gap=\"2\" justify=\"end\">\n      <ts-button appearance=\"outline\" variant=\"neutral\">Cancel</ts-button>\n      <ts-button variant=\"primary\">\n        <ts-icon slot=\"prefix\" name=\"save\" size=\"sm\"></ts-icon>\n        Save Changes\n      </ts-button>\n    </ts-row>\n\n    <ts-card bordered>\n      <span slot=\"header\"><h3 style=\"margin: 0;\">Danger Zone</h3></span>\n      <p style=\"margin: 0; color: var(--ts-color-text-secondary);\">Once you delete your account, there is no going back. Please be certain.</p>\n      <span slot=\"footer\">\n        <ts-row gap=\"2\" justify=\"end\">\n          <ts-button variant=\"danger\" appearance=\"outline\">\n            <ts-icon slot=\"prefix\" name=\"trash-2\" size=\"sm\"></ts-icon>\n            Delete Account\n          </ts-button>\n        </ts-row>\n      </span>\n    </ts-card>\n\n    <ts-row gap=\"1\">\n      <ts-button size=\"sm\" appearance=\"ghost\" variant=\"neutral\">\n        <ts-icon slot=\"prefix\" name=\"chevron-left\" size=\"sm\"></ts-icon>\n        Back\n      </ts-button>\n      <ts-spacer></ts-spacer>\n      <ts-button size=\"sm\" appearance=\"outline\" variant=\"neutral\">Skip</ts-button>\n      <ts-button size=\"sm\" variant=\"primary\">\n        Continue\n        <ts-icon slot=\"suffix\" name=\"chevron-right\" size=\"sm\"></ts-icon>\n      </ts-button>\n    </ts-row>\n  </ts-stack>\n`;\n"]}