@adaptabletools/adaptable 22.1.1 → 23.0.0-canary.0

package/src/components/ui/calendar.js

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

package/src/components/ui/combobox.d.ts

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+declare const useFilteredItems: typeof ComboboxPrimitive.useFilteredItems;
+export { useFilteredItems, ComboboxPrimitive };
+declare const Combobox: typeof ComboboxPrimitive.Root;
+declare const RESIZABLE_VIRTUALIZED_LIST_CLASS = "twa:group-data-resizable/combobox-content:max-h-none twa:group-data-resizable/combobox-content:flex-1 twa:group-data-resizable/combobox-content:min-h-0 twa:group-data-resizable/combobox-content:flex twa:group-data-resizable/combobox-content:flex-col";
+declare const RESIZABLE_VIRTUALIZED_SCROLL_CLASS = "twa:group-data-resizable/combobox-content:h-auto twa:group-data-resizable/combobox-content:max-h-none twa:group-data-resizable/combobox-content:flex-1 twa:group-data-resizable/combobox-content:min-h-0";
+declare function ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props): React.JSX.Element;
+declare function ComboboxTrigger({ className, children, ...props }: ComboboxPrimitive.Trigger.Props): React.JSX.Element;
+export declare function ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props): React.JSX.Element;
+declare function ComboboxInput({ className, children, disabled, isLoading, showTrigger, showClear, groupRef, ...props }: ComboboxPrimitive.Input.Props & {
+    isLoading?: boolean;
+    showTrigger?: boolean;
+    showClear?: boolean;
+    /** Ref to the visible `InputGroup` wrapper. Use as the popup anchor so the popup
+     * lines up with the perceived combobox box (input + buttons), not just the bare input. */
+    groupRef?: React.Ref<HTMLDivElement>;
+}): React.JSX.Element;
+declare function ComboboxContent({ className, side, sideOffset, align, alignOffset, anchor, resizable, contentRef, style, ...props }: ComboboxPrimitive.Popup.Props & Pick<ComboboxPrimitive.Positioner.Props, 'side' | 'align' | 'sideOffset' | 'alignOffset' | 'anchor'> & {
+    resizable?: boolean;
+    contentRef?: (el: HTMLDivElement | null) => void;
+    maxLabelLength?: number;
+}): React.JSX.Element;
+declare function ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props): React.JSX.Element;
+declare function ComboboxItem({ className, children, renderCheckboxIndicator, ...props }: ComboboxPrimitive.Item.Props & {
+    renderCheckboxIndicator?: boolean | null | ComboboxPrimitive.ItemIndicator.Props['render'];
+}): React.JSX.Element;
+declare function ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props): React.JSX.Element;
+declare function ComboboxLabel({ className, ...props }: ComboboxPrimitive.GroupLabel.Props): React.JSX.Element;
+declare function ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props): React.JSX.Element;
+declare function ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props): React.JSX.Element;
+declare function ComboboxSeparator({ className, ...props }: ComboboxPrimitive.Separator.Props): React.JSX.Element;
+declare function ComboboxChips({ className, ...props }: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> & ComboboxPrimitive.Chips.Props): React.JSX.Element;
+declare function ComboboxChip({ className, children, showRemove, onRemove, ...props }: ComboboxPrimitive.Chip.Props & {
+    showRemove?: boolean;
+    /**
+     * Optional override for the remove action. When provided, a plain button
+     * is rendered in place of `ComboboxPrimitive.ChipRemove` so the caller can
+     * control exactly which value is removed. This is required when the chips
+     * rendered don't map 1:1 (or don't share order) with the combobox's own
+     * `selectedValue` array — the primitive's `ChipRemove` otherwise removes by
+     * the chip's composite list index and would target the wrong value.
+     */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+}): React.JSX.Element;
+declare function ComboboxChipsInput({ className, ...props }: ComboboxPrimitive.Input.Props): React.JSX.Element;
+declare function useComboboxAnchor(): React.RefObject<HTMLDivElement>;
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, RESIZABLE_VIRTUALIZED_SCROLL_CLASS, };

package/src/components/ui/combobox.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { cn, POPUP_Z_INDEX } from '~/lib/utils';
+import { Button } from '~/components/ui/button';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, } from '~/components/ui/input-group';
+import { CheckIcon, ChevronDownIcon, XIcon, Loader2Icon } from 'lucide-react';
+import { CheckBox } from '../CheckBox';
+const useFilteredItems = ComboboxPrimitive.useFilteredItems;
+export { useFilteredItems, ComboboxPrimitive };
+const Combobox = ComboboxPrimitive.Root;
+const RESIZABLE_LIST_CLASS = 'twa:group-data-resizable/combobox-content:max-h-none twa:group-data-resizable/combobox-content:flex-1 twa:group-data-resizable/combobox-content:min-h-0';
+const RESIZABLE_VIRTUALIZED_LIST_CLASS = `${RESIZABLE_LIST_CLASS} twa:group-data-resizable/combobox-content:flex twa:group-data-resizable/combobox-content:flex-col`;
+const RESIZABLE_VIRTUALIZED_SCROLL_CLASS = 'twa:group-data-resizable/combobox-content:h-auto twa:group-data-resizable/combobox-content:max-h-none twa:group-data-resizable/combobox-content:flex-1 twa:group-data-resizable/combobox-content:min-h-0';
+function ComboboxValue({ ...props }) {
+    return _jsx(ComboboxPrimitive.Value, { "data-slot": "combobox-value", ...props });
+}
+function ComboboxTrigger({ className, children, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Trigger, { "data-slot": "combobox-trigger", className: cn('twa:[&_svg:not([class*=size-])]:size-4', className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" })] }));
+}
+export function ComboboxClear({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Clear, { "data-slot": "combobox-clear", render: _jsx(InputGroupButton, { variant: "ghost", size: "icon-xs", className: "twa:min-h-auto!" }), className: cn(className), ...props, children: _jsx(XIcon, { className: "twa:pointer-events-none", strokeWidth: 1 }) }));
+}
+function ComboboxInput({ className, children, disabled = false, isLoading = false, showTrigger = true, showClear = false, groupRef, ...props }) {
+    const { 'aria-label': ariaLabel, ...rest } = props;
+    return (_jsxs(InputGroup, { ref: groupRef, className: cn('twa:w-auto', className), "aria-label": ariaLabel, children: [_jsx(ComboboxPrimitive.Input, { render: _jsx(InputGroupInput, { disabled: disabled }), ...rest }), _jsxs(InputGroupAddon, { align: "inline-end", children: [isLoading && (_jsx(Loader2Icon, { className: "twa:size-4 twa:text-muted-foreground twa:animate-spin" })), showTrigger && (_jsx(InputGroupButton, { size: "icon-xs", variant: "ghost", render: _jsx(ComboboxTrigger, {}), "data-slot": "input-group-button", className: "twa:group-has-data-[slot=combobox-clear]/input-group:hidden twa:data-pressed:bg-transparent twa:min-h-auto!", disabled: disabled })), showClear && _jsx(ComboboxClear, { disabled: disabled })] }), children] }));
+}
+function ComboboxContent({ className, side = 'bottom', sideOffset = 6, align = 'start', alignOffset = 0, anchor, resizable = false, contentRef, style, ...props }) {
+    const sizeRef = React.useRef(null);
+    const popupElRef = React.useRef(null);
+    const popupRef = React.useCallback((el) => {
+        if (!el && popupElRef.current && resizable) {
+            const prev = popupElRef.current;
+            const w = prev.style.width;
+            const h = prev.style.height;
+            if (w && h) {
+                sizeRef.current = { width: w, height: h };
+            }
+        }
+        popupElRef.current = el;
+        contentRef?.(el);
+        if (el && resizable && sizeRef.current) {
+            el.style.width = sizeRef.current.width;
+            el.style.height = sizeRef.current.height;
+        }
+    }, [resizable, contentRef]);
+    const resizableStyle = resizable
+        ? { resize: 'both' }
+        : undefined;
+    return (_jsx(ComboboxPrimitive.Portal, { children: _jsx(ComboboxPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, anchor: anchor, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(ComboboxPrimitive.Popup, { ref: popupRef, "data-slot": "combobox-content", "data-chips": !!anchor, "data-resizable": resizable || undefined, style: { ...resizableStyle, ...style }, className: cn('twa:group/combobox-content twa:relative twa:origin-(--transform-origin) twa:overflow-hidden twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:*:data-[slot=input-group]:m-1 twa:*:data-[slot=input-group]:mb-0 twa:*:data-[slot=input-group]:h-8 twa:*:data-[slot=input-group]:border-input/30 twa:*:data-[slot=input-group]:bg-input/30 twa:*:data-[slot=input-group]:shadow-none twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:max-h-[min(var(--available-height),80vh)]', 'twa:max-w-[min(var(--available-width),80vw)]', 'twa:min-w-[min(calc(var(--anchor-width)+--spacing(7)),var(--available-width),80vw)]', resizable ? 'twa:flex twa:flex-col twa:min-h-24' : 'twa:w-(--anchor-width)', className), ...props }) }) }));
+}
+function ComboboxList({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.List, { "data-slot": "combobox-list", className: cn('twa:no-scrollbar twa:max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] twa:scroll-py-1 twa:overflow-y-auto twa:overscroll-contain twa:p-1 twa:data-empty:p-0', RESIZABLE_LIST_CLASS, className), ...props }));
+}
+const checkboxIndicatorRender = (props, state) => {
+    const clsForSquare = state.selected ? 'twa:ring-1 twa:ring-accent-foreground' : '';
+    return (_jsx(CheckBox, { checked: state.selected, tabIndex: -1, checkSquareClassName: clsForSquare, className: "twa:p-0 twa:m-0 twa:cursor-pointer" }));
+};
+function ComboboxItem({ className, children, renderCheckboxIndicator, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Item, { className: cn('twa:relative twa:flex twa:w-full twa:cursor-default twa:items-center twa:gap-2 twa:rounded-input twa:py-1.5 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:data-highlighted:bg-accent twa:data-highlighted:text-accent-foreground twa:not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', 'twa:cursor-pointer', renderCheckboxIndicator ? 'twa:pr-2' : 'twa:pr-8', className), ...props, "data-slot": "combobox-item", children: [renderCheckboxIndicator ? (_jsx(ComboboxPrimitive.ItemIndicator, { keepMounted: true, render: renderCheckboxIndicator === true ? checkboxIndicatorRender : renderCheckboxIndicator })) : null, children, !renderCheckboxIndicator && (_jsx(ComboboxPrimitive.ItemIndicator, { render: _jsx("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: _jsx(CheckIcon, { className: "twa:pointer-events-none" }) }))] }));
+}
+function ComboboxGroup({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Group, { "data-slot": "combobox-group", className: cn(className), ...props }));
+}
+function ComboboxLabel({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.GroupLabel, { "data-slot": "combobox-label", className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ...props }));
+}
+function ComboboxCollection({ ...props }) {
+    return _jsx(ComboboxPrimitive.Collection, { "data-slot": "combobox-collection", ...props });
+}
+function ComboboxEmpty({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Empty, { "data-slot": "combobox-empty", className: cn('twa:hidden twa:w-full twa:justify-center twa:py-2 twa:text-center twa:text-sm twa:text-muted-foreground twa:group-data-empty/combobox-content:flex', className), ...props }));
+}
+function ComboboxSeparator({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Separator, { "data-slot": "combobox-separator", className: cn('twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ...props }));
+}
+function ComboboxChips({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Chips, { "data-slot": "combobox-chips", className: cn('twa:focus-within:outline-none', 'twa:flex twa:flex-wrap twa:items-center twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:bg-input-background twa:bg-clip-padding twa:text-sm twa:shadow-xs twa:transition-[color,box-shadow] twa:focus-within:border-ring twa:focus-within:ring-3 twa:focus-within:ring-ring/50 twa:has-aria-invalid:border-destructive twa:has-aria-invalid:ring-3 twa:has-aria-invalid:ring-destructive/20 twa:has-data-[slot=combobox-chip]:px-1.5 twa:dark:bg-input/30 twa:dark:has-aria-invalid:border-destructive/50 twa:dark:has-aria-invalid:ring-destructive/40', 'twa:py-1', 'twa:px-2.5', 'twa:min-h-input', 'twa:[&>input]:max-h-[calc(var(--ab-input-height)-1.5*var(--ab-base-space))]!', className), ...props }));
+}
+function ComboboxChip({ className, children, showRemove = true, onRemove, ...props }) {
+    return (_jsxs(ComboboxPrimitive.Chip, { "data-slot": "combobox-chip", className: cn('twa:flex twa:h-[calc(--spacing(5.5))] twa:w-fit twa:items-center twa:justify-center twa:gap-1 twa:rounded-input twa:bg-muted twa:px-1.5 twa:text-xs twa:font-medium twa:whitespace-nowrap twa:text-input-foreground twa:has-disabled:pointer-events-none twa:has-disabled:cursor-not-allowed twa:has-disabled:opacity-50 twa:has-data-[slot=combobox-chip-remove]:pr-0', className), ...props, children: [children, showRemove &&
+                (onRemove ? (_jsx(Button, { type: "button", variant: "ghost", size: "icon-xs", tabIndex: -1, "data-slot": "combobox-chip-remove", className: "twa:-ml-1 twa:opacity-50 twa:hover:opacity-100", onMouseDown: (e) => {
+                        // Don't let base-ui's Chip onMouseDown steal focus back to the
+                        // input before the click fires.
+                        e.preventDefault();
+                        // and also stop the propagation, so the mousedown wont
+                        // trigger the combobox to open
+                        e.stopPropagation();
+                    }, onClick: (e) => {
+                        e.stopPropagation();
+                        onRemove(e);
+                    }, children: _jsx(XIcon, { className: "twa:pointer-events-none" }) })) : (_jsx(ComboboxPrimitive.ChipRemove, { render: _jsx(Button, { variant: "ghost", size: "icon-xs" }), className: "twa:-ml-1 twa:opacity-50 twa:hover:opacity-100", "data-slot": "combobox-chip-remove", children: _jsx(XIcon, { className: "twa:pointer-events-none" }) })))] }));
+}
+function ComboboxChipsInput({ className, ...props }) {
+    return (_jsx(ComboboxPrimitive.Input, { "data-slot": "combobox-chip-input", className: cn('twa:placeholder:text-muted-foreground twa:min-w-16 twa:flex-1 twa:px-2.5 twa:outline-none twa:border-none twa:bg-transparent twa:min-h-auto!', className), ...props }));
+}
+function useComboboxAnchor() {
+    return React.useRef(null);
+}
+export { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem, ComboboxGroup, ComboboxLabel, ComboboxCollection, ComboboxEmpty, ComboboxSeparator, ComboboxChips, ComboboxChip, ComboboxChipsInput, ComboboxTrigger, ComboboxValue, useComboboxAnchor, RESIZABLE_VIRTUALIZED_LIST_CLASS, RESIZABLE_VIRTUALIZED_SCROLL_CLASS, };

package/src/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+declare function DropdownMenu({ ...props }: MenuPrimitive.Root.Props): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: MenuPrimitive.GroupLabel.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: MenuPrimitive.Item.Props & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: MenuPrimitive.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: MenuPrimitive.CheckboxItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: MenuPrimitive.RadioItem.Props & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: MenuPrimitive.Separator.Props): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/src/components/ui/dropdown-menu.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Menu as MenuPrimitive } from '@base-ui/react/menu';
+import { cn, POPUP_Z_INDEX } from '~/lib/utils';
+import { ChevronRightIcon, CheckIcon } from 'lucide-react';
+function DropdownMenu({ ...props }) {
+    return _jsx(MenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return _jsx(MenuPrimitive.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return _jsx(MenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ align = 'start', alignOffset = 0, side = 'bottom', sideOffset = 4, className, ...props }) {
+    return (_jsx(MenuPrimitive.Portal, { children: _jsx(MenuPrimitive.Positioner, { className: `twa:isolate ${POPUP_Z_INDEX} twa:outline-none`, align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: _jsx(MenuPrimitive.Popup, { "data-slot": "dropdown-menu-content", className: cn('twa:z-50 twa:max-h-(--available-height) twa:w-(--anchor-width) twa:min-w-32 twa:origin-(--transform-origin) twa:overflow-x-hidden twa:overflow-y-auto twa:rounded-md twa:bg-popover twa:p-1 twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:outline-none twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:overflow-hidden twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return _jsx(MenuPrimitive.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (_jsx(MenuPrimitive.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:font-medium twa:text-muted-foreground twa:data-inset:pl-8', className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = 'default', ...props }) {
+    return (_jsx(MenuPrimitive.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn('twa:group/dropdown-menu-item twa:relative twa:flex twa:cursor-default twa:items-center twa:gap-2 twa:rounded-sm twa:px-2 twa:py-1.5 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:not-data-[variant=destructive]:focus:**:text-accent-foreground twa:data-inset:pl-8 twa:data-[variant=destructive]:text-destructive twa:data-[variant=destructive]:focus:bg-destructive/10 twa:data-[variant=destructive]:focus:text-destructive twa:dark:data-[variant=destructive]:focus:bg-destructive/20 twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4 twa:data-[variant=destructive]:*:[svg]:text-destructive', className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return _jsx(MenuPrimitive.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (_jsxs(MenuPrimitive.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn('twa:flex twa:cursor-default twa:items-center twa:gap-2 twa:rounded-sm twa:px-2 twa:py-1.5 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:not-data-[variant=destructive]:focus:**:text-accent-foreground twa:data-inset:pl-8 twa:data-popup-open:bg-accent twa:data-popup-open:text-accent-foreground twa:data-open:bg-accent twa:data-open:text-accent-foreground twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, children: [children, _jsx(ChevronRightIcon, { className: "twa: twa:ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = 'start', alignOffset = -3, side = 'right', sideOffset = 0, className, ...props }) {
+    return (_jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn('twa:w-auto twa:min-w-[96px] twa:rounded-md twa:bg-popover twa:p-1 twa:text-popover-foreground twa:shadow-lg twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn('twa:relative twa:flex twa:cursor-default twa:items-center twa:gap-2 twa:rounded-sm twa:py-1.5 twa:pr-8 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:focus:**:text-accent-foreground twa:data-inset:pl-8 twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', className), checked: checked, ...props, children: [_jsx("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:items-center twa:justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: _jsx(MenuPrimitive.CheckboxItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return _jsx(MenuPrimitive.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+    return (_jsxs(MenuPrimitive.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn('twa:relative twa:flex twa:cursor-default twa:items-center twa:gap-2 twa:rounded-sm twa:py-1.5 twa:pr-8 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:focus:**:text-accent-foreground twa:data-inset:pl-8 twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, children: [_jsx("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:items-center twa:justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: _jsx(MenuPrimitive.RadioItemIndicator, { children: _jsx(CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (_jsx(MenuPrimitive.Separator, { "data-slot": "dropdown-menu-separator", className: cn('twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (_jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn('twa:ml-auto twa:text-xs twa:tracking-widest twa:text-muted-foreground twa:group-focus/dropdown-menu-item:text-accent-foreground', className), ...props }));
+}
+export { DropdownMenu, DropdownMenuPortal, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, };

package/src/components/ui/input-group.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { Button } from '~/components/ui/button';
+declare function InputGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: {
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<'div'> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: {
+    size?: "xs" | "sm" | "icon-xs" | "icon-sm";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'type'> & VariantProps<typeof inputGroupButtonVariants> & {
+    type?: 'button' | 'submit' | 'reset';
+}): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/src/components/ui/input-group.js

@@ -0,0 +1,57 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '~/lib/utils';
+import { Button } from '~/components/ui/button';
+import { Input } from '~/components/ui/input';
+import { Textarea } from '~/components/ui/textarea';
+function InputGroup({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "input-group", role: "group", className: cn('twa:group/input-group twa:relative twa:flex twa:h-input twa:w-full twa:min-w-0 twa:items-center twa:rounded-input twa:border twa:border-input twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:in-data-[slot=combobox-content]:focus-within:border-inherit twa:in-data-[slot=combobox-content]:focus-within:ring-0 twa:has-[[data-slot=input-group-control]:focus-visible]:border-ring twa:has-[[data-slot=input-group-control]:focus-visible]:ring-3 twa:has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 twa:has-[[data-slot][aria-invalid=true]]:border-destructive twa:has-[[data-slot][aria-invalid=true]]:ring-3 twa:has-[[data-slot][aria-invalid=true]]:ring-destructive/20 twa:has-[>[data-align=block-end]]:h-auto twa:has-[>[data-align=block-end]]:flex-col twa:has-[>[data-align=block-start]]:h-auto twa:has-[>[data-align=block-start]]:flex-col twa:has-[>textarea]:h-auto twa:dark:bg-input/30 twa:dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 twa:has-[>[data-align=block-end]]:[&>input]:pt-3 twa:has-[>[data-align=block-start]]:[&>input]:pb-3 twa:has-[>[data-align=inline-end]]:[&>input]:pr-1.5 twa:has-[>[data-align=inline-start]]:[&>input]:pl-1.5', className), ...props }));
+}
+const inputGroupAddonVariants = cva('twa:flex twa:h-auto twa:cursor-text twa:items-center twa:justify-center twa:gap-2 twa:py-1.5 twa:text-sm twa:font-medium twa:text-muted-foreground twa:select-none twa:group-data-[disabled=true]/input-group:opacity-50 twa:[&>kbd]:rounded-[calc(var(--ab-border-radius))] twa:[&>svg:not([class*=size-])]:size-4', {
+    variants: {
+        align: {
+            'inline-start': 'twa:order-first twa:pl-2 twa:has-[>button]:-ml-1 twa:has-[>kbd]:ml-[-0.15rem]',
+            'inline-end': 'twa:order-last twa:pr-2 twa:has-[>button]:-mr-1 twa:has-[>kbd]:mr-[-0.15rem]',
+            'block-start': 'twa:order-first twa:w-full twa:justify-start twa:px-2.5 twa:pt-2 twa:group-has-[>input]/input-group:pt-2 twa:[.border-b]:pb-2',
+            'block-end': 'twa:order-last twa:w-full twa:justify-start twa:px-2.5 twa:pb-2 twa:group-has-[>input]/input-group:pb-2 twa:[.border-t]:pt-2',
+        },
+    },
+    defaultVariants: {
+        align: 'inline-start',
+    },
+});
+function InputGroupAddon({ className, align = 'inline-start', ...props }) {
+    return (_jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest('button')) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector('input')?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = cva('twa:flex twa:items-center twa:gap-2 twa:text-sm twa:shadow-none', {
+    variants: {
+        size: {
+            xs: 'twa:h-6 twa:gap-1 twa:rounded twa:px-1.5 twa:[&>svg:not([class*=size-])]:size-3.5',
+            sm: 'twa:',
+            'icon-xs': 'twa:size-6 twa:rounded twa:p-0 twa:has-[>svg]:p-0',
+            'icon-sm': 'twa:size-8 twa:p-0 twa:has-[>svg]:p-0',
+        },
+    },
+    defaultVariants: {
+        size: 'xs',
+    },
+});
+function InputGroupButton({ className, type = 'button', variant = 'ghost', size = 'xs', ...props }) {
+    return (_jsx(Button, { type: type, "data-size": size, variant: variant, className: cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (_jsx("span", { className: cn('twa:flex twa:items-center twa:gap-2 twa:text-sm twa:text-muted-foreground twa:[&_svg]:pointer-events-none twa:[&_svg:not([class*=size-])]:size-4', className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (_jsx(Input, { "data-slot": "input-group-control", className: cn('twa:flex-1 twa:rounded-none twa:border-0 twa:bg-transparent twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (_jsx(Textarea, { "data-slot": "input-group-control", className: cn('twa:flex-1 twa:resize-none twa:rounded-none twa:border-0 twa:bg-transparent twa:py-2 twa:shadow-none twa:ring-0 twa:focus-visible:ring-0 twa:aria-invalid:ring-0 twa:dark:bg-transparent', className), ...props }));
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/src/components/ui/input.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Input({ className, type, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+export { Input };

package/src/components/ui/input.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Input as InputPrimitive } from "@base-ui/react/input";
+import { cn } from "~/lib/utils";
+function Input({ className, type, ...props }) {
+    return (_jsx(InputPrimitive, { type: type, "data-slot": "input", className: cn("twa:h-9 twa:w-full twa:min-w-0 twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-1 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:file:inline-flex twa:file:h-7 twa:file:border-0 twa:file:bg-transparent twa:file:text-sm twa:file:font-medium twa:file:text-foreground twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:pointer-events-none twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:bg-input/30 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Input };

package/src/components/ui/popover.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+declare function Popover({ ...props }: PopoverPrimitive.Root.Props): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props): React.JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: PopoverPrimitive.Popup.Props & Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props): React.JSX.Element;
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

package/src/components/ui/popover.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+import { cn, POPUP_Z_INDEX } from "~/lib/utils";
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ ...props }) {
+    return _jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
+}
+function PopoverContent({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }) {
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsx(PopoverPrimitive.Popup, { "data-slot": "popover-content", className: cn("twa:flex twa:w-72 twa:origin-(--transform-origin) twa:flex-col twa:gap-4 twa:rounded-md twa:bg-popover twa:p-4 twa:text-sm twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:outline-hidden twa:duration-100 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95", className), ...props }) }) }));
+}
+function PopoverHeader({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "popover-header", className: cn("twa:flex twa:flex-col twa:gap-1 twa:text-sm", className), ...props }));
+}
+function PopoverTitle({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Title, { "data-slot": "popover-title", className: cn("twa: twa:font-medium", className), ...props }));
+}
+function PopoverDescription({ className, ...props }) {
+    return (_jsx(PopoverPrimitive.Description, { "data-slot": "popover-description", className: cn("twa:text-muted-foreground", className), ...props }));
+}
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, };

package/src/components/ui/select.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+declare const Select: typeof SelectPrimitive.Root;
+declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): React.JSX.Element;
+declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): React.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
+    size?: 'sm' | 'default';
+    'data-name'?: string;
+}): React.JSX.Element;
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, container, stopMouseDownPropagation, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'> & {
+    /** Portal mount node (e.g. popover body) so nested floating UI stays “inside” the parent surface. */
+    container?: React.ComponentProps<typeof SelectPrimitive.Portal>['container'];
+    /**
+     * When `true`, stops the native `mousedown` from bubbling beyond the popup.
+     * Use this when the trigger lives inside an outside-click-detecting overlay
+     * (e.g. ag-grid's column menu) that would otherwise close itself on
+     * mousedowns happening inside the portaled popup.
+     */
+    stopMouseDownPropagation?: boolean;
+}): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): React.JSX.Element;
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/src/components/ui/select.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select as SelectPrimitive } from '@base-ui/react/select';
+import { cn, POPUP_Z_INDEX } from '~/lib/utils';
+import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
+const Select = SelectPrimitive.Root;
+function SelectGroup({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn('twa:scroll-my-1 twa:p-1', className), ...props }));
+}
+function SelectValue({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn('twa:text-input-foreground twa:flex twa:flex-1 twa:text-left', className), ...props }));
+}
+function SelectTrigger({ className, size = 'default', children, ...props }) {
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn('twa:flex twa:w-fit twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:py-1.5 twa:pr-2 twa:pl-2.5 twa:text-sm twa:whitespace-nowrap twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:data-placeholder:text-muted-foreground twa:data-[size=default]:min-h-input twa:data-[size=sm]:h-7 twa:data-[size=sm]:min-h-auto twa:*:data-[slot=select-value]:line-clamp-1 twa:*:data-[slot=select-value]:flex twa:*:data-[slot=select-value]:items-center twa:*:data-[slot=select-value]:gap-1.5 twa:bg-input-background twa:hover:bg-input-background/80 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, "data-name": props['data-name'], children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" }) })] }));
+}
+function SelectContent({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger = true, container, stopMouseDownPropagation = false, ...props }) {
+    const onMouseDown = stopMouseDownPropagation
+        ? (e) => {
+            e.nativeEvent?.stopPropagation?.();
+        }
+        : undefined;
+    return (_jsx(SelectPrimitive.Portal, { container: container, children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, onMouseDown: onMouseDown, className: cn('twa:relative twa:isolate twa:z-50 twa:max-h-(--available-height) twa:min-w-36 twa:origin-(--transform-origin) twa:overflow-x-hidden twa:overflow-y-auto twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[align-trigger=true]:animate-none twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:w-(--anchor-width)', 'twa:max-w-[min(var(--available-width),80vw)]', className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
+}
+function SelectLabel({ className, ...props }) {
+    return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ...props }));
+}
+function SelectItem({ className, children, ...props }) {
+    return (_jsxs(SelectPrimitive.Item, { className: cn('twa:relative twa:flex twa:w-full twa:cursor-default twa:items-center twa:gap-2 twa:rounded-input twa:py-1.5 twa:pr-8 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:not-data-[variant=destructive]:focus:**:text-accent-foreground twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4 twa:*:[span]:last:flex twa:*:[span]:last:items-center twa:*:[span]:last:gap-2', className), ...props, "data-slot": "select-item", children: [_jsx(SelectPrimitive.ItemText, { className: "twa:block twa:min-w-0 twa:flex-1 twa:truncate", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: _jsx(CheckIcon, { className: "twa:pointer-events-none" }) })] }));
+}
+function SelectSeparator({ className, ...props }) {
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('twa:pointer-events-none twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ...props }));
+}
+function SelectScrollUpButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollUpArrow, { "data-slot": "select-scroll-up-button", className: cn('twa:top-0 twa:z-10 twa:flex twa:w-full twa:cursor-default twa:items-center twa:justify-center twa:bg-popover twa:py-1 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, children: _jsx(ChevronUpIcon, {}) }));
+}
+function SelectScrollDownButton({ className, ...props }) {
+    return (_jsx(SelectPrimitive.ScrollDownArrow, { "data-slot": "select-scroll-down-button", className: cn('twa:bottom-0 twa:z-10 twa:flex twa:w-full twa:cursor-default twa:items-center twa:justify-center twa:bg-popover twa:py-1 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, children: _jsx(ChevronDownIcon, {}) }));
+}
+export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };

package/src/components/ui/textarea.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { Textarea };

package/src/components/ui/textarea.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "~/lib/utils";
+function Textarea({ className, ...props }) {
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("twa:flex twa:field-sizing-content twa:min-h-16 twa:w-full twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-2 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:bg-input/30 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40", className), ...props }));
+}
+export { Textarea };

package/src/components/ui/tooltip.d.ts

@@ -0,0 +1,6 @@
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): import("react").JSX.Element;
+declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): import("react").JSX.Element;
+declare function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props): import("react").JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): import("react").JSX.Element;
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/ui/tooltip.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+import { cn, POPUP_Z_INDEX } from "~/lib/utils";
+function TooltipProvider({ delay = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props }));
+}
+function Tooltip({ ...props }) {
+    return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, side = "top", sideOffset = 4, align = "center", alignOffset = 0, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn("twa:z-50 twa:inline-flex twa:w-fit twa:max-w-xs twa:origin-(--transform-origin) twa:items-center twa:gap-1.5 twa:rounded-md twa:bg-foreground twa:px-3 twa:py-1.5 twa:text-xs twa:text-background twa:has-data-[slot=kbd]:pr-1.5 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:**:data-[slot=kbd]:relative twa:**:data-[slot=kbd]:isolate twa:**:data-[slot=kbd]:z-50 twa:**:data-[slot=kbd]:rounded-sm twa:data-[state=delayed-open]:animate-in twa:data-[state=delayed-open]:fade-in-0 twa:data-[state=delayed-open]:zoom-in-95 twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "twa:z-50 twa:size-2.5 twa:translate-y-[calc(-50%-2px)] twa:rotate-45 twa:rounded-[2px] twa:bg-foreground twa:fill-foreground twa:data-[side=bottom]:top-1 twa:data-[side=inline-end]:top-1/2! twa:data-[side=inline-end]:-left-1 twa:data-[side=inline-end]:-translate-y-1/2 twa:data-[side=inline-start]:top-1/2! twa:data-[side=inline-start]:-right-1 twa:data-[side=inline-start]:-translate-y-1/2 twa:data-[side=left]:top-1/2! twa:data-[side=left]:-right-1 twa:data-[side=left]:-translate-y-1/2 twa:data-[side=right]:top-1/2! twa:data-[side=right]:-left-1 twa:data-[side=right]:-translate-y-1/2 twa:data-[side=top]:-bottom-2.5" })] }) }) }));
+}
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };