sp-component 0.0.1

package/dist/components/breadcrumb/sp-breadcrumb-item.template.js

@@ -0,0 +1,23 @@
+import { nothing as r, html as a } from "lit";
+function s() {
+  return a`
+    <li class="sp-breadcrumb-item">
+      ${this.active ? a`
+            <span class="sp-breadcrumb-current" aria-current="page"><slot></slot></span>
+          ` : a`
+            <a
+              class="sp-breadcrumb-link"
+              href=${this.href || r}
+              target=${this.target || r}
+              rel=${this.rel || r}
+            >
+              <slot></slot>
+            </a>
+            <span class="sp-breadcrumb-separator" aria-hidden="true">${this.separator}</span>
+          `}
+    </li>
+  `;
+}
+export {
+  s as breadcrumbItemTemplate
+};

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

@@ -0,0 +1,4 @@
+const e = ":host{display:block}.sp-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;list-style:none;margin:0;padding:0;font-size:14px}.sp-breadcrumb-ellipsis-item{display:inline-flex;align-items:center;gap:4px}.sp-breadcrumb-ellipsis{background:none;border:none;cursor:pointer;font-size:14px;color:var(--sp-text-muted, #6b7280);padding:0 4px;border-radius:4px}.sp-breadcrumb-ellipsis:hover{color:var(--sp-text-secondary, #374151);background:var(--sp-bg-muted, #f3f4f6)}.sp-breadcrumb-ellipsis:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(max-width:480px){::slotted(sp-breadcrumb-item:not(:nth-last-child(-n+2))){display:none}}@media(prefers-reduced-motion:reduce){:host{transition:none!important}}";
+export {
+  e as default
+};

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

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+/**
+ * Breadcrumb navigation component.
+ *
+ * @element sp-breadcrumb
+ *
+ * @prop {string} separator - The separator shown between items (default "/")
+ * @prop {number} maxItems  - Maximum items to show; when exceeded shows first + "..." + last items. 0 = no limit.
+ *
+ * @slot - Default slot for sp-breadcrumb-item elements
+ */
+export declare class SpBreadcrumbComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    separator: string;
+    maxItems: number;
+    _expanded: boolean;
+    render(): import('lit-html').TemplateResult;
+    readonly _handleSlotChange: () => void;
+    _applyOverflow(): void;
+    readonly _handleExpandClick: () => void;
+    updated(changed: Map<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-breadcrumb": SpBreadcrumbComponent;
+    }
+}
+//# sourceMappingURL=sp-breadcrumb.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-breadcrumb.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/sp-breadcrumb.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAK5C;;;;;;;;;GASG;AACH,qBACa,qBAAsB,SAAQ,UAAU;IACnD,OAAgB,MAAM,0BAAqB;IAG3C,SAAS,SAAO;IAGhB,QAAQ,SAAK;IAGb,SAAS,UAAS;IAET,MAAM;IAIf,QAAQ,CAAC,iBAAiB,aAOxB;IAEF,cAAc,IAAI,IAAI;IAkBtB,QAAQ,CAAC,kBAAkB,aAGzB;IAEO,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC;CAK/C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,qBAAqB,CAAC;KACxC;CACF"}

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

@@ -0,0 +1,54 @@
+import { unsafeCSS as n, LitElement as h } from "lit";
+import { property as l, state as d, customElement as u } from "lit/decorators.js";
+import c from "./sp-breadcrumb.css.js";
+import { breadcrumbTemplate as f } from "./sp-breadcrumb.template.js";
+var _ = Object.defineProperty, b = Object.getOwnPropertyDescriptor, p = (e, r, a, s) => {
+  for (var t = s > 1 ? void 0 : s ? b(r, a) : r, m = e.length - 1, i; m >= 0; m--)
+    (i = e[m]) && (t = (s ? i(r, a, t) : i(t)) || t);
+  return s && t && _(r, a, t), t;
+};
+let o = class extends h {
+  constructor() {
+    super(...arguments), this.separator = "/", this.maxItems = 0, this._expanded = !1, this._handleSlotChange = () => {
+      const e = [...this.querySelectorAll("sp-breadcrumb-item")];
+      e.forEach((r, a) => {
+        r.separator = this.separator, r.active = a === e.length - 1;
+      }), this._applyOverflow();
+    }, this._handleExpandClick = () => {
+      this._expanded = !0, this._applyOverflow();
+    };
+  }
+  render() {
+    return f.call(this);
+  }
+  _applyOverflow() {
+    const e = [...this.querySelectorAll("sp-breadcrumb-item")];
+    if (this.maxItems <= 0 || this._expanded || e.length <= this.maxItems) {
+      e.forEach((s) => s.removeAttribute("hidden"));
+      return;
+    }
+    const r = this.maxItems - 1, a = e.length - r;
+    e.forEach((s, t) => {
+      t === 0 || t >= a ? s.removeAttribute("hidden") : s.setAttribute("hidden", "");
+    });
+  }
+  updated(e) {
+    (e.has("separator") || e.has("maxItems") || e.has("_expanded")) && this._handleSlotChange();
+  }
+};
+o.styles = n(c);
+p([
+  l({ type: String })
+], o.prototype, "separator", 2);
+p([
+  l({ type: Number })
+], o.prototype, "maxItems", 2);
+p([
+  d()
+], o.prototype, "_expanded", 2);
+o = p([
+  u("sp-breadcrumb")
+], o);
+export {
+  o as SpBreadcrumbComponent
+};

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

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

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

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

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

@@ -0,0 +1,22 @@
+import { nothing as e, html as l } from "lit";
+function i() {
+  const t = [...this.querySelectorAll("sp-breadcrumb-item")], s = this.maxItems > 0 && !this._expanded && t.length > this.maxItems;
+  return l`
+    <nav aria-label="breadcrumb">
+      <ol class="sp-breadcrumb">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+        ${s ? l`<li class="sp-breadcrumb-ellipsis-item">
+              <button
+                class="sp-breadcrumb-ellipsis"
+                type="button"
+                aria-label="Show all breadcrumbs"
+                @click=${this._handleExpandClick}
+              >…</button>
+            </li>` : e}
+      </ol>
+    </nav>
+  `;
+}
+export {
+  i as breadcrumbTemplate
+};

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

@@ -0,0 +1,11 @@
+export interface SpBreadcrumbProps {
+    separator: string;
+    maxItems: number;
+}
+export interface SpBreadcrumbItemProps {
+    href: string;
+    target: string;
+    rel: string;
+    active: boolean;
+}
+//# sourceMappingURL=sp-breadcrumb.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-breadcrumb.types.d.ts","sourceRoot":"","sources":["../../../src/components/breadcrumb/sp-breadcrumb.types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,OAAO,CAAC;CACjB"}

package/dist/components/button/index.d.ts

@@ -0,0 +1,3 @@
+export { SpButtonComponent } from './sp-button.js';
+export type { SpButtonProps, SpButtonVariant, SpButtonSize, SpButtonType } from './sp-button.types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,YAAY,EAAE,aAAa,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC"}

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

@@ -0,0 +1,4 @@
+const t = ':host{display:inline-block}:host([full-width]){display:block;width:100%}button,a{display:inline-flex;align-items:center;justify-content:center;gap:6px;width:100%;border:none;border-radius:var(--sp-button-radius, 4px);font-size:var(--sp-button-font-size, 14px);font-family:inherit;font-weight:500;cursor:pointer;transition:var(--sp-button-transition, opacity .2s);line-height:1;text-decoration:none;box-sizing:border-box}:host([size="sm"]) button,:host([size="sm"]) a{padding:6px 12px;font-size:12px}:host([size="md"]) button,:host([size="md"]) a{padding:8px 16px;font-size:14px}:host([size="lg"]) button,:host([size="lg"]) a{padding:12px 24px;font-size:16px}:host([variant="primary"]) button,:host([variant="primary"]) a{background-color:var(--sp-primary, #3b82f6);color:var(--sp-bg, #ffffff)}:host([variant="secondary"]) button,:host([variant="secondary"]) a{background-color:var(--sp-text-muted, #6b7280);color:var(--sp-bg, #ffffff)}:host([variant="ghost"]) button,:host([variant="ghost"]) a{background-color:transparent;color:var(--sp-primary, #3b82f6);border:1px solid var(--sp-primary, #3b82f6)}:host([variant="destructive"]) button,:host([variant="destructive"]) a{background-color:var(--sp-error, #FF4D4F);color:var(--sp-bg, #ffffff)}:host(:not([disabled]):not([loading])) button:hover,:host(:not([disabled]):not([loading])) a:hover{opacity:.85}:host([disabled]) button,:host([disabled]) a{opacity:.5;cursor:not-allowed;pointer-events:none}:host([loading]) button,:host([loading]) a{cursor:wait;opacity:.75;pointer-events:none}.sp-spinner{display:inline-block;width:var(--sp-button-spinner-size, 1em);height:var(--sp-button-spinner-size, 1em);border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:sp-spin .6s linear infinite;flex-shrink:0}@keyframes sp-spin{to{transform:rotate(360deg)}}button:focus-visible,a:focus-visible{outline:2px solid var(--sp-primary, #3b82f6);outline-offset:2px}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}';
+export {
+  t as default
+};

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

@@ -0,0 +1,56 @@
+import { LitElement } from 'lit';
+import { SpButtonVariant, SpButtonSize, SpButtonType } from './sp-button.types.js';
+/**
+ * Reusable button component compatible with any web framework.
+ *
+ * @element sp-button
+ *
+ * @prop {SpButtonVariant} variant   - Visual style: primary | secondary | ghost | destructive
+ * @prop {SpButtonSize}    size      - Size: sm | md | lg
+ * @prop {boolean}         disabled  - Disables the button
+ * @prop {boolean}         loading   - Shows a spinner and disables interaction
+ * @prop {boolean}         fullWidth - Stretches the button to 100% of its container
+ * @prop {string}          label     - Accessible aria-label
+ * @prop {SpButtonType}    type      - Native button type: button | submit | reset
+ * @prop {string}          href      - Renders as <a> when provided
+ * @prop {string}          target    - Link target (_blank, _self, etc.) — used with href
+ * @prop {string}          name      - Native button name for form submission
+ * @prop {string}          value     - Native button value for form submission
+ *
+ * @fires {CustomEvent<{ source: string }>} sp-click - Emitted on click when not disabled/loading
+ *
+ * @slot          - Button label / content
+ * @slot prefix   - Content before the label (e.g. icon)
+ * @slot suffix   - Content after the label (e.g. icon)
+ *
+ * @csspart button - The inner <button> or <a> element
+ *
+ * @cssprop [--sp-button-radius=4px]               - Border radius
+ * @cssprop [--sp-button-font-size=14px]            - Base font size
+ * @cssprop [--sp-button-transition=opacity .2s]    - Hover/focus transition
+ * @cssprop [--sp-button-spinner-size=1em]          - Loading spinner size
+ */
+export declare class SpButtonComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    variant: SpButtonVariant;
+    size: SpButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    fullWidth: boolean;
+    label: string;
+    type: SpButtonType;
+    href: string;
+    target: string;
+    name: string;
+    value: string;
+    render(): import('lit-html').TemplateResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly _handleClick;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-button": SpButtonComponent;
+    }
+}
+//# sourceMappingURL=sp-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-button.d.ts","sourceRoot":"","sources":["../../../src/components/button/sp-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAExF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,qBACa,iBAAkB,SAAQ,UAAU;IAC/C,OAAgB,MAAM,0BAAqB;IAG3C,OAAO,EAAE,eAAe,CAAa;IAGrC,IAAI,EAAE,YAAY,CAAQ;IAG1B,QAAQ,UAAS;IAGjB,OAAO,UAAS;IAGhB,SAAS,UAAS;IAGlB,KAAK,SAAM;IAGX,IAAI,EAAE,YAAY,CAAY;IAG9B,IAAI,SAAM;IAGV,MAAM,SAAM;IAGZ,IAAI,SAAM;IAGV,KAAK,SAAM;IAEF,MAAM;IAIN,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;IAKrC,OAAO,CAAC,QAAQ,CAAC,YAAY,CAa3B;CACH;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,iBAAiB,CAAC;KAChC;CACF"}

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

@@ -0,0 +1,75 @@
+import { unsafeCSS as c, LitElement as u } from "lit";
+import { property as r, customElement as h } from "lit/decorators.js";
+import d from "./sp-button.css.js";
+import { buttonTemplate as y } from "./sp-button.template.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, e = (i, p, s, l) => {
+  for (var o = l > 1 ? void 0 : l ? m(p, s) : p, n = i.length - 1, a; n >= 0; n--)
+    (a = i[n]) && (o = (l ? a(p, s, o) : a(o)) || o);
+  return l && o && f(p, s, o), o;
+};
+let t = class extends u {
+  constructor() {
+    super(...arguments), this.variant = "primary", this.size = "md", this.disabled = !1, this.loading = !1, this.fullWidth = !1, this.label = "", this.type = "button", this.href = "", this.target = "", this.name = "", this.value = "", this._handleClick = (i) => {
+      if (this.disabled || this.loading) {
+        i.stopImmediatePropagation();
+        return;
+      }
+      this.dispatchEvent(
+        new CustomEvent("sp-click", {
+          bubbles: !0,
+          composed: !0,
+          detail: { source: "sp-button" }
+        })
+      );
+    };
+  }
+  render() {
+    return y.call(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("click", this._handleClick);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this._handleClick);
+  }
+};
+t.styles = c(d);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "variant", 2);
+e([
+  r({ type: String, reflect: !0 })
+], t.prototype, "size", 2);
+e([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+e([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "loading", 2);
+e([
+  r({ type: Boolean, reflect: !0, attribute: "full-width" })
+], t.prototype, "fullWidth", 2);
+e([
+  r({ type: String })
+], t.prototype, "label", 2);
+e([
+  r({ type: String })
+], t.prototype, "type", 2);
+e([
+  r({ type: String })
+], t.prototype, "href", 2);
+e([
+  r({ type: String })
+], t.prototype, "target", 2);
+e([
+  r({ type: String })
+], t.prototype, "name", 2);
+e([
+  r({ type: String })
+], t.prototype, "value", 2);
+t = e([
+  h("sp-button")
+], t);
+export {
+  t as SpButtonComponent
+};

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

@@ -0,0 +1,10 @@
+import { TemplateResult } from 'lit';
+import { SpButtonComponent } from './sp-button.js';
+/**
+ * HTML template for sp-button.
+ * Renders as <a> when href is provided, otherwise as <button>.
+ *
+ * Call as: buttonTemplate.call(this) inside render()
+ */
+export declare function buttonTemplate(this: SpButtonComponent): TemplateResult;
+//# sourceMappingURL=sp-button.template.d.ts.map

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

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

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

@@ -0,0 +1,39 @@
+import { nothing as t, html as a } from "lit";
+function i(e) {
+  return a`
+    ${e.loading ? a`<span class="sp-spinner" aria-hidden="true"></span>` : t}
+    <slot name="prefix"></slot>
+    <slot></slot>
+    <slot name="suffix"></slot>
+  `;
+}
+function s() {
+  const e = this.disabled || this.loading;
+  return this.href ? a`
+      <a
+        part="button"
+        href=${e ? t : this.href}
+        target=${this.target || t}
+        aria-label=${this.label || t}
+        aria-disabled=${e ? "true" : t}
+        role="button"
+        tabindex=${e ? "-1" : t}
+      >
+        ${i(this)}
+      </a>
+    ` : a`
+    <button
+      part="button"
+      type=${this.type}
+      ?disabled=${e}
+      name=${this.name || t}
+      value=${this.value || t}
+      aria-label=${this.label || t}
+    >
+      ${i(this)}
+    </button>
+  `;
+}
+export {
+  s as buttonTemplate
+};

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

@@ -0,0 +1,17 @@
+export type SpButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+export type SpButtonSize = "sm" | "md" | "lg";
+export type SpButtonType = "button" | "submit" | "reset";
+export interface SpButtonProps {
+    variant: SpButtonVariant;
+    size: SpButtonSize;
+    disabled: boolean;
+    loading: boolean;
+    fullWidth: boolean;
+    label: string;
+    type: SpButtonType;
+    href: string;
+    target: string;
+    name: string;
+    value: string;
+}
+//# sourceMappingURL=sp-button.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sp-button.types.d.ts","sourceRoot":"","sources":["../../../src/components/button/sp-button.types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,eAAe,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,aAAa,CAAC;AAEhF,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEzD,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,eAAe,CAAC;IACzB,IAAI,EAAE,YAAY,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,YAAY,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf"}

package/dist/components/calendar/index.d.ts

@@ -0,0 +1,5 @@
+export { SpCalendarComponent } from './sp-calendar.js';
+export type { SpCalendarProps, SpCalendarView, SpCalendarMode, SpCalendarSlideDir, } from './sp-calendar.types.js';
+export { SpCalendarDatePickerComponent } from './sp-calendar-date-picker.js';
+export type { SpDatePickerFormat } from './sp-calendar-date-picker.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/calendar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AACvD,YAAY,EACV,eAAe,EACf,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAC7E,YAAY,EAAE,kBAAkB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/components/calendar/sp-calendar-date-picker.css.js

@@ -0,0 +1,4 @@
+const r = ":host{display:inline-block;--sp-dp-bg: var(--sp-bg, #ffffff);--sp-dp-border: var(--sp-border, #e2e8f0);--sp-dp-border-focus: var(--sp-primary, #6366f1);--sp-dp-radius: 8px;--sp-dp-color: var(--sp-text, #1e293b);--sp-dp-placeholder-color: var(--sp-text-placeholder, #94a3b8);--sp-dp-label-color: var(--sp-text-secondary, #374151);--sp-dp-hint-color: var(--sp-text-muted, #64748b);--sp-dp-error-color: var(--sp-error, #FF4D4F);--sp-dp-disabled-bg: var(--sp-bg-subtle, #f8fafc);--sp-dp-disabled-color: var(--sp-border-subtle, #cbd5e1);--sp-dp-shadow: 0 4px 24px rgba(0, 0, 0, .08);--sp-dp-icon-color: var(--sp-text-placeholder, #94a3b8);font-family:inherit}.sp-date-picker{display:inline-flex;flex-direction:column;gap:4px;position:relative}.sp-date-picker__label{font-size:.82rem;font-weight:600;color:var(--sp-dp-label-color);line-height:1.4}.sp-date-picker__field{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--sp-dp-border);border-radius:var(--sp-dp-radius);background:var(--sp-dp-bg);cursor:pointer;transition:border-color .15s,box-shadow .15s;min-width:200px;position:relative}.sp-date-picker__field:hover:not(.sp-date-picker__field--disabled){border-color:var(--sp-primary-bg-hover, #a5b4fc)}.sp-date-picker__field:focus-within,.sp-date-picker__field--open{border-color:var(--sp-dp-border-focus);box-shadow:0 0 0 3px var(--sp-primary-focus, rgba(99, 102, 241, .12));outline:none}.sp-date-picker__field--disabled{background:var(--sp-dp-disabled-bg);cursor:not-allowed;opacity:.6}.sp-date-picker__field--error{border-color:var(--sp-dp-error-color)}.sp-date-picker__field--error:hover:not(.sp-date-picker__field--disabled){border-color:var(--sp-dp-error-color)}.sp-date-picker__field--error:focus-within{box-shadow:0 0 0 3px var(--sp-error-focus, rgba(255, 77, 79, .12))}.sp-date-picker__input{flex:1;border:none;background:transparent;font-size:.875rem;color:var(--sp-dp-color);font-family:inherit;cursor:pointer;min-width:0;outline:none}.sp-date-picker__input::placeholder{color:var(--sp-dp-placeholder-color)}.sp-date-picker__input:read-only{cursor:pointer}.sp-date-picker__icon{color:var(--sp-dp-icon-color);flex-shrink:0;width:16px;height:16px}.sp-date-picker__popover{position:absolute;top:calc(100% + 4px);left:0;z-index:9999;display:none}.sp-date-picker__popover--open{display:block}.sp-date-picker__hint{font-size:.78rem;color:var(--sp-dp-hint-color);line-height:1.4}.sp-date-picker__error{font-size:.78rem;color:var(--sp-dp-error-color);line-height:1.4}:host([disabled]) .sp-date-picker__field{pointer-events:none}@media(prefers-reduced-motion:reduce){.sp-date-picker__field{transition:none}}";
+export {
+  r as default
+};

package/dist/components/calendar/sp-calendar-date-picker.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+export type SpDatePickerFormat = "YYYY-MM-DD" | "DD/MM/YYYY" | "MM/DD/YYYY";
+/**
+ * Date picker component — text field + calendar popover.
+ *
+ * @element sp-date-picker
+ *
+ * @prop {string}  value           - Selected date in ISO format (YYYY-MM-DD)
+ * @prop {string}  min             - Minimum selectable date (YYYY-MM-DD)
+ * @prop {string}  max             - Maximum selectable date (YYYY-MM-DD)
+ * @prop {string}  locale          - BCP 47 locale
+ * @prop {number}  firstDayOfWeek  - 0=Sunday, 1=Monday (default: 1)
+ * @prop {string}  mode            - "single" | "range" | "multiple"
+ * @prop {string}  format          - Display format: "YYYY-MM-DD" | "DD/MM/YYYY" | "MM/DD/YYYY"
+ * @prop {string}  placeholder     - Placeholder text
+ * @prop {boolean} disabled        - Disables all interaction
+ * @prop {boolean} readonly        - Readonly input
+ * @prop {string}  label           - Field label
+ * @prop {string}  hint            - Hint text below the field
+ * @prop {string}  error           - Error text (also applies error styling)
+ *
+ * @fires {CustomEvent<{ value: string }>} sp-change - Emitted when a date is selected
+ */
+export declare class SpCalendarDatePickerComponent extends LitElement {
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    value: string;
+    min: string;
+    max: string;
+    locale: string;
+    firstDayOfWeek: number;
+    mode: string;
+    valueStart: string;
+    valueEnd: string;
+    values: string;
+    format: SpDatePickerFormat;
+    placeholder: string;
+    disabled: boolean;
+    readonly: boolean;
+    label: string;
+    hint: string;
+    error: string;
+    _open: boolean;
+    _internalValue: string;
+    private _internals;
+    private _boundHandleKeydown;
+    constructor();
+    connectedCallback(): void;
+    updated(changedProperties: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult;
+    get _displayValue(): string;
+    _parseISO(iso: string): Date | null;
+    _formatDate(date: Date): string;
+    _updateFormValue(): void;
+    _open_popover(): void;
+    _close_popover(): void;
+    _handleFieldClick(e: MouseEvent): void;
+    _toggleOpen(): void;
+    _handleCalendarChange: (e: CustomEvent<any>) => void;
+    _handleOutsideClick: (e: MouseEvent) => void;
+    private _handleKeydown;
+    disconnectedCallback(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "sp-date-picker": SpCalendarDatePickerComponent;
+    }
+}
+//# sourceMappingURL=sp-calendar-date-picker.d.ts.map

package/dist/components/calendar/sp-calendar-date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-calendar-date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/sp-calendar-date-picker.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAa,MAAM,KAAK,CAAC;AAI5C,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,kBAAkB,GAAG,YAAY,GAAG,YAAY,GAAG,YAAY,CAAC;AAE5E;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,qBACa,6BAA8B,SAAQ,UAAU;IAC3D,OAAgB,MAAM,0BAAqB;IAE3C,MAAM,CAAC,cAAc,UAAQ;IAG7B,KAAK,SAAM;IAGX,GAAG,SAAM;IAGT,GAAG,SAAM;IAGT,MAAM,SAAM;IAGZ,cAAc,SAAK;IAGnB,IAAI,SAAY;IAGhB,UAAU,SAAM;IAGhB,QAAQ,SAAM;IAGd,MAAM,SAAM;IAGZ,MAAM,EAAE,kBAAkB,CAAgB;IAG1C,WAAW,SAAM;IAGjB,QAAQ,UAAS;IAGjB,QAAQ,UAAS;IAGjB,KAAK,SAAM;IAGX,IAAI,SAAM;IAGV,KAAK,SAAM;IAGX,KAAK,UAAS;IAGd,cAAc,SAAM;IAEpB,OAAO,CAAC,UAAU,CAAiC;IACnD,OAAO,CAAC,mBAAmB,CAA6B;;IAY/C,iBAAiB,IAAI,IAAI;IAQzB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAQtD,MAAM;IAIf,IAAI,aAAa,IAAI,MAAM,CAK1B;IAED,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI;IAQnC,WAAW,CAAC,IAAI,EAAE,IAAI,GAAG,MAAM;IAgB/B,gBAAgB,IAAI,IAAI;IAIxB,aAAa,IAAI,IAAI;IAOrB,cAAc,IAAI,IAAI;IAMtB,iBAAiB,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAStC,WAAW,IAAI,IAAI;IAQnB,qBAAqB,GAAI,GAAG,WAAW,CAAC,GAAG,CAAC,KAAG,IAAI,CAmBjD;IAEF,mBAAmB,GAAI,GAAG,UAAU,KAAG,IAAI,CAOzC;IAEF,OAAO,CAAC,cAAc;IAMb,oBAAoB,IAAI,IAAI;CAItC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,gBAAgB,EAAE,6BAA6B,CAAC;KACjD;CACF"}

package/dist/components/calendar/sp-calendar-date-picker.js

@@ -0,0 +1,146 @@
+import { unsafeCSS as h, LitElement as d } from "lit";
+import { property as s, state as u, customElement as c } from "lit/decorators.js";
+import _ from "./sp-calendar-date-picker.css.js";
+import { datePickerTemplate as y } from "./sp-calendar-date-picker.template.js";
+import "./sp-calendar.js";
+var v = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, e, n, i) => {
+  for (var l = i > 1 ? void 0 : i ? m(e, n) : e, o = t.length - 1, p; o >= 0; o--)
+    (p = t[o]) && (l = (i ? p(e, n, l) : p(l)) || l);
+  return i && l && v(e, n, l), l;
+};
+let a = class extends d {
+  constructor() {
+    super(), this.value = "", this.min = "", this.max = "", this.locale = "", this.firstDayOfWeek = 1, this.mode = "single", this.valueStart = "", this.valueEnd = "", this.values = "", this.format = "YYYY-MM-DD", this.placeholder = "", this.disabled = !1, this.readonly = !1, this.label = "", this.hint = "", this.error = "", this._open = !1, this._internalValue = "", this._internals = null, this._handleCalendarChange = (t) => {
+      const e = t.detail;
+      this.mode === "range" ? (this.valueStart = e.valueStart ?? "", this.valueEnd = e.valueEnd ?? "", this._internalValue = this.valueStart && this.valueEnd ? `${this._formatDate(this._parseISO(this.valueStart))} → ${this._formatDate(this._parseISO(this.valueEnd))}` : this._formatDate(this._parseISO(e.valueStart ?? "") ?? /* @__PURE__ */ new Date()), this.valueStart && this.valueEnd && (this._open = !1)) : this.mode === "multiple" ? (this.values = e.values.join(","), this._internalValue = `${e.values.length} selected`) : (this.value = e.value ?? "", this._internalValue = this.value ? this._formatDate(this._parseISO(this.value)) : "", this._open = !1), this._updateFormValue(), this.dispatchEvent(new CustomEvent("sp-change", { detail: e, bubbles: !0, composed: !0 }));
+    }, this._handleOutsideClick = (t) => {
+      var i;
+      const e = t.composedPath();
+      if (e.length === 0) return;
+      const n = e[0];
+      !this.contains(n) && !((i = this.shadowRoot) != null && i.contains(n)) && (this._open = !1);
+    };
+    try {
+      this._internals = this.attachInternals();
+    } catch {
+    }
+    this._boundHandleKeydown = this._handleKeydown.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.value && (this._internalValue = this.value, this._updateFormValue());
+  }
+  updated(t) {
+    super.updated(t), t.has("value") && (this._internalValue = this.value, this._updateFormValue());
+  }
+  render() {
+    return y.call(this);
+  }
+  get _displayValue() {
+    if (!this._internalValue) return "";
+    const t = this._parseISO(this._internalValue);
+    return t ? this._formatDate(t) : this._internalValue;
+  }
+  _parseISO(t) {
+    if (!t) return null;
+    const [e, n, i] = t.split("-").map(Number);
+    if (!e || !n || !i) return null;
+    const l = new Date(e, n - 1, i);
+    return isNaN(l.getTime()) ? null : l;
+  }
+  _formatDate(t) {
+    const e = t.getFullYear(), n = String(t.getMonth() + 1).padStart(2, "0"), i = String(t.getDate()).padStart(2, "0");
+    switch (this.format) {
+      case "DD/MM/YYYY":
+        return `${i}/${n}/${e}`;
+      case "MM/DD/YYYY":
+        return `${n}/${i}/${e}`;
+      case "YYYY-MM-DD":
+      default:
+        return `${e}-${n}-${i}`;
+    }
+  }
+  _updateFormValue() {
+    var t;
+    (t = this._internals) == null || t.setFormValue(this._internalValue);
+  }
+  _open_popover() {
+    this.disabled || this.readonly || (this._open = !0, document.addEventListener("click", this._handleOutsideClick, { capture: !0 }), document.addEventListener("keydown", this._boundHandleKeydown, { capture: !0 }));
+  }
+  _close_popover() {
+    this._open = !1, document.removeEventListener("click", this._handleOutsideClick, { capture: !0 }), document.removeEventListener("keydown", this._boundHandleKeydown, { capture: !0 });
+  }
+  _handleFieldClick(t) {
+    t.stopPropagation(), this._open ? this._close_popover() : this._open_popover();
+  }
+  _toggleOpen() {
+    this._open ? this._close_popover() : this._open_popover();
+  }
+  _handleKeydown(t) {
+    t.key === "Escape" && this._close_popover();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._close_popover();
+  }
+};
+a.styles = h(_);
+a.formAssociated = !0;
+r([
+  s({ type: String, reflect: !0 })
+], a.prototype, "value", 2);
+r([
+  s({ type: String })
+], a.prototype, "min", 2);
+r([
+  s({ type: String })
+], a.prototype, "max", 2);
+r([
+  s({ type: String })
+], a.prototype, "locale", 2);
+r([
+  s({ type: Number, attribute: "first-day-of-week" })
+], a.prototype, "firstDayOfWeek", 2);
+r([
+  s({ type: String })
+], a.prototype, "mode", 2);
+r([
+  s({ type: String, attribute: "value-start" })
+], a.prototype, "valueStart", 2);
+r([
+  s({ type: String, attribute: "value-end" })
+], a.prototype, "valueEnd", 2);
+r([
+  s({ type: String })
+], a.prototype, "values", 2);
+r([
+  s({ type: String })
+], a.prototype, "format", 2);
+r([
+  s({ type: String })
+], a.prototype, "placeholder", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+r([
+  s({ type: Boolean, reflect: !0 })
+], a.prototype, "readonly", 2);
+r([
+  s({ type: String })
+], a.prototype, "label", 2);
+r([
+  s({ type: String })
+], a.prototype, "hint", 2);
+r([
+  s({ type: String })
+], a.prototype, "error", 2);
+r([
+  u()
+], a.prototype, "_open", 2);
+r([
+  u()
+], a.prototype, "_internalValue", 2);
+a = r([
+  c("sp-date-picker")
+], a);
+export {
+  a as SpCalendarDatePickerComponent
+};

package/dist/components/calendar/sp-calendar-date-picker.template.d.ts

@@ -0,0 +1,4 @@
+import { TemplateResult } from 'lit';
+import { SpCalendarDatePickerComponent } from './sp-calendar-date-picker.js';
+export declare function datePickerTemplate(this: SpCalendarDatePickerComponent): TemplateResult;
+//# sourceMappingURL=sp-calendar-date-picker.template.d.ts.map

package/dist/components/calendar/sp-calendar-date-picker.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sp-calendar-date-picker.template.d.ts","sourceRoot":"","sources":["../../../src/components/calendar/sp-calendar-date-picker.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AACzD,OAAO,KAAK,EAAE,6BAA6B,EAAE,MAAM,8BAA8B,CAAC;AAkBlF,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,6BAA6B,GAAG,cAAc,CAyEtF"}