crayon-design-system-ui 0.0.1

package/dist/components/accordion-item/AccordionItem.svelte

@@ -0,0 +1,159 @@
+<svelte:options customElement="ui-accordion-item" />
+
+<script>
+import { onMount } from "svelte";
+let rootEl;
+let { title = "Header" } = $props();
+let open = $state(false);
+let index = $state(null);
+function getHost() {
+  return rootEl?.parentElement ?? null;
+}
+function updateFromHost() {
+  const host = getHost();
+  if (!host) return;
+  open = host.hasAttribute("open");
+  const idx = host.getAttribute("data-accordion-index");
+  if (idx !== null) index = idx;
+}
+function handleTriggerClick() {
+  const host = getHost();
+  if (!host) return;
+  host.dispatchEvent(
+    new CustomEvent("accordion-toggle", { bubbles: true, composed: true })
+  );
+}
+onMount(() => {
+  updateFromHost();
+  const host = getHost();
+  if (!host) return;
+  const observer = new MutationObserver(() => {
+    updateFromHost();
+  });
+  observer.observe(host, { attributes: true, attributeFilter: ["open", "data-accordion-index"] });
+  return () => observer.disconnect();
+});
+</script>
+
+<div class="item" class:open bind:this={rootEl} data-accordion-item>
+  <div
+    class="trigger"
+    role="button"
+    tabindex="0"
+    aria-expanded={open}
+    aria-controls="accordion-panel-{index}"
+    id="accordion-trigger-{index}"
+    onkeydown={(e) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleTriggerClick();
+      }
+    }}
+    onclick={handleTriggerClick}
+  >
+    <span class="trigger-inner">
+      <slot name="header">{title}</slot>
+      <span class="chevron" aria-hidden="true">▼</span>
+    </span>
+  </div>
+  <div
+    class="panel"
+    class:open
+    id="accordion-panel-{index}"
+    role="region"
+    aria-labelledby="accordion-trigger-{index}"
+    aria-hidden={!open}
+  >
+    <div class="panel-inner">
+      <slot name="content">
+        <slot>Content</slot>
+      </slot>
+    </div>
+  </div>
+</div>
+
+<style>
+  .item {
+    border-radius: var(--ui-radius-md, 10px);
+    background: var(--ui-accordion-bg, #f5f5f5);
+    border: 1px solid var(--ui-accordion-border, #e0e0e0);
+    overflow: hidden;
+    transition: background 0.2s ease, border-color 0.2s ease;
+  }
+
+  .item:hover {
+    background: var(--ui-accordion-bg-hover, #eeeeee);
+  }
+
+  .item.open {
+    border-color: var(--ui-primary, #474bff);
+    background: var(--ui-accordion-bg-open, #fafaff);
+  }
+
+  .trigger {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  .trigger-inner {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px 18px;
+    font-weight: 500;
+    color: var(--ui-accordion-title, #1a1a1a);
+    transition: color 0.2s ease;
+  }
+
+  .item.open .trigger-inner {
+    color: var(--ui-primary, #474bff);
+  }
+
+  .trigger-inner ::slotted(*) {
+    flex: 1;
+    text-align: left;
+  }
+
+  .chevron {
+    font-size: 0.7em;
+    opacity: 0.7;
+    transition: transform 0.25s ease;
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+
+  .item.open .chevron {
+    transform: rotate(180deg);
+  }
+
+  .panel {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.25s ease-out;
+  }
+
+  .panel.open {
+    grid-template-rows: 1fr;
+  }
+
+  .panel-inner {
+    min-height: 0;
+    overflow: hidden;
+    padding: 0 18px 14px 18px;
+    border-top: 1px solid var(--ui-accordion-border, #e0e0e0);
+  }
+
+  .panel-inner ::slotted(*) {
+    color: var(--ui-accordion-content, #444);
+    font-size: 14px;
+    line-height: 1.5;
+  }
+
+  .panel-inner ::slotted(img),
+  .panel-inner ::slotted(video),
+  .panel-inner ::slotted(audio) {
+    max-width: 100%;
+    height: auto;
+    display: block;
+  }
+</style>

package/dist/components/accordion-item/AccordionItem.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        header: {};
+        content: {};
+        default: {};
+    };
+};
+export type AccordionItemProps = typeof __propDef.props;
+export type AccordionItemEvents = typeof __propDef.events;
+export type AccordionItemSlots = typeof __propDef.slots;
+export default class AccordionItem extends SvelteComponentTyped<AccordionItemProps, AccordionItemEvents, AccordionItemSlots> {
+}
+export {};

package/dist/components/avatar/Avatar.d.ts

@@ -0,0 +1 @@
+export { default } from "./Avatar.svelte";

package/dist/components/avatar/Avatar.js

@@ -0,0 +1,4 @@
+import{c as P,p as Q,l as x,d as n,g as s,a as T,e as V,t as j,i as _,j as W,m as c,k as z,b as R,n as l,s as i,r as I,f as B,z as X}from"../../assets/custom-element-CN6vLcFC.js";import{i as M}from"../../assets/if-DdiIl-sg.js";import{s as Y}from"../../assets/slot-CRFQJtYY.js";import{a as Z,i as $,s as ee,c as ae}from"../../assets/lifecycle-BK5NY8qp.js";import{s as S}from"../../assets/attributes-o88QCNuy.js";import{p as o}from"../../assets/props-DbUVX42-.js";var te=z('<img class="avatar-img svelte-1sygndv"/>'),se=z('<span class="avatar-initials svelte-1sygndv"> </span>'),re=z('<span class="avatar-fallback svelte-1sygndv" aria-hidden="true"><!></span>'),ie=z('<span role="img"><!> <!></span>');const ne={hash:"svelte-1sygndv",code:`.avatar-root.svelte-1sygndv {position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;font-family:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",\r
+      sans-serif;font-weight:600;background-color:var(--ui-avatar-bg, #e5e7eb);color:var(--ui-avatar-color, #374151);}.avatar-root.shape-circle.svelte-1sygndv {border-radius:50%;}.avatar-root.shape-rounded.svelte-1sygndv {border-radius:var(--ui-avatar-border-radius, 8px);}.avatar-root.size-sm.svelte-1sygndv {width:var(--ui-avatar-size-sm, 32px);height:var(--ui-avatar-size-sm, 32px);font-size:var(--ui-avatar-font-size-sm, 12px);}.avatar-root.size-md.svelte-1sygndv {width:var(--ui-avatar-size-md, 40px);height:var(--ui-avatar-size-md, 40px);font-size:var(--ui-avatar-font-size-md, 14px);}.avatar-root.size-lg.svelte-1sygndv {width:var(--ui-avatar-size-lg, 56px);height:var(--ui-avatar-size-lg, 56px);font-size:var(--ui-avatar-font-size-lg, 18px);}.avatar-root.has-ring.svelte-1sygndv {box-shadow:0 0 0 2px var(--ui-avatar-ring-color, #fff);outline:2px solid var(--ui-avatar-ring-border, #e5e7eb);}.avatar-img.svelte-1sygndv {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}.avatar-fallback.svelte-1sygndv {display:flex;align-items:center;justify-content:center;width:100%;height:100%;}.avatar-initials.svelte-1sygndv {display:flex;align-items:center;justify-content:center;line-height:1;user-select:none;}`};function le(E,r){Q(r,!1),Z(E,ne);const U=c(),A=c(),F=c();let t=o(r,"src",12,void 0),f=o(r,"alt",12,""),v=o(r,"name",12,void 0),u=o(r,"size",12,"md"),m=o(r,"shape",12,"circle"),p=o(r,"showRing",12,!1),h=o(r,"extraClass",12,""),d=c(!1),y=c(!1);function q(e){if(!e||!e.trim())return"?";const a=e.trim().split(/\s+/);if(a.length>=2){const w=a[0][0]??"",k=a[a.length-1][0]??"";return(w+k).toUpperCase()}return e.slice(0,2).toUpperCase()}let b=c(void 0);function D(){i(y,!0),i(d,!1)}function G(){i(d,!0)}x(()=>(n(t()),s(b)),()=>{t()!==s(b)&&(i(b,t()),i(y,!1),i(d,!1))}),x(()=>(n(t()),s(d),s(y)),()=>{i(U,!t()||s(d)||t()!=null&&!s(y))}),x(()=>n(v()),()=>{i(A,q(v()))}),x(()=>(n(u()),n(m()),n(p()),n(h())),()=>{i(F,`avatar-root size-${u()} shape-${m()} ${p()?"has-ring":""} ${h()}`.trim())}),T();var H={get src(){return t()},set src(e){t(e),l()},get alt(){return f()},set alt(e){f(e),l()},get name(){return v()},set name(e){v(e),l()},get size(){return u()},set size(e){u(e),l()},get shape(){return m()},set shape(e){m(e),l()},get showRing(){return p()},set showRing(e){p(e),l()},get extraClass(){return h()},set extraClass(e){h(e),l()}};$();var g=ie(),L=R(g);{var J=e=>{var a=te();j(()=>{S(a,"src",t()),S(a,"alt",f()||v()||"")}),B("load",a,D),B("error",a,G),_(e,a)};M(L,e=>{t()&&!s(d)&&e(J)})}var K=V(L,2);{var N=e=>{var a=re(),w=R(a);Y(w,r,"default",{},k=>{var C=se(),O=R(C,!0);I(C),j(()=>X(O,s(A))),_(k,C)}),I(a),_(e,a)};M(K,e=>{s(U)&&e(N)})}return I(g),j(()=>{ee(g,1,ae(s(F)),"svelte-1sygndv"),S(g,"aria-label",f()||v()||"Avatar")}),_(E,g),W(H)}const __Default = (P(le,{src:{},alt:{},name:{},size:{},shape:{},showRing:{},extraClass:{}},["default"],[],{mode:"open"}));
+customElements.define("ui-avatar", __Default);
+export default __Default;

package/dist/components/avatar/Avatar.svelte

@@ -0,0 +1,132 @@
+<svelte:options customElement="ui-avatar" />
+
+<script>
+export let src = void 0;
+export let alt = "";
+export let name = void 0;
+export let size = "md";
+export let shape = "circle";
+export let showRing = false;
+export let extraClass = "";
+let imageError = false;
+let imageLoaded = false;
+$: showFallback = !src || imageError || src != null && !imageLoaded;
+function getInitials(n) {
+  if (!n || !n.trim()) return "?";
+  const parts = n.trim().split(/\s+/);
+  if (parts.length >= 2) {
+    const first = parts[0][0] ?? "";
+    const last = parts[parts.length - 1][0] ?? "";
+    return (first + last).toUpperCase();
+  }
+  return n.slice(0, 2).toUpperCase();
+}
+$: initials = getInitials(name);
+let prevSrc = void 0;
+$: if (src !== prevSrc) {
+  prevSrc = src;
+  imageLoaded = false;
+  imageError = false;
+}
+function onImgLoad() {
+  imageLoaded = true;
+  imageError = false;
+}
+function onImgError() {
+  imageError = true;
+}
+$: rootClass = `avatar-root size-${size} shape-${shape} ${showRing ? "has-ring" : ""} ${extraClass}`.trim();
+</script>
+
+<span
+  class={rootClass}
+  role="img"
+  aria-label={alt || name || "Avatar"}
+>
+  {#if src && !imageError}
+    <img
+      class="avatar-img"
+      {src}
+      alt={alt || name || ""}
+      on:load={onImgLoad}
+      on:error={onImgError}
+    />
+  {/if}
+  {#if showFallback}
+    <span class="avatar-fallback" aria-hidden="true">
+      <slot><span class="avatar-initials">{initials}</span></slot>
+    </span>
+  {/if}
+</span>
+
+<style>
+  .avatar-root {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    overflow: hidden;
+    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+      sans-serif;
+    font-weight: 600;
+    background-color: var(--ui-avatar-bg, #e5e7eb);
+    color: var(--ui-avatar-color, #374151);
+  }
+
+  .avatar-root.shape-circle {
+    border-radius: 50%;
+  }
+
+  .avatar-root.shape-rounded {
+    border-radius: var(--ui-avatar-border-radius, 8px);
+  }
+
+  .avatar-root.size-sm {
+    width: var(--ui-avatar-size-sm, 32px);
+    height: var(--ui-avatar-size-sm, 32px);
+    font-size: var(--ui-avatar-font-size-sm, 12px);
+  }
+
+  .avatar-root.size-md {
+    width: var(--ui-avatar-size-md, 40px);
+    height: var(--ui-avatar-size-md, 40px);
+    font-size: var(--ui-avatar-font-size-md, 14px);
+  }
+
+  .avatar-root.size-lg {
+    width: var(--ui-avatar-size-lg, 56px);
+    height: var(--ui-avatar-size-lg, 56px);
+    font-size: var(--ui-avatar-font-size-lg, 18px);
+  }
+
+  .avatar-root.has-ring {
+    box-shadow: 0 0 0 2px var(--ui-avatar-ring-color, #fff);
+    outline: 2px solid var(--ui-avatar-ring-border, #e5e7eb);
+  }
+
+  .avatar-img {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+  }
+
+  .avatar-fallback {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+  }
+
+  .avatar-initials {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    user-select: none;
+  }
+</style>

package/dist/components/avatar/Avatar.svelte.d.ts

@@ -0,0 +1,24 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        /** Image URL. When missing or on error, fallback (slot or initials) is shown. */ src?: string | undefined;
+        /** Alt text for the image (also used for accessibility when showing fallback). */ alt?: string;
+        /** Name used to derive initials when no image (e.g. "Jane Doe" → "JD"). */ name?: string | undefined;
+        /** Size preset. */ size?: "sm" | "md" | "lg";
+        /** Shape: circle (default) or rounded square. */ shape?: "circle" | "rounded";
+        /** When true, shows a ring/border around the avatar. */ showRing?: boolean;
+        /** Extra class(es) for the root. Set via the extra-class attribute. */ extraClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type AvatarProps = typeof __propDef.props;
+export type AvatarEvents = typeof __propDef.events;
+export type AvatarSlots = typeof __propDef.slots;
+export default class Avatar extends SvelteComponentTyped<AvatarProps, AvatarEvents, AvatarSlots> {
+}
+export {};

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

@@ -0,0 +1 @@
+export { default } from "./Button.svelte";

package/dist/components/button/Button.js

@@ -0,0 +1,35 @@
+import{h as A,c as G,p as H,l as C,s as W,d as l,g as h,a as J,b as B,e as K,r as P,t as L,f as M,i as D,j as N,m as S,k as E,n as r}from"../../assets/custom-element-CN6vLcFC.js";import{i as O}from"../../assets/if-DdiIl-sg.js";import{s as Q}from"../../assets/slot-CRFQJtYY.js";import{t as U,a as X,i as Y,s as Z,c as $}from"../../assets/lifecycle-BK5NY8qp.js";import{s as ee}from"../../assets/attributes-o88QCNuy.js";import{p as n}from"../../assets/props-DbUVX42-.js";function te(s,t,i,f){var p=s.__style;if(A||p!==t){var o=U(t);(!A||o!==s.getAttribute("style"))&&(o==null?s.removeAttribute("style"):s.style.cssText=o),s.__style=t}return f}var re=E('<span class="spinner svelte-kv8yyl"></span>'),ne=E('<button><!> <span class="btn-content svelte-kv8yyl"><!></span></button>');const le={hash:"svelte-kv8yyl",code:`:host {display:inline-block;}.btn-inner.svelte-kv8yyl {border:none;border-radius:var(--ui-radius-md, 10px);cursor:pointer;font-weight:500;transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center;}.btn-content.svelte-kv8yyl {display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;}\r
+\r
+  /* Shape: pill (full rounded) for icon + text */.shape-pill.svelte-kv8yyl {border-radius:999px;}\r
+\r
+  /* Shape: circle for icon-only buttons */.shape-circle.svelte-kv8yyl {border-radius:50%;padding:0;aspect-ratio:1;}.shape-circle.sm.svelte-kv8yyl {width:32px;height:32px;min-width:32px;min-height:32px;}.shape-circle.md.svelte-kv8yyl {width:40px;height:40px;min-width:40px;min-height:40px;}.shape-circle.lg.svelte-kv8yyl {width:48px;height:48px;min-width:48px;min-height:48px;}\r
+\r
+  /* When app adds class for full width (e.g. class="w-full" or class="full-width"), inner button fills the host */:host([class*="full"]) .btn-inner.svelte-kv8yyl,\r
+  :host([class*="w-full"]) .btn-inner.svelte-kv8yyl {width:100%;box-sizing:border-box;}\r
+\r
+  /* Sizes (rectangle / pill) */.shape-rectangle.sm.svelte-kv8yyl,\r
+  .shape-pill.sm.svelte-kv8yyl {padding:6px 12px;font-size:12px;}.shape-rectangle.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
+  .shape-pill.sm.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:0.375rem;}.shape-rectangle.md.svelte-kv8yyl,\r
+  .shape-pill.md.svelte-kv8yyl {padding:10px 24px;font-size:14px;}.shape-rectangle.lg.svelte-kv8yyl,\r
+  .shape-pill.lg.svelte-kv8yyl {padding:14px 32px;font-size:16px;}.shape-rectangle.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl),\r
+  .shape-pill.lg.svelte-kv8yyl .btn-content:where(.svelte-kv8yyl) {gap:0.5rem;}\r
+\r
+  /* Variants — respect --ui-button-custom-bg when set via backgroundColor prop */.primary.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-primary, #474bff));color:var(--ui-button-bg, #fefeff);}.primary.svelte-kv8yyl:hover {background:var(--ui-button-custom-bg-hover, var(--ui-primary-hover, #2b2399));color:#fefeff;}.secondary.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-secondary, #222121));color:#fefeff;}.secondary.svelte-kv8yyl:hover {background:var(--ui-button-custom-bg-hover, var(--ui-secondary-hover, #616061));color:#fefeff;}.outline.svelte-kv8yyl {background:var(--ui-outline, transparent);border:1px solid var(--ui-outline, #222121);color:#616061;}.outline.svelte-kv8yyl:hover {background:var(--ui-outline-hover, transparent);border:1px solid var(--ui-outline, #222121);color:#222121;}.danger.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-danger, #e03e52));color:#fefeff;}.danger.svelte-kv8yyl:hover {background:var(\r
+      --ui-button-custom-bg-hover,\r
+      var(--ui-danger-hover, #c23445)\r
+    );color:#fefeff;}.success.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-success, #2cc84d));color:#fefeff;}.success.svelte-kv8yyl:hover {background:var(\r
+      --ui-button-custom-bg-hover,\r
+      var(--ui-success-hover, #2cc84d)\r
+    );color:#fefeff;}.white.svelte-kv8yyl {background:var(--ui-button-custom-bg, var(--ui-white, #ffffff));color:var(--ui-text-on-light, #222121);border:1px solid var(--ui-border-light, #e0e0e0);}.white.svelte-kv8yyl:hover {background:var(\r
+      --ui-button-custom-bg-hover,\r
+      var(--ui-white-hover, #f5f5f5)\r
+    );color:var(--ui-text-on-light, #222121);border-color:var(--ui-border-light-hover, #c0c0c0);}.ghost.svelte-kv8yyl {background:transparent;color:var(--ui-ghost-text, #616061);}.ghost.svelte-kv8yyl:hover {background:var(--ui-ghost-hover, rgba(0, 0, 0, 0.06));color:var(--ui-ghost-text-hover, #222121);}.btn-inner.svelte-kv8yyl:disabled {background:#e0e0e0;cursor:not-allowed;}.btn-inner.svelte-kv8yyl:disabled:hover {background:#e0e0e0;cursor:not-allowed;}.spinner.svelte-kv8yyl {width:14px;height:14px;border:2px solid white;border-top-color:transparent;border-radius:50%;display:inline-block;margin-right:6px;\r
+    animation: svelte-kv8yyl-spin 0.6s linear infinite;}\r
+\r
+  @keyframes svelte-kv8yyl-spin {\r
+    to {\r
+      transform: rotate(360deg);\r
+    }\r
+  }`};function se(s,t){H(t,!1),X(s,le);const i=S(),f=S(),p=S();let o=n(t,"variant",12,"primary"),k=n(t,"size",12,"md"),m=n(t,"shape",12,"rectangle"),x=n(t,"disabled",12,!1),w=n(t,"loading",12,!1),d=n(t,"color",12,void 0),z=n(t,"type",12,"button"),u=n(t,"backgroundColor",12,void 0),v=n(t,"fontSize",12,void 0),c=n(t,"borderRadius",12,void 0),y=n(t,"borderWidth",12,void 0),g=n(t,"fontWeight",12,void 0),b=n(t,"padding",12,void 0),_=n(t,"extraClass",12,"");function I(e){(x()||w())&&(e.preventDefault(),e.stopImmediatePropagation())}C(()=>(l(d()),l(u()),l(v()),l(c()),l(y()),l(g()),l(b())),()=>{W(i,[d()!=null&&`--ui-button-bg:${d()}`,u()!=null&&`--ui-button-custom-bg:${u()}`,v()!=null&&`font-size:${v()}`,c()!=null&&`border-radius:${c()}`,y()!=null&&`border-width:${y()}`,g()!=null&&`font-weight:${g()}`,b()!=null&&`padding:${b()}`].filter(Boolean))}),C(()=>h(i),()=>{W(f,h(i).length>0?h(i).join("; "):void 0)}),C(()=>(l(o()),l(k()),l(m()),l(_())),()=>{W(p,`btn-inner ${o()} ${k()} shape-${m()} ${_()}`.trim())}),J();var T={get variant(){return o()},set variant(e){o(e),r()},get size(){return k()},set size(e){k(e),r()},get shape(){return m()},set shape(e){m(e),r()},get disabled(){return x()},set disabled(e){x(e),r()},get loading(){return w()},set loading(e){w(e),r()},get color(){return d()},set color(e){d(e),r()},get type(){return z()},set type(e){z(e),r()},get backgroundColor(){return u()},set backgroundColor(e){u(e),r()},get fontSize(){return v()},set fontSize(e){v(e),r()},get borderRadius(){return c()},set borderRadius(e){c(e),r()},get borderWidth(){return y()},set borderWidth(e){y(e),r()},get fontWeight(){return g()},set fontWeight(e){g(e),r()},get padding(){return b()},set padding(e){b(e),r()},get extraClass(){return _()},set extraClass(e){_(e),r()}};Y();var a=ne(),R=B(a);{var V=e=>{var F=re();D(e,F)};O(R,e=>{w()&&e(V)})}var j=K(R,2),q=B(j);return Q(q,t,"default",{},null),P(j),P(a),L(()=>{ee(a,"type",z()),Z(a,1,$(h(p)),"svelte-kv8yyl"),a.disabled=x(),te(a,h(f))}),M("click",a,I),D(s,a),N(T)}const __Default = (G(se,{variant:{},size:{},shape:{},disabled:{},loading:{},color:{},type:{},backgroundColor:{},fontSize:{},borderRadius:{},borderWidth:{},fontWeight:{},padding:{},extraClass:{}},["default"],[],{mode:"open"}));
+customElements.define("ui-button", __Default);
+export default __Default;

package/dist/components/button/Button.svelte

@@ -0,0 +1,254 @@
+<svelte:options customElement="ui-button" />
+
+<script>
+export let variant = "primary";
+export let size = "md";
+export let shape = "rectangle";
+export let disabled = false;
+export let loading = false;
+export let color = void 0;
+export let type = "button";
+export let backgroundColor = void 0;
+export let fontSize = void 0;
+export let borderRadius = void 0;
+export let borderWidth = void 0;
+export let fontWeight = void 0;
+export let padding = void 0;
+export let extraClass = "";
+$: styleParts = [
+  color != null && `--ui-button-bg:${color}`,
+  backgroundColor != null && `--ui-button-custom-bg:${backgroundColor}`,
+  fontSize != null && `font-size:${fontSize}`,
+  borderRadius != null && `border-radius:${borderRadius}`,
+  borderWidth != null && `border-width:${borderWidth}`,
+  fontWeight != null && `font-weight:${fontWeight}`,
+  padding != null && `padding:${padding}`
+].filter(Boolean);
+$: buttonStyle = styleParts.length > 0 ? styleParts.join("; ") : void 0;
+$: buttonClass = `btn-inner ${variant} ${size} shape-${shape} ${extraClass}`.trim();
+function handleClick(event) {
+  if (disabled || loading) {
+    event.preventDefault();
+    event.stopImmediatePropagation();
+  }
+}
+</script>
+
+<button
+  {type}
+  class={buttonClass}
+  {disabled}
+  style={buttonStyle}
+  on:click={handleClick}
+>
+  {#if loading}
+    <span class="spinner"></span>
+  {/if}
+  <span class="btn-content">
+    <slot />
+  </span>
+</button>
+
+<style>
+  :host {
+    display: inline-block;
+  }
+
+  .btn-inner {
+    border: none;
+    border-radius: var(--ui-radius-md, 10px);
+    cursor: pointer;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .btn-content {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+  }
+
+  /* Shape: pill (full rounded) for icon + text */
+  .shape-pill {
+    border-radius: 999px;
+  }
+
+  /* Shape: circle for icon-only buttons */
+  .shape-circle {
+    border-radius: 50%;
+    padding: 0;
+    aspect-ratio: 1;
+  }
+
+  .shape-circle.sm {
+    width: 32px;
+    height: 32px;
+    min-width: 32px;
+    min-height: 32px;
+  }
+
+  .shape-circle.md {
+    width: 40px;
+    height: 40px;
+    min-width: 40px;
+    min-height: 40px;
+  }
+
+  .shape-circle.lg {
+    width: 48px;
+    height: 48px;
+    min-width: 48px;
+    min-height: 48px;
+  }
+
+  /* When app adds class for full width (e.g. class="w-full" or class="full-width"), inner button fills the host */
+  :host([class*="full"]) .btn-inner,
+  :host([class*="w-full"]) .btn-inner {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  /* Sizes (rectangle / pill) */
+  .shape-rectangle.sm,
+  .shape-pill.sm {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  .shape-rectangle.sm .btn-content,
+  .shape-pill.sm .btn-content {
+    gap: 0.375rem;
+  }
+
+  .shape-rectangle.md,
+  .shape-pill.md {
+    padding: 10px 24px;
+    font-size: 14px;
+  }
+
+  .shape-rectangle.lg,
+  .shape-pill.lg {
+    padding: 14px 32px;
+    font-size: 16px;
+  }
+
+  .shape-rectangle.lg .btn-content,
+  .shape-pill.lg .btn-content {
+    gap: 0.5rem;
+  }
+
+  /* Variants — respect --ui-button-custom-bg when set via backgroundColor prop */
+  .primary {
+    background: var(--ui-button-custom-bg, var(--ui-primary, #474bff));
+    color: var(--ui-button-bg, #fefeff);
+  }
+
+  .primary:hover {
+    background: var(--ui-button-custom-bg-hover, var(--ui-primary-hover, #2b2399));
+    color: #fefeff;
+  }
+
+  .secondary {
+    background: var(--ui-button-custom-bg, var(--ui-secondary, #222121));
+    color: #fefeff;
+  }
+
+  .secondary:hover {
+    background: var(--ui-button-custom-bg-hover, var(--ui-secondary-hover, #616061));
+    color: #fefeff;
+  }
+
+  .outline {
+    background: var(--ui-outline, transparent);
+    border: 1px solid var(--ui-outline, #222121);
+    color: #616061;
+  }
+
+  .outline:hover {
+    background: var(--ui-outline-hover, transparent);
+    border: 1px solid var(--ui-outline, #222121);
+    color: #222121;
+  }
+
+  .danger {
+    background: var(--ui-button-custom-bg, var(--ui-danger, #e03e52));
+    color: #fefeff;
+  }
+
+  .danger:hover {
+    background: var(
+      --ui-button-custom-bg-hover,
+      var(--ui-danger-hover, #c23445)
+    );
+    color: #fefeff;
+  }
+
+  .success {
+    background: var(--ui-button-custom-bg, var(--ui-success, #2cc84d));
+    color: #fefeff;
+  }
+
+  .success:hover {
+    background: var(
+      --ui-button-custom-bg-hover,
+      var(--ui-success-hover, #2cc84d)
+    );
+    color: #fefeff;
+  }
+
+  .white {
+    background: var(--ui-button-custom-bg, var(--ui-white, #ffffff));
+    color: var(--ui-text-on-light, #222121);
+    border: 1px solid var(--ui-border-light, #e0e0e0);
+  }
+
+  .white:hover {
+    background: var(
+      --ui-button-custom-bg-hover,
+      var(--ui-white-hover, #f5f5f5)
+    );
+    color: var(--ui-text-on-light, #222121);
+    border-color: var(--ui-border-light-hover, #c0c0c0);
+  }
+
+  .ghost {
+    background: transparent;
+    color: var(--ui-ghost-text, #616061);
+  }
+
+  .ghost:hover {
+    background: var(--ui-ghost-hover, rgba(0, 0, 0, 0.06));
+    color: var(--ui-ghost-text-hover, #222121);
+  }
+
+  .btn-inner:disabled {
+    background: #e0e0e0;
+    cursor: not-allowed;
+  }
+
+  .btn-inner:disabled:hover {
+    background: #e0e0e0;
+    cursor: not-allowed;
+  }
+
+  .spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid white;
+    border-top-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    margin-right: 6px;
+    animation: spin 0.6s linear infinite;
+  }
+
+  @keyframes spin {
+    to {
+      transform: rotate(360deg);
+    }
+  }
+</style>

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

@@ -0,0 +1,31 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        variant?: "primary" | "secondary" | "danger" | "success" | "white" | "outline" | "ghost";
+        size?: "sm" | "md" | "lg";
+        /** Rectangle (default), pill (full rounded), or circle (icon-only). */ shape?: "rectangle" | "pill" | "circle";
+        disabled?: boolean;
+        loading?: boolean;
+        color?: string | undefined;
+        type?: "button" | "submit" | "reset";
+        /** Override background (and text contrast) for variant; e.g. "#10b981" */ backgroundColor?: string | undefined;
+        /** Override font size; e.g. "16px", "1rem" */ fontSize?: string | undefined;
+        /** Override border radius; e.g. "8px", "999px" */ borderRadius?: string | undefined;
+        /** Override border width; e.g. "2px" (useful with outline variant) */ borderWidth?: string | undefined;
+        /** Override font weight; e.g. "600", "bold" */ fontWeight?: string | undefined;
+        /** Override padding; e.g. "12px 20px" */ padding?: string | undefined;
+        /** Extra class(es) for the button root (e.g. for width utilities in the app). Set via the extra-class attribute. */ extraClass?: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type ButtonProps = typeof __propDef.props;
+export type ButtonEvents = typeof __propDef.events;
+export type ButtonSlots = typeof __propDef.slots;
+export default class Button extends SvelteComponentTyped<ButtonProps, ButtonEvents, ButtonSlots> {
+}
+export {};

package/dist/components/card/Card.d.ts

@@ -0,0 +1 @@
+export { default } from "./Card.svelte";