@northslopetech/altitude-ui 1.9.0 → 1.10.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 (5) hide show
  1. package/dist/index.d.mts +2 -0
  2. package/dist/index.d.ts +2 -0
  3. package/dist/index.js +22 -7
  4. package/dist/index.mjs +110 -95
  5. package/package.json +3 -3
package/dist/index.d.mts CHANGED
@@ -11,6 +11,8 @@ declare const buttonVariants: (props?: ({
11
11
  } & class_variance_authority_types.ClassProp) | undefined) => string;
12
12
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
13
13
  asChild?: boolean;
14
+ icon?: React.ReactNode;
15
+ iconPosition?: "left" | "right";
14
16
  }
15
17
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
16
18
 
package/dist/index.d.ts CHANGED
@@ -11,6 +11,8 @@ declare const buttonVariants: (props?: ({
11
11
  } & class_variance_authority_types.ClassProp) | undefined) => string;
12
12
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
13
13
  asChild?: boolean;
14
+ icon?: React.ReactNode;
15
+ iconPosition?: "left" | "right";
14
16
  }
15
17
  declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
16
18
 
package/dist/index.js CHANGED
@@ -113,20 +113,35 @@ function getButtonTypographyStyles(size) {
113
113
  }
114
114
  }
115
115
  var Button = React.forwardRef(
116
- ({ className, variant, size, asChild = false, style, ...props }, ref) => {
116
+ ({
117
+ className,
118
+ variant,
119
+ size,
120
+ asChild = false,
121
+ style,
122
+ icon,
123
+ iconPosition = "left",
124
+ children,
125
+ ...props
126
+ }, ref) => {
117
127
  const Comp = asChild ? import_react_slot.Slot : "button";
118
128
  const typographyStyles = getButtonTypographyStyles(size);
119
129
  const tokenStyles = {
120
130
  ...typographyStyles,
121
131
  ...style
122
132
  };
123
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
133
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
124
134
  Comp,
125
135
  {
126
136
  className: cn(buttonVariants({ variant, size }), className),
127
137
  style: tokenStyles,
128
138
  ref,
129
- ...props
139
+ ...props,
140
+ children: [
141
+ icon && iconPosition === "left" && icon,
142
+ children,
143
+ icon && iconPosition === "right" && icon
144
+ ]
130
145
  }
131
146
  );
132
147
  }
@@ -202,7 +217,7 @@ var import_class_variance_authority4 = require("class-variance-authority");
202
217
  var import_lucide_react = require("lucide-react");
203
218
  var import_jsx_runtime3 = require("react/jsx-runtime");
204
219
  var selectTriggerVariants = (0, import_class_variance_authority4.cva)(
205
- "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2 min-w-80"
220
+ "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors rounded-md px-3 min-w-80"
206
221
  );
207
222
  var selectContentVariants = (0, import_class_variance_authority4.cva)(
208
223
  "relative z-50 max-h-60 min-w-32 overflow-hidden rounded-lg border border-edge-default bg-canvas-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
@@ -235,7 +250,7 @@ var SelectTrigger = React3.forwardRef(({ className, children, style, ...props },
235
250
  ref,
236
251
  className: cn(
237
252
  selectTriggerVariants(),
238
- "border-edge-default focus-visible:border-2 focus-visible:border-edge-strong data-[state=open]:[&_svg]:rotate-180",
253
+ "border-edge-default focus-visible:border-2 focus-visible:border-edge-strong data-[state=open]:[&_svg]:rotate-180 data-[placeholder]:text-secondary h-10 py-2",
239
254
  className
240
255
  ),
241
256
  style: tokenStyles,
@@ -456,7 +471,7 @@ var import_class_variance_authority5 = require("class-variance-authority");
456
471
  var import_lucide_react2 = require("lucide-react");
457
472
  var import_jsx_runtime5 = require("react/jsx-runtime");
458
473
  var datePickerTriggerVariants = (0, import_class_variance_authority5.cva)(
459
- "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2 min-w-80"
474
+ "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2"
460
475
  );
461
476
  var MONTHS = [
462
477
  "January",
@@ -1053,7 +1068,7 @@ var import_class_variance_authority8 = require("class-variance-authority");
1053
1068
  var import_lucide_react4 = require("lucide-react");
1054
1069
  var import_jsx_runtime8 = require("react/jsx-runtime");
1055
1070
  var inputVariants = (0, import_class_variance_authority8.cva)(
1056
- "flex w-full border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-edge-default transition-colors rounded-md px-4 py-2 min-w-80 border-edge-default focus-visible:border-2 focus-visible:border-edge-strong placeholder:text-secondary read-only:bg-canvas-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent",
1071
+ "flex w-full border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-edge-default transition-colors rounded-md px-3 py-2 min-w-80 border-edge-default focus-visible:border-2 focus-visible:border-edge-strong placeholder:text-secondary read-only:bg-canvas-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent",
1057
1072
  {
1058
1073
  variants: {
1059
1074
  variant: {
package/dist/index.mjs CHANGED
@@ -12,7 +12,7 @@ function cn(...inputs) {
12
12
  }
13
13
 
14
14
  // src/components/ui/button.tsx
15
- import { jsx } from "react/jsx-runtime";
15
+ import { jsxs } from "react/jsx-runtime";
16
16
  var buttonVariants = cva2(
17
17
  "inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
18
18
  {
@@ -52,20 +52,35 @@ function getButtonTypographyStyles(size) {
52
52
  }
53
53
  }
54
54
  var Button = React.forwardRef(
55
- ({ className, variant, size, asChild = false, style, ...props }, ref) => {
55
+ ({
56
+ className,
57
+ variant,
58
+ size,
59
+ asChild = false,
60
+ style,
61
+ icon,
62
+ iconPosition = "left",
63
+ children,
64
+ ...props
65
+ }, ref) => {
56
66
  const Comp = asChild ? Slot : "button";
57
67
  const typographyStyles = getButtonTypographyStyles(size);
58
68
  const tokenStyles = {
59
69
  ...typographyStyles,
60
70
  ...style
61
71
  };
62
- return /* @__PURE__ */ jsx(
72
+ return /* @__PURE__ */ jsxs(
63
73
  Comp,
64
74
  {
65
75
  className: cn(buttonVariants({ variant, size }), className),
66
76
  style: tokenStyles,
67
77
  ref,
68
- ...props
78
+ ...props,
79
+ children: [
80
+ icon && iconPosition === "left" && icon,
81
+ children,
82
+ icon && iconPosition === "right" && icon
83
+ ]
69
84
  }
70
85
  );
71
86
  }
@@ -75,7 +90,7 @@ Button.displayName = "Button";
75
90
  // src/components/ui/typography.tsx
76
91
  import * as React2 from "react";
77
92
  import { cva as cva3 } from "class-variance-authority";
78
- import { jsx as jsx2 } from "react/jsx-runtime";
93
+ import { jsx } from "react/jsx-runtime";
79
94
  var typographyVariants = cva3("text-foreground", {
80
95
  variants: {
81
96
  variant: {
@@ -121,7 +136,7 @@ function getDefaultElement(variant) {
121
136
  var Typography = React2.forwardRef(
122
137
  ({ className, variant, as, style, ...props }, ref) => {
123
138
  const Component = as || getDefaultElement(variant);
124
- return /* @__PURE__ */ jsx2(
139
+ return /* @__PURE__ */ jsx(
125
140
  Component,
126
141
  {
127
142
  className: cn(typographyVariants({ variant }), className),
@@ -139,9 +154,9 @@ import * as React3 from "react";
139
154
  import * as SelectPrimitive from "@radix-ui/react-select";
140
155
  import { cva as cva4 } from "class-variance-authority";
141
156
  import { Check, ChevronDown, ChevronUp } from "lucide-react";
142
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
157
+ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
143
158
  var selectTriggerVariants = cva4(
144
- "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2 min-w-80"
159
+ "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors rounded-md px-3 min-w-80"
145
160
  );
146
161
  var selectContentVariants = cva4(
147
162
  "relative z-50 max-h-60 min-w-32 overflow-hidden rounded-lg border border-edge-default bg-canvas-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
@@ -168,26 +183,26 @@ var SelectTrigger = React3.forwardRef(({ className, children, style, ...props },
168
183
  font: "var(--typography-label-md-regular)",
169
184
  ...style
170
185
  };
171
- return /* @__PURE__ */ jsxs(
186
+ return /* @__PURE__ */ jsxs2(
172
187
  SelectPrimitive.Trigger,
173
188
  {
174
189
  ref,
175
190
  className: cn(
176
191
  selectTriggerVariants(),
177
- "border-edge-default focus-visible:border-2 focus-visible:border-edge-strong data-[state=open]:[&_svg]:rotate-180",
192
+ "border-edge-default focus-visible:border-2 focus-visible:border-edge-strong data-[state=open]:[&_svg]:rotate-180 data-[placeholder]:text-secondary h-10 py-2",
178
193
  className
179
194
  ),
180
195
  style: tokenStyles,
181
196
  ...props,
182
197
  children: [
183
- /* @__PURE__ */ jsx3("span", { className: "flex-1 text-left truncate", children }),
184
- /* @__PURE__ */ jsx3(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-5 w-5 text-secondary flex-shrink-0 transition-transform duration-200" }) })
198
+ /* @__PURE__ */ jsx2("span", { className: "flex-1 text-left truncate", children }),
199
+ /* @__PURE__ */ jsx2(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx2(ChevronDown, { className: "h-5 w-5 text-secondary flex-shrink-0 transition-transform duration-200" }) })
185
200
  ]
186
201
  }
187
202
  );
188
203
  });
189
204
  SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
190
- var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
205
+ var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
191
206
  SelectPrimitive.ScrollUpButton,
192
207
  {
193
208
  ref,
@@ -196,11 +211,11 @@ var SelectScrollUpButton = React3.forwardRef(({ className, ...props }, ref) => /
196
211
  className
197
212
  ),
198
213
  ...props,
199
- children: /* @__PURE__ */ jsx3(ChevronUp, { className: "h-4 w-4" })
214
+ children: /* @__PURE__ */ jsx2(ChevronUp, { className: "h-4 w-4" })
200
215
  }
201
216
  ));
202
217
  SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
203
- var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
218
+ var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
204
219
  SelectPrimitive.ScrollDownButton,
205
220
  {
206
221
  ref,
@@ -209,13 +224,13 @@ var SelectScrollDownButton = React3.forwardRef(({ className, ...props }, ref) =>
209
224
  className
210
225
  ),
211
226
  ...props,
212
- children: /* @__PURE__ */ jsx3(ChevronDown, { className: "h-4 w-4" })
227
+ children: /* @__PURE__ */ jsx2(ChevronDown, { className: "h-4 w-4" })
213
228
  }
214
229
  ));
215
230
  SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
216
231
  var SelectContent = React3.forwardRef(({ className, children, position = "popper", ...props }, ref) => {
217
232
  const contentPosition = position || "popper";
218
- return /* @__PURE__ */ jsx3(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs(
233
+ return /* @__PURE__ */ jsx2(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs2(
219
234
  SelectPrimitive.Content,
220
235
  {
221
236
  ref,
@@ -226,8 +241,8 @@ var SelectContent = React3.forwardRef(({ className, children, position = "popper
226
241
  position: contentPosition,
227
242
  ...props,
228
243
  children: [
229
- /* @__PURE__ */ jsx3(SelectScrollUpButton, {}),
230
- /* @__PURE__ */ jsx3(
244
+ /* @__PURE__ */ jsx2(SelectScrollUpButton, {}),
245
+ /* @__PURE__ */ jsx2(
231
246
  SelectPrimitive.Viewport,
232
247
  {
233
248
  className: cn(
@@ -237,13 +252,13 @@ var SelectContent = React3.forwardRef(({ className, children, position = "popper
237
252
  children
238
253
  }
239
254
  ),
240
- /* @__PURE__ */ jsx3(SelectScrollDownButton, {})
255
+ /* @__PURE__ */ jsx2(SelectScrollDownButton, {})
241
256
  ]
242
257
  }
243
258
  ) });
244
259
  });
245
260
  SelectContent.displayName = SelectPrimitive.Content.displayName;
246
- var SelectLabel = React3.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ jsx3(
261
+ var SelectLabel = React3.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ jsx2(
247
262
  SelectPrimitive.Label,
248
263
  {
249
264
  ref,
@@ -254,7 +269,7 @@ var SelectLabel = React3.forwardRef(({ className, children, style, ...props }, r
254
269
  }
255
270
  ));
256
271
  SelectLabel.displayName = SelectPrimitive.Label.displayName;
257
- var SelectItem = React3.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ jsxs(
272
+ var SelectItem = React3.forwardRef(({ className, children, style, ...props }, ref) => /* @__PURE__ */ jsxs2(
258
273
  SelectPrimitive.Item,
259
274
  {
260
275
  ref,
@@ -269,13 +284,13 @@ var SelectItem = React3.forwardRef(({ className, children, style, ...props }, re
269
284
  style: { font: "var(--typography-label-md-regular)", ...style },
270
285
  ...props,
271
286
  children: [
272
- /* @__PURE__ */ jsx3(SelectPrimitive.ItemText, { className: "flex-1 truncate", children }),
273
- /* @__PURE__ */ jsx3(SelectPrimitive.ItemIndicator, { className: "flex h-4 w-4 items-center justify-center ml-auto", children: /* @__PURE__ */ jsx3(Check, { className: "h-4 w-4 text-edge-strong" }) })
287
+ /* @__PURE__ */ jsx2(SelectPrimitive.ItemText, { className: "flex-1 truncate", children }),
288
+ /* @__PURE__ */ jsx2(SelectPrimitive.ItemIndicator, { className: "flex h-4 w-4 items-center justify-center ml-auto", children: /* @__PURE__ */ jsx2(Check, { className: "h-4 w-4 text-edge-strong" }) })
274
289
  ]
275
290
  }
276
291
  ));
277
292
  SelectItem.displayName = SelectPrimitive.Item.displayName;
278
- var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
293
+ var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
279
294
  SelectPrimitive.Separator,
280
295
  {
281
296
  ref,
@@ -287,7 +302,7 @@ SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
287
302
 
288
303
  // src/components/ui/form-field.tsx
289
304
  import * as React4 from "react";
290
- import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
305
+ import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
291
306
  var FormField = React4.forwardRef(
292
307
  ({
293
308
  label,
@@ -305,8 +320,8 @@ var FormField = React4.forwardRef(
305
320
  const helperTextId = `${fieldId}-helper`;
306
321
  const labelId = `${fieldId}-label`;
307
322
  if (compact) {
308
- return /* @__PURE__ */ jsxs2("div", { ref, className: cn("w-full space-y-2", className), ...props, children: [
309
- /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
323
+ return /* @__PURE__ */ jsxs3("div", { ref, className: cn("w-full space-y-2", className), ...props, children: [
324
+ /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
310
325
  React4.cloneElement(
311
326
  children,
312
327
  {
@@ -322,7 +337,7 @@ var FormField = React4.forwardRef(
322
337
  )
323
338
  }
324
339
  ),
325
- label && /* @__PURE__ */ jsx4(
340
+ label && /* @__PURE__ */ jsx3(
326
341
  "label",
327
342
  {
328
343
  id: labelId,
@@ -332,7 +347,7 @@ var FormField = React4.forwardRef(
332
347
  }
333
348
  )
334
349
  ] }),
335
- helperText && /* @__PURE__ */ jsx4(
350
+ helperText && /* @__PURE__ */ jsx3(
336
351
  Typography,
337
352
  {
338
353
  variant: "body-xs",
@@ -345,9 +360,9 @@ var FormField = React4.forwardRef(
345
360
  )
346
361
  ] });
347
362
  }
348
- return /* @__PURE__ */ jsxs2("div", { ref, className: cn("w-full space-y-3", className), ...props, children: [
349
- (label || required) && /* @__PURE__ */ jsxs2("div", { className: "flex items-center justify-between", children: [
350
- label && /* @__PURE__ */ jsx4(
363
+ return /* @__PURE__ */ jsxs3("div", { ref, className: cn("w-full space-y-3", className), ...props, children: [
364
+ (label || required) && /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between", children: [
365
+ label && /* @__PURE__ */ jsx3(
351
366
  "label",
352
367
  {
353
368
  id: labelId,
@@ -356,7 +371,7 @@ var FormField = React4.forwardRef(
356
371
  children: label
357
372
  }
358
373
  ),
359
- required && /* @__PURE__ */ jsx4("span", { className: "text-semantic-text-secondary [font:var(--typography-label-xs-regular)]", children: "*required" })
374
+ required && /* @__PURE__ */ jsx3("span", { className: "text-semantic-text-secondary [font:var(--typography-label-xs-regular)]", children: "*required" })
360
375
  ] }),
361
376
  React4.cloneElement(
362
377
  children,
@@ -372,7 +387,7 @@ var FormField = React4.forwardRef(
372
387
  )
373
388
  }
374
389
  ),
375
- helperText && /* @__PURE__ */ jsx4(
390
+ helperText && /* @__PURE__ */ jsx3(
376
391
  Typography,
377
392
  {
378
393
  variant: "body-xs",
@@ -393,9 +408,9 @@ import * as React5 from "react";
393
408
  import * as PopoverPrimitive from "@radix-ui/react-popover";
394
409
  import { cva as cva5 } from "class-variance-authority";
395
410
  import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
396
- import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
411
+ import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
397
412
  var datePickerTriggerVariants = cva5(
398
- "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2 min-w-80"
413
+ "flex w-full items-center justify-between border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 transition-colors h-10 rounded-md px-3 py-2"
399
414
  );
400
415
  var MONTHS = [
401
416
  "January",
@@ -499,13 +514,13 @@ var DatePicker = React5.forwardRef(
499
514
  return date.getTime() === (/* @__PURE__ */ new Date()).getTime();
500
515
  };
501
516
  const days = getDaysInMonth(currentMonth);
502
- return /* @__PURE__ */ jsxs3(
517
+ return /* @__PURE__ */ jsxs4(
503
518
  PopoverPrimitive.Root,
504
519
  {
505
520
  open: disabled ? false : open,
506
521
  onOpenChange: disabled ? void 0 : setOpen,
507
522
  children: [
508
- /* @__PURE__ */ jsx5(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs3(
523
+ /* @__PURE__ */ jsx4(PopoverPrimitive.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs4(
509
524
  "button",
510
525
  {
511
526
  ref,
@@ -517,7 +532,7 @@ var DatePicker = React5.forwardRef(
517
532
  disabled,
518
533
  ...props,
519
534
  children: [
520
- /* @__PURE__ */ jsx5(
535
+ /* @__PURE__ */ jsx4(
521
536
  Typography,
522
537
  {
523
538
  variant: "label-md",
@@ -530,7 +545,7 @@ var DatePicker = React5.forwardRef(
530
545
  children: selectedDate ? formatDate(selectedDate) : placeholder
531
546
  }
532
547
  ),
533
- /* @__PURE__ */ jsx5(
548
+ /* @__PURE__ */ jsx4(
534
549
  Calendar,
535
550
  {
536
551
  className: cn(
@@ -542,38 +557,38 @@ var DatePicker = React5.forwardRef(
542
557
  ]
543
558
  }
544
559
  ) }),
545
- /* @__PURE__ */ jsx5(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx5(
560
+ /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
546
561
  PopoverPrimitive.Content,
547
562
  {
548
563
  className: "z-50 w-80 rounded-lg border border-edge-default bg-canvas-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
549
564
  sideOffset: 4,
550
565
  align: "start",
551
- children: /* @__PURE__ */ jsxs3("div", { className: "p-4", children: [
552
- /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between mb-4", children: [
553
- /* @__PURE__ */ jsx5(
566
+ children: /* @__PURE__ */ jsxs4("div", { className: "p-4", children: [
567
+ /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between mb-4", children: [
568
+ /* @__PURE__ */ jsx4(
554
569
  "button",
555
570
  {
556
571
  onClick: () => handleMonthChange("prev"),
557
572
  className: "p-1 hover:bg-canvas-gray rounded transition-colors",
558
- children: /* @__PURE__ */ jsx5(ChevronLeft, { className: "h-4 w-4" })
573
+ children: /* @__PURE__ */ jsx4(ChevronLeft, { className: "h-4 w-4" })
559
574
  }
560
575
  ),
561
- /* @__PURE__ */ jsxs3(Typography, { variant: "label-sm-bold", as: "div", children: [
576
+ /* @__PURE__ */ jsxs4(Typography, { variant: "label-sm-bold", as: "div", children: [
562
577
  MONTHS[currentMonth.getMonth()],
563
578
  " ",
564
579
  currentMonth.getFullYear()
565
580
  ] }),
566
- /* @__PURE__ */ jsx5(
581
+ /* @__PURE__ */ jsx4(
567
582
  "button",
568
583
  {
569
584
  onClick: () => handleMonthChange("next"),
570
585
  className: "p-1 hover:bg-canvas-gray rounded transition-colors",
571
- children: /* @__PURE__ */ jsx5(ChevronRight, { className: "h-4 w-4" })
586
+ children: /* @__PURE__ */ jsx4(ChevronRight, { className: "h-4 w-4" })
572
587
  }
573
588
  )
574
589
  ] }),
575
- /* @__PURE__ */ jsxs3("div", { className: "space-y-1", children: [
576
- /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ jsx5(
590
+ /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
591
+ /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-7 gap-1 mb-2", children: DAYS.map((day) => /* @__PURE__ */ jsx4(
577
592
  Typography,
578
593
  {
579
594
  variant: "label-xs-bold",
@@ -583,11 +598,11 @@ var DatePicker = React5.forwardRef(
583
598
  },
584
599
  day
585
600
  )) }),
586
- /* @__PURE__ */ jsx5("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ jsx5(
601
+ /* @__PURE__ */ jsx4("div", { className: "grid grid-cols-7 gap-1", children: days.map((date, index) => /* @__PURE__ */ jsx4(
587
602
  "div",
588
603
  {
589
604
  className: "h-8 w-8 flex items-center justify-center",
590
- children: date && /* @__PURE__ */ jsx5(
605
+ children: date && /* @__PURE__ */ jsx4(
591
606
  "button",
592
607
  {
593
608
  onClick: () => handleDateSelect(date),
@@ -599,7 +614,7 @@ var DatePicker = React5.forwardRef(
599
614
  !isDateSelected(date) && "rounded-full",
600
615
  isToday(date) && !isDateSelected(date) && "text-blue-600 after:content-[''] after:absolute after:bottom-1 after:left-1/2 after:-translate-x-1/2 after:w-1 after:h-1 after:bg-blue-600 after:rounded-full"
601
616
  ),
602
- children: /* @__PURE__ */ jsx5(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
617
+ children: /* @__PURE__ */ jsx4(Typography, { variant: "label-sm", as: "span", children: date.getDate() })
603
618
  }
604
619
  )
605
620
  },
@@ -619,7 +634,7 @@ DatePicker.displayName = "DatePicker";
619
634
  // src/components/ui/upload.tsx
620
635
  import * as React6 from "react";
621
636
  import { cva as cva6 } from "class-variance-authority";
622
- import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
637
+ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
623
638
  var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
624
639
  var uploadVariants = cva6(
625
640
  "relative flex flex-col items-center justify-center rounded-lg transition-all duration-200 ease-in-out overflow-hidden",
@@ -819,17 +834,17 @@ var Upload = React6.forwardRef(
819
834
  const renderContent = () => {
820
835
  switch (currentState) {
821
836
  case "error":
822
- return /* @__PURE__ */ jsxs4(
837
+ return /* @__PURE__ */ jsxs5(
823
838
  "div",
824
839
  {
825
840
  className: "flex flex-col items-center text-center max-w-[289px]",
826
841
  style: { gap: "32px" },
827
842
  children: [
828
- /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
829
- /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", children: "Upload fail" }),
830
- /* @__PURE__ */ jsx6(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
843
+ /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
844
+ /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", children: "Upload fail" }),
845
+ /* @__PURE__ */ jsx5(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
831
846
  ] }),
832
- /* @__PURE__ */ jsx6(
847
+ /* @__PURE__ */ jsx5(
833
848
  Button,
834
849
  {
835
850
  variant: "destructive",
@@ -843,22 +858,22 @@ var Upload = React6.forwardRef(
843
858
  }
844
859
  );
845
860
  case "uploading":
846
- return /* @__PURE__ */ jsxs4(
861
+ return /* @__PURE__ */ jsxs5(
847
862
  "div",
848
863
  {
849
864
  className: "flex flex-col items-center text-center max-w-[289px]",
850
865
  style: { gap: "32px" },
851
866
  children: [
852
- /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
853
- /* @__PURE__ */ jsxs4("div", { className: "w-full max-w-[720px] space-y-2", children: [
854
- /* @__PURE__ */ jsx6("div", { className: "w-full bg-canvas-gray rounded-full h-2", children: /* @__PURE__ */ jsx6(
867
+ /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
868
+ /* @__PURE__ */ jsxs5("div", { className: "w-full max-w-[720px] space-y-2", children: [
869
+ /* @__PURE__ */ jsx5("div", { className: "w-full bg-canvas-gray rounded-full h-2", children: /* @__PURE__ */ jsx5(
855
870
  "div",
856
871
  {
857
872
  className: "bg-canvas-primary h-2 rounded-full transition-all duration-300 ease-in-out",
858
873
  style: { width: `${currentProgress}%` }
859
874
  }
860
875
  ) }),
861
- /* @__PURE__ */ jsxs4(
876
+ /* @__PURE__ */ jsxs5(
862
877
  Typography,
863
878
  {
864
879
  variant: "body-sm",
@@ -874,29 +889,29 @@ var Upload = React6.forwardRef(
874
889
  }
875
890
  );
876
891
  case "success":
877
- return /* @__PURE__ */ jsx6(
892
+ return /* @__PURE__ */ jsx5(
878
893
  "div",
879
894
  {
880
895
  className: "flex flex-col items-center text-center max-w-[289px]",
881
896
  style: { gap: "32px" },
882
- children: /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
883
- /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
884
- selectedFiles.length > 0 && /* @__PURE__ */ jsx6("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx6(Typography, { variant: "body-sm", children: file.name }, index)) })
897
+ children: /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
898
+ /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
899
+ selectedFiles.length > 0 && /* @__PURE__ */ jsx5("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx5(Typography, { variant: "body-sm", children: file.name }, index)) })
885
900
  ] })
886
901
  }
887
902
  );
888
903
  default:
889
- return /* @__PURE__ */ jsxs4(
904
+ return /* @__PURE__ */ jsxs5(
890
905
  "div",
891
906
  {
892
907
  className: "flex flex-col items-center text-center max-w-[289px]",
893
908
  style: { gap: "32px" },
894
909
  children: [
895
- /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
896
- /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
897
- /* @__PURE__ */ jsx6(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
910
+ /* @__PURE__ */ jsxs5("div", { className: "space-y-4", children: [
911
+ /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
912
+ /* @__PURE__ */ jsx5(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
898
913
  ] }),
899
- /* @__PURE__ */ jsx6(
914
+ /* @__PURE__ */ jsx5(
900
915
  Button,
901
916
  {
902
917
  variant: "default",
@@ -910,10 +925,10 @@ var Upload = React6.forwardRef(
910
925
  children: "Choose files"
911
926
  }
912
927
  ),
913
- /* @__PURE__ */ jsxs4(Typography, { variant: "body-sm", className: "text-secondary", children: [
928
+ /* @__PURE__ */ jsxs5(Typography, { variant: "body-sm", className: "text-secondary", children: [
914
929
  "Supported file: ",
915
930
  getFileTypeDisplay(),
916
- /* @__PURE__ */ jsx6("br", {}),
931
+ /* @__PURE__ */ jsx5("br", {}),
917
932
  "Max: ",
918
933
  Math.round(maxFileSize / 1024 / 1024),
919
934
  " MB each"
@@ -923,7 +938,7 @@ var Upload = React6.forwardRef(
923
938
  );
924
939
  }
925
940
  };
926
- return /* @__PURE__ */ jsxs4(
941
+ return /* @__PURE__ */ jsxs5(
927
942
  "div",
928
943
  {
929
944
  ref,
@@ -947,7 +962,7 @@ var Upload = React6.forwardRef(
947
962
  "aria-disabled": disabled,
948
963
  ...props,
949
964
  children: [
950
- /* @__PURE__ */ jsx6(
965
+ /* @__PURE__ */ jsx5(
951
966
  "input",
952
967
  {
953
968
  ref: fileInputRef,
@@ -971,17 +986,17 @@ import * as React7 from "react";
971
986
  import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
972
987
  import { CheckIcon } from "lucide-react";
973
988
  import { cva as cva7 } from "class-variance-authority";
974
- import { jsx as jsx7 } from "react/jsx-runtime";
989
+ import { jsx as jsx6 } from "react/jsx-runtime";
975
990
  var checkboxVariants = cva7(
976
991
  "peer size-4 shrink-0 rounded-[4px] border border-edge-strong bg-canvas-light hover:bg-canvas-info transition-colors focus-visible:outline-none focus-visible:border-2 focus-visible:border-edge-interactive disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-canvas-primary data-[state=checked]:border-canvas-primary data-[state=checked]:text-light [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0"
977
992
  );
978
- var Checkbox = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
993
+ var Checkbox = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
979
994
  CheckboxPrimitive.Root,
980
995
  {
981
996
  ref,
982
997
  className: cn(checkboxVariants(), className),
983
998
  ...props,
984
- children: /* @__PURE__ */ jsx7(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx7(CheckIcon, { className: "size-3" }) })
999
+ children: /* @__PURE__ */ jsx6(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx6(CheckIcon, { className: "size-3" }) })
985
1000
  }
986
1001
  ));
987
1002
  Checkbox.displayName = CheckboxPrimitive.Root.displayName;
@@ -990,9 +1005,9 @@ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
990
1005
  import * as React8 from "react";
991
1006
  import { cva as cva8 } from "class-variance-authority";
992
1007
  import { X, Lock } from "lucide-react";
993
- import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
1008
+ import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
994
1009
  var inputVariants = cva8(
995
- "flex w-full border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-edge-default transition-colors rounded-md px-4 py-2 min-w-80 border-edge-default focus-visible:border-2 focus-visible:border-edge-strong placeholder:text-secondary read-only:bg-canvas-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent",
1010
+ "flex w-full border bg-canvas-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-edge-default transition-colors rounded-md px-3 py-2 min-w-80 border-edge-default focus-visible:border-2 focus-visible:border-edge-strong placeholder:text-secondary read-only:bg-canvas-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent",
996
1011
  {
997
1012
  variants: {
998
1013
  variant: {
@@ -1065,8 +1080,8 @@ var Input = React8.forwardRef(
1065
1080
  onClear?.();
1066
1081
  };
1067
1082
  if (variant === "textarea") {
1068
- return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
1069
- /* @__PURE__ */ jsx8(
1083
+ return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
1084
+ /* @__PURE__ */ jsx7(
1070
1085
  "textarea",
1071
1086
  {
1072
1087
  className: cn(
@@ -1082,20 +1097,20 @@ var Input = React8.forwardRef(
1082
1097
  ...props
1083
1098
  }
1084
1099
  ),
1085
- showClear && /* @__PURE__ */ jsx8(
1100
+ showClear && /* @__PURE__ */ jsx7(
1086
1101
  "button",
1087
1102
  {
1088
1103
  type: "button",
1089
1104
  onClick: handleClear,
1090
1105
  className: "absolute right-3 top-3 h-4 w-4 text-secondary hover:text-dark transition-colors",
1091
- children: /* @__PURE__ */ jsx8(X, { className: "h-4 w-4" })
1106
+ children: /* @__PURE__ */ jsx7(X, { className: "h-4 w-4" })
1092
1107
  }
1093
1108
  ),
1094
- showLock && /* @__PURE__ */ jsx8(Lock, { className: "absolute right-3 top-3 h-4 w-4 text-secondary" })
1109
+ showLock && /* @__PURE__ */ jsx7(Lock, { className: "absolute right-3 top-3 h-4 w-4 text-secondary" })
1095
1110
  ] });
1096
1111
  }
1097
- return /* @__PURE__ */ jsxs5("div", { className: "relative", children: [
1098
- /* @__PURE__ */ jsx8(
1112
+ return /* @__PURE__ */ jsxs6("div", { className: "relative", children: [
1113
+ /* @__PURE__ */ jsx7(
1099
1114
  "input",
1100
1115
  {
1101
1116
  className: cn(
@@ -1111,16 +1126,16 @@ var Input = React8.forwardRef(
1111
1126
  ...props
1112
1127
  }
1113
1128
  ),
1114
- showClear && /* @__PURE__ */ jsx8(
1129
+ showClear && /* @__PURE__ */ jsx7(
1115
1130
  "button",
1116
1131
  {
1117
1132
  type: "button",
1118
1133
  onClick: handleClear,
1119
1134
  className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary hover:text-dark transition-colors",
1120
- children: /* @__PURE__ */ jsx8(X, { className: "h-4 w-4" })
1135
+ children: /* @__PURE__ */ jsx7(X, { className: "h-4 w-4" })
1121
1136
  }
1122
1137
  ),
1123
- showLock && /* @__PURE__ */ jsx8(Lock, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary" })
1138
+ showLock && /* @__PURE__ */ jsx7(Lock, { className: "absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-secondary" })
1124
1139
  ] });
1125
1140
  }
1126
1141
  );
@@ -1130,7 +1145,7 @@ var TypedInput = Input;
1130
1145
  // src/components/ui/badge.tsx
1131
1146
  import * as React9 from "react";
1132
1147
  import { cva as cva9 } from "class-variance-authority";
1133
- import { jsx as jsx9 } from "react/jsx-runtime";
1148
+ import { jsx as jsx8 } from "react/jsx-runtime";
1134
1149
  var badgeVariants = cva9(
1135
1150
  "inline-flex items-center justify-center gap-1 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
1136
1151
  {
@@ -1162,7 +1177,7 @@ var Badge = React9.forwardRef(
1162
1177
  ...typographyStyles,
1163
1178
  ...style
1164
1179
  };
1165
- return /* @__PURE__ */ jsx9(
1180
+ return /* @__PURE__ */ jsx8(
1166
1181
  "span",
1167
1182
  {
1168
1183
  className: cn(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@northslopetech/altitude-ui",
3
- "version": "1.9.0",
3
+ "version": "1.10.0",
4
4
  "private": false,
5
5
  "description": "React UI components for the Altitude design system",
6
6
  "author": "Northslope",
@@ -50,8 +50,8 @@
50
50
  "tsup": "^8.0.0",
51
51
  "typescript": "5.8.2",
52
52
  "@northslopetech/altitude-tokens": "1.0.0",
53
- "@repo/typescript-config": "0.0.0",
54
- "@repo/eslint-config": "0.0.0"
53
+ "@repo/eslint-config": "0.0.0",
54
+ "@repo/typescript-config": "0.0.0"
55
55
  },
56
56
  "dependencies": {
57
57
  "@radix-ui/react-checkbox": "^1.3.3",