@stevederico/skateboard-ui 3.12.0 → 4.1.0

package/dist/ui/button.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { type VariantProps } from "../shadcn/lib/cva.js";
+declare const buttonVariants: (props?: import("../shadcn/lib/cva.js").CvaProps<{
+    variant: {
+        default: string;
+        outline: string;
+        secondary: string;
+        ghost: string;
+        destructive: string;
+        link: string;
+        gradient: string;
+    };
+    size: {
+        default: string;
+        xs: string;
+        sm: string;
+        lg: string;
+        icon: string;
+        "icon-xs": string;
+        "icon-sm": string;
+        "icon-lg": string;
+        cta: string;
+    };
+}> | undefined) => string;
+export interface ButtonProps extends React.ComponentProps<"button">, VariantProps<typeof buttonVariants> {
+    /** Render the single child element styled as a button (shadcn-style). */
+    asChild?: boolean;
+    /** Base UI compat: a React element rendered in place of the button. */
+    render?: React.ReactElement;
+    /** Base UI compat: ignored (the element is inferred from `render`/`asChild`). */
+    nativeButton?: boolean;
+}
+/**
+ * Primary button. Self-contained: no primitive framework. `asChild` merges the
+ * button styling onto a single child element via the local {@link Slot}.
+ */
+declare function Button({ className, variant, size, asChild, render, nativeButton: _nativeButton, children, ...props }: ButtonProps): React.JSX.Element;
+export { Button, buttonVariants };

package/dist/ui/button.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "../shadcn/lib/cva.js";
+import { cn } from "../shadcn/lib/utils.js";
+import { Slot, resolveRender } from "./slot.js";
+const buttonVariants = cva("cursor-pointer focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none active:scale-[0.98]", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/80",
+            outline: "border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+            ghost: "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+            destructive: "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+            link: "text-primary underline-offset-4 hover:underline",
+            gradient: "relative group text-white font-semibold transition-all duration-300 shadow-xl backdrop-blur-sm overflow-hidden gradient-btn",
+        },
+        size: {
+            default: "h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            xs: "h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5",
+            lg: "h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+            icon: "size-9",
+            "icon-xs": "size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3",
+            "icon-sm": "size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md",
+            "icon-lg": "size-10",
+            cta: "h-14 gap-2 px-8 text-lg rounded-xl",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+/**
+ * Primary button. Self-contained: no primitive framework. `asChild` merges the
+ * button styling onto a single child element via the local {@link Slot}.
+ */
+function Button({ className, variant = "default", size = "default", asChild = false, render, nativeButton: _nativeButton, children, ...props }) {
+    const { useSlot, slotChild } = resolveRender(asChild, render, children);
+    const Comp = useSlot ? Slot : "button";
+    return (_jsx(Comp
+    // Default to type="button" so a Button inside a <form> doesn't submit it;
+    // only applies to the real <button> (slotted children set their own type).
+    , { 
+        // Default to type="button" so a Button inside a <form> doesn't submit it;
+        // only applies to the real <button> (slotted children set their own type).
+        type: useSlot ? undefined : "button", "data-slot": "button", className: cn(buttonVariants({ variant, size, className })), ...props, children: slotChild }));
+}
+export { Button, buttonVariants };

package/dist/ui/calendar.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+import type { DayPickerProps, CalendarDay, DayModifiers } from "../components/core/Calendar.js";
+import type { ButtonProps } from "./button.js";
+export interface CalendarProps extends DayPickerProps {
+    buttonVariant?: ButtonProps["variant"];
+}
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: CalendarProps): React.JSX.Element;
+export interface CalendarDayButtonProps extends Omit<ButtonProps, "size" | "variant"> {
+    day: CalendarDay;
+    modifiers: DayModifiers;
+}
+declare function CalendarDayButton({ className, day, modifiers, ...props }: CalendarDayButtonProps): React.JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/ui/calendar.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { DayPicker, getDefaultClassNames } from "../components/core/Calendar.js";
+import { cn } from "../shadcn/lib/utils.js";
+import { Button, buttonVariants } from "./button.js";
+import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "../icons/index.js";
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, formatters: {
+            formatMonthDropdown: (date) => date.toLocaleString("default", { month: "short" }),
+            ...formatters,
+        }, classNames: {
+            root: cn("w-fit", defaultClassNames.root),
+            months: cn("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+            month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+            nav: cn("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
+            month_caption: cn("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
+            dropdowns: cn("w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
+            dropdown_root: cn("relative cn-calendar-dropdown-root rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+            dropdown: cn("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+            caption_label: cn("select-none font-medium", captionLayout === "label"
+                ? "text-sm"
+                : "cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label),
+            table: "w-full border-collapse",
+            weekdays: cn("flex", defaultClassNames.weekdays),
+            weekday: cn("text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
+            week: cn("flex w-full mt-2", defaultClassNames.week),
+            week_number_header: cn("select-none w-(--cell-size)", defaultClassNames.week_number_header),
+            week_number: cn("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
+            day: cn("relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none", props.showWeekNumber
+                ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
+                : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
+            range_start: cn("rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate", defaultClassNames.range_start),
+            range_middle: cn("rounded-none", defaultClassNames.range_middle),
+            range_end: cn("rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate", defaultClassNames.range_end),
+            today: cn("bg-muted text-foreground rounded-(--cell-radius) data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            hidden: cn("invisible", defaultClassNames.hidden),
+            ...classNames,
+        }, components: {
+            Root: ({ className, rootRef, ...props }) => {
+                return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
+            },
+            Chevron: ({ className, orientation, ...props }) => {
+                if (orientation === "left") {
+                    return (_jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props }));
+                }
+                if (orientation === "right") {
+                    return (_jsx(ChevronRightIcon, { className: cn("size-4", className), ...props }));
+                }
+                return (_jsx(ChevronDownIcon, { className: cn("size-4", className), ...props }));
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...props }) => {
+                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+            },
+            ...components,
+        }, ...props }));
+}
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = getDefaultClassNames();
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        if (modifiers.focused)
+            ref.current?.focus();
+    }, [modifiers.focused]);
+    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(), "data-selected-single": modifiers.selected &&
+            !modifiers.range_start &&
+            !modifiers.range_end &&
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+}
+export { Calendar, CalendarDayButton };

package/dist/ui/card.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+declare function Card({ className, size, ...props }: React.ComponentProps<"div"> & {
+    size?: "default" | "sm";
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/ui/card.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+function Card({ className, size = "default", ...props }) {
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", className), ...props }));
+}
+function CardHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)", className), ...props }));
+}
+function CardTitle({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-title", className: cn("text-base leading-normal font-medium group-data-[size=sm]/card:text-sm", className), ...props }));
+}
+function CardDescription({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-description", className: cn("text-sm text-muted-foreground", className), ...props }));
+}
+function CardAction({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
+}
+function CardContent({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-spacing)", className), ...props }));
+}
+function CardFooter({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center rounded-b-xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)", className), ...props }));
+}
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/ui/checkbox.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+export interface CheckboxProps extends Omit<React.ComponentProps<"button">, "onChange" | "value"> {
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    /** When set, a hidden checkbox of this name mirrors the state for form posts. */
+    name?: string;
+    value?: string;
+}
+/**
+ * Self-contained checkbox: a `role="checkbox"` button with controlled/
+ * uncontrolled checked state. Emits `data-checked`/`data-unchecked`/
+ * `data-disabled` so the shared classes apply. Pass `name` to include a
+ * hidden checkbox for forms.
+ */
+declare function Checkbox({ className, checked, defaultChecked, onCheckedChange, disabled, name, value, onClick, ...props }: CheckboxProps): React.JSX.Element;
+export { Checkbox };

package/dist/ui/checkbox.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { CheckIcon } from "../icons/index.js";
+import { useControllableState } from "./use-controllable-state.js";
+/**
+ * Self-contained checkbox: a `role="checkbox"` button with controlled/
+ * uncontrolled checked state. Emits `data-checked`/`data-unchecked`/
+ * `data-disabled` so the shared classes apply. Pass `name` to include a
+ * hidden checkbox for forms.
+ */
+function Checkbox({ className, checked, defaultChecked = false, onCheckedChange, disabled, name, value = "on", onClick, ...props }) {
+    const [on, setOn] = useControllableState({
+        value: checked,
+        defaultValue: defaultChecked,
+        onChange: onCheckedChange,
+    });
+    return (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", role: "checkbox", "aria-checked": on, disabled: disabled, "data-slot": "checkbox", "data-state": on ? "checked" : "unchecked", "data-checked": on ? "" : undefined, "data-unchecked": on ? undefined : "", "data-disabled": disabled ? "" : undefined, className: cn("cursor-pointer peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), onClick: (e) => {
+                    onClick?.(e);
+                    if (!e.defaultPrevented)
+                        setOn(!on);
+                }, ...props, children: on ? (_jsx("span", { "data-slot": "checkbox-indicator", "data-checked": "", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) })) : null }), name ? (_jsx("input", { type: "checkbox", "aria-hidden": true, tabIndex: -1, name: name, value: value, checked: on, disabled: disabled, readOnly: true, className: "sr-only" })) : null] }));
+}
+export { Checkbox };

package/dist/ui/collapsible.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+export interface CollapsibleProps extends Omit<React.ComponentProps<"div">, "onChange"> {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/** Self-contained collapsible region with a pure-CSS grid-rows height animation. */
+declare function Collapsible({ open, defaultOpen, onOpenChange, ...props }: CollapsibleProps): React.JSX.Element;
+declare function CollapsibleTrigger({ className, onClick, ...props }: React.ComponentProps<"button">): React.JSX.Element;
+declare function CollapsibleContent({ className, children, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/collapsible.js

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../shadcn/lib/utils.js";
+import { useControllableState } from "./use-controllable-state.js";
+const CollapsibleContext = React.createContext(null);
+function useCollapsible() {
+    const ctx = React.useContext(CollapsibleContext);
+    if (!ctx)
+        throw new Error("Collapsible parts must be used within <Collapsible>");
+    return ctx;
+}
+/** Self-contained collapsible region with a pure-CSS grid-rows height animation. */
+function Collapsible({ open, defaultOpen = false, onOpenChange, ...props }) {
+    const [isOpen, setOpen] = useControllableState({
+        value: open,
+        defaultValue: defaultOpen,
+        onChange: onOpenChange,
+    });
+    const reactId = React.useId();
+    return (_jsx(CollapsibleContext.Provider, { value: {
+            open: isOpen,
+            setOpen,
+            triggerId: `${reactId}-trigger`,
+            panelId: `${reactId}-panel`,
+        }, children: _jsx("div", { "data-slot": "collapsible", "data-state": isOpen ? "open" : "closed", ...props }) }));
+}
+function CollapsibleTrigger({ className, onClick, ...props }) {
+    const { open, setOpen, triggerId, panelId } = useCollapsible();
+    return (_jsx("button", { type: "button", id: triggerId, "aria-expanded": open, "aria-controls": panelId, "data-slot": "collapsible-trigger", "data-state": open ? "open" : "closed", className: cn("cursor-pointer", className), onClick: (e) => {
+            onClick?.(e);
+            if (!e.defaultPrevented)
+                setOpen(!open);
+        }, ...props }));
+}
+function CollapsibleContent({ className, children, ...props }) {
+    const { open, triggerId, panelId } = useCollapsible();
+    return (_jsx("div", { id: panelId, role: "region", "aria-labelledby": triggerId, inert: !open, "data-slot": "collapsible-content", "data-state": open ? "open" : "closed", className: cn("grid transition-[grid-template-rows] duration-200 ease-out", open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"), ...props, children: _jsx("div", { className: cn("overflow-hidden", className), children: children }) }));
+}
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/dist/ui/command.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { CommandProps, CommandInputProps, CommandListProps, CommandEmptyProps, CommandGroupProps, CommandItemProps, CommandSeparatorProps } from "../components/core/Command.js";
+import { Dialog } from "./dialog.js";
+declare function Command({ className, ...props }: CommandProps): React.JSX.Element;
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
+    title?: string;
+    children?: React.ReactNode;
+    description?: string;
+    className?: string;
+    showCloseButton?: boolean;
+}): React.JSX.Element;
+declare function CommandInput({ className, ...props }: CommandInputProps): React.JSX.Element;
+declare function CommandList({ className, ...props }: CommandListProps): React.JSX.Element;
+declare function CommandEmpty({ className, ...props }: CommandEmptyProps): React.JSX.Element;
+declare function CommandGroup({ className, ...props }: CommandGroupProps): React.JSX.Element;
+declare function CommandSeparator({ className, ...props }: CommandSeparatorProps): React.JSX.Element;
+declare function CommandItem({ className, children, ...props }: CommandItemProps): React.JSX.Element;
+declare function CommandShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/ui/command.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Command as CommandPrimitive } from "../components/core/Command.js";
+import { cn } from "../shadcn/lib/utils.js";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "./dialog.js";
+import { InputGroup, InputGroupAddon, } from "./input-group.js";
+import { SearchIcon, CheckIcon } from "../icons/index.js";
+function Command({ className, ...props }) {
+    return (_jsx(CommandPrimitive, { "data-slot": "command", className: cn("bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden", className), ...props }));
+}
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = false, ...props }) {
+    return (_jsxs(Dialog, { ...props, children: [_jsxs(DialogHeader, { className: "sr-only", children: [_jsx(DialogTitle, { children: title }), _jsx(DialogDescription, { children: description })] }), _jsx(DialogContent, { className: cn("rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0", className), showCloseButton: showCloseButton, children: children })] }));
+}
+function CommandInput({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "command-input-wrapper", className: "p-1 pb-0", children: _jsxs(InputGroup, { className: "bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!", children: [_jsx(CommandPrimitive.Input, { "data-slot": "command-input", className: cn("w-full text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className), ...props }), _jsx(InputGroupAddon, { children: _jsx(SearchIcon, { className: "size-4 shrink-0 opacity-50" }) })] }) }));
+}
+function CommandList({ className, ...props }) {
+    return (_jsx(CommandPrimitive.List, { "data-slot": "command-list", className: cn("no-scrollbar max-h-72 scroll-py-1 outline-none overflow-x-hidden overflow-y-auto", className), ...props }));
+}
+function CommandEmpty({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Empty, { "data-slot": "command-empty", className: cn("py-6 text-center text-sm", className), ...props }));
+}
+function CommandGroup({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Group, { "data-slot": "command-group", className: cn("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className), ...props }));
+}
+function CommandSeparator({ className, ...props }) {
+    return (_jsx(CommandPrimitive.Separator, { "data-slot": "command-separator", className: cn("bg-border -mx-1 h-px w-auto", className), ...props }));
+}
+function CommandItem({ className, children, ...props }) {
+    return (_jsxs(CommandPrimitive.Item, { "data-slot": "command-item", className: cn("data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(CheckIcon, { className: "ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" })] }));
+}
+function CommandShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "command-shortcut", className: cn("text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest", className), ...props }));
+}
+export { Command, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandShortcut, CommandSeparator, };

package/dist/ui/context-menu.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+export interface ContextMenuProps {
+    children?: React.ReactNode;
+}
+declare function ContextMenu({ children }: ContextMenuProps): React.JSX.Element;
+declare function ContextMenuPortal({ children }: {
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function ContextMenuTrigger({ asChild, render, nativeButton: _nativeButton, children, className, onContextMenu, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+    render?: React.ReactElement;
+    nativeButton?: boolean;
+}): React.JSX.Element;
+export interface ContextMenuContentProps extends React.ComponentProps<"div"> {
+}
+declare function ContextMenuContent({ className, children, onKeyDown, ...props }: ContextMenuContentProps): React.JSX.Element | null;
+declare function ContextMenuGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ContextMenuLabel({ className, inset, ...props }: React.ComponentProps<"div"> & {
+    inset?: boolean;
+}): React.JSX.Element;
+export interface ContextMenuItemProps extends React.ComponentProps<"div"> {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+    disabled?: boolean;
+    onSelect?: () => void;
+}
+declare function ContextMenuItem({ className, inset, variant, disabled, onSelect, onClick, ...props }: ContextMenuItemProps): React.JSX.Element;
+declare function ContextMenuCheckboxItem({ className, children, checked, onCheckedChange, disabled, inset, onClick, ...props }: Omit<React.ComponentProps<"div">, "onChange"> & {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuRadioGroup({ value, onValueChange, ...props }: React.ComponentProps<"div"> & {
+    value?: string;
+    onValueChange?: (value: string) => void;
+}): React.JSX.Element;
+declare function ContextMenuRadioItem({ className, children, value, disabled, inset, onClick, ...props }: Omit<React.ComponentProps<"div">, "value"> & {
+    value: string;
+    disabled?: boolean;
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuSeparator({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ContextMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function ContextMenuSub({ defaultOpen, children, }: {
+    defaultOpen?: boolean;
+    children?: React.ReactNode;
+}): React.JSX.Element;
+declare function ContextMenuSubTrigger({ className, inset, children, onClick, onKeyDown, onMouseEnter, ...props }: React.ComponentProps<"div"> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function ContextMenuSubContent({ className, children, onKeyDown, ...props }: React.ComponentProps<"div">): React.JSX.Element | null;
+export { ContextMenu, ContextMenuTrigger, ContextMenuContent, ContextMenuItem, ContextMenuCheckboxItem, ContextMenuRadioItem, ContextMenuLabel, ContextMenuSeparator, ContextMenuShortcut, ContextMenuGroup, ContextMenuPortal, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuRadioGroup, };