@snowztech/ui 0.1.0 → 0.3.0

package/dist/index.cjs

@@ -24,20 +24,22 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/mark.tsx
-var SnowMark = ({ size = 48, color = "currentColor", style }) => /* @__PURE__ */ jsxRuntime.jsxs(
+var sizeStyle = (size) => typeof size === "number" ? { ["--sn-mark-size"]: `${size}px` } : void 0;
+var sizeClass = (size) => typeof size === "string" ? `sn-mark--${size}` : void 0;
+var cx = (...parts) => parts.filter(Boolean).join(" ");
+var SnowMark = ({ size = 48, color, className, style }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "svg",
   {
-    width: size,
-    height: size,
     viewBox: "0 0 32 32",
-    fill: color,
-    style: { display: "inline-block", verticalAlign: "middle", ...style },
+    fill: "currentColor",
+    className: cx("sn-mark", sizeClass(size), className),
+    style: { ...sizeStyle(size), color, ...style },
     "aria-hidden": "true",
     children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "6", width: "14", height: "2.4" }),
       /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "22.4,6 23,8.4 9.6,26 9,23.6" }),
       /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "23.6", width: "14", height: "2.4" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: color, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
         /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "16,1 18,4 16,7 14,4" }),
         /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "16,25 18,28 16,31 14,28" }),
         /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "27,8 28.7,11 25.5,11.5 26,8.7" }),
@@ -50,61 +52,68 @@ var SnowMark = ({ size = 48, color = "currentColor", style }) => /* @__PURE__ */
 );
 var SnowWordmark = ({
   size = 18,
-  color = "currentColor",
+  color,
   showDot = true,
-  accent = "var(--sn-accent)"
+  accent,
+  className,
+  style
 }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "span",
   {
+    className: cx("sn-wordmark", className),
     style: {
-      fontFamily: "var(--sn-font-mono)",
-      fontSize: size,
-      fontWeight: 700,
-      letterSpacing: "-0.01em",
+      ["--sn-wordmark-size"]: `${size}px`,
       color,
-      lineHeight: 1
+      ...style
     },
     children: [
       "snowztech",
-      showDot && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: accent }, children: "." })
+      showDot && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sn-wordmark__dot", style: accent ? { color: accent } : void 0, children: "." })
     ]
   }
 );
 var SnowMonogram = ({
   size = 64,
-  bg = "#0a0a0a",
-  fg = "#ffffff",
-  radius = 8
-}) => /* @__PURE__ */ jsxRuntime.jsx(Monogram, { size, bg, fg, radius, mark: SnowMark });
+  bg,
+  fg,
+  radius,
+  className,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsx(Monogram, { size, bg, fg, radius, mark: SnowMark, className, style });
 var Monogram = ({
   size = 64,
-  bg = "#0a0a0a",
-  fg = "#ffffff",
-  radius = 8,
+  bg,
+  fg,
+  radius,
   mark: Mark,
-  glyphScale = 0.6
+  glyphScale = 0.6,
+  className,
+  style
 }) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
+    className: cx("sn-monogram", className),
     style: {
-      width: size,
-      height: size,
-      background: bg,
-      borderRadius: radius,
-      display: "inline-flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: 0
+      ["--sn-monogram-size"]: `${size}px`,
+      ...bg ? { ["--sn-monogram-bg"]: bg } : null,
+      ...fg ? { ["--sn-monogram-fg"]: fg } : null,
+      ...radius != null ? { ["--sn-monogram-radius"]: `${radius}px` } : null,
+      ...style
     },
-    children: /* @__PURE__ */ jsxRuntime.jsx(Mark, { size: Math.round(size * glyphScale), color: fg })
+    children: /* @__PURE__ */ jsxRuntime.jsx(Mark, { size: Math.round(size * glyphScale), color: fg ?? "currentColor" })
   }
 );
-var wrap = (style) => ({
-  display: "inline-block",
-  verticalAlign: "middle",
-  ...style
+var sizeStyle2 = (size) => typeof size === "number" ? { ["--sn-mark-size"]: `${size}px` } : void 0;
+var sizeClass2 = (size) => typeof size === "string" ? `sn-mark--${size}` : void 0;
+var cx2 = (...parts) => parts.filter(Boolean).join(" ");
+var baseProps = ({ size, color, className, style }, extra = {}) => ({
+  viewBox: "0 0 32 32",
+  className: cx2("sn-mark", sizeClass2(size), className),
+  style: { ...sizeStyle2(size ?? 64), ...color ? { color } : null, ...style },
+  "aria-hidden": true,
+  ...extra
 });
-var MarkSigil = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: color, style: wrap(style), "aria-hidden": "true", children: [
+var MarkSigil = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps(p, { fill: "currentColor" }), children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14.5", y: "3", width: "3", height: "11" }),
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14.5", y: "18", width: "3", height: "11" }),
   /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: "rotate(60 16 16)", children: [
@@ -116,34 +125,34 @@ var MarkSigil = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ *
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14.5", y: "18.5", width: "3", height: "10.5" })
   ] })
 ] });
-var MarkCrystal = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", stroke: color, strokeWidth: "2.4", strokeLinejoin: "miter", strokeLinecap: "square", style: wrap(style), "aria-hidden": "true", children: [
+var MarkCrystal = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps(p, { fill: "none", stroke: "currentColor", strokeWidth: 2.4, strokeLinejoin: "miter", strokeLinecap: "square" }), children: [
   /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "16,3 27,9.5 27,22.5 16,29 5,22.5 5,9.5" }),
   /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "16,9 22,16 16,23 10,16" }),
   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "3", x2: "16", y2: "9" }),
   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "23", x2: "16", y2: "29" })
 ] });
-var MarkZFlake = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: color, style: wrap(style), "aria-hidden": "true", children: [
+var MarkZFlake = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps(p, { fill: "currentColor" }), children: [
   /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "6,5 26,5 26,9 12,9 26,23 26,27 6,27 6,23 20,23 6,9" }),
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "14", width: "3", height: "4" }),
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "25", y: "14", width: "3", height: "4" })
 ] });
-var MarkAsterisk = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: color, style: wrap(style), "aria-hidden": "true", children: [
-  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "2.2", fill: "none", stroke: color, strokeWidth: "2" }),
+var MarkAsterisk = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps(p, { fill: "currentColor" }), children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "2.2", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
   [0, 60, 120].map((deg, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { transform: `rotate(${deg} 16 16)`, children: [
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14.6", y: "2", width: "2.8", height: "9", rx: "0.5" }),
     /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14.6", y: "21", width: "2.8", height: "9", rx: "0.5" })
   ] }, i))
 ] });
-var MarkSlash = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: "none", stroke: color, strokeWidth: "3.2", strokeLinecap: "square", strokeLinejoin: "miter", style: wrap(style), "aria-hidden": "true", children: [
+var MarkSlash = (p) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps(p, { fill: "none", stroke: "currentColor", strokeWidth: 3.2, strokeLinecap: "square", strokeLinejoin: "miter" }), children: [
   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "16", y1: "4", x2: "16", y2: "28" }),
   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "10", x2: "26", y2: "22" }),
   /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "26", y1: "10", x2: "6", y2: "22" }),
-  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "22", x2: "20", y2: "5", stroke: color, strokeWidth: "4" })
+  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "22", x2: "20", y2: "5", stroke: "currentColor", strokeWidth: "4" })
 ] });
-var MarkGlyph = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: color, style: wrap(style), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 5 H25 V11 H13 V14 H25 V27 H7 V21 H19 V18 H7 Z" }) });
-var MarkHex = ({ size = 64, color = "currentColor", style }) => {
+var MarkGlyph = (p) => /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps(p, { fill: "currentColor" }), children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 5 H25 V11 H13 V14 H25 V27 H7 V21 H19 V18 H7 Z" }) });
+var MarkHex = (p) => {
   const id = React__namespace.useId();
-  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", style: wrap(style), "aria-hidden": "true", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...baseProps(p), children: [
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id, children: [
       /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "32", height: "32", fill: "white" }),
       /* @__PURE__ */ jsxRuntime.jsxs("g", { fill: "black", children: [
@@ -152,21 +161,21 @@ var MarkHex = ({ size = 64, color = "currentColor", style }) => {
         /* @__PURE__ */ jsxRuntime.jsx("g", { transform: "rotate(-60 16 16)", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "14.5", y: "6", width: "3", height: "20" }) })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "16,3 27,9.5 27,22.5 16,29 5,22.5 5,9.5", fill: color, mask: `url(#${id})` })
+    /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: "16,3 27,9.5 27,22.5 16,29 5,22.5 5,9.5", fill: "currentColor", mask: `url(#${id})` })
   ] });
 };
-var MarkDotgrid = ({ size = 64, color = "currentColor", style }) => {
-  const dots = [/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "2", fill: color }, "c")];
+var MarkDotgrid = (p) => {
+  const dots = [/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "16", cy: "16", r: "2", fill: "currentColor" }, "c")];
   for (let a = 0; a < 6; a++) {
     const ang = a * 60 * Math.PI / 180;
     for (let r = 1; r <= 3; r++) {
       const x = 16 + Math.cos(ang) * r * 4;
       const y = 16 + Math.sin(ang) * r * 4;
       const rad = r === 3 ? 1.6 : r === 2 ? 1.8 : 2;
-      dots.push(/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: rad, fill: color }, `${a}-${r}`));
+      dots.push(/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: x, cy: y, r: rad, fill: "currentColor" }, `${a}-${r}`));
     }
   }
-  return /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", style: wrap(style), "aria-hidden": "true", children: dots });
+  return /* @__PURE__ */ jsxRuntime.jsx("svg", { ...baseProps(p), children: dots });
 };
 var markVariants = [
   { id: "crystal", name: "Crystal", sub: "hex frame + diamond cut, canonical", Mark: MarkCrystal, exportName: "MarkCrystal" },
@@ -178,10 +187,12 @@ var markVariants = [
   { id: "dotgrid", name: "Dot-Grid", sub: "pointillist, friendly", Mark: MarkDotgrid, exportName: "MarkDotgrid" },
   { id: "glyph", name: "Glyph S", sub: "monogram, folded ribbon", Mark: MarkGlyph, exportName: "MarkGlyph" }
 ];
+var cx3 = (...parts) => parts.filter(Boolean).join(" ");
 var Icon = ({
   size = 16,
   stroke = 1.5,
   color = "currentColor",
+  className,
   style,
   children
 }) => /* @__PURE__ */ jsxRuntime.jsx(
@@ -195,7 +206,8 @@ var Icon = ({
     strokeWidth: stroke,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    style: { display: "inline-block", verticalAlign: "middle", ...style },
+    className: cx3("sn-icon", className),
+    style,
     "aria-hidden": "true",
     children
   }
@@ -349,6 +361,7 @@ var DiscordIcon = (p) => /* @__PURE__ */ jsxRuntime.jsxs(Icon, { ...p, children:
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "11.5", r: "1.5", fill: "currentColor", stroke: "none" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "11.5", r: "1.5", fill: "currentColor", stroke: "none" })
 ] });
+var cx4 = (...parts) => parts.filter(Boolean).join(" ");
 var initialsFrom = (name) => {
   if (!name) return "";
   const parts = name.trim().split(/\s+/).slice(0, 2);
@@ -364,108 +377,97 @@ var Avatar = ({
   style,
   className
 }) => {
-  const radius = shape === "circle" ? "50%" : "var(--sn-r-xs)";
   const initials = initialsFrom(name);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      className,
-      style: {
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        width: size,
-        height: size,
-        borderRadius: radius,
-        background: "var(--sn-bg-elev-1)",
-        color: "var(--sn-fg-muted)",
-        fontFamily: "var(--sn-font-mono)",
-        fontSize: Math.max(10, Math.round(size * 0.38)),
-        fontWeight: 500,
-        overflow: "hidden",
-        flexShrink: 0,
-        boxShadow: ring ? "0 0 0 1px var(--sn-border-strong)" : void 0,
-        ...style
-      },
+      className: cx4(
+        "sn-avatar",
+        shape === "square" && "sn-avatar--square",
+        ring && "sn-avatar--ring",
+        className
+      ),
+      style: { ["--sn-avatar-size"]: `${size}px`, ...style },
       children: src ? (
         // eslint-disable-next-line @next/next/no-img-element
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "img",
-          {
-            src,
-            alt: alt ?? name ?? "",
-            width: size,
-            height: size,
-            style: { width: "100%", height: "100%", objectFit: "cover" }
-          }
-        )
+        /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt: alt ?? name ?? "", width: size, height: size })
       ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: initials || "\u2022" })
     }
   );
 };
-var AvatarStack = ({ children, overlap = 8 }) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { display: "inline-flex" }, children: React__namespace.Children.map(children, (child, i) => /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: i === 0 ? 0 : -overlap }, children: child })) });
-var Pulse = ({
-  size = 8,
-  color = "var(--sn-success)",
-  label,
-  style,
-  className
-}) => /* @__PURE__ */ jsxRuntime.jsxs(
+var AvatarStack = ({ children, overlap = 8, className, style }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "span",
+  {
+    className: cx4("sn-avatar-stack", className),
+    style: { ["--sn-avatar-overlap"]: `-${overlap}px`, ...style },
+    children
+  }
+);
+var cx5 = (...parts) => parts.filter(Boolean).join(" ");
+var Pulse = ({ size = 8, color, label, style, className }) => /* @__PURE__ */ jsxRuntime.jsxs(
   "span",
   {
-    className,
+    className: cx5("sn-pulse", className),
     style: {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: 8,
-      color: "var(--sn-fg-muted)",
-      fontSize: "var(--sn-text-sm)",
+      ["--sn-pulse-size"]: `${size}px`,
+      ...color ? { ["--sn-pulse-color"]: color } : null,
       ...style
     },
     children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
-        {
-          "aria-hidden": "true",
-          style: {
-            position: "relative",
-            display: "inline-flex",
-            width: size,
-            height: size
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                style: {
-                  position: "absolute",
-                  inset: 0,
-                  borderRadius: "50%",
-                  background: color,
-                  opacity: 0.6,
-                  animation: "sn-pulse 2s ease-in-out infinite"
-                }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "span",
-              {
-                style: {
-                  position: "relative",
-                  width: "100%",
-                  height: "100%",
-                  borderRadius: "50%",
-                  background: color
-                }
-              }
-            )
-          ]
-        }
-      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "sn-pulse__dot" }),
       label && /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
     ]
   }
 );
+var cx6 = (...parts) => parts.filter(Boolean).join(" ");
+var Input = React__namespace.forwardRef(function Input2({ size = "md", invalid, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref,
+      className: cx6(
+        "sn-input",
+        size === "sm" && "sn-input--sm",
+        size === "lg" && "sn-input--lg",
+        invalid && "sn-input--invalid",
+        className
+      ),
+      "aria-invalid": invalid || void 0,
+      ...rest
+    }
+  );
+});
+var cx7 = (...parts) => parts.filter(Boolean).join(" ");
+var Textarea = React__namespace.forwardRef(function Textarea2({ invalid, className, ...rest }, ref) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ref,
+      className: cx7("sn-textarea", invalid && "sn-textarea--invalid", className),
+      "aria-invalid": invalid || void 0,
+      ...rest
+    }
+  );
+});
+var cx8 = (...parts) => parts.filter(Boolean).join(" ");
+var Label = ({ required, children, className, ...rest }) => /* @__PURE__ */ jsxRuntime.jsxs("label", { className: cx8("sn-label", className), ...rest, children: [
+  children,
+  required && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sn-label__required", "aria-hidden": "true", children: "*" })
+] });
+var Field = ({
+  label,
+  hint,
+  error,
+  required,
+  htmlFor,
+  children,
+  className,
+  style
+}) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cx8("sn-field", className), style, children: [
+  label && /* @__PURE__ */ jsxRuntime.jsx(Label, { htmlFor, required, children: label }),
+  children,
+  error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sn-error", role: "alert", children: error }) : hint ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sn-hint", children: hint }) : null
+] });
 
 exports.ActivityIcon = ActivityIcon;
 exports.ArrowRightIcon = ArrowRightIcon;
@@ -488,6 +490,7 @@ exports.DiscordIcon = DiscordIcon;
 exports.EditIcon = EditIcon;
 exports.ExternalLinkIcon = ExternalLinkIcon;
 exports.EyeIcon = EyeIcon;
+exports.Field = Field;
 exports.FileIcon = FileIcon;
 exports.FilterIcon = FilterIcon;
 exports.FolderIcon = FolderIcon;
@@ -498,6 +501,8 @@ exports.HeartIcon = HeartIcon;
 exports.Icon = Icon;
 exports.InboxIcon = InboxIcon;
 exports.InfoIcon = InfoIcon;
+exports.Input = Input;
+exports.Label = Label;
 exports.LayersIcon = LayersIcon;
 exports.LockIcon = LockIcon;
 exports.MailIcon = MailIcon;
@@ -524,6 +529,7 @@ exports.SnowWordmark = SnowWordmark;
 exports.StarIcon = StarIcon;
 exports.SunIcon = SunIcon;
 exports.TerminalIcon = TerminalIcon;
+exports.Textarea = Textarea;
 exports.TrashIcon = TrashIcon;
 exports.UserIcon = UserIcon;
 exports.WarningIcon = WarningIcon;