@karakuri-ui/react 0.3.4 → 0.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/accordion.mjs +1 -1
- package/dist/components/ui/alert.mjs +1 -1
- package/dist/components/ui/avatar.mjs +1 -1
- package/dist/components/ui/badge.mjs +1 -1
- package/dist/components/ui/breadcrumb.mjs +1 -1
- package/dist/components/ui/button-group.mjs +1 -1
- package/dist/components/ui/button.mjs +2 -2
- package/dist/components/ui/card.mjs +1 -1
- package/dist/components/ui/chart.mjs +1 -1
- package/dist/components/ui/checkbox.js +3 -1
- package/dist/components/ui/checkbox.js.map +1 -1
- package/dist/components/ui/checkbox.mjs +5 -3
- package/dist/components/ui/checkbox.mjs.map +1 -1
- package/dist/components/ui/divider.mjs +1 -1
- package/dist/components/ui/drawer.mjs +1 -1
- package/dist/components/ui/dropdown.mjs +1 -1
- package/dist/components/ui/field.d.mts +11 -1
- package/dist/components/ui/field.d.ts +11 -1
- package/dist/components/ui/field.js +37 -4
- package/dist/components/ui/field.js.map +1 -1
- package/dist/components/ui/field.mjs +36 -4
- package/dist/components/ui/field.mjs.map +1 -1
- package/dist/components/ui/icon-button.mjs +2 -2
- package/dist/components/ui/index.d.mts +1 -1
- package/dist/components/ui/index.d.ts +1 -1
- package/dist/components/ui/index.mjs +35 -35
- package/dist/components/ui/input.js +1 -0
- package/dist/components/ui/input.js.map +1 -1
- package/dist/components/ui/input.mjs +3 -2
- package/dist/components/ui/input.mjs.map +1 -1
- package/dist/components/ui/metric-card.mjs +1 -1
- package/dist/components/ui/modal.mjs +1 -1
- package/dist/components/ui/navigation-menu.js +30 -9
- package/dist/components/ui/navigation-menu.js.map +1 -1
- package/dist/components/ui/navigation-menu.mjs +31 -10
- package/dist/components/ui/navigation-menu.mjs.map +1 -1
- package/dist/components/ui/pagination.js +2 -2
- package/dist/components/ui/pagination.js.map +1 -1
- package/dist/components/ui/pagination.mjs +4 -4
- package/dist/components/ui/pagination.mjs.map +1 -1
- package/dist/components/ui/popover.mjs +1 -1
- package/dist/components/ui/progress.mjs +1 -1
- package/dist/components/ui/radio-group.js +3 -0
- package/dist/components/ui/radio-group.js.map +1 -1
- package/dist/components/ui/radio-group.mjs +5 -2
- package/dist/components/ui/radio-group.mjs.map +1 -1
- package/dist/components/ui/segmented.mjs +1 -1
- package/dist/components/ui/select.d.mts +1 -1
- package/dist/components/ui/select.d.ts +1 -1
- package/dist/components/ui/select.js +10 -2
- package/dist/components/ui/select.js.map +1 -1
- package/dist/components/ui/select.mjs +11 -3
- package/dist/components/ui/select.mjs.map +1 -1
- package/dist/components/ui/skeleton.mjs +1 -1
- package/dist/components/ui/slider.js +7 -1
- package/dist/components/ui/slider.js.map +1 -1
- package/dist/components/ui/slider.mjs +8 -2
- package/dist/components/ui/slider.mjs.map +1 -1
- package/dist/components/ui/spinner.mjs +1 -1
- package/dist/components/ui/switch.js +3 -1
- package/dist/components/ui/switch.js.map +1 -1
- package/dist/components/ui/switch.mjs +5 -3
- package/dist/components/ui/switch.mjs.map +1 -1
- package/dist/components/ui/table.mjs +1 -1
- package/dist/components/ui/tabs.mjs +1 -1
- package/dist/components/ui/textarea.js +1 -0
- package/dist/components/ui/textarea.js.map +1 -1
- package/dist/components/ui/textarea.mjs +3 -2
- package/dist/components/ui/textarea.mjs.map +1 -1
- package/dist/components/ui/toast.mjs +1 -1
- package/dist/components/ui/toggle-group.mjs +1 -1
- package/dist/components/ui/toggle.mjs +1 -1
- package/dist/components/ui/tooltip.mjs +1 -1
- package/package.json +1 -1
|
@@ -1,39 +1,39 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionTriggerVariants, accordionVariants } from "./accordion";
|
|
3
|
-
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbSizeMap } from "./breadcrumb";
|
|
4
|
-
import { Divider, dividerVariants } from "./divider";
|
|
5
|
-
import { Button, buttonVariants } from "./button";
|
|
6
|
-
import { IconButton, iconButtonVariants } from "./icon-button";
|
|
7
|
-
import { ButtonGroup, useButtonGroup } from "./button-group";
|
|
8
|
-
import { Toggle, toggleVariants } from "./toggle";
|
|
9
|
-
import { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants, toggleGroupVariants } from "./toggle-group";
|
|
10
|
-
import { Segmented, SegmentedItem, segmentedItemVariants, segmentedVariants } from "./segmented";
|
|
11
|
-
import { Input, inputVariants } from "./input";
|
|
12
|
-
import { Textarea, textareaVariants } from "./textarea";
|
|
13
|
-
import { Field, FieldCharCount, FieldError, FieldLabel, useFieldContext } from "./field";
|
|
14
|
-
import { Checkbox, checkboxVariants } from "./checkbox";
|
|
15
|
-
import { RadioGroup, RadioGroupItem, radioGroupVariants, radioItemVariants } from "./radio-group";
|
|
16
|
-
import { Switch, switchVariants } from "./switch";
|
|
17
|
-
import { Slider, sliderVariants } from "./slider";
|
|
18
|
-
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown";
|
|
19
|
-
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "./select";
|
|
20
|
-
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage, avatarColors, avatarVariants, getAvatarColor, getAvatarInitials } from "./avatar";
|
|
21
|
-
import { MetricCard, MetricCardDescription, MetricCardHeader, MetricCardSymbol, MetricCardTitle, MetricCardTrend, MetricCardValue, metricCardVariants } from "./metric-card";
|
|
22
|
-
import { Badge, badgeVariants } from "./badge";
|
|
23
|
-
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle, cardVariants } from "./card";
|
|
24
|
-
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table";
|
|
25
|
-
import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants } from "./tabs";
|
|
26
|
-
import { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuSizeMap } from "./navigation-menu";
|
|
27
|
-
import { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationItems, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, paginationItemVariants, paginationSizeMap, usePagination } from "./pagination";
|
|
28
|
-
import { AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertModalContent, AlertModalDescription, AlertModalFooter, AlertModalHeader, AlertModalOverlay, AlertModalPortal, AlertModalTitle, AlertModalTrigger, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, alertModalContentVariants, modalContentVariants } from "./modal";
|
|
29
|
-
import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawerSizeHorizontal, drawerSizeVertical } from "./drawer";
|
|
30
|
-
import { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tooltipContentVariants } from "./tooltip";
|
|
31
|
-
import { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, popoverContentVariants } from "./popover";
|
|
32
|
-
import { Alert, AlertDescription, AlertTitle, alertVariants } from "./alert";
|
|
33
|
-
import { Toaster, toast, toastVariants } from "./toast";
|
|
34
|
-
import { Progress, linearTrackVariants } from "./progress";
|
|
35
|
-
import { Spinner, spinnerVariants } from "./spinner";
|
|
36
|
-
import { Skeleton, skeletonVariants } from "./skeleton";
|
|
2
|
+
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger, accordionTriggerVariants, accordionVariants } from "./accordion.mjs";
|
|
3
|
+
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbSizeMap } from "./breadcrumb.mjs";
|
|
4
|
+
import { Divider, dividerVariants } from "./divider.mjs";
|
|
5
|
+
import { Button, buttonVariants } from "./button.mjs";
|
|
6
|
+
import { IconButton, iconButtonVariants } from "./icon-button.mjs";
|
|
7
|
+
import { ButtonGroup, useButtonGroup } from "./button-group.mjs";
|
|
8
|
+
import { Toggle, toggleVariants } from "./toggle.mjs";
|
|
9
|
+
import { ToggleGroup, ToggleGroupItem, toggleGroupItemVariants, toggleGroupVariants } from "./toggle-group.mjs";
|
|
10
|
+
import { Segmented, SegmentedItem, segmentedItemVariants, segmentedVariants } from "./segmented.mjs";
|
|
11
|
+
import { Input, inputVariants } from "./input.mjs";
|
|
12
|
+
import { Textarea, textareaVariants } from "./textarea.mjs";
|
|
13
|
+
import { Field, FieldCharCount, FieldError, FieldLabel, useFieldContext } from "./field.mjs";
|
|
14
|
+
import { Checkbox, checkboxVariants } from "./checkbox.mjs";
|
|
15
|
+
import { RadioGroup, RadioGroupItem, radioGroupVariants, radioItemVariants } from "./radio-group.mjs";
|
|
16
|
+
import { Switch, switchVariants } from "./switch.mjs";
|
|
17
|
+
import { Slider, sliderVariants } from "./slider.mjs";
|
|
18
|
+
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./dropdown.mjs";
|
|
19
|
+
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue } from "./select.mjs";
|
|
20
|
+
import { Avatar, AvatarFallback, AvatarGroup, AvatarImage, avatarColors, avatarVariants, getAvatarColor, getAvatarInitials } from "./avatar.mjs";
|
|
21
|
+
import { MetricCard, MetricCardDescription, MetricCardHeader, MetricCardSymbol, MetricCardTitle, MetricCardTrend, MetricCardValue, metricCardVariants } from "./metric-card.mjs";
|
|
22
|
+
import { Badge, badgeVariants } from "./badge.mjs";
|
|
23
|
+
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardImage, CardTitle, cardVariants } from "./card.mjs";
|
|
24
|
+
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./table.mjs";
|
|
25
|
+
import { Tabs, TabsContent, TabsList, TabsTrigger, tabsListVariants, tabsTriggerVariants } from "./tabs.mjs";
|
|
26
|
+
import { NavigationMenu, NavigationMenuContent, NavigationMenuGroup, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuSizeMap } from "./navigation-menu.mjs";
|
|
27
|
+
import { Pagination, PaginationContent, PaginationEllipsis, PaginationFirst, PaginationItem, PaginationItems, PaginationLast, PaginationLink, PaginationNext, PaginationPrevious, paginationItemVariants, paginationSizeMap, usePagination } from "./pagination.mjs";
|
|
28
|
+
import { AlertModal, AlertModalAction, AlertModalBody, AlertModalCancel, AlertModalContent, AlertModalDescription, AlertModalFooter, AlertModalHeader, AlertModalOverlay, AlertModalPortal, AlertModalTitle, AlertModalTrigger, Modal, ModalBody, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, alertModalContentVariants, modalContentVariants } from "./modal.mjs";
|
|
29
|
+
import { Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, drawerSizeHorizontal, drawerSizeVertical } from "./drawer.mjs";
|
|
30
|
+
import { Tooltip, TooltipArrow, TooltipContent, TooltipPortal, TooltipProvider, TooltipTrigger, tooltipContentVariants } from "./tooltip.mjs";
|
|
31
|
+
import { Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverContent, PopoverPortal, PopoverTrigger, popoverContentVariants } from "./popover.mjs";
|
|
32
|
+
import { Alert, AlertDescription, AlertTitle, alertVariants } from "./alert.mjs";
|
|
33
|
+
import { Toaster, toast, toastVariants } from "./toast.mjs";
|
|
34
|
+
import { Progress, linearTrackVariants } from "./progress.mjs";
|
|
35
|
+
import { Spinner, spinnerVariants } from "./spinner.mjs";
|
|
36
|
+
import { Skeleton, skeletonVariants } from "./skeleton.mjs";
|
|
37
37
|
export {
|
|
38
38
|
Accordion,
|
|
39
39
|
AccordionContent,
|
|
@@ -148,6 +148,7 @@ const Input = React.forwardRef(
|
|
|
148
148
|
const resolvedError = error ?? fieldContext?.error;
|
|
149
149
|
const resolvedState = resolvedError ? "error" : state;
|
|
150
150
|
const inputId = id ?? fieldContext?.id;
|
|
151
|
+
(0, import_field.useFieldControl)("single", Boolean(fieldContext) && !id);
|
|
151
152
|
const isDisabled = props.disabled ?? fieldContext?.disabled;
|
|
152
153
|
const pointerRef = React.useRef(false);
|
|
153
154
|
const windowBlurredRef = React.useRef(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\nconst inputVariants = cva(\n [\n 'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n 'border transition-colors duration-micro outline-transparent',\n 'focus:[outline:2px_solid_transparent]',\n 'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n 'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n ].join(' '),\n {\n variants: {\n variant: {\n default: 'border-border-form hover:border-border-form-strong',\n filled: 'border-transparent bg-background-muted',\n },\n focusRing: {\n true: '',\n false: '',\n },\n size: {\n xs: 'h-9 px-3 text-sm', // 36px / 12px padding / 13px font (3.0:1)\n sm: 'h-10 px-3 text-md', // 40px / 12px padding / 14px font (3.3:1)\n default: 'h-11 px-4 text-base', // 44px / 16px padding / 16px font (2.75:1)\n lg: 'h-12 px-4 text-base', // 48px / 16px padding / 16px font (3.0:1)\n xl: 'h-14 px-4 text-base', // 56px / 16px padding / 16px font (3.5:1)\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n state: {\n default: '',\n error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n },\n },\n compoundVariants: [\n // focusRing: true → show custom focus ring\n { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n // focusRing: false → keep same state as hover\n { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n // filled + error\n {\n variant: 'filled',\n state: 'error',\n className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n state: 'default',\n focusRing: false,\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputVariants> {\n leftIcon?: React.ReactNode\n rightIcon?: React.ReactNode\n error?: boolean\n focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n xl: 'icon-sm', // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n xs: { left: 'pl-8', right: 'pr-8' }, // 12px + 14px icon + 6px gap = 32px\n sm: { left: 'pl-9', right: 'pr-9' }, // 12px + 14px icon + 8px gap = 34px → 36px\n default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n lg: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n xl: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n xs: { left: 'left-3', right: 'right-3' }, // 12px\n sm: { left: 'left-3', right: 'right-3' }, // 12px\n default: { left: 'left-4', right: 'right-4' }, // 16px\n lg: { left: 'left-4', right: 'right-4' }, // 16px\n xl: { left: 'left-4', right: 'right-4' }, // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedError = error ?? fieldContext?.error\n const resolvedState = resolvedError ? 'error' : state\n const inputId = id ?? fieldContext?.id\n const isDisabled = props.disabled ?? fieldContext?.disabled\n\n // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n const pointerRef = React.useRef(false)\n const windowBlurredRef = React.useRef(false)\n const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n // Track window blur/focus to distinguish Tab navigation from window re-activation\n React.useEffect(() => {\n const onBlur = () => { windowBlurredRef.current = true }\n const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n window.addEventListener('blur', onBlur)\n window.addEventListener('focus', onFocus)\n return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n }, [])\n\n const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n pointerRef.current = true\n onPointerDown?.(e)\n }, [onPointerDown])\n\n const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n setKeyboardFocus(true)\n }\n pointerRef.current = false\n onFocus?.(e)\n }, [focusRing, onFocus])\n\n const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n setKeyboardFocus(false)\n pointerRef.current = false\n onBlur?.(e)\n }, [onBlur])\n\n // Build aria-describedby from context\n const ariaDescribedBy = fieldContext\n ? [\n resolvedError ? `${fieldContext.id}-error` : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined\n : undefined\n\n const focusHandlers = {\n onPointerDown: handlePointerDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n }\n\n // If icons are present, wrap input in a container\n if (leftIcon || rightIcon) {\n return (\n <div className=\"relative w-full\">\n {leftIcon && (\n <div className={cn(\n 'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n iconPositionClasses[resolvedSize].left,\n `[&>svg]:${iconSizeClasses[resolvedSize]}`\n )}>\n {leftIcon}\n </div>\n )}\n <input\n type={type}\n id={inputId}\n className={cn(\n inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n leftIcon && iconPaddingClasses[resolvedSize].left,\n rightIcon && iconPaddingClasses[resolvedSize].right,\n className\n )}\n aria-invalid={resolvedError || undefined}\n aria-describedby={ariaDescribedBy}\n disabled={isDisabled}\n ref={ref}\n {...focusHandlers}\n {...props}\n />\n {rightIcon && (\n <div className={cn(\n 'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n iconPositionClasses[resolvedSize].right,\n `[&>svg]:${iconSizeClasses[resolvedSize]}`\n )}>\n {rightIcon}\n </div>\n )}\n </div>\n )\n }\n\n return (\n <input\n type={type}\n id={inputId}\n className={cn(\n inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n className\n )}\n aria-invalid={resolvedError || undefined}\n aria-describedby={ariaDescribedBy}\n disabled={isDisabled}\n ref={ref}\n {...focusHandlers}\n {...props}\n />\n )\n }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\nconst inputVariants = cva(\n [\n 'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n 'border transition-colors duration-micro outline-transparent',\n 'focus:[outline:2px_solid_transparent]',\n 'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n 'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n ].join(' '),\n {\n variants: {\n variant: {\n default: 'border-border-form hover:border-border-form-strong',\n filled: 'border-transparent bg-background-muted',\n },\n focusRing: {\n true: '',\n false: '',\n },\n size: {\n xs: 'h-9 px-3 text-sm', // 36px / 12px padding / 13px font (3.0:1)\n sm: 'h-10 px-3 text-md', // 40px / 12px padding / 14px font (3.3:1)\n default: 'h-11 px-4 text-base', // 44px / 16px padding / 16px font (2.75:1)\n lg: 'h-12 px-4 text-base', // 48px / 16px padding / 16px font (3.0:1)\n xl: 'h-14 px-4 text-base', // 56px / 16px padding / 16px font (3.5:1)\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n state: {\n default: '',\n error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n },\n },\n compoundVariants: [\n // focusRing: true → show custom focus ring\n { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n // focusRing: false → keep same state as hover\n { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n // filled + error\n {\n variant: 'filled',\n state: 'error',\n className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n state: 'default',\n focusRing: false,\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputVariants> {\n leftIcon?: React.ReactNode\n rightIcon?: React.ReactNode\n error?: boolean\n focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n xl: 'icon-sm', // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n xs: { left: 'pl-8', right: 'pr-8' }, // 12px + 14px icon + 6px gap = 32px\n sm: { left: 'pl-9', right: 'pr-9' }, // 12px + 14px icon + 8px gap = 34px → 36px\n default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n lg: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n xl: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n xs: { left: 'left-3', right: 'right-3' }, // 12px\n sm: { left: 'left-3', right: 'right-3' }, // 12px\n default: { left: 'left-4', right: 'right-4' }, // 16px\n lg: { left: 'left-4', right: 'right-4' }, // 16px\n xl: { left: 'left-4', right: 'right-4' }, // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedError = error ?? fieldContext?.error\n const resolvedState = resolvedError ? 'error' : state\n const inputId = id ?? fieldContext?.id\n useFieldControl('single', Boolean(fieldContext) && !id)\n const isDisabled = props.disabled ?? fieldContext?.disabled\n\n // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n const pointerRef = React.useRef(false)\n const windowBlurredRef = React.useRef(false)\n const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n // Track window blur/focus to distinguish Tab navigation from window re-activation\n React.useEffect(() => {\n const onBlur = () => { windowBlurredRef.current = true }\n const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n window.addEventListener('blur', onBlur)\n window.addEventListener('focus', onFocus)\n return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n }, [])\n\n const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n pointerRef.current = true\n onPointerDown?.(e)\n }, [onPointerDown])\n\n const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n setKeyboardFocus(true)\n }\n pointerRef.current = false\n onFocus?.(e)\n }, [focusRing, onFocus])\n\n const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n setKeyboardFocus(false)\n pointerRef.current = false\n onBlur?.(e)\n }, [onBlur])\n\n // Build aria-describedby from context\n const ariaDescribedBy = fieldContext\n ? [\n resolvedError ? `${fieldContext.id}-error` : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined\n : undefined\n\n const focusHandlers = {\n onPointerDown: handlePointerDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n }\n\n // If icons are present, wrap input in a container\n if (leftIcon || rightIcon) {\n return (\n <div className=\"relative w-full\">\n {leftIcon && (\n <div className={cn(\n 'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n iconPositionClasses[resolvedSize].left,\n `[&>svg]:${iconSizeClasses[resolvedSize]}`\n )}>\n {leftIcon}\n </div>\n )}\n <input\n type={type}\n id={inputId}\n className={cn(\n inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n leftIcon && iconPaddingClasses[resolvedSize].left,\n rightIcon && iconPaddingClasses[resolvedSize].right,\n className\n )}\n aria-invalid={resolvedError || undefined}\n aria-describedby={ariaDescribedBy}\n disabled={isDisabled}\n ref={ref}\n {...focusHandlers}\n {...props}\n />\n {rightIcon && (\n <div className={cn(\n 'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n iconPositionClasses[resolvedSize].right,\n `[&>svg]:${iconSizeClasses[resolvedSize]}`\n )}>\n {rightIcon}\n </div>\n )}\n </div>\n )\n }\n\n return (\n <input\n type={type}\n id={inputId}\n className={cn(\n inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n className\n )}\n aria-invalid={resolvedError || undefined}\n aria-describedby={ariaDescribedBy}\n disabled={isDisabled}\n ref={ref}\n {...focusHandlers}\n {...props}\n />\n )\n }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
6
|
-
import { useFieldContext } from "./field";
|
|
5
|
+
import { cn } from "../../lib/utils.mjs";
|
|
6
|
+
import { useFieldContext, useFieldControl } from "./field.mjs";
|
|
7
7
|
const inputVariants = cva(
|
|
8
8
|
[
|
|
9
9
|
"flex w-full bg-background text-foreground placeholder:text-foreground/30",
|
|
@@ -114,6 +114,7 @@ const Input = React.forwardRef(
|
|
|
114
114
|
const resolvedError = error ?? fieldContext?.error;
|
|
115
115
|
const resolvedState = resolvedError ? "error" : state;
|
|
116
116
|
const inputId = id ?? fieldContext?.id;
|
|
117
|
+
useFieldControl("single", Boolean(fieldContext) && !id);
|
|
117
118
|
const isDisabled = props.disabled ?? fieldContext?.disabled;
|
|
118
119
|
const pointerRef = React.useRef(false);
|
|
119
120
|
const windowBlurredRef = React.useRef(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext } from './field'\n\nconst inputVariants = cva(\n [\n 'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n 'border transition-colors duration-micro outline-transparent',\n 'focus:[outline:2px_solid_transparent]',\n 'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n 'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n ].join(' '),\n {\n variants: {\n variant: {\n default: 'border-border-form hover:border-border-form-strong',\n filled: 'border-transparent bg-background-muted',\n },\n focusRing: {\n true: '',\n false: '',\n },\n size: {\n xs: 'h-9 px-3 text-sm', // 36px / 12px padding / 13px font (3.0:1)\n sm: 'h-10 px-3 text-md', // 40px / 12px padding / 14px font (3.3:1)\n default: 'h-11 px-4 text-base', // 44px / 16px padding / 16px font (2.75:1)\n lg: 'h-12 px-4 text-base', // 48px / 16px padding / 16px font (3.0:1)\n xl: 'h-14 px-4 text-base', // 56px / 16px padding / 16px font (3.5:1)\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n state: {\n default: '',\n error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n },\n },\n compoundVariants: [\n // focusRing: true → show custom focus ring\n { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n // focusRing: false → keep same state as hover\n { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n // filled + error\n {\n variant: 'filled',\n state: 'error',\n className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n state: 'default',\n focusRing: false,\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputVariants> {\n leftIcon?: React.ReactNode\n rightIcon?: React.ReactNode\n error?: boolean\n focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n xl: 'icon-sm', // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n xs: { left: 'pl-8', right: 'pr-8' }, // 12px + 14px icon + 6px gap = 32px\n sm: { left: 'pl-9', right: 'pr-9' }, // 12px + 14px icon + 8px gap = 34px → 36px\n default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n lg: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n xl: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n xs: { left: 'left-3', right: 'right-3' }, // 12px\n sm: { left: 'left-3', right: 'right-3' }, // 12px\n default: { left: 'left-4', right: 'right-4' }, // 16px\n lg: { left: 'left-4', right: 'right-4' }, // 16px\n xl: { left: 'left-4', right: 'right-4' }, // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedError = error ?? fieldContext?.error\n const resolvedState = resolvedError ? 'error' : state\n const inputId = id ?? fieldContext?.id\n const isDisabled = props.disabled ?? fieldContext?.disabled\n\n // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n const pointerRef = React.useRef(false)\n const windowBlurredRef = React.useRef(false)\n const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n // Track window blur/focus to distinguish Tab navigation from window re-activation\n React.useEffect(() => {\n const onBlur = () => { windowBlurredRef.current = true }\n const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n window.addEventListener('blur', onBlur)\n window.addEventListener('focus', onFocus)\n return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n }, [])\n\n const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n pointerRef.current = true\n onPointerDown?.(e)\n }, [onPointerDown])\n\n const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n setKeyboardFocus(true)\n }\n pointerRef.current = false\n onFocus?.(e)\n }, [focusRing, onFocus])\n\n const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n setKeyboardFocus(false)\n pointerRef.current = false\n onBlur?.(e)\n }, [onBlur])\n\n // Build aria-describedby from context\n const ariaDescribedBy = fieldContext\n ? [\n resolvedError ? `${fieldContext.id}-error` : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined\n : undefined\n\n const focusHandlers = {\n onPointerDown: handlePointerDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n }\n\n // If icons are present, wrap input in a container\n if (leftIcon || rightIcon) {\n return (\n <div className=\"relative w-full\">\n {leftIcon && (\n <div className={cn(\n 'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n iconPositionClasses[resolvedSize].left,\n `[&>svg]:${iconSizeClasses[resolvedSize]}`\n )}>\n {leftIcon}\n </div>\n )}\n <input\n type={type}\n id={inputId}\n className={cn(\n inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n leftIcon && iconPaddingClasses[resolvedSize].left,\n rightIcon && iconPaddingClasses[resolvedSize].right,\n className\n )}\n aria-invalid={resolvedError || undefined}\n aria-describedby={ariaDescribedBy}\n disabled={isDisabled}\n ref={ref}\n {...focusHandlers}\n {...props}\n />\n {rightIcon && (\n <div className={cn(\n 'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n iconPositionClasses[resolvedSize].right,\n `[&>svg]:${iconSizeClasses[resolvedSize]}`\n )}>\n {rightIcon}\n </div>\n )}\n </div>\n )\n }\n\n return (\n <input\n type={type}\n id={inputId}\n className={cn(\n inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n className\n )}\n aria-invalid={resolvedError || undefined}\n aria-describedby={ariaDescribedBy}\n disabled={isDisabled}\n ref={ref}\n {...focusHandlers}\n {...props}\n />\n )\n }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/input.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\nimport { useFieldContext, useFieldControl } from './field'\n\nconst inputVariants = cva(\n [\n 'flex w-full bg-background text-foreground placeholder:text-foreground/30',\n 'border transition-colors duration-micro outline-transparent',\n 'focus:[outline:2px_solid_transparent]',\n 'disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-background-muted',\n 'file:border-0 file:bg-transparent file:text-sm file:font-semibold',\n ].join(' '),\n {\n variants: {\n variant: {\n default: 'border-border-form hover:border-border-form-strong',\n filled: 'border-transparent bg-background-muted',\n },\n focusRing: {\n true: '',\n false: '',\n },\n size: {\n xs: 'h-9 px-3 text-sm', // 36px / 12px padding / 13px font (3.0:1)\n sm: 'h-10 px-3 text-md', // 40px / 12px padding / 14px font (3.3:1)\n default: 'h-11 px-4 text-base', // 44px / 16px padding / 16px font (2.75:1)\n lg: 'h-12 px-4 text-base', // 48px / 16px padding / 16px font (3.0:1)\n xl: 'h-14 px-4 text-base', // 56px / 16px padding / 16px font (3.5:1)\n },\n radius: {\n none: 'rounded-none',\n sm: 'rounded-sm',\n base: 'rounded',\n default: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n '2xl': 'rounded-2xl',\n '3xl': 'rounded-3xl',\n full: 'rounded-full',\n },\n state: {\n default: '',\n error: 'border-error hover:border-error focus:border-error shadow-[0_0_0_2px_var(--color-focus-ring-error)]',\n },\n },\n compoundVariants: [\n // focusRing: true → show custom focus ring\n { focusRing: true, className: 'focus-visible:shadow-[0_0_0_2px_var(--color-focus-ring)]' },\n // focusRing: false → keep same state as hover\n { variant: 'default', focusRing: false, className: 'focus:border-border-form-strong' },\n // filled + error\n {\n variant: 'filled',\n state: 'error',\n className: 'border-transparent hover:border-transparent focus:border-transparent bg-[var(--color-error-bg)] hover:bg-[var(--color-error-bg)] focus:bg-[var(--color-error-bg)] shadow-none',\n },\n ],\n defaultVariants: {\n variant: 'default',\n size: 'default',\n radius: 'default',\n state: 'default',\n focusRing: false,\n },\n }\n)\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n VariantProps<typeof inputVariants> {\n leftIcon?: React.ReactNode\n rightIcon?: React.ReactNode\n error?: boolean\n focusRing?: boolean\n}\n\n// Icon size for input (2-step scale)\n// xs~sm: 14px, default~xl: 16px\nconst iconSizeClasses = {\n xs: 'icon-xs', // 14px\n sm: 'icon-xs', // 14px\n default: 'icon-sm', // 16px\n lg: 'icon-sm', // 16px\n xl: 'icon-sm', // 16px\n}\n\n// Icon padding (padding + icon + gap)\nconst iconPaddingClasses = {\n xs: { left: 'pl-8', right: 'pr-8' }, // 12px + 14px icon + 6px gap = 32px\n sm: { left: 'pl-9', right: 'pr-9' }, // 12px + 14px icon + 8px gap = 34px → 36px\n default: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n lg: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n xl: { left: 'pl-10', right: 'pr-10' }, // 16px + 16px icon + 8px gap = 40px\n}\n\n// Icon position (matches horizontal padding)\nconst iconPositionClasses = {\n xs: { left: 'left-3', right: 'right-3' }, // 12px\n sm: { left: 'left-3', right: 'right-3' }, // 12px\n default: { left: 'left-4', right: 'right-4' }, // 16px\n lg: { left: 'left-4', right: 'right-4' }, // 16px\n xl: { left: 'left-4', right: 'right-4' }, // 16px\n}\n\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ className, variant, size, radius, state, type, leftIcon, rightIcon, error, focusRing, id, onPointerDown, onFocus, onBlur, ...props }, ref) => {\n const fieldContext = useFieldContext()\n const resolvedSize = size || 'default'\n const resolvedError = error ?? fieldContext?.error\n const resolvedState = resolvedError ? 'error' : state\n const inputId = id ?? fieldContext?.id\n useFieldControl('single', Boolean(fieldContext) && !id)\n const isDisabled = props.disabled ?? fieldContext?.disabled\n\n // Keyboard focus detection (when focusRing: false, auto-show ring on Tab navigation)\n const pointerRef = React.useRef(false)\n const windowBlurredRef = React.useRef(false)\n const [keyboardFocus, setKeyboardFocus] = React.useState(false)\n\n // Track window blur/focus to distinguish Tab navigation from window re-activation\n React.useEffect(() => {\n const onBlur = () => { windowBlurredRef.current = true }\n const onFocus = () => { requestAnimationFrame(() => { windowBlurredRef.current = false }) }\n window.addEventListener('blur', onBlur)\n window.addEventListener('focus', onFocus)\n return () => { window.removeEventListener('blur', onBlur); window.removeEventListener('focus', onFocus) }\n }, [])\n\n const handlePointerDown = React.useCallback((e: React.PointerEvent<HTMLInputElement>) => {\n pointerRef.current = true\n onPointerDown?.(e)\n }, [onPointerDown])\n\n const handleFocus = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n if (!pointerRef.current && !focusRing && !windowBlurredRef.current) {\n setKeyboardFocus(true)\n }\n pointerRef.current = false\n onFocus?.(e)\n }, [focusRing, onFocus])\n\n const handleBlur = React.useCallback((e: React.FocusEvent<HTMLInputElement>) => {\n setKeyboardFocus(false)\n pointerRef.current = false\n onBlur?.(e)\n }, [onBlur])\n\n // Build aria-describedby from context\n const ariaDescribedBy = fieldContext\n ? [\n resolvedError ? `${fieldContext.id}-error` : null,\n ]\n .filter(Boolean)\n .join(' ') || undefined\n : undefined\n\n const focusHandlers = {\n onPointerDown: handlePointerDown,\n onFocus: handleFocus,\n onBlur: handleBlur,\n }\n\n // If icons are present, wrap input in a container\n if (leftIcon || rightIcon) {\n return (\n <div className=\"relative w-full\">\n {leftIcon && (\n <div className={cn(\n 'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n iconPositionClasses[resolvedSize].left,\n `[&>svg]:${iconSizeClasses[resolvedSize]}`\n )}>\n {leftIcon}\n </div>\n )}\n <input\n type={type}\n id={inputId}\n className={cn(\n inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n leftIcon && iconPaddingClasses[resolvedSize].left,\n rightIcon && iconPaddingClasses[resolvedSize].right,\n className\n )}\n aria-invalid={resolvedError || undefined}\n aria-describedby={ariaDescribedBy}\n disabled={isDisabled}\n ref={ref}\n {...focusHandlers}\n {...props}\n />\n {rightIcon && (\n <div className={cn(\n 'absolute top-1/2 -translate-y-1/2 pointer-events-none text-text-muted z-10',\n iconPositionClasses[resolvedSize].right,\n `[&>svg]:${iconSizeClasses[resolvedSize]}`\n )}>\n {rightIcon}\n </div>\n )}\n </div>\n )\n }\n\n return (\n <input\n type={type}\n id={inputId}\n className={cn(\n inputVariants({ variant, size, radius, state: resolvedState, focusRing }),\n keyboardFocus && 'shadow-[0_0_0_2px_var(--color-focus-ring)]',\n className\n )}\n aria-invalid={resolvedError || undefined}\n aria-describedby={ariaDescribedBy}\n disabled={isDisabled}\n ref={ref}\n {...focusHandlers}\n {...props}\n />\n )\n }\n)\nInput.displayName = 'Input'\n\nexport { Input, inputVariants }\n"],"mappings":"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","names":["onBlur","onFocus"]}
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import * as React from "react";
|
|
4
4
|
import { cva } from "class-variance-authority";
|
|
5
|
-
import { cn } from "../../lib/utils";
|
|
5
|
+
import { cn } from "../../lib/utils.mjs";
|
|
6
6
|
const metricCardVariants = cva(
|
|
7
7
|
"transition-colors",
|
|
8
8
|
{
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
5
5
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
|
6
6
|
import { cva } from "class-variance-authority";
|
|
7
|
-
import { cn } from "../../lib/utils";
|
|
7
|
+
import { cn } from "../../lib/utils.mjs";
|
|
8
8
|
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ jsx(
|
|
9
9
|
"svg",
|
|
10
10
|
{
|
|
@@ -216,9 +216,11 @@ const NavigationMenuItem = React.forwardRef(
|
|
|
216
216
|
({ className, value, defaultOpen = false, children, ...props }, ref) => {
|
|
217
217
|
const { orientation, collapsed } = useNavigationMenuContext();
|
|
218
218
|
const [open, setOpen] = React.useState(defaultOpen);
|
|
219
|
-
React.
|
|
219
|
+
const [prevCollapsed, setPrevCollapsed] = React.useState(collapsed);
|
|
220
|
+
if (collapsed !== prevCollapsed) {
|
|
221
|
+
setPrevCollapsed(collapsed);
|
|
220
222
|
if (collapsed) setOpen(false);
|
|
221
|
-
}
|
|
223
|
+
}
|
|
222
224
|
if (orientation === "horizontal") {
|
|
223
225
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
224
226
|
NavigationMenuPrimitive.Item,
|
|
@@ -468,13 +470,32 @@ const NavigationMenuGroup = React.forwardRef(
|
|
|
468
470
|
({ className, label, children, ...props }, ref) => {
|
|
469
471
|
const { size, collapsed } = useNavigationMenuContext();
|
|
470
472
|
const s = navigationMenuSizeMap[size];
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
473
|
+
const labelId = React.useId();
|
|
474
|
+
const showLabel = Boolean(label) && !collapsed;
|
|
475
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: (0, import_utils.cn)(showLabel && s.groupMargin), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
476
|
+
"div",
|
|
477
|
+
{
|
|
478
|
+
ref,
|
|
479
|
+
role: "group",
|
|
480
|
+
"aria-labelledby": showLabel && !props["aria-label"] ? labelId : void 0,
|
|
481
|
+
className,
|
|
482
|
+
...props,
|
|
483
|
+
children: [
|
|
484
|
+
showLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
485
|
+
"div",
|
|
486
|
+
{
|
|
487
|
+
id: labelId,
|
|
488
|
+
className: (0, import_utils.cn)(
|
|
489
|
+
"font-semibold text-text-subtle uppercase tracking-wider select-none",
|
|
490
|
+
s.groupLabel
|
|
491
|
+
),
|
|
492
|
+
children: label
|
|
493
|
+
}
|
|
494
|
+
),
|
|
495
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "flex flex-col gap-0.5", children })
|
|
496
|
+
]
|
|
497
|
+
}
|
|
498
|
+
) });
|
|
478
499
|
}
|
|
479
500
|
);
|
|
480
501
|
NavigationMenuGroup.displayName = "NavigationMenuGroup";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/navigation-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../../lib/utils'\n\n// ─── Built-in Icons ───────────────────────────────────────\n\nfunction ChevronDownIcon({ className }: { className?: string }) {\n return (\n <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n )\n}\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\n// ─── Radius Configuration ─────────────────────────────────\n\ntype NavigationMenuRadius = 'sm' | 'md' | 'lg' | 'xl'\n\nconst contentRadiusMap: Record<NavigationMenuRadius, string> = {\n sm: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<NavigationMenuRadius, string> = {\n sm: 'rounded-sm', // 2px\n md: 'rounded', // 4px\n lg: 'rounded-md', // 6px\n xl: 'rounded-lg', // 8px\n}\n\n// ─── Contexts ─────────────────────────────────────────────\n\ntype NavigationMenuContextValue = {\n orientation: 'horizontal' | 'vertical'\n size: 'sm' | 'md' | 'default' | 'lg'\n collapsed: boolean\n radius: NavigationMenuRadius\n fontWeight: 'normal' | 'semibold'\n}\n\nconst NavigationMenuContext = React.createContext<NavigationMenuContextValue>({\n orientation: 'horizontal',\n size: 'default',\n collapsed: false,\n radius: 'lg',\n fontWeight: 'normal',\n})\nconst useNavigationMenuContext = () => React.useContext(NavigationMenuContext)\n\n// Whether we're inside NavigationMenuContent (affects link styling)\nconst ContentLevelContext = React.createContext(false)\n\n// ─── Size Configuration ───────────────────────────────────\n\nconst navigationMenuSizeMap = {\n sm: {\n trigger: 'h-8 text-sm px-3 gap-2',\n link: 'h-8 text-sm px-3 gap-2',\n icon: 'icon-xs',\n collapsedSquare: 'size-8', collapsedWidth: 56,\n dropdownLink: 'px-3 py-1.5 text-sm gap-2',\n subLink: 'h-8 text-sm pl-8 pr-3 gap-2',\n groupLabel: 'text-2xs px-3 mb-1', groupMargin: 'mt-4 first:mt-0',\n },\n md: {\n trigger: 'h-9 text-md px-3.5 gap-2',\n link: 'h-9 text-md px-3.5 gap-2',\n icon: 'icon-sm',\n collapsedSquare: 'size-9', collapsedWidth: 60,\n dropdownLink: 'px-3 py-1.5 text-md gap-2',\n subLink: 'h-9 text-md pl-9 pr-3.5 gap-2',\n groupLabel: 'text-xs px-3.5 mb-1', groupMargin: 'mt-4 first:mt-0',\n },\n default: {\n trigger: 'h-10 text-md px-4 gap-2',\n link: 'h-10 text-md px-4 gap-2',\n icon: 'icon-sm',\n collapsedSquare: 'size-10', collapsedWidth: 64,\n dropdownLink: 'px-3 py-2 text-md gap-2',\n subLink: 'h-10 text-md pl-10 pr-4 gap-2',\n groupLabel: 'text-xs px-4 mb-1.5', groupMargin: 'mt-5 first:mt-0',\n },\n lg: {\n trigger: 'h-12 text-base px-6 gap-2',\n link: 'h-12 text-base px-6 gap-2',\n icon: 'icon-sm',\n collapsedSquare: 'size-12', collapsedWidth: 72,\n dropdownLink: 'px-3 py-2.5 text-base gap-2',\n subLink: 'h-12 text-base pl-12 pr-6 gap-2',\n groupLabel: 'text-xs px-4 mb-2', groupMargin: 'mt-6 first:mt-0',\n },\n} as const\n\n// ─── NavigationMenu (Root) ────────────────────────────────\n\nexport interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical'\n /** Size of the menu items */\n size?: 'sm' | 'md' | 'default' | 'lg'\n /** Vertical only: show icons only (collapsed sidebar) */\n collapsed?: boolean\n /** Vertical only: sidebar width (default: 256px / 16rem) */\n width?: number | string\n /** Vertical only: collapsed sidebar width (default: 64px / 4rem) */\n collapsedWidth?: number | string\n /** Border radius for dropdown content and items */\n radius?: NavigationMenuRadius\n /** Font weight for menu items (default: normal, active items always use semibold) */\n fontWeight?: 'normal' | 'semibold'\n /** Horizontal only: delay before hover opens in ms */\n delayDuration?: number\n /** Horizontal only: skip delay when moving between triggers */\n skipDelayDuration?: number\n /** Controlled active menu item value */\n value?: string\n /** Default active menu item value (uncontrolled) */\n defaultValue?: string\n /** Callback when active item changes */\n onValueChange?: (value: string) => void\n}\n\nconst NavigationMenu = React.forwardRef<HTMLElement, NavigationMenuProps>(\n ({\n className,\n orientation = 'horizontal',\n size = 'default',\n collapsed = false,\n width,\n collapsedWidth,\n radius = 'lg',\n fontWeight = 'normal',\n delayDuration = 200,\n skipDelayDuration = 300,\n value,\n defaultValue,\n onValueChange,\n children,\n style,\n ...props\n }, ref) => {\n const contextValue = React.useMemo(\n () => ({ orientation, size, collapsed: orientation === 'vertical' ? collapsed : false, radius, fontWeight }),\n [orientation, size, collapsed, radius, fontWeight]\n )\n\n if (orientation === 'horizontal') {\n return (\n <NavigationMenuContext.Provider value={contextValue}>\n <NavigationMenuPrimitive.Root\n ref={ref as React.Ref<HTMLDivElement>}\n className={cn('relative', className)}\n delayDuration={delayDuration}\n skipDelayDuration={skipDelayDuration}\n value={value}\n defaultValue={defaultValue ?? ''}\n onValueChange={onValueChange}\n >\n {children}\n </NavigationMenuPrimitive.Root>\n </NavigationMenuContext.Provider>\n )\n }\n\n // Vertical mode\n const resolvedWidth = collapsed\n ? (collapsedWidth ?? navigationMenuSizeMap[size].collapsedWidth)\n : (width ?? 256)\n const widthValue = typeof resolvedWidth === 'number' ? `${resolvedWidth}px` : resolvedWidth\n\n return (\n <NavigationMenuContext.Provider value={contextValue}>\n <nav\n ref={ref}\n aria-label=\"navigation\"\n className={cn(\n 'flex flex-col',\n 'transition-[width] duration-normal ease-out',\n className\n )}\n style={{ width: widthValue, ...style }}\n {...props}\n >\n {children}\n </nav>\n </NavigationMenuContext.Provider>\n )\n }\n)\nNavigationMenu.displayName = 'NavigationMenu'\n\n// ─── NavigationMenuList ───────────────────────────────────\n\nexport interface NavigationMenuListProps extends React.HTMLAttributes<HTMLUListElement> {}\n\nconst NavigationMenuList = React.forwardRef<HTMLUListElement, NavigationMenuListProps>(\n ({ className, children, ...props }, ref) => {\n const { orientation } = useNavigationMenuContext()\n\n if (orientation === 'horizontal') {\n return (\n <NavigationMenuPrimitive.List\n ref={ref}\n className={cn('flex items-center gap-1', className)}\n {...props}\n >\n {children}\n </NavigationMenuPrimitive.List>\n )\n }\n\n return (\n <ul\n ref={ref}\n className={cn('flex flex-col gap-0.5', className)}\n {...props}\n >\n {children}\n </ul>\n )\n }\n)\nNavigationMenuList.displayName = 'NavigationMenuList'\n\n// ─── NavigationMenuItem ───────────────────────────────────\n\nexport interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {\n /** Value identifier for Radix (horizontal mode) */\n value?: string\n /** Vertical only: default open state for sub-menu */\n defaultOpen?: boolean\n}\n\nconst NavigationMenuItem = React.forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n ({ className, value, defaultOpen = false, children, ...props }, ref) => {\n const { orientation, collapsed } = useNavigationMenuContext()\n const [open, setOpen] = React.useState(defaultOpen)\n\n // Auto-close sub-menus when collapsed\n React.useEffect(() => {\n if (collapsed) setOpen(false)\n }, [collapsed])\n\n if (orientation === 'horizontal') {\n return (\n <NavigationMenuPrimitive.Item\n ref={ref}\n className={cn('relative', className)}\n value={value}\n {...props}\n >\n {children}\n </NavigationMenuPrimitive.Item>\n )\n }\n\n // Vertical: wrap in Collapsible.Root for sub-menu support\n return (\n <CollapsiblePrimitive.Root\n open={collapsed ? false : open}\n onOpenChange={collapsed ? undefined : setOpen}\n asChild\n >\n <li ref={ref} className={cn('', className)} {...props}>\n {children}\n </li>\n </CollapsiblePrimitive.Root>\n )\n }\n)\nNavigationMenuItem.displayName = 'NavigationMenuItem'\n\n// ─── NavigationMenuTrigger ────────────────────────────────\n\nexport interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Icon displayed before the label */\n icon?: React.ReactNode\n /** Custom chevron icon (default: built-in ChevronDown for horizontal, ChevronRight for vertical) */\n chevronIcon?: React.ReactNode\n}\n\nconst NavigationMenuTrigger = React.forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n ({ className, children, icon, chevronIcon, ...props }, ref) => {\n const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext()\n const s = navigationMenuSizeMap[size]\n const fwClass = fw === 'semibold' ? 'font-semibold' : 'font-normal'\n\n if (orientation === 'horizontal') {\n return (\n <NavigationMenuPrimitive.Trigger\n ref={ref}\n className={cn(\n 'group inline-flex items-center justify-center',\n s.trigger,\n 'gap-0',\n fwClass, 'text-text-muted',\n 'transition-colors duration-fast',\n 'hover:text-foreground',\n 'data-[state=open]:text-foreground',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n className\n )}\n {...props}\n >\n {icon && <span className={cn('shrink-0 mr-2', s.icon)}>{icon}</span>}\n {children}\n <span className={cn('shrink-0 ml-1 text-text-subtle transition-transform duration-fast group-data-[state=open]:rotate-180', s.icon)}>\n {chevronIcon ?? <ChevronDownIcon className=\"size-full\" />}\n </span>\n </NavigationMenuPrimitive.Trigger>\n )\n }\n\n // Vertical: Collapsible trigger\n return (\n <CollapsiblePrimitive.Trigger\n ref={ref}\n className={cn(\n 'group flex items-center cursor-pointer',\n contentRadiusMap[radius],\n collapsed\n ? [s.collapsedSquare, 'justify-center mx-auto']\n : ['w-full', s.trigger],\n fwClass, 'text-text-muted transition-colors duration-fast',\n 'hover:text-foreground hover:bg-background-muted',\n !collapsed && 'data-[state=open]:text-foreground',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n className\n )}\n {...(collapsed && typeof children === 'string' ? { title: children } : {})}\n {...props}\n >\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {!collapsed && (\n <>\n <span className=\"flex-1 text-left truncate\">{children}</span>\n <span\n className={cn(\n 'shrink-0 text-text-subtle transition-transform duration-normal',\n s.icon,\n 'group-data-[state=open]:rotate-90'\n )}\n >\n {chevronIcon ?? <ChevronRightIcon className=\"size-full\" />}\n </span>\n </>\n )}\n </CollapsiblePrimitive.Trigger>\n )\n }\n)\nNavigationMenuTrigger.displayName = 'NavigationMenuTrigger'\n\n// ─── NavigationMenuContent ────────────────────────────────\n\nexport interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst NavigationMenuContent = React.forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n ({ className, children, ...props }, ref) => {\n const { orientation, size, collapsed, radius } = useNavigationMenuContext()\n const s = navigationMenuSizeMap[size]\n\n if (orientation === 'horizontal') {\n return (\n <ContentLevelContext.Provider value={true}>\n <NavigationMenuPrimitive.Content\n ref={ref}\n className={cn(\n 'absolute left-0 top-full z-dropdown pt-1',\n 'data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out',\n className\n )}\n {...props}\n >\n <div className={cn('min-w-[180px] border border-border bg-background shadow-lg p-1.5 grid gap-0.5', contentRadiusMap[radius])}>\n {children}\n </div>\n </NavigationMenuPrimitive.Content>\n </ContentLevelContext.Provider>\n )\n }\n\n // Vertical: Collapsible content (hidden when collapsed)\n if (collapsed) return null\n\n return (\n <ContentLevelContext.Provider value={true}>\n <CollapsiblePrimitive.Content\n ref={ref}\n className={cn(\n 'overflow-hidden',\n 'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up',\n )}\n {...props}\n >\n <div className={cn(\n 'flex flex-col gap-0.5 py-1',\n className\n )}>\n {children}\n </div>\n </CollapsiblePrimitive.Content>\n </ContentLevelContext.Provider>\n )\n }\n)\nNavigationMenuContent.displayName = 'NavigationMenuContent'\n\n// ─── NavigationMenuLink ───────────────────────────────────\n\nexport interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Whether the link represents the current page */\n active?: boolean\n /** Compose with custom link component (Radix Slot) */\n asChild?: boolean\n /** Icon displayed before the label */\n icon?: React.ReactNode\n}\n\nconst NavigationMenuLink = React.forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n ({ className, active, asChild, icon, children, ...props }, ref) => {\n const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext()\n const s = navigationMenuSizeMap[size]\n const fwClass = fw === 'semibold' ? 'font-semibold' : 'font-normal'\n const inContent = React.useContext(ContentLevelContext)\n\n if (orientation === 'horizontal') {\n // Exclude onSelect to avoid React vs Radix type conflict\n const { onSelect, ...radixSafeProps } = props as any\n\n // Content-level links (inside dropdown): block style with hover bg\n if (inContent) {\n return (\n <NavigationMenuPrimitive.Link\n ref={ref}\n className={cn(\n 'flex items-center w-full',\n s.dropdownLink,\n itemRadiusMap[radius],\n 'text-text-muted transition-colors duration-fast',\n 'hover:text-foreground hover:bg-background-muted',\n active && 'text-foreground bg-background-muted font-semibold',\n 'focus-visible:focus-ring',\n className\n )}\n active={active}\n asChild={asChild}\n onSelect={onSelect}\n {...radixSafeProps}\n >\n {asChild ? children : (\n <>\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {children}\n </>\n )}\n </NavigationMenuPrimitive.Link>\n )\n }\n\n // Top-level horizontal links: text only, no hover bg\n return (\n <NavigationMenuPrimitive.Link\n ref={ref}\n className={cn(\n 'inline-flex items-center justify-center',\n s.link,\n fwClass, 'text-text-muted',\n 'transition-colors duration-fast',\n 'hover:text-foreground',\n active && 'text-foreground font-semibold',\n 'focus-visible:focus-ring',\n className\n )}\n active={active}\n asChild={asChild}\n onSelect={onSelect}\n {...radixSafeProps}\n >\n {asChild ? children : (\n <>\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {children}\n </>\n )}\n </NavigationMenuPrimitive.Link>\n )\n }\n\n // ── Vertical mode ──\n\n const Comp = asChild ? Slot : 'a'\n\n // Content-level links (sub-menu items): compact, indented\n if (inContent) {\n return (\n <Comp\n ref={ref}\n className={cn(\n 'flex items-center w-full cursor-pointer',\n contentRadiusMap[radius],\n s.subLink,\n 'text-text-muted transition-colors duration-fast',\n 'hover:text-foreground hover:bg-background-muted',\n active && 'text-foreground bg-background-muted font-semibold',\n 'focus-visible:focus-ring',\n className\n )}\n {...(active ? { 'aria-current': 'page' as const } : {})}\n {...props}\n >\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {!collapsed && children}\n </Comp>\n )\n }\n\n // Top-level vertical links\n return (\n <Comp\n ref={ref}\n className={cn(\n 'relative flex items-center cursor-pointer',\n contentRadiusMap[radius],\n collapsed\n ? [s.collapsedSquare, 'justify-center mx-auto']\n : ['w-full', s.link],\n 'text-text-muted transition-colors duration-fast',\n 'hover:text-foreground hover:bg-background-muted',\n active && 'text-foreground bg-background-muted font-semibold',\n 'focus-visible:focus-ring',\n className\n )}\n {...(active ? { 'aria-current': 'page' as const } : {})}\n {...(collapsed && typeof children === 'string' ? { title: children } : {})}\n {...props}\n >\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {!collapsed && <span className=\"truncate\">{children}</span>}\n </Comp>\n )\n }\n)\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n\n// ─── NavigationMenuGroup (vertical only) ──────────────────\n\nexport interface NavigationMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Group header label */\n label?: string\n}\n\nconst NavigationMenuGroup = React.forwardRef<HTMLDivElement, NavigationMenuGroupProps>(\n ({ className, label, children, ...props }, ref) => {\n const { size, collapsed } = useNavigationMenuContext()\n const s = navigationMenuSizeMap[size]\n\n return (\n <div ref={ref} role=\"group\" className={cn(label && !collapsed && s.groupMargin, className)} {...props}>\n {label && !collapsed && (\n <div className={cn(\n 'font-semibold text-text-subtle uppercase tracking-wider select-none',\n s.groupLabel,\n )}>\n {label}\n </div>\n )}\n <ul className=\"flex flex-col gap-0.5\">\n {children}\n </ul>\n </div>\n )\n }\n)\nNavigationMenuGroup.displayName = 'NavigationMenuGroup'\n\n// ─── NavigationMenuIndicator ──────────────────────────────\n\nexport interface NavigationMenuIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Active indicator dot color (default: dark/foreground, primary: brand color) */\n color?: 'default' | 'primary'\n}\n\nconst NavigationMenuIndicator = React.forwardRef<HTMLDivElement, NavigationMenuIndicatorProps>(\n ({ className, color = 'default', ...props }, ref) => {\n const { orientation } = useNavigationMenuContext()\n\n // Vertical: active indicator is built into NavigationMenuLink styling\n if (orientation === 'vertical') return null\n\n return (\n <NavigationMenuPrimitive.Indicator\n ref={ref}\n className={cn(\n 'z-10 flex h-[3px] items-end justify-center overflow-hidden',\n 'transition-[width,transform] duration-normal ease-out',\n 'data-[state=visible]:animate-fade-in data-[state=hidden]:animate-fade-out',\n className\n )}\n {...props}\n >\n <div className={cn(\n 'relative h-full w-full rounded-full',\n color === 'default' ? 'bg-foreground' : 'bg-primary'\n )} />\n </NavigationMenuPrimitive.Indicator>\n )\n }\n)\nNavigationMenuIndicator.displayName = 'NavigationMenuIndicator'\n\n// ─── NavigationMenuViewport ───────────────────────────────\n\nexport interface NavigationMenuViewportProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst NavigationMenuViewport = React.forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n ({ className, ...props }, ref) => {\n const { orientation } = useNavigationMenuContext()\n\n // Vertical mode does not use a viewport\n if (orientation === 'vertical') return null\n\n return (\n <div className=\"absolute left-0 top-full z-dropdown w-auto pt-1\">\n <NavigationMenuPrimitive.Viewport\n ref={ref}\n className={cn(\n 'relative overflow-hidden',\n 'border border-border bg-background rounded-xl shadow-lg',\n 'h-[var(--radix-navigation-menu-viewport-height)]',\n 'w-[var(--radix-navigation-menu-viewport-width)]',\n 'transition-[width,height] duration-fast ease-out',\n 'data-[state=open]:animate-nav-viewport-enter',\n 'data-[state=closed]:animate-nav-viewport-exit',\n className\n )}\n {...props}\n />\n </div>\n )\n }\n)\nNavigationMenuViewport.displayName = 'NavigationMenuViewport'\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuTrigger,\n NavigationMenuContent,\n NavigationMenuLink,\n NavigationMenuGroup,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuSizeMap,\n type NavigationMenuRadius,\n}\n"],"mappings":"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","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/navigation-menu.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport * as CollapsiblePrimitive from '@radix-ui/react-collapsible'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '../../lib/utils'\n\n// ─── Built-in Icons ───────────────────────────────────────\n\nfunction ChevronDownIcon({ className }: { className?: string }) {\n return (\n <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n )\n}\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg className={className} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\n// ─── Radius Configuration ─────────────────────────────────\n\ntype NavigationMenuRadius = 'sm' | 'md' | 'lg' | 'xl'\n\nconst contentRadiusMap: Record<NavigationMenuRadius, string> = {\n sm: 'rounded', // 4px\n md: 'rounded-md', // 6px\n lg: 'rounded-lg', // 8px\n xl: 'rounded-xl', // 12px\n}\n\nconst itemRadiusMap: Record<NavigationMenuRadius, string> = {\n sm: 'rounded-sm', // 2px\n md: 'rounded', // 4px\n lg: 'rounded-md', // 6px\n xl: 'rounded-lg', // 8px\n}\n\n// ─── Contexts ─────────────────────────────────────────────\n\ntype NavigationMenuContextValue = {\n orientation: 'horizontal' | 'vertical'\n size: 'sm' | 'md' | 'default' | 'lg'\n collapsed: boolean\n radius: NavigationMenuRadius\n fontWeight: 'normal' | 'semibold'\n}\n\nconst NavigationMenuContext = React.createContext<NavigationMenuContextValue>({\n orientation: 'horizontal',\n size: 'default',\n collapsed: false,\n radius: 'lg',\n fontWeight: 'normal',\n})\nconst useNavigationMenuContext = () => React.useContext(NavigationMenuContext)\n\n// Whether we're inside NavigationMenuContent (affects link styling)\nconst ContentLevelContext = React.createContext(false)\n\n// ─── Size Configuration ───────────────────────────────────\n\nconst navigationMenuSizeMap = {\n sm: {\n trigger: 'h-8 text-sm px-3 gap-2',\n link: 'h-8 text-sm px-3 gap-2',\n icon: 'icon-xs',\n collapsedSquare: 'size-8', collapsedWidth: 56,\n dropdownLink: 'px-3 py-1.5 text-sm gap-2',\n subLink: 'h-8 text-sm pl-8 pr-3 gap-2',\n groupLabel: 'text-2xs px-3 mb-1', groupMargin: 'mt-4 first:mt-0',\n },\n md: {\n trigger: 'h-9 text-md px-3.5 gap-2',\n link: 'h-9 text-md px-3.5 gap-2',\n icon: 'icon-sm',\n collapsedSquare: 'size-9', collapsedWidth: 60,\n dropdownLink: 'px-3 py-1.5 text-md gap-2',\n subLink: 'h-9 text-md pl-9 pr-3.5 gap-2',\n groupLabel: 'text-xs px-3.5 mb-1', groupMargin: 'mt-4 first:mt-0',\n },\n default: {\n trigger: 'h-10 text-md px-4 gap-2',\n link: 'h-10 text-md px-4 gap-2',\n icon: 'icon-sm',\n collapsedSquare: 'size-10', collapsedWidth: 64,\n dropdownLink: 'px-3 py-2 text-md gap-2',\n subLink: 'h-10 text-md pl-10 pr-4 gap-2',\n groupLabel: 'text-xs px-4 mb-1.5', groupMargin: 'mt-5 first:mt-0',\n },\n lg: {\n trigger: 'h-12 text-base px-6 gap-2',\n link: 'h-12 text-base px-6 gap-2',\n icon: 'icon-sm',\n collapsedSquare: 'size-12', collapsedWidth: 72,\n dropdownLink: 'px-3 py-2.5 text-base gap-2',\n subLink: 'h-12 text-base pl-12 pr-6 gap-2',\n groupLabel: 'text-xs px-4 mb-2', groupMargin: 'mt-6 first:mt-0',\n },\n} as const\n\n// ─── NavigationMenu (Root) ────────────────────────────────\n\nexport interface NavigationMenuProps extends React.HTMLAttributes<HTMLElement> {\n /** Layout orientation */\n orientation?: 'horizontal' | 'vertical'\n /** Size of the menu items */\n size?: 'sm' | 'md' | 'default' | 'lg'\n /** Vertical only: show icons only (collapsed sidebar) */\n collapsed?: boolean\n /** Vertical only: sidebar width (default: 256px / 16rem) */\n width?: number | string\n /** Vertical only: collapsed sidebar width (default: 64px / 4rem) */\n collapsedWidth?: number | string\n /** Border radius for dropdown content and items */\n radius?: NavigationMenuRadius\n /** Font weight for menu items (default: normal, active items always use semibold) */\n fontWeight?: 'normal' | 'semibold'\n /** Horizontal only: delay before hover opens in ms */\n delayDuration?: number\n /** Horizontal only: skip delay when moving between triggers */\n skipDelayDuration?: number\n /** Controlled active menu item value */\n value?: string\n /** Default active menu item value (uncontrolled) */\n defaultValue?: string\n /** Callback when active item changes */\n onValueChange?: (value: string) => void\n}\n\nconst NavigationMenu = React.forwardRef<HTMLElement, NavigationMenuProps>(\n ({\n className,\n orientation = 'horizontal',\n size = 'default',\n collapsed = false,\n width,\n collapsedWidth,\n radius = 'lg',\n fontWeight = 'normal',\n delayDuration = 200,\n skipDelayDuration = 300,\n value,\n defaultValue,\n onValueChange,\n children,\n style,\n ...props\n }, ref) => {\n const contextValue = React.useMemo(\n () => ({ orientation, size, collapsed: orientation === 'vertical' ? collapsed : false, radius, fontWeight }),\n [orientation, size, collapsed, radius, fontWeight]\n )\n\n if (orientation === 'horizontal') {\n return (\n <NavigationMenuContext.Provider value={contextValue}>\n <NavigationMenuPrimitive.Root\n ref={ref as React.Ref<HTMLDivElement>}\n className={cn('relative', className)}\n delayDuration={delayDuration}\n skipDelayDuration={skipDelayDuration}\n value={value}\n defaultValue={defaultValue ?? ''}\n onValueChange={onValueChange}\n >\n {children}\n </NavigationMenuPrimitive.Root>\n </NavigationMenuContext.Provider>\n )\n }\n\n // Vertical mode\n const resolvedWidth = collapsed\n ? (collapsedWidth ?? navigationMenuSizeMap[size].collapsedWidth)\n : (width ?? 256)\n const widthValue = typeof resolvedWidth === 'number' ? `${resolvedWidth}px` : resolvedWidth\n\n return (\n <NavigationMenuContext.Provider value={contextValue}>\n <nav\n ref={ref}\n aria-label=\"navigation\"\n className={cn(\n 'flex flex-col',\n 'transition-[width] duration-normal ease-out',\n className\n )}\n style={{ width: widthValue, ...style }}\n {...props}\n >\n {children}\n </nav>\n </NavigationMenuContext.Provider>\n )\n }\n)\nNavigationMenu.displayName = 'NavigationMenu'\n\n// ─── NavigationMenuList ───────────────────────────────────\n\nexport interface NavigationMenuListProps extends React.HTMLAttributes<HTMLUListElement> {}\n\nconst NavigationMenuList = React.forwardRef<HTMLUListElement, NavigationMenuListProps>(\n ({ className, children, ...props }, ref) => {\n const { orientation } = useNavigationMenuContext()\n\n if (orientation === 'horizontal') {\n return (\n <NavigationMenuPrimitive.List\n ref={ref}\n className={cn('flex items-center gap-1', className)}\n {...props}\n >\n {children}\n </NavigationMenuPrimitive.List>\n )\n }\n\n return (\n <ul\n ref={ref}\n className={cn('flex flex-col gap-0.5', className)}\n {...props}\n >\n {children}\n </ul>\n )\n }\n)\nNavigationMenuList.displayName = 'NavigationMenuList'\n\n// ─── NavigationMenuItem ───────────────────────────────────\n\nexport interface NavigationMenuItemProps extends React.HTMLAttributes<HTMLLIElement> {\n /** Value identifier for Radix (horizontal mode) */\n value?: string\n /** Vertical only: default open state for sub-menu */\n defaultOpen?: boolean\n}\n\nconst NavigationMenuItem = React.forwardRef<HTMLLIElement, NavigationMenuItemProps>(\n ({ className, value, defaultOpen = false, children, ...props }, ref) => {\n const { orientation, collapsed } = useNavigationMenuContext()\n const [open, setOpen] = React.useState(defaultOpen)\n\n // Auto-close sub-menus when collapsed. Adjusted during render (React's pattern for\n // state that follows a prop) instead of in an effect, which re-rendered once more.\n const [prevCollapsed, setPrevCollapsed] = React.useState(collapsed)\n if (collapsed !== prevCollapsed) {\n setPrevCollapsed(collapsed)\n if (collapsed) setOpen(false)\n }\n\n if (orientation === 'horizontal') {\n return (\n <NavigationMenuPrimitive.Item\n ref={ref}\n className={cn('relative', className)}\n value={value}\n {...props}\n >\n {children}\n </NavigationMenuPrimitive.Item>\n )\n }\n\n // Vertical: wrap in Collapsible.Root for sub-menu support\n return (\n <CollapsiblePrimitive.Root\n open={collapsed ? false : open}\n onOpenChange={collapsed ? undefined : setOpen}\n asChild\n >\n <li ref={ref} className={cn('', className)} {...props}>\n {children}\n </li>\n </CollapsiblePrimitive.Root>\n )\n }\n)\nNavigationMenuItem.displayName = 'NavigationMenuItem'\n\n// ─── NavigationMenuTrigger ────────────────────────────────\n\nexport interface NavigationMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n /** Icon displayed before the label */\n icon?: React.ReactNode\n /** Custom chevron icon (default: built-in ChevronDown for horizontal, ChevronRight for vertical) */\n chevronIcon?: React.ReactNode\n}\n\nconst NavigationMenuTrigger = React.forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(\n ({ className, children, icon, chevronIcon, ...props }, ref) => {\n const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext()\n const s = navigationMenuSizeMap[size]\n const fwClass = fw === 'semibold' ? 'font-semibold' : 'font-normal'\n\n if (orientation === 'horizontal') {\n return (\n <NavigationMenuPrimitive.Trigger\n ref={ref}\n className={cn(\n 'group inline-flex items-center justify-center',\n s.trigger,\n 'gap-0',\n fwClass, 'text-text-muted',\n 'transition-colors duration-fast',\n 'hover:text-foreground',\n 'data-[state=open]:text-foreground',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n className\n )}\n {...props}\n >\n {icon && <span className={cn('shrink-0 mr-2', s.icon)}>{icon}</span>}\n {children}\n <span className={cn('shrink-0 ml-1 text-text-subtle transition-transform duration-fast group-data-[state=open]:rotate-180', s.icon)}>\n {chevronIcon ?? <ChevronDownIcon className=\"size-full\" />}\n </span>\n </NavigationMenuPrimitive.Trigger>\n )\n }\n\n // Vertical: Collapsible trigger\n return (\n <CollapsiblePrimitive.Trigger\n ref={ref}\n className={cn(\n 'group flex items-center cursor-pointer',\n contentRadiusMap[radius],\n collapsed\n ? [s.collapsedSquare, 'justify-center mx-auto']\n : ['w-full', s.trigger],\n fwClass, 'text-text-muted transition-colors duration-fast',\n 'hover:text-foreground hover:bg-background-muted',\n !collapsed && 'data-[state=open]:text-foreground',\n 'focus-visible:focus-ring',\n 'disabled:pointer-events-none disabled:opacity-50',\n className\n )}\n {...(collapsed && typeof children === 'string' ? { title: children } : {})}\n {...props}\n >\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {!collapsed && (\n <>\n <span className=\"flex-1 text-left truncate\">{children}</span>\n <span\n className={cn(\n 'shrink-0 text-text-subtle transition-transform duration-normal',\n s.icon,\n 'group-data-[state=open]:rotate-90'\n )}\n >\n {chevronIcon ?? <ChevronRightIcon className=\"size-full\" />}\n </span>\n </>\n )}\n </CollapsiblePrimitive.Trigger>\n )\n }\n)\nNavigationMenuTrigger.displayName = 'NavigationMenuTrigger'\n\n// ─── NavigationMenuContent ────────────────────────────────\n\nexport interface NavigationMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst NavigationMenuContent = React.forwardRef<HTMLDivElement, NavigationMenuContentProps>(\n ({ className, children, ...props }, ref) => {\n const { orientation, size, collapsed, radius } = useNavigationMenuContext()\n const s = navigationMenuSizeMap[size]\n\n if (orientation === 'horizontal') {\n return (\n <ContentLevelContext.Provider value={true}>\n <NavigationMenuPrimitive.Content\n ref={ref}\n className={cn(\n 'absolute left-0 top-full z-dropdown pt-1',\n 'data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out',\n className\n )}\n {...props}\n >\n <div className={cn('min-w-[180px] border border-border bg-background shadow-lg p-1.5 grid gap-0.5', contentRadiusMap[radius])}>\n {children}\n </div>\n </NavigationMenuPrimitive.Content>\n </ContentLevelContext.Provider>\n )\n }\n\n // Vertical: Collapsible content (hidden when collapsed)\n if (collapsed) return null\n\n return (\n <ContentLevelContext.Provider value={true}>\n <CollapsiblePrimitive.Content\n ref={ref}\n className={cn(\n 'overflow-hidden',\n 'data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up',\n )}\n {...props}\n >\n <div className={cn(\n 'flex flex-col gap-0.5 py-1',\n className\n )}>\n {children}\n </div>\n </CollapsiblePrimitive.Content>\n </ContentLevelContext.Provider>\n )\n }\n)\nNavigationMenuContent.displayName = 'NavigationMenuContent'\n\n// ─── NavigationMenuLink ───────────────────────────────────\n\nexport interface NavigationMenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n /** Whether the link represents the current page */\n active?: boolean\n /** Compose with custom link component (Radix Slot) */\n asChild?: boolean\n /** Icon displayed before the label */\n icon?: React.ReactNode\n}\n\nconst NavigationMenuLink = React.forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(\n ({ className, active, asChild, icon, children, ...props }, ref) => {\n const { orientation, size, collapsed, radius, fontWeight: fw } = useNavigationMenuContext()\n const s = navigationMenuSizeMap[size]\n const fwClass = fw === 'semibold' ? 'font-semibold' : 'font-normal'\n const inContent = React.useContext(ContentLevelContext)\n\n if (orientation === 'horizontal') {\n // Exclude onSelect to avoid React vs Radix type conflict\n const { onSelect, ...radixSafeProps } = props as any\n\n // Content-level links (inside dropdown): block style with hover bg\n if (inContent) {\n return (\n <NavigationMenuPrimitive.Link\n ref={ref}\n className={cn(\n 'flex items-center w-full',\n s.dropdownLink,\n itemRadiusMap[radius],\n 'text-text-muted transition-colors duration-fast',\n 'hover:text-foreground hover:bg-background-muted',\n active && 'text-foreground bg-background-muted font-semibold',\n 'focus-visible:focus-ring',\n className\n )}\n active={active}\n asChild={asChild}\n onSelect={onSelect}\n {...radixSafeProps}\n >\n {asChild ? children : (\n <>\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {children}\n </>\n )}\n </NavigationMenuPrimitive.Link>\n )\n }\n\n // Top-level horizontal links: text only, no hover bg\n return (\n <NavigationMenuPrimitive.Link\n ref={ref}\n className={cn(\n 'inline-flex items-center justify-center',\n s.link,\n fwClass, 'text-text-muted',\n 'transition-colors duration-fast',\n 'hover:text-foreground',\n active && 'text-foreground font-semibold',\n 'focus-visible:focus-ring',\n className\n )}\n active={active}\n asChild={asChild}\n onSelect={onSelect}\n {...radixSafeProps}\n >\n {asChild ? children : (\n <>\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {children}\n </>\n )}\n </NavigationMenuPrimitive.Link>\n )\n }\n\n // ── Vertical mode ──\n\n const Comp = asChild ? Slot : 'a'\n\n // Content-level links (sub-menu items): compact, indented\n if (inContent) {\n return (\n <Comp\n ref={ref}\n className={cn(\n 'flex items-center w-full cursor-pointer',\n contentRadiusMap[radius],\n s.subLink,\n 'text-text-muted transition-colors duration-fast',\n 'hover:text-foreground hover:bg-background-muted',\n active && 'text-foreground bg-background-muted font-semibold',\n 'focus-visible:focus-ring',\n className\n )}\n {...(active ? { 'aria-current': 'page' as const } : {})}\n {...props}\n >\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {!collapsed && children}\n </Comp>\n )\n }\n\n // Top-level vertical links\n return (\n <Comp\n ref={ref}\n className={cn(\n 'relative flex items-center cursor-pointer',\n contentRadiusMap[radius],\n collapsed\n ? [s.collapsedSquare, 'justify-center mx-auto']\n : ['w-full', s.link],\n 'text-text-muted transition-colors duration-fast',\n 'hover:text-foreground hover:bg-background-muted',\n active && 'text-foreground bg-background-muted font-semibold',\n 'focus-visible:focus-ring',\n className\n )}\n {...(active ? { 'aria-current': 'page' as const } : {})}\n {...(collapsed && typeof children === 'string' ? { title: children } : {})}\n {...props}\n >\n {icon && <span className={cn('shrink-0', s.icon)}>{icon}</span>}\n {!collapsed && <span className=\"truncate\">{children}</span>}\n </Comp>\n )\n }\n)\nNavigationMenuLink.displayName = 'NavigationMenuLink'\n\n// ─── NavigationMenuGroup (vertical only) ──────────────────\n\nexport interface NavigationMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Group header label */\n label?: string\n}\n\nconst NavigationMenuGroup = React.forwardRef<HTMLDivElement, NavigationMenuGroupProps>(\n ({ className, label, children, ...props }, ref) => {\n const { size, collapsed } = useNavigationMenuContext()\n const s = navigationMenuSizeMap[size]\n\n const labelId = React.useId()\n const showLabel = Boolean(label) && !collapsed\n\n // Groups sit inside NavigationMenuList's <ul>, so the group is wrapped in an <li> to\n // keep the list structure valid. The spacing class stays on that <li>: it relies on\n // :first-child among the list's children.\n return (\n <li className={cn(showLabel && s.groupMargin)}>\n <div\n ref={ref}\n role=\"group\"\n aria-labelledby={showLabel && !props['aria-label'] ? labelId : undefined}\n className={className}\n {...props}\n >\n {showLabel && (\n <div\n id={labelId}\n className={cn(\n 'font-semibold text-text-subtle uppercase tracking-wider select-none',\n s.groupLabel,\n )}\n >\n {label}\n </div>\n )}\n <ul className=\"flex flex-col gap-0.5\">\n {children}\n </ul>\n </div>\n </li>\n )\n }\n)\nNavigationMenuGroup.displayName = 'NavigationMenuGroup'\n\n// ─── NavigationMenuIndicator ──────────────────────────────\n\nexport interface NavigationMenuIndicatorProps extends React.HTMLAttributes<HTMLDivElement> {\n /** Active indicator dot color (default: dark/foreground, primary: brand color) */\n color?: 'default' | 'primary'\n}\n\nconst NavigationMenuIndicator = React.forwardRef<HTMLDivElement, NavigationMenuIndicatorProps>(\n ({ className, color = 'default', ...props }, ref) => {\n const { orientation } = useNavigationMenuContext()\n\n // Vertical: active indicator is built into NavigationMenuLink styling\n if (orientation === 'vertical') return null\n\n return (\n <NavigationMenuPrimitive.Indicator\n ref={ref}\n className={cn(\n 'z-10 flex h-[3px] items-end justify-center overflow-hidden',\n 'transition-[width,transform] duration-normal ease-out',\n 'data-[state=visible]:animate-fade-in data-[state=hidden]:animate-fade-out',\n className\n )}\n {...props}\n >\n <div className={cn(\n 'relative h-full w-full rounded-full',\n color === 'default' ? 'bg-foreground' : 'bg-primary'\n )} />\n </NavigationMenuPrimitive.Indicator>\n )\n }\n)\nNavigationMenuIndicator.displayName = 'NavigationMenuIndicator'\n\n// ─── NavigationMenuViewport ───────────────────────────────\n\nexport interface NavigationMenuViewportProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst NavigationMenuViewport = React.forwardRef<HTMLDivElement, NavigationMenuViewportProps>(\n ({ className, ...props }, ref) => {\n const { orientation } = useNavigationMenuContext()\n\n // Vertical mode does not use a viewport\n if (orientation === 'vertical') return null\n\n return (\n <div className=\"absolute left-0 top-full z-dropdown w-auto pt-1\">\n <NavigationMenuPrimitive.Viewport\n ref={ref}\n className={cn(\n 'relative overflow-hidden',\n 'border border-border bg-background rounded-xl shadow-lg',\n 'h-[var(--radix-navigation-menu-viewport-height)]',\n 'w-[var(--radix-navigation-menu-viewport-width)]',\n 'transition-[width,height] duration-fast ease-out',\n 'data-[state=open]:animate-nav-viewport-enter',\n 'data-[state=closed]:animate-nav-viewport-exit',\n className\n )}\n {...props}\n />\n </div>\n )\n }\n)\nNavigationMenuViewport.displayName = 'NavigationMenuViewport'\n\n// ─── Exports ──────────────────────────────────────────────\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuTrigger,\n NavigationMenuContent,\n NavigationMenuLink,\n NavigationMenuGroup,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuSizeMap,\n type NavigationMenuRadius,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -4,7 +4,7 @@ import * as React from "react";
|
|
|
4
4
|
import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
|
|
5
5
|
import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
|
|
6
6
|
import { Slot } from "@radix-ui/react-slot";
|
|
7
|
-
import { cn } from "../../lib/utils";
|
|
7
|
+
import { cn } from "../../lib/utils.mjs";
|
|
8
8
|
function ChevronDownIcon({ className }) {
|
|
9
9
|
return /* @__PURE__ */ jsx("svg", { className, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) });
|
|
10
10
|
}
|
|
@@ -174,9 +174,11 @@ const NavigationMenuItem = React.forwardRef(
|
|
|
174
174
|
({ className, value, defaultOpen = false, children, ...props }, ref) => {
|
|
175
175
|
const { orientation, collapsed } = useNavigationMenuContext();
|
|
176
176
|
const [open, setOpen] = React.useState(defaultOpen);
|
|
177
|
-
React.
|
|
177
|
+
const [prevCollapsed, setPrevCollapsed] = React.useState(collapsed);
|
|
178
|
+
if (collapsed !== prevCollapsed) {
|
|
179
|
+
setPrevCollapsed(collapsed);
|
|
178
180
|
if (collapsed) setOpen(false);
|
|
179
|
-
}
|
|
181
|
+
}
|
|
180
182
|
if (orientation === "horizontal") {
|
|
181
183
|
return /* @__PURE__ */ jsx(
|
|
182
184
|
NavigationMenuPrimitive.Item,
|
|
@@ -426,13 +428,32 @@ const NavigationMenuGroup = React.forwardRef(
|
|
|
426
428
|
({ className, label, children, ...props }, ref) => {
|
|
427
429
|
const { size, collapsed } = useNavigationMenuContext();
|
|
428
430
|
const s = navigationMenuSizeMap[size];
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
431
|
+
const labelId = React.useId();
|
|
432
|
+
const showLabel = Boolean(label) && !collapsed;
|
|
433
|
+
return /* @__PURE__ */ jsx("li", { className: cn(showLabel && s.groupMargin), children: /* @__PURE__ */ jsxs(
|
|
434
|
+
"div",
|
|
435
|
+
{
|
|
436
|
+
ref,
|
|
437
|
+
role: "group",
|
|
438
|
+
"aria-labelledby": showLabel && !props["aria-label"] ? labelId : void 0,
|
|
439
|
+
className,
|
|
440
|
+
...props,
|
|
441
|
+
children: [
|
|
442
|
+
showLabel && /* @__PURE__ */ jsx(
|
|
443
|
+
"div",
|
|
444
|
+
{
|
|
445
|
+
id: labelId,
|
|
446
|
+
className: cn(
|
|
447
|
+
"font-semibold text-text-subtle uppercase tracking-wider select-none",
|
|
448
|
+
s.groupLabel
|
|
449
|
+
),
|
|
450
|
+
children: label
|
|
451
|
+
}
|
|
452
|
+
),
|
|
453
|
+
/* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-0.5", children })
|
|
454
|
+
]
|
|
455
|
+
}
|
|
456
|
+
) });
|
|
436
457
|
}
|
|
437
458
|
);
|
|
438
459
|
NavigationMenuGroup.displayName = "NavigationMenuGroup";
|