sp-component 0.0.1

package/dist/components/drawer/sp-drawer.css.js

@@ -0,0 +1,4 @@
+const e = ':host{display:contents}dialog{padding:0;border:none;max-height:100%;max-width:100%;overflow:hidden;margin:0;background:transparent}dialog::backdrop{background:var(--sp-overlay, rgba(0, 0, 0, .5))}:host([placement="right"]) dialog{margin-left:auto;height:100vh}:host([placement="left"]) dialog{margin-right:auto;height:100vh}:host([placement="top"]) dialog{margin-bottom:auto;width:100vw}:host([placement="bottom"]) dialog{margin-top:auto;width:100vw}.sp-drawer-panel{background:var(--sp-bg, white);height:100%;display:flex;flex-direction:column;box-shadow:-4px 0 20px #00000026;overflow:hidden;position:relative}:host([placement="left"]) .sp-drawer-panel{box-shadow:4px 0 20px #00000026;animation:sp-drawer-left .25s ease}:host([placement="right"]) .sp-drawer-panel{animation:sp-drawer-right .25s ease}:host([placement="top"]) .sp-drawer-panel{box-shadow:0 4px 20px #00000026;animation:sp-drawer-top .25s ease}:host([placement="bottom"]) .sp-drawer-panel{box-shadow:0 -4px 20px #00000026;animation:sp-drawer-bottom .25s ease}@keyframes sp-drawer-right{0%{transform:translate(100%)}to{transform:translate(0)}}@keyframes sp-drawer-left{0%{transform:translate(-100%)}to{transform:translate(0)}}@keyframes sp-drawer-top{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes sp-drawer-bottom{0%{transform:translateY(100%)}to{transform:translateY(0)}}.sp-drawer-close{position:absolute;top:12px;right:12px;background:none;border:none;cursor:pointer;font-size:18px;color:var(--sp-text-muted, #6b7280);padding:4px;line-height:1;border-radius:4px;z-index:1}.sp-drawer-close:hover{color:var(--sp-text, #111827);background:var(--sp-bg-muted, #f3f4f6)}.sp-drawer-close:focus-visible{outline:2px solid var(--sp-primary-hover, #2563eb);outline-offset:2px}@media(prefers-reduced-motion:reduce){:host([placement="left"]) .sp-drawer-panel,:host([placement="right"]) .sp-drawer-panel,:host([placement="top"]) .sp-drawer-panel,:host([placement="bottom"]) .sp-drawer-panel{animation:none}}.sp-drawer-body{flex:1;overflow-y:auto;padding:20px}::slotted([slot="header"]){display:block;padding:20px 20px 16px;font-size:18px;font-weight:600;color:var(--sp-text, #111827);border-bottom:1px solid var(--sp-border-subtle, #e5e7eb)}::slotted([slot="footer"]){display:block;padding:16px 20px 20px;border-top:1px solid var(--sp-border-subtle, #e5e7eb)}@media(max-width:480px){:host([placement="left"]) dialog,:host([placement="right"]) dialog{width:100vw!important}:host([placement="left"]) .sp-drawer-panel,:host([placement="right"]) .sp-drawer-panel{width:100vw;max-width:100vw}}';
+export {
+  e as default
+};

package/dist/components/drawer/sp-drawer.d.ts

@@ -0,0 +1,51 @@
+import { LitElement } from 'lit';
+import { SpDrawerPlacement } from './sp-drawer.types.js';
+/**
+ * Drawer (slide-in panel) component built on the native <dialog> element.
+ *
+ * @element sp-drawer
+ *
+ * @prop {boolean}            open           - Whether the drawer is open
+ * @prop {string}             label          - Accessible aria-label for the dialog
+ * @prop {SpDrawerPlacement}  placement      - Slide-in direction: left | right | top | bottom
+ * @prop {string}             size           - Width (left/right) or height (top/bottom) of the panel
+ * @prop {boolean}            closable       - Shows a close button when true
+ * @prop {boolean}            closeOnOverlay - Closes when clicking the backdrop
+ *
+ * @fires {CustomEvent} sp-show       - Emitted when the drawer opens
+ * @fires {CustomEvent} sp-hide       - Emitted when the drawer closes
+ * @fires {CustomEvent} sp-after-hide - Emitted 300ms after the drawer closes
+ *
+ * @slot          - Main body content
+ * @slot header   - Header content
+ * @slot footer   - Footer content
+ */
+export declare class SpDrawerComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    open: boolean;
+    label: string;
+    placement: SpDrawerPlacement;
+    size: string;
+    closable: boolean;
+    closeOnOverlay: boolean;
+    private _previousFocus;
+    private _touchStartX;
+    private _touchStartY;
+    private _getFocusableElements;
+    private _handleKeydown;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import('lit-html').TemplateResult;
+    updated(changed: Map<string, unknown>): void;
+    private readonly _handleTouchStart;
+    private readonly _handleTouchEnd;
+    _getPanelStyle(): string;
+    readonly _handleClose: () => void;
+    readonly _handleOverlayClick: (e: MouseEvent) => void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-drawer": SpDrawerComponent;
+    }
+}
+//# sourceMappingURL=sp-drawer.d.ts.map

package/dist/components/drawer/sp-drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-drawer.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/sp-drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAE9D;;;;;;;;;;;;;;;;;;;GAmBG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAqB;IAG3C,IAAI,UAAS;IAGb,KAAK,SAAM;IAGX,SAAS,EAAE,iBAAiB,CAAW;IAGvC,IAAI,SAAW;IAGf,QAAQ,UAAQ;IAGhB,cAAc,UAAQ;IAEtB,OAAO,CAAC,cAAc,CAAwB;IAC9C,OAAO,CAAC,YAAY,CAAK;IACzB,OAAO,CAAC,YAAY,CAAK;IAEzB,OAAO,CAAC,qBAAqB;IAU7B,OAAO,CAAC,cAAc,CAwBpB;IAEO,iBAAiB;IAKjB,oBAAoB;IAOpB,MAAM;IAIN,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;IAwC9C,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAKhC;IAEF,OAAO,CAAC,QAAQ,CAAC,eAAe,CAqB9B;IAEF,cAAc,IAAI,MAAM;IAOxB,QAAQ,CAAC,YAAY,aAEnB;IAEF,QAAQ,CAAC,mBAAmB,GAAI,GAAG,UAAU,UAE3C;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

package/dist/components/drawer/sp-drawer.js

@@ -0,0 +1,116 @@
+import { unsafeCSS as c, LitElement as u } from "lit";
+import { property as h, customElement as d } from "lit/decorators.js";
+import p from "./sp-drawer.css.js";
+import { drawerTemplate as f } from "./sp-drawer.template.js";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (t, s, o, n) => {
+  for (var e = n > 1 ? void 0 : n ? v(s, o) : s, r = t.length - 1, a; r >= 0; r--)
+    (a = t[r]) && (e = (n ? a(s, o, e) : a(e)) || e);
+  return n && e && m(s, o, e), e;
+};
+let i = class extends u {
+  constructor() {
+    super(...arguments), this.open = !1, this.label = "", this.placement = "right", this.size = "320px", this.closable = !0, this.closeOnOverlay = !0, this._previousFocus = null, this._touchStartX = 0, this._touchStartY = 0, this._handleKeydown = (t) => {
+      var s, o;
+      if (this.open) {
+        if (t.key === "Escape") {
+          t.preventDefault(), this.open = !1;
+          return;
+        }
+        if (t.key === "Tab") {
+          const n = this._getFocusableElements();
+          if (n.length === 0) {
+            t.preventDefault();
+            return;
+          }
+          const e = n[0], r = n[n.length - 1];
+          t.shiftKey ? (document.activeElement === e || ((s = this.shadowRoot) == null ? void 0 : s.activeElement) === e) && (t.preventDefault(), r.focus()) : (document.activeElement === r || ((o = this.shadowRoot) == null ? void 0 : o.activeElement) === r) && (t.preventDefault(), e.focus());
+        }
+      }
+    }, this._handleTouchStart = (t) => {
+      const s = t.touches[0];
+      s && (this._touchStartX = s.clientX, this._touchStartY = s.clientY);
+    }, this._handleTouchEnd = (t) => {
+      const s = t.changedTouches[0];
+      if (!s) return;
+      const o = s.clientX - this._touchStartX, n = s.clientY - this._touchStartY, e = 80;
+      let r = !1;
+      (this.placement === "right" && o > e && Math.abs(n) < Math.abs(o) || this.placement === "left" && o < -e && Math.abs(n) < Math.abs(o) || this.placement === "bottom" && n > e && Math.abs(o) < Math.abs(n) || this.placement === "top" && n < -e && Math.abs(o) < Math.abs(n)) && (r = !0), r && (this.open = !1);
+    }, this._handleClose = () => {
+      this.open = !1;
+    }, this._handleOverlayClick = (t) => {
+      this.closeOnOverlay && t.target === t.currentTarget && (this.open = !1);
+    };
+  }
+  _getFocusableElements() {
+    var s;
+    const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("dialog");
+    return t ? Array.from(
+      t.querySelectorAll(
+        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'
+      )
+    ).filter((o) => !o.closest("[hidden]")) : [];
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("keydown", this._handleKeydown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("keydown", this._handleKeydown), document.body.style.overflow = "";
+  }
+  render() {
+    return f.call(this);
+  }
+  updated(t) {
+    var s, o, n;
+    if (t.has("open")) {
+      const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("dialog");
+      if (!e) return;
+      if (this.open)
+        document.body.style.overflow = "hidden", this._previousFocus = document.activeElement, e.showModal(), e.addEventListener("touchstart", this._handleTouchStart, { passive: !0 }), e.addEventListener("touchend", this._handleTouchEnd, { passive: !0 }), this.dispatchEvent(
+          new CustomEvent("sp-show", { bubbles: !0, composed: !0 })
+        ), this.updateComplete.then(() => {
+          var a;
+          (a = this._getFocusableElements()[0]) == null || a.focus();
+        });
+      else {
+        document.body.style.overflow = "";
+        const r = e;
+        r.removeEventListener("touchstart", this._handleTouchStart), r.removeEventListener("touchend", this._handleTouchEnd), e.close(), this.dispatchEvent(
+          new CustomEvent("sp-hide", { bubbles: !0, composed: !0 })
+        ), (n = (o = this._previousFocus) == null ? void 0 : o.focus) == null || n.call(o), this._previousFocus = null, setTimeout(
+          () => this.dispatchEvent(
+            new CustomEvent("sp-after-hide", { bubbles: !0, composed: !0 })
+          ),
+          300
+        );
+      }
+    }
+  }
+  _getPanelStyle() {
+    return this.placement === "left" || this.placement === "right" ? `width: ${this.size}; max-width: 100vw;` : `height: ${this.size}; max-height: 100vh; width: 100%;`;
+  }
+};
+i.styles = c(p);
+l([
+  h({ type: Boolean, reflect: !0 })
+], i.prototype, "open", 2);
+l([
+  h({ type: String })
+], i.prototype, "label", 2);
+l([
+  h({ type: String, reflect: !0 })
+], i.prototype, "placement", 2);
+l([
+  h({ type: String })
+], i.prototype, "size", 2);
+l([
+  h({ type: Boolean, reflect: !0 })
+], i.prototype, "closable", 2);
+l([
+  h({ type: Boolean, attribute: "close-on-overlay" })
+], i.prototype, "closeOnOverlay", 2);
+i = l([
+  d("sp-drawer")
+], i);
+export {
+  i as SpDrawerComponent
+};

package/dist/components/drawer/sp-drawer.template.d.ts

@@ -0,0 +1,8 @@
+import { TemplateResult } from 'lit';
+import { SpDrawerComponent } from './sp-drawer.js';
+/**
+ * HTML template for sp-drawer.
+ * Call as: drawerTemplate.call(this) inside render()
+ */
+export declare function drawerTemplate(this: SpDrawerComponent): TemplateResult;
+//# sourceMappingURL=sp-drawer.template.d.ts.map

package/dist/components/drawer/sp-drawer.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-drawer.template.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/sp-drawer.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAExD;;;GAGG;AACH,wBAAgB,cAAc,CAAC,IAAI,EAAE,iBAAiB,GAAG,cAAc,CAsBtE"}

package/dist/components/drawer/sp-drawer.template.js

@@ -0,0 +1,25 @@
+import { nothing as l, html as e } from "lit";
+function a() {
+  return e`
+    <dialog
+      aria-label=${this.label || l}
+      aria-modal="true"
+      @click=${this._handleOverlayClick}
+    >
+      <div class="sp-drawer-panel" style=${this._getPanelStyle()}>
+        ${this.closable ? e`<button
+              class="sp-drawer-close"
+              type="button"
+              aria-label="Close"
+              @click=${this._handleClose}
+            >✕</button>` : l}
+        <slot name="header"></slot>
+        <div class="sp-drawer-body"><slot></slot></div>
+        <slot name="footer"></slot>
+      </div>
+    </dialog>
+  `;
+}
+export {
+  a as drawerTemplate
+};

package/dist/components/drawer/sp-drawer.types.d.ts

@@ -0,0 +1,10 @@
+export type SpDrawerPlacement = "left" | "right" | "top" | "bottom";
+export interface SpDrawerProps {
+    open: boolean;
+    label: string;
+    placement: SpDrawerPlacement;
+    size: string;
+    closable: boolean;
+    closeOnOverlay: boolean;
+}
+//# sourceMappingURL=sp-drawer.types.d.ts.map

package/dist/components/drawer/sp-drawer.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-drawer.types.d.ts","sourceRoot":"","sources":["../../../src/components/drawer/sp-drawer.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,GAAG,QAAQ,CAAC;AAEpE,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,OAAO,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,iBAAiB,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,OAAO,CAAC;CACzB"}

package/dist/components/empty-state/index.d.ts

@@ -0,0 +1,3 @@
+export { SpEmptyStateComponent } from './sp-empty-state.js';
+export type { SpEmptyStateProps } from './sp-empty-state.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/empty-state/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/empty-state/sp-empty-state.css.js

@@ -0,0 +1,4 @@
+const t = ":host{display:block}.sp-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:48px 24px;gap:12px}.sp-empty-state-icon{color:var(--sp-border, #d1d5db)}.sp-empty-state-icon svg,.sp-empty-state-icon img{width:80px;height:80px}.sp-empty-state-title{font-size:18px;font-weight:600;color:var(--sp-text-secondary, #374151);margin:0}.sp-empty-state-description{font-size:14px;color:var(--sp-text-muted, #6b7280);margin:0;line-height:1.6;max-width:360px}.sp-empty-state-actions{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px}.sp-empty-state-actions:empty{display:none}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button]{transition:none!important}}";
+export {
+  t as default
+};

package/dist/components/empty-state/sp-empty-state.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * Empty state component for zero-data views.
+ *
+ * @element sp-empty-state
+ *
+ * @prop {string} title       - Main heading text
+ * @prop {string} description - Supporting description text
+ * @prop {string} icon        - URL of a custom icon image; if empty, a default SVG is shown
+ *
+ * @slot - Action buttons or links shown below the description
+ */
+export declare class SpEmptyStateComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    title: string;
+    description: string;
+    icon: string;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-empty-state": SpEmptyStateComponent;
+    }
+}
+//# sourceMappingURL=sp-empty-state.d.ts.map

package/dist/components/empty-state/sp-empty-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-empty-state.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/sp-empty-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;;GAUG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAAqB;IAG3C,KAAK,SAAmB;IAGxB,WAAW,SAAM;IAGjB,IAAI,SAAM;IAED,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,qBAAqB,CAAC;KACzC;CACF"}

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

@@ -0,0 +1,33 @@
+import { unsafeCSS as y, LitElement as a } from "lit";
+import { property as m, customElement as c } from "lit/decorators.js";
+import f from "./sp-empty-state.css.js";
+import { emptyStateTemplate as u } from "./sp-empty-state.template.js";
+var S = Object.defineProperty, v = Object.getOwnPropertyDescriptor, o = (l, r, s, p) => {
+  for (var t = p > 1 ? void 0 : p ? v(r, s) : r, i = l.length - 1, n; i >= 0; i--)
+    (n = l[i]) && (t = (p ? n(r, s, t) : n(t)) || t);
+  return p && t && S(r, s, t), t;
+};
+let e = class extends a {
+  constructor() {
+    super(...arguments), this.title = "No data found", this.description = "", this.icon = "";
+  }
+  render() {
+    return u.call(this);
+  }
+};
+e.styles = y(f);
+o([
+  m({ type: String })
+], e.prototype, "title", 2);
+o([
+  m({ type: String })
+], e.prototype, "description", 2);
+o([
+  m({ type: String })
+], e.prototype, "icon", 2);
+e = o([
+  c("sp-empty-state")
+], e);
+export {
+  e as SpEmptyStateComponent
+};

package/dist/components/empty-state/sp-empty-state.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpEmptyStateComponent } from './sp-empty-state.js';
+export declare function emptyStateTemplate(this: SpEmptyStateComponent): TemplateResult;
+//# sourceMappingURL=sp-empty-state.template.d.ts.map

package/dist/components/empty-state/sp-empty-state.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-empty-state.template.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/sp-empty-state.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,qBAAqB,GAAG,cAAc,CAoB9E"}

package/dist/components/empty-state/sp-empty-state.template.js

@@ -0,0 +1,21 @@
+import { nothing as s, html as t } from "lit";
+function e() {
+  return t`
+    <div class="sp-empty-state">
+      <div class="sp-empty-state-icon">
+        ${this.icon ? t`<img src=${this.icon} alt="" aria-hidden="true" />` : t`<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <rect x="8" y="16" width="48" height="36" rx="4" stroke="#d1d5db" stroke-width="2" />
+              <path d="M8 24h48" stroke="#d1d5db" stroke-width="2" />
+              <circle cx="32" cy="38" r="8" stroke="#d1d5db" stroke-width="2" />
+              <path d="M32 34v4l2 2" stroke="#d1d5db" stroke-width="2" stroke-linecap="round" />
+            </svg>`}
+      </div>
+      <h3 class="sp-empty-state-title">${this.title}</h3>
+      ${this.description ? t`<p class="sp-empty-state-description">${this.description}</p>` : s}
+      <div class="sp-empty-state-actions"><slot></slot></div>
+    </div>
+  `;
+}
+export {
+  e as emptyStateTemplate
+};

package/dist/components/empty-state/sp-empty-state.types.d.ts

@@ -0,0 +1,6 @@
+export interface SpEmptyStateProps {
+    title: string;
+    description: string;
+    icon: string;
+}
+//# sourceMappingURL=sp-empty-state.types.d.ts.map

package/dist/components/empty-state/sp-empty-state.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-empty-state.types.d.ts","sourceRoot":"","sources":["../../../src/components/empty-state/sp-empty-state.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;CACd"}

package/dist/components/file-upload/index.d.ts

@@ -0,0 +1,3 @@
+export { SpFileUploadComponent } from './sp-file-upload.js';
+export type { SpFileUploadProps, SpFileUploadVariant } from './sp-file-upload.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/file-upload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/file-upload/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAC5D,YAAY,EAAE,iBAAiB,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/file-upload/sp-file-upload.css.js

@@ -0,0 +1,4 @@
+const e = ":host{display:block;font-family:inherit}.sp-file-dropzone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:32px 24px;border:2px dashed var(--sp-border, #d1d5db);border-radius:8px;background:var(--sp-bg-subtle, #f9fafb);cursor:pointer;transition:border-color .2s,background .2s;text-align:center}.sp-file-dropzone:hover:not(.sp-file-dropzone--disabled){border-color:var(--sp-primary, #3b82f6);background:var(--sp-primary-bg, #eff6ff)}.sp-file-dropzone--dragging{border-color:var(--sp-primary, #3b82f6);background:var(--sp-primary-bg, #eff6ff)}.sp-file-dropzone--disabled{opacity:.5;cursor:not-allowed}.sp-file-input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;width:100%;height:100%;cursor:pointer}.sp-file-input:disabled{cursor:not-allowed}.sp-file-icon{width:40px;height:40px;color:var(--sp-text-placeholder, #9ca3af);pointer-events:none}.sp-file-label{font-size:14px;color:var(--sp-text-secondary, #374151);font-weight:500;pointer-events:none}.sp-file-hint{font-size:12px;color:var(--sp-text-muted, #6b7280);pointer-events:none}.sp-file-error{display:block;font-size:12px;color:var(--sp-error, #FF4D4F);margin-top:4px}.sp-file-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}.sp-file-item{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--sp-bg-subtle, #f9fafb);border:1px solid var(--sp-border-subtle, #e5e7eb);border-radius:6px;font-size:13px;flex-wrap:wrap}.sp-file-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--sp-text-secondary, #374151)}.sp-file-size{flex-shrink:0;color:var(--sp-text-placeholder, #9ca3af)}.sp-file-remove{background:none;border:none;cursor:pointer;color:var(--sp-text-placeholder, #9ca3af);padding:0;line-height:1;flex-shrink:0}.sp-file-remove:hover{color:var(--sp-error, #FF4D4F)}.sp-file-dropzone:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}.sp-file-remove:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}.sp-file-progress{width:100%;height:4px;background:var(--sp-border-subtle, #e5e7eb);border-radius:2px;overflow:hidden;margin-top:4px}.sp-file-progress-bar{height:100%;background:var(--sp-primary, #3b82f6);border-radius:2px;transition:width .3s ease}@media(max-width:480px){.sp-file-dropzone{padding:20px 16px}.sp-file-icon{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}button,a,[role=button],.sp-file-dropzone{transition:none!important}}";
+export {
+  e as default
+};

package/dist/components/file-upload/sp-file-upload.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+import { SpFileUploadVariant } from './sp-file-upload.types.js';
+/**
+ * Reusable file upload component with drag-and-drop support.
+ *
+ * @element sp-file-upload
+ *
+ * @prop {string}               accept   - Accepted file types (e.g. "image/*,.pdf")
+ * @prop {boolean}              multiple - Allows multiple file selection
+ * @prop {boolean}              disabled - Disables the component
+ * @prop {number}               maxSize  - Maximum file size in bytes (0 = no limit)
+ * @prop {string}               label    - Dropzone label text
+ * @prop {string}               hint     - Hint text inside the dropzone
+ * @prop {string}               error    - External error message
+ * @prop {SpFileUploadVariant}  variant  - Visual variant: default | compact
+ *
+ * @fires {CustomEvent<{ files: File[] }>}     sp-change - Emitted when files change
+ * @fires {CustomEvent<{ message: string }>}   sp-error  - Emitted when validation fails
+ */
+export declare class SpFileUploadComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    accept: string;
+    multiple: boolean;
+    disabled: boolean;
+    maxSize: number;
+    label: string;
+    hint: string;
+    error: string;
+    variant: SpFileUploadVariant;
+    showFileList: boolean;
+    /**
+     * Map of file name -> upload progress (0-100).
+     * Consumer sets this after receiving sp-change event.
+     */
+    progress: Record<string, number>;
+    _dragging: boolean;
+    _files: File[];
+    _validationError: string;
+    readonly _handleDragOver: (e: DragEvent) => void;
+    readonly _handleDragLeave: () => void;
+    readonly _handleDrop: (e: DragEvent) => void;
+    readonly _handleInputChange: (e: Event) => void;
+    _processFiles(files: File[]): void;
+    _formatSize(bytes: number): string;
+    readonly _removeFile: (index: number) => void;
+    readonly _handleZoneClick: () => void;
+    render(): import('lit-html').TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-file-upload": SpFileUploadComponent;
+    }
+}
+//# sourceMappingURL=sp-file-upload.d.ts.map

package/dist/components/file-upload/sp-file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-file-upload.d.ts","sourceRoot":"","sources":["../../../src/components/file-upload/sp-file-upload.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE;;;;;;;;;;;;;;;;GAgBG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAAqB;IAG3C,MAAM,SAAM;IAGZ,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,OAAO,SAAK;IAGZ,KAAK,SAAwC;IAG7C,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,OAAO,EAAE,mBAAmB,CAAa;IAGzC,YAAY,UAAQ;IAEpB;;;OAGG;IAEH,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAM;IAEtC,SAAS,UAAS;IAClB,MAAM,EAAE,IAAI,EAAE,CAAM;IACpB,gBAAgB,SAAM;IAEtB,QAAQ,CAAC,eAAe,GAAI,GAAG,SAAS,UAMtC;IAEF,QAAQ,CAAC,gBAAgB,aAGvB;IAEF,QAAQ,CAAC,WAAW,GAAI,GAAG,SAAS,UAMlC;IAEF,QAAQ,CAAC,kBAAkB,GAAI,GAAG,KAAK,UAKrC;IAEF,aAAa,CAAC,KAAK,EAAE,IAAI,EAAE;IAgB3B,WAAW,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM;IAMlC,QAAQ,CAAC,WAAW,GAAI,OAAO,MAAM,UAInC;IAEF,QAAQ,CAAC,gBAAgB,aAEvB;IAEO,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,qBAAqB,CAAC;KACzC;CACF"}

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

@@ -0,0 +1,81 @@
+import { unsafeCSS as n, LitElement as f } from "lit";
+import { property as o, customElement as u } from "lit/decorators.js";
+import d from "./sp-file-upload.css.js";
+import { fileUploadTemplate as m } from "./sp-file-upload.template.js";
+var c = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, r = (e, t, s, a) => {
+  for (var l = a > 1 ? void 0 : a ? _(t, s) : t, p = e.length - 1, h; p >= 0; p--)
+    (h = e[p]) && (l = (a ? h(t, s, l) : h(l)) || l);
+  return a && l && c(t, s, l), l;
+};
+let i = class extends f {
+  constructor() {
+    super(...arguments), this.accept = "", this.multiple = !1, this.disabled = !1, this.maxSize = 0, this.label = "Drop files here or click to upload", this.hint = "", this.error = "", this.variant = "default", this.showFileList = !0, this.progress = {}, this._dragging = !1, this._files = [], this._validationError = "", this._handleDragOver = (e) => {
+      e.preventDefault(), this.disabled || (this._dragging = !0, this.requestUpdate());
+    }, this._handleDragLeave = () => {
+      this._dragging = !1, this.requestUpdate();
+    }, this._handleDrop = (e) => {
+      var s;
+      if (e.preventDefault(), this._dragging = !1, this.disabled) return;
+      const t = Array.from(((s = e.dataTransfer) == null ? void 0 : s.files) ?? []);
+      this._processFiles(t);
+    }, this._handleInputChange = (e) => {
+      const t = e.target, s = Array.from(t.files ?? []);
+      this._processFiles(s), t.value = "";
+    }, this._removeFile = (e) => {
+      this._files = this._files.filter((t, s) => s !== e), this.requestUpdate(), this.dispatchEvent(new CustomEvent("sp-change", { detail: { files: this._files }, bubbles: !0, composed: !0 }));
+    }, this._handleZoneClick = () => {
+      var e, t;
+      this.disabled || (t = (e = this.shadowRoot) == null ? void 0 : e.querySelector(".sp-file-input")) == null || t.click();
+    };
+  }
+  _processFiles(e) {
+    if (this.maxSize > 0 && e.filter((s) => s.size > this.maxSize).length > 0) {
+      this._validationError = `File exceeds max size of ${this._formatSize(this.maxSize)}`, this.requestUpdate(), this.dispatchEvent(new CustomEvent("sp-error", { detail: { message: this._validationError }, bubbles: !0, composed: !0 }));
+      return;
+    }
+    this._validationError = "", this._files = this.multiple ? [...this._files, ...e] : e, this.requestUpdate(), this.dispatchEvent(new CustomEvent("sp-change", { detail: { files: this._files }, bubbles: !0, composed: !0 }));
+  }
+  _formatSize(e) {
+    return e < 1024 ? e + " B" : e < 1024 * 1024 ? (e / 1024).toFixed(1) + " KB" : (e / (1024 * 1024)).toFixed(1) + " MB";
+  }
+  render() {
+    return m.call(this);
+  }
+};
+i.styles = n(d);
+r([
+  o({ type: String })
+], i.prototype, "accept", 2);
+r([
+  o({ type: Boolean })
+], i.prototype, "multiple", 2);
+r([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
+r([
+  o({ type: Number, attribute: "max-size" })
+], i.prototype, "maxSize", 2);
+r([
+  o({ type: String })
+], i.prototype, "label", 2);
+r([
+  o({ type: String })
+], i.prototype, "hint", 2);
+r([
+  o({ type: String })
+], i.prototype, "error", 2);
+r([
+  o({ type: String, reflect: !0 })
+], i.prototype, "variant", 2);
+r([
+  o({ type: Boolean, attribute: "show-file-list" })
+], i.prototype, "showFileList", 2);
+r([
+  o({ type: Object })
+], i.prototype, "progress", 2);
+i = r([
+  u("sp-file-upload")
+], i);
+export {
+  i as SpFileUploadComponent
+};

package/dist/components/file-upload/sp-file-upload.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpFileUploadComponent } from './sp-file-upload.js';
+export declare function fileUploadTemplate(this: SpFileUploadComponent): TemplateResult;
+//# sourceMappingURL=sp-file-upload.template.d.ts.map

package/dist/components/file-upload/sp-file-upload.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-file-upload.template.d.ts","sourceRoot":"","sources":["../../../src/components/file-upload/sp-file-upload.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEzD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,qBAAqB,CAAC;AAEjE,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,qBAAqB,GAAG,cAAc,CA+C9E"}

package/dist/components/file-upload/sp-file-upload.template.js

@@ -0,0 +1,51 @@
+import { nothing as i, html as s } from "lit";
+import { classMap as p } from "lit/directives/class-map.js";
+function h() {
+  return s`
+    <div class="sp-file-upload-wrapper">
+      <div
+        class=${p({ "sp-file-dropzone": !0, "sp-file-dropzone--dragging": this._dragging, "sp-file-dropzone--disabled": this.disabled })}
+        @dragover=${this._handleDragOver}
+        @dragleave=${this._handleDragLeave}
+        @drop=${this._handleDrop}
+        @click=${this._handleZoneClick}
+      >
+        <input
+          type="file"
+          class="sp-file-input"
+          accept=${this.accept || i}
+          ?multiple=${this.multiple}
+          ?disabled=${this.disabled}
+          @change=${this._handleInputChange}
+        />
+        <svg class="sp-file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+          <path d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"/>
+        </svg>
+        <span class="sp-file-label">${this.label}</span>
+        ${this.hint ? s`<span class="sp-file-hint">${this.hint}</span>` : i}
+      </div>
+      ${this._validationError || this.error ? s`<span class="sp-file-error">${this._validationError || this.error}</span>` : i}
+      ${this.showFileList && this._files.length > 0 ? s`
+        <ul class="sp-file-list">
+          ${this._files.map((e, r) => {
+    var l;
+    const a = (l = this.progress) == null ? void 0 : l[e.name], t = typeof a == "number";
+    return s`
+              <li class="sp-file-item">
+                <span class="sp-file-name">${e.name}</span>
+                <span class="sp-file-size">${this._formatSize(e.size)}</span>
+                <button class="sp-file-remove" type="button" @click=${() => this._removeFile(r)} aria-label="Remove file">✕</button>
+                ${t ? s`<div class="sp-file-progress" role="progressbar" aria-valuenow=${a} aria-valuemin="0" aria-valuemax="100">
+                      <div class="sp-file-progress-bar" style="width: ${a}%"></div>
+                    </div>` : i}
+              </li>
+            `;
+  })}
+        </ul>
+      ` : i}
+    </div>
+  `;
+}
+export {
+  h as fileUploadTemplate
+};

package/dist/components/file-upload/sp-file-upload.types.d.ts

@@ -0,0 +1,14 @@
+export type SpFileUploadVariant = "default" | "compact";
+export interface SpFileUploadProps {
+    accept: string;
+    multiple: boolean;
+    disabled: boolean;
+    maxSize: number;
+    label: string;
+    hint: string;
+    error: string;
+    variant: SpFileUploadVariant;
+    showFileList: boolean;
+    progress: Record<string, number>;
+}
+//# sourceMappingURL=sp-file-upload.types.d.ts.map

package/dist/components/file-upload/sp-file-upload.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-file-upload.types.d.ts","sourceRoot":"","sources":["../../../src/components/file-upload/sp-file-upload.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,mBAAmB,GAAG,SAAS,GAAG,SAAS,CAAC;AAExD,MAAM,WAAW,iBAAiB;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,mBAAmB,CAAC;IAC7B,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC"}

package/dist/components/form-field/index.d.ts

@@ -0,0 +1,3 @@
+export { SpFormFieldComponent } from './sp-form-field.js';
+export type { SpFormFieldProps } from './sp-form-field.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/form-field/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/form-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAC1D,YAAY,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC"}

package/dist/components/form-field/sp-form-field.css.js

@@ -0,0 +1,4 @@
+const o = ":host{display:block;font-family:inherit}.sp-form-field{display:flex;flex-direction:column;gap:4px}.sp-form-field--disabled{opacity:.5}.sp-form-field-label{font-size:14px;font-weight:500;color:var(--sp-text-secondary, #374151);line-height:1.4}.sp-required{color:var(--sp-error, #FF4D4F)}.sp-form-field-control{display:block}.sp-form-field-error{font-size:12px;color:var(--sp-error, #FF4D4F)}.sp-form-field-hint{font-size:12px;color:var(--sp-text-muted, #6b7280)}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}";
+export {
+  o as default
+};