@biotechusa/pdo-ui 1.0.5 → 1.0.7

package/dist/accordion.d.ts

@@ -0,0 +1,6 @@
+import { Accordion as AccordionPrimitive } from "@base-ui-components/react/accordion";
+declare function Accordion(props: AccordionPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
+declare function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
+declare function AccordionPanel({ className, children, ...props }: AccordionPrimitive.Panel.Props): import("react/jsx-runtime").JSX.Element;
+export { Accordion, AccordionItem, AccordionTrigger, AccordionPanel, AccordionPanel as AccordionContent, };

package/dist/accordion.js

@@ -0,0 +1,45 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion } from "@base-ui-components/react/accordion";
+import { ChevronDownIcon } from "lucide-react";
+import { cn } from "./lib/utils.js";
+function accordion_Accordion(props) {
+    return /*#__PURE__*/ jsx(Accordion.Root, {
+        "data-slot": "accordion",
+        ...props
+    });
+}
+function AccordionItem({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Accordion.Item, {
+        className: cn("border-b last:border-b-0", className),
+        "data-slot": "accordion-item",
+        ...props
+    });
+}
+function AccordionTrigger({ className, children, ...props }) {
+    return /*#__PURE__*/ jsx(Accordion.Header, {
+        className: "flex",
+        children: /*#__PURE__*/ jsxs(Accordion.Trigger, {
+            className: cn("flex flex-1 cursor-pointer items-start justify-between gap-4 rounded-md py-4 text-left font-medium text-sm outline-none transition-all focus-visible:ring-[3px] focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-64 [&[data-panel-open]>svg]:rotate-180", className),
+            "data-slot": "accordion-trigger",
+            ...props,
+            children: [
+                children,
+                /*#__PURE__*/ jsx(ChevronDownIcon, {
+                    className: "pointer-events-none size-4 shrink-0 translate-y-0.5 opacity-72 transition-transform duration-200 ease-in-out"
+                })
+            ]
+        })
+    });
+}
+function AccordionPanel({ className, children, ...props }) {
+    return /*#__PURE__*/ jsx(Accordion.Panel, {
+        className: "h-(--accordion-panel-height) overflow-hidden text-muted-foreground text-sm transition-[height] duration-200 ease-in-out data-ending-style:h-0 data-starting-style:h-0",
+        "data-slot": "accordion-panel",
+        ...props,
+        children: /*#__PURE__*/ jsx("div", {
+            className: cn("pt-0 pb-4", className),
+            children: children
+        })
+    });
+}
+export { accordion_Accordion as Accordion, AccordionPanel as AccordionContent, AccordionItem, AccordionPanel, AccordionTrigger };

package/dist/alert-dialog.js

@@ -20,7 +20,7 @@ function AlertDialogPortal(props) {
 }
 function AlertDialogBackdrop({ className, ...props }) {
     return /*#__PURE__*/ jsx(AlertDialog.Backdrop, {
-        className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+        className: cn("fixed inset-0 z-50 bg-[oklch(from_var(--destructive)_0.03_c_h)]/30 backdrop-blur-sm transition-all duration-200 ease-out data-ending-style:opacity-0 data-starting-style:opacity-0", className),
         "data-slot": "alert-dialog-backdrop",
         ...props
     });

package/dist/autocomplete.js

@@ -49,7 +49,7 @@ function AutocompletePopup({ className, children, sideOffset = 4, ...props }) {
 }
 function AutocompleteItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsx(Autocomplete.Item, {
-        className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm", className),
+        className: cn("flex cursor-default select-none items-center rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm", className),
         "data-slot": "autocomplete-item",
         ...props,
         children: children

package/dist/badge.js

@@ -18,7 +18,7 @@ const badgeVariants = cva("relative inline-flex shrink-0 items-center justify-ce
             destructive: "bg-destructive text-white [button,a&]:hover:bg-destructive/90",
             error: "bg-destructive/8 text-destructive-foreground dark:bg-destructive/16",
             info: "bg-info/8 text-info-foreground dark:bg-info/16",
-            outline: "border-border bg-transparent dark:bg-input/32 [button,a&]:hover:bg-accent/50 dark:[button,a&]:hover:bg-input/48",
+            outline: "border-border bg-transparent dark:bg-input/32 [button,a&]:hover:bg-highlight/50 dark:[button,a&]:hover:bg-input/48",
             secondary: "bg-secondary text-secondary-foreground [button,a&]:hover:bg-secondary/90",
             success: "bg-success/8 text-success-foreground dark:bg-success/16",
             warning: "bg-warning/8 text-warning-foreground dark:bg-warning/16"

package/dist/button.d.ts

@@ -2,7 +2,7 @@ import { useRender } from "@base-ui-components/react/use-render";
 import { type VariantProps } from "class-variance-authority";
 import type * as React from "react";
 declare const buttonVariants: (props?: ({
-    size?: "touch" | "default" | "icon" | "sm" | "lg" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
+    size?: "default" | "touch" | "icon" | "sm" | "lg" | "icon-lg" | "icon-sm" | "icon-xl" | "icon-xs" | "xl" | "xs" | null | undefined;
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "destructive-outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface ButtonProps extends useRender.ComponentProps<"button"> {

package/dist/button.js

@@ -25,9 +25,9 @@ const buttonVariants = cva("relative inline-flex shrink-0 cursor-pointer items-c
             default: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-primary bg-primary text-primary-foreground shadow-primary/24 shadow-xs hover:bg-primary/90 [&:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none",
             destructive: "not-disabled:inset-shadow-[0_1px_--theme(--color-white/16%)] border-destructive bg-destructive text-white shadow-destructive/24 shadow-xs hover:bg-destructive/90 [&:is(:active,[data-pressed])]:inset-shadow-[0_1px_--theme(--color-black/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none",
             "destructive-outline": "border-border bg-transparent text-destructive-foreground shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:border-destructive/32 [&:is(:hover,[data-pressed])]:bg-destructive/4",
-            ghost: "border-transparent hover:bg-accent data-pressed:bg-accent",
+            ghost: "border-transparent hover:bg-highlight data-pressed:bg-highlight",
             link: "border-transparent underline-offset-4 hover:underline",
-            outline: "border-border bg-background shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:bg-accent/50 dark:[&:is(:hover,[data-pressed])]:bg-input/64",
+            outline: "border-border bg-background shadow-xs not-disabled:not-active:not-data-pressed:before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:not-disabled:before:shadow-[0_-1px_--theme(--color-white/4%)] dark:not-disabled:not-active:not-data-pressed:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,:active,[data-pressed])]:shadow-none [&:is(:hover,[data-pressed])]:bg-highlight/50 dark:[&:is(:hover,[data-pressed])]:bg-input/64",
             secondary: "border-secondary bg-secondary text-secondary-foreground hover:bg-secondary/90 data-pressed:bg-secondary/90"
         }
     }

package/dist/checkbox.js

@@ -3,11 +3,11 @@ import { Checkbox } from "@base-ui-components/react/checkbox";
 import { cn } from "./lib/utils.js";
 function checkbox_Checkbox({ className, ...props }) {
     return /*#__PURE__*/ jsx(Checkbox.Root, {
-        className: cn("relative inline-flex size-4 shrink-0 items-center justify-center rounded-lg border border-input bg-background bg-clip-padding shadow-xs outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(0.25rem-1px)] not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:bg-clip-border dark:aria-invalid:ring-destructive/24 dark:not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,[data-checked],[aria-invalid])]:shadow-none", className),
+        className: cn("relative inline-flex size-4.5 shrink-0 items-center justify-center rounded-[5px] border border-input bg-background bg-clip-padding shadow-sm outline-none ring-ring transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(0.25rem-1px)] not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/6%)] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 aria-invalid:border-destructive/36 focus-visible:aria-invalid:border-destructive/64 focus-visible:aria-invalid:ring-destructive/48 dark:not-data-checked:bg-input/32 dark:bg-clip-border dark:aria-invalid:ring-destructive/24 dark:not-disabled:not-data-checked:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)] [&:is(:disabled,[data-checked],[aria-invalid])]:shadow-none", className),
         "data-slot": "checkbox",
         ...props,
         children: /*#__PURE__*/ jsx(Checkbox.Indicator, {
-            className: "-inset-px absolute flex items-center justify-center rounded-lg text-primary-foreground data-unchecked:hidden data-checked:bg-primary data-indeterminate:text-foreground",
+            className: "-inset-px absolute flex items-center justify-center rounded-[5px] text-primary-foreground data-unchecked:hidden data-checked:bg-[oklch(from_var(--accent)_l_0.07_h)] transition-all duration-100 data-indeterminate:text-foreground",
             "data-slot": "checkbox-indicator",
             render: (props, state)=>/*#__PURE__*/ jsx("span", {
                     ...props,
@@ -37,7 +37,7 @@ function checkbox_Checkbox({ className, ...props }) {
                         width: "24",
                         xmlns: "http://www.w3.org/2000/svg",
                         children: /*#__PURE__*/ jsx("path", {
-                            d: "M5.252 12.7 10.2 18.63 18.748 5.37"
+                            d: "M5.252 13.7 10.2 18.63 18.748 6.37"
                         })
                     })
                 })

package/dist/combobox.js

@@ -83,7 +83,7 @@ function ComboboxPopup({ className, children, sideOffset = 4, ...props }) {
 }
 function ComboboxItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs(Combobox.Item, {
-        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-highlight-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         "data-slot": "combobox-item",
         ...props,
         children: [
@@ -193,7 +193,7 @@ function ComboboxChips({ className, ...props }) {
 }
 function ComboboxChip({ children, ...props }) {
     return /*#__PURE__*/ jsxs(Combobox.Chip, {
-        className: "flex items-center rounded-[calc(var(--radius-md)-1px)] bg-accent ps-2 font-medium text-accent-foreground text-xs outline-none",
+        className: "flex items-center rounded-[calc(var(--radius-md)-1px)] bg-highlight ps-2 font-medium text-accent-foreground text-xs outline-none",
         "data-slot": "combobox-chip",
         ...props,
         children: [

package/dist/dialog.js

@@ -22,7 +22,7 @@ function DialogClose(props) {
 }
 function DialogBackdrop({ className, ...props }) {
     return /*#__PURE__*/ jsx(Dialog.Backdrop, {
-        className: cn("fixed inset-0 z-50 bg-black/32 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", className),
+        className: cn("fixed inset-0 z-50 bg-[oklch(from_var(--accent)_0.09_c_h)]/30 backdrop-blur-sm transition-all duration-200 data-ending-style:opacity-0 data-starting-style:opacity-0", className),
         "data-slot": "dialog-backdrop",
         ...props
     });

package/dist/index.css

@@ -672,6 +672,16 @@
     height: calc(var(--spacing) * 4);
   }
 
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
+  }
+
+  .size-5\.5 {
+    width: calc(var(--spacing) * 5.5);
+    height: calc(var(--spacing) * 5.5);
+  }
+
   .size-6 {
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
@@ -702,6 +712,10 @@
     height: 100%;
   }
 
+  .h-\(--accordion-panel-height\) {
+    height: var(--accordion-panel-height);
+  }
+
   .h-\(--active-tab-height\) {
     height: var(--active-tab-height);
   }
@@ -834,6 +848,10 @@
     width: calc(var(--spacing) * 80);
   }
 
+  .w-\[480px\] {
+    width: 480px;
+  }
+
   .w-\[calc\(100\%-\(--spacing\(12\)\)\)\] {
     width: calc(100% - (calc(var(--spacing) * 12)));
   }
@@ -967,6 +985,11 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
+  .translate-y-0\.5 {
+    --tw-translate-y: calc(var(--spacing) * .5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
+
   .scale-84 {
     --tw-scale-x: 84%;
     --tw-scale-y: 84%;
@@ -1140,6 +1163,10 @@
     border-radius: var(--radius-2xl);
   }
 
+  .rounded-\[5px\] {
+    border-radius: 5px;
+  }
+
   .rounded-\[calc\(var\(--radius-md\)-1px\)\] {
     border-radius: calc(var(--radius-md)  - 1px);
   }
@@ -1272,8 +1299,24 @@
     }
   }
 
-  .bg-accent {
-    background-color: var(--accent);
+  .bg-\[oklch\(from_var\(--accent\)_0\.09_c_h\)\]\/30 {
+    background-color: oklch(from var(--accent) .09 c h);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\[oklch\(from_var\(--accent\)_0\.09_c_h\)\]\/30 {
+      background-color: color-mix(in oklab, oklch(from var(--accent) .09 c h) 30%, transparent);
+    }
+  }
+
+  .bg-\[oklch\(from_var\(--destructive\)_0\.03_c_h\)\]\/30 {
+    background-color: oklch(from var(--destructive) .03 c h);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .bg-\[oklch\(from_var\(--destructive\)_0\.03_c_h\)\]\/30 {
+      background-color: color-mix(in oklab, oklch(from var(--destructive) .03 c h) 30%, transparent);
+    }
   }
 
   .bg-amber-500 {
@@ -1336,6 +1379,10 @@
     }
   }
 
+  .bg-highlight {
+    background-color: var(--highlight);
+  }
+
   .bg-info\/4 {
     background-color: var(--info);
   }
@@ -1620,6 +1667,10 @@
     padding-inline-end: calc(calc(var(--spacing) * 3)  - 1px);
   }
 
+  .pt-0 {
+    padding-top: calc(var(--spacing) * 0);
+  }
+
   .pt-6 {
     padding-top: calc(var(--spacing) * 6);
   }
@@ -1628,6 +1679,10 @@
     padding-top: calc(calc(var(--spacing) * 3)  - 1px);
   }
 
+  .pb-4 {
+    padding-bottom: calc(var(--spacing) * 4);
+  }
+
   .pb-\[calc\(--spacing\(3\)-1px\)\] {
     padding-bottom: calc(calc(var(--spacing) * 3)  - 1px);
   }
@@ -1834,17 +1889,22 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  .inset-shadow-\[0_1px_--theme\(--color-black\/4\%\)\] {
-    --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, #0000000a);
+  .ring-1 {
+    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
+  .inset-shadow-\[0_1px_--theme\(--color-black\/8\%\)\] {
+    --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, #00000014);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .inset-shadow-\[0_1px_--theme\(--color-black\/4\%\)\] {
-      --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, color-mix(in oklab, var(--color-black) 4%, transparent));
+    .inset-shadow-\[0_1px_--theme\(--color-black\/8\%\)\] {
+      --tw-inset-shadow: inset 0 1px var(--tw-inset-shadow-color, color-mix(in oklab, var(--color-black) 8%, transparent));
     }
   }
 
-  .inset-shadow-\[0_1px_--theme\(--color-black\/4\%\)\] {
+  .inset-shadow-\[0_1px_--theme\(--color-black\/8\%\)\] {
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
@@ -1888,6 +1948,16 @@
     }
   }
 
+  .ring-ring\/50 {
+    --tw-ring-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .ring-ring\/50 {
+      --tw-ring-color: color-mix(in oklab, var(--ring) 50%, transparent);
+    }
+  }
+
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
@@ -1920,6 +1990,12 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-\[height\] {
+    transition-property: height;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .transition-\[opacity\,translate\] {
     transition-property: opacity, translate;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1974,10 +2050,21 @@
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
 
+  .transition-transform {
+    transition-property: transform, translate, scale, rotate;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
+
   .delay-300 {
     transition-delay: .3s;
   }
 
+  .duration-100 {
+    --tw-duration: .1s;
+    transition-duration: .1s;
+  }
+
   .duration-200 {
     --tw-duration: .2s;
     transition-duration: .2s;
@@ -2192,8 +2279,8 @@
     border-bottom-width: 0;
   }
 
-  .group-active\/switch\:w-4\.5:is(:where(.group\/switch):active *) {
-    width: calc(var(--spacing) * 4.5);
+  .group-active\/switch\:w-6:is(:where(.group\/switch):active *) {
+    width: calc(var(--spacing) * 6);
   }
 
   .file\:me-3::file-selector-button {
@@ -2218,13 +2305,13 @@
     color: var(--foreground);
   }
 
-  .placeholder\:text-muted-foreground\/64::placeholder {
+  .placeholder\:text-muted-foreground\/80::placeholder {
     color: var(--muted-foreground);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .placeholder\:text-muted-foreground\/64::placeholder {
-      color: color-mix(in oklab, var(--muted-foreground) 64%, transparent);
+    .placeholder\:text-muted-foreground\/80::placeholder {
+      color: color-mix(in oklab, var(--muted-foreground) 80%, transparent);
     }
   }
 
@@ -2484,6 +2571,21 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
+  .not-disabled\:not-data-checked\:not-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/6\%\)\]:not(:disabled):not([data-checked]):not([aria-invalid="true"]):before {
+    content: var(--tw-content);
+    --tw-shadow: 0 1px var(--tw-shadow-color, #0000000f);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .not-disabled\:not-data-checked\:not-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/6\%\)\]:not(:disabled):not([data-checked]):not([aria-invalid="true"]):before {
+      --tw-shadow: 0 1px var(--tw-shadow-color, color-mix(in oklab, var(--color-black) 6%, transparent));
+    }
+  }
+
+  .not-disabled\:not-data-checked\:not-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/6\%\)\]:not(:disabled):not([data-checked]):not([aria-invalid="true"]):before {
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
+
   .not-data-disabled\:not-focus-within\:not-aria-invalid\:before\:shadow-\[0_1px_--theme\(--color-black\/4\%\)\]:not([data-disabled]):not(:focus-within):not([aria-invalid="true"]):before {
     content: var(--tw-content);
     --tw-shadow: 0 1px var(--tw-shadow-color, #0000000a);
@@ -2580,6 +2682,11 @@
     display: none;
   }
 
+  .last\:border-b-0:last-child {
+    border-bottom-style: var(--tw-border-style);
+    border-bottom-width: 0;
+  }
+
   .empty\:m-0:empty {
     margin: calc(var(--spacing) * 0);
   }
@@ -2598,7 +2705,7 @@
   }
 
   @media (hover: hover) {
-    .hover\:bg-accent:hover, .hover\:bg-accent\/50:hover {
+    .hover\:bg-accent\/50:hover {
       background-color: var(--accent);
     }
 
@@ -2618,6 +2725,16 @@
       }
     }
 
+    .hover\:bg-highlight:hover, .hover\:bg-highlight\/50:hover {
+      background-color: var(--highlight);
+    }
+
+    @supports (color: color-mix(in lab, red, red)) {
+      .hover\:bg-highlight\/50:hover {
+        background-color: color-mix(in oklab, var(--highlight) 50%, transparent);
+      }
+    }
+
     .hover\:bg-muted:hover {
       background-color: var(--muted);
     }
@@ -2910,6 +3027,16 @@
     }
   }
 
+  .has-data-checked\:border-ring\/48:has([data-checked]) {
+    border-color: var(--ring);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-data-checked\:border-ring\/48:has([data-checked]) {
+      border-color: color-mix(in oklab, var(--ring) 48%, transparent);
+    }
+  }
+
   .has-data-checked\:bg-accent\/50:has([data-checked]) {
     background-color: var(--accent);
   }
@@ -2920,6 +3047,16 @@
     }
   }
 
+  .has-data-checked\:bg-highlight\/50:has([data-checked]) {
+    background-color: var(--highlight);
+  }
+
+  @supports (color: color-mix(in lab, red, red)) {
+    .has-data-checked\:bg-highlight\/50:has([data-checked]) {
+      background-color: color-mix(in oklab, var(--highlight) 50%, transparent);
+    }
+  }
+
   .has-data-starting-style\:scale-98:has([data-starting-style]) {
     --tw-scale-x: 98%;
     --tw-scale-y: 98%;
@@ -3133,6 +3270,10 @@
     }
   }
 
+  .data-active\:text-foreground[data-active] {
+    color: var(--foreground);
+  }
+
   .data-behind\:pointer-events-none[data-behind] {
     pointer-events: none;
   }
@@ -3146,8 +3287,16 @@
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
-  .data-checked\:bg-primary[data-checked] {
-    background-color: var(--primary);
+  .data-checked\:bg-\[oklch\(from_var\(--accent\)_l_0\.05_h\)\][data-checked] {
+    background-color: oklch(from var(--accent) l .05 h);
+  }
+
+  .data-checked\:bg-\[oklch\(from_var\(--accent\)_l_0\.07_h\)\][data-checked] {
+    background-color: oklch(from var(--accent) l .07 h);
+  }
+
+  .data-checked\:bg-accent[data-checked] {
+    background-color: var(--accent);
   }
 
   .data-checked\:group-active\/switch\:translate-x-2\.5[data-checked]:is(:where(.group\/switch):active *) {
@@ -3178,6 +3327,10 @@
     }
   }
 
+  .data-ending-style\:h-0[data-ending-style] {
+    height: calc(var(--spacing) * 0);
+  }
+
   .data-ending-style\:-translate-x-12[data-ending-style] {
     --tw-translate-x: calc(var(--spacing) * -12);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -3225,14 +3378,18 @@
     opacity: 1;
   }
 
-  .data-highlighted\:bg-accent[data-highlighted] {
-    background-color: var(--accent);
+  .data-highlighted\:bg-highlight[data-highlighted] {
+    background-color: var(--highlight);
   }
 
   .data-highlighted\:text-accent-foreground[data-highlighted] {
     color: var(--accent-foreground);
   }
 
+  .data-highlighted\:text-highlight-foreground[data-highlighted] {
+    color: var(--highlight-foreground);
+  }
+
   .data-hovering\:opacity-100[data-hovering] {
     opacity: 1;
   }
@@ -3272,8 +3429,8 @@
     opacity: 0;
   }
 
-  .data-pressed\:bg-accent[data-pressed] {
-    background-color: var(--accent);
+  .data-pressed\:bg-highlight[data-pressed] {
+    background-color: var(--highlight);
   }
 
   .data-pressed\:bg-secondary\/90[data-pressed] {
@@ -3312,8 +3469,8 @@
     animation-delay: 0s;
   }
 
-  .data-selected\:text-foreground[data-selected] {
-    color: var(--foreground);
+  .data-starting-style\:h-0[data-starting-style] {
+    height: calc(var(--spacing) * 0);
   }
 
   .data-starting-style\:-translate-x-12[data-starting-style] {
@@ -3351,8 +3508,8 @@
     display: none;
   }
 
-  .data-unchecked\:translate-x-0[data-unchecked] {
-    --tw-translate-x: calc(var(--spacing) * 0);
+  .data-unchecked\:translate-x-\[-4px\][data-unchecked] {
+    --tw-translate-x: -4px;
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
 
@@ -3360,10 +3517,6 @@
     background-color: var(--input);
   }
 
-  .data-\[disabled\]\:pointer-events-none[data-disabled] {
-    pointer-events: none;
-  }
-
   .data-\[orientation\=horizontal\]\:my-0\.5[data-orientation="horizontal"] {
     margin-block: calc(var(--spacing) * .5);
   }
@@ -3622,8 +3775,8 @@
   }
 
   @media (hover: hover) {
-    :is(.\*\:data-\[slot\=tabs-trigger\]\:hover\:bg-accent > *)[data-slot="tabs-trigger"]:hover {
-      background-color: var(--accent);
+    :is(.\*\:data-\[slot\=tabs-trigger\]\:hover\:bg-highlight > *)[data-slot="tabs-trigger"]:hover {
+      background-color: var(--highlight);
     }
   }
 
@@ -3894,10 +4047,6 @@
     border-color: var(--background);
   }
 
-  .dark\:bg-accent:is(.dark *) {
-    background-color: var(--accent);
-  }
-
   .dark\:bg-destructive\/16:is(.dark *) {
     background-color: var(--destructive);
   }
@@ -3908,6 +4057,10 @@
     }
   }
 
+  .dark\:bg-highlight:is(.dark *) {
+    background-color: var(--highlight);
+  }
+
   .dark\:bg-info\/16:is(.dark *) {
     background-color: var(--info);
   }
@@ -4157,8 +4310,8 @@
   }
 
   @media (hover: hover) {
-    .dark\:hover\:bg-accent:is(.dark *):hover {
-      background-color: var(--accent);
+    .dark\:hover\:bg-highlight:is(.dark *):hover {
+      background-color: var(--highlight);
     }
 
     .dark\:hover\:bg-input\/64:is(.dark *):hover {
@@ -4388,23 +4541,23 @@
     }
   }
 
-  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-accent\/50:is(:hover, [data-pressed]) {
-    background-color: var(--accent);
+  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
+    background-color: var(--destructive);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-accent\/50:is(:hover, [data-pressed]) {
-      background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
+      background-color: color-mix(in oklab, var(--destructive) 4%, transparent);
     }
   }
 
-  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
-    background-color: var(--destructive);
+  .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-highlight\/50:is(:hover, [data-pressed]) {
+    background-color: var(--highlight);
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-destructive\/4:is(:hover, [data-pressed]) {
-      background-color: color-mix(in oklab, var(--destructive) 4%, transparent);
+    .\[\&\:is\(\:hover\,\[data-pressed\]\)\]\:bg-highlight\/50:is(:hover, [data-pressed]) {
+      background-color: color-mix(in oklab, var(--highlight) 50%, transparent);
     }
   }
 
@@ -4617,6 +4770,10 @@
     border-bottom-width: 0;
   }
 
+  .\[\&\[data-panel-open\]\>svg\]\:rotate-180[data-panel-open] > svg {
+    rotate: 180deg;
+  }
+
   [data-size="sm"] + .\[\[data-size\=sm\]\+\&\]\:px-\[calc\(--spacing\(2\.5\)-1px\)\] {
     padding-inline: calc(calc(var(--spacing) * 2.5)  - 1px);
   }
@@ -4657,23 +4814,23 @@
   }
 
   @media (hover: hover) {
-    :is(.\[button\,a\&\]\:hover\:bg-accent\/50 button, a.\[button\,a\&\]\:hover\:bg-accent\/50):hover {
-      background-color: var(--accent);
+    :is(.\[button\,a\&\]\:hover\:bg-destructive\/90 button, a.\[button\,a\&\]\:hover\:bg-destructive\/90):hover {
+      background-color: var(--destructive);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :is(.\[button\,a\&\]\:hover\:bg-accent\/50 button, a.\[button\,a\&\]\:hover\:bg-accent\/50):hover {
-        background-color: color-mix(in oklab, var(--accent) 50%, transparent);
+      :is(.\[button\,a\&\]\:hover\:bg-destructive\/90 button, a.\[button\,a\&\]\:hover\:bg-destructive\/90):hover {
+        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
       }
     }
 
-    :is(.\[button\,a\&\]\:hover\:bg-destructive\/90 button, a.\[button\,a\&\]\:hover\:bg-destructive\/90):hover {
-      background-color: var(--destructive);
+    :is(.\[button\,a\&\]\:hover\:bg-highlight\/50 button, a.\[button\,a\&\]\:hover\:bg-highlight\/50):hover {
+      background-color: var(--highlight);
     }
 
     @supports (color: color-mix(in lab, red, red)) {
-      :is(.\[button\,a\&\]\:hover\:bg-destructive\/90 button, a.\[button\,a\&\]\:hover\:bg-destructive\/90):hover {
-        background-color: color-mix(in oklab, var(--destructive) 90%, transparent);
+      :is(.\[button\,a\&\]\:hover\:bg-highlight\/50 button, a.\[button\,a\&\]\:hover\:bg-highlight\/50):hover {
+        background-color: color-mix(in oklab, var(--highlight) 50%, transparent);
       }
     }
 
@@ -4848,20 +5005,20 @@
 }
 
 :root {
+  --accent: oklch(44% .12 146.31);
+  --accent-foreground: oklch(20.5% 0 0);
   --background: oklch(100% 0 0);
-  --foreground: oklch(14.5% 0 0);
+  --foreground: oklch(from var(--accent) .25 c h);
   --card: oklch(100% 0 0);
   --card-foreground: oklch(14.5% 0 0);
   --popover: oklch(100% 0 0);
   --popover-foreground: oklch(14.5% 0 0);
-  --primary: oklch(20.5% 0 0);
+  --primary: oklch(from var(--accent) .1 c h);
   --primary-foreground: oklch(98.5% 0 0);
   --secondary: oklch(97% 0 0);
   --secondary-foreground: oklch(20.5% 0 0);
   --muted: oklch(97% 0 0);
-  --muted-foreground: oklch(55.6% 0 0);
-  --accent: oklch(97% 0 0);
-  --accent-foreground: oklch(20.5% 0 0);
+  --muted-foreground: oklch(from var(--accent) .65 .015 h);
   --destructive: oklch(57.7% .245 27.325);
   --destructive-foreground: oklch(57.7% .245 27.325);
   --border: oklch(92.2% 0 0);
@@ -4882,6 +5039,8 @@
   --sidebar-border: oklch(92.2% 0 0);
   --sidebar-ring: oklch(70.8% 0 0);
   --spacing-touch: calc(var(--spacing) * 4);
+  --highlight: oklch(97% 0 0);
+  --highlight-foreground: oklch(20.5% 0 0);
   --info: var(--color-blue-500);
   --info-foreground: var(--color-blue-700);
   --success: var(--color-emerald-500);
@@ -4923,6 +5082,8 @@
   --sidebar-accent-foreground: oklch(98.5% 0 0);
   --sidebar-border: oklch(26.9% 0 0);
   --sidebar-ring: oklch(43.9% 0 0);
+  --highlight: oklch(97% 0 0);
+  --highlight-foreground: oklch(20.5% 0 0);
   --info: var(--color-blue-500);
   --info-foreground: var(--color-blue-400);
   --success: var(--color-emerald-500);

package/dist/index.d.ts

@@ -46,3 +46,4 @@ export { ToastProvider, toastManager } from "./toast";
 export type { ToastPosition } from "./toast";
 export { CircularProgress } from "./circular-progress";
 export type { CircularProgressProps } from "./circular-progress";
+export { Accordion, AccordionContent, AccordionItem, AccordionPanel, AccordionTrigger, } from "./accordion";

package/dist/index.js

@@ -42,4 +42,5 @@ import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, Toolba
 import { Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger } from "./tooltip.js";
 import { ToastProvider, toastManager } from "./toast.js";
 import { CircularProgress } from "./circular-progress.js";
-export { Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, Avatar, AvatarFallback, AvatarImage, Badge, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardPanel, CardTitle, Checkbox, CheckboxGroup, CircularProgress, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, Fieldset, FieldsetLegend, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, Group, GroupSeparator, GroupText, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubPopup, MenuSubTrigger, MenuTrigger, NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Radio, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPopup, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, SliderValue, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsPanel, TabsTab, TabsTrigger, Textarea, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSeparator, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, groupVariants, sheetPopupVariants, toastManager, toggleVariants };
+import { Accordion, AccordionContent, AccordionItem, AccordionPanel, AccordionTrigger } from "./accordion.js";
+export { Accordion, AccordionContent, AccordionItem, AccordionPanel, AccordionTrigger, Alert, AlertAction, AlertDescription, AlertDialog, AlertDialogBackdrop, AlertDialogClose, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPopup, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, Autocomplete, AutocompleteClear, AutocompleteCollection, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteInput, AutocompleteItem, AutocompleteList, AutocompletePopup, AutocompleteRow, AutocompleteSeparator, AutocompleteStatus, AutocompleteTrigger, AutocompleteValue, Avatar, AvatarFallback, AvatarImage, Badge, Button, ButtonGroup, ButtonGroupSeparator, ButtonGroupText, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardPanel, CardTitle, Checkbox, CheckboxGroup, CircularProgress, Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue, Dialog, DialogBackdrop, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity, Fieldset, FieldsetLegend, Form, Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle, Group, GroupSeparator, GroupText, Input, InputGroup, InputGroupAddon, InputGroupInput, InputGroupText, InputGroupTextarea, Label, Menu, MenuCheckboxItem, MenuGroup, MenuGroupLabel, MenuItem, MenuPopup, MenuPortal, MenuRadioGroup, MenuRadioItem, MenuSeparator, MenuShortcut, MenuSub, MenuSubPopup, MenuSubTrigger, MenuTrigger, NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverPopup, PopoverTitle, PopoverTrigger, Progress, ProgressIndicator, ProgressLabel, ProgressTrack, ProgressValue, Radio, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectGroupLabel, SelectItem, SelectPopup, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetBackdrop, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPopup, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Slider, SliderValue, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsPanel, TabsTab, TabsTrigger, Textarea, ToastProvider, Toggle, ToggleGroup, ToggleGroupItem, ToggleGroupSeparator, Toolbar, ToolbarButton, ToolbarGroup, ToolbarInput, ToolbarLink, ToolbarSeparator, Tooltip, TooltipContent, TooltipPopup, TooltipProvider, TooltipTrigger, badgeVariants, buttonVariants, groupVariants, sheetPopupVariants, toastManager, toggleVariants };

package/dist/input.js

@@ -7,7 +7,7 @@ function input_Input({ className, size = "default", unstyled = false, ...props }
         "data-size": size,
         "data-slot": "input-control",
         children: /*#__PURE__*/ jsx(Input, {
-            className: cn("w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/64", "sm" === size && "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]", "lg" === size && "py-[calc(--spacing(2)-1px)]", "touch" === size && "py-[calc(--spacing(4)-1px)] px-[calc(--spacing(4)-1px)]", "search" === props.type && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", "file" === props.type && "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm"),
+            className: cn("w-full min-w-0 rounded-[inherit] px-[calc(--spacing(3)-1px)] py-[calc(--spacing(1.5)-1px)] outline-none placeholder:text-muted-foreground/80", "sm" === size && "px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1)-1px)]", "lg" === size && "py-[calc(--spacing(2)-1px)]", "touch" === size && "py-[calc(--spacing(4)-1px)] px-[calc(--spacing(4)-1px)]", "search" === props.type && "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none", "file" === props.type && "text-muted-foreground file:me-3 file:bg-transparent file:font-medium file:text-foreground file:text-sm"),
             "data-slot": "input",
             size: "number" == typeof size ? size : void 0,
             ...props

package/dist/menu.js

@@ -38,7 +38,7 @@ function MenuGroup(props) {
 }
 function MenuItem({ className, inset, variant = "default", size = "default", ...props }) {
     return /*#__PURE__*/ jsx(Menu.Item, {
-        className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
+        className: cn("flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-inset:ps-8 data-[variant=destructive]:text-destructive-foreground data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
         "data-inset": inset,
         "data-slot": "menu-item",
         "data-variant": variant,
@@ -49,7 +49,7 @@ function MenuItem({ className, inset, variant = "default", size = "default", ...
 function MenuCheckboxItem({ className, children, checked, size = "default", ...props }) {
     return /*#__PURE__*/ jsxs(Menu.CheckboxItem, {
         checked: checked,
-        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
+        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 data-[size=touch]:py-(--spacing-touch)", className),
         "data-slot": "menu-checkbox-item",
         "data-size": size,
         ...props,
@@ -73,7 +73,7 @@ function MenuRadioGroup(props) {
 }
 function MenuRadioItem({ className, children, size = "default", ...props }) {
     return /*#__PURE__*/ jsxs(Menu.RadioItem, {
-        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0  data-[size=touch]:py-(--spacing-touch)", className),
+        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0  data-[size=touch]:py-(--spacing-touch)", className),
         "data-slot": "menu-radio-item",
         "data-size": size,
         ...props,
@@ -119,7 +119,7 @@ function MenuSub(props) {
 }
 function MenuSubTrigger({ className, inset, children, size = "default", ...props }) {
     return /*#__PURE__*/ jsxs(Menu.SubmenuTrigger, {
-        className: cn("flex items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-inset:ps-8 data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none data-[size=touch]:py-(--spacing-touch)", className),
+        className: cn("flex items-center gap-2 rounded-sm px-2 py-1 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-inset:ps-8 data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none data-[size=touch]:py-(--spacing-touch)", className),
         "data-inset": inset,
         "data-slot": "menu-sub-trigger",
         "data-size": size,

package/dist/number-field.js

@@ -30,7 +30,7 @@ function NumberFieldGroup({ className, ...props }) {
 }
 function NumberFieldDecrement({ className, ...props }) {
     return /*#__PURE__*/ jsx(NumberField.Decrement, {
-        className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className),
+        className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-s-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-highlight", className),
         "data-slot": "number-field-decrement",
         ...props,
         children: /*#__PURE__*/ jsx(MinusIcon, {})
@@ -38,7 +38,7 @@ function NumberFieldDecrement({ className, ...props }) {
 }
 function NumberFieldIncrement({ className, ...props }) {
     return /*#__PURE__*/ jsx(NumberField.Increment, {
-        className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent", className),
+        className: cn("relative flex shrink-0 cursor-pointer items-center justify-center rounded-e-[calc(var(--radius-lg)-1px)] in-data-[size=sm]:px-[calc(--spacing(2.5)-1px)] px-[calc(--spacing(3)-1px)] transition-colors pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-highlight", className),
         "data-slot": "number-field-increment",
         ...props,
         children: /*#__PURE__*/ jsx(PlusIcon, {})

package/dist/radio-group.js

@@ -15,7 +15,7 @@ function radio_group_Radio({ className, ...props }) {
         "data-slot": "radio",
         ...props,
         children: /*#__PURE__*/ jsx(Radio.Indicator, {
-            className: "-inset-px absolute flex size-4 items-center justify-center rounded-full before:size-1.5 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-primary",
+            className: "-inset-px absolute flex size-4 items-center justify-center rounded-full before:size-1.5 before:rounded-full before:bg-primary-foreground data-unchecked:hidden data-checked:bg-[oklch(from_var(--accent)_l_0.05_h)]",
             "data-slot": "radio-indicator"
         })
     });

package/dist/select.js

@@ -67,7 +67,7 @@ function SelectPopup({ className, children, sideOffset = 4, alignItemWithTrigger
 }
 function SelectItem({ className, children, ...props }) {
     return /*#__PURE__*/ jsxs(Select.Item, {
-        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-accent data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+        className: cn("grid in-data-[side=none]:min-w-[calc(var(--anchor-width)+1.25rem)] cursor-default grid-cols-[1rem_1fr] items-center gap-2 rounded-sm py-1 ps-2 pe-4 text-base outline-none data-disabled:pointer-events-none data-highlighted:bg-highlight data-highlighted:text-accent-foreground data-disabled:opacity-64 sm:text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
         "data-slot": "select-item",
         ...props,
         children: [

package/dist/slider.js

@@ -29,7 +29,7 @@ function slider_Slider({ className, children, defaultValue, value, min = 0, max
         children: [
             children,
             /*#__PURE__*/ jsx(Slider.Control, {
-                className: cn("flex touch-none select-none data-[disabled]:pointer-events-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=vertical]:flex-col data-disabled:opacity-64", className),
+                className: cn("flex touch-none select-none data-disabled:pointer-events-none data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=horizontal]:w-full data-[orientation=horizontal]:min-w-44 data-[orientation=vertical]:flex-col data-disabled:opacity-64", className),
                 "data-slot": "slider-control",
                 children: /*#__PURE__*/ jsxs(Slider.Track, {
                     className: "relative grow select-none before:absolute before:rounded-full before:bg-input data-[orientation=horizontal]:h-1 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1 data-[orientation=horizontal]:before:inset-x-0.5 data-[orientation=vertical]:before:inset-x-0 data-[orientation=horizontal]:before:inset-y-0 data-[orientation=vertical]:before:inset-y-0.5",

package/dist/styles.css

@@ -4,20 +4,20 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+    --accent: oklch(0.44 0.12 146.31);
+    --accent-foreground: oklch(0.205 0 0);
     --background: oklch(1 0 0);
-    --foreground: oklch(0.145 0 0);
+    --foreground: oklch(from var(--accent) 0.25 c h);
     --card: oklch(1 0 0);
     --card-foreground: oklch(0.145 0 0);
     --popover: oklch(1 0 0);
     --popover-foreground: oklch(0.145 0 0);
-    --primary: oklch(0.205 0 0);
+    --primary: oklch(from var(--accent) 0.1 c h);
     --primary-foreground: oklch(0.985 0 0);
     --secondary: oklch(0.97 0 0);
     --secondary-foreground: oklch(0.205 0 0);
     --muted: oklch(0.97 0 0);
-    --muted-foreground: oklch(0.556 0 0);
-    --accent: oklch(0.97 0 0);
-    --accent-foreground: oklch(0.205 0 0);
+    --muted-foreground: oklch(from var(--accent) 0.65 0.015 h);
     --destructive: oklch(0.577 0.245 27.325);
     --destructive-foreground: oklch(0.577 0.245 27.325);
     --border: oklch(0.922 0 0);
@@ -38,6 +38,8 @@
     --sidebar-border: oklch(0.922 0 0);
     --sidebar-ring: oklch(0.708 0 0);
     --spacing-touch: calc(var(--spacing) * 4);
+    --highlight: oklch(0.97 0 0);
+    --highlight-foreground: oklch(0.205 0 0);
 
     --info: var(--color-blue-500);
     --info-foreground: var(--color-blue-700);
@@ -80,6 +82,8 @@
     --sidebar-accent-foreground: oklch(0.985 0 0);
     --sidebar-border: oklch(0.269 0 0);
     --sidebar-ring: oklch(0.439 0 0);
+    --highlight: oklch(0.97 0 0);
+    --highlight-foreground: oklch(0.205 0 0);
 
     --info: var(--color-blue-500);
     --info-foreground: var(--color-blue-400);
@@ -126,6 +130,8 @@
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
+    --color-highlight: var(--highlight);
+    --color-highlight-foreground: var(--highlight-foreground);
 
     --color-info: var(--info);
     --color-info-foreground: var(--info-foreground);

package/dist/switch.js

@@ -3,11 +3,11 @@ import { Switch } from "@base-ui-components/react/switch";
 import { cn } from "./lib/utils.js";
 function switch_Switch({ className, ...props }) {
     return /*#__PURE__*/ jsx(Switch.Root, {
-        className: cn("group/switch inset-shadow-[0_1px_--theme(--color-black/4%)] inline-flex h-4.5 w-7.5 shrink-0 items-center rounded-full p-px outline-none transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 data-checked:bg-primary data-unchecked:bg-input", className),
+        className: cn("group/switch inset-shadow-[0_1px_--theme(--color-black/8%)] inline-flex h-4.5 w-7.5 shrink-0 items-center rounded-sm p-px outline-none transition-all focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-64 data-checked:bg-accent data-unchecked:bg-input", className),
         "data-slot": "switch",
         ...props,
         children: /*#__PURE__*/ jsx(Switch.Thumb, {
-            className: cn("pointer-events-none block size-4 rounded-full bg-background shadow-sm transition-[translate,width] group-active/switch:w-4.5 data-checked:translate-x-3 data-unchecked:translate-x-0 data-checked:group-active/switch:translate-x-2.5"),
+            className: cn("pointer-events-none block size-5.5 rounded-sm bg-background ring-1 ring-ring/50 shadow-md transition-[translate,width] group-active/switch:w-6 data-checked:translate-x-3 data-unchecked:translate-x-[-4px] data-checked:group-active/switch:translate-x-2.5"),
             "data-slot": "switch-thumb"
         })
     });

package/dist/tabs.js

@@ -10,13 +10,13 @@ function tabs_Tabs({ className, ...props }) {
 }
 function TabsList({ variant = "default", className, children, ...props }) {
     return /*#__PURE__*/ jsxs(Tabs.List, {
-        className: cn("relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground", "data-[orientation=vertical]:flex-col", "default" === variant ? "rounded-lg bg-muted p-0.5 text-muted-foreground/64" : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-trigger]:hover:bg-accent", className),
+        className: cn("relative z-0 flex w-fit items-center justify-center gap-x-0.5 text-muted-foreground", "data-[orientation=vertical]:flex-col", "default" === variant ? "rounded-lg bg-muted p-0.5 text-muted-foreground/64" : "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1 *:data-[slot=tabs-trigger]:hover:bg-highlight", className),
         "data-slot": "tabs-list",
         ...props,
         children: [
             children,
             /*#__PURE__*/ jsx(Tabs.Indicator, {
-                className: cn("-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out", "underline" === variant ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px" : "-z-1 rounded-md bg-background shadow-sm dark:bg-accent"),
+                className: cn("-translate-y-(--active-tab-bottom) absolute bottom-0 left-0 h-(--active-tab-height) w-(--active-tab-width) translate-x-(--active-tab-left) transition-[width,translate] duration-200 ease-in-out", "underline" === variant ? "data-[orientation=vertical]:-translate-x-px z-10 bg-primary data-[orientation=horizontal]:h-0.5 data-[orientation=vertical]:w-0.5 data-[orientation=horizontal]:translate-y-px" : "-z-1 rounded-md bg-background shadow-sm dark:bg-highlight"),
                 "data-slot": "tab-indicator"
             })
         ]
@@ -24,7 +24,7 @@ function TabsList({ variant = "default", className, children, ...props }) {
 }
 function TabsTab({ className, ...props }) {
     return /*#__PURE__*/ jsx(Tabs.Tab, {
-        className: cn("flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-sm outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "hover:text-muted-foreground data-selected:text-foreground", "gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]", "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start", className),
+        className: cn("flex flex-1 shrink-0 cursor-pointer items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium text-sm outline-none transition-[color,background-color,box-shadow] focus-visible:ring-2 focus-visible:ring-ring data-disabled:pointer-events-none data-disabled:opacity-64 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "hover:text-muted-foreground data-active:text-foreground", "gap-1.5 px-[calc(--spacing(2.5)-1px)] py-[calc(--spacing(1.5)-1px)]", "data-[orientation=vertical]:w-full data-[orientation=vertical]:justify-start", className),
         "data-slot": "tabs-trigger",
         ...props
     });

package/dist/toggle.js

@@ -2,7 +2,7 @@ import { jsx } from "react/jsx-runtime";
 import { Toggle } from "@base-ui-components/react/toggle";
 import { cva } from "class-variance-authority";
 import { cn } from "./lib/utils.js";
-const toggleVariants = cva("relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-sm outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-accent/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-accent data-pressed:text-accent-foreground data-pressed:transition-none dark:data-pressed:bg-input/80 dark:hover:bg-accent [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+const toggleVariants = cva("relative inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-medium text-sm outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:bg-highlight/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-64 data-pressed:bg-highlight data-pressed:text-accent-foreground data-pressed:transition-none dark:data-pressed:bg-input/80 dark:hover:bg-highlight [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
     defaultVariants: {
         size: "default",
         variant: "default"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biotechusa/pdo-ui",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "type": "module",
   "exports": {
     ".": {