vector-prototype-components 0.1.1 → 0.1.3

package/Select/Select.module.css.js

@@ -0,0 +1,46 @@
+import './Select.module.css';const e = "_selectWrapper_i9fx6_2", i = "_label_i9fx6_11", n = "_field_i9fx6_24", _ = "_sizeLarge_i9fx6_57", c = "_sizeMedium_i9fx6_61", s = "_sizeSmall_i9fx6_65", l = "_sizeXsmall_i9fx6_69", t = "_fieldError_i9fx6_79", a = "_fieldFocus_i9fx6_79", o = "_valueText_i9fx6_147", r = "_placeholder_i9fx6_160", f = "_caretIcon_i9fx6_166", x = "_caretIconOpen_i9fx6_175", d = "_leadingIcon_i9fx6_180", p = "_hint_i9fx6_189", u = "_hintDanger_i9fx6_200", h = "_hintSuccess_i9fx6_204", g = "_hintWarning_i9fx6_208", m = "_fieldWrapper_i9fx6_213", z = "_menuPanel_i9fx6_222", I = {
+  selectWrapper: e,
+  label: i,
+  field: n,
+  sizeLarge: _,
+  sizeMedium: c,
+  sizeSmall: s,
+  sizeXsmall: l,
+  fieldError: t,
+  fieldFocus: a,
+  valueText: o,
+  placeholder: r,
+  caretIcon: f,
+  caretIconOpen: x,
+  leadingIcon: d,
+  hint: p,
+  hintDanger: u,
+  hintSuccess: h,
+  hintWarning: g,
+  fieldWrapper: m,
+  menuPanel: z
+};
+export {
+  f as caretIcon,
+  x as caretIconOpen,
+  I as default,
+  n as field,
+  t as fieldError,
+  a as fieldFocus,
+  m as fieldWrapper,
+  p as hint,
+  u as hintDanger,
+  h as hintSuccess,
+  g as hintWarning,
+  i as label,
+  d as leadingIcon,
+  z as menuPanel,
+  r as placeholder,
+  e as selectWrapper,
+  _ as sizeLarge,
+  c as sizeMedium,
+  s as sizeSmall,
+  l as sizeXsmall,
+  o as valueText
+};
+//# sourceMappingURL=Select.module.css.js.map

package/Select/Select.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/Skeleton/Skeleton.js

@@ -0,0 +1,78 @@
+import { jsx as c } from "react/jsx-runtime";
+import n from "./Skeleton.module.css.js";
+const p = {
+  text: n.text,
+  rect: n.rect,
+  circle: n.circle
+};
+function i(t) {
+  if (t != null)
+    return typeof t == "number" ? `${t}px` : t;
+}
+function m({
+  variant: t = "text",
+  width: o,
+  height: a,
+  radius: l,
+  animated: s = !0,
+  className: d,
+  style: u,
+  ...h
+}) {
+  const f = [
+    n.skeleton,
+    p[t],
+    s ? n.animated : void 0,
+    d
+  ].filter(Boolean).join(" ");
+  let e = i(o), r = i(a);
+  t === "circle" && (e = e ?? r ?? "40px", r = r ?? e);
+  const x = {
+    width: e,
+    height: r,
+    borderRadius: i(l),
+    ...u
+  };
+  return /* @__PURE__ */ c("span", { className: f, style: x, "aria-hidden": "true", ...h });
+}
+function g({
+  lines: t = 3,
+  lastLineWidth: o = "60%",
+  gap: a = 8,
+  animated: l = !0,
+  className: s,
+  style: d,
+  ...u
+}) {
+  const h = [n.textGroup, s].filter(Boolean).join(" ");
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: h,
+      style: { gap: i(a), ...d },
+      "aria-hidden": "true",
+      ...u,
+      children: Array.from({ length: Math.max(0, t) }).map((f, e) => {
+        const r = e === t - 1 && t > 1;
+        return /* @__PURE__ */ c(
+          m,
+          {
+            variant: "text",
+            animated: l,
+            width: r ? o : "100%"
+          },
+          e
+        );
+      })
+    }
+  );
+}
+function A({ size: t = 40, ...o }) {
+  return /* @__PURE__ */ c(m, { variant: "circle", width: t, height: t, ...o });
+}
+export {
+  m as Skeleton,
+  A as SkeletonAvatar,
+  g as SkeletonText
+};
+//# sourceMappingURL=Skeleton.js.map

package/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../src/Skeleton/Skeleton.tsx"],"sourcesContent":["import React from 'react';\nimport styles from './Skeleton.module.css';\n\n/* ─── Base Skeleton ──────────────────────────────────────────── */\n\nexport type SkeletonVariant = 'text' | 'rect' | 'circle';\n\nexport interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /** Shape of the placeholder. */\n  variant?: SkeletonVariant;\n  /** Width — number (px) or any CSS length. Default comes from the variant. */\n  width?: number | string;\n  /** Height — number (px) or any CSS length. Default comes from the variant. */\n  height?: number | string;\n  /** Border-radius override — number (px) or any CSS length. */\n  radius?: number | string;\n  /** Whether to play the pulse animation (default true). */\n  animated?: boolean;\n}\n\nconst VARIANT_CLASS: Record<SkeletonVariant, string> = {\n  text:   styles.text,\n  rect:   styles.rect,\n  circle: styles.circle,\n};\n\nfunction toCssSize(value: number | string | undefined): string | undefined {\n  if (value == null) return undefined;\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\n/**\n * Decorative loading placeholder. It is `aria-hidden` by default — mark the\n * surrounding region with `aria-busy=\"true\"` so assistive tech announces the\n * loading state instead of the empty boxes.\n */\nexport function Skeleton({\n  variant = 'text',\n  width,\n  height,\n  radius,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const cls = [\n    styles.skeleton,\n    VARIANT_CLASS[variant],\n    animated ? styles.animated : undefined,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  let w = toCssSize(width);\n  let h = toCssSize(height);\n  // A circle is symmetric: if only one dimension is given, mirror it.\n  if (variant === 'circle') {\n    w = w ?? h ?? '40px';\n    h = h ?? w;\n  }\n\n  const mergedStyle: React.CSSProperties = {\n    width: w,\n    height: h,\n    borderRadius: toCssSize(radius),\n    ...style,\n  };\n\n  return <span className={cls} style={mergedStyle} aria-hidden=\"true\" {...props} />;\n}\n\n/* ─── SkeletonText preset ────────────────────────────────────── */\n\nexport interface SkeletonTextProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Number of text lines to render (default 3). */\n  lines?: number;\n  /** Width of the last line — shorter looks more natural (default '60%'). */\n  lastLineWidth?: number | string;\n  /** Gap between lines — number (px) or any CSS length (default 8). */\n  gap?: number | string;\n  /** Whether to play the pulse animation (default true). */\n  animated?: boolean;\n}\n\n/** Stacked text lines, with a shorter final line for a natural look. */\nexport function SkeletonText({\n  lines = 3,\n  lastLineWidth = '60%',\n  gap = 8,\n  animated = true,\n  className,\n  style,\n  ...props\n}: SkeletonTextProps) {\n  const cls = [styles.textGroup, className].filter(Boolean).join(' ');\n\n  return (\n    <div\n      className={cls}\n      style={{ gap: toCssSize(gap), ...style }}\n      aria-hidden=\"true\"\n      {...props}\n    >\n      {Array.from({ length: Math.max(0, lines) }).map((_, i) => {\n        const isLast = i === lines - 1 && lines > 1;\n        return (\n          <Skeleton\n            key={i}\n            variant=\"text\"\n            animated={animated}\n            width={isLast ? lastLineWidth : '100%'}\n          />\n        );\n      })}\n    </div>\n  );\n}\n\n/* ─── SkeletonAvatar preset ──────────────────────────────────── */\n\nexport interface SkeletonAvatarProps\n  extends Omit<SkeletonProps, 'variant' | 'width' | 'height'> {\n  /** Diameter — number (px) or any CSS length (default 40). */\n  size?: number | string;\n}\n\n/** Circular placeholder for an avatar / profile image. */\nexport function SkeletonAvatar({ size = 40, ...rest }: SkeletonAvatarProps) {\n  return <Skeleton variant=\"circle\" width={size} height={size} {...rest} />;\n}\n"],"names":["VARIANT_CLASS","styles","toCssSize","value","Skeleton","variant","width","height","radius","animated","className","style","props","cls","w","h","mergedStyle","jsx","SkeletonText","lines","lastLineWidth","gap","_","i","isLast","SkeletonAvatar","size","rest"],"mappings":";;AAoBA,MAAMA,IAAiD;AAAA,EACrD,MAAQC,EAAO;AAAA,EACf,MAAQA,EAAO;AAAA,EACf,QAAQA,EAAO;AACjB;AAEA,SAASC,EAAUC,GAAwD;AACzE,MAAIA,KAAS;AACb,WAAO,OAAOA,KAAU,WAAW,GAAGA,CAAK,OAAOA;AACpD;AAOO,SAASC,EAAS;AAAA,EACvB,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAMC,IAAM;AAAA,IACVZ,EAAO;AAAA,IACPD,EAAcK,CAAO;AAAA,IACrBI,IAAWR,EAAO,WAAW;AAAA,IAC7BS;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,MAAII,IAAIZ,EAAUI,CAAK,GACnBS,IAAIb,EAAUK,CAAM;AAExB,EAAIF,MAAY,aACdS,IAAIA,KAAKC,KAAK,QACdA,IAAIA,KAAKD;AAGX,QAAME,IAAmC;AAAA,IACvC,OAAOF;AAAA,IACP,QAAQC;AAAA,IACR,cAAcb,EAAUM,CAAM;AAAA,IAC9B,GAAGG;AAAA,EAAA;AAGL,SAAO,gBAAAM,EAAC,UAAK,WAAWJ,GAAK,OAAOG,GAAa,eAAY,QAAQ,GAAGJ,EAAA,CAAO;AACjF;AAgBO,SAASM,EAAa;AAAA,EAC3B,OAAAC,IAAQ;AAAA,EACR,eAAAC,IAAgB;AAAA,EAChB,KAAAC,IAAM;AAAA,EACN,UAAAZ,IAAW;AAAA,EACX,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAsB;AACpB,QAAMC,IAAM,CAACZ,EAAO,WAAWS,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAElE,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWJ;AAAA,MACX,OAAO,EAAE,KAAKX,EAAUmB,CAAG,GAAG,GAAGV,EAAA;AAAA,MACjC,eAAY;AAAA,MACX,GAAGC;AAAA,MAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,KAAK,IAAI,GAAGO,CAAK,EAAA,CAAG,EAAE,IAAI,CAACG,GAAGC,MAAM;AACxD,cAAMC,IAASD,MAAMJ,IAAQ,KAAKA,IAAQ;AAC1C,eACE,gBAAAF;AAAA,UAACb;AAAA,UAAA;AAAA,YAEC,SAAQ;AAAA,YACR,UAAAK;AAAA,YACA,OAAOe,IAASJ,IAAgB;AAAA,UAAA;AAAA,UAH3BG;AAAA,QAAA;AAAA,MAMX,CAAC;AAAA,IAAA;AAAA,EAAA;AAGP;AAWO,SAASE,EAAe,EAAE,MAAAC,IAAO,IAAI,GAAGC,KAA6B;AAC1E,SAAO,gBAAAV,EAACb,KAAS,SAAQ,UAAS,OAAOsB,GAAM,QAAQA,GAAO,GAAGC,EAAA,CAAM;AACzE;"}

package/Skeleton/Skeleton.module.css

@@ -0,0 +1 @@
+@keyframes _skeleton-pulse_81pa6_1{0%,to{opacity:1}50%{opacity:.45}}._skeleton_81pa6_13{display:block;flex-shrink:0;background-color:var(--color-fill-neutral-muted)}._animated_81pa6_19{animation:_skeleton-pulse_81pa6_1 1.4s ease-in-out infinite}._text_81pa6_24{width:100%;height:1em;border-radius:4px}._rect_81pa6_30{width:100%;height:16px;border-radius:8px}._circle_81pa6_36{border-radius:9999px}._textGroup_81pa6_41{display:flex;flex-direction:column;width:100%}@media (prefers-reduced-motion: reduce){._animated_81pa6_19{animation:none}}

package/Skeleton/Skeleton.module.css.js

@@ -0,0 +1,18 @@
+import './Skeleton.module.css';const t = "_skeleton_81pa6_13", e = "_animated_81pa6_19", _ = "_text_81pa6_24", c = "_rect_81pa6_30", a = "_circle_81pa6_36", o = "_textGroup_81pa6_41", n = {
+  skeleton: t,
+  animated: e,
+  text: _,
+  rect: c,
+  circle: a,
+  textGroup: o
+};
+export {
+  e as animated,
+  a as circle,
+  n as default,
+  c as rect,
+  t as skeleton,
+  _ as text,
+  o as textGroup
+};
+//# sourceMappingURL=Skeleton.module.css.js.map

package/Skeleton/Skeleton.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/Slider/Slider.js

@@ -0,0 +1,116 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import S, { useId as $, useCallback as h } from "react";
+import { TextField as N } from "../TextField/TextField.js";
+import e from "./Slider.module.css.js";
+function z({
+  value: f,
+  defaultValue: y = 0,
+  min: a = 0,
+  max: l = 100,
+  step: u = 1,
+  showUpperFields: w = !1,
+  showBottomFields: M = !1,
+  disabled: c = !1,
+  "aria-label": j,
+  "aria-labelledby": k,
+  onChange: r,
+  className: I
+}) {
+  const R = $(), i = f !== void 0, [V, m] = S.useState(y), d = i ? f : V, v = Math.min(
+    100,
+    Math.max(0, (d - a) / (l - a) * 100)
+  ), x = h(
+    (o) => {
+      const s = Number(o.target.value);
+      i || m(s), r == null || r(s);
+    },
+    [i, r]
+  ), F = h(
+    (o) => {
+      const s = o.target.value;
+      if (s === "") return;
+      const p = Math.min(l, Math.max(a, Number(s)));
+      i || m(p), r == null || r(p);
+    },
+    [i, a, l, r]
+  ), L = [
+    e.slider,
+    c ? e.disabled : void 0,
+    I
+  ].filter(Boolean).join(" "), b = /* @__PURE__ */ n("div", { className: e.fieldRow, children: [
+    /* @__PURE__ */ t("div", { className: e.field, children: /* @__PURE__ */ t(
+      N,
+      {
+        showLabel: !1,
+        type: "number",
+        value: d,
+        min: a,
+        max: l,
+        step: u,
+        disabled: c,
+        onChange: F,
+        "aria-label": "Minimum value",
+        placeholder: "0"
+      }
+    ) }),
+    /* @__PURE__ */ t("div", { className: e.field, children: /* @__PURE__ */ t(
+      N,
+      {
+        showLabel: !1,
+        type: "number",
+        value: l,
+        min: a,
+        max: l,
+        step: u,
+        disabled: c,
+        readOnly: !0,
+        "aria-label": "Maximum value",
+        placeholder: "0"
+      }
+    ) })
+  ] });
+  return /* @__PURE__ */ n("div", { className: L, children: [
+    w && b,
+    /* @__PURE__ */ n("div", { className: e.trackContainer, children: [
+      /* @__PURE__ */ t("div", { className: e.track, children: /* @__PURE__ */ t(
+        "div",
+        {
+          className: e.range,
+          style: { width: `${v}%` }
+        }
+      ) }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          className: e.thumb,
+          style: { left: `${v}%` },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          id: R,
+          type: "range",
+          className: e.input,
+          min: a,
+          max: l,
+          step: u,
+          value: d,
+          disabled: c,
+          "aria-label": j,
+          "aria-labelledby": k,
+          "aria-valuemin": a,
+          "aria-valuemax": l,
+          "aria-valuenow": d,
+          onChange: x
+        }
+      )
+    ] }),
+    M && b
+  ] });
+}
+export {
+  z as Slider
+};
+//# sourceMappingURL=Slider.js.map

package/Slider/Slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.js","sources":["../../src/Slider/Slider.tsx"],"sourcesContent":["import React, { useId, useCallback } from 'react';\nimport { TextField } from '../TextField/index.js';\nimport styles from './Slider.module.css';\n\nexport interface SliderProps {\n  /** Current value (controlled). */\n  value?: number;\n  /** Default value for uncontrolled usage. */\n  defaultValue?: number;\n  /** Minimum value. Defaults to 0. */\n  min?: number;\n  /** Maximum value. Defaults to 100. */\n  max?: number;\n  /** Step increment. Defaults to 1. */\n  step?: number;\n  /** Show numeric input fields above the track. */\n  showUpperFields?: boolean;\n  /** Show numeric input fields below the track. */\n  showBottomFields?: boolean;\n  /** Disabled state — opacity 0.5, not interactive. */\n  disabled?: boolean;\n  /** Accessible label for the slider. */\n  'aria-label'?: string;\n  /** ID of an element that labels the slider. */\n  'aria-labelledby'?: string;\n  /** Called when the value changes. */\n  onChange?: (value: number) => void;\n  /** Additional class name applied to the root wrapper. */\n  className?: string;\n}\n\nexport function Slider({\n  value,\n  defaultValue = 0,\n  min = 0,\n  max = 100,\n  step = 1,\n  showUpperFields = false,\n  showBottomFields = false,\n  disabled = false,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledby,\n  onChange,\n  className,\n}: SliderProps) {\n  const inputId = useId();\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = React.useState<number>(defaultValue);\n  const currentValue = isControlled ? value : internalValue;\n\n  // Percentage along the track (0–100) for positioning thumb & range\n  const percentage = Math.min(\n    100,\n    Math.max(0, ((currentValue - min) / (max - min)) * 100)\n  );\n\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const next = Number(e.target.value);\n      if (!isControlled) setInternalValue(next);\n      onChange?.(next);\n    },\n    [isControlled, onChange]\n  );\n\n  const handleFieldChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const raw = e.target.value;\n      if (raw === '') return;\n      const clamped = Math.min(max, Math.max(min, Number(raw)));\n      if (!isControlled) setInternalValue(clamped);\n      onChange?.(clamped);\n    },\n    [isControlled, min, max, onChange]\n  );\n\n  const rootCls = [\n    styles.slider,\n    disabled ? styles.disabled : undefined,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  const fieldRow = (\n    <div className={styles.fieldRow}>\n      <div className={styles.field}>\n        <TextField\n          showLabel={false}\n          type=\"number\"\n          value={currentValue}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          onChange={handleFieldChange}\n          aria-label=\"Minimum value\"\n          placeholder=\"0\"\n        />\n      </div>\n      <div className={styles.field}>\n        <TextField\n          showLabel={false}\n          type=\"number\"\n          value={max}\n          min={min}\n          max={max}\n          step={step}\n          disabled={disabled}\n          readOnly\n          aria-label=\"Maximum value\"\n          placeholder=\"0\"\n        />\n      </div>\n    </div>\n  );\n\n  return (\n    <div className={rootCls}>\n      {showUpperFields && fieldRow}\n\n      {/* Track container — provides 24px tall hit area */}\n      <div className={styles.trackContainer}>\n        {/* Background track */}\n        <div className={styles.track}>\n          {/* Filled range */}\n          <div\n            className={styles.range}\n            style={{ width: `${percentage}%` }}\n          />\n        </div>\n\n        {/* Draggable thumb positioned by percentage */}\n        <div\n          className={styles.thumb}\n          style={{ left: `${percentage}%` }}\n          aria-hidden=\"true\"\n        />\n\n        {/* Hidden native input — drives all interaction and accessibility */}\n        <input\n          id={inputId}\n          type=\"range\"\n          className={styles.input}\n          min={min}\n          max={max}\n          step={step}\n          value={currentValue}\n          disabled={disabled}\n          aria-label={ariaLabel}\n          aria-labelledby={ariaLabelledby}\n          aria-valuemin={min}\n          aria-valuemax={max}\n          aria-valuenow={currentValue}\n          onChange={handleChange}\n        />\n      </div>\n\n      {showBottomFields && fieldRow}\n    </div>\n  );\n}\n"],"names":["Slider","value","defaultValue","min","max","step","showUpperFields","showBottomFields","disabled","ariaLabel","ariaLabelledby","onChange","className","inputId","useId","isControlled","internalValue","setInternalValue","React","currentValue","percentage","handleChange","useCallback","e","next","handleFieldChange","raw","clamped","rootCls","styles","fieldRow","jsxs","jsx","TextField"],"mappings":"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"}

package/Slider/Slider.module.css

@@ -0,0 +1 @@
+._slider_1nq38_2{display:flex;flex-direction:column;gap:8px;width:100%;position:relative}._slider_1nq38_2._disabled_1nq38_11{opacity:.5;cursor:not-allowed;pointer-events:none}._fieldRow_1nq38_18{display:flex;align-items:center;justify-content:space-between;width:100%}._field_1nq38_18{display:flex;flex-direction:column;gap:4px;width:100px}._trackContainer_1nq38_35{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:24px;width:100%;flex-shrink:0}._track_1nq38_35{position:relative;width:100%;height:4px;background-color:var(--color-fill-neutral-muted);border-radius:9999px;overflow:visible}._range_1nq38_57{position:absolute;top:0;left:0;height:4px;background-color:var(--color-fill-brand-default);border-radius:9999px}._input_1nq38_68{position:absolute;right:0;bottom:0;left:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;top:-10px;height:24px;-webkit-appearance:none;-moz-appearance:none;appearance:none}._thumb_1nq38_85{position:absolute;top:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:9999px;background-color:var(--color-canvas-neutral-white);border:7px solid var(--color-stroke-brand-default);box-sizing:border-box;pointer-events:none;flex-shrink:0;transition:box-shadow .12s ease}._trackContainer_1nq38_35:focus-within ._thumb_1nq38_85{box-shadow:var(--shadow-focus)}._trackContainer_1nq38_35:hover:not(._disabled_1nq38_11) ._thumb_1nq38_85{border-color:var(--color-stroke-interaction-brand-hover)}._trackContainer_1nq38_35:hover:not(._disabled_1nq38_11) ._range_1nq38_57{background-color:var(--color-fill-interaction-brand-hover)}

package/Slider/Slider.module.css.js

@@ -0,0 +1,24 @@
+import './Slider.module.css';const n = "_slider_1nq38_2", t = "_disabled_1nq38_11", _ = "_fieldRow_1nq38_18", e = "_field_1nq38_18", s = "_trackContainer_1nq38_35", i = "_track_1nq38_35", a = "_range_1nq38_57", o = "_input_1nq38_68", c = "_thumb_1nq38_85", d = {
+  slider: n,
+  disabled: t,
+  fieldRow: _,
+  field: e,
+  trackContainer: s,
+  track: i,
+  range: a,
+  input: o,
+  thumb: c
+};
+export {
+  d as default,
+  t as disabled,
+  e as field,
+  _ as fieldRow,
+  o as input,
+  a as range,
+  n as slider,
+  c as thumb,
+  i as track,
+  s as trackContainer
+};
+//# sourceMappingURL=Slider.module.css.js.map

package/Slider/Slider.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slider.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/Slot/Slot.js

@@ -0,0 +1,25 @@
+import { jsx as s, jsxs as c, Fragment as p } from "react/jsx-runtime";
+import { BoxArrowUp as d } from "@phosphor-icons/react";
+import { Icon as f } from "../Icon/Icon.js";
+import o from "./Slot.module.css.js";
+function h({
+  children: t,
+  placeholderIcon: n,
+  placeholderLabel: r = "Slot",
+  className: e,
+  ...i
+}) {
+  const l = t == null || typeof t == "string" && t.trim() === "", m = n ?? d, a = [
+    o.slot,
+    l ? o.slotEmpty : o.slotFilled,
+    e
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s("div", { className: a, ...i, children: l ? /* @__PURE__ */ c(p, { children: [
+    /* @__PURE__ */ s("span", { className: o.iconBadge, "aria-hidden": "true", children: /* @__PURE__ */ s(f, { as: m, size: 16, weight: "bold" }) }),
+    /* @__PURE__ */ s("span", { className: o.label, children: r })
+  ] }) : t });
+}
+export {
+  h as Slot
+};
+//# sourceMappingURL=Slot.js.map

package/Slot/Slot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slot.js","sources":["../../src/Slot/Slot.tsx"],"sourcesContent":["import React from 'react';\nimport type { Icon as PhosphorIcon } from '@phosphor-icons/react';\nimport { BoxArrowUp } from '@phosphor-icons/react';\nimport { Icon } from '../Icon/index.js';\nimport styles from './Slot.module.css';\n\nexport interface SlotProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Content to render inside the slot.\n   * When provided, the placeholder indicator is hidden and children\n   * fill the slot area directly.\n   */\n  children?: React.ReactNode;\n  /**\n   * Icon shown in the empty-state indicator badge.\n   * Defaults to BoxArrowUp (matches the Figma Slot placeholder).\n   */\n  placeholderIcon?: PhosphorIcon;\n  /**\n   * Label shown next to the icon in the empty-state indicator.\n   * Defaults to \"Slot\".\n   */\n  placeholderLabel?: string;\n}\n\nexport function Slot({\n  children,\n  placeholderIcon,\n  placeholderLabel = 'Slot',\n  className,\n  ...props\n}: SlotProps) {\n  const isEmpty = children == null || (typeof children === 'string' && children.trim() === '');\n  const IconComponent = placeholderIcon ?? BoxArrowUp;\n\n  const cls = [\n    styles.slot,\n    isEmpty ? styles.slotEmpty : styles.slotFilled,\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className={cls} {...props}>\n      {isEmpty ? (\n        <>\n          <span className={styles.iconBadge} aria-hidden=\"true\">\n            <Icon as={IconComponent} size={16} weight=\"bold\" />\n          </span>\n          <span className={styles.label}>{placeholderLabel}</span>\n        </>\n      ) : (\n        children\n      )}\n    </div>\n  );\n}\n"],"names":["Slot","children","placeholderIcon","placeholderLabel","className","props","isEmpty","IconComponent","BoxArrowUp","cls","styles","jsxs","Fragment","jsx","Icon"],"mappings":";;;;AAyBO,SAASA,EAAK;AAAA,EACnB,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,kBAAAC,IAAmB;AAAA,EACnB,WAAAC;AAAA,EACA,GAAGC;AACL,GAAc;AACZ,QAAMC,IAAUL,KAAY,QAAS,OAAOA,KAAa,YAAYA,EAAS,WAAW,IACnFM,IAAgBL,KAAmBM,GAEnCC,IAAM;AAAA,IACVC,EAAO;AAAA,IACPJ,IAAUI,EAAO,YAAYA,EAAO;AAAA,IACpCN;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,2BACG,OAAA,EAAI,WAAWK,GAAM,GAAGJ,GACtB,cACC,gBAAAM,EAAAC,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAC,EAAC,QAAA,EAAK,WAAWH,EAAO,WAAW,eAAY,QAC7C,UAAA,gBAAAG,EAACC,GAAA,EAAK,IAAIP,GAAe,MAAM,IAAI,QAAO,QAAO,GACnD;AAAA,IACA,gBAAAM,EAAC,QAAA,EAAK,WAAWH,EAAO,OAAQ,UAAAP,EAAA,CAAiB;AAAA,EAAA,EAAA,CACnD,IAEAF,GAEJ;AAEJ;"}

package/Slot/Slot.module.css

@@ -0,0 +1 @@
+._slot_wse4n_8{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:240px;min-height:80px;width:100%;height:100%;position:relative;box-sizing:border-box}._slotEmpty_wse4n_25{background-color:#9747ff1a;border:1px dashed #9747ff}._iconBadge_wse4n_31{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9999px;background-color:var(--color-canvas-neutral-white);color:#7e15e0;flex-shrink:0}._label_wse4n_44{font-family:var(--font-family-base, system-ui, sans-serif);font-size:var(--font-size-14);font-weight:var(--font-weight-semibold);line-height:var(--font-line-height-14);color:#7e15e0;white-space:nowrap}._slotFilled_wse4n_56{display:block;border:none;background-color:transparent;min-width:unset;min-height:unset;width:100%;height:auto}

package/Slot/Slot.module.css.js

@@ -0,0 +1,16 @@
+import './Slot.module.css';const l = "_slot_wse4n_8", s = "_slotEmpty_wse4n_25", t = "_iconBadge_wse4n_31", o = "_label_wse4n_44", e = "_slotFilled_wse4n_56", _ = {
+  slot: l,
+  slotEmpty: s,
+  iconBadge: t,
+  label: o,
+  slotFilled: e
+};
+export {
+  _ as default,
+  t as iconBadge,
+  o as label,
+  l as slot,
+  s as slotEmpty,
+  e as slotFilled
+};
+//# sourceMappingURL=Slot.module.css.js.map

package/Slot/Slot.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Slot.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/Switch/Switch.js

@@ -0,0 +1,42 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import j, { useId as w } from "react";
+import t from "./Switch.module.css.js";
+function S({
+  checked: c,
+  defaultChecked: l = !1,
+  onChange: s,
+  label: i,
+  disabled: n,
+  className: d,
+  id: m,
+  ...f
+}) {
+  const [p, u] = j.useState(l), o = c !== void 0, r = o ? c : p, h = w(), k = m ?? h;
+  function x() {
+    const a = !r;
+    o || u(a), s == null || s(a);
+  }
+  const N = [t.switch, d].filter(Boolean).join(" ");
+  return /* @__PURE__ */ b(
+    "button",
+    {
+      id: k,
+      type: "button",
+      role: "switch",
+      className: N,
+      "aria-checked": r,
+      "aria-disabled": n,
+      disabled: n,
+      onClick: x,
+      ...f,
+      children: [
+        /* @__PURE__ */ e("span", { className: t.track, children: /* @__PURE__ */ e("span", { className: t.thumb }) }),
+        i && /* @__PURE__ */ e("span", { className: t.label, children: i })
+      ]
+    }
+  );
+}
+export {
+  S as Switch
+};
+//# sourceMappingURL=Switch.js.map

package/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../src/Switch/Switch.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport styles from './Switch.module.css';\n\nexport interface SwitchProps\n  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {\n  /** Whether the switch is toggled on */\n  checked?: boolean;\n  /** Default checked state for uncontrolled usage */\n  defaultChecked?: boolean;\n  /** Callback when the user toggles the switch */\n  onChange?: (checked: boolean) => void;\n  /** Optional label text rendered beside the track */\n  label?: string;\n}\n\nexport function Switch({\n  checked,\n  defaultChecked = false,\n  onChange,\n  label,\n  disabled,\n  className,\n  id: idProp,\n  ...props\n}: SwitchProps) {\n  // Support both controlled and uncontrolled modes\n  const [internalChecked, setInternalChecked] = React.useState(defaultChecked);\n  const isControlled = checked !== undefined;\n  const isChecked = isControlled ? checked : internalChecked;\n\n  const generatedId = useId();\n  const id = idProp ?? generatedId;\n\n  function handleClick() {\n    const next = !isChecked;\n    if (!isControlled) {\n      setInternalChecked(next);\n    }\n    onChange?.(next);\n  }\n\n  const cls = [styles.switch, className].filter(Boolean).join(' ');\n\n  return (\n    <button\n      id={id}\n      type=\"button\"\n      role=\"switch\"\n      className={cls}\n      aria-checked={isChecked}\n      aria-disabled={disabled}\n      disabled={disabled}\n      onClick={handleClick}\n      {...props}\n    >\n      <span className={styles.track}>\n        <span className={styles.thumb} />\n      </span>\n      {label && <span className={styles.label}>{label}</span>}\n    </button>\n  );\n}\n"],"names":["Switch","checked","defaultChecked","onChange","label","disabled","className","idProp","props","internalChecked","setInternalChecked","React","isControlled","isChecked","generatedId","useId","id","handleClick","next","cls","styles","jsxs","jsx"],"mappings":";;;AAeO,SAASA,EAAO;AAAA,EACrB,SAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAIC;AAAA,EACJ,GAAGC;AACL,GAAgB;AAEd,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAAM,SAAST,CAAc,GACrEU,IAAeX,MAAY,QAC3BY,IAAYD,IAAeX,IAAUQ,GAErCK,IAAcC,EAAA,GACdC,IAAKT,KAAUO;AAErB,WAASG,IAAc;AACrB,UAAMC,IAAO,CAACL;AACd,IAAKD,KACHF,EAAmBQ,CAAI,GAEzBf,KAAA,QAAAA,EAAWe;AAAA,EACb;AAEA,QAAMC,IAAM,CAACC,EAAO,QAAQd,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE/D,SACE,gBAAAe;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAAL;AAAA,MACA,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAWG;AAAA,MACX,gBAAcN;AAAA,MACd,iBAAeR;AAAA,MACf,UAAAA;AAAA,MACA,SAASY;AAAA,MACR,GAAGT;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAc,EAAC,QAAA,EAAK,WAAWF,EAAO,OACtB,4BAAC,QAAA,EAAK,WAAWA,EAAO,MAAA,CAAO,EAAA,CACjC;AAAA,QACChB,KAAS,gBAAAkB,EAAC,QAAA,EAAK,WAAWF,EAAO,OAAQ,UAAAhB,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGtD;"}

package/Switch/Switch.module.css

@@ -0,0 +1 @@
+._switch_1w8fg_17{display:inline-flex;align-items:center;gap:8px;background:none;border:none;padding:0;cursor:pointer;font-family:var(--font-family-base, system-ui, sans-serif);font-size:var(--font-size-14);font-weight:var(--font-weight-regular);line-height:var(--font-line-height-14);color:var(--color-text-neutral-mudle);transition:opacity .12s ease}._switch_1w8fg_17:focus-visible{outline:none}._switch_1w8fg_17:focus-visible ._track_1w8fg_38{box-shadow:var(--shadow-focus)}._switch_1w8fg_17:disabled,._switch_1w8fg_17[aria-disabled=true]{opacity:.5;cursor:not-allowed;pointer-events:none}._track_1w8fg_38{position:relative;display:flex;align-items:center;width:36px;height:24px;border-radius:100px;flex-shrink:0;background-color:var(--color-fill-neutral-muted);transition:background-color .12s ease,box-shadow .12s ease}._thumb_1w8fg_66{position:absolute;left:0;width:24px;height:24px;box-sizing:border-box;border-radius:50%;background-color:var(--color-canvas-neutral-white);border:4px solid var(--color-stroke-neutral-default);transition:left .12s ease,border-color .12s ease}._switch_1w8fg_17:hover:not(:disabled) ._track_1w8fg_38{background-color:var(--color-fill-interaction-neutral-muted-hover)}._switch_1w8fg_17:hover:not(:disabled) ._thumb_1w8fg_66{border-color:var(--color-stroke-interaction-neutral-hover)}._switch_1w8fg_17[aria-checked=true] ._track_1w8fg_38{background-color:var(--color-fill-brand-default)}._switch_1w8fg_17[aria-checked=true] ._thumb_1w8fg_66{left:12px;border-color:var(--color-stroke-brand-default)}._switch_1w8fg_17[aria-checked=true]:hover:not(:disabled) ._track_1w8fg_38{background-color:var(--color-fill-interaction-brand-hover)}._switch_1w8fg_17[aria-checked=true]:hover:not(:disabled) ._thumb_1w8fg_66{border-color:var(--color-stroke-interaction-brand-hover)}

package/Switch/Switch.module.css.js

@@ -0,0 +1,11 @@
+import './Switch.module.css';const t = "_track_1w8fg_38", _ = "_thumb_1w8fg_66", c = {
+  switch: "_switch_1w8fg_17",
+  track: t,
+  thumb: _
+};
+export {
+  c as default,
+  _ as thumb,
+  t as track
+};
+//# sourceMappingURL=Switch.module.css.js.map

package/Switch/Switch.module.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.module.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}