@zapatran/paper-ember-components 0.1.0

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),m=require("react");var d={btn:{root:(e,a,l=[])=>{const r=`btn btn--${e} btn--${a}`,o=l.map(n=>`btn--${n}`).join(" ");return o?`${r} ${o}`:r},elements:{label:"btn__label",icon:"btn__icon",kbd:"btn__kbd"}},badge:{root:(e,a="soft",l="sm",r=[])=>{const o=`badge badge--${a} badge--${e} badge--${l}`,n=r.map(s=>`badge--${s}`).join(" ");return n?`${o} ${n}`:o},elements:{dot:"badge__dot",icon:"badge__icon",label:"badge__label",close:"badge__close"}},alert:{root:e=>`alert alert--${e}`,elements:{icon:"alert__icon",body:"alert__body",title:"alert__title",text:"alert__text",close:"alert__close",action:"alert__action"}},card:{root:"card",elements:{header:"card__header",title:"card__title",meta:"card__meta",kpi:"card__kpi",trend:e=>`card__trend card__trend--${e}`,chart:"card__chart",avatar:"card__avatar"}},table:{wrap:"table-wrap",root:e=>e?"table table--stripe":"table",elements:{th:e=>e==="right"?"table__th table__th--right":"table__th",td:"table__td",tdFoot:"table__td--foot",tdNum:"table__td--num"}},field:{root:"field",elements:{label:"field__label",helper:"field__helper",error:"field__error",inputWrap:"field__input-wrap",inputIcon:"field__input-icon"}},input:{root:e=>e?"input input--error":"input"},textarea:{root:"textarea"},select:{wrap:"select-wrap",root:"select",elements:{arrow:"select-wrap__arrow"}},checkbox:{root:"checkbox",elements:{box:e=>e?"checkbox__box checkbox__box--checked":"checkbox__box",check:"checkbox__check",label:"checkbox__label"}},radio:{root:"radio",elements:{circle:e=>e?"radio__circle radio__circle--selected":"radio__circle",label:"radio__label"}},switch:{root:e=>e?"switch switch--on":"switch",elements:{thumb:"switch__thumb"}}};function T({variant:e="info",title:a,description:l,icon:r,onClose:o,action:n,className:s}){const{root:i,elements:c}=d.alert,u=[i(e),s].filter(Boolean).join(" ");return t.jsxs("div",{className:u,role:"alert",children:[r&&t.jsx("span",{className:c.icon,"aria-hidden":"true",children:r}),t.jsxs("div",{className:c.body,children:[a&&t.jsx("p",{className:c.title,children:a}),l&&t.jsx("p",{className:c.text,children:l})]}),n&&t.jsx("button",{className:c.action,onClick:n.onClick,type:"button",children:n.label}),o&&t.jsx("button",{className:c.close,onClick:o,type:"button","aria-label":"Dismiss",children:t.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",stroke:"currentColor",strokeWidth:"2",children:t.jsx("path",{d:"M2 2l8 8M10 2l-8 8"})})})]})}function $({variant:e="neutral",appearance:a="soft",size:l="sm",shape:r,className:o,...n}){const{root:s,elements:i}=d.badge;if("value"in n&&n.value!==void 0){const{value:p,max:v=99}=n,g=p>v?`${v}+`:String(p),N=["count"];r&&N.push(r);const I=[s(e,a,l,N),o].filter(Boolean).join(" ");return t.jsx("span",{className:I,children:g})}const{children:c,dot:u,icon:b,onClose:x}=n,_=[];r&&_.push(r),x&&_.push("removable");const f=[s(e,a,l,_),o].filter(Boolean).join(" ");return t.jsxs("span",{className:f,children:[u&&t.jsx("span",{className:i.dot,"aria-hidden":"true"}),b&&t.jsx("span",{className:i.icon,"aria-hidden":"true",children:b}),t.jsx("span",{className:i.label,children:c}),x&&t.jsx("button",{className:i.close,onClick:x,type:"button","aria-label":"Remove",children:t.jsx("svg",{viewBox:"0 0 8 8",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"round",children:t.jsx("path",{d:"M1 1l6 6M7 1L1 7"})})})]})}function F({variant:e="primary",size:a="md",children:l,disabled:r,onClick:o,type:n="button",className:s,loading:i,icon:c,kbd:u,iconOnly:b,"aria-label":x}){const{root:_,elements:f}=d.btn,p=[];b&&p.push("icon"),i&&p.push("loading");const v=[_(e,a,p),s].filter(Boolean).join(" ");return t.jsxs("button",{className:v,disabled:r||i,onClick:o,type:n,"aria-label":x,"aria-busy":i||void 0,children:[i?t.jsx("svg",{className:"btn__spinner",xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",children:t.jsx("path",{d:"M21 12a9 9 0 1 1-6.219-8.56"})}):c?t.jsx("span",{className:f.icon,"aria-hidden":"true",children:c}):null,!b&&t.jsx("span",{className:f.label,children:l}),!b&&u&&t.jsx("kbd",{className:f.kbd,children:u})]})}function L({header:e,title:a,meta:l,kpi:r,trend:o,chart:n,avatar:s,children:i,className:c}){const{root:u,elements:b}=d.card,x=[u,c].filter(Boolean).join(" ");return t.jsxs("div",{className:x,children:[(e||s)&&t.jsxs("div",{style:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[e&&t.jsx("p",{className:b.header,children:e}),s!==void 0&&t.jsx("span",{className:b.avatar,children:s})]}),a&&t.jsx("p",{className:b.title,children:a}),l&&t.jsx("p",{className:b.meta,children:l}),r!==void 0&&t.jsx("p",{className:b.kpi,children:r}),o&&t.jsxs("div",{className:b.trend(o.direction),children:[o.direction==="up"?t.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:t.jsx("path",{d:"M6 9V3M3 6l3-3 3 3"})}):t.jsx("svg",{width:"12",height:"12",viewBox:"0 0 12 12",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:t.jsx("path",{d:"M6 3v6M3 6l3 3 3-3"})}),o.label]}),n&&t.jsx("div",{className:b.chart,children:n}),i]})}const h=(...e)=>e.filter(Boolean).join(" "),w={position:"absolute",width:1,height:1,padding:0,margin:-1,overflow:"hidden",clip:"rect(0 0 0 0)",whiteSpace:"nowrap",border:0},C=m.createContext(null),j=()=>m.useContext(C);function M({id:e,invalid:a=!1,disabled:l=!1,children:r,className:o}){const n=m.useId(),s=e??n,i={fieldId:s,describedById:`${s}-desc`,invalid:a,disabled:l};return t.jsx(C.Provider,{value:i,children:t.jsx("div",{className:h(d.field.root,o),children:r})})}function S({children:e,htmlFor:a,className:l}){const r=j();return t.jsx("label",{className:h(d.field.elements.label,l),htmlFor:a??(r==null?void 0:r.fieldId),children:e})}function R({children:e,className:a}){const l=j();return t.jsx("p",{className:h(d.field.elements.helper,a),id:l==null?void 0:l.describedById,children:e})}function W({children:e,className:a}){const l=j();return t.jsx("p",{className:h(d.field.elements.error,a),id:l==null?void 0:l.describedById,role:"alert",children:e})}function H({error:e,icon:a,className:l,id:r,disabled:o,...n}){const s=j(),i=e??(s==null?void 0:s.invalid)??!1,c=t.jsx("input",{id:r??(s==null?void 0:s.fieldId),className:h(d.input.root(i),l),disabled:o??(s==null?void 0:s.disabled),"aria-invalid":i||void 0,"aria-describedby":s==null?void 0:s.describedById,...n});return a?t.jsxs("div",{className:d.field.elements.inputWrap,children:[c,t.jsx("span",{className:d.field.elements.inputIcon,"aria-hidden":"true",children:a})]}):c}function P({error:e,className:a,id:l,disabled:r,rows:o=4,...n}){const s=j(),i=e??(s==null?void 0:s.invalid)??!1;return t.jsx("textarea",{id:l??(s==null?void 0:s.fieldId),className:h(d.textarea.root,a),rows:o,disabled:r??(s==null?void 0:s.disabled),"aria-invalid":i||void 0,"aria-describedby":s==null?void 0:s.describedById,...n})}function G({error:e,className:a,id:l,disabled:r,children:o,...n}){const s=j(),i=e??(s==null?void 0:s.invalid)??!1;return t.jsxs("div",{className:d.select.wrap,children:[t.jsx("select",{id:l??(s==null?void 0:s.fieldId),className:h(d.select.root,a),disabled:r??(s==null?void 0:s.disabled),"aria-invalid":i||void 0,"aria-describedby":s==null?void 0:s.describedById,...n,children:o}),t.jsx("svg",{className:d.select.elements.arrow,viewBox:"0 0 16 16",fill:"none",stroke:"currentColor",strokeWidth:1.75,strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:t.jsx("path",{d:"M4 6l4 4 4-4"})})]})}function y(e,a,l){const[r,o]=m.useState(a),n=e!==void 0,s=n?e:r,i=m.useCallback(c=>{n||o(c),l==null||l(c)},[n,l]);return[s,i]}function q({checked:e,defaultChecked:a=!1,onChange:l,disabled:r,name:o,value:n,children:s,className:i}){const[c,u]=y(e,a,l);return t.jsxs("label",{className:h(d.checkbox.root,i),style:r?{cursor:"not-allowed",opacity:.6}:void 0,children:[t.jsx("input",{type:"checkbox",style:w,checked:c,onChange:b=>u(b.target.checked),disabled:r,name:o,value:n}),t.jsx("span",{className:d.checkbox.elements.box(c),"aria-hidden":"true",children:c&&t.jsx("svg",{className:d.checkbox.elements.check,viewBox:"0 0 12 12",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round",children:t.jsx("path",{d:"M2.5 6.5l2.5 2.5 4.5-5"})})}),s&&t.jsx("span",{className:d.checkbox.elements.label,children:s})]})}const B=m.createContext(null);function A({name:e,value:a,onChange:l,disabled:r,children:o,className:n}){return t.jsx(B.Provider,{value:{name:e,value:a,onChange:l,disabled:r},children:t.jsx("div",{role:"radiogroup",className:n,children:o})})}function D({value:e,children:a,disabled:l,className:r}){const o=m.useContext(B),n=(o==null?void 0:o.value)===e,s=l??(o==null?void 0:o.disabled);return t.jsxs("label",{className:h(d.radio.root,r),style:s?{cursor:"not-allowed",opacity:.6}:void 0,children:[t.jsx("input",{type:"radio",style:w,name:o==null?void 0:o.name,value:e,checked:n,onChange:()=>{var i;return(i=o==null?void 0:o.onChange)==null?void 0:i.call(o,e)},disabled:s}),t.jsx("span",{className:d.radio.elements.circle(n),"aria-hidden":"true"}),a&&t.jsx("span",{className:d.radio.elements.label,children:a})]})}function E({checked:e,defaultChecked:a=!1,onChange:l,disabled:r,id:o,className:n,"aria-label":s}){const[i,c]=y(e,a,l);return t.jsx("button",{type:"button",role:"switch",id:o,"aria-checked":i,"aria-label":s,disabled:r,onClick:()=>c(!i),className:h(d.switch.root(i),n),children:t.jsx("span",{className:d.switch.elements.thumb,"aria-hidden":"true"})})}const k=m.createContext("body");function V({stripe:e,children:a,className:l}){const{wrap:r,root:o}=d.table,n=[r,l].filter(Boolean).join(" ");return t.jsx("div",{className:n,children:t.jsx("table",{className:o(e),children:a})})}function U({children:e}){return t.jsx("thead",{children:e})}function J({children:e}){return t.jsx(k.Provider,{value:"body",children:t.jsx("tbody",{children:e})})}function K({children:e}){return t.jsx(k.Provider,{value:"foot",children:t.jsx("tfoot",{children:e})})}function O({children:e,className:a}){return t.jsx("tr",{className:a,children:e})}function Q({children:e,align:a,colSpan:l,className:r}){const{elements:o}=d.table,n=[o.th(a),r].filter(Boolean).join(" ");return t.jsx("th",{className:n,colSpan:l,scope:"col",children:e})}function X({children:e,num:a,colSpan:l,className:r}){const o=m.useContext(k),{elements:n}=d.table,i=[o==="foot"?n.tdFoot:n.td,a?n.tdNum:void 0,r].filter(Boolean).join(" ");return t.jsx("td",{className:i,colSpan:l,children:e})}exports.Alert=T;exports.Badge=$;exports.Button=F;exports.Card=L;exports.Checkbox=q;exports.Field=M;exports.FieldError=W;exports.FieldHelper=R;exports.Input=H;exports.Label=S;exports.Radio=D;exports.RadioGroup=A;exports.Select=G;exports.Switch=E;exports.Table=V;exports.TableBody=J;exports.TableFoot=K;exports.TableHead=U;exports.TableRow=O;exports.Td=X;exports.Textarea=P;exports.Th=Q;exports.useFieldContext=j;

package/dist/index.mjs

@@ -0,0 +1,523 @@
+import { jsxs as u, jsx as o } from "react/jsx-runtime";
+import C, { createContext as x, useId as F, useContext as B, useState as T, useCallback as W } from "react";
+var d = {
+  btn: {
+    root: (e, a, n = []) => {
+      const r = `btn btn--${e} btn--${a}`, l = n.map((i) => `btn--${i}`).join(" ");
+      return l ? `${r} ${l}` : r;
+    },
+    elements: {
+      label: "btn__label",
+      icon: "btn__icon",
+      kbd: "btn__kbd"
+    }
+  },
+  badge: {
+    root: (e, a = "soft", n = "sm", r = []) => {
+      const l = `badge badge--${a} badge--${e} badge--${n}`, i = r.map((t) => `badge--${t}`).join(" ");
+      return i ? `${l} ${i}` : l;
+    },
+    elements: {
+      dot: "badge__dot",
+      icon: "badge__icon",
+      label: "badge__label",
+      close: "badge__close"
+    }
+  },
+  alert: {
+    root: (e) => `alert alert--${e}`,
+    elements: {
+      icon: "alert__icon",
+      body: "alert__body",
+      title: "alert__title",
+      text: "alert__text",
+      close: "alert__close",
+      action: "alert__action"
+    }
+  },
+  card: {
+    root: "card",
+    elements: {
+      header: "card__header",
+      title: "card__title",
+      meta: "card__meta",
+      kpi: "card__kpi",
+      trend: (e) => `card__trend card__trend--${e}`,
+      chart: "card__chart",
+      avatar: "card__avatar"
+    }
+  },
+  table: {
+    wrap: "table-wrap",
+    root: (e) => e ? "table table--stripe" : "table",
+    elements: {
+      th: (e) => e === "right" ? "table__th table__th--right" : "table__th",
+      td: "table__td",
+      tdFoot: "table__td--foot",
+      tdNum: "table__td--num"
+    }
+  },
+  field: {
+    root: "field",
+    elements: {
+      label: "field__label",
+      helper: "field__helper",
+      error: "field__error",
+      inputWrap: "field__input-wrap",
+      inputIcon: "field__input-icon"
+    }
+  },
+  input: {
+    root: (e) => e ? "input input--error" : "input"
+  },
+  textarea: {
+    root: "textarea"
+  },
+  select: {
+    wrap: "select-wrap",
+    root: "select",
+    elements: {
+      arrow: "select-wrap__arrow"
+    }
+  },
+  checkbox: {
+    root: "checkbox",
+    elements: {
+      box: (e) => e ? "checkbox__box checkbox__box--checked" : "checkbox__box",
+      check: "checkbox__check",
+      label: "checkbox__label"
+    }
+  },
+  radio: {
+    root: "radio",
+    elements: {
+      circle: (e) => e ? "radio__circle radio__circle--selected" : "radio__circle",
+      label: "radio__label"
+    }
+  },
+  switch: {
+    root: (e) => e ? "switch switch--on" : "switch",
+    elements: {
+      thumb: "switch__thumb"
+    }
+  }
+};
+function P({
+  variant: e = "info",
+  title: a,
+  description: n,
+  icon: r,
+  onClose: l,
+  action: i,
+  className: t
+}) {
+  const { root: s, elements: c } = d.alert, h = [s(e), t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u("div", { className: h, role: "alert", children: [
+    r && /* @__PURE__ */ o("span", { className: c.icon, "aria-hidden": "true", children: r }),
+    /* @__PURE__ */ u("div", { className: c.body, children: [
+      a && /* @__PURE__ */ o("p", { className: c.title, children: a }),
+      n && /* @__PURE__ */ o("p", { className: c.text, children: n })
+    ] }),
+    i && /* @__PURE__ */ o("button", { className: c.action, onClick: i.onClick, type: "button", children: i.label }),
+    l && /* @__PURE__ */ o("button", { className: c.close, onClick: l, type: "button", "aria-label": "Dismiss", children: /* @__PURE__ */ o("svg", { width: "12", height: "12", viewBox: "0 0 12 12", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ o("path", { d: "M2 2l8 8M10 2l-8 8" }) }) })
+  ] });
+}
+function H({
+  variant: e = "neutral",
+  appearance: a = "soft",
+  size: n = "sm",
+  shape: r,
+  className: l,
+  ...i
+}) {
+  const { root: t, elements: s } = d.badge;
+  if ("value" in i && i.value !== void 0) {
+    const { value: _, max: N = 99 } = i, L = _ > N ? `${N}+` : String(_), y = ["count"];
+    r && y.push(r);
+    const M = [t(e, a, n, y), l].filter(Boolean).join(" ");
+    return /* @__PURE__ */ o("span", { className: M, children: L });
+  }
+  const { children: c, dot: h, icon: b, onClose: p } = i, v = [];
+  r && v.push(r), p && v.push("removable");
+  const k = [t(e, a, n, v), l].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u("span", { className: k, children: [
+    h && /* @__PURE__ */ o("span", { className: s.dot, "aria-hidden": "true" }),
+    b && /* @__PURE__ */ o("span", { className: s.icon, "aria-hidden": "true", children: b }),
+    /* @__PURE__ */ o("span", { className: s.label, children: c }),
+    p && /* @__PURE__ */ o("button", { className: s.close, onClick: p, type: "button", "aria-label": "Remove", children: /* @__PURE__ */ o("svg", { viewBox: "0 0 8 8", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", children: /* @__PURE__ */ o("path", { d: "M1 1l6 6M7 1L1 7" }) }) })
+  ] });
+}
+function D({
+  variant: e = "primary",
+  size: a = "md",
+  children: n,
+  disabled: r,
+  onClick: l,
+  type: i = "button",
+  className: t,
+  loading: s,
+  icon: c,
+  kbd: h,
+  iconOnly: b,
+  "aria-label": p
+}) {
+  const { root: v, elements: k } = d.btn, _ = [];
+  b && _.push("icon"), s && _.push("loading");
+  const N = [v(e, a, _), t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u(
+    "button",
+    {
+      className: N,
+      disabled: r || s,
+      onClick: l,
+      type: i,
+      "aria-label": p,
+      "aria-busy": s || void 0,
+      children: [
+        s ? /* @__PURE__ */ o(
+          "svg",
+          {
+            className: "btn__spinner",
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ o("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+          }
+        ) : c ? /* @__PURE__ */ o("span", { className: k.icon, "aria-hidden": "true", children: c }) : null,
+        !b && /* @__PURE__ */ o("span", { className: k.label, children: n }),
+        !b && h && /* @__PURE__ */ o("kbd", { className: k.kbd, children: h })
+      ]
+    }
+  );
+}
+function G({
+  header: e,
+  title: a,
+  meta: n,
+  kpi: r,
+  trend: l,
+  chart: i,
+  avatar: t,
+  children: s,
+  className: c
+}) {
+  const { root: h, elements: b } = d.card, p = [h, c].filter(Boolean).join(" ");
+  return /* @__PURE__ */ u("div", { className: p, children: [
+    (e || t) && /* @__PURE__ */ u("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+      e && /* @__PURE__ */ o("p", { className: b.header, children: e }),
+      t !== void 0 && /* @__PURE__ */ o("span", { className: b.avatar, children: t })
+    ] }),
+    a && /* @__PURE__ */ o("p", { className: b.title, children: a }),
+    n && /* @__PURE__ */ o("p", { className: b.meta, children: n }),
+    r !== void 0 && /* @__PURE__ */ o("p", { className: b.kpi, children: r }),
+    l && /* @__PURE__ */ u("div", { className: b.trend(l.direction), children: [
+      l.direction === "up" ? /* @__PURE__ */ o(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ o("path", { d: "M6 9V3M3 6l3-3 3 3" })
+        }
+      ) : /* @__PURE__ */ o(
+        "svg",
+        {
+          width: "12",
+          height: "12",
+          viewBox: "0 0 12 12",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ o("path", { d: "M6 3v6M3 6l3 3 3-3" })
+        }
+      ),
+      l.label
+    ] }),
+    i && /* @__PURE__ */ o("div", { className: b.chart, children: i }),
+    s
+  ] });
+}
+const m = (...e) => e.filter(Boolean).join(" "), g = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  padding: 0,
+  margin: -1,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+}, j = x(null), f = () => B(j);
+function V({ id: e, invalid: a = !1, disabled: n = !1, children: r, className: l }) {
+  const i = F(), t = e ?? i, s = {
+    fieldId: t,
+    describedById: `${t}-desc`,
+    invalid: a,
+    disabled: n
+  };
+  return /* @__PURE__ */ o(j.Provider, { value: s, children: /* @__PURE__ */ o("div", { className: m(d.field.root, l), children: r }) });
+}
+function A({ children: e, htmlFor: a, className: n }) {
+  const r = f();
+  return /* @__PURE__ */ o(
+    "label",
+    {
+      className: m(d.field.elements.label, n),
+      htmlFor: a ?? (r == null ? void 0 : r.fieldId),
+      children: e
+    }
+  );
+}
+function E({ children: e, className: a }) {
+  const n = f();
+  return /* @__PURE__ */ o("p", { className: m(d.field.elements.helper, a), id: n == null ? void 0 : n.describedById, children: e });
+}
+function U({ children: e, className: a }) {
+  const n = f();
+  return /* @__PURE__ */ o("p", { className: m(d.field.elements.error, a), id: n == null ? void 0 : n.describedById, role: "alert", children: e });
+}
+function q({ error: e, icon: a, className: n, id: r, disabled: l, ...i }) {
+  const t = f(), s = e ?? (t == null ? void 0 : t.invalid) ?? !1, c = /* @__PURE__ */ o(
+    "input",
+    {
+      id: r ?? (t == null ? void 0 : t.fieldId),
+      className: m(d.input.root(s), n),
+      disabled: l ?? (t == null ? void 0 : t.disabled),
+      "aria-invalid": s || void 0,
+      "aria-describedby": t == null ? void 0 : t.describedById,
+      ...i
+    }
+  );
+  return a ? /* @__PURE__ */ u("div", { className: d.field.elements.inputWrap, children: [
+    c,
+    /* @__PURE__ */ o("span", { className: d.field.elements.inputIcon, "aria-hidden": "true", children: a })
+  ] }) : c;
+}
+function J({ error: e, className: a, id: n, disabled: r, rows: l = 4, ...i }) {
+  const t = f(), s = e ?? (t == null ? void 0 : t.invalid) ?? !1;
+  return /* @__PURE__ */ o(
+    "textarea",
+    {
+      id: n ?? (t == null ? void 0 : t.fieldId),
+      className: m(d.textarea.root, a),
+      rows: l,
+      disabled: r ?? (t == null ? void 0 : t.disabled),
+      "aria-invalid": s || void 0,
+      "aria-describedby": t == null ? void 0 : t.describedById,
+      ...i
+    }
+  );
+}
+function K({ error: e, className: a, id: n, disabled: r, children: l, ...i }) {
+  const t = f(), s = e ?? (t == null ? void 0 : t.invalid) ?? !1;
+  return /* @__PURE__ */ u("div", { className: d.select.wrap, children: [
+    /* @__PURE__ */ o(
+      "select",
+      {
+        id: n ?? (t == null ? void 0 : t.fieldId),
+        className: m(d.select.root, a),
+        disabled: r ?? (t == null ? void 0 : t.disabled),
+        "aria-invalid": s || void 0,
+        "aria-describedby": t == null ? void 0 : t.describedById,
+        ...i,
+        children: l
+      }
+    ),
+    /* @__PURE__ */ o(
+      "svg",
+      {
+        className: d.select.elements.arrow,
+        viewBox: "0 0 16 16",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: 1.75,
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ o("path", { d: "M4 6l4 4 4-4" })
+      }
+    )
+  ] });
+}
+function I(e, a, n) {
+  const [r, l] = T(a), i = e !== void 0, t = i ? e : r, s = W(
+    (c) => {
+      i || l(c), n == null || n(c);
+    },
+    [i, n]
+  );
+  return [t, s];
+}
+function Q({
+  checked: e,
+  defaultChecked: a = !1,
+  onChange: n,
+  disabled: r,
+  name: l,
+  value: i,
+  children: t,
+  className: s
+}) {
+  const [c, h] = I(e, a, n);
+  return /* @__PURE__ */ u(
+    "label",
+    {
+      className: m(d.checkbox.root, s),
+      style: r ? { cursor: "not-allowed", opacity: 0.6 } : void 0,
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            type: "checkbox",
+            style: g,
+            checked: c,
+            onChange: (b) => h(b.target.checked),
+            disabled: r,
+            name: l,
+            value: i
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: d.checkbox.elements.box(c), "aria-hidden": "true", children: c && /* @__PURE__ */ o(
+          "svg",
+          {
+            className: d.checkbox.elements.check,
+            viewBox: "0 0 12 12",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            children: /* @__PURE__ */ o("path", { d: "M2.5 6.5l2.5 2.5 4.5-5" })
+          }
+        ) }),
+        t && /* @__PURE__ */ o("span", { className: d.checkbox.elements.label, children: t })
+      ]
+    }
+  );
+}
+const $ = x(null);
+function X({
+  name: e,
+  value: a,
+  onChange: n,
+  disabled: r,
+  children: l,
+  className: i
+}) {
+  return /* @__PURE__ */ o($.Provider, { value: { name: e, value: a, onChange: n, disabled: r }, children: /* @__PURE__ */ o("div", { role: "radiogroup", className: i, children: l }) });
+}
+function Y({ value: e, children: a, disabled: n, className: r }) {
+  const l = B($), i = (l == null ? void 0 : l.value) === e, t = n ?? (l == null ? void 0 : l.disabled);
+  return /* @__PURE__ */ u(
+    "label",
+    {
+      className: m(d.radio.root, r),
+      style: t ? { cursor: "not-allowed", opacity: 0.6 } : void 0,
+      children: [
+        /* @__PURE__ */ o(
+          "input",
+          {
+            type: "radio",
+            style: g,
+            name: l == null ? void 0 : l.name,
+            value: e,
+            checked: i,
+            onChange: () => {
+              var s;
+              return (s = l == null ? void 0 : l.onChange) == null ? void 0 : s.call(l, e);
+            },
+            disabled: t
+          }
+        ),
+        /* @__PURE__ */ o("span", { className: d.radio.elements.circle(i), "aria-hidden": "true" }),
+        a && /* @__PURE__ */ o("span", { className: d.radio.elements.label, children: a })
+      ]
+    }
+  );
+}
+function Z({
+  checked: e,
+  defaultChecked: a = !1,
+  onChange: n,
+  disabled: r,
+  id: l,
+  className: i,
+  "aria-label": t
+}) {
+  const [s, c] = I(e, a, n);
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      id: l,
+      "aria-checked": s,
+      "aria-label": t,
+      disabled: r,
+      onClick: () => c(!s),
+      className: m(d.switch.root(s), i),
+      children: /* @__PURE__ */ o("span", { className: d.switch.elements.thumb, "aria-hidden": "true" })
+    }
+  );
+}
+const w = C.createContext("body");
+function z({ stripe: e, children: a, className: n }) {
+  const { wrap: r, root: l } = d.table, i = [r, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("div", { className: i, children: /* @__PURE__ */ o("table", { className: l(e), children: a }) });
+}
+function O({ children: e }) {
+  return /* @__PURE__ */ o("thead", { children: e });
+}
+function ee({ children: e }) {
+  return /* @__PURE__ */ o(w.Provider, { value: "body", children: /* @__PURE__ */ o("tbody", { children: e }) });
+}
+function te({ children: e }) {
+  return /* @__PURE__ */ o(w.Provider, { value: "foot", children: /* @__PURE__ */ o("tfoot", { children: e }) });
+}
+function oe({ children: e, className: a }) {
+  return /* @__PURE__ */ o("tr", { className: a, children: e });
+}
+function le({ children: e, align: a, colSpan: n, className: r }) {
+  const { elements: l } = d.table, i = [l.th(a), r].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("th", { className: i, colSpan: n, scope: "col", children: e });
+}
+function ne({ children: e, num: a, colSpan: n, className: r }) {
+  const l = C.useContext(w), { elements: i } = d.table, s = [l === "foot" ? i.tdFoot : i.td, a ? i.tdNum : void 0, r].filter(Boolean).join(" ");
+  return /* @__PURE__ */ o("td", { className: s, colSpan: n, children: e });
+}
+export {
+  P as Alert,
+  H as Badge,
+  D as Button,
+  G as Card,
+  Q as Checkbox,
+  V as Field,
+  U as FieldError,
+  E as FieldHelper,
+  q as Input,
+  A as Label,
+  Y as Radio,
+  X as RadioGroup,
+  K as Select,
+  Z as Switch,
+  z as Table,
+  ee as TableBody,
+  te as TableFoot,
+  O as TableHead,
+  oe as TableRow,
+  ne as Td,
+  J as Textarea,
+  le as Th,
+  f as useFieldContext
+};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@zapatran/paper-ember-components",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@zapatran/paper-ember-theme": "0.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react": "^8.6.18",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^15.0.6",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "jsdom": "^24.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.4.5",
+    "vite": "^5.3.1",
+    "vitest": "^1.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "typecheck": "tsc --noEmit"
+  }
+}