@n3wth/ui 0.7.0 → 0.9.0

package/dist/atoms/Shape/Shape.js

@@ -0,0 +1,110 @@
+import { jsxs as S, jsx as s } from "react/jsx-runtime";
+import { cn as Z } from "../../utils/cn.js";
+import { generatePattern as $ } from "./patterns.js";
+function j(r) {
+  switch (r) {
+    case "circle":
+      return "";
+    case "square":
+      return "";
+    case "triangle":
+      return "M12 2L22 20H2L12 2Z";
+    case "diamond":
+      return "M12 1L23 12L12 23L1 12L12 1Z";
+    case "hexagon":
+      return "M12 2L21.5 7V17L12 22L2.5 17V7L12 2Z";
+    case "semicircle":
+      return "M2 12A10 10 0 0 1 22 12Z";
+    case "arc":
+      return "M4 20A12 12 0 0 1 20 20";
+    case "pill":
+      return "";
+    case "star":
+      return "M12 2L14.5 8.5L21.5 9L16.5 13.5L18 21L12 17L6 21L7.5 13.5L2.5 9L9.5 8.5L12 2Z";
+    default:
+      return "";
+  }
+}
+function i(r) {
+  return typeof r == "object" && r !== null && ("base" in r || "sm" in r || "md" in r || "lg" in r);
+}
+function H({
+  type: r,
+  size: e = 48,
+  color: p = "currentColor",
+  pattern: u = "solid",
+  patternColors: h,
+  patternScale: f = 1,
+  patternAngle: m = 45,
+  rotation: d = 0,
+  opacity: L = 1,
+  className: g,
+  style: x,
+  "aria-hidden": b = !0
+}) {
+  let t;
+  i(e) ? t = e.base ?? e.sm ?? e.md ?? e.lg ?? 48 : t = e;
+  const y = typeof t == "number" ? t : t.width, v = typeof t == "number" ? t : t.height, a = {};
+  if (i(e)) {
+    const n = (l) => {
+      if (l)
+        return typeof l == "number" ? l : l.width;
+    };
+    e.base && (a["--shape-size-base"] = `${n(e.base)}px`), e.sm && (a["--shape-size-sm"] = `${n(e.sm)}px`), e.md && (a["--shape-size-md"] = `${n(e.md)}px`), e.lg && (a["--shape-size-lg"] = `${n(e.lg)}px`);
+  }
+  const o = u !== "solid" && h ? $({
+    type: u,
+    colors: h,
+    scale: f,
+    angle: m
+  }) : null, c = o?.fill ?? p, w = () => {
+    switch (r) {
+      case "circle":
+        return /* @__PURE__ */ s("circle", { cx: "12", cy: "12", r: "10", fill: c });
+      case "square":
+        return /* @__PURE__ */ s("rect", { x: "2", y: "2", width: "20", height: "20", rx: "2", fill: c });
+      case "pill":
+        return /* @__PURE__ */ s("rect", { x: "2", y: "6", width: "20", height: "12", rx: "6", fill: c });
+      case "arc":
+        return /* @__PURE__ */ s(
+          "path",
+          {
+            d: "M4 20A12 12 0 0 1 20 20",
+            fill: "none",
+            stroke: c,
+            strokeWidth: "4",
+            strokeLinecap: "round"
+          }
+        );
+      default: {
+        const n = j(r);
+        return n ? /* @__PURE__ */ s("path", { d: n, fill: c }) : null;
+      }
+    }
+  }, M = i(e) ? "shape-responsive" : "";
+  return /* @__PURE__ */ S(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      width: y,
+      height: v,
+      className: Z("shape", M, g),
+      style: {
+        transform: d ? `rotate(${d}deg)` : void 0,
+        opacity: L,
+        ...a,
+        ...x
+      },
+      "aria-hidden": b,
+      focusable: "false",
+      children: [
+        o && /* @__PURE__ */ s("defs", { dangerouslySetInnerHTML: { __html: o.defs } }),
+        w()
+      ]
+    }
+  );
+}
+export {
+  H as Shape
+};
+//# sourceMappingURL=Shape.js.map

package/dist/atoms/Shape/Shape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shape.js","sources":["../../../src/atoms/Shape/Shape.tsx"],"sourcesContent":["import { cn } from '../../utils/cn'\nimport { generatePattern, PatternType } from './patterns'\n\nexport type ShapeType =\n  | 'circle'\n  | 'square'\n  | 'triangle'\n  | 'diamond'\n  | 'hexagon'\n  | 'semicircle'\n  | 'arc'\n  | 'pill'\n  | 'star'\n\nexport type ResponsiveSize = {\n  base?: number | { width: number; height: number }\n  sm?: number | { width: number; height: number }\n  md?: number | { width: number; height: number }\n  lg?: number | { width: number; height: number }\n}\n\nexport interface ShapeProps {\n  type: ShapeType\n  /**\n   * Size of the shape. Can be:\n   * - A number (same width/height)\n   * - An object { width, height }\n   * - A responsive object { base, sm, md, lg }\n   */\n  size?: number | { width: number; height: number } | ResponsiveSize\n  color?: string\n  pattern?: PatternType\n  patternColors?: string[]\n  patternScale?: number\n  patternAngle?: number\n  rotation?: number\n  opacity?: number\n  className?: string\n  style?: React.CSSProperties\n  /** Disable animations when user prefers reduced motion (handled via CSS) */\n  'aria-hidden'?: boolean\n}\n\nfunction getShapePath(type: ShapeType): string {\n  switch (type) {\n    case 'circle':\n      return ''\n    case 'square':\n      return ''\n    case 'triangle':\n      return 'M12 2L22 20H2L12 2Z'\n    case 'diamond':\n      return 'M12 1L23 12L12 23L1 12L12 1Z'\n    case 'hexagon':\n      return 'M12 2L21.5 7V17L12 22L2.5 17V7L12 2Z'\n    case 'semicircle':\n      return 'M2 12A10 10 0 0 1 22 12Z'\n    case 'arc':\n      return 'M4 20A12 12 0 0 1 20 20'\n    case 'pill':\n      return ''\n    case 'star':\n      return 'M12 2L14.5 8.5L21.5 9L16.5 13.5L18 21L12 17L6 21L7.5 13.5L2.5 9L9.5 8.5L12 2Z'\n    default:\n      return ''\n  }\n}\n\n// Check if size is a responsive object\nfunction isResponsiveSize(size: ShapeProps['size']): size is ResponsiveSize {\n  return (\n    typeof size === 'object' &&\n    size !== null &&\n    ('base' in size || 'sm' in size || 'md' in size || 'lg' in size)\n  )\n}\n\nexport function Shape({\n  type,\n  size = 48,\n  color = 'currentColor',\n  pattern = 'solid',\n  patternColors,\n  patternScale = 1,\n  patternAngle = 45,\n  rotation = 0,\n  opacity = 1,\n  className,\n  style,\n  'aria-hidden': ariaHidden = true,\n}: ShapeProps) {\n  // Handle responsive sizes by computing base size\n  // CSS custom properties will handle the responsive scaling\n  let computedSize: number | { width: number; height: number }\n\n  if (isResponsiveSize(size)) {\n    // Use base size or fallback to first defined breakpoint\n    computedSize = size.base ?? size.sm ?? size.md ?? size.lg ?? 48\n  } else {\n    computedSize = size\n  }\n\n  const width = typeof computedSize === 'number' ? computedSize : computedSize.width\n  const height = typeof computedSize === 'number' ? computedSize : computedSize.height\n\n  // Generate responsive CSS custom properties\n  const responsiveStyles: Record<string, string> = {}\n  if (isResponsiveSize(size)) {\n    const getSize = (s: number | { width: number; height: number } | undefined) => {\n      if (!s) return undefined\n      return typeof s === 'number' ? s : s.width\n    }\n\n    if (size.base) responsiveStyles['--shape-size-base'] = `${getSize(size.base)}px`\n    if (size.sm) responsiveStyles['--shape-size-sm'] = `${getSize(size.sm)}px`\n    if (size.md) responsiveStyles['--shape-size-md'] = `${getSize(size.md)}px`\n    if (size.lg) responsiveStyles['--shape-size-lg'] = `${getSize(size.lg)}px`\n  }\n\n  const patternResult =\n    pattern !== 'solid' && patternColors\n      ? generatePattern({\n          type: pattern,\n          colors: patternColors,\n          scale: patternScale,\n          angle: patternAngle,\n        })\n      : null\n\n  const fill = patternResult?.fill ?? color\n\n  const renderShape = () => {\n    switch (type) {\n      case 'circle':\n        return <circle cx=\"12\" cy=\"12\" r=\"10\" fill={fill} />\n      case 'square':\n        return <rect x=\"2\" y=\"2\" width=\"20\" height=\"20\" rx=\"2\" fill={fill} />\n      case 'pill':\n        return <rect x=\"2\" y=\"6\" width=\"20\" height=\"12\" rx=\"6\" fill={fill} />\n      case 'arc':\n        return (\n          <path\n            d=\"M4 20A12 12 0 0 1 20 20\"\n            fill=\"none\"\n            stroke={fill}\n            strokeWidth=\"4\"\n            strokeLinecap=\"round\"\n          />\n        )\n      default: {\n        const path = getShapePath(type)\n        return path ? <path d={path} fill={fill} /> : null\n      }\n    }\n  }\n\n  // Determine if we need responsive class\n  const responsiveClass = isResponsiveSize(size) ? 'shape-responsive' : ''\n\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      width={width}\n      height={height}\n      className={cn('shape', responsiveClass, className)}\n      style={{\n        transform: rotation ? `rotate(${rotation}deg)` : undefined,\n        opacity,\n        ...responsiveStyles,\n        ...style,\n      }}\n      aria-hidden={ariaHidden}\n      focusable=\"false\"\n    >\n      {patternResult && (\n        <defs dangerouslySetInnerHTML={{ __html: patternResult.defs }} />\n      )}\n      {renderShape()}\n    </svg>\n  )\n}\n"],"names":["getShapePath","type","isResponsiveSize","size","Shape","color","pattern","patternColors","patternScale","patternAngle","rotation","opacity","className","style","ariaHidden","computedSize","width","height","responsiveStyles","getSize","s","patternResult","generatePattern","fill","renderShape","jsx","path","responsiveClass","jsxs","cn"],"mappings":"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"}

package/dist/atoms/Shape/patterns.js

@@ -0,0 +1,66 @@
+let h = 0;
+function d() {
+  return `pattern-${++h}-${Date.now()}`;
+}
+function c(e, r, n = 1) {
+  const i = 10 * n, t = i / 2;
+  return `
+    <pattern id="${e}" patternUnits="userSpaceOnUse" width="${i}" height="${i}">
+      <rect width="${t}" height="${t}" fill="${r[0]}"/>
+      <rect x="${t}" y="${t}" width="${t}" height="${t}" fill="${r[0]}"/>
+      <rect x="${t}" width="${t}" height="${t}" fill="${r[1]}"/>
+      <rect y="${t}" width="${t}" height="${t}" fill="${r[1]}"/>
+    </pattern>
+  `;
+}
+function u(e, r, n = 1, i = 45) {
+  const t = 4 * n, $ = t * r.length, l = r.map(
+    (a, s) => `<rect x="${s * t}" width="${t}" height="${$}" fill="${a}"/>`
+  ).join("");
+  return `
+    <pattern id="${e}" patternUnits="userSpaceOnUse" width="${$}" height="${$}" patternTransform="rotate(${i})">
+      ${l}
+    </pattern>
+  `;
+}
+function p(e, r, n, i = 1) {
+  const t = 8 * i, $ = 1.5 * i;
+  return `
+    <pattern id="${e}" patternUnits="userSpaceOnUse" width="${t}" height="${t}">
+      <rect width="${t}" height="${t}" fill="${r}"/>
+      <circle cx="${t / 2}" cy="${t / 2}" r="${$}" fill="${n}"/>
+    </pattern>
+  `;
+}
+function o(e) {
+  if (e.type === "solid" || e.colors.length === 0)
+    return null;
+  const r = d(), n = e.scale ?? 1;
+  switch (e.type) {
+    case "checkered":
+      return {
+        defs: c(r, [e.colors[0], e.colors[1] || e.colors[0]], n),
+        fill: `url(#${r})`
+      };
+    case "striped":
+      return {
+        defs: u(r, e.colors, n, e.angle ?? 45),
+        fill: `url(#${r})`
+      };
+    case "dotted":
+      return {
+        defs: p(r, e.colors[0], e.colors[1] || "#fff", n),
+        fill: `url(#${r})`
+      };
+    default:
+      return null;
+  }
+}
+export {
+  c as generateCheckeredPattern,
+  p as generateDottedPattern,
+  o as generatePattern,
+  d as generatePatternId,
+  u as generateStripedPattern
+};
+//# sourceMappingURL=patterns.js.map

package/dist/atoms/Shape/patterns.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"patterns.js","sources":["../../../src/atoms/Shape/patterns.ts"],"sourcesContent":["/**\n * SVG pattern generators for shapes\n * Returns pattern definition and pattern ID for use in fills\n */\n\nexport type PatternType = 'solid' | 'checkered' | 'striped' | 'dotted'\n\nexport interface PatternConfig {\n  type: PatternType\n  colors: string[]\n  scale?: number\n  angle?: number\n}\n\nlet patternCounter = 0\n\nexport function generatePatternId(): string {\n  return `pattern-${++patternCounter}-${Date.now()}`\n}\n\nexport function generateCheckeredPattern(\n  id: string,\n  colors: [string, string],\n  scale: number = 1\n): string {\n  const size = 10 * scale\n  const half = size / 2\n  return `\n    <pattern id=\"${id}\" patternUnits=\"userSpaceOnUse\" width=\"${size}\" height=\"${size}\">\n      <rect width=\"${half}\" height=\"${half}\" fill=\"${colors[0]}\"/>\n      <rect x=\"${half}\" y=\"${half}\" width=\"${half}\" height=\"${half}\" fill=\"${colors[0]}\"/>\n      <rect x=\"${half}\" width=\"${half}\" height=\"${half}\" fill=\"${colors[1]}\"/>\n      <rect y=\"${half}\" width=\"${half}\" height=\"${half}\" fill=\"${colors[1]}\"/>\n    </pattern>\n  `\n}\n\nexport function generateStripedPattern(\n  id: string,\n  colors: string[],\n  scale: number = 1,\n  angle: number = 45\n): string {\n  const stripeWidth = 4 * scale\n  const totalWidth = stripeWidth * colors.length\n  const stripes = colors\n    .map(\n      (color, i) =>\n        `<rect x=\"${i * stripeWidth}\" width=\"${stripeWidth}\" height=\"${totalWidth}\" fill=\"${color}\"/>`\n    )\n    .join('')\n  return `\n    <pattern id=\"${id}\" patternUnits=\"userSpaceOnUse\" width=\"${totalWidth}\" height=\"${totalWidth}\" patternTransform=\"rotate(${angle})\">\n      ${stripes}\n    </pattern>\n  `\n}\n\nexport function generateDottedPattern(\n  id: string,\n  bgColor: string,\n  dotColor: string,\n  scale: number = 1\n): string {\n  const size = 8 * scale\n  const radius = 1.5 * scale\n  return `\n    <pattern id=\"${id}\" patternUnits=\"userSpaceOnUse\" width=\"${size}\" height=\"${size}\">\n      <rect width=\"${size}\" height=\"${size}\" fill=\"${bgColor}\"/>\n      <circle cx=\"${size / 2}\" cy=\"${size / 2}\" r=\"${radius}\" fill=\"${dotColor}\"/>\n    </pattern>\n  `\n}\n\nexport function generatePattern(config: PatternConfig): { defs: string; fill: string } | null {\n  if (config.type === 'solid' || config.colors.length === 0) {\n    return null\n  }\n\n  const id = generatePatternId()\n  const scale = config.scale ?? 1\n\n  switch (config.type) {\n    case 'checkered':\n      return {\n        defs: generateCheckeredPattern(id, [config.colors[0], config.colors[1] || config.colors[0]], scale),\n        fill: `url(#${id})`,\n      }\n    case 'striped':\n      return {\n        defs: generateStripedPattern(id, config.colors, scale, config.angle ?? 45),\n        fill: `url(#${id})`,\n      }\n    case 'dotted':\n      return {\n        defs: generateDottedPattern(id, config.colors[0], config.colors[1] || '#fff', scale),\n        fill: `url(#${id})`,\n      }\n    default:\n      return null\n  }\n}\n"],"names":["patternCounter","generatePatternId","generateCheckeredPattern","id","colors","scale","size","half","generateStripedPattern","angle","stripeWidth","totalWidth","stripes","color","i","generateDottedPattern","bgColor","dotColor","radius","generatePattern","config"],"mappings":"AAcA,IAAIA,IAAiB;AAEd,SAASC,IAA4B;AAC1C,SAAO,WAAW,EAAED,CAAc,IAAI,KAAK,KAAK;AAClD;AAEO,SAASE,EACdC,GACAC,GACAC,IAAgB,GACR;AACR,QAAMC,IAAO,KAAKD,GACZE,IAAOD,IAAO;AACpB,SAAO;AAAA,mBACUH,CAAE,0CAA0CG,CAAI,aAAaA,CAAI;AAAA,qBAC/DC,CAAI,aAAaA,CAAI,WAAWH,EAAO,CAAC,CAAC;AAAA,iBAC7CG,CAAI,QAAQA,CAAI,YAAYA,CAAI,aAAaA,CAAI,WAAWH,EAAO,CAAC,CAAC;AAAA,iBACrEG,CAAI,YAAYA,CAAI,aAAaA,CAAI,WAAWH,EAAO,CAAC,CAAC;AAAA,iBACzDG,CAAI,YAAYA,CAAI,aAAaA,CAAI,WAAWH,EAAO,CAAC,CAAC;AAAA;AAAA;AAG1E;AAEO,SAASI,EACdL,GACAC,GACAC,IAAgB,GAChBI,IAAgB,IACR;AACR,QAAMC,IAAc,IAAIL,GAClBM,IAAaD,IAAcN,EAAO,QAClCQ,IAAUR,EACb;AAAA,IACC,CAACS,GAAOC,MACN,YAAYA,IAAIJ,CAAW,YAAYA,CAAW,aAAaC,CAAU,WAAWE,CAAK;AAAA,EAAA,EAE5F,KAAK,EAAE;AACV,SAAO;AAAA,mBACUV,CAAE,0CAA0CQ,CAAU,aAAaA,CAAU,8BAA8BF,CAAK;AAAA,QAC3HG,CAAO;AAAA;AAAA;AAGf;AAEO,SAASG,EACdZ,GACAa,GACAC,GACAZ,IAAgB,GACR;AACR,QAAMC,IAAO,IAAID,GACXa,IAAS,MAAMb;AACrB,SAAO;AAAA,mBACUF,CAAE,0CAA0CG,CAAI,aAAaA,CAAI;AAAA,qBAC/DA,CAAI,aAAaA,CAAI,WAAWU,CAAO;AAAA,oBACxCV,IAAO,CAAC,SAASA,IAAO,CAAC,QAAQY,CAAM,WAAWD,CAAQ;AAAA;AAAA;AAG9E;AAEO,SAASE,EAAgBC,GAA8D;AAC5F,MAAIA,EAAO,SAAS,WAAWA,EAAO,OAAO,WAAW;AACtD,WAAO;AAGT,QAAMjB,IAAKF,EAAA,GACLI,IAAQe,EAAO,SAAS;AAE9B,UAAQA,EAAO,MAAA;AAAA,IACb,KAAK;AACH,aAAO;AAAA,QACL,MAAMlB,EAAyBC,GAAI,CAACiB,EAAO,OAAO,CAAC,GAAGA,EAAO,OAAO,CAAC,KAAKA,EAAO,OAAO,CAAC,CAAC,GAAGf,CAAK;AAAA,QAClG,MAAM,QAAQF,CAAE;AAAA,MAAA;AAAA,IAEpB,KAAK;AACH,aAAO;AAAA,QACL,MAAMK,EAAuBL,GAAIiB,EAAO,QAAQf,GAAOe,EAAO,SAAS,EAAE;AAAA,QACzE,MAAM,QAAQjB,CAAE;AAAA,MAAA;AAAA,IAEpB,KAAK;AACH,aAAO;AAAA,QACL,MAAMY,EAAsBZ,GAAIiB,EAAO,OAAO,CAAC,GAAGA,EAAO,OAAO,CAAC,KAAK,QAAQf,CAAK;AAAA,QACnF,MAAM,QAAQF,CAAE;AAAA,MAAA;AAAA,IAEpB;AACE,aAAO;AAAA,EAAA;AAEb;"}

package/dist/atoms/Skeleton/Skeleton.js

@@ -0,0 +1,77 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { cn as i } from "../../utils/cn.js";
+function d({
+  variant: t = "text",
+  width: r,
+  height: s,
+  animate: m = !0,
+  className: n,
+  style: l,
+  ...a
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: i([
+        "bg-[var(--glass-highlight)]",
+        m && "animate-pulse"
+      ], {
+        text: "rounded h-4",
+        circular: "rounded-full",
+        rectangular: "rounded-lg"
+      }[t], n),
+      style: {
+        width: typeof r == "number" ? `${r}px` : r,
+        height: typeof s == "number" ? `${s}px` : s,
+        ...l
+      },
+      ...a
+    }
+  );
+}
+function h({
+  lines: t = 2,
+  showHeader: r = !0,
+  showTags: s = !0,
+  className: m,
+  ...n
+}) {
+  return /* @__PURE__ */ c(
+    "div",
+    {
+      className: i(
+        "p-5 md:p-6 rounded-2xl border",
+        "bg-[var(--glass-bg)] border-[var(--glass-border)]",
+        m
+      ),
+      ...n,
+      children: [
+        r && /* @__PURE__ */ e("div", { className: "mb-3 md:mb-4", children: /* @__PURE__ */ e(d, { variant: "circular", width: 12, height: 12 }) }),
+        /* @__PURE__ */ e(d, { width: "70%", height: 20, className: "mb-2" }),
+        /* @__PURE__ */ e("div", { className: "space-y-2 mb-3 md:mb-4", children: Array.from({ length: t }).map((l, a) => /* @__PURE__ */ e(
+          d,
+          {
+            width: a === t - 1 ? "85%" : "100%",
+            height: 14,
+            className: "bg-[var(--glass-bg)]"
+          },
+          a
+        )) }),
+        s && /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: [50, 60, 70].map((l, a) => /* @__PURE__ */ e(
+          d,
+          {
+            width: l,
+            height: 12,
+            className: "bg-[var(--glass-bg)]"
+          },
+          a
+        )) })
+      ]
+    }
+  );
+}
+export {
+  h as CardSkeleton,
+  d as Skeleton
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/atoms/Skeleton/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/atoms/Skeleton/Skeleton.tsx"],"sourcesContent":["import { type HTMLAttributes } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Skeleton variant */\n  variant?: 'text' | 'circular' | 'rectangular'\n  /** Width of the skeleton */\n  width?: string | number\n  /** Height of the skeleton */\n  height?: string | number\n  /** Enable shimmer animation */\n  animate?: boolean\n}\n\n/**\n * Skeleton loading placeholder\n * Uses CSS custom properties for consistent theming\n */\nexport function Skeleton({\n  variant = 'text',\n  width,\n  height,\n  animate = true,\n  className,\n  style,\n  ...props\n}: SkeletonProps) {\n  const baseStyles = [\n    'bg-[var(--glass-highlight)]',\n    animate && 'animate-pulse',\n  ]\n\n  const variants = {\n    text: 'rounded h-4',\n    circular: 'rounded-full',\n    rectangular: 'rounded-lg',\n  }\n\n  return (\n    <div\n      className={cn(baseStyles, variants[variant], className)}\n      style={{\n        width: typeof width === 'number' ? `${width}px` : width,\n        height: typeof height === 'number' ? `${height}px` : height,\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\nexport interface CardSkeletonProps extends HTMLAttributes<HTMLDivElement> {\n  /** Number of text lines to show */\n  lines?: number\n  /** Show header indicator */\n  showHeader?: boolean\n  /** Show tags row */\n  showTags?: boolean\n}\n\n/**\n * Pre-composed card skeleton for common use cases\n */\nexport function CardSkeleton({\n  lines = 2,\n  showHeader = true,\n  showTags = true,\n  className,\n  ...props\n}: CardSkeletonProps) {\n  return (\n    <div\n      className={cn(\n        'p-5 md:p-6 rounded-2xl border',\n        'bg-[var(--glass-bg)] border-[var(--glass-border)]',\n        className\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"mb-3 md:mb-4\">\n          <Skeleton variant=\"circular\" width={12} height={12} />\n        </div>\n      )}\n\n      <Skeleton width=\"70%\" height={20} className=\"mb-2\" />\n\n      <div className=\"space-y-2 mb-3 md:mb-4\">\n        {Array.from({ length: lines }).map((_, i) => (\n          <Skeleton\n            key={i}\n            width={i === lines - 1 ? '85%' : '100%'}\n            height={14}\n            className=\"bg-[var(--glass-bg)]\"\n          />\n        ))}\n      </div>\n\n      {showTags && (\n        <div className=\"flex flex-wrap gap-2\">\n          {[50, 60, 70].map((width, i) => (\n            <Skeleton\n              key={i}\n              width={width}\n              height={12}\n              className=\"bg-[var(--glass-bg)]\"\n            />\n          ))}\n        </div>\n      )}\n    </div>\n  )\n}\n"],"names":["Skeleton","variant","width","height","animate","className","style","props","jsx","cn","CardSkeleton","lines","showHeader","showTags","jsxs","_","i"],"mappings":";;AAkBO,SAASA,EAAS;AAAA,EACvB,SAAAC,IAAU;AAAA,EACV,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAYhB,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAbI;AAAA,QACjB;AAAA,QACAL,KAAW;AAAA,MAAA,GAGI;AAAA,QACf,MAAM;AAAA,QACN,UAAU;AAAA,QACV,aAAa;AAAA,MAAA,EAKwBH,CAAO,GAAGI,CAAS;AAAA,MACtD,OAAO;AAAA,QACL,OAAO,OAAOH,KAAU,WAAW,GAAGA,CAAK,OAAOA;AAAA,QAClD,QAAQ,OAAOC,KAAW,WAAW,GAAGA,CAAM,OAAOA;AAAA,QACrD,GAAGG;AAAA,MAAA;AAAA,MAEJ,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAcO,SAASG,EAAa;AAAA,EAC3B,OAAAC,IAAQ;AAAA,EACR,YAAAC,IAAa;AAAA,EACb,UAAAC,IAAW;AAAA,EACX,WAAAR;AAAA,EACA,GAAGE;AACL,GAAsB;AACpB,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWL;AAAA,QACT;AAAA,QACA;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAK,KACC,gBAAAJ,EAAC,OAAA,EAAI,WAAU,gBACb,UAAA,gBAAAA,EAACR,GAAA,EAAS,SAAQ,YAAW,OAAO,IAAI,QAAQ,GAAA,CAAI,GACtD;AAAA,0BAGDA,GAAA,EAAS,OAAM,OAAM,QAAQ,IAAI,WAAU,QAAO;AAAA,QAEnD,gBAAAQ,EAAC,OAAA,EAAI,WAAU,0BACZ,gBAAM,KAAK,EAAE,QAAQG,EAAA,CAAO,EAAE,IAAI,CAACI,GAAGC,MACrC,gBAAAR;AAAA,UAACR;AAAA,UAAA;AAAA,YAEC,OAAOgB,MAAML,IAAQ,IAAI,QAAQ;AAAA,YACjC,QAAQ;AAAA,YACR,WAAU;AAAA,UAAA;AAAA,UAHLK;AAAA,QAAA,CAKR,GACH;AAAA,QAECH,KACC,gBAAAL,EAAC,OAAA,EAAI,WAAU,wBACZ,UAAA,CAAC,IAAI,IAAI,EAAE,EAAE,IAAI,CAACN,GAAOc,MACxB,gBAAAR;AAAA,UAACR;AAAA,UAAA;AAAA,YAEC,OAAAE;AAAA,YACA,QAAQ;AAAA,YACR,WAAU;AAAA,UAAA;AAAA,UAHLc;AAAA,QAAA,CAKR,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/atoms/SpeechBubble/SpeechBubble.js

@@ -0,0 +1,98 @@
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import { cn as a } from "../../utils/cn.js";
+const c = {
+  sm: "px-2 py-1 text-xs",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-3 text-base"
+};
+function b({
+  children: r,
+  direction: o = "bottom",
+  variant: n = "speech",
+  size: i = "md",
+  color: e = "var(--glass-bg, rgba(255, 255, 255, 0.05))",
+  borderColor: l = "var(--glass-border, rgba(255, 255, 255, 0.1))",
+  className: d,
+  style: p
+}) {
+  const x = n === "thought", h = {
+    bottom: "bottom-0 left-1/2 -translate-x-1/2 translate-y-full",
+    top: "top-0 left-1/2 -translate-x-1/2 -translate-y-full rotate-180",
+    left: "left-0 top-1/2 -translate-x-full -translate-y-1/2 -rotate-90",
+    right: "right-0 top-1/2 translate-x-full -translate-y-1/2 rotate-90"
+  }, f = {
+    bottom: "bottom-0 left-1/2 -translate-x-1/2 translate-y-[150%]",
+    top: "top-0 left-1/2 -translate-x-1/2 -translate-y-[150%]",
+    left: "left-0 top-1/2 -translate-x-[150%] -translate-y-1/2",
+    right: "right-0 top-1/2 translate-x-[150%] -translate-y-1/2"
+  };
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: a("relative inline-block", d),
+      style: p,
+      children: /* @__PURE__ */ s(
+        "div",
+        {
+          className: a(
+            "relative rounded-xl",
+            c[i]
+          ),
+          style: {
+            backgroundColor: e,
+            border: `1px solid ${l}`
+          },
+          children: [
+            r,
+            x ? /* @__PURE__ */ s("div", { className: a("absolute flex gap-1", f[o]), children: [
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  className: "w-2 h-2 rounded-full",
+                  style: { backgroundColor: e, border: `1px solid ${l}` }
+                }
+              ),
+              /* @__PURE__ */ t(
+                "div",
+                {
+                  className: "w-1.5 h-1.5 rounded-full",
+                  style: { backgroundColor: e, border: `1px solid ${l}` }
+                }
+              )
+            ] }) : /* @__PURE__ */ t("div", { className: a("absolute", h[o]), children: /* @__PURE__ */ s(
+              "svg",
+              {
+                width: "12",
+                height: "8",
+                viewBox: "0 0 12 8",
+                fill: "none",
+                children: [
+                  /* @__PURE__ */ t(
+                    "path",
+                    {
+                      d: "M6 8L0 0H12L6 8Z",
+                      fill: e
+                    }
+                  ),
+                  /* @__PURE__ */ t(
+                    "path",
+                    {
+                      d: "M0.5 0L6 7L11.5 0",
+                      stroke: l,
+                      strokeWidth: "1",
+                      fill: "none"
+                    }
+                  )
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  b as SpeechBubble
+};
+//# sourceMappingURL=SpeechBubble.js.map

package/dist/atoms/SpeechBubble/SpeechBubble.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpeechBubble.js","sources":["../../../src/atoms/SpeechBubble/SpeechBubble.tsx"],"sourcesContent":["import { cn } from '../../utils/cn'\n\nexport type BubbleDirection = 'left' | 'right' | 'top' | 'bottom'\nexport type BubbleVariant = 'speech' | 'thought'\nexport type BubbleSize = 'sm' | 'md' | 'lg'\n\nexport interface SpeechBubbleProps {\n  children: React.ReactNode\n  direction?: BubbleDirection\n  variant?: BubbleVariant\n  size?: BubbleSize\n  color?: string\n  borderColor?: string\n  className?: string\n  style?: React.CSSProperties\n}\n\nconst sizeClasses: Record<BubbleSize, string> = {\n  sm: 'px-2 py-1 text-xs',\n  md: 'px-3 py-2 text-sm',\n  lg: 'px-4 py-3 text-base',\n}\n\nexport function SpeechBubble({\n  children,\n  direction = 'bottom',\n  variant = 'speech',\n  size = 'md',\n  color = 'var(--glass-bg, rgba(255, 255, 255, 0.05))',\n  borderColor = 'var(--glass-border, rgba(255, 255, 255, 0.1))',\n  className,\n  style,\n}: SpeechBubbleProps) {\n  const isThought = variant === 'thought'\n\n  // Tail positioning\n  const tailPosition: Record<BubbleDirection, string> = {\n    bottom: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-full',\n    top: 'top-0 left-1/2 -translate-x-1/2 -translate-y-full rotate-180',\n    left: 'left-0 top-1/2 -translate-x-full -translate-y-1/2 -rotate-90',\n    right: 'right-0 top-1/2 translate-x-full -translate-y-1/2 rotate-90',\n  }\n\n  // Thought bubble dots positioning\n  const dotsPosition: Record<BubbleDirection, string> = {\n    bottom: 'bottom-0 left-1/2 -translate-x-1/2 translate-y-[150%]',\n    top: 'top-0 left-1/2 -translate-x-1/2 -translate-y-[150%]',\n    left: 'left-0 top-1/2 -translate-x-[150%] -translate-y-1/2',\n    right: 'right-0 top-1/2 translate-x-[150%] -translate-y-1/2',\n  }\n\n  return (\n    <div\n      className={cn('relative inline-block', className)}\n      style={style}\n    >\n      <div\n        className={cn(\n          'relative rounded-xl',\n          sizeClasses[size]\n        )}\n        style={{\n          backgroundColor: color,\n          border: `1px solid ${borderColor}`,\n        }}\n      >\n        {children}\n\n        {/* Speech tail or thought dots */}\n        {isThought ? (\n          <div className={cn('absolute flex gap-1', dotsPosition[direction])}>\n            <div\n              className=\"w-2 h-2 rounded-full\"\n              style={{ backgroundColor: color, border: `1px solid ${borderColor}` }}\n            />\n            <div\n              className=\"w-1.5 h-1.5 rounded-full\"\n              style={{ backgroundColor: color, border: `1px solid ${borderColor}` }}\n            />\n          </div>\n        ) : (\n          <div className={cn('absolute', tailPosition[direction])}>\n            <svg\n              width=\"12\"\n              height=\"8\"\n              viewBox=\"0 0 12 8\"\n              fill=\"none\"\n            >\n              <path\n                d=\"M6 8L0 0H12L6 8Z\"\n                fill={color}\n              />\n              <path\n                d=\"M0.5 0L6 7L11.5 0\"\n                stroke={borderColor}\n                strokeWidth=\"1\"\n                fill=\"none\"\n              />\n            </svg>\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n"],"names":["sizeClasses","SpeechBubble","children","direction","variant","size","color","borderColor","className","style","isThought","tailPosition","dotsPosition","jsx","cn","jsxs"],"mappings":";;AAiBA,MAAMA,IAA0C;AAAA,EAC9C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,SAASC,EAAa;AAAA,EAC3B,UAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,SAAAC,IAAU;AAAA,EACV,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,aAAAC,IAAc;AAAA,EACd,WAAAC;AAAA,EACA,OAAAC;AACF,GAAsB;AACpB,QAAMC,IAAYN,MAAY,WAGxBO,IAAgD;AAAA,IACpD,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EAAA,GAIHC,IAAgD;AAAA,IACpD,QAAQ;AAAA,IACR,KAAK;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,EAAA;AAGT,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAG,yBAAyBN,CAAS;AAAA,MAChD,OAAAC;AAAA,MAEA,UAAA,gBAAAM;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWD;AAAA,YACT;AAAA,YACAd,EAAYK,CAAI;AAAA,UAAA;AAAA,UAElB,OAAO;AAAA,YACL,iBAAiBC;AAAA,YACjB,QAAQ,aAAaC,CAAW;AAAA,UAAA;AAAA,UAGjC,UAAA;AAAA,YAAAL;AAAA,YAGAQ,sBACE,OAAA,EAAI,WAAWI,EAAG,uBAAuBF,EAAaT,CAAS,CAAC,GAC/D,UAAA;AAAA,cAAA,gBAAAU;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,iBAAiBP,GAAO,QAAQ,aAAaC,CAAW,GAAA;AAAA,gBAAG;AAAA,cAAA;AAAA,cAEtE,gBAAAM;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,OAAO,EAAE,iBAAiBP,GAAO,QAAQ,aAAaC,CAAW,GAAA;AAAA,gBAAG;AAAA,cAAA;AAAA,YACtE,EAAA,CACF,sBAEC,OAAA,EAAI,WAAWO,EAAG,YAAYH,EAAaR,CAAS,CAAC,GACpD,UAAA,gBAAAY;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,QAAO;AAAA,gBACP,SAAQ;AAAA,gBACR,MAAK;AAAA,gBAEL,UAAA;AAAA,kBAAA,gBAAAF;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,GAAE;AAAA,sBACF,MAAMP;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAER,gBAAAO;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,GAAE;AAAA,sBACF,QAAQN;AAAA,sBACR,aAAY;AAAA,sBACZ,MAAK;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACP;AAAA,cAAA;AAAA,YAAA,EACF,CACF;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,EAAA;AAGN;"}

package/dist/atoms/Switch/Switch.js

@@ -0,0 +1,78 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as g, useState as k, useRef as v, useCallback as c } from "react";
+import { cn as d } from "../../utils/cn.js";
+const y = {
+  sm: "w-8 h-[18px]",
+  md: "w-10 h-[22px]",
+  lg: "w-12 h-[26px]"
+}, S = {
+  sm: "w-3.5 h-3.5",
+  md: "w-[18px] h-[18px]",
+  lg: "w-[22px] h-[22px]"
+}, C = {
+  sm: "translate-x-[14px]",
+  md: "translate-x-[18px]",
+  lg: "translate-x-[22px]"
+}, D = g(
+  ({
+    checked: s,
+    defaultChecked: u = !1,
+    onChange: l,
+    disabled: r = !1,
+    size: n = "md",
+    label: p,
+    className: m
+  }, f) => {
+    const o = s !== void 0, [h, x] = k(u), e = o ? s : h, w = v(null), a = c(() => {
+      if (r) return;
+      const t = !e;
+      o || x(t), l?.(t);
+    }, [r, e, o, l]), b = c(
+      (t) => {
+        t.key === "Enter" && (t.preventDefault(), a());
+      },
+      [a]
+    );
+    return /* @__PURE__ */ i(
+      "button",
+      {
+        ref: f ?? w,
+        type: "button",
+        role: "switch",
+        "aria-checked": e,
+        "aria-label": p,
+        disabled: r,
+        onClick: a,
+        onKeyDown: b,
+        className: d(
+          "relative inline-flex shrink-0 cursor-pointer items-center rounded-full",
+          "border border-transparent",
+          "transition-colors duration-200 ease-out",
+          "focus-ring",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          e ? "bg-[var(--color-sage)]" : "bg-[var(--glass-border)]",
+          y[n],
+          m
+        ),
+        children: /* @__PURE__ */ i(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: d(
+              "pointer-events-none inline-block rounded-full",
+              "bg-[var(--color-white)]",
+              "transition-transform duration-200 ease-out",
+              S[n],
+              e ? C[n] : "translate-x-0.5"
+            )
+          }
+        )
+      }
+    );
+  }
+);
+D.displayName = "Switch";
+export {
+  D as Switch
+};
+//# sourceMappingURL=Switch.js.map

package/dist/atoms/Switch/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../src/atoms/Switch/Switch.tsx"],"sourcesContent":["import { forwardRef, useCallback, useRef, useState, type KeyboardEvent } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface SwitchProps {\n  checked?: boolean\n  defaultChecked?: boolean\n  onChange?: (checked: boolean) => void\n  disabled?: boolean\n  size?: 'sm' | 'md' | 'lg'\n  label?: string\n  className?: string\n}\n\nconst trackSizes = {\n  sm: 'w-8 h-[18px]',\n  md: 'w-10 h-[22px]',\n  lg: 'w-12 h-[26px]',\n}\n\nconst thumbSizes = {\n  sm: 'w-3.5 h-3.5',\n  md: 'w-[18px] h-[18px]',\n  lg: 'w-[22px] h-[22px]',\n}\n\nconst thumbTranslate = {\n  sm: 'translate-x-[14px]',\n  md: 'translate-x-[18px]',\n  lg: 'translate-x-[22px]',\n}\n\nexport const Switch = forwardRef<HTMLButtonElement, SwitchProps>(\n  (\n    {\n      checked: controlledChecked,\n      defaultChecked = false,\n      onChange,\n      disabled = false,\n      size = 'md',\n      label,\n      className,\n    },\n    ref\n  ) => {\n    const isControlled = controlledChecked !== undefined\n    const [internalChecked, setInternalChecked] = useState(defaultChecked)\n    const isChecked = isControlled ? controlledChecked : internalChecked\n    const internalRef = useRef<HTMLButtonElement>(null)\n\n    const toggle = useCallback(() => {\n      if (disabled) return\n      const next = !isChecked\n      if (!isControlled) {\n        setInternalChecked(next)\n      }\n      onChange?.(next)\n    }, [disabled, isChecked, isControlled, onChange])\n\n    const handleKeyDown = useCallback(\n      (e: KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'Enter') {\n          e.preventDefault()\n          toggle()\n        }\n      },\n      [toggle]\n    )\n\n    return (\n      <button\n        ref={ref ?? internalRef}\n        type=\"button\"\n        role=\"switch\"\n        aria-checked={isChecked}\n        aria-label={label}\n        disabled={disabled}\n        onClick={toggle}\n        onKeyDown={handleKeyDown}\n        className={cn(\n          'relative inline-flex shrink-0 cursor-pointer items-center rounded-full',\n          'border border-transparent',\n          'transition-colors duration-200 ease-out',\n          'focus-ring',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          isChecked\n            ? 'bg-[var(--color-sage)]'\n            : 'bg-[var(--glass-border)]',\n          trackSizes[size],\n          className\n        )}\n      >\n        <span\n          aria-hidden=\"true\"\n          className={cn(\n            'pointer-events-none inline-block rounded-full',\n            'bg-[var(--color-white)]',\n            'transition-transform duration-200 ease-out',\n            thumbSizes[size],\n            isChecked ? thumbTranslate[size] : 'translate-x-0.5'\n          )}\n        />\n      </button>\n    )\n  }\n)\n\nSwitch.displayName = 'Switch'\n"],"names":["trackSizes","thumbSizes","thumbTranslate","Switch","forwardRef","controlledChecked","defaultChecked","onChange","disabled","size","label","className","ref","isControlled","internalChecked","setInternalChecked","useState","isChecked","internalRef","useRef","toggle","useCallback","next","handleKeyDown","e","jsx","cn"],"mappings":";;;AAaA,MAAMA,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAa;AAAA,EACjB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEMC,IAAiB;AAAA,EACrB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAASC;AAAA,EACpB,CACE;AAAA,IACE,SAASC;AAAA,IACT,gBAAAC,IAAiB;AAAA,IACjB,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,OAAAC;AAAA,IACA,WAAAC;AAAA,EAAA,GAEFC,MACG;AACH,UAAMC,IAAeR,MAAsB,QACrC,CAACS,GAAiBC,CAAkB,IAAIC,EAASV,CAAc,GAC/DW,IAAYJ,IAAeR,IAAoBS,GAC/CI,IAAcC,EAA0B,IAAI,GAE5CC,IAASC,EAAY,MAAM;AAC/B,UAAIb,EAAU;AACd,YAAMc,IAAO,CAACL;AACd,MAAKJ,KACHE,EAAmBO,CAAI,GAEzBf,IAAWe,CAAI;AAAA,IACjB,GAAG,CAACd,GAAUS,GAAWJ,GAAcN,CAAQ,CAAC,GAE1CgB,IAAgBF;AAAA,MACpB,CAACG,MAAwC;AACvC,QAAIA,EAAE,QAAQ,YACZA,EAAE,eAAA,GACFJ,EAAA;AAAA,MAEJ;AAAA,MACA,CAACA,CAAM;AAAA,IAAA;AAGT,WACE,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKb,KAAOM;AAAA,QACZ,MAAK;AAAA,QACL,MAAK;AAAA,QACL,gBAAcD;AAAA,QACd,cAAYP;AAAA,QACZ,UAAAF;AAAA,QACA,SAASY;AAAA,QACT,WAAWG;AAAA,QACX,WAAWG;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAT,IACI,2BACA;AAAA,UACJjB,EAAWS,CAAI;AAAA,UACfE;AAAA,QAAA;AAAA,QAGF,UAAA,gBAAAc;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,WAAWC;AAAA,cACT;AAAA,cACA;AAAA,cACA;AAAA,cACAzB,EAAWQ,CAAI;AAAA,cACfQ,IAAYf,EAAeO,CAAI,IAAI;AAAA,YAAA;AAAA,UACrC;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEAN,EAAO,cAAc;"}

package/dist/atoms/Textarea/Textarea.js

@@ -0,0 +1,40 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { cn as l } from "../../utils/cn.js";
+const n = s(
+  ({
+    resize: e = "vertical",
+    error: r = !1,
+    className: o,
+    ...a
+  }, t) => /* @__PURE__ */ i(
+    "textarea",
+    {
+      ref: t,
+      className: l(
+        "min-h-[80px] w-full",
+        "bg-transparent",
+        "border rounded-lg px-3 py-2",
+        "text-sm text-[var(--color-white)]",
+        "placeholder:text-[var(--color-grey-400)]",
+        "transition-[border-color] duration-200 ease-out",
+        "focus:outline-none focus-visible:outline-none",
+        "focus-ring",
+        r ? "border-[var(--color-coral)]" : "border-[var(--glass-border)] hover:border-[var(--glass-highlight)] focus:border-[var(--glass-highlight)]",
+        {
+          none: "resize-none",
+          vertical: "resize-y",
+          both: "resize"
+        }[e],
+        o
+      ),
+      "aria-invalid": r || void 0,
+      ...a
+    }
+  )
+);
+n.displayName = "Textarea";
+export {
+  n as Textarea
+};
+//# sourceMappingURL=Textarea.js.map

package/dist/atoms/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../src/atoms/Textarea/Textarea.tsx"],"sourcesContent":["import { forwardRef, type TextareaHTMLAttributes } from 'react'\nimport { cn } from '../../utils/cn'\n\nexport interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {\n  resize?: 'none' | 'vertical' | 'both'\n  error?: boolean\n  className?: string\n}\n\nexport const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(\n  (\n    {\n      resize = 'vertical',\n      error = false,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    const resizeStyles = {\n      none: 'resize-none',\n      vertical: 'resize-y',\n      both: 'resize',\n    }\n\n    return (\n      <textarea\n        ref={ref}\n        className={cn(\n          'min-h-[80px] w-full',\n          'bg-transparent',\n          'border rounded-lg px-3 py-2',\n          'text-sm text-[var(--color-white)]',\n          'placeholder:text-[var(--color-grey-400)]',\n          'transition-[border-color] duration-200 ease-out',\n          'focus:outline-none focus-visible:outline-none',\n          'focus-ring',\n          error\n            ? 'border-[var(--color-coral)]'\n            : 'border-[var(--glass-border)] hover:border-[var(--glass-highlight)] focus:border-[var(--glass-highlight)]',\n          resizeStyles[resize],\n          className\n        )}\n        aria-invalid={error || undefined}\n        {...props}\n      />\n    )\n  }\n)\n\nTextarea.displayName = 'Textarea'\n"],"names":["Textarea","forwardRef","resize","error","className","props","ref","jsx","cn"],"mappings":";;;AASO,MAAMA,IAAWC;AAAA,EACtB,CACE;AAAA,IACE,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MASE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAL,IACI,gCACA;AAAA,QApBW;AAAA,UACnB,MAAM;AAAA,UACN,UAAU;AAAA,UACV,MAAM;AAAA,QAAA,EAkBWD,CAAM;AAAA,QACnBE;AAAA,MAAA;AAAA,MAEF,gBAAcD,KAAS;AAAA,MACtB,GAAGE;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAL,EAAS,cAAc;"}