@northslopetech/altitude-ui 1.10.0 → 2.0.2

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 (6) hide show
  1. package/dist/index.d.mts +26 -1
  2. package/dist/index.d.ts +26 -1
  3. package/dist/index.js +210 -36
  4. package/dist/index.mjs +204 -36
  5. package/dist/tokens.css +10 -22
  6. package/package.json +3 -1
package/dist/index.d.mts CHANGED
@@ -127,4 +127,29 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
127
127
  }
128
128
  declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
129
129
 
130
- export { Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, badgeVariants, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, typographyVariants, uploadVariants };
130
+ declare const tabsVariants: (props?: ({
131
+ variant?: "default" | null | undefined;
132
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
133
+ declare const tabsListVariants: (props?: ({
134
+ variant?: "default" | null | undefined;
135
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
136
+ interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
137
+ value: string;
138
+ onValueChange: (value: string) => void;
139
+ variant?: "default";
140
+ }
141
+ declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
142
+ interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
143
+ children: React.ReactNode;
144
+ }
145
+ declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
146
+ interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof tabsVariants> {
147
+ value: string;
148
+ }
149
+ declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
150
+ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
151
+ value: string;
152
+ }
153
+ declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
154
+
155
+ export { Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, badgeVariants, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, tabsListVariants, tabsVariants, typographyVariants, uploadVariants };
package/dist/index.d.ts CHANGED
@@ -127,4 +127,29 @@ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps
127
127
  }
128
128
  declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
129
129
 
130
- export { Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, badgeVariants, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, typographyVariants, uploadVariants };
130
+ declare const tabsVariants: (props?: ({
131
+ variant?: "default" | null | undefined;
132
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
133
+ declare const tabsListVariants: (props?: ({
134
+ variant?: "default" | null | undefined;
135
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
136
+ interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
137
+ value: string;
138
+ onValueChange: (value: string) => void;
139
+ variant?: "default";
140
+ }
141
+ declare const Tabs: React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>>;
142
+ interface TabsListProps extends React.HTMLAttributes<HTMLDivElement> {
143
+ children: React.ReactNode;
144
+ }
145
+ declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
146
+ interface TabsTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof tabsVariants> {
147
+ value: string;
148
+ }
149
+ declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
150
+ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
151
+ value: string;
152
+ }
153
+ declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
154
+
155
+ export { Badge, type BadgeProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FormField, type FormFieldProps, TypedInput as Input, type InputFieldProps, type InputProps, Select, SelectContent, type SelectContentProps, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, type TextareaFieldProps, Typography, type TypographyProps, Upload, type UploadProps, badgeVariants, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, tabsListVariants, tabsVariants, typographyVariants, uploadVariants };
package/dist/index.js CHANGED
@@ -46,6 +46,10 @@ __export(index_exports, {
46
46
  SelectSeparator: () => SelectSeparator,
47
47
  SelectTrigger: () => SelectTrigger,
48
48
  SelectValue: () => SelectValue,
49
+ Tabs: () => Tabs,
50
+ TabsContent: () => TabsContent,
51
+ TabsList: () => TabsList,
52
+ TabsTrigger: () => TabsTrigger,
49
53
  Typography: () => Typography,
50
54
  Upload: () => Upload,
51
55
  badgeVariants: () => badgeVariants,
@@ -54,6 +58,8 @@ __export(index_exports, {
54
58
  datePickerTriggerVariants: () => datePickerTriggerVariants,
55
59
  inputVariants: () => inputVariants,
56
60
  selectTriggerVariants: () => selectTriggerVariants,
61
+ tabsListVariants: () => tabsListVariants,
62
+ tabsVariants: () => tabsVariants,
57
63
  typographyVariants: () => typographyVariants,
58
64
  uploadVariants: () => uploadVariants
59
65
  });
@@ -79,12 +85,12 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
79
85
  {
80
86
  variants: {
81
87
  variant: {
82
- default: "bg-canvas-primary text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
83
- outline: "bg-canvas-light text-dark border border-edge-strong shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
84
- destructive: "bg-canvas-error-strong text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2",
85
- "destructive-subtle": "bg-canvas-light text-error border border-edge-default shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2",
86
- ghost: "bg-canvas-light text-dark hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
87
- link: "bg-canvas-light text-dark underline underline-offset-4 hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2"
88
+ default: "bg-primary text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
89
+ outline: "bg-light text-dark border border-strong shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
90
+ destructive: "bg-error text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2",
91
+ "destructive-subtle": "bg-light text-error border border-secondary shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2",
92
+ ghost: "bg-light text-dark hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
93
+ link: "bg-light text-dark underline underline-offset-4 hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2"
88
94
  },
89
95
  size: {
90
96
  sm: "h-8 rounded-md px-2 py-2 min-w-[120px]",
@@ -217,10 +223,10 @@ var import_class_variance_authority4 = require("class-variance-authority");
217
223
  var import_lucide_react = require("lucide-react");
218
224
  var import_jsx_runtime3 = require("react/jsx-runtime");
219
225
  var selectTriggerVariants = (0, import_class_variance_authority4.cva)(
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"
226
+ "flex w-full items-center justify-between border bg-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"
221
227
  );
222
228
  var selectContentVariants = (0, import_class_variance_authority4.cva)(
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",
229
+ "relative z-50 max-h-60 min-w-32 overflow-hidden rounded-lg border border-secondary bg-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
224
230
  {
225
231
  variants: {
226
232
  position: {
@@ -250,7 +256,7 @@ var SelectTrigger = React3.forwardRef(({ className, children, style, ...props },
250
256
  ref,
251
257
  className: cn(
252
258
  selectTriggerVariants(),
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",
259
+ "border-secondary focus-visible:border-2 focus-visible:border-strong data-[state=open]:[&_svg]:rotate-180 data-[placeholder]:text-secondary h-10 py-2",
254
260
  className
255
261
  ),
256
262
  style: tokenStyles,
@@ -336,9 +342,9 @@ var SelectItem = React3.forwardRef(({ className, children, style, ...props }, re
336
342
  ref,
337
343
  className: cn(
338
344
  "relative flex w-full cursor-pointer select-none items-center rounded-md h-11 px-4 text-dark outline-none transition-colors",
339
- "focus:bg-canvas-gray focus:text-dark",
340
- "hover:bg-canvas-gray/50",
341
- "data-[state=checked]:bg-canvas-surface-info data-[state=checked]:text-dark",
345
+ "focus:bg-gray focus:text-dark",
346
+ "hover:bg-gray/50",
347
+ "data-[state=checked]:bg-info-subtle data-[state=checked]:text-dark",
342
348
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
343
349
  className
344
350
  ),
@@ -346,7 +352,7 @@ var SelectItem = React3.forwardRef(({ className, children, style, ...props }, re
346
352
  ...props,
347
353
  children: [
348
354
  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPrimitive.ItemText, { className: "flex-1 truncate", children }),
349
- /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPrimitive.ItemIndicator, { className: "flex h-4 w-4 items-center justify-center ml-auto", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { className: "h-4 w-4 text-edge-strong" }) })
355
+ /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(SelectPrimitive.ItemIndicator, { className: "flex h-4 w-4 items-center justify-center ml-auto", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react.Check, { className: "h-4 w-4 text-strong" }) })
350
356
  ]
351
357
  }
352
358
  ));
@@ -355,7 +361,7 @@ var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__
355
361
  SelectPrimitive.Separator,
356
362
  {
357
363
  ref,
358
- className: cn("-mx-1 my-1 h-px bg-edge-default", className),
364
+ className: cn("-mx-1 my-1 h-px bg-secondary", className),
359
365
  ...props
360
366
  }
361
367
  ));
@@ -471,7 +477,7 @@ var import_class_variance_authority5 = require("class-variance-authority");
471
477
  var import_lucide_react2 = require("lucide-react");
472
478
  var import_jsx_runtime5 = require("react/jsx-runtime");
473
479
  var datePickerTriggerVariants = (0, import_class_variance_authority5.cva)(
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"
480
+ "flex w-full items-center justify-between border bg-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"
475
481
  );
476
482
  var MONTHS = [
477
483
  "January",
@@ -587,7 +593,7 @@ var DatePicker = React5.forwardRef(
587
593
  ref,
588
594
  className: cn(
589
595
  datePickerTriggerVariants(),
590
- "border-edge-default focus-visible:border-2 focus-visible:border-edge-strong",
596
+ "border-secondary focus-visible:border-2 focus-visible:border-strong",
591
597
  className
592
598
  ),
593
599
  disabled,
@@ -621,7 +627,7 @@ var DatePicker = React5.forwardRef(
621
627
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
622
628
  PopoverPrimitive.Content,
623
629
  {
624
- 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",
630
+ className: "z-50 w-80 rounded-lg border border-secondary bg-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
625
631
  sideOffset: 4,
626
632
  align: "start",
627
633
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-4", children: [
@@ -630,7 +636,7 @@ var DatePicker = React5.forwardRef(
630
636
  "button",
631
637
  {
632
638
  onClick: () => handleMonthChange("prev"),
633
- className: "p-1 hover:bg-canvas-gray rounded transition-colors",
639
+ className: "p-1 hover:bg-gray rounded transition-colors",
634
640
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ChevronLeft, { className: "h-4 w-4" })
635
641
  }
636
642
  ),
@@ -643,7 +649,7 @@ var DatePicker = React5.forwardRef(
643
649
  "button",
644
650
  {
645
651
  onClick: () => handleMonthChange("next"),
646
- className: "p-1 hover:bg-canvas-gray rounded transition-colors",
652
+ className: "p-1 hover:bg-gray rounded transition-colors",
647
653
  children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_lucide_react2.ChevronRight, { className: "h-4 w-4" })
648
654
  }
649
655
  )
@@ -669,7 +675,7 @@ var DatePicker = React5.forwardRef(
669
675
  onClick: () => handleDateSelect(date),
670
676
  className: cn(
671
677
  "h-8 w-8 transition-colors relative",
672
- "hover:bg-canvas-gray focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1",
678
+ "hover:bg-gray focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1",
673
679
  isDateSelected(date) && !isToday(date) && "bg-dark text-light hover:bg-dark/90 rounded",
674
680
  isDateSelected(date) && isToday(date) && "bg-dark text-light hover:bg-dark/90 rounded-full",
675
681
  !isDateSelected(date) && "rounded-full",
@@ -702,11 +708,11 @@ var uploadVariants = (0, import_class_variance_authority6.cva)(
702
708
  {
703
709
  variants: {
704
710
  state: {
705
- default: "bg-canvas-light border-2 border-dashed border-edge-subtle hover:border-edge-interactive hover:bg-canvas-light cursor-pointer",
706
- dragOver: "bg-canvas-info border-2 border-solid border-edge-interactive cursor-pointer",
707
- error: "bg-canvas-light border-2 border-solid border-edge-default cursor-pointer",
708
- uploading: "bg-canvas-light border-2 border-solid border-edge-interactive cursor-default",
709
- success: "bg-canvas-light border-2 border-solid border-edge-success cursor-default"
711
+ default: "bg-light border-2 border-dashed border-subtle hover:border-interactive hover:bg-light cursor-pointer",
712
+ dragOver: "bg-info-subtle border-2 border-solid border-interactive cursor-pointer",
713
+ error: "bg-light border-2 border-solid border-secondary cursor-pointer",
714
+ uploading: "bg-light border-2 border-solid border-interactive cursor-default",
715
+ success: "bg-light border-2 border-solid border-success cursor-default"
710
716
  },
711
717
  disabled: {
712
718
  true: "opacity-50 cursor-not-allowed",
@@ -927,10 +933,10 @@ var Upload = React6.forwardRef(
927
933
  children: [
928
934
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
929
935
  /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full max-w-[720px] space-y-2", children: [
930
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-full bg-canvas-gray rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
936
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
931
937
  "div",
932
938
  {
933
- className: "bg-canvas-primary h-2 rounded-full transition-all duration-300 ease-in-out",
939
+ className: "bg-primary h-2 rounded-full transition-all duration-300 ease-in-out",
934
940
  style: { width: `${currentProgress}%` }
935
941
  }
936
942
  ) }),
@@ -1049,7 +1055,7 @@ var import_lucide_react3 = require("lucide-react");
1049
1055
  var import_class_variance_authority7 = require("class-variance-authority");
1050
1056
  var import_jsx_runtime7 = require("react/jsx-runtime");
1051
1057
  var checkboxVariants = (0, import_class_variance_authority7.cva)(
1052
- "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"
1058
+ "peer size-4 shrink-0 rounded-[4px] border border-strong bg-light hover:bg-info-subtle transition-colors focus-visible:outline-none focus-visible:border-2 focus-visible:border-interactive disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-light [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0"
1053
1059
  );
1054
1060
  var Checkbox = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1055
1061
  CheckboxPrimitive.Root,
@@ -1068,12 +1074,12 @@ var import_class_variance_authority8 = require("class-variance-authority");
1068
1074
  var import_lucide_react4 = require("lucide-react");
1069
1075
  var import_jsx_runtime8 = require("react/jsx-runtime");
1070
1076
  var inputVariants = (0, import_class_variance_authority8.cva)(
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",
1077
+ "flex w-full border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-secondary transition-colors rounded-md px-3 min-w-80 border-secondary focus-visible:border-2 focus-visible:border-strong placeholder:text-secondary read-only:bg-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent",
1072
1078
  {
1073
1079
  variants: {
1074
1080
  variant: {
1075
- input: "h-10",
1076
- textarea: "min-h-20 resize-none"
1081
+ input: "h-10 py-2",
1082
+ textarea: "min-h-20 resize-none pt-4 pb-2"
1077
1083
  }
1078
1084
  },
1079
1085
  defaultVariants: {
@@ -1212,12 +1218,12 @@ var badgeVariants = (0, import_class_variance_authority9.cva)(
1212
1218
  {
1213
1219
  variants: {
1214
1220
  variant: {
1215
- primary: "bg-canvas-primary text-light focus-visible:ring-border-interactive",
1216
- secondary: "bg-canvas-light text-dark border border-edge-strong focus-visible:ring-border-interactive",
1221
+ primary: "bg-primary text-light focus-visible:ring-border-interactive",
1222
+ secondary: "bg-light text-dark border border-strong focus-visible:ring-border-interactive",
1217
1223
  accent: "bg-blue-300 text-dark focus-visible:ring-border-interactive",
1218
- success: "bg-canvas-success text-success focus-visible:ring-success",
1219
- warning: "bg-canvas-warning text-warning focus-visible:ring-warning",
1220
- error: "bg-canvas-error text-error focus-visible:ring-border-error"
1224
+ success: "bg-success-subtle text-success focus-visible:ring-success",
1225
+ warning: "bg-warning-subtle text-warning focus-visible:ring-warning",
1226
+ error: "bg-error-subtle text-error focus-visible:ring-border-error"
1221
1227
  }
1222
1228
  },
1223
1229
  defaultVariants: {
@@ -1254,6 +1260,168 @@ var Badge = React9.forwardRef(
1254
1260
  }
1255
1261
  );
1256
1262
  Badge.displayName = "Badge";
1263
+
1264
+ // src/components/ui/tabs.tsx
1265
+ var React10 = __toESM(require("react"));
1266
+ var import_class_variance_authority10 = require("class-variance-authority");
1267
+ var import_jsx_runtime10 = require("react/jsx-runtime");
1268
+ var tabsVariants = (0, import_class_variance_authority10.cva)(
1269
+ "inline-flex items-center justify-start whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 px-3 py-2 h-10 w-[140px]",
1270
+ {
1271
+ variants: {
1272
+ variant: {
1273
+ default: "border-b-2 border-subtle hover:border-interactive data-[state=active]:border-interactive data-[state=active]:text-primary disabled:border-border-subtle disabled:text-muted disabled:cursor-not-allowed"
1274
+ }
1275
+ },
1276
+ defaultVariants: {
1277
+ variant: "default"
1278
+ }
1279
+ }
1280
+ );
1281
+ var tabsListVariants = (0, import_class_variance_authority10.cva)("inline-flex items-center justify-center", {
1282
+ variants: {
1283
+ variant: {
1284
+ default: "border-b border-secondary"
1285
+ }
1286
+ },
1287
+ defaultVariants: {
1288
+ variant: "default"
1289
+ }
1290
+ });
1291
+ var TabsContext = React10.createContext(
1292
+ void 0
1293
+ );
1294
+ function useTabsContext() {
1295
+ const context = React10.useContext(TabsContext);
1296
+ if (!context) {
1297
+ throw new Error("Tabs components must be used within a Tabs provider");
1298
+ }
1299
+ return context;
1300
+ }
1301
+ var Tabs = React10.forwardRef((props, ref) => {
1302
+ const {
1303
+ className,
1304
+ value,
1305
+ onValueChange,
1306
+ variant = "default",
1307
+ children,
1308
+ ...restProps
1309
+ } = props;
1310
+ const handleValueChange = React10.useCallback(
1311
+ (newValue) => {
1312
+ onValueChange(newValue);
1313
+ },
1314
+ [onValueChange]
1315
+ );
1316
+ const contextValue = React10.useMemo(
1317
+ () => ({
1318
+ activeTab: value,
1319
+ setActiveTab: handleValueChange,
1320
+ variant
1321
+ }),
1322
+ [value, handleValueChange, variant]
1323
+ );
1324
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref, className: cn("w-full", className), ...restProps, children }) });
1325
+ });
1326
+ Tabs.displayName = "Tabs";
1327
+ var TabsList = React10.forwardRef(
1328
+ (props, ref) => {
1329
+ const { className, children, ...restProps } = props;
1330
+ const { variant } = useTabsContext();
1331
+ const tabsListClassName = React10.useMemo(
1332
+ () => cn(tabsListVariants({ variant }), className),
1333
+ [variant, className]
1334
+ );
1335
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1336
+ "div",
1337
+ {
1338
+ ref,
1339
+ role: "tablist",
1340
+ className: tabsListClassName,
1341
+ ...restProps,
1342
+ children
1343
+ }
1344
+ );
1345
+ }
1346
+ );
1347
+ TabsList.displayName = "TabsList";
1348
+ var getTabTypographyStyles = () => ({
1349
+ font: "var(--typography-label-sm-bold)"
1350
+ });
1351
+ var TabsTrigger = React10.forwardRef(
1352
+ (props, ref) => {
1353
+ const { className, value, disabled, style, children, ...restProps } = props;
1354
+ const { activeTab, setActiveTab, variant } = useTabsContext();
1355
+ if (!value) {
1356
+ throw new Error("TabsTrigger must have a value prop");
1357
+ }
1358
+ const isActive = activeTab === value;
1359
+ const tokenStyles = React10.useMemo(
1360
+ () => ({
1361
+ ...getTabTypographyStyles(),
1362
+ ...style
1363
+ }),
1364
+ [style]
1365
+ );
1366
+ const triggerClassName = React10.useMemo(
1367
+ () => cn(tabsVariants({ variant }), className),
1368
+ [variant, className]
1369
+ );
1370
+ const handleClick = React10.useCallback(() => {
1371
+ if (disabled) return;
1372
+ setActiveTab(value);
1373
+ }, [disabled, setActiveTab, value]);
1374
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1375
+ "button",
1376
+ {
1377
+ ref,
1378
+ role: "tab",
1379
+ "aria-selected": isActive,
1380
+ "aria-controls": `tabpanel-${value}`,
1381
+ "data-state": isActive ? "active" : "inactive",
1382
+ tabIndex: isActive ? 0 : -1,
1383
+ className: triggerClassName,
1384
+ style: tokenStyles,
1385
+ disabled,
1386
+ onClick: handleClick,
1387
+ ...restProps,
1388
+ children
1389
+ }
1390
+ );
1391
+ }
1392
+ );
1393
+ TabsTrigger.displayName = "TabsTrigger";
1394
+ var TabsContent = React10.forwardRef(
1395
+ (props, ref) => {
1396
+ const { className, value, children, ...restProps } = props;
1397
+ const { activeTab } = useTabsContext();
1398
+ if (!value) {
1399
+ throw new Error("TabsContent must have a value prop");
1400
+ }
1401
+ const isActive = activeTab === value;
1402
+ const contentClassName = React10.useMemo(
1403
+ () => cn("mt-6", className),
1404
+ [className]
1405
+ );
1406
+ if (!isActive) {
1407
+ return null;
1408
+ }
1409
+ return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
1410
+ "div",
1411
+ {
1412
+ ref,
1413
+ role: "tabpanel",
1414
+ id: `tabpanel-${value}`,
1415
+ "aria-labelledby": `tab-${value}`,
1416
+ tabIndex: 0,
1417
+ className: contentClassName,
1418
+ ...restProps,
1419
+ children
1420
+ }
1421
+ );
1422
+ }
1423
+ );
1424
+ TabsContent.displayName = "TabsContent";
1257
1425
  // Annotate the CommonJS export names for ESM import in node:
1258
1426
  0 && (module.exports = {
1259
1427
  Badge,
@@ -1272,6 +1440,10 @@ Badge.displayName = "Badge";
1272
1440
  SelectSeparator,
1273
1441
  SelectTrigger,
1274
1442
  SelectValue,
1443
+ Tabs,
1444
+ TabsContent,
1445
+ TabsList,
1446
+ TabsTrigger,
1275
1447
  Typography,
1276
1448
  Upload,
1277
1449
  badgeVariants,
@@ -1280,6 +1452,8 @@ Badge.displayName = "Badge";
1280
1452
  datePickerTriggerVariants,
1281
1453
  inputVariants,
1282
1454
  selectTriggerVariants,
1455
+ tabsListVariants,
1456
+ tabsVariants,
1283
1457
  typographyVariants,
1284
1458
  uploadVariants
1285
1459
  });
package/dist/index.mjs CHANGED
@@ -18,12 +18,12 @@ var buttonVariants = cva2(
18
18
  {
19
19
  variants: {
20
20
  variant: {
21
- default: "bg-canvas-primary text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
22
- outline: "bg-canvas-light text-dark border border-edge-strong shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
23
- destructive: "bg-canvas-error-strong text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2",
24
- "destructive-subtle": "bg-canvas-light text-error border border-edge-default shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-error focus-visible:ring-offset-2",
25
- ghost: "bg-canvas-light text-dark hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2",
26
- link: "bg-canvas-light text-dark underline underline-offset-4 hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2"
21
+ default: "bg-primary text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
22
+ outline: "bg-light text-dark border border-strong shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
23
+ destructive: "bg-error text-light shadow-sm hover:brightness-[60%] active:brightness-[80%] focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2",
24
+ "destructive-subtle": "bg-light text-error border border-secondary shadow-sm hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2",
25
+ ghost: "bg-light text-dark hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2",
26
+ link: "bg-light text-dark underline underline-offset-4 hover:brightness-[70%] active:brightness-[90%] focus-visible:ring-2 focus-visible:ring-interactive focus-visible:ring-offset-2"
27
27
  },
28
28
  size: {
29
29
  sm: "h-8 rounded-md px-2 py-2 min-w-[120px]",
@@ -156,10 +156,10 @@ import { cva as cva4 } from "class-variance-authority";
156
156
  import { Check, ChevronDown, ChevronUp } from "lucide-react";
157
157
  import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
158
158
  var selectTriggerVariants = cva4(
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"
159
+ "flex w-full items-center justify-between border bg-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"
160
160
  );
161
161
  var selectContentVariants = cva4(
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",
162
+ "relative z-50 max-h-60 min-w-32 overflow-hidden rounded-lg border border-secondary bg-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
163
163
  {
164
164
  variants: {
165
165
  position: {
@@ -189,7 +189,7 @@ var SelectTrigger = React3.forwardRef(({ className, children, style, ...props },
189
189
  ref,
190
190
  className: cn(
191
191
  selectTriggerVariants(),
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",
192
+ "border-secondary focus-visible:border-2 focus-visible:border-strong data-[state=open]:[&_svg]:rotate-180 data-[placeholder]:text-secondary h-10 py-2",
193
193
  className
194
194
  ),
195
195
  style: tokenStyles,
@@ -275,9 +275,9 @@ var SelectItem = React3.forwardRef(({ className, children, style, ...props }, re
275
275
  ref,
276
276
  className: cn(
277
277
  "relative flex w-full cursor-pointer select-none items-center rounded-md h-11 px-4 text-dark outline-none transition-colors",
278
- "focus:bg-canvas-gray focus:text-dark",
279
- "hover:bg-canvas-gray/50",
280
- "data-[state=checked]:bg-canvas-surface-info data-[state=checked]:text-dark",
278
+ "focus:bg-gray focus:text-dark",
279
+ "hover:bg-gray/50",
280
+ "data-[state=checked]:bg-info-subtle data-[state=checked]:text-dark",
281
281
  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
282
282
  className
283
283
  ),
@@ -285,7 +285,7 @@ var SelectItem = React3.forwardRef(({ className, children, style, ...props }, re
285
285
  ...props,
286
286
  children: [
287
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" }) })
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-strong" }) })
289
289
  ]
290
290
  }
291
291
  ));
@@ -294,7 +294,7 @@ var SelectSeparator = React3.forwardRef(({ className, ...props }, ref) => /* @__
294
294
  SelectPrimitive.Separator,
295
295
  {
296
296
  ref,
297
- className: cn("-mx-1 my-1 h-px bg-edge-default", className),
297
+ className: cn("-mx-1 my-1 h-px bg-secondary", className),
298
298
  ...props
299
299
  }
300
300
  ));
@@ -410,7 +410,7 @@ import { cva as cva5 } from "class-variance-authority";
410
410
  import { Calendar, ChevronLeft, ChevronRight } from "lucide-react";
411
411
  import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
412
412
  var datePickerTriggerVariants = cva5(
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"
413
+ "flex w-full items-center justify-between border bg-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"
414
414
  );
415
415
  var MONTHS = [
416
416
  "January",
@@ -526,7 +526,7 @@ var DatePicker = React5.forwardRef(
526
526
  ref,
527
527
  className: cn(
528
528
  datePickerTriggerVariants(),
529
- "border-edge-default focus-visible:border-2 focus-visible:border-edge-strong",
529
+ "border-secondary focus-visible:border-2 focus-visible:border-strong",
530
530
  className
531
531
  ),
532
532
  disabled,
@@ -560,7 +560,7 @@ var DatePicker = React5.forwardRef(
560
560
  /* @__PURE__ */ jsx4(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx4(
561
561
  PopoverPrimitive.Content,
562
562
  {
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",
563
+ className: "z-50 w-80 rounded-lg border border-secondary bg-light text-dark shadow-lg animate-in fade-in-0 zoom-in-95 duration-200",
564
564
  sideOffset: 4,
565
565
  align: "start",
566
566
  children: /* @__PURE__ */ jsxs4("div", { className: "p-4", children: [
@@ -569,7 +569,7 @@ var DatePicker = React5.forwardRef(
569
569
  "button",
570
570
  {
571
571
  onClick: () => handleMonthChange("prev"),
572
- className: "p-1 hover:bg-canvas-gray rounded transition-colors",
572
+ className: "p-1 hover:bg-gray rounded transition-colors",
573
573
  children: /* @__PURE__ */ jsx4(ChevronLeft, { className: "h-4 w-4" })
574
574
  }
575
575
  ),
@@ -582,7 +582,7 @@ var DatePicker = React5.forwardRef(
582
582
  "button",
583
583
  {
584
584
  onClick: () => handleMonthChange("next"),
585
- className: "p-1 hover:bg-canvas-gray rounded transition-colors",
585
+ className: "p-1 hover:bg-gray rounded transition-colors",
586
586
  children: /* @__PURE__ */ jsx4(ChevronRight, { className: "h-4 w-4" })
587
587
  }
588
588
  )
@@ -608,7 +608,7 @@ var DatePicker = React5.forwardRef(
608
608
  onClick: () => handleDateSelect(date),
609
609
  className: cn(
610
610
  "h-8 w-8 transition-colors relative",
611
- "hover:bg-canvas-gray focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1",
611
+ "hover:bg-gray focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1",
612
612
  isDateSelected(date) && !isToday(date) && "bg-dark text-light hover:bg-dark/90 rounded",
613
613
  isDateSelected(date) && isToday(date) && "bg-dark text-light hover:bg-dark/90 rounded-full",
614
614
  !isDateSelected(date) && "rounded-full",
@@ -641,11 +641,11 @@ var uploadVariants = cva6(
641
641
  {
642
642
  variants: {
643
643
  state: {
644
- default: "bg-canvas-light border-2 border-dashed border-edge-subtle hover:border-edge-interactive hover:bg-canvas-light cursor-pointer",
645
- dragOver: "bg-canvas-info border-2 border-solid border-edge-interactive cursor-pointer",
646
- error: "bg-canvas-light border-2 border-solid border-edge-default cursor-pointer",
647
- uploading: "bg-canvas-light border-2 border-solid border-edge-interactive cursor-default",
648
- success: "bg-canvas-light border-2 border-solid border-edge-success cursor-default"
644
+ default: "bg-light border-2 border-dashed border-subtle hover:border-interactive hover:bg-light cursor-pointer",
645
+ dragOver: "bg-info-subtle border-2 border-solid border-interactive cursor-pointer",
646
+ error: "bg-light border-2 border-solid border-secondary cursor-pointer",
647
+ uploading: "bg-light border-2 border-solid border-interactive cursor-default",
648
+ success: "bg-light border-2 border-solid border-success cursor-default"
649
649
  },
650
650
  disabled: {
651
651
  true: "opacity-50 cursor-not-allowed",
@@ -866,10 +866,10 @@ var Upload = React6.forwardRef(
866
866
  children: [
867
867
  /* @__PURE__ */ jsx5(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
868
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(
869
+ /* @__PURE__ */ jsx5("div", { className: "w-full bg-gray rounded-full h-2", children: /* @__PURE__ */ jsx5(
870
870
  "div",
871
871
  {
872
- className: "bg-canvas-primary h-2 rounded-full transition-all duration-300 ease-in-out",
872
+ className: "bg-primary h-2 rounded-full transition-all duration-300 ease-in-out",
873
873
  style: { width: `${currentProgress}%` }
874
874
  }
875
875
  ) }),
@@ -988,7 +988,7 @@ import { CheckIcon } from "lucide-react";
988
988
  import { cva as cva7 } from "class-variance-authority";
989
989
  import { jsx as jsx6 } from "react/jsx-runtime";
990
990
  var checkboxVariants = cva7(
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"
991
+ "peer size-4 shrink-0 rounded-[4px] border border-strong bg-light hover:bg-info-subtle transition-colors focus-visible:outline-none focus-visible:border-2 focus-visible:border-interactive disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-light [&_svg]:pointer-events-none [&_svg]:size-3 [&_svg]:shrink-0"
992
992
  );
993
993
  var Checkbox = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
994
994
  CheckboxPrimitive.Root,
@@ -1007,12 +1007,12 @@ import { cva as cva8 } from "class-variance-authority";
1007
1007
  import { X, Lock } from "lucide-react";
1008
1008
  import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
1009
1009
  var inputVariants = cva8(
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",
1010
+ "flex w-full border bg-light text-dark focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 disabled:border-secondary transition-colors rounded-md px-3 min-w-80 border-secondary focus-visible:border-2 focus-visible:border-strong placeholder:text-secondary read-only:bg-gray read-only:cursor-default read-only:border-transparent read-only:text-secondary read-only:focus-visible:border-transparent",
1011
1011
  {
1012
1012
  variants: {
1013
1013
  variant: {
1014
- input: "h-10",
1015
- textarea: "min-h-20 resize-none"
1014
+ input: "h-10 py-2",
1015
+ textarea: "min-h-20 resize-none pt-4 pb-2"
1016
1016
  }
1017
1017
  },
1018
1018
  defaultVariants: {
@@ -1151,12 +1151,12 @@ var badgeVariants = cva9(
1151
1151
  {
1152
1152
  variants: {
1153
1153
  variant: {
1154
- primary: "bg-canvas-primary text-light focus-visible:ring-border-interactive",
1155
- secondary: "bg-canvas-light text-dark border border-edge-strong focus-visible:ring-border-interactive",
1154
+ primary: "bg-primary text-light focus-visible:ring-border-interactive",
1155
+ secondary: "bg-light text-dark border border-strong focus-visible:ring-border-interactive",
1156
1156
  accent: "bg-blue-300 text-dark focus-visible:ring-border-interactive",
1157
- success: "bg-canvas-success text-success focus-visible:ring-success",
1158
- warning: "bg-canvas-warning text-warning focus-visible:ring-warning",
1159
- error: "bg-canvas-error text-error focus-visible:ring-border-error"
1157
+ success: "bg-success-subtle text-success focus-visible:ring-success",
1158
+ warning: "bg-warning-subtle text-warning focus-visible:ring-warning",
1159
+ error: "bg-error-subtle text-error focus-visible:ring-border-error"
1160
1160
  }
1161
1161
  },
1162
1162
  defaultVariants: {
@@ -1193,6 +1193,168 @@ var Badge = React9.forwardRef(
1193
1193
  }
1194
1194
  );
1195
1195
  Badge.displayName = "Badge";
1196
+
1197
+ // src/components/ui/tabs.tsx
1198
+ import * as React10 from "react";
1199
+ import { cva as cva10 } from "class-variance-authority";
1200
+ import { jsx as jsx9 } from "react/jsx-runtime";
1201
+ var tabsVariants = cva10(
1202
+ "inline-flex items-center justify-start whitespace-nowrap transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-interactive focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 px-3 py-2 h-10 w-[140px]",
1203
+ {
1204
+ variants: {
1205
+ variant: {
1206
+ default: "border-b-2 border-subtle hover:border-interactive data-[state=active]:border-interactive data-[state=active]:text-primary disabled:border-border-subtle disabled:text-muted disabled:cursor-not-allowed"
1207
+ }
1208
+ },
1209
+ defaultVariants: {
1210
+ variant: "default"
1211
+ }
1212
+ }
1213
+ );
1214
+ var tabsListVariants = cva10("inline-flex items-center justify-center", {
1215
+ variants: {
1216
+ variant: {
1217
+ default: "border-b border-secondary"
1218
+ }
1219
+ },
1220
+ defaultVariants: {
1221
+ variant: "default"
1222
+ }
1223
+ });
1224
+ var TabsContext = React10.createContext(
1225
+ void 0
1226
+ );
1227
+ function useTabsContext() {
1228
+ const context = React10.useContext(TabsContext);
1229
+ if (!context) {
1230
+ throw new Error("Tabs components must be used within a Tabs provider");
1231
+ }
1232
+ return context;
1233
+ }
1234
+ var Tabs = React10.forwardRef((props, ref) => {
1235
+ const {
1236
+ className,
1237
+ value,
1238
+ onValueChange,
1239
+ variant = "default",
1240
+ children,
1241
+ ...restProps
1242
+ } = props;
1243
+ const handleValueChange = React10.useCallback(
1244
+ (newValue) => {
1245
+ onValueChange(newValue);
1246
+ },
1247
+ [onValueChange]
1248
+ );
1249
+ const contextValue = React10.useMemo(
1250
+ () => ({
1251
+ activeTab: value,
1252
+ setActiveTab: handleValueChange,
1253
+ variant
1254
+ }),
1255
+ [value, handleValueChange, variant]
1256
+ );
1257
+ return /* @__PURE__ */ jsx9(TabsContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx9("div", { ref, className: cn("w-full", className), ...restProps, children }) });
1258
+ });
1259
+ Tabs.displayName = "Tabs";
1260
+ var TabsList = React10.forwardRef(
1261
+ (props, ref) => {
1262
+ const { className, children, ...restProps } = props;
1263
+ const { variant } = useTabsContext();
1264
+ const tabsListClassName = React10.useMemo(
1265
+ () => cn(tabsListVariants({ variant }), className),
1266
+ [variant, className]
1267
+ );
1268
+ return /* @__PURE__ */ jsx9(
1269
+ "div",
1270
+ {
1271
+ ref,
1272
+ role: "tablist",
1273
+ className: tabsListClassName,
1274
+ ...restProps,
1275
+ children
1276
+ }
1277
+ );
1278
+ }
1279
+ );
1280
+ TabsList.displayName = "TabsList";
1281
+ var getTabTypographyStyles = () => ({
1282
+ font: "var(--typography-label-sm-bold)"
1283
+ });
1284
+ var TabsTrigger = React10.forwardRef(
1285
+ (props, ref) => {
1286
+ const { className, value, disabled, style, children, ...restProps } = props;
1287
+ const { activeTab, setActiveTab, variant } = useTabsContext();
1288
+ if (!value) {
1289
+ throw new Error("TabsTrigger must have a value prop");
1290
+ }
1291
+ const isActive = activeTab === value;
1292
+ const tokenStyles = React10.useMemo(
1293
+ () => ({
1294
+ ...getTabTypographyStyles(),
1295
+ ...style
1296
+ }),
1297
+ [style]
1298
+ );
1299
+ const triggerClassName = React10.useMemo(
1300
+ () => cn(tabsVariants({ variant }), className),
1301
+ [variant, className]
1302
+ );
1303
+ const handleClick = React10.useCallback(() => {
1304
+ if (disabled) return;
1305
+ setActiveTab(value);
1306
+ }, [disabled, setActiveTab, value]);
1307
+ return /* @__PURE__ */ jsx9(
1308
+ "button",
1309
+ {
1310
+ ref,
1311
+ role: "tab",
1312
+ "aria-selected": isActive,
1313
+ "aria-controls": `tabpanel-${value}`,
1314
+ "data-state": isActive ? "active" : "inactive",
1315
+ tabIndex: isActive ? 0 : -1,
1316
+ className: triggerClassName,
1317
+ style: tokenStyles,
1318
+ disabled,
1319
+ onClick: handleClick,
1320
+ ...restProps,
1321
+ children
1322
+ }
1323
+ );
1324
+ }
1325
+ );
1326
+ TabsTrigger.displayName = "TabsTrigger";
1327
+ var TabsContent = React10.forwardRef(
1328
+ (props, ref) => {
1329
+ const { className, value, children, ...restProps } = props;
1330
+ const { activeTab } = useTabsContext();
1331
+ if (!value) {
1332
+ throw new Error("TabsContent must have a value prop");
1333
+ }
1334
+ const isActive = activeTab === value;
1335
+ const contentClassName = React10.useMemo(
1336
+ () => cn("mt-6", className),
1337
+ [className]
1338
+ );
1339
+ if (!isActive) {
1340
+ return null;
1341
+ }
1342
+ return /* @__PURE__ */ jsx9(
1343
+ "div",
1344
+ {
1345
+ ref,
1346
+ role: "tabpanel",
1347
+ id: `tabpanel-${value}`,
1348
+ "aria-labelledby": `tab-${value}`,
1349
+ tabIndex: 0,
1350
+ className: contentClassName,
1351
+ ...restProps,
1352
+ children
1353
+ }
1354
+ );
1355
+ }
1356
+ );
1357
+ TabsContent.displayName = "TabsContent";
1196
1358
  export {
1197
1359
  Badge,
1198
1360
  Button,
@@ -1210,6 +1372,10 @@ export {
1210
1372
  SelectSeparator,
1211
1373
  SelectTrigger,
1212
1374
  SelectValue,
1375
+ Tabs,
1376
+ TabsContent,
1377
+ TabsList,
1378
+ TabsTrigger,
1213
1379
  Typography,
1214
1380
  Upload,
1215
1381
  badgeVariants,
@@ -1218,6 +1384,8 @@ export {
1218
1384
  datePickerTriggerVariants,
1219
1385
  inputVariants,
1220
1386
  selectTriggerVariants,
1387
+ tabsListVariants,
1388
+ tabsVariants,
1221
1389
  typographyVariants,
1222
1390
  uploadVariants
1223
1391
  };
package/dist/tokens.css CHANGED
@@ -50,34 +50,22 @@
50
50
  --color-yellow-700: #a16207;
51
51
  --color-yellow-800: #78450a;
52
52
  --color-yellow-900: #451a03;
53
- --color-canvas-light: #ffffff;
54
- --color-canvas-gray: #f5f5f5;
55
- --color-canvas-dark: #161616;
56
- --color-canvas-primary: #2e69ff;
57
- --color-canvas-info: #f0f5ff;
58
- --color-canvas-success: #ebf9f4;
59
- --color-canvas-error: #fcf2f2;
60
- --color-canvas-error-strong: #c62828;
61
- --color-canvas-warning: #fffbeb;
62
- --color-edge-default: #666666;
63
- --color-edge-subtle: #dedede;
64
- --color-edge-strong: #161616;
65
- --color-edge-interactive: #2e69ff;
66
- --color-edge-error: #c62828;
67
- --color-edge-warning: #a16207;
68
- --color-dark: #161616;
69
53
  --color-light: #ffffff;
54
+ --color-gray: #f5f5f5;
55
+ --color-dark: #161616;
56
+ --color-subtle: #dedede;
70
57
  --color-secondary: #666666;
58
+ --color-strong: #161616;
59
+ --color-primary: #2e69ff;
60
+ --color-interactive: #2e69ff;
71
61
  --color-info: #004dcc;
72
- --color-link: #2e69ff;
62
+ --color-info-subtle: #f0f5ff;
73
63
  --color-success: #0c7953;
64
+ --color-success-subtle: #ebf9f4;
74
65
  --color-error: #c62828;
66
+ --color-error-subtle: #fcf2f2;
75
67
  --color-warning: #a16207;
76
- --color-icon-light: #ffffff;
77
- --color-icon-dark: #161616;
78
- --color-icon-secondary: #666666;
79
- --color-icon-error: #c62828;
80
- --color-icon-warning: #a16207;
68
+ --color-warning-subtle: #fffbeb;
81
69
  --typography-display-xl: 400 105px/126px Inter;
82
70
  --typography-display-lg: 400 94px/112.8px Inter;
83
71
  --typography-display-md: 400 66px/79.2px Inter;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@northslopetech/altitude-ui",
3
- "version": "1.10.0",
3
+ "version": "2.0.2",
4
4
  "private": false,
5
5
  "description": "React UI components for the Altitude design system",
6
6
  "author": "Northslope",
@@ -43,6 +43,7 @@
43
43
  },
44
44
  "devDependencies": {
45
45
  "@types/node": "^22.15.3",
46
+ "@types/prop-types": "^15.7.15",
46
47
  "@types/react": "19.1.0",
47
48
  "@types/react-dom": "19.1.1",
48
49
  "eslint": "^9.31.0",
@@ -63,6 +64,7 @@
63
64
  "class-variance-authority": "^0.7.1",
64
65
  "clsx": "^2.1.1",
65
66
  "lucide-react": "^0.536.0",
67
+ "prop-types": "^15.8.1",
66
68
  "tailwind-merge": "^2.5.4"
67
69
  },
68
70
  "peerDependencies": {