@jbpark/ui-kit 5.4.1 → 5.4.3

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 (7) hide show
  1. package/dist/core/badge.d.mts +1 -1
  2. package/dist/core/button.d.mts +2 -2
  3. package/dist/core/field.d.mts.map +1 -1
  4. package/dist/core/field.mjs +3 -3
  5. package/dist/core/field.mjs.map +1 -1
  6. package/dist/style.css +21 -17
  7. package/package.json +1 -1
package/dist/core/badge.d.mts CHANGED
@@ -4,7 +4,7 @@ declare namespace badge_d_exports {
4
4
  export { Badge, Props, badgeVariants };
5
5
  }
6
6
  declare const badgeVariants: (props?: ({
7
- variant?: "default" | "destructive" | "outline" | "secondary" | null | undefined;
7
+ variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
8
8
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
9
9
  type Props = React$1.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
10
10
  asChild?: boolean;
package/dist/core/button.d.mts CHANGED
@@ -4,8 +4,8 @@ declare namespace button_d_exports {
4
4
  export { Button, Props, buttonVariants };
5
5
  }
6
6
  declare const buttonVariants: (props?: ({
7
- variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
8
- size?: "icon" | "default" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
7
+ variant?: "link" | "default" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
8
+ size?: "default" | "icon" | "xs" | "sm" | "lg" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
9
9
  } & import("class-variance-authority/types").ClassProp) | undefined) => string;
10
10
  type Props = React$1.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
11
11
  asChild?: boolean;
package/dist/core/field.d.mts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field.d.mts","names":[],"sources":["../../src/core/field.tsx"],"mappings":";;;;;iBAWS,WAAW,cAAc,SAAS,MAAM,6CAA0B,IAAA;iBAelE,cACP,WACA,YACG,SACF,MAAM;EAA6B;oBAA8B,IAAA;iBAgB3D,aAAa,cAAc,SAAS,MAAM,wCAAqB,IAAA;cAclE,gBAAa;;6CAsBlB;iBAEQ,QACP,WACA,gBACG,SACF,MAAM,wBAAwB,oBAAoB,iCAAc,IAAA;iBAY1D,eAAe,cAAc,SAAS,MAAM,wCAAqB,IAAA;iBAajE,aACP,cACG,SACF,MAAM,sBAAsB,yBAAM,IAAA;iBAoB5B,aAAa,cAAc,SAAS,MAAM,wCAAqB,IAAA;iBAc/D,mBAAmB,cAAc,SAAS,MAAM,sCAAmB,IAAA;iBAgBnE,iBACP,UACA,cACG,SACF,MAAM;EACP,WAAW,MAAM;oBAClB,IAAA;iBA0BQ,aACP,WACA,UACA,WACG,SACF,MAAM;EACP,SAAS;IAAQ;;oBAClB,IAAA"}
1
+ {"version":3,"file":"field.d.mts","names":[],"sources":["../../src/core/field.tsx"],"mappings":";;;;;iBAWS,WAAW,cAAc,SAAS,MAAM,6CAA0B,IAAA;iBAelE,cACP,WACA,YACG,SACF,MAAM;EAA6B;oBAA8B,IAAA;iBAiB3D,aAAa,cAAc,SAAS,MAAM,wCAAqB,IAAA;cAclE,gBAAa;;6CAsBlB;iBAEQ,QACP,WACA,gBACG,SACF,MAAM,wBAAwB,oBAAoB,iCAAc,IAAA;iBAY1D,eAAe,cAAc,SAAS,MAAM,wCAAqB,IAAA;iBAajE,aACP,cACG,SACF,MAAM,sBAAsB,yBAAM,IAAA;iBAoB5B,aAAa,cAAc,SAAS,MAAM,wCAAqB,IAAA;iBAc/D,mBAAmB,cAAc,SAAS,MAAM,sCAAmB,IAAA;iBAgBnE,iBACP,UACA,cACG,SACF,MAAM;EACP,WAAW,MAAM;oBAClB,IAAA;iBA0BQ,aACP,WACA,UACA,WACG,SACF,MAAM;EACP,SAAS;IAAQ;;oBAClB,IAAA"}
package/dist/core/field.mjs CHANGED
@@ -22,7 +22,7 @@ var field_exports = /* @__PURE__ */ __exportAll({
22
22
  function FieldSet({ className, ...props }) {
23
23
  return /* @__PURE__ */ jsx("fieldset", {
24
24
  "data-slot": "field-set",
25
- className: cn("flex flex-col gap-6", `has-[>[data-slot=checkbox-group]]:gap-3
25
+ className: cn("m-0 flex flex-col gap-6 border-0 p-0", `has-[>[data-slot=checkbox-group]]:gap-3
26
26
  has-[>[data-slot=radio-group]]:gap-3`, className),
27
27
  ...props
28
28
  });
@@ -31,7 +31,7 @@ function FieldLegend({ className, variant = "legend", ...props }) {
31
31
  return /* @__PURE__ */ jsx("legend", {
32
32
  "data-slot": "field-legend",
33
33
  "data-variant": variant,
34
- className: cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
34
+ className: cn("p-0", "mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
35
35
  ...props
36
36
  });
37
37
  }
@@ -124,7 +124,7 @@ function FieldError({ className, children, errors, ...props }) {
124
124
  const uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()];
125
125
  if (uniqueErrors?.length == 1) return uniqueErrors[0]?.message;
126
126
  return /* @__PURE__ */ jsx("ul", {
127
- className: "ml-4 flex list-disc flex-col gap-1",
127
+ className: "m-0 ml-4 flex list-disc flex-col gap-1 p-0",
128
128
  children: uniqueErrors.map((error, index) => error?.message && /* @__PURE__ */ jsx("li", { children: error.message }, index))
129
129
  });
130
130
  }, [children, errors]);
package/dist/core/field.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"field.mjs","names":[],"sources":["../../src/core/field.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Label } from './label';\nimport { Separator } from './separator';\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n return (\n <fieldset\n data-slot=\"field-set\"\n className={cn(\n 'flex flex-col gap-6',\n `has-[>[data-slot=checkbox-group]]:gap-3\n has-[>[data-slot=radio-group]]:gap-3`,\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldLegend({\n className,\n variant = 'legend',\n ...props\n}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n return (\n <legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(\n 'mb-3 font-medium',\n 'data-[variant=legend]:text-base',\n 'data-[variant=label]:text-sm',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"field-group\"\n className={cn(\n `group/field-group @container/field-group flex w-full flex-col gap-7\n data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4`,\n className,\n )}\n {...props}\n />\n );\n}\n\nconst fieldVariants = cva(\n 'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',\n {\n variants: {\n orientation: {\n vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],\n horizontal: [\n 'flex-row items-center',\n '[&>[data-slot=field-label]]:flex-auto',\n 'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n ],\n responsive: [\n 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',\n '@md/field-group:[&>[data-slot=field-label]]:flex-auto',\n '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n ],\n },\n },\n defaultVariants: {\n orientation: 'vertical',\n },\n },\n);\n\nfunction Field({\n className,\n orientation = 'vertical',\n ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(fieldVariants({ orientation }), className)}\n {...props}\n />\n );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"field-content\"\n className={cn(\n 'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldLabel({\n className,\n ...props\n}: React.ComponentProps<typeof Label>) {\n return (\n <Label\n data-slot=\"field-label\"\n className={cn(\n `group/field-label peer/field-label flex w-fit gap-2 leading-snug\n group-data-[disabled=true]/field:opacity-50`,\n `has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\n has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border\n [&>*]:data-[slot=field]:p-4`,\n `has-data-[state=checked]:bg-primary/5\n has-data-[state=checked]:border-primary\n dark:has-data-[state=checked]:bg-primary/10`,\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"field-label\"\n className={cn(\n `flex w-fit items-center gap-2 text-sm leading-snug font-medium\n group-data-[disabled=true]/field:opacity-50`,\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n return (\n <p\n data-slot=\"field-description\"\n className={cn(\n `text-muted-foreground text-sm leading-normal font-normal\n group-has-[[data-orientation=horizontal]]/field:text-balance`,\n 'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<'div'> & {\n children?: React.ReactNode;\n}) {\n return (\n <div\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(\n `relative -my-2 h-5 text-sm\n group-data-[variant=outline]/field-group:-mb-2`,\n className,\n )}\n {...props}\n >\n <Separator className=\"absolute inset-0 top-1/2\" />\n {children && (\n <span\n className=\"bg-background text-muted-foreground relative mx-auto block\n w-fit px-2\"\n data-slot=\"field-separator-content\"\n >\n {children}\n </span>\n )}\n </div>\n );\n}\n\nfunction FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<'div'> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [\n ...new Map(errors.map(error => [error?.message, error])).values(),\n ];\n\n if (uniqueErrors?.length == 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n {uniqueErrors.map(\n (error, index) =>\n error?.message && <li key={index}>{error.message}</li>,\n )}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <div\n role=\"alert\"\n data-slot=\"field-error\"\n className={cn('text-destructive text-sm font-normal', className)}\n {...props}\n >\n {content}\n </div>\n );\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n};\n"],"mappings":"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"}
1
+ {"version":3,"file":"field.mjs","names":[],"sources":["../../src/core/field.tsx"],"sourcesContent":["'use client';\n\nimport { useMemo } from 'react';\n\nimport { type VariantProps, cva } from 'class-variance-authority';\n\nimport { cn } from '@repo/ui/utils';\n\nimport { Label } from './label';\nimport { Separator } from './separator';\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n return (\n <fieldset\n data-slot=\"field-set\"\n className={cn(\n 'm-0 flex flex-col gap-6 border-0 p-0',\n `has-[>[data-slot=checkbox-group]]:gap-3\n has-[>[data-slot=radio-group]]:gap-3`,\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldLegend({\n className,\n variant = 'legend',\n ...props\n}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n return (\n <legend\n data-slot=\"field-legend\"\n data-variant={variant}\n className={cn(\n 'p-0',\n 'mb-3 font-medium',\n 'data-[variant=legend]:text-base',\n 'data-[variant=label]:text-sm',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"field-group\"\n className={cn(\n `group/field-group @container/field-group flex w-full flex-col gap-7\n data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4`,\n className,\n )}\n {...props}\n />\n );\n}\n\nconst fieldVariants = cva(\n 'group/field flex w-full gap-3 data-[invalid=true]:text-destructive',\n {\n variants: {\n orientation: {\n vertical: ['flex-col [&>*]:w-full [&>.sr-only]:w-auto'],\n horizontal: [\n 'flex-row items-center',\n '[&>[data-slot=field-label]]:flex-auto',\n 'has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n ],\n responsive: [\n 'flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto',\n '@md/field-group:[&>[data-slot=field-label]]:flex-auto',\n '@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n ],\n },\n },\n defaultVariants: {\n orientation: 'vertical',\n },\n },\n);\n\nfunction Field({\n className,\n orientation = 'vertical',\n ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {\n return (\n <div\n role=\"group\"\n data-slot=\"field\"\n data-orientation={orientation}\n className={cn(fieldVariants({ orientation }), className)}\n {...props}\n />\n );\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"field-content\"\n className={cn(\n 'group/field-content flex flex-1 flex-col gap-1.5 leading-snug',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldLabel({\n className,\n ...props\n}: React.ComponentProps<typeof Label>) {\n return (\n <Label\n data-slot=\"field-label\"\n className={cn(\n `group/field-label peer/field-label flex w-fit gap-2 leading-snug\n group-data-[disabled=true]/field:opacity-50`,\n `has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\n has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border\n [&>*]:data-[slot=field]:p-4`,\n `has-data-[state=checked]:bg-primary/5\n has-data-[state=checked]:border-primary\n dark:has-data-[state=checked]:bg-primary/10`,\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"field-label\"\n className={cn(\n `flex w-fit items-center gap-2 text-sm leading-snug font-medium\n group-data-[disabled=true]/field:opacity-50`,\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n return (\n <p\n data-slot=\"field-description\"\n className={cn(\n `text-muted-foreground text-sm leading-normal font-normal\n group-has-[[data-orientation=horizontal]]/field:text-balance`,\n 'last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5',\n '[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction FieldSeparator({\n children,\n className,\n ...props\n}: React.ComponentProps<'div'> & {\n children?: React.ReactNode;\n}) {\n return (\n <div\n data-slot=\"field-separator\"\n data-content={!!children}\n className={cn(\n `relative -my-2 h-5 text-sm\n group-data-[variant=outline]/field-group:-mb-2`,\n className,\n )}\n {...props}\n >\n <Separator className=\"absolute inset-0 top-1/2\" />\n {children && (\n <span\n className=\"bg-background text-muted-foreground relative mx-auto block\n w-fit px-2\"\n data-slot=\"field-separator-content\"\n >\n {children}\n </span>\n )}\n </div>\n );\n}\n\nfunction FieldError({\n className,\n children,\n errors,\n ...props\n}: React.ComponentProps<'div'> & {\n errors?: Array<{ message?: string } | undefined>;\n}) {\n const content = useMemo(() => {\n if (children) {\n return children;\n }\n\n if (!errors?.length) {\n return null;\n }\n\n const uniqueErrors = [\n ...new Map(errors.map(error => [error?.message, error])).values(),\n ];\n\n if (uniqueErrors?.length == 1) {\n return uniqueErrors[0]?.message;\n }\n\n return (\n <ul className=\"m-0 ml-4 flex list-disc flex-col gap-1 p-0\">\n {uniqueErrors.map(\n (error, index) =>\n error?.message && <li key={index}>{error.message}</li>,\n )}\n </ul>\n );\n }, [children, errors]);\n\n if (!content) {\n return null;\n }\n\n return (\n <div\n role=\"alert\"\n data-slot=\"field-error\"\n className={cn('text-destructive text-sm font-normal', className)}\n {...props}\n >\n {content}\n </div>\n );\n}\n\nexport {\n Field,\n FieldLabel,\n FieldDescription,\n FieldError,\n FieldGroup,\n FieldLegend,\n FieldSeparator,\n FieldSet,\n FieldContent,\n FieldTitle,\n};\n"],"mappings":"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"}
package/dist/style.css CHANGED
@@ -995,6 +995,10 @@
995
995
  border-style: var(--tw-border-style);
996
996
  border-width: 1px;
997
997
  }
998
+ .border-0 {
999
+ border-style: var(--tw-border-style);
1000
+ border-width: 0px;
1001
+ }
998
1002
  .border-r-2 {
999
1003
  border-right-style: var(--tw-border-style);
1000
1004
  border-right-width: 2px;
@@ -2479,73 +2483,73 @@
2479
2483
  align-items: flex-start;
2480
2484
  }
2481
2485
  }
2482
- .dark\:border-input:is(.dark *) {
2486
+ .dark\:border-input:is(.dark *, [data-theme="dark"] *) {
2483
2487
  border-color: var(--input);
2484
2488
  }
2485
- .dark\:bg-destructive\/60:is(.dark *) {
2489
+ .dark\:bg-destructive\/60:is(.dark *, [data-theme="dark"] *) {
2486
2490
  background-color: var(--destructive);
2487
2491
  @supports (color: color-mix(in lab, red, red)) {
2488
2492
  background-color: color-mix(in oklab, var(--destructive) 60%, transparent);
2489
2493
  }
2490
2494
  }
2491
- .dark\:bg-input\/30:is(.dark *) {
2495
+ .dark\:bg-input\/30:is(.dark *, [data-theme="dark"] *) {
2492
2496
  background-color: var(--input);
2493
2497
  @supports (color: color-mix(in lab, red, red)) {
2494
2498
  background-color: color-mix(in oklab, var(--input) 30%, transparent);
2495
2499
  }
2496
2500
  }
2497
- .dark\:text-green-400:is(.dark *) {
2501
+ .dark\:text-green-400:is(.dark *, [data-theme="dark"] *) {
2498
2502
  color: var(--color-green-400);
2499
2503
  }
2500
- .dark\:text-yellow-400:is(.dark *) {
2504
+ .dark\:text-yellow-400:is(.dark *, [data-theme="dark"] *) {
2501
2505
  color: var(--color-yellow-400);
2502
2506
  }
2503
2507
  @media (hover: hover) {
2504
- .dark\:hover\:bg-accent\/50:is(.dark *):hover {
2508
+ .dark\:hover\:bg-accent\/50:is(.dark *, [data-theme="dark"] *):hover {
2505
2509
  background-color: var(--accent);
2506
2510
  }
2507
2511
  @supports (color: color-mix(in lab, red, red)) {
2508
- .dark\:hover\:bg-accent\/50:is(.dark *):hover {
2512
+ .dark\:hover\:bg-accent\/50:is(.dark *, [data-theme="dark"] *):hover {
2509
2513
  background-color: color-mix(in oklab, var(--accent) 50%, transparent);
2510
2514
  }
2511
2515
  }
2512
- .dark\:hover\:bg-input\/50:is(.dark *):hover {
2516
+ .dark\:hover\:bg-input\/50:is(.dark *, [data-theme="dark"] *):hover {
2513
2517
  background-color: var(--input);
2514
2518
  }
2515
2519
  @supports (color: color-mix(in lab, red, red)) {
2516
- .dark\:hover\:bg-input\/50:is(.dark *):hover {
2520
+ .dark\:hover\:bg-input\/50:is(.dark *, [data-theme="dark"] *):hover {
2517
2521
  background-color: color-mix(in oklab, var(--input) 50%, transparent);
2518
2522
  }
2519
2523
  }
2520
2524
  }
2521
- .dark\:focus-visible\:ring-destructive\/40:is(.dark *):focus-visible {
2525
+ .dark\:focus-visible\:ring-destructive\/40:is(.dark *, [data-theme="dark"] *):focus-visible {
2522
2526
  --tw-ring-color: var(--destructive);
2523
2527
  @supports (color: color-mix(in lab, red, red)) {
2524
2528
  --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
2525
2529
  }
2526
2530
  }
2527
- .dark\:has-data-\[state\=checked\]\:bg-primary\/10:is(.dark *):has([data-state="checked"]) {
2531
+ .dark\:has-data-\[state\=checked\]\:bg-primary\/10:is(.dark *, [data-theme="dark"] *):has([data-state="checked"]) {
2528
2532
  background-color: var(--primary);
2529
2533
  @supports (color: color-mix(in lab, red, red)) {
2530
2534
  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
2531
2535
  }
2532
2536
  }
2533
- .dark\:aria-invalid\:ring-destructive\/40:is(.dark *)[aria-invalid="true"] {
2537
+ .dark\:aria-invalid\:ring-destructive\/40:is(.dark *, [data-theme="dark"] *)[aria-invalid="true"] {
2534
2538
  --tw-ring-color: var(--destructive);
2535
2539
  @supports (color: color-mix(in lab, red, red)) {
2536
2540
  --tw-ring-color: color-mix(in oklab, var(--destructive) 40%, transparent);
2537
2541
  }
2538
2542
  }
2539
- .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *)[data-state="checked"] {
2543
+ .dark\:data-\[state\=checked\]\:bg-primary:is(.dark *, [data-theme="dark"] *)[data-state="checked"] {
2540
2544
  background-color: var(--primary);
2541
2545
  }
2542
- .dark\:data-\[state\=checked\]\:bg-primary-foreground:is(.dark *)[data-state="checked"] {
2546
+ .dark\:data-\[state\=checked\]\:bg-primary-foreground:is(.dark *, [data-theme="dark"] *)[data-state="checked"] {
2543
2547
  background-color: var(--primary-foreground);
2544
2548
  }
2545
- .dark\:data-\[state\=unchecked\]\:bg-foreground:is(.dark *)[data-state="unchecked"] {
2549
+ .dark\:data-\[state\=unchecked\]\:bg-foreground:is(.dark *, [data-theme="dark"] *)[data-state="unchecked"] {
2546
2550
  background-color: var(--foreground);
2547
2551
  }
2548
- .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *)[data-state="unchecked"] {
2552
+ .dark\:data-\[state\=unchecked\]\:bg-input\/80:is(.dark *, [data-theme="dark"] *)[data-state="unchecked"] {
2549
2553
  background-color: var(--input);
2550
2554
  @supports (color: color-mix(in lab, red, red)) {
2551
2555
  background-color: color-mix(in oklab, var(--input) 80%, transparent);
@@ -2758,7 +2762,7 @@
2758
2762
  --sidebar-border: oklch(92.2% 0 0);
2759
2763
  --sidebar-ring: oklch(70.8% 0 0);
2760
2764
  }
2761
- .dark {
2765
+ .dark, [data-theme="dark"] {
2762
2766
  --background: oklch(14.5% 0 0);
2763
2767
  --foreground: oklch(98.5% 0 0);
2764
2768
  --card: oklch(20.5% 0 0);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jbpark/ui-kit",
3
- "version": "5.4.1",
3
+ "version": "5.4.3",
4
4
  "description": "Modern React UI component library built with TypeScript, Tailwind CSS, and Radix UI. Featuring atoms, molecules, organisms and layout templates for building beautiful interfaces.",
5
5
  "keywords": [
6
6
  "react",