@snowztech/ui 0.1.0 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/client.cjs +18 -76
  2. package/dist/client.cjs.map +1 -1
  3. package/dist/client.js +19 -54
  4. package/dist/client.js.map +1 -1
  5. package/dist/index.cjs +139 -133
  6. package/dist/index.cjs.map +1 -1
  7. package/dist/index.d.cts +58 -18
  8. package/dist/index.d.ts +58 -18
  9. package/dist/index.js +308 -135
  10. package/dist/index.js.map +1 -1
  11. package/package.json +6 -1
  12. package/src/styles.css +1 -0
  13. package/src/tokens.css +1 -252
  14. package/dist/chunk-XYNFF4B5.js +0 -178
  15. package/dist/chunk-XYNFF4B5.js.map +0 -1
package/dist/index.js CHANGED
@@ -1,21 +1,23 @@
1
- export { ActivityIcon, ArrowRightIcon, ArrowUpRightIcon, BellIcon, BoltIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, CloudIcon, CodeIcon, CubeIcon, DatabaseIcon, DiscordIcon, EditIcon, ExternalLinkIcon, EyeIcon, FileIcon, FilterIcon, FolderIcon, GitIcon, GithubIcon, GridIcon, HeartIcon, Icon, InboxIcon, InfoIcon, LayersIcon, LockIcon, MailIcon, MenuIcon, MinusIcon, MoonIcon, PlusIcon, PulseIcon, SearchIcon, SettingsIcon, StarIcon, SunIcon, TerminalIcon, TrashIcon, UserIcon, WarningIcon, XIcon, ZapIcon } from './chunk-XYNFF4B5.js';
2
- import { jsxs, jsx } from 'react/jsx-runtime';
1
+ import { jsx, jsxs } from 'react/jsx-runtime';
3
2
  import * as React from 'react';
4
3
 
5
- var SnowMark = ({ size = 48, color = "currentColor", style }) => /* @__PURE__ */ jsxs(
4
+ // src/mark.tsx
5
+ var sizeStyle = (size) => typeof size === "number" ? { ["--sn-mark-size"]: `${size}px` } : void 0;
6
+ var sizeClass = (size) => typeof size === "string" ? `sn-mark--${size}` : void 0;
7
+ var cx = (...parts) => parts.filter(Boolean).join(" ");
8
+ var SnowMark = ({ size = 48, color, className, style }) => /* @__PURE__ */ jsxs(
6
9
  "svg",
7
10
  {
8
- width: size,
9
- height: size,
10
11
  viewBox: "0 0 32 32",
11
- fill: color,
12
- style: { display: "inline-block", verticalAlign: "middle", ...style },
12
+ fill: "currentColor",
13
+ className: cx("sn-mark", sizeClass(size), className),
14
+ style: { ...sizeStyle(size), color, ...style },
13
15
  "aria-hidden": "true",
14
16
  children: [
15
17
  /* @__PURE__ */ jsx("rect", { x: "9", y: "6", width: "14", height: "2.4" }),
16
18
  /* @__PURE__ */ jsx("polygon", { points: "22.4,6 23,8.4 9.6,26 9,23.6" }),
17
19
  /* @__PURE__ */ jsx("rect", { x: "9", y: "23.6", width: "14", height: "2.4" }),
18
- /* @__PURE__ */ jsxs("g", { fill: color, children: [
20
+ /* @__PURE__ */ jsxs("g", { children: [
19
21
  /* @__PURE__ */ jsx("polygon", { points: "16,1 18,4 16,7 14,4" }),
20
22
  /* @__PURE__ */ jsx("polygon", { points: "16,25 18,28 16,31 14,28" }),
21
23
  /* @__PURE__ */ jsx("polygon", { points: "27,8 28.7,11 25.5,11.5 26,8.7" }),
@@ -28,61 +30,68 @@ var SnowMark = ({ size = 48, color = "currentColor", style }) => /* @__PURE__ */
28
30
  );
29
31
  var SnowWordmark = ({
30
32
  size = 18,
31
- color = "currentColor",
33
+ color,
32
34
  showDot = true,
33
- accent = "var(--sn-accent)"
35
+ accent,
36
+ className,
37
+ style
34
38
  }) => /* @__PURE__ */ jsxs(
35
39
  "span",
36
40
  {
41
+ className: cx("sn-wordmark", className),
37
42
  style: {
38
- fontFamily: "var(--sn-font-mono)",
39
- fontSize: size,
40
- fontWeight: 700,
41
- letterSpacing: "-0.01em",
43
+ ["--sn-wordmark-size"]: `${size}px`,
42
44
  color,
43
- lineHeight: 1
45
+ ...style
44
46
  },
45
47
  children: [
46
48
  "snowztech",
47
- showDot && /* @__PURE__ */ jsx("span", { style: { color: accent }, children: "." })
49
+ showDot && /* @__PURE__ */ jsx("span", { className: "sn-wordmark__dot", style: accent ? { color: accent } : void 0, children: "." })
48
50
  ]
49
51
  }
50
52
  );
51
53
  var SnowMonogram = ({
52
54
  size = 64,
53
- bg = "#0a0a0a",
54
- fg = "#ffffff",
55
- radius = 8
56
- }) => /* @__PURE__ */ jsx(Monogram, { size, bg, fg, radius, mark: SnowMark });
55
+ bg,
56
+ fg,
57
+ radius,
58
+ className,
59
+ style
60
+ }) => /* @__PURE__ */ jsx(Monogram, { size, bg, fg, radius, mark: SnowMark, className, style });
57
61
  var Monogram = ({
58
62
  size = 64,
59
- bg = "#0a0a0a",
60
- fg = "#ffffff",
61
- radius = 8,
63
+ bg,
64
+ fg,
65
+ radius,
62
66
  mark: Mark,
63
- glyphScale = 0.6
67
+ glyphScale = 0.6,
68
+ className,
69
+ style
64
70
  }) => /* @__PURE__ */ jsx(
65
71
  "div",
66
72
  {
73
+ className: cx("sn-monogram", className),
67
74
  style: {
68
- width: size,
69
- height: size,
70
- background: bg,
71
- borderRadius: radius,
72
- display: "inline-flex",
73
- alignItems: "center",
74
- justifyContent: "center",
75
- flexShrink: 0
75
+ ["--sn-monogram-size"]: `${size}px`,
76
+ ...bg ? { ["--sn-monogram-bg"]: bg } : null,
77
+ ...fg ? { ["--sn-monogram-fg"]: fg } : null,
78
+ ...radius != null ? { ["--sn-monogram-radius"]: `${radius}px` } : null,
79
+ ...style
76
80
  },
77
- children: /* @__PURE__ */ jsx(Mark, { size: Math.round(size * glyphScale), color: fg })
81
+ children: /* @__PURE__ */ jsx(Mark, { size: Math.round(size * glyphScale), color: fg ?? "currentColor" })
78
82
  }
79
83
  );
80
- var wrap = (style) => ({
81
- display: "inline-block",
82
- verticalAlign: "middle",
83
- ...style
84
+ var sizeStyle2 = (size) => typeof size === "number" ? { ["--sn-mark-size"]: `${size}px` } : void 0;
85
+ var sizeClass2 = (size) => typeof size === "string" ? `sn-mark--${size}` : void 0;
86
+ var cx2 = (...parts) => parts.filter(Boolean).join(" ");
87
+ var baseProps = ({ size, color, className, style }, extra = {}) => ({
88
+ viewBox: "0 0 32 32",
89
+ className: cx2("sn-mark", sizeClass2(size), className),
90
+ style: { ...sizeStyle2(size ?? 64), ...color ? { color } : null, ...style },
91
+ "aria-hidden": true,
92
+ ...extra
84
93
  });
85
- var MarkSigil = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: color, style: wrap(style), "aria-hidden": "true", children: [
94
+ var MarkSigil = (p) => /* @__PURE__ */ jsxs("svg", { ...baseProps(p, { fill: "currentColor" }), children: [
86
95
  /* @__PURE__ */ jsx("rect", { x: "14.5", y: "3", width: "3", height: "11" }),
87
96
  /* @__PURE__ */ jsx("rect", { x: "14.5", y: "18", width: "3", height: "11" }),
88
97
  /* @__PURE__ */ jsxs("g", { transform: "rotate(60 16 16)", children: [
@@ -94,34 +103,34 @@ var MarkSigil = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ *
94
103
  /* @__PURE__ */ jsx("rect", { x: "14.5", y: "18.5", width: "3", height: "10.5" })
95
104
  ] })
96
105
  ] });
97
- var MarkCrystal = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ 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: [
106
+ var MarkCrystal = (p) => /* @__PURE__ */ jsxs("svg", { ...baseProps(p, { fill: "none", stroke: "currentColor", strokeWidth: 2.4, strokeLinejoin: "miter", strokeLinecap: "square" }), children: [
98
107
  /* @__PURE__ */ jsx("polygon", { points: "16,3 27,9.5 27,22.5 16,29 5,22.5 5,9.5" }),
99
108
  /* @__PURE__ */ jsx("polygon", { points: "16,9 22,16 16,23 10,16" }),
100
109
  /* @__PURE__ */ jsx("line", { x1: "16", y1: "3", x2: "16", y2: "9" }),
101
110
  /* @__PURE__ */ jsx("line", { x1: "16", y1: "23", x2: "16", y2: "29" })
102
111
  ] });
103
- var MarkZFlake = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: color, style: wrap(style), "aria-hidden": "true", children: [
112
+ var MarkZFlake = (p) => /* @__PURE__ */ jsxs("svg", { ...baseProps(p, { fill: "currentColor" }), children: [
104
113
  /* @__PURE__ */ jsx("polygon", { points: "6,5 26,5 26,9 12,9 26,23 26,27 6,27 6,23 20,23 6,9" }),
105
114
  /* @__PURE__ */ jsx("rect", { x: "4", y: "14", width: "3", height: "4" }),
106
115
  /* @__PURE__ */ jsx("rect", { x: "25", y: "14", width: "3", height: "4" })
107
116
  ] });
108
- var MarkAsterisk = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: color, style: wrap(style), "aria-hidden": "true", children: [
109
- /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "2.2", fill: "none", stroke: color, strokeWidth: "2" }),
117
+ var MarkAsterisk = (p) => /* @__PURE__ */ jsxs("svg", { ...baseProps(p, { fill: "currentColor" }), children: [
118
+ /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "2.2", fill: "none", stroke: "currentColor", strokeWidth: "2" }),
110
119
  [0, 60, 120].map((deg, i) => /* @__PURE__ */ jsxs("g", { transform: `rotate(${deg} 16 16)`, children: [
111
120
  /* @__PURE__ */ jsx("rect", { x: "14.6", y: "2", width: "2.8", height: "9", rx: "0.5" }),
112
121
  /* @__PURE__ */ jsx("rect", { x: "14.6", y: "21", width: "2.8", height: "9", rx: "0.5" })
113
122
  ] }, i))
114
123
  ] });
115
- var MarkSlash = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ 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: [
124
+ var MarkSlash = (p) => /* @__PURE__ */ jsxs("svg", { ...baseProps(p, { fill: "none", stroke: "currentColor", strokeWidth: 3.2, strokeLinecap: "square", strokeLinejoin: "miter" }), children: [
116
125
  /* @__PURE__ */ jsx("line", { x1: "16", y1: "4", x2: "16", y2: "28" }),
117
126
  /* @__PURE__ */ jsx("line", { x1: "6", y1: "10", x2: "26", y2: "22" }),
118
127
  /* @__PURE__ */ jsx("line", { x1: "26", y1: "10", x2: "6", y2: "22" }),
119
- /* @__PURE__ */ jsx("line", { x1: "3", y1: "22", x2: "20", y2: "5", stroke: color, strokeWidth: "4" })
128
+ /* @__PURE__ */ jsx("line", { x1: "3", y1: "22", x2: "20", y2: "5", stroke: "currentColor", strokeWidth: "4" })
120
129
  ] });
121
- var MarkGlyph = ({ size = 64, color = "currentColor", style }) => /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", fill: color, style: wrap(style), "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M7 5 H25 V11 H13 V14 H25 V27 H7 V21 H19 V18 H7 Z" }) });
122
- var MarkHex = ({ size = 64, color = "currentColor", style }) => {
130
+ var MarkGlyph = (p) => /* @__PURE__ */ jsx("svg", { ...baseProps(p, { fill: "currentColor" }), children: /* @__PURE__ */ jsx("path", { d: "M7 5 H25 V11 H13 V14 H25 V27 H7 V21 H19 V18 H7 Z" }) });
131
+ var MarkHex = (p) => {
123
132
  const id = React.useId();
124
- return /* @__PURE__ */ jsxs("svg", { width: size, height: size, viewBox: "0 0 32 32", style: wrap(style), "aria-hidden": "true", children: [
133
+ return /* @__PURE__ */ jsxs("svg", { ...baseProps(p), children: [
125
134
  /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("mask", { id, children: [
126
135
  /* @__PURE__ */ jsx("rect", { width: "32", height: "32", fill: "white" }),
127
136
  /* @__PURE__ */ jsxs("g", { fill: "black", children: [
@@ -130,21 +139,21 @@ var MarkHex = ({ size = 64, color = "currentColor", style }) => {
130
139
  /* @__PURE__ */ jsx("g", { transform: "rotate(-60 16 16)", children: /* @__PURE__ */ jsx("rect", { x: "14.5", y: "6", width: "3", height: "20" }) })
131
140
  ] })
132
141
  ] }) }),
133
- /* @__PURE__ */ jsx("polygon", { points: "16,3 27,9.5 27,22.5 16,29 5,22.5 5,9.5", fill: color, mask: `url(#${id})` })
142
+ /* @__PURE__ */ jsx("polygon", { points: "16,3 27,9.5 27,22.5 16,29 5,22.5 5,9.5", fill: "currentColor", mask: `url(#${id})` })
134
143
  ] });
135
144
  };
136
- var MarkDotgrid = ({ size = 64, color = "currentColor", style }) => {
137
- const dots = [/* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "2", fill: color }, "c")];
145
+ var MarkDotgrid = (p) => {
146
+ const dots = [/* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "2", fill: "currentColor" }, "c")];
138
147
  for (let a = 0; a < 6; a++) {
139
148
  const ang = a * 60 * Math.PI / 180;
140
149
  for (let r = 1; r <= 3; r++) {
141
150
  const x = 16 + Math.cos(ang) * r * 4;
142
151
  const y = 16 + Math.sin(ang) * r * 4;
143
152
  const rad = r === 3 ? 1.6 : r === 2 ? 1.8 : 2;
144
- dots.push(/* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: rad, fill: color }, `${a}-${r}`));
153
+ dots.push(/* @__PURE__ */ jsx("circle", { cx: x, cy: y, r: rad, fill: "currentColor" }, `${a}-${r}`));
145
154
  }
146
155
  }
147
- return /* @__PURE__ */ jsx("svg", { width: size, height: size, viewBox: "0 0 32 32", style: wrap(style), "aria-hidden": "true", children: dots });
156
+ return /* @__PURE__ */ jsx("svg", { ...baseProps(p), children: dots });
148
157
  };
149
158
  var markVariants = [
150
159
  { id: "crystal", name: "Crystal", sub: "hex frame + diamond cut, canonical", Mark: MarkCrystal, exportName: "MarkCrystal" },
@@ -156,6 +165,181 @@ var markVariants = [
156
165
  { id: "dotgrid", name: "Dot-Grid", sub: "pointillist, friendly", Mark: MarkDotgrid, exportName: "MarkDotgrid" },
157
166
  { id: "glyph", name: "Glyph S", sub: "monogram, folded ribbon", Mark: MarkGlyph, exportName: "MarkGlyph" }
158
167
  ];
168
+ var cx3 = (...parts) => parts.filter(Boolean).join(" ");
169
+ var Icon = ({
170
+ size = 16,
171
+ stroke = 1.5,
172
+ color = "currentColor",
173
+ className,
174
+ style,
175
+ children
176
+ }) => /* @__PURE__ */ jsx(
177
+ "svg",
178
+ {
179
+ width: size,
180
+ height: size,
181
+ viewBox: "0 0 24 24",
182
+ fill: "none",
183
+ stroke: color,
184
+ strokeWidth: stroke,
185
+ strokeLinecap: "round",
186
+ strokeLinejoin: "round",
187
+ className: cx3("sn-icon", className),
188
+ style,
189
+ "aria-hidden": "true",
190
+ children
191
+ }
192
+ );
193
+ var SearchIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
194
+ /* @__PURE__ */ jsx("circle", { cx: "11", cy: "11", r: "6" }),
195
+ /* @__PURE__ */ jsx("path", { d: "m20 20-3.5-3.5" })
196
+ ] });
197
+ var TerminalIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
198
+ /* @__PURE__ */ jsx("path", { d: "m5 8 4 4-4 4" }),
199
+ /* @__PURE__ */ jsx("path", { d: "M13 16h6" }),
200
+ /* @__PURE__ */ jsx("rect", { x: "2.5", y: "4", width: "19", height: "16", rx: "1.5" })
201
+ ] });
202
+ var CodeIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
203
+ /* @__PURE__ */ jsx("path", { d: "m8 7-5 5 5 5" }),
204
+ /* @__PURE__ */ jsx("path", { d: "m16 7 5 5-5 5" }),
205
+ /* @__PURE__ */ jsx("path", { d: "m14 4-4 16" })
206
+ ] });
207
+ var GitIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
208
+ /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6", r: "2.5" }),
209
+ /* @__PURE__ */ jsx("circle", { cx: "18", cy: "18", r: "2.5" }),
210
+ /* @__PURE__ */ jsx("circle", { cx: "6", cy: "18", r: "2.5" }),
211
+ /* @__PURE__ */ jsx("path", { d: "M6 8.5v7" }),
212
+ /* @__PURE__ */ jsx("path", { d: "M8.5 6h6.5a2.5 2.5 0 0 1 2.5 2.5v7" })
213
+ ] });
214
+ var PlusIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
215
+ /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
216
+ /* @__PURE__ */ jsx("path", { d: "M5 12h14" })
217
+ ] });
218
+ var MinusIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) });
219
+ var CheckIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m4 12 5 5L20 6" }) });
220
+ var XIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
221
+ /* @__PURE__ */ jsx("path", { d: "M6 6 18 18" }),
222
+ /* @__PURE__ */ jsx("path", { d: "m18 6-12 12" })
223
+ ] });
224
+ var ChevronDownIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" }) });
225
+ var ChevronRightIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" }) });
226
+ var ChevronLeftIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m15 6-6 6 6 6" }) });
227
+ var ArrowRightIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
228
+ /* @__PURE__ */ jsx("path", { d: "M5 12h14" }),
229
+ /* @__PURE__ */ jsx("path", { d: "m13 6 6 6-6 6" })
230
+ ] });
231
+ var ArrowUpRightIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
232
+ /* @__PURE__ */ jsx("path", { d: "M7 17 17 7" }),
233
+ /* @__PURE__ */ jsx("path", { d: "M8 7h9v9" })
234
+ ] });
235
+ var ExternalLinkIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
236
+ /* @__PURE__ */ jsx("path", { d: "M14 4h6v6" }),
237
+ /* @__PURE__ */ jsx("path", { d: "M20 4 10 14" }),
238
+ /* @__PURE__ */ jsx("path", { d: "M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5" })
239
+ ] });
240
+ var SettingsIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
241
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" }),
242
+ /* @__PURE__ */ jsx("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09a1.65 1.65 0 0 0-1-1.51 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09a1.65 1.65 0 0 0 1.51-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33h0a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51h0a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82h0a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
243
+ ] });
244
+ var UserIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
245
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "4" }),
246
+ /* @__PURE__ */ jsx("path", { d: "M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1" })
247
+ ] });
248
+ var FolderIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M3 6.5A1.5 1.5 0 0 1 4.5 5h4l2 2.5h9A1.5 1.5 0 0 1 21 9v9.5A1.5 1.5 0 0 1 19.5 20h-15A1.5 1.5 0 0 1 3 18.5z" }) });
249
+ var FileIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
250
+ /* @__PURE__ */ jsx("path", { d: "M14 3H6a1 1 0 0 0-1 1v16a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V8z" }),
251
+ /* @__PURE__ */ jsx("path", { d: "M14 3v5h5" })
252
+ ] });
253
+ var BellIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
254
+ /* @__PURE__ */ jsx("path", { d: "M6 9a6 6 0 1 1 12 0v4l1.5 3h-15L6 13z" }),
255
+ /* @__PURE__ */ jsx("path", { d: "M10 19a2 2 0 0 0 4 0" })
256
+ ] });
257
+ var ActivityIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M3 12h4l3-8 4 16 3-8h4" }) });
258
+ var PulseIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M3 12h3l2-4 4 8 2-4h7" }) });
259
+ var CubeIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
260
+ /* @__PURE__ */ jsx("path", { d: "m12 2 9 5v10l-9 5-9-5V7z" }),
261
+ /* @__PURE__ */ jsx("path", { d: "m3 7 9 5 9-5" }),
262
+ /* @__PURE__ */ jsx("path", { d: "M12 22V12" })
263
+ ] });
264
+ var LayersIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
265
+ /* @__PURE__ */ jsx("path", { d: "m12 3 9 5-9 5-9-5z" }),
266
+ /* @__PURE__ */ jsx("path", { d: "m3 13 9 5 9-5" }),
267
+ /* @__PURE__ */ jsx("path", { d: "m3 18 9 5 9-5" })
268
+ ] });
269
+ var DatabaseIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
270
+ /* @__PURE__ */ jsx("ellipse", { cx: "12", cy: "5", rx: "8", ry: "3" }),
271
+ /* @__PURE__ */ jsx("path", { d: "M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5" }),
272
+ /* @__PURE__ */ jsx("path", { d: "M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6" })
273
+ ] });
274
+ var CloudIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M7 18a5 5 0 1 1 1-9.9A6 6 0 0 1 19.5 11 4 4 0 0 1 18 18z" }) });
275
+ var SunIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
276
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4" }),
277
+ /* @__PURE__ */ jsx("path", { d: "M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" })
278
+ ] });
279
+ var MoonIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M20 14a8 8 0 1 1-9.9-9.9 7 7 0 0 0 9.9 9.9z" }) });
280
+ var GithubIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M9 19c-4 1-4-2-6-2.5M15 22v-4a3 3 0 0 0-1-2.5c3 0 6-2 6-5.5a5 5 0 0 0-1.4-3.5 4.7 4.7 0 0 0-.1-3.5s-1.1-.4-3.5 1.3a12 12 0 0 0-6 0C6.6 1.6 5.5 2 5.5 2a4.7 4.7 0 0 0-.1 3.5A5 5 0 0 0 4 9c0 3.5 3 5.5 6 5.5a3 3 0 0 0-1 2.5v4" }) });
281
+ var MailIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
282
+ /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "14", rx: "1.5" }),
283
+ /* @__PURE__ */ jsx("path", { d: "m3.5 6.5 8.5 7 8.5-7" })
284
+ ] });
285
+ var EyeIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
286
+ /* @__PURE__ */ jsx("path", { d: "M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" }),
287
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "3" })
288
+ ] });
289
+ var LockIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
290
+ /* @__PURE__ */ jsx("rect", { x: "4", y: "11", width: "16", height: "10", rx: "1.5" }),
291
+ /* @__PURE__ */ jsx("path", { d: "M8 11V7a4 4 0 0 1 8 0v4" })
292
+ ] });
293
+ var BoltIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M13 2 4 14h7l-2 8 9-12h-7z" }) });
294
+ var StarIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "m12 3 2.7 6 6.3.6-4.7 4.4 1.4 6.5L12 17l-5.7 3.5 1.4-6.5L3 9.6l6.3-.6z" }) });
295
+ var HeartIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" }) });
296
+ var TrashIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
297
+ /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
298
+ /* @__PURE__ */ jsx("path", { d: "M8 6V4a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v2" }),
299
+ /* @__PURE__ */ jsx("path", { d: "M5 6v14a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V6" }),
300
+ /* @__PURE__ */ jsx("path", { d: "M10 11v6M14 11v6" })
301
+ ] });
302
+ var EditIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
303
+ /* @__PURE__ */ jsx("path", { d: "M11 4H5a1 1 0 0 0-1 1v14a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-6" }),
304
+ /* @__PURE__ */ jsx("path", { d: "m18.5 2.5 3 3L12 15l-4 1 1-4z" })
305
+ ] });
306
+ var FilterIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M3 5h18l-7 9v6l-4-2v-4z" }) });
307
+ var MenuIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
308
+ var GridIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
309
+ /* @__PURE__ */ jsx("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
310
+ /* @__PURE__ */ jsx("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
311
+ /* @__PURE__ */ jsx("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" }),
312
+ /* @__PURE__ */ jsx("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" })
313
+ ] });
314
+ var InboxIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
315
+ /* @__PURE__ */ jsx("path", { d: "M3 13h5l1.5 2.5h5L16 13h5" }),
316
+ /* @__PURE__ */ jsx("path", { d: "M5 4h14l2 9v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6z" })
317
+ ] });
318
+ var CalendarIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
319
+ /* @__PURE__ */ jsx("rect", { x: "3", y: "5", width: "18", height: "16", rx: "1.5" }),
320
+ /* @__PURE__ */ jsx("path", { d: "M3 10h18M8 3v4M16 3v4" })
321
+ ] });
322
+ var ClockIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
323
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
324
+ /* @__PURE__ */ jsx("path", { d: "M12 7v5l3 2" })
325
+ ] });
326
+ var InfoIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
327
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
328
+ /* @__PURE__ */ jsx("path", { d: "M12 11v6" }),
329
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "8", r: "0.5", fill: "currentColor" })
330
+ ] });
331
+ var WarningIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
332
+ /* @__PURE__ */ jsx("path", { d: "M11 3 2 19a1 1 0 0 0 .9 1.5h18.2A1 1 0 0 0 22 19L13 3a1 1 0 0 0-2 0z" }),
333
+ /* @__PURE__ */ jsx("path", { d: "M12 9v5" }),
334
+ /* @__PURE__ */ jsx("circle", { cx: "12", cy: "17", r: "0.5", fill: "currentColor" })
335
+ ] });
336
+ var ZapIcon = (p) => /* @__PURE__ */ jsx(Icon, { ...p, children: /* @__PURE__ */ jsx("path", { d: "M13 2 4 14h7l-2 8 9-12h-7z" }) });
337
+ var DiscordIcon = (p) => /* @__PURE__ */ jsxs(Icon, { ...p, children: [
338
+ /* @__PURE__ */ jsx("path", { d: "M19 6s-2.5-2-5-2l-.3.5c2.3.5 3.3 1.5 3.3 1.5s-2-1-4-1c-1 0-2 .1-3 .3-1-.2-2-.3-3-.3-2 0-4 1-4 1S4 5 6.3 4.5L6 4C3.5 4 1 6 1 6s-2.5 4-2 11c1.5 2 3.5 2 3.5 2L4 17c-1-.5-2-1.5-2-1.5 2 1.5 4 2 4 2l1-2.5s4 1.5 6 1.5 6-1.5 6-1.5l1 2.5s2-.5 4-2c0 0-1 1-2 1.5l1.5 2s2 0 3.5-2c.5-7-2-11-2-11z" }),
339
+ /* @__PURE__ */ jsx("circle", { cx: "9", cy: "11.5", r: "1.5", fill: "currentColor", stroke: "none" }),
340
+ /* @__PURE__ */ jsx("circle", { cx: "15", cy: "11.5", r: "1.5", fill: "currentColor", stroke: "none" })
341
+ ] });
342
+ var cx4 = (...parts) => parts.filter(Boolean).join(" ");
159
343
  var initialsFrom = (name) => {
160
344
  if (!name) return "";
161
345
  const parts = name.trim().split(/\s+/).slice(0, 2);
@@ -171,109 +355,98 @@ var Avatar = ({
171
355
  style,
172
356
  className
173
357
  }) => {
174
- const radius = shape === "circle" ? "50%" : "var(--sn-r-xs)";
175
358
  const initials = initialsFrom(name);
176
359
  return /* @__PURE__ */ jsx(
177
360
  "span",
178
361
  {
179
- className,
180
- style: {
181
- display: "inline-flex",
182
- alignItems: "center",
183
- justifyContent: "center",
184
- width: size,
185
- height: size,
186
- borderRadius: radius,
187
- background: "var(--sn-bg-elev-1)",
188
- color: "var(--sn-fg-muted)",
189
- fontFamily: "var(--sn-font-mono)",
190
- fontSize: Math.max(10, Math.round(size * 0.38)),
191
- fontWeight: 500,
192
- overflow: "hidden",
193
- flexShrink: 0,
194
- boxShadow: ring ? "0 0 0 1px var(--sn-border-strong)" : void 0,
195
- ...style
196
- },
362
+ className: cx4(
363
+ "sn-avatar",
364
+ shape === "square" && "sn-avatar--square",
365
+ ring && "sn-avatar--ring",
366
+ className
367
+ ),
368
+ style: { ["--sn-avatar-size"]: `${size}px`, ...style },
197
369
  children: src ? (
198
370
  // eslint-disable-next-line @next/next/no-img-element
199
- /* @__PURE__ */ jsx(
200
- "img",
201
- {
202
- src,
203
- alt: alt ?? name ?? "",
204
- width: size,
205
- height: size,
206
- style: { width: "100%", height: "100%", objectFit: "cover" }
207
- }
208
- )
371
+ /* @__PURE__ */ jsx("img", { src, alt: alt ?? name ?? "", width: size, height: size })
209
372
  ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: initials || "\u2022" })
210
373
  }
211
374
  );
212
375
  };
213
- var AvatarStack = ({ children, overlap = 8 }) => /* @__PURE__ */ jsx("span", { style: { display: "inline-flex" }, children: React.Children.map(children, (child, i) => /* @__PURE__ */ jsx("span", { style: { marginLeft: i === 0 ? 0 : -overlap }, children: child })) });
214
- var Pulse = ({
215
- size = 8,
216
- color = "var(--sn-success)",
217
- label,
218
- style,
219
- className
220
- }) => /* @__PURE__ */ jsxs(
376
+ var AvatarStack = ({ children, overlap = 8, className, style }) => /* @__PURE__ */ jsx(
377
+ "span",
378
+ {
379
+ className: cx4("sn-avatar-stack", className),
380
+ style: { ["--sn-avatar-overlap"]: `-${overlap}px`, ...style },
381
+ children
382
+ }
383
+ );
384
+ var cx5 = (...parts) => parts.filter(Boolean).join(" ");
385
+ var Pulse = ({ size = 8, color, label, style, className }) => /* @__PURE__ */ jsxs(
221
386
  "span",
222
387
  {
223
- className,
388
+ className: cx5("sn-pulse", className),
224
389
  style: {
225
- display: "inline-flex",
226
- alignItems: "center",
227
- gap: 8,
228
- color: "var(--sn-fg-muted)",
229
- fontSize: "var(--sn-text-sm)",
390
+ ["--sn-pulse-size"]: `${size}px`,
391
+ ...color ? { ["--sn-pulse-color"]: color } : null,
230
392
  ...style
231
393
  },
232
394
  children: [
233
- /* @__PURE__ */ jsxs(
234
- "span",
235
- {
236
- "aria-hidden": "true",
237
- style: {
238
- position: "relative",
239
- display: "inline-flex",
240
- width: size,
241
- height: size
242
- },
243
- children: [
244
- /* @__PURE__ */ jsx(
245
- "span",
246
- {
247
- style: {
248
- position: "absolute",
249
- inset: 0,
250
- borderRadius: "50%",
251
- background: color,
252
- opacity: 0.6,
253
- animation: "sn-pulse 2s ease-in-out infinite"
254
- }
255
- }
256
- ),
257
- /* @__PURE__ */ jsx(
258
- "span",
259
- {
260
- style: {
261
- position: "relative",
262
- width: "100%",
263
- height: "100%",
264
- borderRadius: "50%",
265
- background: color
266
- }
267
- }
268
- )
269
- ]
270
- }
271
- ),
395
+ /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "sn-pulse__dot" }),
272
396
  label && /* @__PURE__ */ jsx("span", { children: label })
273
397
  ]
274
398
  }
275
399
  );
400
+ var cx6 = (...parts) => parts.filter(Boolean).join(" ");
401
+ var Input = React.forwardRef(function Input2({ size = "md", invalid, className, ...rest }, ref) {
402
+ return /* @__PURE__ */ jsx(
403
+ "input",
404
+ {
405
+ ref,
406
+ className: cx6(
407
+ "sn-input",
408
+ size === "sm" && "sn-input--sm",
409
+ size === "lg" && "sn-input--lg",
410
+ invalid && "sn-input--invalid",
411
+ className
412
+ ),
413
+ "aria-invalid": invalid || void 0,
414
+ ...rest
415
+ }
416
+ );
417
+ });
418
+ var cx7 = (...parts) => parts.filter(Boolean).join(" ");
419
+ var Textarea = React.forwardRef(function Textarea2({ invalid, className, ...rest }, ref) {
420
+ return /* @__PURE__ */ jsx(
421
+ "textarea",
422
+ {
423
+ ref,
424
+ className: cx7("sn-textarea", invalid && "sn-textarea--invalid", className),
425
+ "aria-invalid": invalid || void 0,
426
+ ...rest
427
+ }
428
+ );
429
+ });
430
+ var cx8 = (...parts) => parts.filter(Boolean).join(" ");
431
+ var Label = ({ required, children, className, ...rest }) => /* @__PURE__ */ jsxs("label", { className: cx8("sn-label", className), ...rest, children: [
432
+ children,
433
+ required && /* @__PURE__ */ jsx("span", { className: "sn-label__required", "aria-hidden": "true", children: "*" })
434
+ ] });
435
+ var Field = ({
436
+ label,
437
+ hint,
438
+ error,
439
+ required,
440
+ htmlFor,
441
+ children,
442
+ className,
443
+ style
444
+ }) => /* @__PURE__ */ jsxs("div", { className: cx8("sn-field", className), style, children: [
445
+ label && /* @__PURE__ */ jsx(Label, { htmlFor, required, children: label }),
446
+ children,
447
+ error ? /* @__PURE__ */ jsx("span", { className: "sn-error", role: "alert", children: error }) : hint ? /* @__PURE__ */ jsx("span", { className: "sn-hint", children: hint }) : null
448
+ ] });
276
449
 
277
- export { Avatar, AvatarStack, MarkAsterisk, MarkCrystal, MarkDotgrid, MarkGlyph, MarkHex, MarkSigil, MarkSlash, MarkZFlake, Monogram, Pulse, SnowMark, SnowMonogram, SnowWordmark, markVariants };
450
+ export { ActivityIcon, ArrowRightIcon, ArrowUpRightIcon, Avatar, AvatarStack, BellIcon, BoltIcon, CalendarIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ClockIcon, CloudIcon, CodeIcon, CubeIcon, DatabaseIcon, DiscordIcon, EditIcon, ExternalLinkIcon, EyeIcon, Field, FileIcon, FilterIcon, FolderIcon, GitIcon, GithubIcon, GridIcon, HeartIcon, Icon, InboxIcon, InfoIcon, Input, Label, LayersIcon, LockIcon, MailIcon, MarkAsterisk, MarkCrystal, MarkDotgrid, MarkGlyph, MarkHex, MarkSigil, MarkSlash, MarkZFlake, MenuIcon, MinusIcon, Monogram, MoonIcon, PlusIcon, Pulse, PulseIcon, SearchIcon, SettingsIcon, SnowMark, SnowMonogram, SnowWordmark, StarIcon, SunIcon, TerminalIcon, Textarea, TrashIcon, UserIcon, WarningIcon, XIcon, ZapIcon, markVariants };
278
451
  //# sourceMappingURL=index.js.map
279
452
  //# sourceMappingURL=index.js.map