@northslopetech/altitude-ui 1.7.0 → 1.9.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 +16 -22
  2. package/dist/index.d.ts +16 -22
  3. package/dist/index.js +138 -102
  4. package/dist/index.mjs +127 -91
  5. package/package.json +3 -3
package/dist/index.d.mts CHANGED
@@ -5,15 +5,9 @@ import { VariantProps } from 'class-variance-authority';
5
5
  import * as SelectPrimitive from '@radix-ui/react-select';
6
6
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
7
7
 
8
- declare enum ButtonSize {
9
- Small = "sm",
10
- Default = "default",
11
- Large = "lg",
12
- Icon = "icon"
13
- }
14
8
  declare const buttonVariants: (props?: ({
15
9
  variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
16
- size?: ButtonSize | null | undefined;
10
+ size?: "default" | "sm" | "lg" | "icon" | null | undefined;
17
11
  } & class_variance_authority_types.ClassProp) | undefined) => string;
18
12
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
19
13
  asChild?: boolean;
@@ -72,19 +66,6 @@ interface DatePickerProps {
72
66
  }
73
67
  declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
74
68
 
75
- declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
76
- interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
77
- className?: string;
78
- }
79
- declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
80
-
81
- declare enum UploadState {
82
- Default = "default",
83
- DragOver = "dragOver",
84
- Error = "error",
85
- Uploading = "uploading",
86
- Success = "success"
87
- }
88
69
  declare const uploadVariants: (props?: ({
89
70
  state?: "default" | "error" | "dragOver" | "uploading" | "success" | null | undefined;
90
71
  disabled?: boolean | null | undefined;
@@ -99,13 +80,19 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onErro
99
80
  maxFileSize?: number;
100
81
  acceptedFileTypes?: string[];
101
82
  disabled?: boolean;
102
- state?: UploadState;
83
+ state?: "default" | "dragOver" | "error" | "uploading" | "success";
103
84
  progress?: number;
104
85
  errorMessage?: string;
105
86
  loading?: boolean;
106
87
  }
107
88
  declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
108
89
 
90
+ declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
91
+ interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
92
+ className?: string;
93
+ }
94
+ declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
95
+
109
96
  declare const inputVariants: (props?: ({
110
97
  variant?: "textarea" | "input" | null | undefined;
111
98
  } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -131,4 +118,11 @@ interface InputComponent {
131
118
  }
132
119
  declare const TypedInput: InputComponent;
133
120
 
134
- export { Button, type ButtonProps, ButtonSize, 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, UploadState, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, typographyVariants, uploadVariants };
121
+ declare const badgeVariants: (props?: ({
122
+ variant?: "error" | "success" | "primary" | "secondary" | "accent" | "warning" | null | undefined;
123
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
124
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
125
+ }
126
+ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
127
+
128
+ 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 };
package/dist/index.d.ts CHANGED
@@ -5,15 +5,9 @@ import { VariantProps } from 'class-variance-authority';
5
5
  import * as SelectPrimitive from '@radix-ui/react-select';
6
6
  import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
7
7
 
8
- declare enum ButtonSize {
9
- Small = "sm",
10
- Default = "default",
11
- Large = "lg",
12
- Icon = "icon"
13
- }
14
8
  declare const buttonVariants: (props?: ({
15
9
  variant?: "default" | "outline" | "destructive" | "destructive-subtle" | "ghost" | "link" | null | undefined;
16
- size?: ButtonSize | null | undefined;
10
+ size?: "default" | "sm" | "lg" | "icon" | null | undefined;
17
11
  } & class_variance_authority_types.ClassProp) | undefined) => string;
18
12
  interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
19
13
  asChild?: boolean;
@@ -72,19 +66,6 @@ interface DatePickerProps {
72
66
  }
73
67
  declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
74
68
 
75
- declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
76
- interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
77
- className?: string;
78
- }
79
- declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
80
-
81
- declare enum UploadState {
82
- Default = "default",
83
- DragOver = "dragOver",
84
- Error = "error",
85
- Uploading = "uploading",
86
- Success = "success"
87
- }
88
69
  declare const uploadVariants: (props?: ({
89
70
  state?: "default" | "error" | "dragOver" | "uploading" | "success" | null | undefined;
90
71
  disabled?: boolean | null | undefined;
@@ -99,13 +80,19 @@ interface UploadProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onErro
99
80
  maxFileSize?: number;
100
81
  acceptedFileTypes?: string[];
101
82
  disabled?: boolean;
102
- state?: UploadState;
83
+ state?: "default" | "dragOver" | "error" | "uploading" | "success";
103
84
  progress?: number;
104
85
  errorMessage?: string;
105
86
  loading?: boolean;
106
87
  }
107
88
  declare const Upload: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLDivElement>>;
108
89
 
90
+ declare const checkboxVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
91
+ interface CheckboxProps extends React.ComponentProps<typeof CheckboxPrimitive.Root> {
92
+ className?: string;
93
+ }
94
+ declare const Checkbox: React.ForwardRefExoticComponent<Omit<CheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
95
+
109
96
  declare const inputVariants: (props?: ({
110
97
  variant?: "textarea" | "input" | null | undefined;
111
98
  } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -131,4 +118,11 @@ interface InputComponent {
131
118
  }
132
119
  declare const TypedInput: InputComponent;
133
120
 
134
- export { Button, type ButtonProps, ButtonSize, 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, UploadState, buttonVariants, checkboxVariants, datePickerTriggerVariants, inputVariants, selectTriggerVariants, typographyVariants, uploadVariants };
121
+ declare const badgeVariants: (props?: ({
122
+ variant?: "error" | "success" | "primary" | "secondary" | "accent" | "warning" | null | undefined;
123
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
124
+ interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
125
+ }
126
+ declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
127
+
128
+ 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 };
package/dist/index.js CHANGED
@@ -30,8 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
30
30
  // src/index.ts
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
+ Badge: () => Badge,
33
34
  Button: () => Button,
34
- ButtonSize: () => ButtonSize,
35
35
  Checkbox: () => Checkbox,
36
36
  DatePicker: () => DatePicker,
37
37
  FormField: () => FormField,
@@ -48,7 +48,7 @@ __export(index_exports, {
48
48
  SelectValue: () => SelectValue,
49
49
  Typography: () => Typography,
50
50
  Upload: () => Upload,
51
- UploadState: () => UploadState,
51
+ badgeVariants: () => badgeVariants,
52
52
  buttonVariants: () => buttonVariants,
53
53
  checkboxVariants: () => checkboxVariants,
54
54
  datePickerTriggerVariants: () => datePickerTriggerVariants,
@@ -74,13 +74,6 @@ function cn(...inputs) {
74
74
 
75
75
  // src/components/ui/button.tsx
76
76
  var import_jsx_runtime = require("react/jsx-runtime");
77
- var ButtonSize = /* @__PURE__ */ ((ButtonSize2) => {
78
- ButtonSize2["Small"] = "sm";
79
- ButtonSize2["Default"] = "default";
80
- ButtonSize2["Large"] = "lg";
81
- ButtonSize2["Icon"] = "icon";
82
- return ButtonSize2;
83
- })(ButtonSize || {});
84
77
  var buttonVariants = (0, import_class_variance_authority2.cva)(
85
78
  "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",
86
79
  {
@@ -94,27 +87,27 @@ var buttonVariants = (0, import_class_variance_authority2.cva)(
94
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"
95
88
  },
96
89
  size: {
97
- ["sm" /* Small */]: "h-8 rounded-md px-2 py-2 min-w-[120px]",
98
- ["default" /* Default */]: "h-10 rounded-md px-3 py-2 min-w-[125px]",
99
- ["lg" /* Large */]: "h-12 rounded-lg px-4 py-2 min-w-[141px]",
100
- ["icon" /* Icon */]: "h-10 w-10 rounded-md"
90
+ sm: "h-8 rounded-md px-2 py-2 min-w-[120px]",
91
+ default: "h-10 rounded-md px-3 py-2 min-w-[125px]",
92
+ lg: "h-12 rounded-lg px-4 py-2 min-w-[141px]",
93
+ icon: "h-10 w-10 rounded-md"
101
94
  }
102
95
  },
103
96
  compoundVariants: [],
104
97
  defaultVariants: {
105
98
  variant: "default",
106
- size: "default" /* Default */
99
+ size: "default"
107
100
  }
108
101
  }
109
102
  );
110
103
  function getButtonTypographyStyles(size) {
111
104
  switch (size) {
112
- case "sm" /* Small */:
105
+ case "sm":
113
106
  return { font: "var(--typography-label-sm-bold)" };
114
- case "lg" /* Large */:
107
+ case "lg":
115
108
  return { font: "var(--typography-label-lg-bold)" };
116
- case "icon" /* Icon */:
117
- case "default" /* Default */:
109
+ case "icon":
110
+ case "default":
118
111
  default:
119
112
  return { font: "var(--typography-label-md-bold)" };
120
113
  }
@@ -684,40 +677,12 @@ var DatePicker = React5.forwardRef(
684
677
  );
685
678
  DatePicker.displayName = "DatePicker";
686
679
 
687
- // src/components/ui/checkbox.tsx
680
+ // src/components/ui/upload.tsx
688
681
  var React6 = __toESM(require("react"));
689
- var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
690
- var import_lucide_react3 = require("lucide-react");
691
682
  var import_class_variance_authority6 = require("class-variance-authority");
692
683
  var import_jsx_runtime6 = require("react/jsx-runtime");
693
- var checkboxVariants = (0, import_class_variance_authority6.cva)(
694
- "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"
695
- );
696
- var Checkbox = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
697
- CheckboxPrimitive.Root,
698
- {
699
- ref,
700
- className: cn(checkboxVariants(), className),
701
- ...props,
702
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.CheckIcon, { className: "size-3" }) })
703
- }
704
- ));
705
- Checkbox.displayName = CheckboxPrimitive.Root.displayName;
706
-
707
- // src/components/ui/upload.tsx
708
- var React7 = __toESM(require("react"));
709
- var import_class_variance_authority7 = require("class-variance-authority");
710
- var import_jsx_runtime7 = require("react/jsx-runtime");
711
- var UploadState = /* @__PURE__ */ ((UploadState2) => {
712
- UploadState2["Default"] = "default";
713
- UploadState2["DragOver"] = "dragOver";
714
- UploadState2["Error"] = "error";
715
- UploadState2["Uploading"] = "uploading";
716
- UploadState2["Success"] = "success";
717
- return UploadState2;
718
- })(UploadState || {});
719
684
  var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
720
- var uploadVariants = (0, import_class_variance_authority7.cva)(
685
+ var uploadVariants = (0, import_class_variance_authority6.cva)(
721
686
  "relative flex flex-col items-center justify-center rounded-lg transition-all duration-200 ease-in-out overflow-hidden",
722
687
  {
723
688
  variants: {
@@ -734,12 +699,12 @@ var uploadVariants = (0, import_class_variance_authority7.cva)(
734
699
  }
735
700
  },
736
701
  defaultVariants: {
737
- state: "default" /* Default */,
702
+ state: "default",
738
703
  disabled: false
739
704
  }
740
705
  }
741
706
  );
742
- var Upload = React7.forwardRef(
707
+ var Upload = React6.forwardRef(
743
708
  ({
744
709
  className,
745
710
  endpoint,
@@ -751,29 +716,29 @@ var Upload = React7.forwardRef(
751
716
  maxFileSize = DEFAULT_MAX_FILE_SIZE,
752
717
  acceptedFileTypes = ["application/pdf"],
753
718
  disabled = false,
754
- state = "default" /* Default */,
719
+ state = "default",
755
720
  progress = 0,
756
721
  errorMessage = "Helper text why file failed to upload",
757
722
  loading = false,
758
723
  ...props
759
724
  }, ref) => {
760
- const [currentState, setCurrentState] = React7.useState(state);
761
- const [currentProgress, setCurrentProgress] = React7.useState(progress);
762
- const fileInputRef = React7.useRef(null);
763
- const [selectedFiles, setSelectedFiles] = React7.useState([]);
764
- React7.useEffect(() => {
725
+ const [currentState, setCurrentState] = React6.useState(state);
726
+ const [currentProgress, setCurrentProgress] = React6.useState(progress);
727
+ const fileInputRef = React6.useRef(null);
728
+ const [selectedFiles, setSelectedFiles] = React6.useState([]);
729
+ React6.useEffect(() => {
765
730
  if (loading) {
766
- setCurrentState("uploading" /* Uploading */);
731
+ setCurrentState("uploading");
767
732
  } else {
768
733
  setCurrentState(state);
769
734
  }
770
735
  }, [state, loading]);
771
- React7.useEffect(() => {
736
+ React6.useEffect(() => {
772
737
  if (loading || progress !== void 0) {
773
738
  setCurrentProgress(progress);
774
739
  }
775
740
  }, [progress, loading]);
776
- const uploadFile = React7.useCallback(
741
+ const uploadFile = React6.useCallback(
777
742
  (file) => {
778
743
  if (!endpoint) {
779
744
  console.warn("Upload endpoint not provided");
@@ -781,7 +746,7 @@ var Upload = React7.forwardRef(
781
746
  }
782
747
  if (!file) return;
783
748
  if (!loading) {
784
- setCurrentState("uploading" /* Uploading */);
749
+ setCurrentState("uploading");
785
750
  }
786
751
  setCurrentProgress(0);
787
752
  const xhr = new XMLHttpRequest();
@@ -798,13 +763,13 @@ var Upload = React7.forwardRef(
798
763
  xhr.onload = () => {
799
764
  if (xhr.status < 200 || xhr.status >= 300) {
800
765
  if (!loading) {
801
- setCurrentState("error" /* Error */);
766
+ setCurrentState("error");
802
767
  }
803
768
  onUploadError?.(`Upload failed: ${xhr.statusText}`);
804
769
  return;
805
770
  }
806
771
  if (!loading) {
807
- setCurrentState("success" /* Success */);
772
+ setCurrentState("success");
808
773
  setCurrentProgress(100);
809
774
  }
810
775
  try {
@@ -817,7 +782,7 @@ var Upload = React7.forwardRef(
817
782
  };
818
783
  xhr.onerror = () => {
819
784
  if (!loading) {
820
- setCurrentState("error" /* Error */);
785
+ setCurrentState("error");
821
786
  }
822
787
  onUploadError?.("Network error occurred during upload");
823
788
  };
@@ -865,7 +830,7 @@ var Upload = React7.forwardRef(
865
830
  if (!file) return;
866
831
  const error = validateFile(file);
867
832
  if (error) {
868
- setCurrentState("error" /* Error */);
833
+ setCurrentState("error");
869
834
  onUploadError?.(error);
870
835
  return;
871
836
  }
@@ -878,15 +843,14 @@ var Upload = React7.forwardRef(
878
843
  e.preventDefault();
879
844
  e.stopPropagation();
880
845
  if (disabled) return;
881
- if (currentState === "error" /* Error */ || currentState === "uploading" /* Uploading */)
882
- return;
883
- setCurrentState("dragOver" /* DragOver */);
846
+ if (currentState === "error" || currentState === "uploading") return;
847
+ setCurrentState("dragOver");
884
848
  };
885
849
  const handleDragLeave = (e) => {
886
850
  e.preventDefault();
887
851
  e.stopPropagation();
888
852
  if (disabled) return;
889
- setCurrentState("default" /* Default */);
853
+ setCurrentState("default");
890
854
  };
891
855
  const handleDragOver = (e) => {
892
856
  e.preventDefault();
@@ -896,7 +860,7 @@ var Upload = React7.forwardRef(
896
860
  e.preventDefault();
897
861
  e.stopPropagation();
898
862
  if (disabled) return;
899
- setCurrentState("default" /* Default */);
863
+ setCurrentState("default");
900
864
  const files = e.dataTransfer?.files;
901
865
  handleFileSelect(files);
902
866
  };
@@ -909,28 +873,28 @@ var Upload = React7.forwardRef(
909
873
  };
910
874
  const handleTryAgain = (e) => {
911
875
  e.stopPropagation();
912
- setCurrentState("default" /* Default */);
876
+ setCurrentState("default");
913
877
  setSelectedFiles([]);
914
878
  fileInputRef.current?.click();
915
879
  };
916
880
  const renderContent = () => {
917
881
  switch (currentState) {
918
- case "error" /* Error */:
919
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
882
+ case "error":
883
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
920
884
  "div",
921
885
  {
922
886
  className: "flex flex-col items-center text-center max-w-[289px]",
923
887
  style: { gap: "32px" },
924
888
  children: [
925
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-4", children: [
926
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typography, { variant: "heading-sm", children: "Upload fail" }),
927
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
889
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-4", children: [
890
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { variant: "heading-sm", children: "Upload fail" }),
891
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
928
892
  ] }),
929
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
893
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
930
894
  Button,
931
895
  {
932
896
  variant: "destructive",
933
- size: "lg" /* Large */,
897
+ size: "lg",
934
898
  onClick: handleTryAgain,
935
899
  className: "h-12",
936
900
  children: "Try again"
@@ -939,23 +903,23 @@ var Upload = React7.forwardRef(
939
903
  ]
940
904
  }
941
905
  );
942
- case "uploading" /* Uploading */:
943
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
906
+ case "uploading":
907
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
944
908
  "div",
945
909
  {
946
910
  className: "flex flex-col items-center text-center max-w-[289px]",
947
911
  style: { gap: "32px" },
948
912
  children: [
949
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
950
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full max-w-[720px] space-y-2", children: [
951
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "w-full bg-canvas-gray rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
913
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
914
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full max-w-[720px] space-y-2", children: [
915
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "w-full bg-canvas-gray rounded-full h-2", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
952
916
  "div",
953
917
  {
954
918
  className: "bg-canvas-primary h-2 rounded-full transition-all duration-300 ease-in-out",
955
919
  style: { width: `${currentProgress}%` }
956
920
  }
957
921
  ) }),
958
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
922
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
959
923
  Typography,
960
924
  {
961
925
  variant: "body-sm",
@@ -970,34 +934,34 @@ var Upload = React7.forwardRef(
970
934
  ]
971
935
  }
972
936
  );
973
- case "success" /* Success */:
974
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
937
+ case "success":
938
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
975
939
  "div",
976
940
  {
977
941
  className: "flex flex-col items-center text-center max-w-[289px]",
978
942
  style: { gap: "32px" },
979
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-4", children: [
980
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
981
- selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typography, { variant: "body-sm", children: file.name }, index)) })
943
+ children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-4", children: [
944
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
945
+ selectedFiles.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { variant: "body-sm", children: file.name }, index)) })
982
946
  ] })
983
947
  }
984
948
  );
985
949
  default:
986
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
950
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
987
951
  "div",
988
952
  {
989
953
  className: "flex flex-col items-center text-center max-w-[289px]",
990
954
  style: { gap: "32px" },
991
955
  children: [
992
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "space-y-4", children: [
993
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
994
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
956
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "space-y-4", children: [
957
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
958
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
995
959
  ] }),
996
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
960
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
997
961
  Button,
998
962
  {
999
963
  variant: "default",
1000
- size: "lg" /* Large */,
964
+ size: "lg",
1001
965
  onClick: (e) => {
1002
966
  e.stopPropagation();
1003
967
  fileInputRef.current?.click();
@@ -1007,10 +971,10 @@ var Upload = React7.forwardRef(
1007
971
  children: "Choose files"
1008
972
  }
1009
973
  ),
1010
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
974
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Typography, { variant: "body-sm", className: "text-secondary", children: [
1011
975
  "Supported file: ",
1012
976
  getFileTypeDisplay(),
1013
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("br", {}),
977
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", {}),
1014
978
  "Max: ",
1015
979
  Math.round(maxFileSize / 1024 / 1024),
1016
980
  " MB each"
@@ -1020,7 +984,7 @@ var Upload = React7.forwardRef(
1020
984
  );
1021
985
  }
1022
986
  };
1023
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
987
+ return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
1024
988
  "div",
1025
989
  {
1026
990
  ref,
@@ -1032,7 +996,7 @@ var Upload = React7.forwardRef(
1032
996
  onDragLeave: !disabled ? handleDragLeave : void 0,
1033
997
  onDragOver: !disabled ? handleDragOver : void 0,
1034
998
  onDrop: !disabled ? handleDrop : void 0,
1035
- onClick: disabled || currentState === "uploading" /* Uploading */ ? void 0 : handleClick,
999
+ onClick: disabled || currentState === "uploading" ? void 0 : handleClick,
1036
1000
  style: {
1037
1001
  width: "960px",
1038
1002
  height: "540px",
@@ -1040,11 +1004,11 @@ var Upload = React7.forwardRef(
1040
1004
  },
1041
1005
  role: "button",
1042
1006
  tabIndex: disabled ? -1 : 0,
1043
- "aria-label": currentState === "uploading" /* Uploading */ ? "Uploading files" : "Upload files",
1007
+ "aria-label": currentState === "uploading" ? "Uploading files" : "Upload files",
1044
1008
  "aria-disabled": disabled,
1045
1009
  ...props,
1046
1010
  children: [
1047
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1011
+ /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
1048
1012
  "input",
1049
1013
  {
1050
1014
  ref: fileInputRef,
@@ -1063,6 +1027,26 @@ var Upload = React7.forwardRef(
1063
1027
  );
1064
1028
  Upload.displayName = "Upload";
1065
1029
 
1030
+ // src/components/ui/checkbox.tsx
1031
+ var React7 = __toESM(require("react"));
1032
+ var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"));
1033
+ var import_lucide_react3 = require("lucide-react");
1034
+ var import_class_variance_authority7 = require("class-variance-authority");
1035
+ var import_jsx_runtime7 = require("react/jsx-runtime");
1036
+ var checkboxVariants = (0, import_class_variance_authority7.cva)(
1037
+ "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"
1038
+ );
1039
+ var Checkbox = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
1040
+ CheckboxPrimitive.Root,
1041
+ {
1042
+ ref,
1043
+ className: cn(checkboxVariants(), className),
1044
+ ...props,
1045
+ children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lucide_react3.CheckIcon, { className: "size-3" }) })
1046
+ }
1047
+ ));
1048
+ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
1049
+
1066
1050
  // src/components/ui/input.tsx
1067
1051
  var React8 = __toESM(require("react"));
1068
1052
  var import_class_variance_authority8 = require("class-variance-authority");
@@ -1203,10 +1187,62 @@ var Input = React8.forwardRef(
1203
1187
  );
1204
1188
  Input.displayName = "Input";
1205
1189
  var TypedInput = Input;
1190
+
1191
+ // src/components/ui/badge.tsx
1192
+ var React9 = __toESM(require("react"));
1193
+ var import_class_variance_authority9 = require("class-variance-authority");
1194
+ var import_jsx_runtime9 = require("react/jsx-runtime");
1195
+ var badgeVariants = (0, import_class_variance_authority9.cva)(
1196
+ "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",
1197
+ {
1198
+ variants: {
1199
+ variant: {
1200
+ primary: "bg-canvas-primary text-light focus-visible:ring-border-interactive",
1201
+ secondary: "bg-canvas-light text-dark border border-edge-strong focus-visible:ring-border-interactive",
1202
+ accent: "bg-blue-300 text-dark focus-visible:ring-border-interactive",
1203
+ success: "bg-canvas-success text-success focus-visible:ring-success",
1204
+ warning: "bg-canvas-warning text-warning focus-visible:ring-warning",
1205
+ error: "bg-canvas-error text-error focus-visible:ring-border-error"
1206
+ }
1207
+ },
1208
+ defaultVariants: {
1209
+ variant: "primary"
1210
+ }
1211
+ }
1212
+ );
1213
+ function getBadgeTypographyStyles() {
1214
+ return { font: "var(--typography-label-sm-bold)" };
1215
+ }
1216
+ var Badge = React9.forwardRef(
1217
+ ({ className, variant, style, ...props }, ref) => {
1218
+ if (!variant) {
1219
+ return null;
1220
+ }
1221
+ const typographyStyles = getBadgeTypographyStyles();
1222
+ const tokenStyles = {
1223
+ ...typographyStyles,
1224
+ ...style
1225
+ };
1226
+ return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
1227
+ "span",
1228
+ {
1229
+ className: cn(
1230
+ badgeVariants({ variant }),
1231
+ "rounded-full px-3 py-1",
1232
+ className
1233
+ ),
1234
+ style: tokenStyles,
1235
+ ref,
1236
+ ...props
1237
+ }
1238
+ );
1239
+ }
1240
+ );
1241
+ Badge.displayName = "Badge";
1206
1242
  // Annotate the CommonJS export names for ESM import in node:
1207
1243
  0 && (module.exports = {
1244
+ Badge,
1208
1245
  Button,
1209
- ButtonSize,
1210
1246
  Checkbox,
1211
1247
  DatePicker,
1212
1248
  FormField,
@@ -1223,7 +1259,7 @@ var TypedInput = Input;
1223
1259
  SelectValue,
1224
1260
  Typography,
1225
1261
  Upload,
1226
- UploadState,
1262
+ badgeVariants,
1227
1263
  buttonVariants,
1228
1264
  checkboxVariants,
1229
1265
  datePickerTriggerVariants,
package/dist/index.mjs CHANGED
@@ -13,13 +13,6 @@ function cn(...inputs) {
13
13
 
14
14
  // src/components/ui/button.tsx
15
15
  import { jsx } from "react/jsx-runtime";
16
- var ButtonSize = /* @__PURE__ */ ((ButtonSize2) => {
17
- ButtonSize2["Small"] = "sm";
18
- ButtonSize2["Default"] = "default";
19
- ButtonSize2["Large"] = "lg";
20
- ButtonSize2["Icon"] = "icon";
21
- return ButtonSize2;
22
- })(ButtonSize || {});
23
16
  var buttonVariants = cva2(
24
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",
25
18
  {
@@ -33,27 +26,27 @@ var buttonVariants = cva2(
33
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"
34
27
  },
35
28
  size: {
36
- ["sm" /* Small */]: "h-8 rounded-md px-2 py-2 min-w-[120px]",
37
- ["default" /* Default */]: "h-10 rounded-md px-3 py-2 min-w-[125px]",
38
- ["lg" /* Large */]: "h-12 rounded-lg px-4 py-2 min-w-[141px]",
39
- ["icon" /* Icon */]: "h-10 w-10 rounded-md"
29
+ sm: "h-8 rounded-md px-2 py-2 min-w-[120px]",
30
+ default: "h-10 rounded-md px-3 py-2 min-w-[125px]",
31
+ lg: "h-12 rounded-lg px-4 py-2 min-w-[141px]",
32
+ icon: "h-10 w-10 rounded-md"
40
33
  }
41
34
  },
42
35
  compoundVariants: [],
43
36
  defaultVariants: {
44
37
  variant: "default",
45
- size: "default" /* Default */
38
+ size: "default"
46
39
  }
47
40
  }
48
41
  );
49
42
  function getButtonTypographyStyles(size) {
50
43
  switch (size) {
51
- case "sm" /* Small */:
44
+ case "sm":
52
45
  return { font: "var(--typography-label-sm-bold)" };
53
- case "lg" /* Large */:
46
+ case "lg":
54
47
  return { font: "var(--typography-label-lg-bold)" };
55
- case "icon" /* Icon */:
56
- case "default" /* Default */:
48
+ case "icon":
49
+ case "default":
57
50
  default:
58
51
  return { font: "var(--typography-label-md-bold)" };
59
52
  }
@@ -623,40 +616,12 @@ var DatePicker = React5.forwardRef(
623
616
  );
624
617
  DatePicker.displayName = "DatePicker";
625
618
 
626
- // src/components/ui/checkbox.tsx
619
+ // src/components/ui/upload.tsx
627
620
  import * as React6 from "react";
628
- import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
629
- import { CheckIcon } from "lucide-react";
630
621
  import { cva as cva6 } from "class-variance-authority";
631
- import { jsx as jsx6 } from "react/jsx-runtime";
632
- var checkboxVariants = cva6(
633
- "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"
634
- );
635
- var Checkbox = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
636
- CheckboxPrimitive.Root,
637
- {
638
- ref,
639
- className: cn(checkboxVariants(), className),
640
- ...props,
641
- children: /* @__PURE__ */ jsx6(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx6(CheckIcon, { className: "size-3" }) })
642
- }
643
- ));
644
- Checkbox.displayName = CheckboxPrimitive.Root.displayName;
645
-
646
- // src/components/ui/upload.tsx
647
- import * as React7 from "react";
648
- import { cva as cva7 } from "class-variance-authority";
649
- import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
650
- var UploadState = /* @__PURE__ */ ((UploadState2) => {
651
- UploadState2["Default"] = "default";
652
- UploadState2["DragOver"] = "dragOver";
653
- UploadState2["Error"] = "error";
654
- UploadState2["Uploading"] = "uploading";
655
- UploadState2["Success"] = "success";
656
- return UploadState2;
657
- })(UploadState || {});
622
+ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
658
623
  var DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
659
- var uploadVariants = cva7(
624
+ var uploadVariants = cva6(
660
625
  "relative flex flex-col items-center justify-center rounded-lg transition-all duration-200 ease-in-out overflow-hidden",
661
626
  {
662
627
  variants: {
@@ -673,12 +638,12 @@ var uploadVariants = cva7(
673
638
  }
674
639
  },
675
640
  defaultVariants: {
676
- state: "default" /* Default */,
641
+ state: "default",
677
642
  disabled: false
678
643
  }
679
644
  }
680
645
  );
681
- var Upload = React7.forwardRef(
646
+ var Upload = React6.forwardRef(
682
647
  ({
683
648
  className,
684
649
  endpoint,
@@ -690,29 +655,29 @@ var Upload = React7.forwardRef(
690
655
  maxFileSize = DEFAULT_MAX_FILE_SIZE,
691
656
  acceptedFileTypes = ["application/pdf"],
692
657
  disabled = false,
693
- state = "default" /* Default */,
658
+ state = "default",
694
659
  progress = 0,
695
660
  errorMessage = "Helper text why file failed to upload",
696
661
  loading = false,
697
662
  ...props
698
663
  }, ref) => {
699
- const [currentState, setCurrentState] = React7.useState(state);
700
- const [currentProgress, setCurrentProgress] = React7.useState(progress);
701
- const fileInputRef = React7.useRef(null);
702
- const [selectedFiles, setSelectedFiles] = React7.useState([]);
703
- React7.useEffect(() => {
664
+ const [currentState, setCurrentState] = React6.useState(state);
665
+ const [currentProgress, setCurrentProgress] = React6.useState(progress);
666
+ const fileInputRef = React6.useRef(null);
667
+ const [selectedFiles, setSelectedFiles] = React6.useState([]);
668
+ React6.useEffect(() => {
704
669
  if (loading) {
705
- setCurrentState("uploading" /* Uploading */);
670
+ setCurrentState("uploading");
706
671
  } else {
707
672
  setCurrentState(state);
708
673
  }
709
674
  }, [state, loading]);
710
- React7.useEffect(() => {
675
+ React6.useEffect(() => {
711
676
  if (loading || progress !== void 0) {
712
677
  setCurrentProgress(progress);
713
678
  }
714
679
  }, [progress, loading]);
715
- const uploadFile = React7.useCallback(
680
+ const uploadFile = React6.useCallback(
716
681
  (file) => {
717
682
  if (!endpoint) {
718
683
  console.warn("Upload endpoint not provided");
@@ -720,7 +685,7 @@ var Upload = React7.forwardRef(
720
685
  }
721
686
  if (!file) return;
722
687
  if (!loading) {
723
- setCurrentState("uploading" /* Uploading */);
688
+ setCurrentState("uploading");
724
689
  }
725
690
  setCurrentProgress(0);
726
691
  const xhr = new XMLHttpRequest();
@@ -737,13 +702,13 @@ var Upload = React7.forwardRef(
737
702
  xhr.onload = () => {
738
703
  if (xhr.status < 200 || xhr.status >= 300) {
739
704
  if (!loading) {
740
- setCurrentState("error" /* Error */);
705
+ setCurrentState("error");
741
706
  }
742
707
  onUploadError?.(`Upload failed: ${xhr.statusText}`);
743
708
  return;
744
709
  }
745
710
  if (!loading) {
746
- setCurrentState("success" /* Success */);
711
+ setCurrentState("success");
747
712
  setCurrentProgress(100);
748
713
  }
749
714
  try {
@@ -756,7 +721,7 @@ var Upload = React7.forwardRef(
756
721
  };
757
722
  xhr.onerror = () => {
758
723
  if (!loading) {
759
- setCurrentState("error" /* Error */);
724
+ setCurrentState("error");
760
725
  }
761
726
  onUploadError?.("Network error occurred during upload");
762
727
  };
@@ -804,7 +769,7 @@ var Upload = React7.forwardRef(
804
769
  if (!file) return;
805
770
  const error = validateFile(file);
806
771
  if (error) {
807
- setCurrentState("error" /* Error */);
772
+ setCurrentState("error");
808
773
  onUploadError?.(error);
809
774
  return;
810
775
  }
@@ -817,15 +782,14 @@ var Upload = React7.forwardRef(
817
782
  e.preventDefault();
818
783
  e.stopPropagation();
819
784
  if (disabled) return;
820
- if (currentState === "error" /* Error */ || currentState === "uploading" /* Uploading */)
821
- return;
822
- setCurrentState("dragOver" /* DragOver */);
785
+ if (currentState === "error" || currentState === "uploading") return;
786
+ setCurrentState("dragOver");
823
787
  };
824
788
  const handleDragLeave = (e) => {
825
789
  e.preventDefault();
826
790
  e.stopPropagation();
827
791
  if (disabled) return;
828
- setCurrentState("default" /* Default */);
792
+ setCurrentState("default");
829
793
  };
830
794
  const handleDragOver = (e) => {
831
795
  e.preventDefault();
@@ -835,7 +799,7 @@ var Upload = React7.forwardRef(
835
799
  e.preventDefault();
836
800
  e.stopPropagation();
837
801
  if (disabled) return;
838
- setCurrentState("default" /* Default */);
802
+ setCurrentState("default");
839
803
  const files = e.dataTransfer?.files;
840
804
  handleFileSelect(files);
841
805
  };
@@ -848,13 +812,13 @@ var Upload = React7.forwardRef(
848
812
  };
849
813
  const handleTryAgain = (e) => {
850
814
  e.stopPropagation();
851
- setCurrentState("default" /* Default */);
815
+ setCurrentState("default");
852
816
  setSelectedFiles([]);
853
817
  fileInputRef.current?.click();
854
818
  };
855
819
  const renderContent = () => {
856
820
  switch (currentState) {
857
- case "error" /* Error */:
821
+ case "error":
858
822
  return /* @__PURE__ */ jsxs4(
859
823
  "div",
860
824
  {
@@ -862,14 +826,14 @@ var Upload = React7.forwardRef(
862
826
  style: { gap: "32px" },
863
827
  children: [
864
828
  /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
865
- /* @__PURE__ */ jsx7(Typography, { variant: "heading-sm", children: "Upload fail" }),
866
- /* @__PURE__ */ jsx7(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
829
+ /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", children: "Upload fail" }),
830
+ /* @__PURE__ */ jsx6(Typography, { variant: "body-md", className: "text-error", children: errorMessage })
867
831
  ] }),
868
- /* @__PURE__ */ jsx7(
832
+ /* @__PURE__ */ jsx6(
869
833
  Button,
870
834
  {
871
835
  variant: "destructive",
872
- size: "lg" /* Large */,
836
+ size: "lg",
873
837
  onClick: handleTryAgain,
874
838
  className: "h-12",
875
839
  children: "Try again"
@@ -878,16 +842,16 @@ var Upload = React7.forwardRef(
878
842
  ]
879
843
  }
880
844
  );
881
- case "uploading" /* Uploading */:
845
+ case "uploading":
882
846
  return /* @__PURE__ */ jsxs4(
883
847
  "div",
884
848
  {
885
849
  className: "flex flex-col items-center text-center max-w-[289px]",
886
850
  style: { gap: "32px" },
887
851
  children: [
888
- /* @__PURE__ */ jsx7(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
852
+ /* @__PURE__ */ jsx6(Typography, { variant: "heading-sm", className: "text-dark", children: "Uploading files" }),
889
853
  /* @__PURE__ */ jsxs4("div", { className: "w-full max-w-[720px] space-y-2", children: [
890
- /* @__PURE__ */ jsx7("div", { className: "w-full bg-canvas-gray rounded-full h-2", children: /* @__PURE__ */ jsx7(
854
+ /* @__PURE__ */ jsx6("div", { className: "w-full bg-canvas-gray rounded-full h-2", children: /* @__PURE__ */ jsx6(
891
855
  "div",
892
856
  {
893
857
  className: "bg-canvas-primary h-2 rounded-full transition-all duration-300 ease-in-out",
@@ -909,15 +873,15 @@ var Upload = React7.forwardRef(
909
873
  ]
910
874
  }
911
875
  );
912
- case "success" /* Success */:
913
- return /* @__PURE__ */ jsx7(
876
+ case "success":
877
+ return /* @__PURE__ */ jsx6(
914
878
  "div",
915
879
  {
916
880
  className: "flex flex-col items-center text-center max-w-[289px]",
917
881
  style: { gap: "32px" },
918
882
  children: /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
919
- /* @__PURE__ */ jsx7(Typography, { variant: "heading-sm", className: "text-success", children: "Upload successful!" }),
920
- selectedFiles.length > 0 && /* @__PURE__ */ jsx7("div", { className: "text-center", children: selectedFiles.map((file, index) => /* @__PURE__ */ jsx7(Typography, { variant: "body-sm", children: file.name }, index)) })
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)) })
921
885
  ] })
922
886
  }
923
887
  );
@@ -929,14 +893,14 @@ var Upload = React7.forwardRef(
929
893
  style: { gap: "32px" },
930
894
  children: [
931
895
  /* @__PURE__ */ jsxs4("div", { className: "space-y-4", children: [
932
- /* @__PURE__ */ jsx7(Typography, { variant: "heading-sm", className: "text-dark", children: "Drag & drop files here" }),
933
- /* @__PURE__ */ jsx7(Typography, { variant: "body-md", className: "text-secondary", children: "or click to browse from your computer" })
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" })
934
898
  ] }),
935
- /* @__PURE__ */ jsx7(
899
+ /* @__PURE__ */ jsx6(
936
900
  Button,
937
901
  {
938
902
  variant: "default",
939
- size: "lg" /* Large */,
903
+ size: "lg",
940
904
  onClick: (e) => {
941
905
  e.stopPropagation();
942
906
  fileInputRef.current?.click();
@@ -949,7 +913,7 @@ var Upload = React7.forwardRef(
949
913
  /* @__PURE__ */ jsxs4(Typography, { variant: "body-sm", className: "text-secondary", children: [
950
914
  "Supported file: ",
951
915
  getFileTypeDisplay(),
952
- /* @__PURE__ */ jsx7("br", {}),
916
+ /* @__PURE__ */ jsx6("br", {}),
953
917
  "Max: ",
954
918
  Math.round(maxFileSize / 1024 / 1024),
955
919
  " MB each"
@@ -971,7 +935,7 @@ var Upload = React7.forwardRef(
971
935
  onDragLeave: !disabled ? handleDragLeave : void 0,
972
936
  onDragOver: !disabled ? handleDragOver : void 0,
973
937
  onDrop: !disabled ? handleDrop : void 0,
974
- onClick: disabled || currentState === "uploading" /* Uploading */ ? void 0 : handleClick,
938
+ onClick: disabled || currentState === "uploading" ? void 0 : handleClick,
975
939
  style: {
976
940
  width: "960px",
977
941
  height: "540px",
@@ -979,11 +943,11 @@ var Upload = React7.forwardRef(
979
943
  },
980
944
  role: "button",
981
945
  tabIndex: disabled ? -1 : 0,
982
- "aria-label": currentState === "uploading" /* Uploading */ ? "Uploading files" : "Upload files",
946
+ "aria-label": currentState === "uploading" ? "Uploading files" : "Upload files",
983
947
  "aria-disabled": disabled,
984
948
  ...props,
985
949
  children: [
986
- /* @__PURE__ */ jsx7(
950
+ /* @__PURE__ */ jsx6(
987
951
  "input",
988
952
  {
989
953
  ref: fileInputRef,
@@ -1002,6 +966,26 @@ var Upload = React7.forwardRef(
1002
966
  );
1003
967
  Upload.displayName = "Upload";
1004
968
 
969
+ // src/components/ui/checkbox.tsx
970
+ import * as React7 from "react";
971
+ import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
972
+ import { CheckIcon } from "lucide-react";
973
+ import { cva as cva7 } from "class-variance-authority";
974
+ import { jsx as jsx7 } from "react/jsx-runtime";
975
+ var checkboxVariants = cva7(
976
+ "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
+ );
978
+ var Checkbox = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx7(
979
+ CheckboxPrimitive.Root,
980
+ {
981
+ ref,
982
+ className: cn(checkboxVariants(), className),
983
+ ...props,
984
+ children: /* @__PURE__ */ jsx7(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: /* @__PURE__ */ jsx7(CheckIcon, { className: "size-3" }) })
985
+ }
986
+ ));
987
+ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
988
+
1005
989
  // src/components/ui/input.tsx
1006
990
  import * as React8 from "react";
1007
991
  import { cva as cva8 } from "class-variance-authority";
@@ -1142,9 +1126,61 @@ var Input = React8.forwardRef(
1142
1126
  );
1143
1127
  Input.displayName = "Input";
1144
1128
  var TypedInput = Input;
1129
+
1130
+ // src/components/ui/badge.tsx
1131
+ import * as React9 from "react";
1132
+ import { cva as cva9 } from "class-variance-authority";
1133
+ import { jsx as jsx9 } from "react/jsx-runtime";
1134
+ var badgeVariants = cva9(
1135
+ "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
+ {
1137
+ variants: {
1138
+ variant: {
1139
+ primary: "bg-canvas-primary text-light focus-visible:ring-border-interactive",
1140
+ secondary: "bg-canvas-light text-dark border border-edge-strong focus-visible:ring-border-interactive",
1141
+ accent: "bg-blue-300 text-dark focus-visible:ring-border-interactive",
1142
+ success: "bg-canvas-success text-success focus-visible:ring-success",
1143
+ warning: "bg-canvas-warning text-warning focus-visible:ring-warning",
1144
+ error: "bg-canvas-error text-error focus-visible:ring-border-error"
1145
+ }
1146
+ },
1147
+ defaultVariants: {
1148
+ variant: "primary"
1149
+ }
1150
+ }
1151
+ );
1152
+ function getBadgeTypographyStyles() {
1153
+ return { font: "var(--typography-label-sm-bold)" };
1154
+ }
1155
+ var Badge = React9.forwardRef(
1156
+ ({ className, variant, style, ...props }, ref) => {
1157
+ if (!variant) {
1158
+ return null;
1159
+ }
1160
+ const typographyStyles = getBadgeTypographyStyles();
1161
+ const tokenStyles = {
1162
+ ...typographyStyles,
1163
+ ...style
1164
+ };
1165
+ return /* @__PURE__ */ jsx9(
1166
+ "span",
1167
+ {
1168
+ className: cn(
1169
+ badgeVariants({ variant }),
1170
+ "rounded-full px-3 py-1",
1171
+ className
1172
+ ),
1173
+ style: tokenStyles,
1174
+ ref,
1175
+ ...props
1176
+ }
1177
+ );
1178
+ }
1179
+ );
1180
+ Badge.displayName = "Badge";
1145
1181
  export {
1182
+ Badge,
1146
1183
  Button,
1147
- ButtonSize,
1148
1184
  Checkbox,
1149
1185
  DatePicker,
1150
1186
  FormField,
@@ -1161,7 +1197,7 @@ export {
1161
1197
  SelectValue,
1162
1198
  Typography,
1163
1199
  Upload,
1164
- UploadState,
1200
+ badgeVariants,
1165
1201
  buttonVariants,
1166
1202
  checkboxVariants,
1167
1203
  datePickerTriggerVariants,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@northslopetech/altitude-ui",
3
- "version": "1.7.0",
3
+ "version": "1.9.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/eslint-config": "0.0.0",
54
- "@repo/typescript-config": "0.0.0"
53
+ "@repo/typescript-config": "0.0.0",
54
+ "@repo/eslint-config": "0.0.0"
55
55
  },
56
56
  "dependencies": {
57
57
  "@radix-ui/react-checkbox": "^1.3.3",