@northslopetech/altitude-ui 2.0.4 → 2.0.6

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 (10) hide show
  1. package/README.md +72 -3
  2. package/dist/dist/acme-tokens.css +90 -0
  3. package/dist/dist/dnv-tokens.css +90 -0
  4. package/dist/dist/tokens.css +90 -0
  5. package/dist/index.d.mts +7 -4
  6. package/dist/index.d.ts +7 -4
  7. package/dist/index.js +387 -293
  8. package/dist/index.mjs +387 -292
  9. package/package.json +2 -2
  10. package/dist/tokens.css +0 -90
package/README.md CHANGED
@@ -27,11 +27,16 @@ Components are built using:
27
27
 
28
28
  This package includes the following components:
29
29
 
30
+ - **Badge** - Small status and informational labels
30
31
  - **Button** - Interactive button component with multiple variants and sizes
31
- - **Select** - Dropdown selection component with search capabilities
32
+ - **Checkbox** - Form checkbox input with accessibility features
32
33
  - **DatePicker** - Date selection component with calendar popup
33
34
  - **FormField** - Form field wrapper with label and error handling
35
+ - **Input** - Text input component with consistent styling
36
+ - **Select** - Dropdown selection component with search capabilities
37
+ - **Tabs** - Tab navigation component
34
38
  - **Typography** - Text components with design system typography tokens
39
+ - **Upload** - File upload component with drag and drop support
35
40
 
36
41
  ## Usage
37
42
 
@@ -89,7 +94,7 @@ The Button component uses Altitude design tokens:
89
94
  The Checkbox component is built on Radix UI Checkbox with Altitude design tokens.
90
95
 
91
96
  ```tsx
92
- import { Checkbox } from "@nslp/altitude";
97
+ import { Checkbox } from "@northslopetech/altitude-ui";
93
98
 
94
99
  function Example() {
95
100
  return (
@@ -103,7 +108,12 @@ function Example() {
103
108
 
104
109
  #### Checkbox Props
105
110
 
106
- All standard Radix UI Checkbox attributes are also supported.
111
+ All standard Radix UI Checkbox attributes are supported, including:
112
+
113
+ - `checked` - Controlled checked state
114
+ - `onCheckedChange` - Callback when checked state changes
115
+ - `disabled` - Disable the checkbox
116
+ - `required` - Mark as required for form validation
107
117
 
108
118
  ### asChild Pattern
109
119
 
@@ -168,6 +178,20 @@ To add more shadcn/ui components:
168
178
  3. Export the component from `src/index.ts`
169
179
  4. Update this README with usage examples
170
180
 
181
+ ### Input
182
+
183
+ A text input component with consistent styling:
184
+
185
+ ```tsx
186
+ import { Input } from "@northslopetech/altitude-ui";
187
+
188
+ function Example() {
189
+ return (
190
+ <Input type="email" placeholder="Enter your email" className="w-full" />
191
+ );
192
+ }
193
+ ```
194
+
171
195
  ### Select
172
196
 
173
197
  A dropdown selection component with built-in search and filtering:
@@ -224,6 +248,51 @@ function Example() {
224
248
  }
225
249
  ```
226
250
 
251
+ ### Badge
252
+
253
+ Small status and informational labels:
254
+
255
+ ```tsx
256
+ import { Badge } from "@northslopetech/altitude-ui";
257
+
258
+ function Example() {
259
+ return (
260
+ <div className="flex gap-2">
261
+ <Badge variant="default">Default</Badge>
262
+ <Badge variant="secondary">Secondary</Badge>
263
+ <Badge variant="destructive">Error</Badge>
264
+ <Badge variant="outline">Outline</Badge>
265
+ </div>
266
+ );
267
+ }
268
+ ```
269
+
270
+ ### Tabs
271
+
272
+ Tab navigation component:
273
+
274
+ ```tsx
275
+ import {
276
+ Tabs,
277
+ TabsList,
278
+ TabsTrigger,
279
+ TabsContent,
280
+ } from "@northslopetech/altitude-ui";
281
+
282
+ function Example() {
283
+ return (
284
+ <Tabs defaultValue="account" className="w-full">
285
+ <TabsList>
286
+ <TabsTrigger value="account">Account</TabsTrigger>
287
+ <TabsTrigger value="password">Password</TabsTrigger>
288
+ </TabsList>
289
+ <TabsContent value="account">Account content</TabsContent>
290
+ <TabsContent value="password">Password content</TabsContent>
291
+ </Tabs>
292
+ );
293
+ }
294
+ ```
295
+
227
296
  ### Typography
228
297
 
229
298
  Pre-styled text components using design system typography tokens:
package/dist/dist/acme-tokens.css ADDED
@@ -0,0 +1,90 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated from TypeScript tokens.
3
+ */
4
+
5
+ @theme {
6
+ --color-base-black: #000000;
7
+ --color-base-white: #ffffff;
8
+ --color-blue-100: #E3F2FD;
9
+ --color-blue-200: #BBDEFB;
10
+ --color-blue-300: #90CAF9;
11
+ --color-blue-400: #64B5F6;
12
+ --color-blue-500: #2196F3;
13
+ --color-blue-600: #1E88E5;
14
+ --color-blue-700: #1976D2;
15
+ --color-blue-800: #1565C0;
16
+ --color-blue-900: #0D47A1;
17
+ --color-dark: #000000;
18
+ --color-error-subtle: #FFEBEE;
19
+ --color-error: #F44336;
20
+ --color-gray: #F0F0F0;
21
+ --color-green-100: #E8F5E8;
22
+ --color-green-200: #C8E6C9;
23
+ --color-green-300: #A5D6A7;
24
+ --color-green-400: #81C784;
25
+ --color-green-500: #4CAF50;
26
+ --color-green-600: #43A047;
27
+ --color-green-700: #388E3C;
28
+ --color-green-800: #2E7D32;
29
+ --color-green-900: #1B5E20;
30
+ --color-info-subtle: #E3F2FD;
31
+ --color-info: #1E88E5;
32
+ --color-interactive: #2196F3;
33
+ --color-light: #FFFFFF;
34
+ --color-neutral-100: #FFFFFF;
35
+ --color-neutral-200: #F0F0F0;
36
+ --color-neutral-300: #E0E0E0;
37
+ --color-neutral-400: #B0B0B0;
38
+ --color-neutral-500: #808080;
39
+ --color-neutral-600: #606060;
40
+ --color-neutral-700: #404040;
41
+ --color-neutral-800: #202020;
42
+ --color-neutral-900: #000000;
43
+ --color-primary: #2196F3;
44
+ --color-red-100: #FFEBEE;
45
+ --color-red-200: #FFCDD2;
46
+ --color-red-300: #EF9A9A;
47
+ --color-red-400: #E57373;
48
+ --color-red-500: #F44336;
49
+ --color-red-600: #E53935;
50
+ --color-red-700: #D32F2F;
51
+ --color-red-800: #C62828;
52
+ --color-red-900: #B71C1C;
53
+ --color-secondary: #606060;
54
+ --color-strong: #000000;
55
+ --color-subtle: #E0E0E0;
56
+ --color-success-subtle: #E8F5E8;
57
+ --color-success: #4CAF50;
58
+ --color-warning-subtle: #FFFDE7;
59
+ --color-warning: #FBC02D;
60
+ --color-yellow-100: #FFFDE7;
61
+ --color-yellow-200: #FFF9C4;
62
+ --color-yellow-300: #FFF59D;
63
+ --color-yellow-400: #FFF176;
64
+ --color-yellow-500: #FFEB3B;
65
+ --color-yellow-600: #FDD835;
66
+ --color-yellow-700: #FBC02D;
67
+ --color-yellow-800: #F9A825;
68
+ --color-yellow-900: #F57F17;
69
+ --typography-body-lg: 400 18px/27px Inter;
70
+ --typography-body-md: 400 16px/24px Inter;
71
+ --typography-body-sm: 400 14px/21px Inter;
72
+ --typography-body-xl: 400 20px/30px Inter;
73
+ --typography-body-xs: 400 12px/18px Inter;
74
+ --typography-display-lg: 400 94px/112.8px Inter;
75
+ --typography-display-md: 400 66px/79.2px Inter;
76
+ --typography-display-sm: 400 52px/62.4px Inter;
77
+ --typography-display-xl: 400 105px/126px Inter;
78
+ --typography-heading-lg: 600 32px/38.4px Inter;
79
+ --typography-heading-md: 600 26px/31.2px Inter;
80
+ --typography-heading-sm: 600 20px/24px Inter;
81
+ --typography-heading-xl: 500 46px/55.2px Inter;
82
+ --typography-label-lg-bold: 600 18px/18px Inter;
83
+ --typography-label-lg-regular: 400 18px/18px Inter;
84
+ --typography-label-md-bold: 600 16px/16px Inter;
85
+ --typography-label-md-regular: 400 16px/16px Inter;
86
+ --typography-label-sm-bold: 600 14px/14px Inter;
87
+ --typography-label-sm-regular: 400 14px/14px Inter;
88
+ --typography-label-xs-bold: 600 12px/12px Inter;
89
+ --typography-label-xs-regular: 400 12px/12px Inter;
90
+ }
package/dist/dist/dnv-tokens.css ADDED
@@ -0,0 +1,90 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated from TypeScript tokens.
3
+ */
4
+
5
+ @theme {
6
+ --color-base-black: #1a1a1a;
7
+ --color-base-white: #ffffff;
8
+ --color-blue-100: #E8F4FD;
9
+ --color-blue-200: #B8E0F7;
10
+ --color-blue-300: #7CC7F0;
11
+ --color-blue-400: #40AEE9;
12
+ --color-blue-500: #0D7BC4;
13
+ --color-blue-600: #0A5F9A;
14
+ --color-blue-700: #074370;
15
+ --color-blue-800: #052747;
16
+ --color-blue-900: #030B1E;
17
+ --color-dark: #0F172A;
18
+ --color-error-subtle: #FEF2F2;
19
+ --color-error: #EF4444;
20
+ --color-gray: #E2E8F0;
21
+ --color-green-100: #ECFDF5;
22
+ --color-green-200: #D1FAE5;
23
+ --color-green-300: #A7F3D0;
24
+ --color-green-400: #6EE7B7;
25
+ --color-green-500: #34D399;
26
+ --color-green-600: #059669;
27
+ --color-green-700: #047857;
28
+ --color-green-800: #065F46;
29
+ --color-green-900: #064E3B;
30
+ --color-info-subtle: #ECFDF5;
31
+ --color-info: #059669;
32
+ --color-interactive: #34D399;
33
+ --color-light: #F8FAFC;
34
+ --color-neutral-100: #F8FAFC;
35
+ --color-neutral-200: #E2E8F0;
36
+ --color-neutral-300: #CBD5E1;
37
+ --color-neutral-400: #94A3B8;
38
+ --color-neutral-500: #64748B;
39
+ --color-neutral-600: #475569;
40
+ --color-neutral-700: #334155;
41
+ --color-neutral-800: #1E293B;
42
+ --color-neutral-900: #0F172A;
43
+ --color-primary: #34D399;
44
+ --color-red-100: #FEF2F2;
45
+ --color-red-200: #FECACA;
46
+ --color-red-300: #FCA5A5;
47
+ --color-red-400: #F87171;
48
+ --color-red-500: #EF4444;
49
+ --color-red-600: #DC2626;
50
+ --color-red-700: #B91C1C;
51
+ --color-red-800: #991B1B;
52
+ --color-red-900: #7F1D1D;
53
+ --color-secondary: #475569;
54
+ --color-strong: #0F172A;
55
+ --color-subtle: #CBD5E1;
56
+ --color-success-subtle: #ECFDF5;
57
+ --color-success: #34D399;
58
+ --color-warning-subtle: #FFFBEB;
59
+ --color-warning: #B45309;
60
+ --color-yellow-100: #FFFBEB;
61
+ --color-yellow-200: #FEF3C7;
62
+ --color-yellow-300: #FDE68A;
63
+ --color-yellow-400: #FCD34D;
64
+ --color-yellow-500: #F59E0B;
65
+ --color-yellow-600: #D97706;
66
+ --color-yellow-700: #B45309;
67
+ --color-yellow-800: #92400E;
68
+ --color-yellow-900: #78350F;
69
+ --typography-body-lg: 400 18px/27px Gantari;
70
+ --typography-body-md: 400 16px/24px Gantari;
71
+ --typography-body-sm: 400 14px/21px Gantari;
72
+ --typography-body-xl: 400 20px/30px Gantari;
73
+ --typography-body-xs: 400 12px/18px Gantari;
74
+ --typography-display-lg: 400 94px/112.8px Gantari;
75
+ --typography-display-md: 400 66px/79.2px Gantari;
76
+ --typography-display-sm: 400 52px/62.4px Gantari;
77
+ --typography-display-xl: 400 105px/126px Gantari;
78
+ --typography-heading-lg: 600 32px/38.4px Gantari;
79
+ --typography-heading-md: 600 26px/31.2px Gantari;
80
+ --typography-heading-sm: 600 20px/24px Gantari;
81
+ --typography-heading-xl: 500 46px/55.2px Gantari;
82
+ --typography-label-lg-bold: 600 18px/18px Gantari;
83
+ --typography-label-lg-regular: 400 18px/18px Gantari;
84
+ --typography-label-md-bold: 600 16px/16px Gantari;
85
+ --typography-label-md-regular: 400 16px/16px Gantari;
86
+ --typography-label-sm-bold: 600 14px/14px Gantari;
87
+ --typography-label-sm-regular: 400 14px/14px Gantari;
88
+ --typography-label-xs-bold: 600 12px/12px Gantari;
89
+ --typography-label-xs-regular: 400 12px/12px Gantari;
90
+ }
package/dist/dist/tokens.css ADDED
@@ -0,0 +1,90 @@
1
+ /**
2
+ * Do not edit directly, this file was auto-generated from TypeScript tokens.
3
+ */
4
+
5
+ @theme {
6
+ --color-base-black: #161616;
7
+ --color-base-white: #ffffff;
8
+ --color-blue-100: #F0F5FF;
9
+ --color-blue-200: #D6E4FF;
10
+ --color-blue-300: #ADCCFF;
11
+ --color-blue-400: #618EFF;
12
+ --color-blue-500: #2E69FF;
13
+ --color-blue-600: #004DCC;
14
+ --color-blue-700: #003A99;
15
+ --color-blue-800: #002461;
16
+ --color-blue-900: #00173D;
17
+ --color-dark: #161616;
18
+ --color-error-subtle: #FCF2F2;
19
+ --color-error: #C62828;
20
+ --color-gray: #F5F5F5;
21
+ --color-green-100: #EBF9F4;
22
+ --color-green-200: #B8EAD9;
23
+ --color-green-300: #63D0AA;
24
+ --color-green-400: #11A772;
25
+ --color-green-500: #0C7953;
26
+ --color-green-600: #095D3E;
27
+ --color-green-700: #07462F;
28
+ --color-green-800: #053826;
29
+ --color-green-900: #042F20;
30
+ --color-info-subtle: #F0F5FF;
31
+ --color-info: #004DCC;
32
+ --color-interactive: #2E69FF;
33
+ --color-light: #FFFFFF;
34
+ --color-neutral-100: #FFFFFF;
35
+ --color-neutral-200: #F5F5F5;
36
+ --color-neutral-300: #DEDEDE;
37
+ --color-neutral-400: #B5B5B5;
38
+ --color-neutral-500: #909090;
39
+ --color-neutral-600: #666666;
40
+ --color-neutral-700: #4A4A4A;
41
+ --color-neutral-800: #2E2E2E;
42
+ --color-neutral-900: #161616;
43
+ --color-primary: #2E69FF;
44
+ --color-red-100: #FCF2F2;
45
+ --color-red-200: #F4C8C8;
46
+ --color-red-300: #E58080;
47
+ --color-red-400: #DC5151;
48
+ --color-red-500: #C62828;
49
+ --color-red-600: #AA2222;
50
+ --color-red-700: #881B1B;
51
+ --color-red-800: #5E1313;
52
+ --color-red-900: #400D0D;
53
+ --color-secondary: #666666;
54
+ --color-strong: #161616;
55
+ --color-subtle: #DEDEDE;
56
+ --color-success-subtle: #EBF9F4;
57
+ --color-success: #0C7953;
58
+ --color-warning-subtle: #FFFBEB;
59
+ --color-warning: #A16207;
60
+ --color-yellow-100: #FFFBEB;
61
+ --color-yellow-200: #FEF3C7;
62
+ --color-yellow-300: #FDE68A;
63
+ --color-yellow-400: #FACC15;
64
+ --color-yellow-500: #EAB308;
65
+ --color-yellow-600: #CA8A04;
66
+ --color-yellow-700: #A16207;
67
+ --color-yellow-800: #78450A;
68
+ --color-yellow-900: #451A03;
69
+ --typography-body-lg: 400 18px/27px Inter;
70
+ --typography-body-md: 400 16px/24px Inter;
71
+ --typography-body-sm: 400 14px/21px Inter;
72
+ --typography-body-xl: 400 20px/30px Inter;
73
+ --typography-body-xs: 400 12px/18px Inter;
74
+ --typography-display-lg: 400 94px/112.8px Inter;
75
+ --typography-display-md: 400 66px/79.2px Inter;
76
+ --typography-display-sm: 400 52px/62.4px Inter;
77
+ --typography-display-xl: 400 105px/126px Inter;
78
+ --typography-heading-lg: 600 32px/38.4px Inter;
79
+ --typography-heading-md: 600 26px/31.2px Inter;
80
+ --typography-heading-sm: 600 20px/24px Inter;
81
+ --typography-heading-xl: 500 46px/55.2px Inter;
82
+ --typography-label-lg-bold: 600 18px/18px Inter;
83
+ --typography-label-lg-regular: 400 18px/18px Inter;
84
+ --typography-label-md-bold: 600 16px/16px Inter;
85
+ --typography-label-md-regular: 400 16px/16px Inter;
86
+ --typography-label-sm-bold: 600 14px/14px Inter;
87
+ --typography-label-sm-regular: 400 14px/14px Inter;
88
+ --typography-label-xs-bold: 600 12px/12px Inter;
89
+ --typography-label-xs-regular: 400 12px/12px Inter;
90
+ }
package/dist/index.d.mts CHANGED
@@ -24,7 +24,9 @@ interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProp
24
24
  }
25
25
  declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
26
26
 
27
- declare const selectTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
27
+ declare const selectTriggerVariants: (props?: ({
28
+ width?: "default" | "compact" | "fill" | null | undefined;
29
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
28
30
  declare const selectContentVariants: (props?: ({
29
31
  position?: "popper" | "item-aligned" | null | undefined;
30
32
  } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -34,6 +36,7 @@ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.Selec
34
36
  interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
35
37
  className?: string;
36
38
  children?: React.ReactNode;
39
+ width?: "default" | "fill" | "compact";
37
40
  }
38
41
  declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
39
42
  declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -57,7 +60,6 @@ interface FormFieldProps {
57
60
  }
58
61
  declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
59
62
 
60
- declare const datePickerTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
61
63
  interface DatePickerProps {
62
64
  value?: Date;
63
65
  onValueChange?: (date: Date | undefined) => void;
@@ -66,7 +68,7 @@ interface DatePickerProps {
66
68
  placeholder?: string;
67
69
  className?: string;
68
70
  }
69
- declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
71
+ declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
70
72
 
71
73
  declare const uploadVariants: (props?: ({
72
74
  state?: "default" | "error" | "dragOver" | "uploading" | "success" | null | undefined;
@@ -102,6 +104,7 @@ interface BaseInputProps extends VariantProps<typeof inputVariants> {
102
104
  className?: string;
103
105
  style?: React.CSSProperties;
104
106
  onClear?: () => void;
107
+ showClear?: boolean;
105
108
  }
106
109
  interface InputFieldProps extends BaseInputProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "style"> {
107
110
  variant?: "input";
@@ -149,4 +152,4 @@ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
149
152
  }
150
153
  declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
151
154
 
152
- 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, tabsVariants, typographyVariants, uploadVariants };
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, inputVariants, selectTriggerVariants, tabsVariants, typographyVariants, uploadVariants };
package/dist/index.d.ts CHANGED
@@ -24,7 +24,9 @@ interface TypographyProps extends React.HTMLAttributes<HTMLElement>, VariantProp
24
24
  }
25
25
  declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<HTMLElement>>;
26
26
 
27
- declare const selectTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
27
+ declare const selectTriggerVariants: (props?: ({
28
+ width?: "default" | "compact" | "fill" | null | undefined;
29
+ } & class_variance_authority_types.ClassProp) | undefined) => string;
28
30
  declare const selectContentVariants: (props?: ({
29
31
  position?: "popper" | "item-aligned" | null | undefined;
30
32
  } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -34,6 +36,7 @@ declare const SelectValue: React.ForwardRefExoticComponent<SelectPrimitive.Selec
34
36
  interface SelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
35
37
  className?: string;
36
38
  children?: React.ReactNode;
39
+ width?: "default" | "fill" | "compact";
37
40
  }
38
41
  declare const SelectTrigger: React.ForwardRefExoticComponent<SelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
39
42
  declare const SelectScrollUpButton: React.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
@@ -57,7 +60,6 @@ interface FormFieldProps {
57
60
  }
58
61
  declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
59
62
 
60
- declare const datePickerTriggerVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
61
63
  interface DatePickerProps {
62
64
  value?: Date;
63
65
  onValueChange?: (date: Date | undefined) => void;
@@ -66,7 +68,7 @@ interface DatePickerProps {
66
68
  placeholder?: string;
67
69
  className?: string;
68
70
  }
69
- declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
71
+ declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
70
72
 
71
73
  declare const uploadVariants: (props?: ({
72
74
  state?: "default" | "error" | "dragOver" | "uploading" | "success" | null | undefined;
@@ -102,6 +104,7 @@ interface BaseInputProps extends VariantProps<typeof inputVariants> {
102
104
  className?: string;
103
105
  style?: React.CSSProperties;
104
106
  onClear?: () => void;
107
+ showClear?: boolean;
105
108
  }
106
109
  interface InputFieldProps extends BaseInputProps, Omit<React.InputHTMLAttributes<HTMLInputElement>, "style"> {
107
110
  variant?: "input";
@@ -149,4 +152,4 @@ interface TabsContentProps extends React.HTMLAttributes<HTMLDivElement> {
149
152
  }
150
153
  declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
151
154
 
152
- 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, tabsVariants, typographyVariants, uploadVariants };
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, inputVariants, selectTriggerVariants, tabsVariants, typographyVariants, uploadVariants };