@tessera-ui/core 0.4.0

package/dist/collection/components/empty-state/empty-state.js

@@ -0,0 +1,131 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Custom content below the description.
+ * @slot action - CTA buttons.
+ * @slot icon - Custom icon or illustration.
+ *
+ * @part base - The empty state container.
+ * @part icon - The icon wrapper.
+ * @part heading - The heading element.
+ * @part description - The description text.
+ * @part content - The custom content wrapper.
+ * @part action - The action slot wrapper.
+ */
+export class TsEmptyState {
+    /** The heading text. */
+    heading;
+    /** The description text. */
+    description;
+    /** Lucide icon name displayed large. */
+    icon;
+    /** The size of the empty state. */
+    size = 'md';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '517bcb74b651797e31e8b631c88e6805493e85fc', class: {
+                'ts-empty-state': true,
+                [`ts-empty-state--${this.size}`]: true,
+            } }, h("div", { key: '738a7d08d1657b83672a53d1dd8d07f174176739', class: "empty-state__base", part: "base" }, h("div", { key: 'bbc92546c5172180e64f817a8a0bd5c766d12869', class: "empty-state__icon", part: "icon" }, h("slot", { key: '46be0b9827a41af2d05647dcc56ac19c5484a364', name: "icon" }, this.icon && h("ts-icon", { key: '14720f6e52094f08a79b067d228a35ff3d94ce66', name: this.icon }))), this.heading && (h("h3", { key: '88a6cad61c93cc07b274ea7f8bf4e0b4cb0eee57', class: "empty-state__heading", part: "heading" }, this.heading)), this.description && (h("p", { key: 'a59a3db32e57a06c95174708cbd935288de9d3ae', class: "empty-state__description", part: "description" }, this.description)), h("div", { key: '183fb5fbc08a0bf80fe1dd14c31bc5c55ba14fb7', class: "empty-state__content", part: "content" }, h("slot", { key: 'e51960738181881636c7cb8a6c31d72d6213a026' })), h("div", { key: '5cb324a51b4a210952eba2e556a64f9bc39d8383', class: "empty-state__action", part: "action" }, h("slot", { key: '173a07dc3546f213e3f5a3ed67d6ed94c3e34386', name: "action" })))));
+    }
+    static get is() { return "ts-empty-state"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["empty-state.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["empty-state.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The heading text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading"
+            },
+            "description": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The description text."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "description"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Lucide icon name displayed large."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "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 size of the empty state."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'md'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=empty-state.js.map

package/dist/collection/components/empty-state/empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.js","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAGzD;;;;;;;;;;;GAWG;AAMH,MAAM,OAAO,YAAY;IACvB,wBAAwB;IAChB,OAAO,CAAU;IAEzB,4BAA4B;IACpB,WAAW,CAAU;IAE7B,wCAAwC;IAChC,IAAI,CAAU;IAEtB,mCAAmC;IACV,IAAI,GAAW,IAAI,CAAC;IAE7C,4EAA4E;IAC5E,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE;gBACL,gBAAgB,EAAE,IAAI;gBACtB,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI;aACvC;YAED,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM;gBACxC,4DAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM;oBACxC,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,gEAAS,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACrC,CACH;gBAEL,IAAI,CAAC,OAAO,IAAI,CACf,2DAAI,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,SAAS,IAC5C,IAAI,CAAC,OAAO,CACV,CACN;gBAEA,IAAI,CAAC,WAAW,IAAI,CACnB,0DAAG,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,aAAa,IACnD,IAAI,CAAC,WAAW,CACf,CACL;gBAED,4DAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,SAAS;oBAC9C,8DAAQ,CACJ;gBAEN,4DAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ;oBAC5C,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Custom content below the description.\n * @slot action - CTA buttons.\n * @slot icon - Custom icon or illustration.\n *\n * @part base - The empty state container.\n * @part icon - The icon wrapper.\n * @part heading - The heading element.\n * @part description - The description text.\n * @part content - The custom content wrapper.\n * @part action - The action slot wrapper.\n */\n@Component({\n  tag: 'ts-empty-state',\n  styleUrl: 'empty-state.css',\n  shadow: true,\n})\nexport class TsEmptyState {\n  /** The heading text. */\n  @Prop() heading?: string;\n\n  /** The description text. */\n  @Prop() description?: string;\n\n  /** Lucide icon name displayed large. */\n  @Prop() icon?: string;\n\n  /** The size of the empty state. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-empty-state': true,\n          [`ts-empty-state--${this.size}`]: true,\n        }}\n      >\n        <div class=\"empty-state__base\" part=\"base\">\n          <div class=\"empty-state__icon\" part=\"icon\">\n            <slot name=\"icon\">\n              {this.icon && <ts-icon name={this.icon} />}\n            </slot>\n          </div>\n\n          {this.heading && (\n            <h3 class=\"empty-state__heading\" part=\"heading\">\n              {this.heading}\n            </h3>\n          )}\n\n          {this.description && (\n            <p class=\"empty-state__description\" part=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          <div class=\"empty-state__content\" part=\"content\">\n            <slot />\n          </div>\n\n          <div class=\"empty-state__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/empty-state/empty-state.stories.js

@@ -0,0 +1,113 @@
+// Hand-written stories for ts-empty-state
+export default {
+    title: 'Components/EmptyState',
+    tags: ['autodocs'],
+    argTypes: {
+        heading: {
+            control: 'text',
+            description: 'The heading text.',
+        },
+        description: {
+            control: 'text',
+            description: 'The description text.',
+        },
+        icon: {
+            control: 'text',
+            description: 'Lucide icon name displayed large.',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The size of the empty state.',
+        },
+    },
+};
+const Template = (args) => {
+    const attrs = [];
+    if (args.heading !== undefined)
+        attrs.push(`heading="${args.heading}"`);
+    if (args.description !== undefined)
+        attrs.push(`description="${args.description}"`);
+    if (args.icon !== undefined)
+        attrs.push(`icon="${args.icon}"`);
+    if (args.size !== undefined)
+        attrs.push(`size="${args.size}"`);
+    return `
+    <ts-empty-state ${attrs.join(' ')}>
+      <ts-button slot="action" variant="primary">Create Project</ts-button>
+    </ts-empty-state>
+  `;
+};
+export const Default = Object.assign(Template.bind({}), {
+    args: {
+        heading: 'No results found',
+        description: 'Try adjusting your search or filter criteria to find what you are looking for.',
+        icon: 'search',
+        size: 'md',
+    },
+});
+export const Variants = () => `
+  <div style="display: flex; flex-direction: column; gap: 32px;">
+    <ts-empty-state
+      heading="No results found"
+      description="Try adjusting your search or filter criteria to find what you are looking for."
+      icon="search"
+    >
+      <ts-button slot="action" appearance="outline">Clear Filters</ts-button>
+    </ts-empty-state>
+
+    <ts-divider></ts-divider>
+
+    <ts-empty-state
+      heading="Create your first project"
+      description="Projects help you organize your work and collaborate with your team."
+      icon="folder-plus"
+    >
+      <ts-button slot="action" variant="primary">New Project</ts-button>
+    </ts-empty-state>
+
+    <ts-divider></ts-divider>
+
+    <ts-empty-state
+      heading="No notifications"
+      description="When you receive notifications, they will appear here."
+      icon="bell-off"
+    >
+    </ts-empty-state>
+  </div>
+`;
+export const Sizes = () => `
+  <div style="display: flex; flex-direction: column; gap: 32px;">
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Small</p>
+      <ts-empty-state heading="No items" description="Nothing to display." icon="inbox" size="sm"></ts-empty-state>
+    </div>
+    <ts-divider></ts-divider>
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Medium (default)</p>
+      <ts-empty-state heading="No items" description="Nothing to display." icon="inbox" size="md"></ts-empty-state>
+    </div>
+    <ts-divider></ts-divider>
+    <div>
+      <p style="margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;">Large</p>
+      <ts-empty-state heading="No items" description="Nothing to display." icon="inbox" size="lg"></ts-empty-state>
+    </div>
+  </div>
+`;
+export const Composition = () => `
+  <div style="max-width: 500px; font-family: sans-serif;">
+    <div style="border: 1px solid #e2e8f0; border-radius: 8px; padding: 48px 24px;">
+      <ts-empty-state
+        heading="Create your first project"
+        description="Projects let you group related tasks, track progress, and collaborate with your team. Get started by creating a new project."
+        icon="rocket"
+      >
+        <div slot="action" style="display: flex; gap: 8px;">
+          <ts-button appearance="outline">Learn More</ts-button>
+          <ts-button variant="primary">Create Project</ts-button>
+        </div>
+      </ts-empty-state>
+    </div>
+  </div>
+`;
+//# sourceMappingURL=empty-state.stories.js.map

package/dist/collection/components/empty-state/empty-state.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty-state.stories.js","sourceRoot":"","sources":["../../../src/components/empty-state/empty-state.stories.ts"],"names":[],"mappings":"AAAA,0CAA0C;AAE1C,eAAe;IACb,KAAK,EAAE,uBAAuB;IAC9B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mBAAmB;SACjC;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,uBAAuB;SACrC;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,mCAAmC;SACjD;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC;YAC3B,WAAW,EAAE,8BAA8B;SAC5C;KACF;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAA6B,EAAU,EAAE;IACzD,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC;IACxE,IAAI,IAAI,CAAC,WAAW,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,gBAAgB,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC;IACpF,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS;QAAE,KAAK,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC;IAC/D,OAAO;sBACa,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC;;;GAGlC,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAG,MAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAwD,EAAE;IAC7G,IAAI,EAAE;QACJ,OAAO,EAAE,kBAAkB;QAC3B,WAAW,EAAE,gFAAgF;QAC7F,IAAI,EAAE,QAAQ;QACd,IAAI,EAAE,IAAI;KACX;CACF,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6BrC,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;;;CAiBlC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAW,EAAE,CAAC;;;;;;;;;;;;;;;CAexC,CAAC","sourcesContent":["// Hand-written stories for ts-empty-state\n\nexport default {\n  title: 'Components/EmptyState',\n  tags: ['autodocs'],\n  argTypes: {\n    heading: {\n      control: 'text',\n      description: 'The heading text.',\n    },\n    description: {\n      control: 'text',\n      description: 'The description text.',\n    },\n    icon: {\n      control: 'text',\n      description: 'Lucide icon name displayed large.',\n    },\n    size: {\n      control: 'select',\n      options: ['sm', 'md', 'lg'],\n      description: 'The size of the empty state.',\n    },\n  },\n};\n\nconst Template = (args: Record<string, unknown>): string => {\n  const attrs: string[] = [];\n  if (args.heading !== undefined) attrs.push(`heading=\"${args.heading}\"`);\n  if (args.description !== undefined) attrs.push(`description=\"${args.description}\"`);\n  if (args.icon !== undefined) attrs.push(`icon=\"${args.icon}\"`);\n  if (args.size !== undefined) attrs.push(`size=\"${args.size}\"`);\n  return `\n    <ts-empty-state ${attrs.join(' ')}>\n      <ts-button slot=\"action\" variant=\"primary\">Create Project</ts-button>\n    </ts-empty-state>\n  `;\n};\n\nexport const Default = Object.assign(Template.bind({}) as typeof Template & { args: Record<string, unknown> }, {\n  args: {\n    heading: 'No results found',\n    description: 'Try adjusting your search or filter criteria to find what you are looking for.',\n    icon: 'search',\n    size: 'md',\n  },\n});\n\nexport const Variants = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <ts-empty-state\n      heading=\"No results found\"\n      description=\"Try adjusting your search or filter criteria to find what you are looking for.\"\n      icon=\"search\"\n    >\n      <ts-button slot=\"action\" appearance=\"outline\">Clear Filters</ts-button>\n    </ts-empty-state>\n\n    <ts-divider></ts-divider>\n\n    <ts-empty-state\n      heading=\"Create your first project\"\n      description=\"Projects help you organize your work and collaborate with your team.\"\n      icon=\"folder-plus\"\n    >\n      <ts-button slot=\"action\" variant=\"primary\">New Project</ts-button>\n    </ts-empty-state>\n\n    <ts-divider></ts-divider>\n\n    <ts-empty-state\n      heading=\"No notifications\"\n      description=\"When you receive notifications, they will appear here.\"\n      icon=\"bell-off\"\n    >\n    </ts-empty-state>\n  </div>\n`;\n\nexport const Sizes = (): string => `\n  <div style=\"display: flex; flex-direction: column; gap: 32px;\">\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Small</p>\n      <ts-empty-state heading=\"No items\" description=\"Nothing to display.\" icon=\"inbox\" size=\"sm\"></ts-empty-state>\n    </div>\n    <ts-divider></ts-divider>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Medium (default)</p>\n      <ts-empty-state heading=\"No items\" description=\"Nothing to display.\" icon=\"inbox\" size=\"md\"></ts-empty-state>\n    </div>\n    <ts-divider></ts-divider>\n    <div>\n      <p style=\"margin: 0 0 12px; font-family: sans-serif; font-size: 14px; color: #666;\">Large</p>\n      <ts-empty-state heading=\"No items\" description=\"Nothing to display.\" icon=\"inbox\" size=\"lg\"></ts-empty-state>\n    </div>\n  </div>\n`;\n\nexport const Composition = (): string => `\n  <div style=\"max-width: 500px; font-family: sans-serif;\">\n    <div style=\"border: 1px solid #e2e8f0; border-radius: 8px; padding: 48px 24px;\">\n      <ts-empty-state\n        heading=\"Create your first project\"\n        description=\"Projects let you group related tasks, track progress, and collaborate with your team. Get started by creating a new project.\"\n        icon=\"rocket\"\n      >\n        <div slot=\"action\" style=\"display: flex; gap: 8px;\">\n          <ts-button appearance=\"outline\">Learn More</ts-button>\n          <ts-button variant=\"primary\">Create Project</ts-button>\n        </div>\n      </ts-empty-state>\n    </div>\n  </div>\n`;\n"]}

package/dist/collection/components/file-upload/file-upload.css

@@ -0,0 +1,84 @@
+/* ==========================================================================
+   ts-file-upload — Shadow DOM Scoped Styles
+
+   Component tokens (Tier 3):
+     --ts-file-upload-border-color  Dropzone border color
+     --ts-file-upload-bg            Dropzone background
+     --ts-file-upload-radius        Dropzone border radius
+   ========================================================================== */
+
+:host {
+  display: block;
+  font-family: var(--ts-font-family-base);
+
+  --ts-file-upload-border-color: var(--ts-color-border-default);
+  --ts-file-upload-bg: var(--ts-color-bg-surface);
+  --ts-file-upload-radius: var(--ts-radius-md);
+}
+
+/* ---- Dropzone ---- */
+.file-upload__dropzone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 120px;
+  padding: var(--ts-spacing-6);
+  border: 2px dashed var(--ts-file-upload-border-color);
+  border-radius: var(--ts-file-upload-radius);
+  background-color: var(--ts-file-upload-bg);
+  cursor: pointer;
+  outline: none;
+  transition:
+    border-color var(--ts-transition-fast),
+    background-color var(--ts-transition-fast),
+    box-shadow var(--ts-transition-fast);
+}
+
+.file-upload__dropzone:hover:not([aria-disabled="true"]) {
+  border-color: var(--ts-color-interactive-primary);
+  background-color: var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.05));
+}
+
+.file-upload__dropzone:focus-visible {
+  box-shadow: var(--ts-focus-ring);
+  border-color: var(--ts-color-interactive-primary);
+}
+
+/* ---- Drag over state ---- */
+.file-upload__dropzone--drag-over {
+  border-color: var(--ts-color-interactive-primary);
+  background-color: var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.1));
+  border-style: solid;
+}
+
+/* ---- Disabled ---- */
+:host([disabled]) .file-upload__dropzone {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ---- Label ---- */
+.file-upload__label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--ts-spacing-2);
+  font-size: var(--ts-font-size-sm);
+  color: var(--ts-color-text-secondary);
+  text-align: center;
+  pointer-events: none;
+}
+
+/* ---- Hidden file input ---- */
+.file-upload__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

package/dist/collection/components/file-upload/file-upload.js

@@ -0,0 +1,277 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Default slot for custom dropzone content.
+ *
+ * @part dropzone - The dropzone area.
+ * @part label - The label text.
+ * @part input - The hidden file input.
+ */
+export class TsFileUpload {
+    hostEl;
+    fileInputEl;
+    /** Accepted file types (e.g. '.jpg,.png'). */
+    accept;
+    /** Whether multiple files can be selected. */
+    multiple = false;
+    /** Maximum file size in bytes. */
+    maxSize;
+    /** Whether the file upload is disabled. */
+    disabled = false;
+    /** Label text for the dropzone. */
+    label = 'Drop files here or click to upload';
+    /** Form field name. */
+    name;
+    /** Emitted when files are selected or dropped. */
+    tsChange;
+    /** Whether a drag operation is over the dropzone. */
+    isDragOver = false;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.fileInputEl?.click();
+    };
+    handleKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.fileInputEl?.click();
+        }
+    };
+    handleFileChange = (event) => {
+        const input = event.target;
+        if (input.files) {
+            const files = this.validateFiles(Array.from(input.files));
+            if (files.length > 0) {
+                this.tsChange.emit({ files });
+            }
+        }
+        // Reset input so the same file can be selected again
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+    };
+    handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isDragOver = true;
+        }
+    };
+    handleDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+    };
+    handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        if (this.disabled)
+            return;
+        const droppedFiles = event.dataTransfer?.files;
+        if (droppedFiles) {
+            const files = this.validateFiles(Array.from(droppedFiles));
+            if (files.length > 0) {
+                this.tsChange.emit({ files });
+            }
+        }
+    };
+    validateFiles(files) {
+        let validFiles = files;
+        // Filter by accepted types
+        if (this.accept) {
+            const acceptedTypes = this.accept.split(',').map((t) => t.trim().toLowerCase());
+            validFiles = validFiles.filter((file) => {
+                const ext = '.' + file.name.split('.').pop()?.toLowerCase();
+                const mime = file.type.toLowerCase();
+                return acceptedTypes.some((accepted) => accepted === ext ||
+                    accepted === mime ||
+                    (accepted.endsWith('/*') && mime.startsWith(accepted.replace('/*', '/'))));
+            });
+        }
+        // Filter by max size
+        if (this.maxSize) {
+            validFiles = validFiles.filter((file) => file.size <= this.maxSize);
+        }
+        // If not multiple, take only the first
+        if (!this.multiple && validFiles.length > 1) {
+            validFiles = [validFiles[0]];
+        }
+        return validFiles;
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '8f52d515a31a1def7761e0a5e9537de64a6c5658', class: {
+                'ts-file-upload': true,
+                'ts-file-upload--drag-over': this.isDragOver,
+                'ts-file-upload--disabled': this.disabled,
+            } }, h("div", { key: '297acea91c7ad20eab02c5266f197ca0f7fe9c49', class: {
+                'file-upload__dropzone': true,
+                'file-upload__dropzone--drag-over': this.isDragOver,
+            }, part: "dropzone", role: "button", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.label, onClick: this.handleClick, onKeyDown: this.handleKeydown, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("span", { key: 'ad3d90ac4f39ae38ab6d484c1f4841a0e70e7269', class: "file-upload__label", part: "label" }, h("slot", { key: '04a7a2073171d48adb57339477f51d28f0379612' }, this.label)), h("input", { key: '93051be2348247796ffd11d02723b400c969054e', ref: (el) => (this.fileInputEl = el), class: "file-upload__input", part: "input", type: "file", name: this.name, accept: this.accept, multiple: this.multiple, disabled: this.disabled, tabindex: -1, "aria-hidden": "true", onChange: this.handleFileChange }))));
+    }
+    static get is() { return "ts-file-upload"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["file-upload.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["file-upload.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "accept": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Accepted file types (e.g. '.jpg,.png')."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "accept"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether multiple files can be selected."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multiple",
+                "defaultValue": "false"
+            },
+            "maxSize": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum file size in bytes."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "max-size"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the file upload is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the dropzone."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label",
+                "defaultValue": "'Drop files here or click to upload'"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Form field name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isDragOver": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "tsChange",
+                "name": "tsChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when files are selected or dropped."
+                },
+                "complexType": {
+                    "original": "{ files: File[] }",
+                    "resolved": "{ files: File[]; }",
+                    "references": {
+                        "File": {
+                            "location": "global",
+                            "id": "global::File"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "hostEl"; }
+}
+//# sourceMappingURL=file-upload.js.map

package/dist/collection/components/file-upload/file-upload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.js","sourceRoot":"","sources":["../../../src/components/file-upload/file-upload.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, State, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for custom dropzone content.\n *\n * @part dropzone - The dropzone area.\n * @part label - The label text.\n * @part input - The hidden file input.\n */\n@Component({\n  tag: 'ts-file-upload',\n  styleUrl: 'file-upload.css',\n  shadow: true,\n})\nexport class TsFileUpload {\n  @Element() hostEl!: HTMLElement;\n\n  private fileInputEl?: HTMLInputElement;\n\n  /** Accepted file types (e.g. '.jpg,.png'). */\n  @Prop() accept?: string;\n\n  /** Whether multiple files can be selected. */\n  @Prop() multiple = false;\n\n  /** Maximum file size in bytes. */\n  @Prop() maxSize?: number;\n\n  /** Whether the file upload is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Label text for the dropzone. */\n  @Prop() label = 'Drop files here or click to upload';\n\n  /** Form field name. */\n  @Prop() name?: string;\n\n  /** Emitted when files are selected or dropped. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ files: File[] }>;\n\n  /** Whether a drag operation is over the dropzone. */\n  @State() isDragOver = false;\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.fileInputEl?.click();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.fileInputEl?.click();\n    }\n  };\n\n  private handleFileChange = (event: Event): void => {\n    const input = event.target as HTMLInputElement;\n    if (input.files) {\n      const files = this.validateFiles(Array.from(input.files));\n      if (files.length > 0) {\n        this.tsChange.emit({ files });\n      }\n    }\n    // Reset input so the same file can be selected again\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n  };\n\n  private handleDragOver = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled) {\n      this.isDragOver = true;\n    }\n  };\n\n  private handleDragLeave = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n  };\n\n  private handleDrop = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n\n    if (this.disabled) return;\n\n    const droppedFiles = event.dataTransfer?.files;\n    if (droppedFiles) {\n      const files = this.validateFiles(Array.from(droppedFiles));\n      if (files.length > 0) {\n        this.tsChange.emit({ files });\n      }\n    }\n  };\n\n  private validateFiles(files: File[]): File[] {\n    let validFiles = files;\n\n    // Filter by accepted types\n    if (this.accept) {\n      const acceptedTypes = this.accept.split(',').map((t) => t.trim().toLowerCase());\n      validFiles = validFiles.filter((file) => {\n        const ext = '.' + file.name.split('.').pop()?.toLowerCase();\n        const mime = file.type.toLowerCase();\n        return acceptedTypes.some(\n          (accepted) =>\n            accepted === ext ||\n            accepted === mime ||\n            (accepted.endsWith('/*') && mime.startsWith(accepted.replace('/*', '/'))),\n        );\n      });\n    }\n\n    // Filter by max size\n    if (this.maxSize) {\n      validFiles = validFiles.filter((file) => file.size <= this.maxSize!);\n    }\n\n    // If not multiple, take only the first\n    if (!this.multiple && validFiles.length > 1) {\n      validFiles = [validFiles[0]];\n    }\n\n    return validFiles;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-file-upload': true,\n          'ts-file-upload--drag-over': this.isDragOver,\n          'ts-file-upload--disabled': this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'file-upload__dropzone': true,\n            'file-upload__dropzone--drag-over': this.isDragOver,\n          }}\n          part=\"dropzone\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          aria-label={this.label}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n          onDragOver={this.handleDragOver}\n          onDragLeave={this.handleDragLeave}\n          onDrop={this.handleDrop}\n        >\n          <span class=\"file-upload__label\" part=\"label\">\n            <slot>{this.label}</slot>\n          </span>\n\n          <input\n            ref={(el) => (this.fileInputEl = el)}\n            class=\"file-upload__input\"\n            part=\"input\"\n            type=\"file\"\n            name={this.name}\n            accept={this.accept}\n            multiple={this.multiple}\n            disabled={this.disabled}\n            tabindex={-1}\n            aria-hidden=\"true\"\n            onChange={this.handleFileChange}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}