@kortix/ui 0.0.0-bootstrap.0 → 0.14.3

package/dist/components/ui/modal.js

@@ -0,0 +1,180 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @example
+ * ```tsx
+ * import {
+ *   Modal,
+ *   ModalBody,
+ *   ModalContent,
+ *   ModalDescription,
+ *   ModalFooter,
+ *   ModalHeader,
+ *   ModalTitle,
+ *   ModalTrigger,
+ * } from './modal.js';
+ * import { Button } from './button.js';
+ *
+ * <Modal>
+ *   <ModalTrigger asChild>
+ *     <Button>Open</Button>
+ *   </ModalTrigger>
+ *   <ModalContent className="lg:max-w-md">
+ *     <ModalHeader>
+ *       <ModalTitle>Title</ModalTitle>
+ *       <ModalDescription>Description</ModalDescription>
+ *     </ModalHeader>
+ *     <ModalBody>{children}</ModalBody>
+ *     <ModalFooter>
+ *       <Button variant="outline-ghost">Cancel</Button>
+ *       <Button>Confirm</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ * ```
+ *
+ * Controlled:
+ * ```tsx
+ * <Modal open={open} onOpenChange={setOpen}>
+ *   <ModalContent>...</ModalContent>
+ * </Modal>
+ * ```
+ */
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import * as React from 'react';
+import { Close } from '../../icons/close.js';
+import { cn } from '../../lib/utils.js';
+import { DialogDepthProvider, dialogContentZ, dialogOverlayZ, hasOpenFloatingLayer, isFloatingLayerTarget, useDialogDepth, useDialogRootLayer, } from '../../lib/z-stack.js';
+import { Button } from './button.js';
+import { triggerVariants } from './trigger-variants.js';
+// Stacks by open order, not only by JSX nesting: a Modal opened while another
+// is open sits above it even when the two share no React ancestor.
+const Modal = ({ open, defaultOpen, onOpenChange, ...props }) => {
+    const layer = useDialogRootLayer({ open, defaultOpen, onOpenChange });
+    return (_jsx(DialogDepthProvider, { depth: layer.depth, children: _jsx(DialogPrimitive.Root, { ...props, open: layer.open, onOpenChange: layer.onOpenChange }) }));
+};
+const ModalTrigger = ({ className, variant, size, asChild, ...props }) => (_jsx(DialogPrimitive.Trigger, { asChild: asChild, 
+    // With `asChild` the child owns its styling — merging ours would double it.
+    className: asChild ? className : cn(triggerVariants({ variant, size }), className), ...props }));
+const ModalClose = DialogPrimitive.Close;
+const ModalPortal = DialogPrimitive.Portal;
+const overlayAnimationClasses = {
+    default: 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200',
+    none: '',
+};
+const ModalOverlay = React.forwardRef(({ className, style, animation = 'default', ...props }, ref) => {
+    const depth = useDialogDepth();
+    return (_jsx(DialogPrimitive.Overlay, { className: cn('fixed inset-0 bg-black/65 backdrop-blur-xs', overlayAnimationClasses[animation], className), style: { zIndex: dialogOverlayZ(depth), ...style }, ...props, ref: ref }));
+});
+ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const ModalVariants = cva(cn('fixed gap-0 border p-0 shadow-lg overflow-y-auto', 'lg:top-[50%] lg:left-[50%] lg:grid lg:w-full lg:max-w-lg lg:-translate-x-1/2 lg:-translate-y-1/2 lg:rounded-xl', 'lg:flex lg:h-full lg:flex-col space-y-4'), {
+    variants: {
+        variant: {
+            default: 'bg-sidebar border-muted/60',
+            base: 'bg-background border-muted/60',
+            transparent: 'bg-transparent border-none p-0',
+        },
+        side: {
+            top: 'inset-x-0 top-0 border-b rounded-b-xl max-h-[90%] lg:h-fit',
+            bottom: 'inset-x-0 bottom-0 lg:bottom-auto border-t lg:h-auto max-h-[90%] rounded-t-xl',
+            left: 'inset-y-0 left-0 h-full lg:h-fit w-3/4 border-r rounded-r-xl sm:max-w-sm',
+            right: 'inset-y-0 right-0 h-full lg:h-fit w-3/4 border-l rounded-l-xl sm:max-w-sm',
+            fullscreen: 'inset-0 bg-black/60 dark:bg-black/85',
+        },
+        animation: {
+            default: cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200', 'lg:data-[state=closed]:zoom-out-95 lg:data-[state=open]:zoom-in-95'),
+            none: '',
+        },
+    },
+    compoundVariants: [
+        {
+            animation: 'default',
+            side: 'top',
+            class: 'max-lg:data-[state=closed]:slide-out-to-top max-lg:data-[state=open]:slide-in-from-top',
+        },
+        {
+            animation: 'default',
+            side: 'bottom',
+            class: 'max-lg:data-[state=closed]:slide-out-to-bottom max-lg:data-[state=open]:slide-in-from-bottom',
+        },
+        {
+            animation: 'default',
+            side: 'left',
+            class: 'max-lg:data-[state=closed]:slide-out-to-left max-lg:data-[state=open]:slide-in-from-left',
+        },
+        {
+            animation: 'default',
+            side: 'right',
+            class: 'max-lg:data-[state=closed]:slide-out-to-right max-lg:data-[state=open]:slide-in-from-right',
+        },
+    ],
+    defaultVariants: {
+        side: 'bottom',
+        variant: 'default',
+        animation: 'default',
+    },
+});
+/**
+ * Should an "outside" interaction actually dismiss the modal?
+ *
+ * Two cases both look like backdrop clicks to Radix and must NOT dismiss:
+ *
+ * 1. The click lands on a portaled Select / DropdownMenu / tooltip panel.
+ *    Those portal to `document.body`, outside the modal's DOM subtree, so
+ *    containment says "outside". `isFloatingLayerTarget` catches that.
+ *
+ * 2. A *modal* DropdownMenu is open and the click lands anywhere else —
+ *    including visually on the modal body, or on the dark overlay. While the
+ *    menu is open Radix sets `pointer-events: none` on everything under it, so
+ *    the event target is `body` / the overlay, not the menu. Checking the
+ *    target alone fails; Escape already uses `hasOpenFloatingLayer()` for the
+ *    same reason. The gesture owns the floating layer: dismiss that first, and
+ *    require a second click to close the modal.
+ */
+export function modalDismissesOnOutsideInteraction(target, closeOnOutsideClick) {
+    if (!closeOnOutsideClick)
+        return false;
+    if (hasOpenFloatingLayer())
+        return false;
+    return !isFloatingLayerTarget(target);
+}
+const ModalContentInner = React.forwardRef(({ side = 'bottom', animation = 'default', className, modalClassName, closeClassName, closeLabel = 'Close', children, variant = 'default', showCloseButton = true, closeButtonChildren, closeOnOutsideClick = true, overlayClassName, style, ...props }, ref) => {
+    const depth = useDialogDepth();
+    const handleInteractOutside = (event) => {
+        if (!modalDismissesOnOutsideInteraction(event.detail.originalEvent.target, closeOnOutsideClick)) {
+            event.preventDefault();
+        }
+    };
+    // Same asymmetry for the keyboard: Escape aimed at an open select or menu must
+    // dismiss that panel, not the modal underneath it.
+    //
+    // Deliberately NOT guarded on `hasOpenNestedDialog()`. Radix runs this handler
+    // on the top-most layer only, so a nested modal would see its own parent in
+    // that count, prevent its own dismissal, and leave Escape dead. Callers that
+    // need the nested-dialog guard pass their own `onEscapeKeyDown` — it lands in
+    // `...props` below and replaces this one (see the legacy Customize panel).
+    const handleEscapeKeyDown = (event) => {
+        if (hasOpenFloatingLayer()) {
+            event.preventDefault();
+        }
+    };
+    return (_jsxs(DialogPrimitive.Content, { ref: ref, className: cn(ModalVariants({ side, animation, className: modalClassName, variant }), className, 'rounded-xl rounded-b-none lg:rounded-b-xl'), style: { zIndex: dialogContentZ(depth), ...style }, onInteractOutside: handleInteractOutside, onEscapeKeyDown: handleEscapeKeyDown, ...props, children: [children, _jsxs("div", { className: "absolute top-3 right-3 flex items-center justify-end gap-2", children: [closeButtonChildren, showCloseButton && (_jsx(ModalClose, { asChild: true, children: _jsxs(Button, { variant: "ghost", className: cn('size-8 p-0 text-xs font-semibold focus:outline-none', closeClassName), children: [_jsx(Close, { className: "text-primary size-4 stroke-1" }), _jsx("span", { className: "sr-only", children: closeLabel })] }) }))] })] }));
+});
+ModalContentInner.displayName = 'ModalContentInner';
+const ModalContent = React.forwardRef(({ animation = 'default', overlayClassName, ...props }, ref) => {
+    const resolvedAnimation = animation ?? 'default';
+    return (_jsxs(ModalPortal, { children: [_jsx(ModalOverlay, { animation: resolvedAnimation, className: overlayClassName }), _jsx(ModalContentInner, { animation: resolvedAnimation, ...props, ref: ref })] }));
+});
+ModalContent.displayName = DialogPrimitive.Content.displayName;
+const ModalHeader = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col space-y-0 text-left', 'px-5 pt-5', className), ...props }));
+ModalHeader.displayName = 'ModalHeader';
+const ModalFooter = ({ className, ...props }) => (_jsx("div", { className: cn('flex flex-col-reverse items-center justify-end gap-y-2 rounded-b-none px-5 sm:flex-row sm:justify-end sm:space-x-2 sm:gap-y-0 md:rounded-b-xl md:px-5 lg:rounded-b-xl', className), ...props }));
+ModalFooter.displayName = 'ModalFooter';
+const ModalTitle = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Title, { ref: ref, className: cn('text-foreground text-base font-semibold', className), ...props })));
+ModalTitle.displayName = DialogPrimitive.Title.displayName;
+const ModalDescription = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Description, { ref: ref, className: cn('text-muted-foreground text-sm', className), ...props })));
+ModalDescription.displayName = DialogPrimitive.Description.displayName;
+const ModalBody = ({ className, ...props }) => (_jsx("div", { className: cn('flex-1 space-y-4 p-5 pt-0', className), ...props }));
+ModalBody.displayName = 'ModalBody';
+export { Modal, ModalBody, ModalClose, ModalContent, ModalContentInner, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, };

package/dist/components/ui/navigation-menu.d.ts

@@ -0,0 +1,16 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+    viewport?: boolean;
+}): React.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): React.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): React.JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): React.JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): React.JSX.Element;
+declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): React.JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): React.JSX.Element;
+declare function NavigationMenuSeparator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): React.JSX.Element;
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuSeparator, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport, };

package/dist/components/ui/navigation-menu.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CaretDownIcon as ChevronDownIcon } from '@phosphor-icons/react';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import { cva } from 'class-variance-authority';
+import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
+import { cn } from '../../lib/utils.js';
+function NavigationMenu({ className, children, viewport = true, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Root, { "data-slot": "navigation-menu", "data-viewport": viewport, className: cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', className), ...props, children: [children, viewport && _jsx(NavigationMenuViewport, {})] }));
+}
+function NavigationMenuList({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.List, { "data-slot": "navigation-menu-list", className: cn('group flex flex-1 list-none items-center justify-center gap-1', className), ...props }));
+}
+function NavigationMenuItem({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Item, { "data-slot": "navigation-menu-item", className: cn('relative', className), ...props }));
+}
+const navigationMenuTriggerStyle = cva('group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent');
+function NavigationMenuTrigger({ className, children, ...props }) {
+    return (_jsxs(NavigationMenuPrimitive.Trigger, { "data-slot": "navigation-menu-trigger", className: cn(navigationMenuTriggerStyle(), 'group', className), ...props, children: [children, ' ', _jsx(ChevronDownIcon, { className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }));
+}
+function NavigationMenuContent({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Content, { "data-slot": "navigation-menu-content", className: cn('data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out top-0 left-0 w-full p-1 md:absolute md:w-auto', 'group-data-[viewport=false]/navigation-menu:bg-background group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow-xs group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none', className), ...props, children: _jsx("div", { className: "bg-muted dark:bg-popover/50 rounded-sm p-0.5", children: props.children }) }));
+}
+function NavigationMenuViewport({ className, ...props }) {
+    return (_jsx("div", { className: cn('absolute top-full left-0 isolate z-50 flex justify-center'), children: _jsx(NavigationMenuPrimitive.Viewport, { "data-slot": "navigation-menu-viewport", className: cn('origin-top-center bg-popover text-popover-foreground data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]', className), ...props }) }));
+}
+function NavigationMenuLink({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Link, { "data-slot": "navigation-menu-link", className: cn("hover:bg-popover dark:hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground data-[active=true]:hover:bg-accent data-[active=true]:focus:bg-accent [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function NavigationMenuSeparator({ className, orientation = 'horizontal', decorative = true, ...props }) {
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "navigation-menu-separator", decorative: decorative, orientation: orientation, className: cn('bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-auto data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch', className), ...props }));
+}
+function NavigationMenuIndicator({ className, ...props }) {
+    return (_jsx(NavigationMenuPrimitive.Indicator, { "data-slot": "navigation-menu-indicator", className: cn('data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', className), ...props, children: _jsx("div", { className: "bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow" }) }));
+}
+export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuSeparator, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport, };

package/dist/components/ui/page-search-bar.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Standardized search bar for page-level search/filter.
+ * Use on workspace, service-manager, connectors, tunnel, scheduled-tasks, etc.
+ */
+declare function PageSearchBar({ value, onChange, placeholder, className, }: {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+}): import("react").JSX.Element;
+export { PageSearchBar };

package/dist/components/ui/page-search-bar.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from './button.js';
+import { cn } from '../../lib/utils.js';
+import { MagnifyingGlassIcon as Search, XIcon as X } from '@phosphor-icons/react';
+/**
+ * Standardized search bar for page-level search/filter.
+ * Use on workspace, service-manager, connectors, tunnel, scheduled-tasks, etc.
+ */
+function PageSearchBar({ value, onChange, placeholder = 'Search...', className, }) {
+    return (_jsxs("div", { className: cn('group relative flex-1', className), children: [_jsx("input", { type: "text", autoComplete: "off", placeholder: placeholder, value: value, onChange: (e) => onChange(e.target.value), className: "border-input bg-card ring-offset-background placeholder:text-muted-foreground focus-visible:ring-ring/50 h-9 w-full rounded-2xl border pr-8 pl-9 text-sm transition-colors focus-visible:ring-2 focus-visible:outline-none" }), _jsx("div", { className: "text-muted-foreground group-focus-within:text-primary pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 transition-colors", children: _jsx(Search, { className: "h-3.5 w-3.5" }) }), value && (_jsx(Button, { onClick: () => onChange(''), variant: "ghost", size: "icon-xs", className: "absolute top-1/2 right-2 -translate-y-1/2", children: _jsx(X, { className: "h-3.5 w-3.5" }) }))] }));
+}
+export { PageSearchBar };

package/dist/components/ui/phone-input.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as RPNInput from 'react-phone-number-input';
+type PhoneInputProps = Omit<React.ComponentProps<'input'>, 'onChange' | 'value' | 'ref'> & Omit<RPNInput.Props<typeof RPNInput.default>, 'onChange'> & {
+    onChange?: (value: RPNInput.Value) => void;
+};
+declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps>;
+export { PhoneInput };

package/dist/components/ui/phone-input.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CheckIcon, CaretUpDownIcon as ChevronsUpDown } from '@phosphor-icons/react';
+import * as React from 'react';
+import * as RPNInput from 'react-phone-number-input';
+import flags from 'react-phone-number-input/flags';
+import { Button } from './button.js';
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from './command.js';
+import { Input } from './input.js';
+import { Popover, PopoverContent, PopoverTrigger } from './popover.js';
+import { ScrollArea } from './scroll-area.js';
+import { cn } from '../../lib/utils.js';
+const PhoneInput = React.forwardRef(({ className, onChange, value, ...props }, ref) => {
+    const isInvalid = props['aria-invalid'] === true || props['aria-invalid'] === 'true';
+    return (_jsx(RPNInput.default, { ref: ref, className: cn('flex h-10 gap-2', isInvalid && 'motion-safe:animate-shake', isInvalid && 'motion-safe:animate-shake', className), flagComponent: FlagComponent, countrySelectComponent: CountrySelect, inputComponent: InputComponent, smartCaret: false, value: value || undefined, 
+        /**
+         * Handles the onChange event.
+         *
+         * react-phone-number-input might trigger the onChange event as undefined
+         * when a valid phone number is not entered. To prevent this,
+         * the value is coerced to an empty string.
+         *
+         * @param {E164Number | undefined} value - The entered value
+         */
+        onChange: (value) => onChange?.(value || ''), ...props }));
+});
+PhoneInput.displayName = 'PhoneInput';
+const InputComponent = React.forwardRef(({ className, ...props }, ref) => (_jsx(Input, { type: "text", 
+    // The wrapper owns the shake — a second one here would compound the translate.
+    size: "md", 
+    // The wrapper owns the shake — a second one here would compound the translate.
+    className: cn('aria-invalid:animate-none!! aria-invalid:animate-none', className), ...props, ref: ref })));
+InputComponent.displayName = 'InputComponent';
+const CountrySelect = ({ disabled, value: selectedCountry, options: countryList, onChange, }) => {
+    const scrollAreaRef = React.useRef(null);
+    const [isOpen, setIsOpen] = React.useState(false);
+    return (_jsxs(Popover, { open: isOpen, modal: true, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "outline", className: cn('border-border bg-input flex h-10 items-center gap-1 rounded-md px-3', {
+                        'cursor-not-allowed opacity-50': disabled,
+                    }), disabled: disabled, children: [_jsx(FlagComponent, { country: selectedCountry, countryName: selectedCountry }), _jsx(ChevronsUpDown, { className: cn('h-4 w-4 opacity-50', disabled ? 'hidden' : 'flex') })] }) }), _jsx(PopoverContent, { className: "w-[300px] p-0", children: _jsxs(Command, { filter: (value, search) => {
+                        const searchLower = search.toLowerCase();
+                        const valueLower = value.toLowerCase();
+                        // Check if search matches country name, calling code, or country code
+                        if (valueLower.includes(searchLower)) {
+                            return 1;
+                        }
+                        return 0;
+                    }, children: [_jsx(CommandInput, { placeholder: "Search country..." }), _jsx(CommandList, { children: _jsxs(ScrollArea, { ref: scrollAreaRef, className: "h-72", children: [_jsx(CommandEmpty, { children: "No country found." }), _jsx(CommandGroup, { children: countryList.map(({ value, label }) => value ? (_jsx(CountrySelectOption, { country: value, countryName: label, selectedCountry: selectedCountry, onChange: onChange, onSelectComplete: () => setIsOpen(false) }, value)) : null) })] }) })] }) })] }));
+};
+const CountrySelectOption = ({ country, countryName, selectedCountry, onChange, onSelectComplete, }) => {
+    const handleSelect = () => {
+        onChange(country);
+        onSelectComplete();
+    };
+    return (_jsxs(CommandItem, { className: "gap-2", onSelect: handleSelect, value: `${countryName} +${RPNInput.getCountryCallingCode(country)} ${country}`, children: [_jsx(FlagComponent, { country: country, countryName: countryName }), _jsx("span", { className: "flex-1 text-sm", children: countryName }), _jsx("span", { className: "text-foreground/50 text-sm", children: `+${RPNInput.getCountryCallingCode(country)}` }), _jsx(CheckIcon, { className: cn('ml-auto size-4', country === selectedCountry ? 'opacity-100' : 'opacity-0') })] }));
+};
+const FlagComponent = ({ country, countryName, }) => {
+    const Flag = flags[country];
+    return (_jsx("span", { className: "bg-foreground/20 flex h-4 w-6 overflow-hidden rounded-sm [&_svg:not([class*='size-'])]:size-full", children: Flag && _jsx(Flag, { title: countryName ?? '' }) }));
+};
+export { PhoneInput };

package/dist/components/ui/pixel-kortix-mark.d.ts

@@ -0,0 +1,13 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The Kortix symbol (`kortix-logo.tsx`, `variant="icon"`) sampled onto a
+ * 12 × 10 grid. `#` is a cell the symbol fully covers; `+` is a cell on a curve
+ * that it only partly covers, drawn as a checker so the curves read as dither.
+ */
+export declare const PIXEL_KORTIX_ROWS: readonly ["##   ##   ##", "##   ##   ##", "+#+  ##  +#+", " ##+ ## +## ", "  ########  ", "  ########  ", " ##+ ## +## ", "+#+  ##  +#+", "##   ##   ##", "##   ##   ##"];
+/**
+ * Decorative pixel art of the Kortix symbol, for empty states. It paints in
+ * `currentColor`, so the caller sets the tone. It is always `aria-hidden`: the
+ * text next to it carries the meaning.
+ */
+export declare function PixelKortixMark({ className, ...props }: ComponentPropsWithoutRef<'svg'>): import("react").JSX.Element;

package/dist/components/ui/pixel-kortix-mark.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import { cn } from '../../lib/utils.js';
+/**
+ * The Kortix symbol (`kortix-logo.tsx`, `variant="icon"`) sampled onto a
+ * 12 × 10 grid. `#` is a cell the symbol fully covers; `+` is a cell on a curve
+ * that it only partly covers, drawn as a checker so the curves read as dither.
+ */
+export const PIXEL_KORTIX_ROWS = [
+    '##   ##   ##',
+    '##   ##   ##',
+    '+#+  ##  +#+',
+    ' ##+ ## +## ',
+    '  ########  ',
+    '  ########  ',
+    ' ##+ ## +## ',
+    '+#+  ##  +#+',
+    '##   ##   ##',
+    '##   ##   ##',
+];
+/** Cell size and the gap after it, in viewBox units. At the default size one
+ *  unit is one CSS pixel, so cells and the 1px checker land on whole pixels. */
+const CELL = 5;
+const GAP = 1;
+const PITCH = CELL + GAP;
+const WIDTH = PIXEL_KORTIX_ROWS[0].length * PITCH - GAP;
+const HEIGHT = PIXEL_KORTIX_ROWS.length * PITCH - GAP;
+const CELLS = PIXEL_KORTIX_ROWS.flatMap((row, y) => [...row].flatMap((cell, x) => cell === ' ' ? [] : [{ key: `${x}-${y}`, x: x * PITCH, y: y * PITCH, dithered: cell === '+' }]));
+/**
+ * Decorative pixel art of the Kortix symbol, for empty states. It paints in
+ * `currentColor`, so the caller sets the tone. It is always `aria-hidden`: the
+ * text next to it carries the meaning.
+ */
+export function PixelKortixMark({ className, ...props }) {
+    // One pattern per instance: a `url(#id)` that points into another copy of
+    // this SVG stops painting when that copy is hidden with `display: none`.
+    const ditherId = `pixel-kortix-dither-${useId().replace(/[^\w-]/g, '')}`;
+    return (_jsxs("svg", { viewBox: `0 0 ${WIDTH} ${HEIGHT}`, width: WIDTH, height: HEIGHT, fill: "currentColor", shapeRendering: "crispEdges", "aria-hidden": true, className: cn('shrink-0', className), ...props, children: [_jsx("defs", { children: _jsxs("pattern", { id: ditherId, width: "2", height: "2", patternUnits: "userSpaceOnUse", children: [_jsx("rect", { width: "1", height: "1" }), _jsx("rect", { x: "1", y: "1", width: "1", height: "1" })] }) }), CELLS.map((cell) => (_jsx("rect", { x: cell.x, y: cell.y, width: CELL, height: CELL, fill: cell.dithered ? `url(#${ditherId})` : undefined }, cell.key)))] }));
+}

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

@@ -0,0 +1,10 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as React from 'react';
+import { type TriggerVariantProps } from './trigger-variants.js';
+declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): React.JSX.Element;
+declare function PopoverTrigger({ className, variant, size, asChild, ...props }: Omit<React.ComponentProps<typeof PopoverPrimitive.Trigger>, 'size'> & TriggerVariantProps): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, container, style, ...props }: React.ComponentProps<typeof PopoverPrimitive.Content> & {
+    container?: HTMLElement;
+}): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Anchor>): React.JSX.Element;
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/components/ui/popover.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { cn } from '../../lib/utils.js';
+import { floatingZ, useDialogDepth } from '../../lib/z-stack.js';
+import { FLOATING_PANEL_SURFACE } from './menu-recipe.js';
+import { triggerVariants } from './trigger-variants.js';
+/**
+ * The surface comes from `FLOATING_PANEL_SURFACE`, shared with the dropdown,
+ * context menu and select — a popover is the same card, so it should not have
+ * its own background, border, radius or shadow.
+ *
+ * No enter/exit animation, the same as `DropdownMenuContent`: the panel paints
+ * on the frame it mounts and unmounts on the frame it closes. See
+ * `dropdown-menu.tsx` for why.
+ *
+ * What stays local is what a popover holds rather than what it is: `p-4`
+ * because the content is prose and controls rather than a list of `p-1` rows,
+ * a `w-72` default, and `outline-hidden` because Radix focuses the panel itself
+ * on open and the ring would trace the whole card.
+ */
+const POPOVER_PANEL = cn(FLOATING_PANEL_SURFACE, 'w-72 p-4 outline-hidden');
+function Popover({ ...props }) {
+    return _jsx(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ className, variant, size, asChild, ...props }) {
+    return (_jsx(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", asChild: asChild, 
+        // With `asChild` the child owns its styling — merging ours would double it.
+        className: asChild ? className : cn(triggerVariants({ variant, size }), className), ...props }));
+}
+function PopoverContent({ className, align = 'center', sideOffset = 4, container, style, ...props }) {
+    const depth = useDialogDepth();
+    return (_jsx(PopoverPrimitive.Portal, { container: container, children: _jsx(PopoverPrimitive.Content, { "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn(POPOVER_PANEL, className), style: { zIndex: floatingZ(depth), ...style }, ...props }) }));
+}
+function PopoverAnchor({ ...props }) {
+    return _jsx(PopoverPrimitive.Anchor, { "data-slot": "popover-anchor", ...props });
+}
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/components/ui/portal.d.ts

@@ -0,0 +1,5 @@
+interface PortalProps {
+    children: React.ReactNode;
+}
+export declare function Portal({ children }: PortalProps): import("react").ReactPortal | null;
+export {};

package/dist/components/ui/portal.js

@@ -0,0 +1,15 @@
+import { getPortalRoot } from '../../lib/portal-root.js';
+import { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+export function Portal({ children }) {
+    const [mounted, setMounted] = useState(false);
+    const [container, setContainer] = useState(null);
+    useEffect(() => {
+        setMounted(true);
+        setContainer(getPortalRoot());
+        return () => setMounted(false);
+    }, []);
+    if (!mounted || !container)
+        return null;
+    return createPortal(children, container);
+}

package/dist/components/ui/preview-image.d.ts

@@ -0,0 +1,14 @@
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as React from 'react';
+declare const PreviewImage: React.FC<DialogPrimitive.DialogProps>;
+declare const PreviewImageTrigger: React.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PreviewImagePortal: React.FC<DialogPrimitive.DialogPortalProps>;
+declare const PreviewImageClose: React.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PreviewImageOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+interface PreviewImageContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    fileContent?: string;
+    fileName?: string;
+    fullscreen?: boolean;
+}
+declare const PreviewImageContent: React.ForwardRefExoticComponent<PreviewImageContentProps & React.RefAttributes<HTMLDivElement>>;
+export { PreviewImage, PreviewImageClose, PreviewImageContent, PreviewImageOverlay, PreviewImagePortal, PreviewImageTrigger, };

package/dist/components/ui/preview-image.js

@@ -0,0 +1,58 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as VisuallyHidden from '@radix-ui/react-visually-hidden';
+import * as React from 'react';
+import { Close } from '../../icons/close.js';
+import { cn } from '../../lib/utils.js';
+import { Button } from './button.js';
+const PreviewImage = DialogPrimitive.Root;
+const PreviewImageTrigger = DialogPrimitive.Trigger;
+const PreviewImagePortal = DialogPrimitive.Portal;
+const PreviewImageClose = DialogPrimitive.Close;
+const PreviewImageOverlay = React.forwardRef(({ className, ...props }, ref) => (_jsx(DialogPrimitive.Overlay, { ref: ref, className: cn('fixed inset-0 z-50 bg-black/40', className), ...props })));
+PreviewImageOverlay.displayName = DialogPrimitive.Overlay.displayName;
+const MIN_ZOOM = 0.7;
+const DEFAULT_ZOOM = 1;
+const MAX_ZOOM = 2;
+const ZOOM_STEP = 0.1;
+const DEFAULT_ORIGIN = '50% 50%';
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const PreviewImageContent = React.forwardRef(({ className, fileContent, fileName, ...props }, ref) => {
+    const [zoomLevel, setZoomLevel] = React.useState(DEFAULT_ZOOM);
+    const [transformOrigin, setTransformOrigin] = React.useState(DEFAULT_ORIGIN);
+    React.useEffect(() => {
+        setZoomLevel(DEFAULT_ZOOM);
+        setTransformOrigin(DEFAULT_ORIGIN);
+    }, [fileContent]);
+    const getTransformOrigin = (event) => {
+        const rect = event.currentTarget.getBoundingClientRect();
+        if (!rect.width || !rect.height) {
+            return DEFAULT_ORIGIN;
+        }
+        const x = ((event.clientX - rect.left) / rect.width) * 100;
+        const y = ((event.clientY - rect.top) / rect.height) * 100;
+        const xPercent = clamp(x, 0, 100);
+        const yPercent = clamp(y, 0, 100);
+        return `${xPercent}% ${yPercent}%`;
+    };
+    const handleWheelZoom = (event) => {
+        event.preventDefault();
+        setTransformOrigin(getTransformOrigin(event));
+        setZoomLevel((currentZoom) => {
+            const nextZoom = event.deltaY < 0 ? currentZoom + ZOOM_STEP : currentZoom - ZOOM_STEP;
+            return clamp(Number(nextZoom.toFixed(1)), MIN_ZOOM, MAX_ZOOM);
+        });
+    };
+    const handleImageClick = (event) => {
+        setTransformOrigin(getTransformOrigin(event));
+        setZoomLevel((currentZoom) => (currentZoom > DEFAULT_ZOOM ? DEFAULT_ZOOM : MAX_ZOOM));
+    };
+    return (_jsxs(PreviewImagePortal, { children: [_jsx(PreviewImageOverlay, {}), _jsxs(DialogPrimitive.Content, { ref: ref, className: cn('fixed top-[50%] left-[50%] z-[99999] grid h-full w-full -translate-x-1/2 -translate-y-1/2 items-center justify-center gap-4 shadow-lg duration-200 sm:rounded-lg', className), ...props, children: [_jsx(VisuallyHidden.Root, { children: _jsx(DialogPrimitive.Title, { children: "Image preview" }) }), _jsx("div", { className: "absolute top-3 right-3 z-[60] flex gap-1", onClick: (event) => event.stopPropagation(), children: _jsx(PreviewImageClose, { asChild: true, children: _jsx(Button, { size: "icon", type: "button", "aria-label": "Close image preview", className: "text-background", children: _jsx(Close, { className: "size-4" }) }) }) }), _jsx("div", { className: "flex h-full max-h-[100vh] w-[100vw] items-center justify-center overflow-auto", onWheel: handleWheelZoom, onClick: handleImageClick, children: _jsx("div", { className: cn(zoomLevel > DEFAULT_ZOOM ? 'cursor-zoom-out' : 'cursor-zoom-in'), style: {
+                                transform: `scale(${zoomLevel})`,
+                                transformOrigin,
+                                transition: 'transform 200ms',
+                            }, children: fileContent ? (_jsx("img", { src: fileContent, alt: fileName || 'Image preview', width: 1920, height: 1080, className: "max-h-[100vh] w-auto object-contain" })) : null }) })] })] }));
+});
+PreviewImageContent.displayName = DialogPrimitive.Content.displayName;
+export { PreviewImage, PreviewImageClose, PreviewImageContent, PreviewImageOverlay, PreviewImagePortal, PreviewImageTrigger, };

package/dist/components/ui/progress-ring.d.ts

@@ -0,0 +1,6 @@
+export declare function ProgressRing({ value, className, trackClassName, progressClassName, }: {
+    value: number;
+    className?: string;
+    trackClassName?: string;
+    progressClassName?: string;
+}): import("react").JSX.Element;

package/dist/components/ui/progress-ring.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+const R = 7;
+const CIRCUMFERENCE = 2 * Math.PI * R;
+export function ProgressRing({ value, className, trackClassName = 'text-foreground/10', progressClassName = 'text-muted-foreground', }) {
+    const clamped = Math.max(0, Math.min(100, value));
+    const offset = CIRCUMFERENCE * (1 - clamped / 100);
+    return (_jsxs("svg", { viewBox: "0 0 18 18", className: cn('size-4 -rotate-90', className), fill: "none", children: [_jsx("circle", { cx: "9", cy: "9", r: R, stroke: "currentColor", strokeWidth: "2", className: trackClassName }), _jsx("circle", { cx: "9", cy: "9", r: R, stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", className: cn('transition-[stroke-dashoffset] duration-500', progressClassName), strokeDasharray: CIRCUMFERENCE, strokeDashoffset: offset })] }));
+}

package/dist/components/ui/progress.d.ts

@@ -0,0 +1,6 @@
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as React from 'react';
+declare function Progress({ className, indicatorClassName, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root> & {
+    indicatorClassName?: string;
+}): React.JSX.Element;
+export { Progress };

package/dist/components/ui/progress.js

@@ -0,0 +1,8 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import { cn } from '../../lib/utils.js';
+function Progress({ className, indicatorClassName, value, ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn('bg-primary/20 relative h-3 w-full overflow-hidden rounded-full', className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: cn('bg-primary h-full w-full flex-1 transition-transform duration-300 ease-out', indicatorClassName), style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+}
+export { Progress };

package/dist/components/ui/radio-group.d.ts

@@ -0,0 +1,12 @@
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import * as React from 'react';
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroupPrimitive.Root>): React.JSX.Element;
+type RadioGroupItemProps = React.ComponentProps<typeof RadioGroupPrimitive.Item> & {
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: 'default' | 'outline';
+};
+declare function RadioGroupItem({ className, label, description, id, disabled, size, variant, ...props }: RadioGroupItemProps): React.JSX.Element;
+export { RadioGroup, RadioGroupItem };
+export type { RadioGroupItemProps };

package/dist/components/ui/radio-group.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+function RadioGroup({ className, ...props }) {
+    return (_jsx(RadioGroupPrimitive.Root, { "data-slot": "radio-group", className: cn('grid gap-1', className), ...props }));
+}
+const radioControlClassName = cn('peer aspect-square size-4 shrink-0 rounded-full border border-muted-foreground/60 bg-transparent', 'transition-[color,box-shadow,border-color,background-color]', 'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=checked]:border-foreground data-[state=checked]:bg-background data-[state=checked]:border-kortix-blue data-[state=checked]:border-4 ', 'aria-invalid:border-destructive');
+function RadioGroupItem({ className, label, description, id, disabled, size = 'md', variant = 'default', ...props }) {
+    const generatedId = React.useId();
+    const itemId = id ?? generatedId;
+    const hasCaption = label != null || description != null;
+    const control = (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", id: itemId, disabled: disabled, className: cn(radioControlClassName, !hasCaption && className, description != null && 'mt-[3px]'), ...props }));
+    if (!hasCaption) {
+        return control;
+    }
+    return (_jsxs("label", { htmlFor: itemId, className: cn('flex w-full cursor-pointer gap-3 rounded-md px-3 py-1.5 transition-colors', description != null ? 'items-start justify-start' : 'items-center justify-center', 'hover:bg-foreground/3', 'has-data-[state=checked]:bg-foreground/6 has-data-[state=checked]:hover:bg-foreground/6', 'has-focus-visible:ring-ring has-focus-visible:ring-offset-background has-focus-visible:ring-2 has-focus-visible:ring-offset-2', disabled && 'cursor-not-allowed opacity-50', className, size === 'sm' && 'px-2 py-1.5', size === 'md' && 'px-3 py-1.5', size === 'lg' && 'px-4 py-2.5', variant === 'outline' && 'border-border border'), children: [control, _jsxs("div", { className: cn('flex min-w-0 flex-1 flex-col', description != null ? 'justify-start' : 'justify-center'), children: [label != null && (_jsx("span", { className: cn('text-sm transition-[color,font-weight]', 'text-foreground', 'peer-data-[state=checked]:text-foreground peer-data-[state=checked]:font-medium', disabled && 'text-muted-foreground'), children: label })), description != null && (_jsx("span", { "data-slot": "radio-group-item-description", className: "text-muted-foreground block text-[13px]", children: description }))] })] }));
+}
+export { RadioGroup, RadioGroupItem };