@biotechusa/pdo-ui 1.0.0

package/dist/combobox.js

@@ -0,0 +1,214 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Combobox } from "@base-ui-components/react/combobox";
+import { ChevronsUpDownIcon, XIcon } from "lucide-react";
+import { createContext, useContext, useRef } from "react";
+import { cn } from "../lib/utils";
+import { Input } from "./input.js";
+import { ScrollArea } from "./scroll-area.js";
+const ComboboxContext = /*#__PURE__*/ createContext({
+    chipsRef: null,
+    multiple: false
+});
+function combobox_Combobox(props) {
+    const chipsRef = useRef(null);
+    return /*#__PURE__*/ jsx(ComboboxContext.Provider, {
+        value: {
+            chipsRef,
+            multiple: !!props.multiple
+        },
+        children: /*#__PURE__*/ jsx(Combobox.Root, {
+            ...props
+        })
+    });
+}
+function ComboboxInput({ className, showTrigger = true, showClear = false, size, ...props }) {
+    const { multiple } = useContext(ComboboxContext);
+    const sizeValue = size ?? "default";
+    if (multiple) return /*#__PURE__*/ jsx(Combobox.Input, {
+        className: cn("min-w-12 flex-1 text-base/5 outline-none sm:text-sm [[data-slot=combobox-chip]+&]:ps-0.5", "sm" === sizeValue ? "ps-1.5" : "ps-2", className),
+        "data-size": "string" == typeof sizeValue ? sizeValue : void 0,
+        "data-slot": "combobox-input",
+        size: "number" == typeof sizeValue ? sizeValue : void 0,
+        ...props
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: "relative w-full has-disabled:opacity-64",
+        children: [
+            /*#__PURE__*/ jsx(Combobox.Input, {
+                className: cn("sm" === sizeValue ? "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-6.5" : "has-[+[data-slot=combobox-trigger],+[data-slot=combobox-clear]]:*:data-[slot=combobox-input]:pe-7", className),
+                "data-slot": "combobox-input",
+                render: /*#__PURE__*/ jsx(Input, {
+                    className: "has-disabled:opacity-100",
+                    size: sizeValue
+                }),
+                ...props
+            }),
+            showTrigger && /*#__PURE__*/ jsx(ComboboxTrigger, {
+                className: cn("-translate-y-1/2 absolute top-1/2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "sm" === sizeValue ? "end-0" : "end-0.5"),
+                children: /*#__PURE__*/ jsx(ChevronsUpDownIcon, {})
+            }),
+            showClear && /*#__PURE__*/ jsx(ComboboxClear, {
+                className: cn("-translate-y-1/2 absolute top-1/2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 outline-none transition-opacity pointer-coarse:after:absolute pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 has-[+[data-slot=combobox-clear]]:hidden [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", "sm" === sizeValue ? "end-0" : "end-0.5"),
+                children: /*#__PURE__*/ jsx(XIcon, {})
+            })
+        ]
+    });
+}
+function ComboboxTrigger({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Trigger, {
+        className: className,
+        "data-slot": "combobox-trigger",
+        ...props
+    });
+}
+function ComboboxPopup({ className, children, sideOffset = 4, ...props }) {
+    const { chipsRef } = useContext(ComboboxContext);
+    return /*#__PURE__*/ jsx(Combobox.Portal, {
+        children: /*#__PURE__*/ jsx(Combobox.Positioner, {
+            anchor: chipsRef,
+            className: "z-50 select-none",
+            "data-slot": "combobox-positioner",
+            sideOffset: sideOffset,
+            children: /*#__PURE__*/ jsx("span", {
+                className: "relative flex max-h-full origin-(--transform-origin) rounded-lg border bg-popover bg-clip-padding transition-[scale,opacity] before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-lg has-data-starting-style:scale-98 has-data-starting-style:opacity-0 dark:not-in-data-[slot=group]:bg-clip-border",
+                children: /*#__PURE__*/ jsx(Combobox.Popup, {
+                    className: cn("flex max-h-[min(var(--available-height),23rem)] w-(--anchor-width) max-w-(--available-width) flex-col", className),
+                    "data-slot": "combobox-popup",
+                    ...props,
+                    children: children
+                })
+            })
+        })
+    });
+}
+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),
+        "data-slot": "combobox-item",
+        ...props,
+        children: [
+            /*#__PURE__*/ jsx(Combobox.ItemIndicator, {
+                className: "col-start-1",
+                children: /*#__PURE__*/ jsx("svg", {
+                    fill: "none",
+                    height: "24",
+                    stroke: "currentColor",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: "2",
+                    viewBox: "0 0 24 24",
+                    width: "24",
+                    xmlns: "http://www.w3.org/1500/svg",
+                    children: /*#__PURE__*/ jsx("path", {
+                        d: "M5.252 12.7 10.2 18.63 18.748 5.37"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "col-start-2",
+                children: children
+            })
+        ]
+    });
+}
+function ComboboxSeparator({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Separator, {
+        className: cn("mx-2 my-1 h-px bg-border last:hidden", className),
+        "data-slot": "combobox-separator",
+        ...props
+    });
+}
+function ComboboxGroup({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Group, {
+        className: className,
+        "data-slot": "combobox-group",
+        ...props
+    });
+}
+function ComboboxGroupLabel({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.GroupLabel, {
+        className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs", className),
+        "data-slot": "combobox-group-label",
+        ...props
+    });
+}
+function ComboboxEmpty({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Empty, {
+        className: cn("not-empty:p-2 text-center text-muted-foreground text-sm", className),
+        "data-slot": "combobox-empty",
+        ...props
+    });
+}
+function ComboboxRow({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Row, {
+        className: className,
+        "data-slot": "combobox-row",
+        ...props
+    });
+}
+function ComboboxValue({ ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Value, {
+        "data-slot": "combobox-value",
+        ...props
+    });
+}
+function ComboboxList({ className, ...props }) {
+    return /*#__PURE__*/ jsx(ScrollArea, {
+        className: "flex-1",
+        children: /*#__PURE__*/ jsx(Combobox.List, {
+            className: cn("not-empty:scroll-py-1 not-empty:px-1 not-empty:py-1 in-data-has-overflow-y:pe-3", className),
+            "data-slot": "combobox-list",
+            ...props
+        })
+    });
+}
+function ComboboxClear({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Clear, {
+        className: className,
+        "data-slot": "combobox-clear",
+        ...props
+    });
+}
+function ComboboxStatus({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Combobox.Status, {
+        className: cn("px-3 py-2 font-medium text-muted-foreground text-xs empty:m-0 empty:p-0", className),
+        "data-slot": "combobox-status",
+        ...props
+    });
+}
+function ComboboxCollection(props) {
+    return /*#__PURE__*/ jsx(Combobox.Collection, {
+        "data-slot": "combobox-collection",
+        ...props
+    });
+}
+function ComboboxChips({ className, ...props }) {
+    const { chipsRef } = useContext(ComboboxContext);
+    return /*#__PURE__*/ jsx(Combobox.Chips, {
+        className: cn("relative inline-flex min-h-8 w-full flex-wrap gap-1 rounded-lg border border-input bg-background bg-clip-padding p-[calc(--spacing(1)-1px)] text-base/5 shadow-xs outline-none ring-ring/24 transition-shadow *:min-h-6 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_1px_--theme(--color-black/4%)] focus-within:border-ring focus-within:ring-[3px] has-disabled:pointer-events-none has-data-[size=lg]:min-h-9 has-data-[size=sm]:min-h-7 has-aria-invalid:border-destructive/36 has-disabled:opacity-64 has-[:disabled,:focus-within,[aria-invalid]]:shadow-none focus-within:has-aria-invalid:border-destructive/64 focus-within:has-aria-invalid:ring-destructive/16 has-data-[size=lg]:*:min-h-7 has-data-[size=sm]:*:min-h-5 sm:text-sm dark:not-has-disabled:bg-input/32 dark:not-in-data-[slot=group]:bg-clip-border dark:has-aria-invalid:ring-destructive/24 dark:not-has-disabled:not-focus-within:not-aria-invalid:before:shadow-[0_-1px_--theme(--color-white/8%)]", className),
+        "data-slot": "combobox-chips",
+        ref: chipsRef,
+        ...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",
+        "data-slot": "combobox-chip",
+        ...props,
+        children: [
+            children,
+            /*#__PURE__*/ jsx(ComboboxChipRemove, {})
+        ]
+    });
+}
+function ComboboxChipRemove(props) {
+    return /*#__PURE__*/ jsx(Combobox.ChipRemove, {
+        "aria-label": "Remove",
+        className: "h-full shrink-0 cursor-pointer px-1.5 opacity-72 hover:opacity-100 [&_svg:not([class*='size-'])]:size-3.5",
+        "data-slot": "combobox-chip-remove",
+        ...props,
+        children: /*#__PURE__*/ jsx(XIcon, {})
+    });
+}
+export { combobox_Combobox as Combobox, ComboboxChip, ComboboxChips, ComboboxClear, ComboboxCollection, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxInput, ComboboxItem, ComboboxList, ComboboxPopup, ComboboxRow, ComboboxSeparator, ComboboxStatus, ComboboxTrigger, ComboboxValue };

package/dist/dialog.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Dialog } from "@base-ui-components/react/dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "../lib/utils";
+const dialog_Dialog = Dialog.Root;
+function DialogTrigger(props) {
+    return /*#__PURE__*/ jsx(Dialog.Trigger, {
+        "data-slot": "dialog-trigger",
+        ...props
+    });
+}
+function DialogPortal(props) {
+    return /*#__PURE__*/ jsx(Dialog.Portal, {
+        ...props
+    });
+}
+function DialogClose(props) {
+    return /*#__PURE__*/ jsx(Dialog.Close, {
+        "data-slot": "dialog-close",
+        ...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),
+        "data-slot": "dialog-backdrop",
+        ...props
+    });
+}
+function DialogPopup({ className, children, showCloseButton = true, ...props }) {
+    return /*#__PURE__*/ jsxs(DialogPortal, {
+        children: [
+            /*#__PURE__*/ jsx(DialogBackdrop, {}),
+            /*#__PURE__*/ jsx("div", {
+                className: "fixed inset-0 z-50",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "flex h-dvh flex-col items-center overflow-hidden pt-6 max-sm:before:flex-1 sm:overflow-y-auto sm:p-4 sm:after:flex-1 sm:before:basis-[20vh]",
+                    children: /*#__PURE__*/ jsxs(Dialog.Popup, {
+                        className: cn("sm:-translate-y-[calc(1.25rem*var(--nested-dialogs))] relative row-start-2 grid w-full min-w-0 origin-top gap-4 border bg-popover bg-clip-padding p-6 text-popover-foreground shadow-lg transition-[scale,opacity,translate] duration-200 ease-in-out will-change-transform before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] data-ending-style:opacity-0 data-starting-style:opacity-0 max-sm:overflow-y-auto max-sm:border-none max-sm:opacity-[calc(1-min(var(--nested-dialogs),1))] max-sm:data-ending-style:translate-y-4 max-sm:data-starting-style:translate-y-4 max-sm:before:hidden sm:max-w-lg sm:data-nested:data-ending-style:translate-y-8 sm:data-nested:data-starting-style:translate-y-8 sm:scale-[calc(1-0.1*var(--nested-dialogs))] sm:rounded-2xl sm:data-ending-style:scale-98 sm:data-starting-style:scale-98 sm:before:rounded-[calc(var(--radius-2xl)-1px)] dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]", className),
+                        "data-slot": "dialog-popup",
+                        ...props,
+                        children: [
+                            children,
+                            showCloseButton && /*#__PURE__*/ jsxs(Dialog.Close, {
+                                className: "absolute end-2 top-2 inline-flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent opacity-72 outline-none transition-[color,background-color,box-shadow,opacity] pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 hover:opacity-100 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+                                children: [
+                                    /*#__PURE__*/ jsx(XIcon, {}),
+                                    /*#__PURE__*/ jsx("span", {
+                                        className: "sr-only",
+                                        children: "Close"
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                })
+            })
+        ]
+    });
+}
+function DialogHeader({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex flex-col gap-1 text-center sm:text-left", className),
+        "data-slot": "dialog-header",
+        ...props
+    });
+}
+function DialogFooter({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("sm:-mx-6 sm:-mb-6 flex flex-col-reverse gap-2 sm:mt-2 sm:flex-row sm:justify-end sm:rounded-b-xl sm:border-t sm:bg-muted/50 sm:px-6 sm:py-4", className),
+        "data-slot": "dialog-footer",
+        ...props
+    });
+}
+function DialogTitle({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Dialog.Title, {
+        className: cn("font-heading text-xl leading-none", className),
+        "data-slot": "dialog-title",
+        ...props
+    });
+}
+function DialogDescription({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Dialog.Description, {
+        className: cn("text-muted-foreground text-sm", className),
+        "data-slot": "dialog-description",
+        ...props
+    });
+}
+export { dialog_Dialog as Dialog, DialogBackdrop, DialogClose, DialogPopup as DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogBackdrop as DialogOverlay, DialogPopup, DialogPortal, DialogTitle, DialogTrigger };

package/dist/empty.js

@@ -0,0 +1,85 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+function Empty({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-xl border-dashed p-6 text-center md:p-12", className),
+        "data-slot": "empty",
+        ...props
+    });
+}
+function EmptyHeader({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex max-w-sm flex-col items-center text-center", className),
+        "data-slot": "empty-header",
+        ...props
+    });
+}
+const emptyMediaVariants = cva("flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    defaultVariants: {
+        variant: "default"
+    },
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            icon: "relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card text-foreground shadow-black/5 shadow-sm before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_svg:not([class*='size-'])]:size-4.5"
+        }
+    }
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("relative mb-6", className),
+        "data-slot": "empty-media",
+        "data-variant": variant,
+        ...props,
+        children: [
+            "icon" === variant && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        "aria-hidden": "true",
+                        className: cn(emptyMediaVariants({
+                            className,
+                            variant
+                        }), "-translate-x-0.5 -rotate-10 pointer-events-none absolute bottom-px origin-bottom-left scale-84 shadow-none")
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        "aria-hidden": "true",
+                        className: cn(emptyMediaVariants({
+                            className,
+                            variant
+                        }), "pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none")
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: cn(emptyMediaVariants({
+                    className,
+                    variant
+                })),
+                ...props
+            })
+        ]
+    });
+}
+function EmptyTitle({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("font-heading text-xl leading-none", className),
+        "data-slot": "empty-title",
+        ...props
+    });
+}
+function EmptyDescription({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("text-muted-foreground text-sm/relaxed [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1", className),
+        "data-slot": "empty-description",
+        ...props
+    });
+}
+function EmptyContent({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm", className),
+        "data-slot": "empty-content",
+        ...props
+    });
+}
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/field.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { Field } from "@base-ui-components/react/field";
+import { cn } from "../lib/utils";
+function field_Field({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Field.Root, {
+        className: cn("flex flex-col items-start gap-2", className),
+        "data-slot": "field",
+        ...props
+    });
+}
+function FieldLabel({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Field.Label, {
+        className: cn("inline-flex items-center gap-2 text-sm/4", className),
+        "data-slot": "field-label",
+        ...props
+    });
+}
+function FieldDescription({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Field.Description, {
+        className: cn("text-muted-foreground text-xs", className),
+        "data-slot": "field-description",
+        ...props
+    });
+}
+function FieldError({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Field.Error, {
+        className: cn("text-destructive-foreground text-xs", className),
+        "data-slot": "field-error",
+        ...props
+    });
+}
+const FieldControl = Field.Control;
+const FieldValidity = Field.Validity;
+export { field_Field as Field, FieldControl, FieldDescription, FieldError, FieldLabel, FieldValidity };

package/dist/fieldset.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { Fieldset } from "@base-ui-components/react/fieldset";
+import { cn } from "../lib/utils";
+function fieldset_Fieldset({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Fieldset.Root, {
+        className: cn("flex w-full max-w-64 flex-col gap-6", className),
+        "data-slot": "fieldset",
+        ...props
+    });
+}
+function FieldsetLegend({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Fieldset.Legend, {
+        className: cn("font-semibold", className),
+        "data-slot": "fieldset-legend",
+        ...props
+    });
+}
+export { fieldset_Fieldset as Fieldset, FieldsetLegend };

package/dist/form.js

@@ -0,0 +1,11 @@
+import { jsx } from "react/jsx-runtime";
+import { Form } from "@base-ui-components/react/form";
+import { cn } from "../lib/utils";
+function form_Form({ className, ...props }) {
+    return /*#__PURE__*/ jsx(Form, {
+        className: cn("flex w-full flex-col gap-4", className),
+        "data-slot": "form",
+        ...props
+    });
+}
+export { form_Form as Form };

package/dist/frame.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+function Frame({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("relative flex flex-col rounded-2xl bg-muted p-1", className),
+        "data-slot": "frame",
+        ...props
+    });
+}
+function FramePanel({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("relative not-has-[table]:rounded-xl not-has-[table]:border not-has-[table]:bg-card bg-clip-padding not-has-[table]:p-5 not-has-[table]:shadow-xs before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-xl)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] has-[table]:before:hidden dark:bg-clip-border dark:before:shadow-[0_-1px_--theme(--color-white/8%)]", className),
+        "data-slot": "frame-panel",
+        ...props
+    });
+}
+function FrameHeader({ className, ...props }) {
+    return /*#__PURE__*/ jsx("header", {
+        className: cn("flex flex-col px-5 py-4", className),
+        "data-slot": "frame-panel-header",
+        ...props
+    });
+}
+function FrameTitle({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("font-semibold text-sm", className),
+        "data-slot": "frame-panel-title",
+        ...props
+    });
+}
+function FrameDescription({ className, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn("text-muted-foreground text-sm", className),
+        "data-slot": "frame-panel-description",
+        ...props
+    });
+}
+function FrameFooter({ className, ...props }) {
+    return /*#__PURE__*/ jsx("footer", {
+        className: cn("flex flex-col gap-1 px-5 py-4", className),
+        "data-slot": "frame-panel-footer",
+        ...props
+    });
+}
+export { Frame, FrameDescription, FrameFooter, FrameHeader, FramePanel, FrameTitle };

package/dist/group.js

@@ -0,0 +1,48 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui-components/react/merge-props";
+import { useRender } from "@base-ui-components/react/use-render";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator.js";
+const groupVariants = cva("flex w-fit *:focus-visible:z-10 has-[>[data-slot=group]]:gap-2 *:has-focus-visible:z-10", {
+    defaultVariants: {
+        orientation: "horizontal"
+    },
+    variants: {
+        orientation: {
+            horizontal: "*:not-first:before:-start-[0.5px] *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:-end-[0.5px] *:not-first:rounded-s-none *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:rounded-e-none *:not-first:border-s-0 *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:border-e-0 *:not-first:before:rounded-s-none *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:rounded-e-none *:pointer-coarse:after:min-w-auto",
+            vertical: "*:not-first:before:-top-[0.5px] *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:-bottom-[0.5px] flex-col *:not-first:rounded-t-none *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:rounded-b-none *:not-first:border-t-0 *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:border-b-0 *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:hidden *:not-first:before:rounded-t-none *:not-[&:nth-last-child(1_of_:not([aria-hidden],span[data-base-ui-inert]))]:before:rounded-b-none *:pointer-coarse:after:min-h-auto dark:*:last:before:hidden dark:*:first:before:block"
+        }
+    }
+});
+function Group({ className, orientation, children, ...props }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: cn(groupVariants({
+            orientation
+        }), className),
+        "data-orientation": orientation,
+        "data-slot": "group",
+        role: "group",
+        ...props,
+        children: children
+    });
+}
+function GroupText({ className, render, ...props }) {
+    const defaultProps = {
+        className: cn("relative inline-flex items-center whitespace-nowrap rounded-lg border border-border bg-muted bg-clip-padding px-[calc(--spacing(3)-1px)] font-medium text-sm shadow-xs outline-none transition-shadow before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-lg)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:bg-input/64 dark:before:shadow-[0_-1px_--theme(--color-white/8%)] [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0", className),
+        "data-slot": "group-text"
+    };
+    return useRender({
+        defaultTagName: "div",
+        props: mergeProps(defaultProps, props),
+        render
+    });
+}
+function GroupSeparator({ className, orientation = "vertical", ...props }) {
+    return /*#__PURE__*/ jsx(Separator, {
+        className: cn("[[data-slot=input-control]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&]:-translate-x-px relative z-20 has-[+[data-slot=input-control]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:translate-x-px has-[+[data-slot=input-control]:focus-within,+[data-slot=select-trigger]:focus-visible+*,+[data-slot=number-field]:focus-within]:bg-ring [[data-slot=input-control]:focus-within+&,[data-slot=select-trigger]:focus-visible+*+&,[data-slot=number-field]:focus-within+&]:bg-ring", className),
+        orientation: orientation,
+        ...props
+    });
+}
+export { Group as ButtonGroup, GroupSeparator as ButtonGroupSeparator, GroupText as ButtonGroupText, Group, GroupSeparator, GroupText, groupVariants };