@crfrsr/ui 1.0.0

package/dist/ThemeProvider.d.ts

@@ -0,0 +1,22 @@
+import React, { ReactNode } from 'react';
+import { Theme, ThemeOverrides, ColorMode } from '@crfrsr/core';
+interface ThemeContextValue {
+    theme: Theme;
+    setMode: React.Dispatch<React.SetStateAction<ColorMode>>;
+    toggleMode: () => void;
+    isLight: boolean;
+    isDark: boolean;
+}
+export interface ThemeProviderProps {
+    children: ReactNode;
+    initialMode?: ColorMode;
+    /**
+     * Per-app theme customization, merged over the library defaults. Define it at
+     * module level (or memoize it) so its identity is stable across renders.
+     */
+    theme?: ThemeOverrides;
+    skipBodyFontFamily?: boolean;
+}
+export declare function ThemeProvider({ children, initialMode, theme: themeOverrides, skipBodyFontFamily, }: ThemeProviderProps): React.JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export {};

package/dist/ThemeProvider.js

@@ -0,0 +1,53 @@
+import React, { createContext, useContext } from 'react';
+import { createTheme, themeToCssVariables, } from '@crfrsr/core';
+const ThemeContext = createContext(undefined);
+export function ThemeProvider({ children, initialMode = 'light', theme: themeOverrides, skipBodyFontFamily = false, }) {
+    const [mode, setMode] = React.useState(initialMode);
+    const theme = React.useMemo(() => {
+        return createTheme(mode, themeOverrides);
+    }, [mode, themeOverrides]);
+    // Set global CSS variables from theme. useLayoutEffect so the app's palette
+    // lands before first paint — with useEffect the initial frame would flash the
+    // static tokens.css defaults.
+    React.useLayoutEffect(() => {
+        const root = document.documentElement;
+        // Full --crfrsr-* contract consumed by the shipped component CSS
+        const vars = themeToCssVariables(theme);
+        for (const [name, value] of Object.entries(vars)) {
+            root.style.setProperty(name, value);
+        }
+        // Marker class so the static tokens.css `.crfrsr-dark` block can also apply
+        root.classList.toggle('crfrsr-dark', mode === 'dark');
+        // Legacy --theme-* variables kept for backward compatibility (examples/web)
+        root.style.setProperty('--theme-background', theme.colors.background);
+        root.style.setProperty('--theme-surface', theme.colors.surface);
+        root.style.setProperty('--theme-border', theme.colors.border);
+        root.style.setProperty('--theme-font-family', theme.typography.fontFamily.base);
+        root.style.setProperty('--theme-text-color', theme.colors.text);
+        if (!skipBodyFontFamily) {
+            document.body.style.fontFamily = theme.typography.fontFamily.base;
+        }
+        document.body.style.color = theme.colors.text;
+        document.body.style.backgroundColor = theme.colors.background;
+    }, [mode, theme, skipBodyFontFamily]);
+    const toggleMode = React.useCallback(() => {
+        setMode(prevMode => prevMode === 'dark' ? 'light' : 'dark');
+    }, []);
+    const isLight = mode === 'light';
+    const isDark = mode === 'dark';
+    const value = React.useMemo(() => ({
+        theme,
+        setMode,
+        toggleMode,
+        isLight,
+        isDark,
+    }), [theme, setMode, toggleMode, isLight, isDark]);
+    return (React.createElement(ThemeContext.Provider, { value: value }, children));
+}
+export function useTheme() {
+    const context = useContext(ThemeContext);
+    if (context === undefined) {
+        throw new Error('useTheme must be used within a ThemeProvider');
+    }
+    return context;
+}

package/dist/components/Button.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+export type ButtonSize = 'sm' | 'md' | 'lg' | 'icon';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+/**
+ * Single Button for the design system. Consolidates the two buttons that used to
+ * live in consumer apps (a custom primary/secondary button and a shadcn button).
+ * Styled entirely through the --crfrsr-* CSS variables; pass `className` to layer
+ * app-specific styles (e.g. Tailwind utilities) on top.
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Button.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { cn } from '../lib/cn';
+/**
+ * Single Button for the design system. Consolidates the two buttons that used to
+ * live in consumer apps (a custom primary/secondary button and a shadcn button).
+ * Styled entirely through the --crfrsr-* CSS variables; pass `className` to layer
+ * app-specific styles (e.g. Tailwind utilities) on top.
+ */
+export const Button = React.forwardRef(({ variant = 'primary', size = 'md', type = 'button', className, ...props }, ref) => {
+    return (React.createElement("button", { ref: ref, type: type, className: cn('crfrsr-btn', `crfrsr-btn--${variant}`, `crfrsr-btn--${size}`, className), ...props }));
+});
+Button.displayName = 'Button';

package/dist/components/Combobox.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+export interface ComboboxProps<T> {
+    options: T[];
+    filteredOptions: T[];
+    isLoading?: boolean;
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    onSelect: (option: T) => void;
+    trigger: React.ReactNode;
+    renderOption: (option: T, index: number, onSelect: () => void) => React.ReactNode;
+    placeholder?: string;
+    emptyMessage?: string;
+    loadingMessage?: string;
+    /** CSS width value for the popover, e.g. "200px" or "12rem". Default "137.5px". */
+    popoverWidth?: string;
+    /** Extra class names for the popover content. */
+    popoverClassName?: string;
+    estimateItemSize?: number;
+    inputClassName?: string;
+    hasNextPage?: boolean;
+    isFetchingNextPage?: boolean;
+    onLoadMore?: () => void;
+    showClearButton?: boolean;
+    onClear?: () => void;
+    value?: unknown;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Generic, virtualized combobox with optional infinite scroll. Styling-agnostic:
+ * the trigger and each option are supplied by the consumer via render props, and
+ * the popover width is a plain CSS value.
+ */
+export declare function Combobox<T>({ filteredOptions, isLoading, searchValue, onSearchChange, onSelect, trigger, renderOption, placeholder, emptyMessage, loadingMessage, popoverWidth, popoverClassName, estimateItemSize, hasNextPage, isFetchingNextPage, onLoadMore, showClearButton, onClear, value, onOpenChange: externalOnOpenChange, inputClassName, }: ComboboxProps<T>): React.JSX.Element;

package/dist/components/Combobox.js

@@ -0,0 +1,255 @@
+import * as React from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { cn } from '../lib/cn';
+import { useIsMobile } from '../hooks/useIsMobile';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandList, } from './command';
+import { Popover, PopoverContent, PopoverTrigger } from './popover';
+/**
+ * Generic, virtualized combobox with optional infinite scroll. Styling-agnostic:
+ * the trigger and each option are supplied by the consumer via render props, and
+ * the popover width is a plain CSS value.
+ */
+export function Combobox({ filteredOptions, isLoading = false, searchValue, onSearchChange, onSelect, trigger, renderOption, placeholder = 'Search...', emptyMessage = 'No items found.', loadingMessage = 'Loading...', popoverWidth = '137.5px', popoverClassName, estimateItemSize = 28, hasNextPage = false, isFetchingNextPage = false, onLoadMore, showClearButton = false, onClear, value, onOpenChange: externalOnOpenChange, inputClassName, }) {
+    const [open, setOpen] = React.useState(false);
+    const isMobile = useIsMobile();
+    // Notify parent of open state changes
+    React.useEffect(() => {
+        externalOnOpenChange?.(open);
+    }, [open, externalOnOpenChange]);
+    const commandListRef = React.useRef(null);
+    const parentRef = React.useRef(null);
+    const containerRef = React.useRef(null);
+    const isScrollingRef = React.useRef(false);
+    // Reset search when popover closes, after the close animation finishes.
+    // NOTE: 200ms must match the popover close-animation duration in combobox.css.
+    React.useEffect(() => {
+        if (!open) {
+            const timeoutId = setTimeout(() => {
+                onSearchChange('');
+            }, 200);
+            return () => clearTimeout(timeoutId);
+        }
+    }, [open, onSearchChange]);
+    // Detect scrolling on mobile to prevent accidental combobox opens
+    React.useEffect(() => {
+        let scrollTimeout;
+        const handleScroll = () => {
+            isScrollingRef.current = true;
+            clearTimeout(scrollTimeout);
+            scrollTimeout = setTimeout(() => {
+                isScrollingRef.current = false;
+            }, 150); // Reset scrolling flag 150ms after scroll ends
+        };
+        window.addEventListener('scroll', handleScroll, { passive: true });
+        window.addEventListener('touchmove', handleScroll, { passive: true });
+        return () => {
+            window.removeEventListener('scroll', handleScroll);
+            window.removeEventListener('touchmove', handleScroll);
+            clearTimeout(scrollTimeout);
+        };
+    }, []);
+    // Create full-page overlay when combobox opens
+    React.useEffect(() => {
+        if (!open)
+            return;
+        const overlay = document.createElement('div');
+        overlay.style.position = 'fixed';
+        overlay.style.top = '0';
+        overlay.style.left = '0';
+        overlay.style.right = '0';
+        overlay.style.bottom = '0';
+        overlay.style.width = '100%';
+        overlay.style.height = '100%';
+        overlay.style.userSelect = 'none';
+        overlay.style.zIndex = '40'; // Below popover (z-50) but above most content
+        document.body.appendChild(overlay);
+        return () => {
+            if (document.body.contains(overlay)) {
+                document.body.removeChild(overlay);
+            }
+        };
+    }, [open]);
+    // Virtualizer for the list
+    const rowVirtualizer = useVirtualizer({
+        count: filteredOptions.length,
+        getScrollElement: () => commandListRef.current,
+        estimateSize: () => estimateItemSize,
+        overscan: 10,
+    });
+    // Reset virtualizer when opening
+    React.useEffect(() => {
+        if (open) {
+            rowVirtualizer.measure();
+        }
+    }, [open, rowVirtualizer]);
+    // Update virtualizer when filtered options change
+    React.useEffect(() => {
+        if (open && filteredOptions.length > 0) {
+            rowVirtualizer.measure();
+        }
+    }, [filteredOptions.length, open, rowVirtualizer]);
+    // Check if we need to load more pages (when data changes or scrolling)
+    const virtualItems = rowVirtualizer.getVirtualItems();
+    const checkLoadMore = React.useCallback(() => {
+        // Skip if already fetching or no more pages
+        if (isFetchingNextPage || isLoading || !hasNextPage || !onLoadMore)
+            return;
+        const scrollElement = commandListRef.current;
+        if (!scrollElement)
+            return;
+        // Check scroll position - load when within 80% of scroll height
+        const scrollTop = scrollElement.scrollTop;
+        const scrollHeight = scrollElement.scrollHeight;
+        const clientHeight = scrollElement.clientHeight;
+        const scrollPercentage = (scrollTop + clientHeight) / scrollHeight;
+        // Also check virtual items as backup
+        const lastItem = virtualItems.length > 0 ? virtualItems[virtualItems.length - 1] : null;
+        // Load next page if:
+        // 1. Scrolled to 80% of content, OR
+        // 2. Last visible item is within 20 items of the end
+        if (scrollPercentage >= 0.8 ||
+            (lastItem && lastItem.index >= filteredOptions.length - 20)) {
+            onLoadMore();
+        }
+    }, [
+        virtualItems,
+        isFetchingNextPage,
+        isLoading,
+        hasNextPage,
+        onLoadMore,
+        filteredOptions.length,
+    ]);
+    // Check for more pages when filtered options change (new data loaded)
+    React.useEffect(() => {
+        if (open && filteredOptions.length > 0 && onLoadMore) {
+            requestAnimationFrame(() => {
+                checkLoadMore();
+            });
+        }
+    }, [open, filteredOptions.length, checkLoadMore, onLoadMore]);
+    // Infinite scroll: load next page when scrolling near the bottom
+    React.useEffect(() => {
+        if (!open || !onLoadMore)
+            return;
+        const scrollElement = commandListRef.current;
+        if (!scrollElement) {
+            return;
+        }
+        const rafHandleScroll = () => {
+            requestAnimationFrame(() => {
+                checkLoadMore();
+            });
+        };
+        scrollElement.addEventListener('scroll', rafHandleScroll, { passive: true });
+        return () => {
+            scrollElement.removeEventListener('scroll', rafHandleScroll);
+        };
+    }, [open, checkLoadMore, onLoadMore]);
+    // Handle popover open change - prevent opening if scrolling
+    const handleOpenChange = React.useCallback((newOpen) => {
+        if (newOpen && isScrollingRef.current) {
+            return;
+        }
+        setOpen(newOpen);
+    }, []);
+    // Touch handlers for mobile to prevent double-tap issue
+    const handleTouchStart = React.useCallback((e) => {
+        if (isMobile) {
+            const touch = e.touches[0];
+            if (touch) {
+                e.currentTarget.__touchStart = {
+                    x: touch.clientX,
+                    y: touch.clientY,
+                    time: Date.now(),
+                };
+            }
+        }
+    }, [isMobile]);
+    const handleTouchMove = React.useCallback((e) => {
+        if (isMobile) {
+            const touchStart = e.currentTarget.__touchStart;
+            if (touchStart) {
+                const touch = e.touches[0];
+                if (touch) {
+                    const deltaX = Math.abs(touch.clientX - touchStart.x);
+                    const deltaY = Math.abs(touch.clientY - touchStart.y);
+                    // If moved more than 10px, consider it a scroll
+                    if (deltaX > 10 || deltaY > 10) {
+                        e.currentTarget.__isScrollGesture = true;
+                    }
+                }
+            }
+        }
+    }, [isMobile]);
+    const handleTouchEnd = React.useCallback((e) => {
+        // On mobile, trigger click immediately to open combobox.
+        // This prevents the double-tap issue.
+        if (isMobile) {
+            const target = e.currentTarget;
+            const isScrollGesture = target.__isScrollGesture;
+            if (isScrollGesture) {
+                // Don't open if it was a scroll gesture
+                e.preventDefault();
+                e.stopPropagation();
+                delete target.__touchStart;
+                delete target.__isScrollGesture;
+                return;
+            }
+            delete target.__touchStart;
+            delete target.__isScrollGesture;
+            e.preventDefault();
+            e.stopPropagation();
+            // Programmatically trigger click to open the popover
+            const clickEvent = new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+                view: window,
+            });
+            e.currentTarget.dispatchEvent(clickEvent);
+        }
+    }, [isMobile]);
+    const handleTriggerClick = React.useCallback((e) => {
+        // Stop propagation to prevent container selection
+        e.stopPropagation();
+    }, []);
+    return (React.createElement("div", { ref: containerRef, className: "crfrsr-combobox" },
+        React.createElement(Popover, { open: open, onOpenChange: handleOpenChange },
+            React.createElement(PopoverTrigger, { asChild: true },
+                React.createElement("div", { onTouchStart: handleTouchStart, onTouchMove: handleTouchMove, onTouchEnd: handleTouchEnd, onClick: handleTriggerClick }, trigger)),
+            React.createElement(PopoverContent, { className: cn('crfrsr-combobox__popover', popoverClassName), style: { width: popoverWidth }, align: "start", onClick: (e) => e.stopPropagation() },
+                React.createElement(Command, { shouldFilter: false },
+                    React.createElement(CommandInput, { placeholder: placeholder, className: inputClassName, value: searchValue, onValueChange: onSearchChange }),
+                    React.createElement(CommandList, { className: "crfrsr-combobox__list", ref: commandListRef },
+                        isLoading ? (React.createElement(CommandEmpty, { className: "crfrsr-combobox__message" }, loadingMessage)) : filteredOptions.length === 0 ? (React.createElement(CommandEmpty, { className: "crfrsr-combobox__message" }, emptyMessage)) : null,
+                        React.createElement(CommandGroup, { ref: parentRef, style: {
+                                height: `${rowVirtualizer.getTotalSize()}px`,
+                                width: '100%',
+                                position: 'relative',
+                            } }, filteredOptions.length === 0
+                            ? null
+                            : rowVirtualizer.getVirtualItems().map((virtualItem) => {
+                                const option = filteredOptions[virtualItem.index];
+                                if (!option)
+                                    return null;
+                                return (React.createElement("div", { key: virtualItem.key, style: {
+                                        position: 'absolute',
+                                        top: 0,
+                                        left: 0,
+                                        width: '100%',
+                                        height: `${virtualItem.size}px`,
+                                        transform: `translateY(${virtualItem.start}px)`,
+                                    } }, renderOption(option, virtualItem.index, () => {
+                                    if (!open) {
+                                        return;
+                                    }
+                                    onSelect(option);
+                                    setOpen(false);
+                                })));
+                            })))))),
+        showClearButton && value != null && onClear && (React.createElement("button", { type: "button", onClick: (e) => {
+                e.stopPropagation();
+                onClear();
+            }, className: "crfrsr-combobox__clear", "aria-label": "Clear selection" },
+            React.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "aria-hidden": "true" },
+                React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }))))));
+}

package/dist/components/Pill.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export type PillSize = 'default' | 'small' | 'icon';
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement> {
+    size?: PillSize;
+    /** Background color. Consumers pass a category color; CSS handles the rest. */
+    color?: string;
+    /** Background color on hover. When set, the pill becomes hoverable (CSS-driven,
+     *  no JS color swap needed). */
+    hoverColor?: string;
+    /** Optional leading glyph slot (rendered before the label). */
+    glyph?: React.ReactNode;
+    /** Uppercase the label (default true). Glyph is never transformed. */
+    uppercase?: boolean;
+}
+/**
+ * Generic pill / tag / badge. App-specific data (category colors, glyphs, exact
+ * font sizes) is supplied by the consumer via props and `className`; the library
+ * only owns the shape, sizing scale, and hover behavior.
+ */
+export declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLSpanElement>>;

package/dist/components/Pill.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { cn } from '../lib/cn';
+/**
+ * Generic pill / tag / badge. App-specific data (category colors, glyphs, exact
+ * font sizes) is supplied by the consumer via props and `className`; the library
+ * only owns the shape, sizing scale, and hover behavior.
+ */
+export const Pill = React.forwardRef(({ size = 'default', color, hoverColor, glyph, uppercase = true, className, style, children, ...props }, ref) => {
+    const pillVars = {
+        ...(color != null ? { '--crfrsr-pill-bg': color } : {}),
+        ...(hoverColor != null
+            ? { '--crfrsr-pill-bg-hover': hoverColor }
+            : {}),
+    };
+    return (React.createElement("span", { ref: ref, className: cn('crfrsr-pill', `crfrsr-pill--${size}`, uppercase && 'crfrsr-pill--uppercase', hoverColor != null && 'crfrsr-pill--hoverable', className), style: { ...pillVars, ...style }, ...props },
+        glyph != null && React.createElement("span", { className: "crfrsr-pill__glyph" }, glyph),
+        children != null && React.createElement("span", { className: "crfrsr-pill__label" }, children)));
+});
+Pill.displayName = 'Pill';

package/dist/components/command.d.ts

@@ -0,0 +1,74 @@
+import * as React from 'react';
+declare const Command: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React.ForwardRefExoticComponent<Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof React.HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "disabled" | "onSelect"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, };

package/dist/components/command.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { cn } from '../lib/cn';
+/** Inline magnifier icon (avoids pulling in an icon dependency). */
+function SearchIcon({ className }) {
+    return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, "aria-hidden": "true" },
+        React.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+        React.createElement("path", { d: "m21 21-4.3-4.3" })));
+}
+const Command = React.forwardRef(({ className, ...props }, ref) => (React.createElement(CommandPrimitive, { ref: ref, className: cn('crfrsr-command', className), ...props })));
+Command.displayName = CommandPrimitive.displayName;
+const CommandInput = React.forwardRef(({ className, ...props }, ref) => (React.createElement("div", { className: "crfrsr-command__input-wrapper", "cmdk-input-wrapper": "" },
+    React.createElement(SearchIcon, { className: "crfrsr-command__input-icon" }),
+    React.createElement(CommandPrimitive.Input, { ref: ref, className: cn('crfrsr-command__input', className), ...props }))));
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+const CommandList = React.forwardRef(({ className, ...props }, ref) => (React.createElement(CommandPrimitive.List, { ref: ref, className: cn('crfrsr-command__list', className), ...props })));
+CommandList.displayName = CommandPrimitive.List.displayName;
+const CommandEmpty = React.forwardRef(({ className, ...props }, ref) => (React.createElement(CommandPrimitive.Empty, { ref: ref, className: cn('crfrsr-command__empty', className), ...props })));
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+const CommandGroup = React.forwardRef(({ className, ...props }, ref) => (React.createElement(CommandPrimitive.Group, { ref: ref, className: cn('crfrsr-command__group', className), ...props })));
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => (React.createElement(CommandPrimitive.Separator, { ref: ref, className: cn('crfrsr-command__separator', className), ...props })));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+const CommandItem = React.forwardRef(({ className, ...props }, ref) => (React.createElement(CommandPrimitive.Item, { ref: ref, className: cn('crfrsr-command__item', className), ...props })));
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator, };

package/dist/components/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Button';
+export * from './Pill';
+export * from './Combobox';
+export { CommandItem } from './command';

package/dist/components/index.js

@@ -0,0 +1,6 @@
+export * from './Button';
+export * from './Pill';
+export * from './Combobox';
+// The generic Combobox renders each option via a render prop; consumers that
+// build option rows with cmdk's item need this primitive.
+export { CommandItem } from './command';

package/dist/components/popover.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/dist/components/popover.js

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../lib/cn';
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverAnchor = PopoverPrimitive.Anchor;
+const PopoverContent = React.forwardRef(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (React.createElement(PopoverPrimitive.Portal, null,
+    React.createElement(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn('crfrsr-popover__content', className), ...props }))));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverAnchor, PopoverContent };

package/dist/hooks/useIsMobile.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns true when the viewport width is below `breakpoint` (default 768px),
+ * updating on resize. SSR-safe (returns false when `window` is unavailable).
+ *
+ * Replaces the app-level StyleContext dependency the Combobox previously relied
+ * on, so the component is self-contained.
+ */
+export declare function useIsMobile(breakpoint?: number): boolean;

package/dist/hooks/useIsMobile.js

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+/**
+ * Returns true when the viewport width is below `breakpoint` (default 768px),
+ * updating on resize. SSR-safe (returns false when `window` is unavailable).
+ *
+ * Replaces the app-level StyleContext dependency the Combobox previously relied
+ * on, so the component is self-contained.
+ */
+export function useIsMobile(breakpoint = 768) {
+    const [isMobile, setIsMobile] = useState(() => typeof window !== 'undefined' ? window.innerWidth < breakpoint : false);
+    useEffect(() => {
+        const check = () => setIsMobile(window.innerWidth < breakpoint);
+        check();
+        window.addEventListener('resize', check);
+        return () => window.removeEventListener('resize', check);
+    }, [breakpoint]);
+    return isMobile;
+}

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @crfrsr/ui
+ * React components for crfrsr Design System
+ */
+export * from './ThemeProvider';
+export * from './typography';
+export * from './components';
+export * from './hooks/useIsMobile';

package/dist/index.js

@@ -0,0 +1,8 @@
+/**
+ * @crfrsr/ui
+ * React components for crfrsr Design System
+ */
+export * from './ThemeProvider';
+export * from './typography';
+export * from './components';
+export * from './hooks/useIsMobile';

package/dist/lib/cn.d.ts

@@ -0,0 +1,7 @@
+import { type ClassValue } from 'clsx';
+/**
+ * Class-name combiner for the design system. Uses clsx only — the library ships
+ * plain CSS class names (no Tailwind), so there is nothing for tailwind-merge to
+ * resolve. Consumer-provided classes are appended last and win by source order.
+ */
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/lib/cn.js

@@ -0,0 +1,9 @@
+import { clsx } from 'clsx';
+/**
+ * Class-name combiner for the design system. Uses clsx only — the library ships
+ * plain CSS class names (no Tailwind), so there is nothing for tailwind-merge to
+ * resolve. Consumer-provided classes are appended last and win by source order.
+ */
+export function cn(...inputs) {
+    return clsx(inputs);
+}