@sntxindu/ui 1.0.0 → 1.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 (9) hide show
  1. package/README.md +10 -10
  2. package/dist/index.d.mts +8 -3
  3. package/dist/index.d.ts +8 -3
  4. package/dist/index.js +73 -63
  5. package/dist/index.js.map +1 -1
  6. package/dist/index.mjs +74 -64
  7. package/dist/index.mjs.map +1 -1
  8. package/dist/styles.css +126 -0
  9. package/package.json +16 -11
package/README.md CHANGED
@@ -1,15 +1,15 @@
1
- # @syntax-industries/ui
1
+ # @sntxindu/ui
2
2
 
3
3
  Enterprise-grade React UI component library built with Radix UI and Tailwind CSS.
4
4
 
5
5
  ## Installation
6
6
 
7
7
  ```bash
8
- npm install @syntax-industries/ui
8
+ npm install @sntxindu/ui
9
9
  # or
10
- yarn add @syntax-industries/ui
10
+ yarn add @sntxindu/ui
11
11
  # or
12
- pnpm add @syntax-industries/ui
12
+ pnpm add @sntxindu/ui
13
13
  ```
14
14
 
15
15
  ## Peer Dependencies
@@ -27,7 +27,7 @@ npm install react react-dom tailwindcss
27
27
  In your main application file (e.g., `_app.tsx` or `layout.tsx`):
28
28
 
29
29
  ```tsx
30
- import '@syntax-industries/ui/styles.css'
30
+ import '@sntxindu/ui/styles.css'
31
31
  ```
32
32
 
33
33
  ### 2. Configure Tailwind
@@ -40,7 +40,7 @@ module.exports = {
40
40
  './app/**/*.{js,ts,jsx,tsx,mdx}',
41
41
  './pages/**/*.{js,ts,jsx,tsx,mdx}',
42
42
  './components/**/*.{js,ts,jsx,tsx,mdx}',
43
- './node_modules/@syntax-industries/ui/dist/**/*.{js,mjs}',
43
+ './node_modules/@sntxindu/ui/dist/**/*.{js,mjs}',
44
44
  ],
45
45
  // ... rest of your config
46
46
  }
@@ -51,7 +51,7 @@ module.exports = {
51
51
  ### Import Components
52
52
 
53
53
  ```tsx
54
- import { Button, Card, Badge } from '@syntax-industries/ui'
54
+ import { Button, Card, Badge } from '@sntxindu/ui'
55
55
 
56
56
  function App() {
57
57
  return (
@@ -77,8 +77,8 @@ function App() {
77
77
  For better tree-shaking, you can import components individually:
78
78
 
79
79
  ```tsx
80
- import { Button } from '@syntax-industries/ui/components/button'
81
- import { Card } from '@syntax-industries/ui/components/card'
80
+ import { Button } from '@sntxindu/ui/components/button'
81
+ import { Card } from '@sntxindu/ui/components/card'
82
82
  ```
83
83
 
84
84
  ## Available Components
@@ -129,7 +129,7 @@ All components accept a `className` prop for custom styling:
129
129
  Full TypeScript support with type definitions included.
130
130
 
131
131
  ```tsx
132
- import type { ButtonProps } from '@syntax-industries/ui'
132
+ import type { ButtonProps } from '@sntxindu/ui'
133
133
 
134
134
  const MyButton: React.FC<ButtonProps> = (props) => {
135
135
  return <Button {...props} />
package/dist/index.d.mts CHANGED
@@ -56,8 +56,9 @@ declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<
56
56
 
57
57
  declare const badgeVariants: (props?: ({
58
58
  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
59
+ size?: "default" | "xs" | "sm" | "lg" | null | undefined;
59
60
  } & class_variance_authority_types.ClassProp) | undefined) => string;
60
- declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
61
+ declare function Badge({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
61
62
  asChild?: boolean;
62
63
  }): react_jsx_runtime.JSX.Element;
63
64
 
@@ -217,7 +218,9 @@ declare function DrawerDescription({ className, ...props }: React$1.ComponentPro
217
218
  declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime.JSX.Element;
218
219
  declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Portal>): react_jsx_runtime.JSX.Element;
219
220
  declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
220
- declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime.JSX.Element;
221
+ declare function DropdownMenuContent({ className, align, sideOffset, matchTriggerWidth, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content> & {
222
+ matchTriggerWidth?: boolean;
223
+ }): react_jsx_runtime.JSX.Element;
221
224
  declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime.JSX.Element;
222
225
  declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Item> & {
223
226
  inset?: boolean;
@@ -352,7 +355,9 @@ declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$
352
355
  declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
353
356
  size?: "sm" | "default";
354
357
  }): react_jsx_runtime.JSX.Element;
355
- declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
358
+ declare function SelectContent({ className, children, position, align, matchTriggerWidth, ...props }: React$1.ComponentProps<typeof Select$1.Content> & {
359
+ matchTriggerWidth?: boolean;
360
+ }): react_jsx_runtime.JSX.Element;
356
361
  declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
357
362
  declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
358
363
  declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -56,8 +56,9 @@ declare function AvatarFallback({ className, ...props }: React$1.ComponentProps<
56
56
 
57
57
  declare const badgeVariants: (props?: ({
58
58
  variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
59
+ size?: "default" | "xs" | "sm" | "lg" | null | undefined;
59
60
  } & class_variance_authority_types.ClassProp) | undefined) => string;
60
- declare function Badge({ className, variant, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
61
+ declare function Badge({ className, variant, size, asChild, ...props }: React$1.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
61
62
  asChild?: boolean;
62
63
  }): react_jsx_runtime.JSX.Element;
63
64
 
@@ -217,7 +218,9 @@ declare function DrawerDescription({ className, ...props }: React$1.ComponentPro
217
218
  declare function DropdownMenu({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Root>): react_jsx_runtime.JSX.Element;
218
219
  declare function DropdownMenuPortal({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Portal>): react_jsx_runtime.JSX.Element;
219
220
  declare function DropdownMenuTrigger({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Trigger>): react_jsx_runtime.JSX.Element;
220
- declare function DropdownMenuContent({ className, align, sideOffset, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content>): react_jsx_runtime.JSX.Element;
221
+ declare function DropdownMenuContent({ className, align, sideOffset, matchTriggerWidth, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Content> & {
222
+ matchTriggerWidth?: boolean;
223
+ }): react_jsx_runtime.JSX.Element;
221
224
  declare function DropdownMenuGroup({ ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Group>): react_jsx_runtime.JSX.Element;
222
225
  declare function DropdownMenuItem({ className, inset, variant, ...props }: React$1.ComponentProps<typeof DropdownMenu$1.Item> & {
223
226
  inset?: boolean;
@@ -352,7 +355,9 @@ declare function SelectValue({ ...props }: React$1.ComponentProps<typeof Select$
352
355
  declare function SelectTrigger({ className, size, children, ...props }: React$1.ComponentProps<typeof Select$1.Trigger> & {
353
356
  size?: "sm" | "default";
354
357
  }): react_jsx_runtime.JSX.Element;
355
- declare function SelectContent({ className, children, position, align, ...props }: React$1.ComponentProps<typeof Select$1.Content>): react_jsx_runtime.JSX.Element;
358
+ declare function SelectContent({ className, children, position, align, matchTriggerWidth, ...props }: React$1.ComponentProps<typeof Select$1.Content> & {
359
+ matchTriggerWidth?: boolean;
360
+ }): react_jsx_runtime.JSX.Element;
356
361
  declare function SelectLabel({ className, ...props }: React$1.ComponentProps<typeof Select$1.Label>): react_jsx_runtime.JSX.Element;
357
362
  declare function SelectItem({ className, children, ...props }: React$1.ComponentProps<typeof Select$1.Item>): react_jsx_runtime.JSX.Element;
358
363
  declare function SelectSeparator({ className, ...props }: React$1.ComponentProps<typeof Select$1.Separator>): react_jsx_runtime.JSX.Element;
package/dist/index.js CHANGED
@@ -54,7 +54,7 @@ function Accordion({
54
54
  radixUi.Accordion.Root,
55
55
  {
56
56
  "data-slot": "accordion",
57
- className: cn("overflow-hidden rounded-md border flex w-full flex-col", className),
57
+ className: cn("overflow-hidden rounded-lg border border-border/50 shadow-sm bg-card flex w-full flex-col", className),
58
58
  ...props
59
59
  }
60
60
  );
@@ -67,7 +67,7 @@ function AccordionItem({
67
67
  radixUi.Accordion.Item,
68
68
  {
69
69
  "data-slot": "accordion-item",
70
- className: cn("data-open:bg-muted/50 not-last:border-b", className),
70
+ className: cn("data-open:bg-muted/50 data-open:shadow-sm not-last:border-b border-border/50 transition-all duration-200", className),
71
71
  ...props
72
72
  }
73
73
  );
@@ -77,18 +77,18 @@ function AccordionTrigger({
77
77
  children,
78
78
  ...props
79
79
  }) {
80
- return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
80
+ return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Accordion.Header, { className: "flex hover:bg-muted/50 transition-colors duration-150", children: /* @__PURE__ */ jsxRuntime.jsxs(
81
81
  radixUi.Accordion.Trigger,
82
82
  {
83
83
  "data-slot": "accordion-trigger",
84
84
  className: cn(
85
- "**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 p-2 text-left text-xs/relaxed font-medium hover:underline **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50",
85
+ "**:data-[slot=accordion-trigger-icon]:text-muted-foreground gap-6 px-4 py-3 text-left text-sm font-medium hover:text-foreground hover:bg-muted/30 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-5 **:data-[slot=accordion-trigger-icon]:transition-transform **:data-[slot=accordion-trigger-icon]:duration-200 group/accordion-trigger relative flex flex-1 items-center justify-between border border-transparent transition-all duration-200 outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-expanded:bg-muted/70 aria-expanded:border-y aria-expanded:text-foreground aria-expanded:font-semibold",
86
86
  className
87
87
  ),
88
88
  ...props,
89
89
  children: [
90
90
  children,
91
- /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" }),
91
+ /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden group-aria-expanded/accordion-trigger:rotate-180" }),
92
92
  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, { "data-slot": "accordion-trigger-icon", className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" })
93
93
  ]
94
94
  }
@@ -103,13 +103,13 @@ function AccordionContent({
103
103
  radixUi.Accordion.Content,
104
104
  {
105
105
  "data-slot": "accordion-content",
106
- className: "data-open:animate-accordion-down data-closed:animate-accordion-up px-2 text-xs/relaxed overflow-hidden",
106
+ className: "data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden transition-all",
107
107
  ...props,
108
108
  children: /* @__PURE__ */ jsxRuntime.jsx(
109
109
  "div",
110
110
  {
111
111
  className: cn(
112
- "pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
112
+ "bg-muted/50 border-t px-4 pb-4 pt-2 text-muted-foreground h-(--radix-accordion-content-height) [&_a]:text-primary [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-4 [&_a]:transition-colors [&_p:not(:last-child)]:mb-4 [&_p]:leading-relaxed",
113
113
  className
114
114
  ),
115
115
  children
@@ -174,20 +174,20 @@ function AlertDescription({
174
174
  );
175
175
  }
176
176
  var buttonVariants = classVarianceAuthority.cva(
177
- "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
177
+ "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none hover:scale-105 active:scale-105 aria-expanded:scale-105",
178
178
  {
179
179
  variants: {
180
180
  variant: {
181
- default: "bg-primary text-primary-foreground hover:bg-primary/80",
182
- outline: "border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
183
- secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
184
- ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
185
- destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
186
- link: "text-primary underline-offset-4 hover:underline"
181
+ default: "bg-primary text-primary-foreground hover:bg-primary-foreground hover:text-primary hover:outline-foreground hover:-outline-offset-2 active:bg-primary-foreground active:text-primary aria-expanded:bg-primary-foreground aria-expanded:text-primary",
182
+ outline: "border-primary border-2 hover:border-foreground dark:bg-input/30 hover:bg-foreground hover:text-background hover:outline-foreground hover:outline-offset-2 active:bg-foreground active:text-background aria-expanded:bg-foreground aria-expanded:text-background",
183
+ secondary: "bg-secondary text-secondary-foreground hover:bg-secondary-foreground hover:text-secondary hover:border-secondary active:bg-secondary-foreground active:text-secondary aria-expanded:bg-secondary-foreground aria-expanded:text-secondary",
184
+ ghost: "hover:bg-foreground hover:text-background dark:hover:bg-foreground dark:hover:text-background active:bg-foreground active:text-background aria-expanded:bg-foreground aria-expanded:text-background",
185
+ destructive: "bg-destructive/10 hover:bg-destructive hover:text-destructive-foreground focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 active:bg-destructive active:text-destructive-foreground aria-expanded:bg-destructive aria-expanded:text-destructive-foreground",
186
+ link: "text-primary underline-offset-4 underline hover:scale-105"
187
187
  },
188
188
  size: {
189
189
  default: "h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
190
- xs: "h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
190
+ xs: "h-5 gap-1 rounded-sm px-1.5 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5",
191
191
  sm: "h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
192
192
  lg: "h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4",
193
193
  icon: "size-7 [&_svg:not([class*='size-'])]:size-3.5",
@@ -371,7 +371,7 @@ function Avatar({
371
371
  "data-slot": "avatar",
372
372
  "data-size": size,
373
373
  className: cn(
374
- "size-8 rounded-full after:rounded-full data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
374
+ "size-8 rounded-md after:rounded-sm data-[size=lg]:size-10 data-[size=sm]:size-6 after:border-border group/avatar relative flex shrink-0 select-none after:absolute after:inset-0 after:border after:mix-blend-darken dark:after:mix-blend-lighten",
375
375
  className
376
376
  ),
377
377
  ...props
@@ -387,7 +387,7 @@ function AvatarImage({
387
387
  {
388
388
  "data-slot": "avatar-image",
389
389
  className: cn(
390
- "rounded-full aspect-square size-full object-cover",
390
+ "rounded-sm aspect-square size-full object-cover",
391
391
  className
392
392
  ),
393
393
  ...props
@@ -403,7 +403,7 @@ function AvatarFallback({
403
403
  {
404
404
  "data-slot": "avatar-fallback",
405
405
  className: cn(
406
- "bg-muted text-muted-foreground rounded-full flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
406
+ "bg-muted text-muted-foreground rounded-sm flex size-full items-center justify-center text-sm group-data-[size=sm]/avatar:text-xs",
407
407
  className
408
408
  ),
409
409
  ...props
@@ -411,26 +411,34 @@ function AvatarFallback({
411
411
  );
412
412
  }
413
413
  var badgeVariants = classVarianceAuthority.cva(
414
- "h-5 gap-1 rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5! inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-colors overflow-hidden group/badge",
414
+ "gap-1 rounded-sm border border-transparent font-medium transition-all inline-flex items-center justify-center w-fit whitespace-nowrap shrink-0 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive overflow-hidden group/badge outline-none select-none",
415
415
  {
416
416
  variants: {
417
417
  variant: {
418
- default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
419
- secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
420
- destructive: "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
421
- outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground bg-input/20 dark:bg-input/30",
422
- ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
423
- link: "text-primary underline-offset-4 hover:underline"
418
+ default: "bg-primary text-primary-foreground",
419
+ secondary: "bg-secondary text-secondary-foreground",
420
+ destructive: "bg-destructive/10 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20 focus-visible:border-destructive/40",
421
+ outline: "border-primary border-2 text-foreground dark:bg-input/30",
422
+ ghost: "text-foreground",
423
+ link: "text-primary underline-offset-4"
424
+ },
425
+ size: {
426
+ default: "h-6 px-2 py-0.5 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3!",
427
+ xs: "h-4 px-1 py-0.5 text-[0.5rem] has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 [&>svg]:size-2!",
428
+ sm: "h-5 px-1.5 py-0.5 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-2.5!",
429
+ lg: "h-7 px-2.5 py-0.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&>svg]:size-3.5!"
424
430
  }
425
431
  },
426
432
  defaultVariants: {
427
- variant: "default"
433
+ variant: "default",
434
+ size: "default"
428
435
  }
429
436
  }
430
437
  );
431
438
  function Badge({
432
439
  className,
433
440
  variant = "default",
441
+ size = "default",
434
442
  asChild = false,
435
443
  ...props
436
444
  }) {
@@ -440,7 +448,8 @@ function Badge({
440
448
  {
441
449
  "data-slot": "badge",
442
450
  "data-variant": variant,
443
- className: cn(badgeVariants({ variant }), className),
451
+ "data-size": size,
452
+ className: cn(badgeVariants({ variant, size }), className),
444
453
  ...props
445
454
  }
446
455
  );
@@ -618,7 +627,7 @@ function Calendar({
618
627
  {
619
628
  showOutsideDays,
620
629
  className: cn(
621
- "p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
630
+ "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
622
631
  String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
623
632
  String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
624
633
  className
@@ -658,7 +667,7 @@ function Calendar({
658
667
  defaultClassNames.dropdowns
659
668
  ),
660
669
  dropdown_root: cn(
661
- "relative cn-calendar-dropdown-root rounded-(--cell-radius)",
670
+ "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
662
671
  defaultClassNames.dropdown_root
663
672
  ),
664
673
  dropdown: cn(
@@ -667,16 +676,16 @@ function Calendar({
667
676
  ),
668
677
  caption_label: cn(
669
678
  "select-none font-medium",
670
- captionLayout === "label" ? "text-sm" : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm [&>svg]:text-muted-foreground [&>svg]:size-3.5",
679
+ captionLayout === "label" ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
671
680
  defaultClassNames.caption_label
672
681
  ),
673
682
  table: "w-full border-collapse",
674
683
  weekdays: cn("flex", defaultClassNames.weekdays),
675
684
  weekday: cn(
676
- "text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none",
685
+ "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
677
686
  defaultClassNames.weekday
678
687
  ),
679
- week: cn("flex w-full mt-2", defaultClassNames.week),
688
+ week: cn("flex w-full mt-2 gap-2", defaultClassNames.week),
680
689
  week_number_header: cn(
681
690
  "select-none w-(--cell-size)",
682
691
  defaultClassNames.week_number_header
@@ -686,21 +695,18 @@ function Calendar({
686
695
  defaultClassNames.week_number
687
696
  ),
688
697
  day: cn(
689
- "relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none",
690
- props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)" : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)",
698
+ "relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
699
+ props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md",
691
700
  defaultClassNames.day
692
701
  ),
693
702
  range_start: cn(
694
- "rounded-l-(--cell-radius) bg-muted elative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate",
703
+ "rounded-l-md bg-accent",
695
704
  defaultClassNames.range_start
696
705
  ),
697
706
  range_middle: cn("rounded-none", defaultClassNames.range_middle),
698
- range_end: cn(
699
- "rounded-r-(--cell-radius) bg-muted relative after:bg-muted-200 after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate",
700
- defaultClassNames.range_end
701
- ),
707
+ range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
702
708
  today: cn(
703
- "bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none",
709
+ "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
704
710
  defaultClassNames.today
705
711
  ),
706
712
  outside: cn(
@@ -731,7 +737,13 @@ function Calendar({
731
737
  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, { className: cn("size-4", className2), ...props2 });
732
738
  }
733
739
  if (orientation === "right") {
734
- return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: cn("size-4", className2), ...props2 });
740
+ return /* @__PURE__ */ jsxRuntime.jsx(
741
+ lucideReact.ChevronRightIcon,
742
+ {
743
+ className: cn("size-4", className2),
744
+ ...props2
745
+ }
746
+ );
735
747
  }
736
748
  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, { className: cn("size-4", className2), ...props2 });
737
749
  },
@@ -768,7 +780,7 @@ function CalendarDayButton({
768
780
  "data-range-end": modifiers.range_end,
769
781
  "data-range-middle": modifiers.range_middle,
770
782
  className: cn(
771
- "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70",
783
+ "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70 p-2",
772
784
  defaultClassNames.day,
773
785
  className
774
786
  ),
@@ -1284,8 +1296,10 @@ function Checkbox({
1284
1296
  "data-slot": "checkbox-indicator",
1285
1297
  className: "[&>svg]:size-3.5 grid place-content-center text-current transition-none",
1286
1298
  children: /* @__PURE__ */ jsxRuntime.jsx(
1287
- lucideReact.CheckIcon,
1288
- {}
1299
+ lucideReact.XIcon,
1300
+ {
1301
+ strokeWidth: 4
1302
+ }
1289
1303
  )
1290
1304
  }
1291
1305
  )
@@ -2011,6 +2025,7 @@ function DropdownMenuContent({
2011
2025
  className,
2012
2026
  align = "start",
2013
2027
  sideOffset = 4,
2028
+ matchTriggerWidth = true,
2014
2029
  ...props
2015
2030
  }) {
2016
2031
  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.DropdownMenu.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -2019,7 +2034,7 @@ function DropdownMenuContent({
2019
2034
  "data-slot": "dropdown-menu-content",
2020
2035
  sideOffset,
2021
2036
  align,
2022
- className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", className),
2037
+ className: cn("data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-dropdown-menu-content-available-height) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden", matchTriggerWidth && "w-(--radix-dropdown-menu-trigger-width)", className),
2023
2038
  ...props
2024
2039
  }
2025
2040
  ) });
@@ -3048,7 +3063,7 @@ function Progress({
3048
3063
  {
3049
3064
  "data-slot": "progress",
3050
3065
  className: cn(
3051
- "bg-muted h-1 rounded-md relative flex w-full items-center overflow-x-hidden",
3066
+ "bg-muted h-2 rounded-[3px] relative flex w-full items-center overflow-x-hidden",
3052
3067
  className
3053
3068
  ),
3054
3069
  ...props,
@@ -3085,7 +3100,7 @@ function RadioGroupItem({
3085
3100
  {
3086
3101
  "data-slot": "radio-group-item",
3087
3102
  className: cn(
3088
- "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
3103
+ "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-sm transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
3089
3104
  className
3090
3105
  ),
3091
3106
  ...props,
@@ -3094,7 +3109,7 @@ function RadioGroupItem({
3094
3109
  {
3095
3110
  "data-slot": "radio-group-indicator",
3096
3111
  className: "group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white",
3097
- children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.CircleIcon, { className: "absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current" })
3112
+ children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1/2 left-1/2 size-3 -translate-x-1/2 -translate-y-1/2 bg-primary rounded-[2.5px]" })
3098
3113
  }
3099
3114
  )
3100
3115
  }
@@ -3185,7 +3200,7 @@ function SelectGroup({
3185
3200
  radixUi.Select.Group,
3186
3201
  {
3187
3202
  "data-slot": "select-group",
3188
- className: cn("scroll-my-1 p-1", className),
3203
+ className: cn("scroll-my-1", className),
3189
3204
  ...props
3190
3205
  }
3191
3206
  );
@@ -3223,13 +3238,14 @@ function SelectContent({
3223
3238
  children,
3224
3239
  position = "item-aligned",
3225
3240
  align = "center",
3241
+ matchTriggerWidth = false,
3226
3242
  ...props
3227
3243
  }) {
3228
3244
  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
3229
3245
  radixUi.Select.Content,
3230
3246
  {
3231
3247
  "data-slot": "select-content",
3232
- className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className),
3248
+ className: cn("bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", matchTriggerWidth && "w-(--radix-select-trigger-width)", className),
3233
3249
  position,
3234
3250
  align,
3235
3251
  ...props,
@@ -3274,7 +3290,7 @@ function SelectItem({
3274
3290
  {
3275
3291
  "data-slot": "select-item",
3276
3292
  className: cn(
3277
- "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
3293
+ "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
3278
3294
  className
3279
3295
  ),
3280
3296
  ...props,
@@ -3293,7 +3309,7 @@ function SelectSeparator({
3293
3309
  radixUi.Select.Separator,
3294
3310
  {
3295
3311
  "data-slot": "select-separator",
3296
- className: cn("bg-border/50 -mx-1 my-1 h-px pointer-events-none", className),
3312
+ className: cn("bg-border/50 -mx-1 my-1 h-px", className),
3297
3313
  ...props
3298
3314
  }
3299
3315
  );
@@ -3306,12 +3322,9 @@ function SelectScrollUpButton({
3306
3322
  radixUi.Select.ScrollUpButton,
3307
3323
  {
3308
3324
  "data-slot": "select-scroll-up-button",
3309
- className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5", className),
3325
+ className: cn("flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5", className),
3310
3326
  ...props,
3311
- children: /* @__PURE__ */ jsxRuntime.jsx(
3312
- lucideReact.ChevronUpIcon,
3313
- {}
3314
- )
3327
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronUpIcon, {})
3315
3328
  }
3316
3329
  );
3317
3330
  }
@@ -3323,12 +3336,9 @@ function SelectScrollDownButton({
3323
3336
  radixUi.Select.ScrollDownButton,
3324
3337
  {
3325
3338
  "data-slot": "select-scroll-down-button",
3326
- className: cn("bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5", className),
3339
+ className: cn("flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5", className),
3327
3340
  ...props,
3328
- children: /* @__PURE__ */ jsxRuntime.jsx(
3329
- lucideReact.ChevronDownIcon,
3330
- {}
3331
- )
3341
+ children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDownIcon, {})
3332
3342
  }
3333
3343
  );
3334
3344
  }
@@ -3444,7 +3454,7 @@ function Skeleton({ className, ...props }) {
3444
3454
  "div",
3445
3455
  {
3446
3456
  "data-slot": "skeleton",
3447
- className: cn("bg-muted rounded-md animate-pulse", className),
3457
+ className: cn("bg-muted rounded-sm animate-pulse", className),
3448
3458
  ...props
3449
3459
  }
3450
3460
  );