@oneplatformdev/ui 0.1.99-beta.242 → 0.1.99-beta.245
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/.storybook/Wrappers.js.map +1 -1
- package/Accordion/Accordion.js.map +1 -1
- package/Alert/Alert.js.map +1 -1
- package/Alert/alertVariants.js.map +1 -1
- package/AlertDialog/AlertDialog.js.map +1 -1
- package/AlertDialog/AlertDialog.stories.js +2 -4
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +18 -20
- package/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/AreaChart/AreaChart.js.map +1 -1
- package/Aside/Aside.js.map +1 -1
- package/Aside/AsideSidebar.js.map +1 -1
- package/AspectRatio/AspectRatio.js.map +1 -1
- package/Avatar/Avatar.js.map +1 -1
- package/Badge/Badge.js.map +1 -1
- package/Badge/badgeVariants.js.map +1 -1
- package/Breadcrumb/Breadcrumb.js.map +1 -1
- package/Button/Button.js +10 -11
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.utils.js.map +1 -1
- package/Button/ButtonCounterBadge.js.map +1 -1
- package/Button/buttonVariants.js.map +1 -1
- package/ButtonIcon/ButtonIcon.js +19 -22
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +3241 -3225
- package/Calendar/Calendar.js +4 -6
- package/Calendar/Calendar.js.map +1 -1
- package/Card/Card.js.map +1 -1
- package/Carousel/Carousel.js +6 -7
- package/Carousel/Carousel.js.map +1 -1
- package/Chart/Chart.js.map +1 -1
- package/Checkbox/Checkbox.js +0 -1
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js.map +1 -1
- package/Collapsible/Collapsible.js.map +1 -1
- package/Combobox/Combobox.js +10 -10
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.js.map +1 -1
- package/Combobox/ComboboxOptionItem.js +19 -20
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxRenderContent.js +14 -15
- package/Combobox/ComboboxRenderContent.js.map +1 -1
- package/Combobox/ComboboxRenderOptions.js +5 -5
- package/Combobox/ComboboxRenderOptions.js.map +1 -1
- package/Combobox/ComboboxRenderTrigger.js +28 -30
- package/Combobox/ComboboxRenderTrigger.js.map +1 -1
- package/Command/Command.js +21 -22
- package/Command/Command.js.map +1 -1
- package/ContextPopover/ContextDropdownMenu.js.map +1 -1
- package/ContextPopover/ContextPopover.js.map +1 -1
- package/ContextPopover/useContextPopoverHandler.js.map +1 -1
- package/DataTable/DataTable.js +24 -26
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/DataTableColumnFilter.js +6 -7
- package/DataTable/DataTableColumnFilter.js.map +1 -1
- package/DataTable/useDataTable.js.map +1 -1
- package/DatePicker/DatePicker.js +12 -13
- package/DatePicker/DatePicker.js.map +1 -1
- package/Dialog/Dialog.js +16 -17
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +14 -15
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Dialog/DialogOverlayScope.js.map +1 -1
- package/Drawer/Drawer.js.map +1 -1
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Dropzone/Dropzone.js.map +1 -1
- package/Dropzone/Dropzone.stories.js.map +1 -1
- package/Dropzone/Dropzone.types.js.map +1 -1
- package/Dropzone/DropzoneFilePreview.js.map +1 -1
- package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
- package/Dropzone/DropzoneUtils.js.map +1 -1
- package/Form/Form.js +14 -15
- package/Form/Form.js.map +1 -1
- package/Form/FormRenderControl.js +6 -7
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/Form_old.js +4 -5
- package/Form/Form_old.js.map +1 -1
- package/FormCheckbox/FormCheckbox.js +4 -4
- package/FormCheckbox/FormCheckbox.js.map +1 -1
- package/FormCombobox/FormCombobox.js +4 -4
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormDatePicker/FormDatePicker.js +4 -4
- package/FormDatePicker/FormDatePicker.js.map +1 -1
- package/FormDropzone/FormDropzone.js +3 -3
- package/FormDropzone/FormDropzone.js.map +1 -1
- package/FormInput/FormInput.js +6 -6
- package/FormInput/FormInput.js.map +1 -1
- package/FormInput/FormInput.stories.js +5 -5
- package/FormInput/FormInput.stories.js.map +1 -1
- package/FormRadio/FormRadio.js.map +1 -1
- package/FormSelect/FormSelect.js +6 -9
- package/FormSelect/FormSelect.js.map +1 -1
- package/FormTextarea/FormTextarea.js +4 -4
- package/FormTextarea/FormTextarea.js.map +1 -1
- package/Header/Header.js.map +1 -1
- package/HoverCard/HoverCard.js.map +1 -1
- package/InfoBlock/InfoBlock.js.map +1 -1
- package/InfoBlock/InfoBlock.stories.js.map +1 -1
- package/InfoBlock/infoBlockVariants.js.map +1 -1
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +154 -0
- package/Input/Input.stories.js.map +1 -0
- package/Input/inputVariants.js.map +1 -1
- package/InputOTP/InputOTP.d.ts.map +1 -1
- package/InputOTP/InputOTP.js.map +1 -1
- package/LICENSE +21 -21
- package/Label/Label.js.map +1 -1
- package/Label/labelVariants.js.map +1 -1
- package/LazyLoader/LazyLoader.js +4 -5
- package/LazyLoader/LazyLoader.js.map +1 -1
- package/LoadedIcon/LoadedIcon.js.map +1 -1
- package/LoadingMask/LoadingMask.js.map +1 -1
- package/LoadingMask/RenderLoadingMask.js.map +1 -1
- package/LoadingProgress/LoadingProgress.js.map +1 -1
- package/LoadingProgress/loadingProgressVariants.js.map +1 -1
- package/Menubar/Menubar.js.map +1 -1
- package/NavigationMenu/NavigationMenu.js.map +1 -1
- package/NavigationMenu/navigationMenuVariants.js.map +1 -1
- package/Pagination/Pagination.js +0 -1
- package/Pagination/Pagination.js.map +1 -1
- package/Popover/Popover.js.map +1 -1
- package/Progress/Progress.js.map +1 -1
- package/README.md +7 -7
- package/Radio/Radio.js.map +1 -1
- package/RadioGroup/RadioGroup.js.map +1 -1
- package/Resizable/Resizable.js.map +1 -1
- package/Resizable/Resizable.stories.js.map +1 -1
- package/ScrollArea/ScrollArea.js.map +1 -1
- package/Search/Search.js +9 -9
- package/Search/Search.js.map +1 -1
- package/Search/Search.stories.js.map +1 -1
- package/Select/Select.js +6 -7
- package/Select/Select.js.map +1 -1
- package/Select/Select.stories.js.map +1 -1
- package/Select/SelectRoot.js +5 -5
- package/Select/SelectRoot.js.map +1 -1
- package/Separator/Separator.js.map +1 -1
- package/Sheet/Sheet.js.map +1 -1
- package/Sidebar/Sidebar.js +20 -21
- package/Sidebar/Sidebar.js.map +1 -1
- package/Skeleton/Skeleton.js.map +1 -1
- package/Slider/Slider.js.map +1 -1
- package/Sonner/Sonner.js.map +1 -1
- package/Switch/Switch.js.map +1 -1
- package/Table/Table.js.map +1 -1
- package/TablePagination/TablePagination.js +21 -26
- package/TablePagination/TablePagination.js.map +1 -1
- package/Tabs/Tabs.js.map +1 -1
- package/Tabs/TabsRoot.js.map +1 -1
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.stories.js.map +1 -1
- package/Textarea/useAutosizeTextArea.js.map +1 -1
- package/Theme/ThemeModeToggle.js +3 -4
- package/Theme/ThemeModeToggle.js.map +1 -1
- package/Theme/ThemeProvider.js.map +1 -1
- package/Toast/Toast.js.map +1 -1
- package/Toast/toast.constants.js.map +1 -1
- package/Toast/toastVariants.js.map +1 -1
- package/Toast/useToast.js.map +1 -1
- package/Toaster/Toaster.js.map +1 -1
- package/Toggle/Toggle.js.map +1 -1
- package/ToggleGroup/ToggleGroup.js.map +1 -1
- package/Tooltip/Tooltip.js +4 -4
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/TooltipRoot.js.map +1 -1
- package/Tooltip/tooltipVariants.js.map +1 -1
- package/index.js +286 -286
- package/package.json +4 -4
package/Menubar/Menubar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menubar.js","sources":["../../src/Menubar/Menubar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nconst MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;\nconst MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;\nconst MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;\nconst MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;\nconst MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup = MenubarPrimitive.RadioGroup;\n\nconst Menubar = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\n>(({ className, ...props }, ref) => (\n <MenubarPrimitive.Root\n ref={ref}\n className={cn(\n \"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs\",\n className\n )}\n {...props}\n />\n))\nMenubar.displayName = MenubarPrimitive.Root.displayName\n\nconst MenubarTrigger = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\n>(({ className, ...props }, ref) => (\n <MenubarPrimitive.Trigger\n ref={ref}\n className={cn(\n \"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n className\n )}\n {...props}\n />\n))\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\n\nconst MenubarSubTrigger = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\n inset?: boolean\n }\n>(({ className, inset, children, ...props }, ref) => (\n <MenubarPrimitive.SubTrigger\n ref={ref}\n className={cn(\n \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n >\n {children}\n <ChevronRight className=\"ml-auto h-4 w-4\" />\n </MenubarPrimitive.SubTrigger>\n))\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\n\nconst MenubarSubContent = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.SubContent>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\n>(({ className, ...props }, ref) => (\n <MenubarPrimitive.SubContent\n ref={ref}\n className={cn(\n \"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n))\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\n\nconst MenubarContent = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\n>(\n (\n { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\n ref\n ) => (\n <MenubarPrimitive.Portal>\n <MenubarPrimitive.Content\n ref={ref}\n align={align}\n alignOffset={alignOffset}\n sideOffset={sideOffset}\n className={cn(\n \"z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n </MenubarPrimitive.Portal>\n )\n)\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\n\nconst MenubarItem = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n <MenubarPrimitive.Item\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\n\nconst MenubarCheckboxItem = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\n>(({ className, children, checked, ...props }, ref) => (\n <MenubarPrimitive.CheckboxItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n className\n )}\n checked={checked}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <MenubarPrimitive.ItemIndicator>\n <Check className=\"h-4 w-4\" />\n </MenubarPrimitive.ItemIndicator>\n </span>\n {children}\n </MenubarPrimitive.CheckboxItem>\n))\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\n\nconst MenubarRadioItem = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.RadioItem>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\n>(({ className, children, ...props }, ref) => (\n <MenubarPrimitive.RadioItem\n ref={ref}\n className={cn(\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\n className\n )}\n {...props}\n >\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\n <MenubarPrimitive.ItemIndicator>\n <Circle className=\"h-4 w-4 fill-current\" />\n </MenubarPrimitive.ItemIndicator>\n </span>\n {children}\n </MenubarPrimitive.RadioItem>\n))\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\n\nconst MenubarLabel = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.Label>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\n inset?: boolean\n }\n>(({ className, inset, ...props }, ref) => (\n <MenubarPrimitive.Label\n ref={ref}\n className={cn(\n \"px-2 py-1.5 text-sm font-semibold\",\n inset && \"pl-8\",\n className\n )}\n {...props}\n />\n))\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\n\nconst MenubarSeparator = React.forwardRef<\n React.ElementRef<typeof MenubarPrimitive.Separator>,\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\n>(({ className, ...props }, ref) => (\n <MenubarPrimitive.Separator\n ref={ref}\n className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\n {...props}\n />\n))\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\n\nconst MenubarShortcut = ({\n className,\n ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => {\n return (\n <span\n className={cn(\n \"ml-auto text-xs tracking-widest text-muted-foreground\",\n className\n )}\n {...props}\n />\n )\n}\nMenubarShortcut.displayname = \"MenubarShortcut\"\n\nexport {\n Menubar,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarItem,\n MenubarSeparator,\n MenubarLabel,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarPortal,\n MenubarSubContent,\n MenubarSubTrigger,\n MenubarGroup,\n MenubarSub,\n MenubarShortcut,\n}\n"],"names":["MenubarMenu","MenubarPrimitive","MenubarGroup","MenubarPortal","MenubarSub","MenubarRadioGroup","Menubar","React","className","props","ref","jsx","cn","MenubarTrigger","MenubarSubTrigger","inset","children","jsxs","ChevronRight","MenubarSubContent","MenubarContent","align","alignOffset","sideOffset","MenubarItem","MenubarCheckboxItem","checked","Check","MenubarRadioItem","Circle","MenubarLabel","MenubarSeparator","MenubarShortcut"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Menubar.js","sources":["../../src/Menubar/Menubar.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as MenubarPrimitive from \"@radix-ui/react-menubar\"\r\nimport { Check, ChevronRight, Circle } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nconst MenubarMenu: typeof MenubarPrimitive.Menu = MenubarPrimitive.Menu;\r\nconst MenubarGroup: typeof MenubarPrimitive.Group = MenubarPrimitive.Group;\r\nconst MenubarPortal: typeof MenubarPrimitive.Portal = MenubarPrimitive.Portal;\r\nconst MenubarSub: typeof MenubarPrimitive.Sub = MenubarPrimitive.Sub;\r\nconst MenubarRadioGroup: typeof MenubarPrimitive.RadioGroup = MenubarPrimitive.RadioGroup;\r\n\r\nconst Menubar = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>\r\n>(({ className, ...props }, ref) => (\r\n <MenubarPrimitive.Root\r\n ref={ref}\r\n className={cn(\r\n \"flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-xs\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nMenubar.displayName = MenubarPrimitive.Root.displayName\r\n\r\nconst MenubarTrigger = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.Trigger>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>\r\n>(({ className, ...props }, ref) => (\r\n <MenubarPrimitive.Trigger\r\n ref={ref}\r\n className={cn(\r\n \"flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nMenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName\r\n\r\nconst MenubarSubTrigger = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.SubTrigger>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {\r\n inset?: boolean\r\n }\r\n>(({ className, inset, children, ...props }, ref) => (\r\n <MenubarPrimitive.SubTrigger\r\n ref={ref}\r\n className={cn(\r\n \"flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground\",\r\n inset && \"pl-8\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <ChevronRight className=\"ml-auto h-4 w-4\" />\r\n </MenubarPrimitive.SubTrigger>\r\n))\r\nMenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName\r\n\r\nconst MenubarSubContent = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.SubContent>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>\r\n>(({ className, ...props }, ref) => (\r\n <MenubarPrimitive.SubContent\r\n ref={ref}\r\n className={cn(\r\n \"z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nMenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName\r\n\r\nconst MenubarContent = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>\r\n>(\r\n (\r\n { className, align = \"start\", alignOffset = -4, sideOffset = 8, ...props },\r\n ref\r\n ) => (\r\n <MenubarPrimitive.Portal>\r\n <MenubarPrimitive.Content\r\n ref={ref}\r\n align={align}\r\n alignOffset={alignOffset}\r\n sideOffset={sideOffset}\r\n className={cn(\r\n \"z-50 min-w-48 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </MenubarPrimitive.Portal>\r\n )\r\n)\r\nMenubarContent.displayName = MenubarPrimitive.Content.displayName\r\n\r\nconst MenubarItem = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {\r\n inset?: boolean\r\n }\r\n>(({ className, inset, ...props }, ref) => (\r\n <MenubarPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n inset && \"pl-8\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nMenubarItem.displayName = MenubarPrimitive.Item.displayName\r\n\r\nconst MenubarCheckboxItem = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>\r\n>(({ className, children, checked, ...props }, ref) => (\r\n <MenubarPrimitive.CheckboxItem\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n className\r\n )}\r\n checked={checked}\r\n {...props}\r\n >\r\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n <MenubarPrimitive.ItemIndicator>\r\n <Check className=\"h-4 w-4\" />\r\n </MenubarPrimitive.ItemIndicator>\r\n </span>\r\n {children}\r\n </MenubarPrimitive.CheckboxItem>\r\n))\r\nMenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName\r\n\r\nconst MenubarRadioItem = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.RadioItem>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>\r\n>(({ className, children, ...props }, ref) => (\r\n <MenubarPrimitive.RadioItem\r\n ref={ref}\r\n className={cn(\r\n \"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <span className=\"absolute left-2 flex h-3.5 w-3.5 items-center justify-center\">\r\n <MenubarPrimitive.ItemIndicator>\r\n <Circle className=\"h-4 w-4 fill-current\" />\r\n </MenubarPrimitive.ItemIndicator>\r\n </span>\r\n {children}\r\n </MenubarPrimitive.RadioItem>\r\n))\r\nMenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName\r\n\r\nconst MenubarLabel = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.Label>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {\r\n inset?: boolean\r\n }\r\n>(({ className, inset, ...props }, ref) => (\r\n <MenubarPrimitive.Label\r\n ref={ref}\r\n className={cn(\r\n \"px-2 py-1.5 text-sm font-semibold\",\r\n inset && \"pl-8\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nMenubarLabel.displayName = MenubarPrimitive.Label.displayName\r\n\r\nconst MenubarSeparator = React.forwardRef<\r\n React.ElementRef<typeof MenubarPrimitive.Separator>,\r\n React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>\r\n>(({ className, ...props }, ref) => (\r\n <MenubarPrimitive.Separator\r\n ref={ref}\r\n className={cn(\"-mx-1 my-1 h-px bg-muted\", className)}\r\n {...props}\r\n />\r\n))\r\nMenubarSeparator.displayName = MenubarPrimitive.Separator.displayName\r\n\r\nconst MenubarShortcut = ({\r\n className,\r\n ...props\r\n}: React.HTMLAttributes<HTMLSpanElement>) => {\r\n return (\r\n <span\r\n className={cn(\r\n \"ml-auto text-xs tracking-widest text-muted-foreground\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\nMenubarShortcut.displayname = \"MenubarShortcut\"\r\n\r\nexport {\r\n Menubar,\r\n MenubarMenu,\r\n MenubarTrigger,\r\n MenubarContent,\r\n MenubarItem,\r\n MenubarSeparator,\r\n MenubarLabel,\r\n MenubarCheckboxItem,\r\n MenubarRadioGroup,\r\n MenubarRadioItem,\r\n MenubarPortal,\r\n MenubarSubContent,\r\n MenubarSubTrigger,\r\n MenubarGroup,\r\n MenubarSub,\r\n MenubarShortcut,\r\n}\r\n"],"names":["MenubarMenu","MenubarPrimitive","MenubarGroup","MenubarPortal","MenubarSub","MenubarRadioGroup","Menubar","React","className","props","ref","jsx","cn","MenubarTrigger","MenubarSubTrigger","inset","children","jsxs","ChevronRight","MenubarSubContent","MenubarContent","align","alignOffset","sideOffset","MenubarItem","MenubarCheckboxItem","checked","Check","MenubarRadioItem","Circle","MenubarLabel","MenubarSeparator","MenubarShortcut"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenu.js","sources":["../../src/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import * as React from \"react\"\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\nimport { ChevronDown } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\";\nimport { navigationMenuVariants } from './navigationMenuVariants';\n\nconst NavigationMenu = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\n>(({ className, children, ...props }, ref) => (\n <NavigationMenuPrimitive.Root\n ref={ref}\n className={cn(\n \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\n className\n )}\n {...props}\n >\n {children}\n <NavigationMenuViewport />\n </NavigationMenuPrimitive.Root>\n))\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\n\nconst NavigationMenuList = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.List>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.List\n ref={ref}\n className={cn(\n \"group flex flex-1 list-none items-center justify-center space-x-1\",\n className\n )}\n {...props}\n />\n))\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\n\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\n\nconst NavigationMenuTrigger = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\n>(({ className, children, ...props }, ref) => (\n <NavigationMenuPrimitive.Trigger\n ref={ref}\n className={cn(navigationMenuVariants(), \"group\", className)}\n {...props}\n >\n {children}{\" \"}\n <ChevronDown\n className=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\n aria-hidden=\"true\"\n />\n </NavigationMenuPrimitive.Trigger>\n))\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\n\nconst NavigationMenuContent = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.Content\n ref={ref}\n className={cn(\n \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out 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 md:absolute md:w-auto \",\n className\n )}\n {...props}\n />\n))\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\n\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\n\nconst NavigationMenuViewport = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\n>(({ className, ...props }, ref) => (\n <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\n <NavigationMenuPrimitive.Viewport\n className={cn(\n \"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)\",\n className\n )}\n ref={ref}\n {...props}\n />\n </div>\n))\nNavigationMenuViewport.displayName =\n NavigationMenuPrimitive.Viewport.displayName\n\nconst NavigationMenuIndicator = React.forwardRef<\n React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\n>(({ className, ...props }, ref) => (\n <NavigationMenuPrimitive.Indicator\n ref={ref}\n className={cn(\n \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\n className\n )}\n {...props}\n >\n <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\n </NavigationMenuPrimitive.Indicator>\n))\nNavigationMenuIndicator.displayName =\n NavigationMenuPrimitive.Indicator.displayName\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n}\n"],"names":["NavigationMenu","React","className","children","props","ref","jsxs","NavigationMenuPrimitive","cn","NavigationMenuViewport","NavigationMenuList","jsx","NavigationMenuItem","NavigationMenuTrigger","navigationMenuVariants","ChevronDown","NavigationMenuContent","NavigationMenuLink","NavigationMenuIndicator"],"mappings":";;;;;;AAOA,MAAMA,IAAiBC,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAASC,MACpC,gBAAAC;AAAA,EAACC,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEH,UAAA;AAAA,MAAAD;AAAA,wBACAM,GAAA,CAAA,CAAuB;AAAA,IAAA;AAAA,EAAA;AAC1B,CACD;AACDT,EAAe,cAAcO,EAAwB,KAAK;AAE1D,MAAMG,IAAqBT,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAM;AAAA,EAACJ,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAmB,cAAcH,EAAwB,KAAK;AAE9D,MAAMK,IAAqBL,EAAwB,MAE7CM,IAAwBZ,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAASC,MACpC,gBAAAC;AAAA,EAACC,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGM,KAA0B,SAASZ,CAAS;AAAA,IACzD,GAAGE;AAAA,IAEH,UAAA;AAAA,MAAAD;AAAA,MAAU;AAAA,MACX,gBAAAQ;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAAA,EAAA;AACF,CACD;AACDF,EAAsB,cAAcN,EAAwB,QAAQ;AAEpE,MAAMS,IAAwBf,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAM;AAAA,EAACJ,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDY,EAAsB,cAAcT,EAAwB,QAAQ;AAEpE,MAAMU,IAAqBV,EAAwB,MAE7CE,IAAyBR,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC,MAC1B,gBAAAM,EAAC,OAAA,EAAI,WAAWH,EAAG,8CAA8C,GAC/D,UAAA,gBAAAG;AAAA,EAACJ,EAAwB;AAAA,EAAxB;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAEF,KAAAG;AAAA,IACC,GAAGD;AAAA,EAAA;AACN,GACF,CACD;AACDK,EAAuB,cACrBF,EAAwB,SAAS;AAEnC,MAAMW,IAA0BjB,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAM;AAAA,EAACJ,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEJ,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,yEAAA,CAAyE;AAAA,EAAA;AAC1F,CACD;AACDO,EAAwB,cACtBX,EAAwB,UAAU;"}
|
|
1
|
+
{"version":3,"file":"NavigationMenu.js","sources":["../../src/NavigationMenu/NavigationMenu.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport * as NavigationMenuPrimitive from \"@radix-ui/react-navigation-menu\"\r\nimport { ChevronDown } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\";\r\nimport { navigationMenuVariants } from './navigationMenuVariants';\r\n\r\nconst NavigationMenu = React.forwardRef<\r\n React.ElementRef<typeof NavigationMenuPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>\r\n>(({ className, children, ...props }, ref) => (\r\n <NavigationMenuPrimitive.Root\r\n ref={ref}\r\n className={cn(\r\n \"relative z-10 flex max-w-max flex-1 items-center justify-center\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {children}\r\n <NavigationMenuViewport />\r\n </NavigationMenuPrimitive.Root>\r\n))\r\nNavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName\r\n\r\nconst NavigationMenuList = React.forwardRef<\r\n React.ElementRef<typeof NavigationMenuPrimitive.List>,\r\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>\r\n>(({ className, ...props }, ref) => (\r\n <NavigationMenuPrimitive.List\r\n ref={ref}\r\n className={cn(\r\n \"group flex flex-1 list-none items-center justify-center space-x-1\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nNavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName\r\n\r\nconst NavigationMenuItem = NavigationMenuPrimitive.Item\r\n\r\nconst NavigationMenuTrigger = React.forwardRef<\r\n React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,\r\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>\r\n>(({ className, children, ...props }, ref) => (\r\n <NavigationMenuPrimitive.Trigger\r\n ref={ref}\r\n className={cn(navigationMenuVariants(), \"group\", className)}\r\n {...props}\r\n >\r\n {children}{\" \"}\r\n <ChevronDown\r\n className=\"relative top-px ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180\"\r\n aria-hidden=\"true\"\r\n />\r\n </NavigationMenuPrimitive.Trigger>\r\n))\r\nNavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName\r\n\r\nconst NavigationMenuContent = React.forwardRef<\r\n React.ElementRef<typeof NavigationMenuPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>\r\n>(({ className, ...props }, ref) => (\r\n <NavigationMenuPrimitive.Content\r\n ref={ref}\r\n className={cn(\r\n \"left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out 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 md:absolute md:w-auto \",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nNavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName\r\n\r\nconst NavigationMenuLink = NavigationMenuPrimitive.Link\r\n\r\nconst NavigationMenuViewport = React.forwardRef<\r\n React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,\r\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>\r\n>(({ className, ...props }, ref) => (\r\n <div className={cn(\"absolute left-0 top-full flex justify-center\")}>\r\n <NavigationMenuPrimitive.Viewport\r\n className={cn(\r\n \"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-(--radix-navigation-menu-viewport-width)\",\r\n className\r\n )}\r\n ref={ref}\r\n {...props}\r\n />\r\n </div>\r\n))\r\nNavigationMenuViewport.displayName =\r\n NavigationMenuPrimitive.Viewport.displayName\r\n\r\nconst NavigationMenuIndicator = React.forwardRef<\r\n React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,\r\n React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>\r\n>(({ className, ...props }, ref) => (\r\n <NavigationMenuPrimitive.Indicator\r\n ref={ref}\r\n className={cn(\r\n \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md\" />\r\n </NavigationMenuPrimitive.Indicator>\r\n))\r\nNavigationMenuIndicator.displayName =\r\n NavigationMenuPrimitive.Indicator.displayName\r\n\r\nexport {\r\n NavigationMenu,\r\n NavigationMenuList,\r\n NavigationMenuItem,\r\n NavigationMenuContent,\r\n NavigationMenuTrigger,\r\n NavigationMenuLink,\r\n NavigationMenuIndicator,\r\n NavigationMenuViewport,\r\n}\r\n"],"names":["NavigationMenu","React","className","children","props","ref","jsxs","NavigationMenuPrimitive","cn","NavigationMenuViewport","NavigationMenuList","jsx","NavigationMenuItem","NavigationMenuTrigger","navigationMenuVariants","ChevronDown","NavigationMenuContent","NavigationMenuLink","NavigationMenuIndicator"],"mappings":";;;;;;AAOA,MAAMA,IAAiBC,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAASC,MACpC,gBAAAC;AAAA,EAACC,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEH,UAAA;AAAA,MAAAD;AAAA,wBACAM,GAAA,CAAA,CAAuB;AAAA,IAAA;AAAA,EAAA;AAC1B,CACD;AACDT,EAAe,cAAcO,EAAwB,KAAK;AAE1D,MAAMG,IAAqBT,EAAM,WAG/B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAM;AAAA,EAACJ,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAmB,cAAcH,EAAwB,KAAK;AAE9D,MAAMK,IAAqBL,EAAwB,MAE7CM,IAAwBZ,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,UAAAC,GAAU,GAAGC,KAASC,MACpC,gBAAAC;AAAA,EAACC,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGM,KAA0B,SAASZ,CAAS;AAAA,IACzD,GAAGE;AAAA,IAEH,UAAA;AAAA,MAAAD;AAAA,MAAU;AAAA,MACX,gBAAAQ;AAAA,QAACI;AAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd;AAAA,EAAA;AACF,CACD;AACDF,EAAsB,cAAcN,EAAwB,QAAQ;AAEpE,MAAMS,IAAwBf,EAAM,WAGlC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAM;AAAA,EAACJ,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AACN,CACD;AACDY,EAAsB,cAAcT,EAAwB,QAAQ;AAEpE,MAAMU,IAAqBV,EAAwB,MAE7CE,IAAyBR,EAAM,WAGnC,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC,MAC1B,gBAAAM,EAAC,OAAA,EAAI,WAAWH,EAAG,8CAA8C,GAC/D,UAAA,gBAAAG;AAAA,EAACJ,EAAwB;AAAA,EAAxB;AAAA,IACC,WAAWC;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAEF,KAAAG;AAAA,IACC,GAAGD;AAAA,EAAA;AACN,GACF,CACD;AACDK,EAAuB,cACrBF,EAAwB,SAAS;AAEnC,MAAMW,IAA0BjB,EAAM,WAGpC,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAM;AAAA,EAACJ,EAAwB;AAAA,EAAxB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,IAEJ,UAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,yEAAA,CAAyE;AAAA,EAAA;AAC1F,CACD;AACDO,EAAwB,cACtBX,EAAwB,UAAU;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigationMenuVariants.js","sources":["../../src/NavigationMenu/navigationMenuVariants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const navigationMenuVariants = cva(\n \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50\"\n)\n"],"names":["navigationMenuVariants","cva"],"mappings":";AAEO,MAAMA,IAAyBC;AAAA,EACpC;AACF;"}
|
|
1
|
+
{"version":3,"file":"navigationMenuVariants.js","sources":["../../src/NavigationMenu/navigationMenuVariants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\r\n\r\nexport const navigationMenuVariants = cva(\r\n \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-active:bg-accent/50 data-[state=open]:bg-accent/50\"\r\n)\r\n"],"names":["navigationMenuVariants","cva"],"mappings":";AAEO,MAAMA,IAAyBC;AAAA,EACpC;AACF;"}
|
package/Pagination/Pagination.js
CHANGED
|
@@ -2,7 +2,6 @@ import { jsx as e, jsxs as o } from "react/jsx-runtime";
|
|
|
2
2
|
import * as l from "react";
|
|
3
3
|
import { ChevronLeft as m, ChevronRight as c, MoreHorizontal as p } from "lucide-react";
|
|
4
4
|
import { cn as n } from "@oneplatformdev/utils";
|
|
5
|
-
import "../Button/Button.js";
|
|
6
5
|
import { buttonVariants as g } from "../Button/buttonVariants.js";
|
|
7
6
|
const d = ({ className: i, ...a }) => /* @__PURE__ */ e(
|
|
8
7
|
"nav",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pagination.js","sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\";\nimport { ButtonProps, buttonVariants } from \"../Button\";\n\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\n <nav\n role=\"navigation\"\n aria-label=\"pagination\"\n className={cn(\"mx-auto flex w-full justify-center\", className)}\n {...props}\n />\n)\nPagination.displayName = \"Pagination\"\n\nconst PaginationContent = React.forwardRef<\n HTMLUListElement,\n React.ComponentProps<\"ul\">\n>(({ className, ...props }, ref) => (\n <ul\n ref={ref}\n className={cn(\"flex flex-row items-center gap-1\", className)}\n {...props}\n />\n))\nPaginationContent.displayName = \"PaginationContent\"\n\nconst PaginationItem = React.forwardRef<\n HTMLLIElement,\n React.ComponentProps<\"li\">\n>(({ className, ...props }, ref) => (\n <li ref={ref} className={cn(\"\", className)} {...props} />\n))\nPaginationItem.displayName = \"PaginationItem\"\n\ntype PaginationLinkProps = {\n isActive?: boolean\n} & Pick<ButtonProps, \"size\"> &\n React.ComponentProps<\"a\">\n\nconst PaginationLink = ({\n className,\n isActive,\n size = \"icon\",\n ...props\n}: PaginationLinkProps) => (\n <a\n aria-current={isActive ? \"page\" : undefined}\n className={cn(\n buttonVariants({\n variant: isActive ? \"outline-solid\" : \"ghost\",\n size,\n }),\n className\n )}\n {...props}\n />\n)\nPaginationLink.displayName = \"PaginationLink\"\n\nconst PaginationPrevious = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to previous page\"\n size=\"default\"\n className={cn(\"gap-1 pl-2.5\", className)}\n {...props}\n >\n <ChevronLeft className=\"h-4 w-4\" />\n <span>Previous</span>\n </PaginationLink>\n)\nPaginationPrevious.displayName = \"PaginationPrevious\"\n\nconst PaginationNext = ({\n className,\n ...props\n}: React.ComponentProps<typeof PaginationLink>) => (\n <PaginationLink\n aria-label=\"Go to next page\"\n size=\"default\"\n className={cn(\"gap-1 pr-2.5\", className)}\n {...props}\n >\n <span>Next</span>\n <ChevronRight className=\"h-4 w-4\" />\n </PaginationLink>\n)\nPaginationNext.displayName = \"PaginationNext\"\n\nconst PaginationEllipsis = ({\n className,\n ...props\n}: React.ComponentProps<\"span\">) => (\n <span\n aria-hidden\n className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\n {...props}\n >\n <MoreHorizontal className=\"h-4 w-4\" />\n <span className=\"sr-only\">More pages</span>\n </span>\n)\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\n\nexport {\n Pagination,\n PaginationContent,\n PaginationLink,\n PaginationItem,\n PaginationPrevious,\n PaginationNext,\n PaginationEllipsis,\n}\n"],"names":["Pagination","className","props","jsx","cn","PaginationContent","React","ref","PaginationItem","PaginationLink","isActive","size","buttonVariants","PaginationPrevious","jsxs","ChevronLeft","PaginationNext","ChevronRight","PaginationEllipsis","MoreHorizontal"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Pagination.js","sources":["../../src/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport { ChevronLeft, ChevronRight, MoreHorizontal } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\";\r\nimport { ButtonProps, buttonVariants } from \"../Button\";\r\n\r\nconst Pagination = ({ className, ...props }: React.ComponentProps<\"nav\">) => (\r\n <nav\r\n role=\"navigation\"\r\n aria-label=\"pagination\"\r\n className={cn(\"mx-auto flex w-full justify-center\", className)}\r\n {...props}\r\n />\r\n)\r\nPagination.displayName = \"Pagination\"\r\n\r\nconst PaginationContent = React.forwardRef<\r\n HTMLUListElement,\r\n React.ComponentProps<\"ul\">\r\n>(({ className, ...props }, ref) => (\r\n <ul\r\n ref={ref}\r\n className={cn(\"flex flex-row items-center gap-1\", className)}\r\n {...props}\r\n />\r\n))\r\nPaginationContent.displayName = \"PaginationContent\"\r\n\r\nconst PaginationItem = React.forwardRef<\r\n HTMLLIElement,\r\n React.ComponentProps<\"li\">\r\n>(({ className, ...props }, ref) => (\r\n <li ref={ref} className={cn(\"\", className)} {...props} />\r\n))\r\nPaginationItem.displayName = \"PaginationItem\"\r\n\r\ntype PaginationLinkProps = {\r\n isActive?: boolean\r\n} & Pick<ButtonProps, \"size\"> &\r\n React.ComponentProps<\"a\">\r\n\r\nconst PaginationLink = ({\r\n className,\r\n isActive,\r\n size = \"icon\",\r\n ...props\r\n}: PaginationLinkProps) => (\r\n <a\r\n aria-current={isActive ? \"page\" : undefined}\r\n className={cn(\r\n buttonVariants({\r\n variant: isActive ? \"outline-solid\" : \"ghost\",\r\n size,\r\n }),\r\n className\r\n )}\r\n {...props}\r\n />\r\n)\r\nPaginationLink.displayName = \"PaginationLink\"\r\n\r\nconst PaginationPrevious = ({\r\n className,\r\n ...props\r\n}: React.ComponentProps<typeof PaginationLink>) => (\r\n <PaginationLink\r\n aria-label=\"Go to previous page\"\r\n size=\"default\"\r\n className={cn(\"gap-1 pl-2.5\", className)}\r\n {...props}\r\n >\r\n <ChevronLeft className=\"h-4 w-4\" />\r\n <span>Previous</span>\r\n </PaginationLink>\r\n)\r\nPaginationPrevious.displayName = \"PaginationPrevious\"\r\n\r\nconst PaginationNext = ({\r\n className,\r\n ...props\r\n}: React.ComponentProps<typeof PaginationLink>) => (\r\n <PaginationLink\r\n aria-label=\"Go to next page\"\r\n size=\"default\"\r\n className={cn(\"gap-1 pr-2.5\", className)}\r\n {...props}\r\n >\r\n <span>Next</span>\r\n <ChevronRight className=\"h-4 w-4\" />\r\n </PaginationLink>\r\n)\r\nPaginationNext.displayName = \"PaginationNext\"\r\n\r\nconst PaginationEllipsis = ({\r\n className,\r\n ...props\r\n}: React.ComponentProps<\"span\">) => (\r\n <span\r\n aria-hidden\r\n className={cn(\"flex h-9 w-9 items-center justify-center\", className)}\r\n {...props}\r\n >\r\n <MoreHorizontal className=\"h-4 w-4\" />\r\n <span className=\"sr-only\">More pages</span>\r\n </span>\r\n)\r\nPaginationEllipsis.displayName = \"PaginationEllipsis\"\r\n\r\nexport {\r\n Pagination,\r\n PaginationContent,\r\n PaginationLink,\r\n PaginationItem,\r\n PaginationPrevious,\r\n PaginationNext,\r\n PaginationEllipsis,\r\n}\r\n"],"names":["Pagination","className","props","jsx","cn","PaginationContent","React","ref","PaginationItem","PaginationLink","isActive","size","buttonVariants","PaginationPrevious","jsxs","ChevronLeft","PaginationNext","ChevronRight","PaginationEllipsis","MoreHorizontal"],"mappings":";;;;;AAMA,MAAMA,IAAa,CAAC,EAAE,WAAAC,GAAW,GAAGC,QAClC,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,cAAW;AAAA,IACX,WAAWC,EAAG,sCAAsCH,CAAS;AAAA,IAC5D,GAAGC;AAAA,EAAA;AACN;AAEFF,EAAW,cAAc;AAEzB,MAAMK,IAAoBC,EAAM,WAG9B,CAAC,EAAE,WAAAL,GAAW,GAAGC,EAAA,GAASK,MAC1B,gBAAAJ;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAI;AAAA,IACA,WAAWH,EAAG,oCAAoCH,CAAS;AAAA,IAC1D,GAAGC;AAAA,EAAA;AACN,CACD;AACDG,EAAkB,cAAc;AAEhC,MAAMG,IAAiBF,EAAM,WAG3B,CAAC,EAAE,WAAAL,GAAW,GAAGC,KAASK,wBACzB,MAAA,EAAG,KAAAA,GAAU,WAAWH,EAAG,IAAIH,CAAS,GAAI,GAAGC,GAAO,CACxD;AACDM,EAAe,cAAc;AAO7B,MAAMC,IAAiB,CAAC;AAAA,EACtB,WAAAR;AAAA,EACA,UAAAS;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,GAAGT;AACL,MACE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,gBAAcO,IAAW,SAAS;AAAA,IAClC,WAAWN;AAAA,MACTQ,EAAe;AAAA,QACb,SAASF,IAAW,kBAAkB;AAAA,QACtC,MAAAC;AAAA,MAAA,CACD;AAAA,MACDV;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;AAEFO,EAAe,cAAc;AAE7B,MAAMI,IAAqB,CAAC;AAAA,EAC1B,WAAAZ;AAAA,EACA,GAAGC;AACL,MACE,gBAAAY;AAAA,EAACL;AAAA,EAAA;AAAA,IACC,cAAW;AAAA,IACX,MAAK;AAAA,IACL,WAAWL,EAAG,gBAAgBH,CAAS;AAAA,IACtC,GAAGC;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC,EAACY,GAAA,EAAY,WAAU,UAAA,CAAU;AAAA,MACjC,gBAAAZ,EAAC,UAAK,UAAA,WAAA,CAAQ;AAAA,IAAA;AAAA,EAAA;AAChB;AAEFU,EAAmB,cAAc;AAEjC,MAAMG,IAAiB,CAAC;AAAA,EACtB,WAAAf;AAAA,EACA,GAAGC;AACL,MACE,gBAAAY;AAAA,EAACL;AAAA,EAAA;AAAA,IACC,cAAW;AAAA,IACX,MAAK;AAAA,IACL,WAAWL,EAAG,gBAAgBH,CAAS;AAAA,IACtC,GAAGC;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC,EAAC,UAAK,UAAA,OAAA,CAAI;AAAA,MACV,gBAAAA,EAACc,GAAA,EAAa,WAAU,UAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AACpC;AAEFD,EAAe,cAAc;AAE7B,MAAME,IAAqB,CAAC;AAAA,EAC1B,WAAAjB;AAAA,EACA,GAAGC;AACL,MACE,gBAAAY;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,eAAW;AAAA,IACX,WAAWV,EAAG,4CAA4CH,CAAS;AAAA,IAClE,GAAGC;AAAA,IAEJ,UAAA;AAAA,MAAA,gBAAAC,EAACgB,GAAA,EAAe,WAAU,UAAA,CAAU;AAAA,MACpC,gBAAAhB,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AACtC;AAEFe,EAAmB,cAAc;"}
|
package/Popover/Popover.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Popover({\n ...props\n }: React.ComponentProps<typeof PopoverPrimitive.Root>) {\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\n}\n\nfunction PopoverTrigger({\n ...props\n }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\n}\n\nfunction PopoverContent(props: React.ComponentProps<typeof PopoverPrimitive.Content>) {\n const {\n className,\n align = \"center\",\n sideOffset = 4,\n style,\n ...rest\n } = props;\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n data-slot=\"popover-content\"\n align={align}\n sideOffset={sideOffset}\n {...rest}\n className={cn(\n \"text-popover-foreground\",\n 'w-72 origin-(--radix-popover-content-transform-origin) outline-hidden',\n 'border p-4 bg-popover rounded-lg',\n 'shadow-[1px_1px_10px_rgba(6,8,13,0.06)]',\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50',\n className\n )}\n style={{\n pointerEvents: 'auto',\n ...(style || {}),\n }}\n />\n </PopoverPrimitive.Portal>\n )\n}\n\nfunction PopoverAnchor({\n ...props\n }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\n return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\n}\n\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPrimitive }\n"],"names":["Popover","props","PopoverPrimitive","PopoverTrigger","PopoverContent","className","align","sideOffset","style","rest","jsx","cn","PopoverAnchor"],"mappings":";;;AAOA,SAASA,EAAQ;AAAA,EACE,GAAGC;AACL,GAAuD;AACtE,2BAAQC,EAAiB,MAAjB,EAAsB,aAAU,WAAW,GAAGD,GAAO;AAC/D;AAEA,SAASE,EAAe;AAAA,EACE,GAAGF;AACL,GAA0D;AAChF,2BAAQC,EAAiB,SAAjB,EAAyB,aAAU,mBAAmB,GAAGD,GAAO;AAC1E;AAEA,SAASG,EAAeH,GAA8D;AACpF,QAAM;AAAA,IACJ,WAAAI;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS,EAACR,EAAiB,QAAjB,EACC,UAAA,gBAAAQ;AAAA,IAACR,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,OAAAI;AAAA,MACA,YAAAC;AAAA,MACC,GAAGE;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,eAAe;AAAA,QACf,GAAIG,KAAS,CAAA;AAAA,MAAC;AAAA,IAChB;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASI,EAAc;AAAA,EACE,GAAGX;AACL,GAAyD;AAC9E,2BAAQC,EAAiB,QAAjB,EAAwB,aAAU,kBAAkB,GAAGD,GAAO;AACxE;"}
|
|
1
|
+
{"version":3,"file":"Popover.js","sources":["../../src/Popover/Popover.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as PopoverPrimitive from \"@radix-ui/react-popover\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nfunction Popover({\r\n ...props\r\n }: React.ComponentProps<typeof PopoverPrimitive.Root>) {\r\n return <PopoverPrimitive.Root data-slot=\"popover\" {...props} />\r\n}\r\n\r\nfunction PopoverTrigger({\r\n ...props\r\n }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {\r\n return <PopoverPrimitive.Trigger data-slot=\"popover-trigger\" {...props} />\r\n}\r\n\r\nfunction PopoverContent(props: React.ComponentProps<typeof PopoverPrimitive.Content>) {\r\n const {\r\n className,\r\n align = \"center\",\r\n sideOffset = 4,\r\n style,\r\n ...rest\r\n } = props;\r\n return (\r\n <PopoverPrimitive.Portal>\r\n <PopoverPrimitive.Content\r\n data-slot=\"popover-content\"\r\n align={align}\r\n sideOffset={sideOffset}\r\n {...rest}\r\n className={cn(\r\n \"text-popover-foreground\",\r\n 'w-72 origin-(--radix-popover-content-transform-origin) outline-hidden',\r\n 'border p-4 bg-popover rounded-lg',\r\n 'shadow-[1px_1px_10px_rgba(6,8,13,0.06)]',\r\n 'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50',\r\n className\r\n )}\r\n style={{\r\n pointerEvents: 'auto',\r\n ...(style || {}),\r\n }}\r\n />\r\n </PopoverPrimitive.Portal>\r\n )\r\n}\r\n\r\nfunction PopoverAnchor({\r\n ...props\r\n }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {\r\n return <PopoverPrimitive.Anchor data-slot=\"popover-anchor\" {...props} />\r\n}\r\n\r\nexport { Popover, PopoverTrigger, PopoverContent, PopoverAnchor, PopoverPrimitive }\r\n"],"names":["Popover","props","PopoverPrimitive","PopoverTrigger","PopoverContent","className","align","sideOffset","style","rest","jsx","cn","PopoverAnchor"],"mappings":";;;AAOA,SAASA,EAAQ;AAAA,EACE,GAAGC;AACL,GAAuD;AACtE,2BAAQC,EAAiB,MAAjB,EAAsB,aAAU,WAAW,GAAGD,GAAO;AAC/D;AAEA,SAASE,EAAe;AAAA,EACE,GAAGF;AACL,GAA0D;AAChF,2BAAQC,EAAiB,SAAjB,EAAyB,aAAU,mBAAmB,GAAGD,GAAO;AAC1E;AAEA,SAASG,EAAeH,GAA8D;AACpF,QAAM;AAAA,IACJ,WAAAI;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,YAAAC,IAAa;AAAA,IACb,OAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS,EAACR,EAAiB,QAAjB,EACC,UAAA,gBAAAQ;AAAA,IAACR,EAAiB;AAAA,IAAjB;AAAA,MACC,aAAU;AAAA,MACV,OAAAI;AAAA,MACA,YAAAC;AAAA,MACC,GAAGE;AAAA,MACJ,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAEF,OAAO;AAAA,QACL,eAAe;AAAA,QACf,GAAIG,KAAS,CAAA;AAAA,MAAC;AAAA,IAChB;AAAA,EAAA,GAEJ;AAEJ;AAEA,SAASI,EAAc;AAAA,EACE,GAAGX;AACL,GAAyD;AAC9E,2BAAQC,EAAiB,QAAjB,EAAwB,aAAU,kBAAkB,GAAGD,GAAO;AACxE;"}
|
package/Progress/Progress.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Progress.js","sources":["../../src/Progress/Progress.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Progress(props: React.ComponentProps<typeof ProgressPrimitive.Root>) {\n const { className, value, ...rest } = props;\n return (\n <ProgressPrimitive.Root\n data-slot=\"progress\"\n className={cn(\n \"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\",\n className\n )}\n {...rest}\n >\n <ProgressPrimitive.Indicator\n data-slot=\"progress-indicator\"\n className=\"bg-primary h-full w-full flex-1 transition-all\"\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\n />\n </ProgressPrimitive.Root>\n )\n}\n\nexport { Progress, ProgressPrimitive }\n"],"names":["Progress","props","className","value","rest","jsx","ProgressPrimitive","cn"],"mappings":";;;AAOA,SAASA,EAASC,GAA4D;AAC5E,QAAM,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,MAASH;AACtC,SACE,gBAAAI;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAACC,EAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,eAAe,OAAOH,KAAS,EAAE,KAAA;AAAA,QAAK;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAGN;"}
|
|
1
|
+
{"version":3,"file":"Progress.js","sources":["../../src/Progress/Progress.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as ProgressPrimitive from \"@radix-ui/react-progress\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nfunction Progress(props: React.ComponentProps<typeof ProgressPrimitive.Root>) {\r\n const { className, value, ...rest } = props;\r\n return (\r\n <ProgressPrimitive.Root\r\n data-slot=\"progress\"\r\n className={cn(\r\n \"bg-primary/20 relative h-2 w-full overflow-hidden rounded-full\",\r\n className\r\n )}\r\n {...rest}\r\n >\r\n <ProgressPrimitive.Indicator\r\n data-slot=\"progress-indicator\"\r\n className=\"bg-primary h-full w-full flex-1 transition-all\"\r\n style={{ transform: `translateX(-${100 - (value || 0)}%)` }}\r\n />\r\n </ProgressPrimitive.Root>\r\n )\r\n}\r\n\r\nexport { Progress, ProgressPrimitive }\r\n"],"names":["Progress","props","className","value","rest","jsx","ProgressPrimitive","cn"],"mappings":";;;AAOA,SAASA,EAASC,GAA4D;AAC5E,QAAM,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,MAASH;AACtC,SACE,gBAAAI;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAL;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEJ,UAAA,gBAAAC;AAAA,QAACC,EAAkB;AAAA,QAAlB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,UACV,OAAO,EAAE,WAAW,eAAe,OAAOH,KAAS,EAAE,KAAA;AAAA,QAAK;AAAA,MAAA;AAAA,IAC5D;AAAA,EAAA;AAGN;"}
|
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
# @oneplatformdev/ui
|
|
2
|
-
|
|
3
|
-
This library was generated with [Nx](https://nx.dev).
|
|
4
|
-
|
|
5
|
-
## Running unit tests
|
|
6
|
-
|
|
7
|
-
Run `nx test @oneplatformdev/ui` to execute the unit tests via [Vitest](https://vitest.dev/).
|
|
1
|
+
# @oneplatformdev/ui
|
|
2
|
+
|
|
3
|
+
This library was generated with [Nx](https://nx.dev).
|
|
4
|
+
|
|
5
|
+
## Running unit tests
|
|
6
|
+
|
|
7
|
+
Run `nx test @oneplatformdev/ui` to execute the unit tests via [Vitest](https://vitest.dev/).
|
package/Radio/Radio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Radio.js","sources":["../../src/Radio/Radio.tsx"],"sourcesContent":["import { FC } from 'react';\n\nimport { RadioProps } from './Radio.types';\n\nimport { RadioGroup, RadioGroupLabel } from '../RadioGroup/RadioGroup';\n\nexport const Radio: FC<RadioProps> = (props) => {\n const { options = [], renderOption, ...rest } = props;\n return (\n <RadioGroup {...rest}>\n {options.map((option) => {\n const defaultRender = (\n <RadioGroupLabel key={option.value} {...option} />\n );\n if (!renderOption || typeof renderOption !== 'function') {\n return defaultRender;\n }\n if (!renderOption?.(option, RadioGroupLabel)) return defaultRender;\n return renderOption?.(option, RadioGroupLabel);\n })}\n </RadioGroup>\n );\n};\n"],"names":["Radio","props","options","renderOption","rest","RadioGroup","option","defaultRender","jsx","RadioGroupLabel"],"mappings":";;AAMO,MAAMA,IAAwB,CAACC,MAAU;AAC9C,QAAM,EAAE,SAAAC,IAAU,CAAA,GAAI,cAAAC,GAAc,GAAGC,MAASH;AAChD,2BACGI,GAAA,EAAY,GAAGD,GACb,UAAAF,EAAQ,IAAI,CAACI,MAAW;AACvB,UAAMC,IACJ,gBAAAC,EAACC,GAAA,EAAoC,GAAGH,EAAA,GAAlBA,EAAO,KAAmB;AAKlD,WAHI,CAACH,KAAgB,OAAOA,KAAiB,cAGzC,CAACA,IAAeG,GAAQG,CAAe,IAAUF,IAC9CJ,IAAeG,GAAQG,CAAe;AAAA,EAC/C,CAAC,EAAA,CACH;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"Radio.js","sources":["../../src/Radio/Radio.tsx"],"sourcesContent":["import { FC } from 'react';\r\n\r\nimport { RadioProps } from './Radio.types';\r\n\r\nimport { RadioGroup, RadioGroupLabel } from '../RadioGroup/RadioGroup';\r\n\r\nexport const Radio: FC<RadioProps> = (props) => {\r\n const { options = [], renderOption, ...rest } = props;\r\n return (\r\n <RadioGroup {...rest}>\r\n {options.map((option) => {\r\n const defaultRender = (\r\n <RadioGroupLabel key={option.value} {...option} />\r\n );\r\n if (!renderOption || typeof renderOption !== 'function') {\r\n return defaultRender;\r\n }\r\n if (!renderOption?.(option, RadioGroupLabel)) return defaultRender;\r\n return renderOption?.(option, RadioGroupLabel);\r\n })}\r\n </RadioGroup>\r\n );\r\n};\r\n"],"names":["Radio","props","options","renderOption","rest","RadioGroup","option","defaultRender","jsx","RadioGroupLabel"],"mappings":";;AAMO,MAAMA,IAAwB,CAACC,MAAU;AAC9C,QAAM,EAAE,SAAAC,IAAU,CAAA,GAAI,cAAAC,GAAc,GAAGC,MAASH;AAChD,2BACGI,GAAA,EAAY,GAAGD,GACb,UAAAF,EAAQ,IAAI,CAACI,MAAW;AACvB,UAAMC,IACJ,gBAAAC,EAACC,GAAA,EAAoC,GAAGH,EAAA,GAAlBA,EAAO,KAAmB;AAKlD,WAHI,CAACH,KAAgB,OAAOA,KAAiB,cAGzC,CAACA,IAAeG,GAAQG,CAAe,IAAUF,IAC9CJ,IAAeG,GAAQG,CAAe;AAAA,EAC/C,CAAC,EAAA,CACH;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioGroup.js","sources":["../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { Circle } from 'lucide-react';\nimport * as React from 'react';\nimport { PropsWithChildren } from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\n\nimport { Label } from '../Label/Label';\n\nconst RadioGroup = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\n>(({ className, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Root\n className={cn('grid gap-0', className)}\n {...props}\n ref={ref}\n />\n );\n});\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\n\nconst RadioGroupItem = React.forwardRef<\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\n>(({ className, ...props }, ref) => {\n return (\n <RadioGroupPrimitive.Item\n ref={ref}\n className={cn(\n \"aspect-square size-4 rounded-full border border-primary text-primary shadow-sm focus:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\n className\n )}\n {...props}\n >\n <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center \">\n <Circle className=\"size-2.5 fill-primary\" />\n </RadioGroupPrimitive.Indicator>\n </RadioGroupPrimitive.Item>\n );\n});\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\n\nconst RadioGroupLabel = React.forwardRef<\n HTMLLabelElement,\n PropsWithChildren<{label: React.ReactNode; value: string}>\n>(({ value, label, children }, ref) => {\n return (\n <Label\n ref={ref}\n htmlFor={value}\n className='flex w-full items-start gap-3 font-normal py-3 cursor-pointer'\n >\n <RadioGroupItem value={value} id={value}/>\n <div className='flex flex-col w-full gap-3'>\n <span className='flex flex-col justify-start leading-[16px]'>{label}</span>\n {children}\n </div>\n </Label>\n );\n});\nRadioGroupLabel.displayName = 'RadioGroupLabel';\n\nexport { RadioGroup, RadioGroupItem, RadioGroupLabel };\n"],"names":["RadioGroup","React","className","props","ref","jsx","RadioGroupPrimitive","cn","RadioGroupItem","Circle","RadioGroupLabel","value","label","children","jsxs","Label"],"mappings":";;;;;;AAWA,MAAMA,IAAaC,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAExB,gBAAAC;AAAA,EAACC,EAAoB;AAAA,EAApB;AAAA,IACC,WAAWC,EAAG,cAAcL,CAAS;AAAA,IACpC,GAAGC;AAAA,IACJ,KAAAC;AAAA,EAAA;AAAA,CAGL;AACDJ,EAAW,cAAcM,EAAoB,KAAK;AAElD,MAAME,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAExB,gBAAAC;AAAA,EAACC,EAAoB;AAAA,EAApB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEJ,UAAA,gBAAAE,EAACC,EAAoB,WAApB,EAA8B,WAAU,qCACvC,UAAA,gBAAAD,EAACI,GAAA,EAAO,WAAU,wBAAA,CAAwB,EAAA,CAC5C;AAAA,EAAA;AAAA,CAGL;AACDD,EAAe,cAAcF,EAAoB,KAAK;AAEtD,MAAMI,IAAkBT,EAAM,WAG5B,CAAC,EAAE,OAAAU,GAAO,OAAAC,GAAO,UAAAC,EAAA,GAAYT,MAE3B,gBAAAU;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAX;AAAA,IACA,SAASO;AAAA,IACT,WAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAN,EAACG,GAAA,EAAe,OAAAG,GAAc,IAAIA,EAAA,CAAM;AAAA,MACxC,gBAAAG,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,QAAA,gBAAAT,EAAC,QAAA,EAAK,WAAU,8CAA8C,UAAAO,GAAM;AAAA,QACnEC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAAA,CAGL;AACDH,EAAgB,cAAc;"}
|
|
1
|
+
{"version":3,"file":"RadioGroup.js","sources":["../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["'use client';\r\n\r\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\r\nimport { Circle } from 'lucide-react';\r\nimport * as React from 'react';\r\nimport { PropsWithChildren } from 'react';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nimport { Label } from '../Label/Label';\r\n\r\nconst RadioGroup = React.forwardRef<\r\n React.ElementRef<typeof RadioGroupPrimitive.Root>,\r\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>\r\n>(({ className, ...props }, ref) => {\r\n return (\r\n <RadioGroupPrimitive.Root\r\n className={cn('grid gap-0', className)}\r\n {...props}\r\n ref={ref}\r\n />\r\n );\r\n});\r\nRadioGroup.displayName = RadioGroupPrimitive.Root.displayName;\r\n\r\nconst RadioGroupItem = React.forwardRef<\r\n React.ElementRef<typeof RadioGroupPrimitive.Item>,\r\n React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>\r\n>(({ className, ...props }, ref) => {\r\n return (\r\n <RadioGroupPrimitive.Item\r\n ref={ref}\r\n className={cn(\r\n \"aspect-square size-4 rounded-full border border-primary text-primary shadow-sm focus:outline-hidden focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center \">\r\n <Circle className=\"size-2.5 fill-primary\" />\r\n </RadioGroupPrimitive.Indicator>\r\n </RadioGroupPrimitive.Item>\r\n );\r\n});\r\nRadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;\r\n\r\nconst RadioGroupLabel = React.forwardRef<\r\n HTMLLabelElement,\r\n PropsWithChildren<{label: React.ReactNode; value: string}>\r\n>(({ value, label, children }, ref) => {\r\n return (\r\n <Label\r\n ref={ref}\r\n htmlFor={value}\r\n className='flex w-full items-start gap-3 font-normal py-3 cursor-pointer'\r\n >\r\n <RadioGroupItem value={value} id={value}/>\r\n <div className='flex flex-col w-full gap-3'>\r\n <span className='flex flex-col justify-start leading-[16px]'>{label}</span>\r\n {children}\r\n </div>\r\n </Label>\r\n );\r\n});\r\nRadioGroupLabel.displayName = 'RadioGroupLabel';\r\n\r\nexport { RadioGroup, RadioGroupItem, RadioGroupLabel };\r\n"],"names":["RadioGroup","React","className","props","ref","jsx","RadioGroupPrimitive","cn","RadioGroupItem","Circle","RadioGroupLabel","value","label","children","jsxs","Label"],"mappings":";;;;;;AAWA,MAAMA,IAAaC,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAExB,gBAAAC;AAAA,EAACC,EAAoB;AAAA,EAApB;AAAA,IACC,WAAWC,EAAG,cAAcL,CAAS;AAAA,IACpC,GAAGC;AAAA,IACJ,KAAAC;AAAA,EAAA;AAAA,CAGL;AACDJ,EAAW,cAAcM,EAAoB,KAAK;AAElD,MAAME,IAAiBP,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAExB,gBAAAC;AAAA,EAACC,EAAoB;AAAA,EAApB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG;AAAA,MACT;AAAA,MACAL;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,IAEJ,UAAA,gBAAAE,EAACC,EAAoB,WAApB,EAA8B,WAAU,qCACvC,UAAA,gBAAAD,EAACI,GAAA,EAAO,WAAU,wBAAA,CAAwB,EAAA,CAC5C;AAAA,EAAA;AAAA,CAGL;AACDD,EAAe,cAAcF,EAAoB,KAAK;AAEtD,MAAMI,IAAkBT,EAAM,WAG5B,CAAC,EAAE,OAAAU,GAAO,OAAAC,GAAO,UAAAC,EAAA,GAAYT,MAE3B,gBAAAU;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAX;AAAA,IACA,SAASO;AAAA,IACT,WAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAN,EAACG,GAAA,EAAe,OAAAG,GAAc,IAAIA,EAAA,CAAM;AAAA,MACxC,gBAAAG,EAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,QAAA,gBAAAT,EAAC,QAAA,EAAK,WAAU,8CAA8C,UAAAO,GAAM;AAAA,QACnEC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAAA,CAGL;AACDH,EAAgB,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Resizable.js","sources":["../../src/Resizable/Resizable.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { GripVerticalIcon } from \"lucide-react\"\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction ResizablePanelGroup({\n className,\n ...props\n }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\n return (\n <ResizablePrimitive.PanelGroup\n data-slot=\"resizable-panel-group\"\n className={cn(\n \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\n className\n )}\n {...props}\n />\n )\n}\n\nfunction ResizablePanel({\n ...props\n }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\n}\n\nfunction ResizableHandle(props: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\n withHandle?: boolean\n}) {\n const {\n withHandle,\n className,\n children,\n ...rest\n } = props;\n return (\n <ResizablePrimitive.PanelResizeHandle\n data-slot=\"resizable-handle\"\n className={cn(\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\n className\n )}\n {...rest}\n >\n {children}\n {withHandle && (\n <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\n <GripVerticalIcon className=\"size-2.5\" />\n </div>\n )}\n </ResizablePrimitive.PanelResizeHandle>\n )\n}\n\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle","children","rest","jsxs","GripVerticalIcon"],"mappings":";;;;AAQA,SAASA,EAAoB;AAAA,EACE,WAAAC;AAAA,EACA,GAAGC;AACL,GAA+D;AAC1F,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAe;AAAA,EACE,GAAGJ;AACL,GAA0D;AAChF,2BAAQE,EAAmB,OAAnB,EAAyB,aAAU,mBAAmB,GAAGF,GAAO;AAC1E;AAEA,SAASK,EAAgBL,GAEtB;AACD,QAAM;AAAA,IACJ,YAAAM;AAAA,IACA,WAAAP;AAAA,IACA,UAAAQ;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS;AAAA,IAACP,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGS;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACAD,uBACE,OAAA,EAAI,WAAU,6EACb,UAAA,gBAAAL,EAACS,GAAA,EAAiB,WAAU,WAAA,CAAW,EAAA,CACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
1
|
+
{"version":3,"file":"Resizable.js","sources":["../../src/Resizable/Resizable.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { GripVerticalIcon } from \"lucide-react\"\r\nimport * as ResizablePrimitive from \"react-resizable-panels\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nfunction ResizablePanelGroup({\r\n className,\r\n ...props\r\n }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {\r\n return (\r\n <ResizablePrimitive.PanelGroup\r\n data-slot=\"resizable-panel-group\"\r\n className={cn(\r\n \"flex h-full w-full data-[panel-group-direction=vertical]:flex-col\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n}\r\n\r\nfunction ResizablePanel({\r\n ...props\r\n }: React.ComponentProps<typeof ResizablePrimitive.Panel>) {\r\n return <ResizablePrimitive.Panel data-slot=\"resizable-panel\" {...props} />\r\n}\r\n\r\nfunction ResizableHandle(props: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {\r\n withHandle?: boolean\r\n}) {\r\n const {\r\n withHandle,\r\n className,\r\n children,\r\n ...rest\r\n } = props;\r\n return (\r\n <ResizablePrimitive.PanelResizeHandle\r\n data-slot=\"resizable-handle\"\r\n className={cn(\r\n \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90\",\r\n className\r\n )}\r\n {...rest}\r\n >\r\n {children}\r\n {withHandle && (\r\n <div className=\"bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border\">\r\n <GripVerticalIcon className=\"size-2.5\" />\r\n </div>\r\n )}\r\n </ResizablePrimitive.PanelResizeHandle>\r\n )\r\n}\r\n\r\nexport { ResizablePanelGroup, ResizablePanel, ResizableHandle }\r\n"],"names":["ResizablePanelGroup","className","props","jsx","ResizablePrimitive","cn","ResizablePanel","ResizableHandle","withHandle","children","rest","jsxs","GripVerticalIcon"],"mappings":";;;;AAQA,SAASA,EAAoB;AAAA,EACE,WAAAC;AAAA,EACA,GAAGC;AACL,GAA+D;AAC1F,SACE,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAASI,EAAe;AAAA,EACE,GAAGJ;AACL,GAA0D;AAChF,2BAAQE,EAAmB,OAAnB,EAAyB,aAAU,mBAAmB,GAAGF,GAAO;AAC1E;AAEA,SAASK,EAAgBL,GAEtB;AACD,QAAM;AAAA,IACJ,YAAAM;AAAA,IACA,WAAAP;AAAA,IACA,UAAAQ;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS;AAAA,IAACP,EAAmB;AAAA,IAAnB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGS;AAAA,MAEH,UAAA;AAAA,QAAAD;AAAA,QACAD,uBACE,OAAA,EAAI,WAAU,6EACb,UAAA,gBAAAL,EAACS,GAAA,EAAiB,WAAU,WAAA,CAAW,EAAA,CACzC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Resizable.stories.js","sources":["../../src/Resizable/Resizable.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\"\nimport * as React from \"react\"\n\nimport {\n ResizablePanelGroup,\n ResizablePanel,\n ResizableHandle,\n} from \"./Resizable\"\n\nconst meta: Meta<typeof ResizablePanelGroup> = {\n title: \"ui/Resizable\",\n component: ResizablePanelGroup,\n parameters: {\n layout: \"fullscreen\",\n },\n decorators: [\n (Story) => (\n <div className=\"p-6\">\n <div className=\"h-[420px] w-[920px] overflow-hidden rounded-xl border bg-background shadow-sm\">\n <Story />\n </div>\n </div>\n ),\n ],\n}\nexport default meta\ntype Story = StoryObj<typeof ResizablePanelGroup>\n\nfunction PanelBox({\n label,\n subtle,\n }: {\n label: string\n subtle?: boolean\n}) {\n return (\n <div\n className={[\n \"h-full w-full\",\n \"flex items-center justify-center\",\n \"text-sm font-medium\",\n \"select-none\",\n subtle ? \"bg-muted/30\" : \"bg-muted/50\",\n ].join(\" \")}\n >\n {label}\n </div>\n )\n}\n\n/** 1) Базовий горизонтальний спліт 50/50 */\nexport const HorizontalTwoPanels: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel defaultSize={50}>\n <PanelBox label=\"Left (50%)\" />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={50}>\n <PanelBox label=\"Right (50%)\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 2) Вертикальний спліт 60/40 */\nexport const VerticalTwoPanels: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"vertical\">\n <ResizablePanel defaultSize={60}>\n <PanelBox label=\"Top (60%)\" />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={40}>\n <PanelBox label=\"Bottom (40%)\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 3) Без “grip” (withHandle=false) — тонкий роздільник */\nexport const HandleWithoutGrip: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel defaultSize={35}>\n <PanelBox label=\"Sidebar (35%)\" />\n </ResizablePanel>\n <ResizableHandle />\n <ResizablePanel defaultSize={65}>\n <PanelBox label=\"Content (65%)\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 4) Три панелі рівномірно (33/34/33) */\nexport const ThreePanelsEqual: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel defaultSize={33}>\n <PanelBox label=\"A (33%)\" />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={34}>\n <PanelBox label=\"B (34%)\" subtle />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={33}>\n <PanelBox label=\"C (33%)\" />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 5) Три панелі з “sidebar layout” (20/55/25) */\nexport const ThreePanelsSidebarLayout: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel defaultSize={20} minSize={12}>\n <PanelBox label=\"Nav (20%)\" />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={55} minSize={30}>\n <PanelBox label=\"Main (55%)\" subtle />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={25} minSize={12}>\n <PanelBox label=\"Details (25%)\" />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 6) Обмеження min/max size (наочно “впирається” при ресайзі) */\nexport const MinMaxConstraints: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel defaultSize={30} minSize={20} maxSize={40}>\n <PanelBox label=\"Left (min 20 / max 40)\" />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={70} minSize={60} maxSize={80}>\n <PanelBox label=\"Right (min 60 / max 80)\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 7) Collapsible sidebar (якщо ваш Panel підтримує collapsible/collapsedSize) */\nexport const CollapsibleSidebar: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel\n defaultSize={22}\n minSize={12}\n collapsible\n collapsedSize={4}\n >\n <PanelBox label=\"Sidebar (collapsible)\" />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={78} minSize={50}>\n <PanelBox label=\"Main content\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 8) Disabled handle (якщо Separator/Handle підтримує disabled) */\nexport const DisabledHandle: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel defaultSize={50}>\n <PanelBox label=\"Left (fixed)\" />\n </ResizablePanel>\n <ResizableHandle withHandle disabled />\n <ResizablePanel defaultSize={50}>\n <PanelBox label=\"Right (fixed)\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 9) Nested split: зліва — вертикальний, справа — суцільний */\nexport const NestedResizable: Story = {\n render: () => (\n <ResizablePanelGroup direction=\"horizontal\">\n <ResizablePanel defaultSize={45} minSize={25}>\n <ResizablePanelGroup direction=\"vertical\">\n <ResizablePanel defaultSize={55} minSize={20}>\n <PanelBox label=\"Left / Top\" />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={45} minSize={20}>\n <PanelBox label=\"Left / Bottom\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={55} minSize={30}>\n <PanelBox label=\"Right (single)\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n ),\n}\n\n/** 10) Debug layout: показує поточні розміри (onLayout) */\nexport const LayoutDebug: Story = {\n render: () => {\n const LayoutStory = () => {\n const [layout, setLayout] = React.useState<number[]>([])\n\n return (\n <div className=\"h-full w-full\">\n <div className=\"border-b px-3 py-2 text-xs text-muted-foreground\">\n Layout:{\" \"}\n {layout.length\n ? layout.map((v) => Math.round(v)).join(\" / \")\n : \"— (move handle)\"}\n </div>\n\n <div className=\"h-[calc(100%-33px)]\">\n <ResizablePanelGroup\n direction=\"horizontal\"\n onLayout={(sizes) => setLayout(sizes)}\n >\n <ResizablePanel defaultSize={40} minSize={20}>\n <PanelBox label=\"Left\" />\n </ResizablePanel>\n <ResizableHandle withHandle />\n <ResizablePanel defaultSize={60} minSize={20}>\n <PanelBox label=\"Right\" subtle />\n </ResizablePanel>\n </ResizablePanelGroup>\n </div>\n </div>\n )\n }\n\n return <LayoutStory />\n },\n}\n"],"names":["meta","ResizablePanelGroup","Story","jsx","PanelBox","label","subtle","HorizontalTwoPanels","jsxs","ResizablePanel","ResizableHandle","VerticalTwoPanels","HandleWithoutGrip","ThreePanelsEqual","ThreePanelsSidebarLayout","MinMaxConstraints","CollapsibleSidebar","DisabledHandle","NestedResizable","LayoutDebug","layout","setLayout","React","v","sizes"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Resizable.stories.js","sources":["../../src/Resizable/Resizable.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\"\r\nimport * as React from \"react\"\r\n\r\nimport {\r\n ResizablePanelGroup,\r\n ResizablePanel,\r\n ResizableHandle,\r\n} from \"./Resizable\"\r\n\r\nconst meta: Meta<typeof ResizablePanelGroup> = {\r\n title: \"ui/Resizable\",\r\n component: ResizablePanelGroup,\r\n parameters: {\r\n layout: \"fullscreen\",\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6\">\r\n <div className=\"h-[420px] w-[920px] overflow-hidden rounded-xl border bg-background shadow-sm\">\r\n <Story />\r\n </div>\r\n </div>\r\n ),\r\n ],\r\n}\r\nexport default meta\r\ntype Story = StoryObj<typeof ResizablePanelGroup>\r\n\r\nfunction PanelBox({\r\n label,\r\n subtle,\r\n }: {\r\n label: string\r\n subtle?: boolean\r\n}) {\r\n return (\r\n <div\r\n className={[\r\n \"h-full w-full\",\r\n \"flex items-center justify-center\",\r\n \"text-sm font-medium\",\r\n \"select-none\",\r\n subtle ? \"bg-muted/30\" : \"bg-muted/50\",\r\n ].join(\" \")}\r\n >\r\n {label}\r\n </div>\r\n )\r\n}\r\n\r\n/** 1) Базовий горизонтальний спліт 50/50 */\r\nexport const HorizontalTwoPanels: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"horizontal\">\r\n <ResizablePanel defaultSize={50}>\r\n <PanelBox label=\"Left (50%)\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={50}>\r\n <PanelBox label=\"Right (50%)\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 2) Вертикальний спліт 60/40 */\r\nexport const VerticalTwoPanels: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"vertical\">\r\n <ResizablePanel defaultSize={60}>\r\n <PanelBox label=\"Top (60%)\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={40}>\r\n <PanelBox label=\"Bottom (40%)\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 3) Без “grip” (withHandle=false) — тонкий роздільник */\r\nexport const HandleWithoutGrip: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"horizontal\">\r\n <ResizablePanel defaultSize={35}>\r\n <PanelBox label=\"Sidebar (35%)\" />\r\n </ResizablePanel>\r\n <ResizableHandle />\r\n <ResizablePanel defaultSize={65}>\r\n <PanelBox label=\"Content (65%)\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 4) Три панелі рівномірно (33/34/33) */\r\nexport const ThreePanelsEqual: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"horizontal\">\r\n <ResizablePanel defaultSize={33}>\r\n <PanelBox label=\"A (33%)\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={34}>\r\n <PanelBox label=\"B (34%)\" subtle />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={33}>\r\n <PanelBox label=\"C (33%)\" />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 5) Три панелі з “sidebar layout” (20/55/25) */\r\nexport const ThreePanelsSidebarLayout: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"horizontal\">\r\n <ResizablePanel defaultSize={20} minSize={12}>\r\n <PanelBox label=\"Nav (20%)\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={55} minSize={30}>\r\n <PanelBox label=\"Main (55%)\" subtle />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={25} minSize={12}>\r\n <PanelBox label=\"Details (25%)\" />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 6) Обмеження min/max size (наочно “впирається” при ресайзі) */\r\nexport const MinMaxConstraints: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"horizontal\">\r\n <ResizablePanel defaultSize={30} minSize={20} maxSize={40}>\r\n <PanelBox label=\"Left (min 20 / max 40)\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={70} minSize={60} maxSize={80}>\r\n <PanelBox label=\"Right (min 60 / max 80)\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 7) Collapsible sidebar (якщо ваш Panel підтримує collapsible/collapsedSize) */\r\nexport const CollapsibleSidebar: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"horizontal\">\r\n <ResizablePanel\r\n defaultSize={22}\r\n minSize={12}\r\n collapsible\r\n collapsedSize={4}\r\n >\r\n <PanelBox label=\"Sidebar (collapsible)\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={78} minSize={50}>\r\n <PanelBox label=\"Main content\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 8) Disabled handle (якщо Separator/Handle підтримує disabled) */\r\nexport const DisabledHandle: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"horizontal\">\r\n <ResizablePanel defaultSize={50}>\r\n <PanelBox label=\"Left (fixed)\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle disabled />\r\n <ResizablePanel defaultSize={50}>\r\n <PanelBox label=\"Right (fixed)\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 9) Nested split: зліва — вертикальний, справа — суцільний */\r\nexport const NestedResizable: Story = {\r\n render: () => (\r\n <ResizablePanelGroup direction=\"horizontal\">\r\n <ResizablePanel defaultSize={45} minSize={25}>\r\n <ResizablePanelGroup direction=\"vertical\">\r\n <ResizablePanel defaultSize={55} minSize={20}>\r\n <PanelBox label=\"Left / Top\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={45} minSize={20}>\r\n <PanelBox label=\"Left / Bottom\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={55} minSize={30}>\r\n <PanelBox label=\"Right (single)\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n ),\r\n}\r\n\r\n/** 10) Debug layout: показує поточні розміри (onLayout) */\r\nexport const LayoutDebug: Story = {\r\n render: () => {\r\n const LayoutStory = () => {\r\n const [layout, setLayout] = React.useState<number[]>([])\r\n\r\n return (\r\n <div className=\"h-full w-full\">\r\n <div className=\"border-b px-3 py-2 text-xs text-muted-foreground\">\r\n Layout:{\" \"}\r\n {layout.length\r\n ? layout.map((v) => Math.round(v)).join(\" / \")\r\n : \"— (move handle)\"}\r\n </div>\r\n\r\n <div className=\"h-[calc(100%-33px)]\">\r\n <ResizablePanelGroup\r\n direction=\"horizontal\"\r\n onLayout={(sizes) => setLayout(sizes)}\r\n >\r\n <ResizablePanel defaultSize={40} minSize={20}>\r\n <PanelBox label=\"Left\" />\r\n </ResizablePanel>\r\n <ResizableHandle withHandle />\r\n <ResizablePanel defaultSize={60} minSize={20}>\r\n <PanelBox label=\"Right\" subtle />\r\n </ResizablePanel>\r\n </ResizablePanelGroup>\r\n </div>\r\n </div>\r\n )\r\n }\r\n\r\n return <LayoutStory />\r\n },\r\n}\r\n"],"names":["meta","ResizablePanelGroup","Story","jsx","PanelBox","label","subtle","HorizontalTwoPanels","jsxs","ResizablePanel","ResizableHandle","VerticalTwoPanels","HandleWithoutGrip","ThreePanelsEqual","ThreePanelsSidebarLayout","MinMaxConstraints","CollapsibleSidebar","DisabledHandle","NestedResizable","LayoutDebug","layout","setLayout","React","v","sizes"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction ScrollArea(\n props: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {\n slotProps?: {\n viewport?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>;\n }\n }\n) {\n const {\n className,\n children,\n slotProps,\n ...rest\n } = props;\n return (\n <ScrollAreaPrimitive.Root\n data-slot=\"scroll-area\"\n className={cn(\"relative\", className)}\n {...rest}\n >\n <ScrollAreaPrimitive.Viewport\n {...slotProps?.viewport || {}}\n data-slot=\"scroll-area-viewport\"\n className={cn(\n \"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\",\n slotProps?.viewport?.className\n )}\n >\n {children}\n </ScrollAreaPrimitive.Viewport>\n <ScrollBar />\n <ScrollAreaPrimitive.Corner />\n </ScrollAreaPrimitive.Root>\n )\n}\n\nfunction ScrollBar({\n className,\n orientation = \"vertical\",\n ...props\n }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n return (\n <ScrollAreaPrimitive.ScrollAreaScrollbar\n data-slot=\"scroll-area-scrollbar\"\n orientation={orientation}\n className={cn(\n \"flex touch-none p-px transition-colors select-none\",\n orientation === \"vertical\" &&\n \"h-full w-2.5 border-l border-l-transparent\",\n orientation === \"horizontal\" &&\n \"h-2.5 flex-col border-t border-t-transparent\",\n className\n )}\n {...props}\n >\n <ScrollAreaPrimitive.ScrollAreaThumb\n data-slot=\"scroll-area-thumb\"\n className=\"bg-border relative flex-1 rounded-full\"\n />\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\n )\n}\n\nexport { ScrollArea, ScrollBar, ScrollAreaPrimitive }\n"],"names":["ScrollArea","props","className","children","slotProps","rest","jsxs","ScrollAreaPrimitive","cn","jsx","ScrollBar","orientation"],"mappings":";;;AAOA,SAASA,EACPC,GAKA;AACA,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDJ;AACJ,SACE,gBAAAK;AAAA,IAACC,EAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,YAAYN,CAAS;AAAA,MAClC,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACF,EAAoB;AAAA,UAApB;AAAA,YACE,GAAGH,GAAW,YAAY,CAAA;AAAA,YAC3B,aAAU;AAAA,YACV,WAAWI;AAAA,cACT;AAAA,cACAJ,GAAW,UAAU;AAAA,YAAA;AAAA,YAGtB,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEFO,GAAA,EAAU;AAAA,QACX,gBAAAD,EAACF,EAAoB,QAApB,CAAA,CAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC;AAEA,SAASG,EAAU;AAAA,EACE,WAAAR;AAAA,EACA,aAAAS,IAAc;AAAA,EACd,GAAGV;AACL,GAAyE;AAC1F,SACE,gBAAAQ;AAAA,IAACF,EAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,aAAAI;AAAA,MACA,WAAWH;AAAA,QACT;AAAA,QACAG,MAAgB,cAChB;AAAA,QACAA,MAAgB,gBAChB;AAAA,QACAT;AAAA,MAAA;AAAA,MAED,GAAGD;AAAA,MAEJ,UAAA,gBAAAQ;AAAA,QAACF,EAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;"}
|
|
1
|
+
{"version":3,"file":"ScrollArea.js","sources":["../../src/ScrollArea/ScrollArea.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nfunction ScrollArea(\r\n props: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {\r\n slotProps?: {\r\n viewport?: React.ComponentProps<typeof ScrollAreaPrimitive.Viewport>;\r\n }\r\n }\r\n) {\r\n const {\r\n className,\r\n children,\r\n slotProps,\r\n ...rest\r\n } = props;\r\n return (\r\n <ScrollAreaPrimitive.Root\r\n data-slot=\"scroll-area\"\r\n className={cn(\"relative\", className)}\r\n {...rest}\r\n >\r\n <ScrollAreaPrimitive.Viewport\r\n {...slotProps?.viewport || {}}\r\n data-slot=\"scroll-area-viewport\"\r\n className={cn(\r\n \"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\",\r\n slotProps?.viewport?.className\r\n )}\r\n >\r\n {children}\r\n </ScrollAreaPrimitive.Viewport>\r\n <ScrollBar />\r\n <ScrollAreaPrimitive.Corner />\r\n </ScrollAreaPrimitive.Root>\r\n )\r\n}\r\n\r\nfunction ScrollBar({\r\n className,\r\n orientation = \"vertical\",\r\n ...props\r\n }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\r\n return (\r\n <ScrollAreaPrimitive.ScrollAreaScrollbar\r\n data-slot=\"scroll-area-scrollbar\"\r\n orientation={orientation}\r\n className={cn(\r\n \"flex touch-none p-px transition-colors select-none\",\r\n orientation === \"vertical\" &&\r\n \"h-full w-2.5 border-l border-l-transparent\",\r\n orientation === \"horizontal\" &&\r\n \"h-2.5 flex-col border-t border-t-transparent\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ScrollAreaPrimitive.ScrollAreaThumb\r\n data-slot=\"scroll-area-thumb\"\r\n className=\"bg-border relative flex-1 rounded-full\"\r\n />\r\n </ScrollAreaPrimitive.ScrollAreaScrollbar>\r\n )\r\n}\r\n\r\nexport { ScrollArea, ScrollBar, ScrollAreaPrimitive }\r\n"],"names":["ScrollArea","props","className","children","slotProps","rest","jsxs","ScrollAreaPrimitive","cn","jsx","ScrollBar","orientation"],"mappings":";;;AAOA,SAASA,EACPC,GAKA;AACA,QAAM;AAAA,IACJ,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDJ;AACJ,SACE,gBAAAK;AAAA,IAACC,EAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,WAAWC,EAAG,YAAYN,CAAS;AAAA,MAClC,GAAGG;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACF,EAAoB;AAAA,UAApB;AAAA,YACE,GAAGH,GAAW,YAAY,CAAA;AAAA,YAC3B,aAAU;AAAA,YACV,WAAWI;AAAA,cACT;AAAA,cACAJ,GAAW,UAAU;AAAA,YAAA;AAAA,YAGtB,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,0BAEFO,GAAA,EAAU;AAAA,QACX,gBAAAD,EAACF,EAAoB,QAApB,CAAA,CAA2B;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlC;AAEA,SAASG,EAAU;AAAA,EACE,WAAAR;AAAA,EACA,aAAAS,IAAc;AAAA,EACd,GAAGV;AACL,GAAyE;AAC1F,SACE,gBAAAQ;AAAA,IAACF,EAAoB;AAAA,IAApB;AAAA,MACC,aAAU;AAAA,MACV,aAAAI;AAAA,MACA,WAAWH;AAAA,QACT;AAAA,QACAG,MAAgB,cAChB;AAAA,QACAA,MAAgB,gBAChB;AAAA,QACAT;AAAA,MAAA;AAAA,MAED,GAAGD;AAAA,MAEJ,UAAA,gBAAAQ;AAAA,QAACF,EAAoB;AAAA,QAApB;AAAA,UACC,aAAU;AAAA,UACV,WAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ;AAAA,EAAA;AAGN;"}
|
package/Search/Search.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsx as t } from "react/jsx-runtime";
|
|
2
2
|
import { useState as y, useRef as C, useEffect as k, useCallback as b } from "react";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
3
|
+
import { useDebounceCallback as v, useEventListener as x } from "@oneplatformdev/hooks";
|
|
4
|
+
import { cn as D } from "@oneplatformdev/utils";
|
|
5
|
+
import { SearchIcon as I } from "lucide-react";
|
|
6
|
+
import { Input as K } from "../Input/Input.js";
|
|
7
7
|
import { LoadedIcon as L } from "../LoadedIcon/LoadedIcon.js";
|
|
8
8
|
const z = (s) => {
|
|
9
9
|
const {
|
|
@@ -16,7 +16,7 @@ const z = (s) => {
|
|
|
16
16
|
slotProps: r,
|
|
17
17
|
name: f = "search",
|
|
18
18
|
...p
|
|
19
|
-
} = s, [d, n] = y(o), h =
|
|
19
|
+
} = s, [d, n] = y(o), h = v(l, 1e3), a = C(null), w = (e) => {
|
|
20
20
|
const g = e.target.value;
|
|
21
21
|
n(g), c?.(e), h(e.target.value);
|
|
22
22
|
};
|
|
@@ -26,25 +26,25 @@ const z = (s) => {
|
|
|
26
26
|
const S = b((e) => {
|
|
27
27
|
(e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k" && (e.preventDefault(), a.current?.focus());
|
|
28
28
|
}, []);
|
|
29
|
-
return
|
|
29
|
+
return x(
|
|
30
30
|
"keydown",
|
|
31
31
|
S,
|
|
32
32
|
typeof window < "u" ? window : void 0
|
|
33
33
|
), /* @__PURE__ */ t(
|
|
34
|
-
|
|
34
|
+
K,
|
|
35
35
|
{
|
|
36
36
|
ref: a,
|
|
37
37
|
name: f,
|
|
38
38
|
placeholder: i,
|
|
39
39
|
value: d,
|
|
40
|
-
className:
|
|
40
|
+
className: D("min-w-[340px]", u),
|
|
41
41
|
onChange: w,
|
|
42
42
|
...p,
|
|
43
43
|
...r || {},
|
|
44
44
|
slotProps: {
|
|
45
45
|
...r || {},
|
|
46
46
|
input: {
|
|
47
|
-
startAdornment: /* @__PURE__ */ t(L, { loading: m, children: /* @__PURE__ */ t(
|
|
47
|
+
startAdornment: /* @__PURE__ */ t(L, { loading: m, children: /* @__PURE__ */ t(I, {}) }),
|
|
48
48
|
...r?.input || {}
|
|
49
49
|
}
|
|
50
50
|
}
|
package/Search/Search.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sources":["../../src/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport { ChangeEvent, useEffect, useState, KeyboardEvent, useRef, useCallback } from 'react';\n\nimport { Input } from '../Input';\nimport { SearchProps } from './Search.types';\n\nimport { useDebounceCallback, useEventListener } from '@oneplatformdev/hooks';\nimport { cn } from '@oneplatformdev/utils';\nimport { SearchIcon } from 'lucide-react';\nimport { LoadedIcon } from '../LoadedIcon';\n\nexport const Search = (props: SearchProps) => {\n const {\n search: initialSearch,\n onChange: handleChange,\n onSearch,\n placeholder = 'Search',\n className,\n loading = false,\n slotProps,\n name = 'search',\n ...rest\n } = props;\n const [ search, setSearch ] = useState(initialSearch);\n const debounced = useDebounceCallback(onSearch, 1000);\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n const v = e.target.value;\n setSearch(v);\n handleChange?.(e);\n debounced(e.target.value);\n };\n\n useEffect(() => {\n setSearch(initialSearch ?? '');\n }, [ initialSearch ]);\n\n const handleKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\n if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\n event.preventDefault();\n inputRef.current?.focus();\n }\n }, []);\n\n useEventListener(\n 'keydown',\n handleKeyDown,\n typeof window !== 'undefined' ? window : undefined\n );\n\n return (\n <Input\n ref={inputRef}\n name={name}\n placeholder={placeholder}\n value={search}\n className={cn('min-w-[340px]', className)}\n onChange={onChange}\n {...rest}\n {...(slotProps || {})}\n slotProps={{\n ...(slotProps || {}),\n input: {\n startAdornment: (\n <LoadedIcon loading={loading}>\n <SearchIcon/>\n </LoadedIcon>\n ),\n ...(slotProps?.input || {}),\n },\n }}\n />\n );\n};\n"],"names":["Search","props","initialSearch","handleChange","onSearch","placeholder","className","loading","slotProps","name","rest","search","setSearch","useState","debounced","useDebounceCallback","inputRef","useRef","onChange","v","useEffect","handleKeyDown","useCallback","event","useEventListener","jsx","Input","cn","LoadedIcon","SearchIcon"],"mappings":";;;;;;;AAYO,MAAMA,IAAS,CAACC,MAAuB;AAC5C,QAAM;AAAA,IACJ,QAAQC;AAAA,IACR,UAAUC;AAAA,IACV,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,IACDT,GACE,CAAEU,GAAQC,CAAU,IAAIC,EAASX,CAAa,GAC9CY,IAAYC,EAAoBX,GAAU,GAAI,GAE9CY,IAAWC,EAAyB,IAAI,GAExCC,IAAW,CAAC,MAAqC;AACrD,UAAMC,IAAI,EAAE,OAAO;AACnB,IAAAP,EAAUO,CAAC,GACXhB,IAAe,CAAC,GAChBW,EAAU,EAAE,OAAO,KAAK;AAAA,EAC1B;AAEA,EAAAM,EAAU,MAAM;AACd,IAAAR,EAAUV,KAAiB,EAAE;AAAA,EAC/B,GAAG,CAAEA,CAAc,CAAC;AAEpB,QAAMmB,IAAgBC,EAAY,CAACC,MAA2C;AAC5E,KAAKA,EAAM,WAAWA,EAAM,YAAYA,EAAM,IAAI,YAAA,MAAkB,QAClEA,EAAM,eAAA,GACNP,EAAS,SAAS,MAAA;AAAA,EAEtB,GAAG,CAAA,CAAE;AAEL,SAAAQ;AAAA,IACE;AAAA,IACAH;AAAA,IACA,OAAO,SAAW,MAAc,SAAS;AAAA,EAAA,GAIzC,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKV;AAAA,MACL,MAAAP;AAAA,MACA,aAAAJ;AAAA,MACA,OAAOM;AAAA,MACP,WAAWgB,EAAG,iBAAiBrB,CAAS;AAAA,MACxC,UAAAY;AAAA,MACC,GAAGR;AAAA,MACH,GAAIF,KAAa,CAAA;AAAA,MAClB,WAAW;AAAA,QACT,GAAIA,KAAa,CAAA;AAAA,QACjB,OAAO;AAAA,UACL,gBACE,gBAAAiB,EAACG,GAAA,EAAW,SAAArB,GACV,UAAA,gBAAAkB,EAACI,KAAU,GACb;AAAA,UAEF,GAAIrB,GAAW,SAAS,CAAA;AAAA,QAAC;AAAA,MAC3B;AAAA,IACF;AAAA,EAAA;AAGN;"}
|
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../src/Search/Search.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { ChangeEvent, useEffect, useState, KeyboardEvent, useRef, useCallback } from 'react';\r\n\r\nimport { Input } from '../Input';\r\nimport { SearchProps } from './Search.types';\r\n\r\nimport { useDebounceCallback, useEventListener } from '@oneplatformdev/hooks';\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { SearchIcon } from 'lucide-react';\r\nimport { LoadedIcon } from '../LoadedIcon';\r\n\r\nexport const Search = (props: SearchProps) => {\r\n const {\r\n search: initialSearch,\r\n onChange: handleChange,\r\n onSearch,\r\n placeholder = 'Search',\r\n className,\r\n loading = false,\r\n slotProps,\r\n name = 'search',\r\n ...rest\r\n } = props;\r\n const [ search, setSearch ] = useState(initialSearch);\r\n const debounced = useDebounceCallback(onSearch, 1000);\r\n\r\n const inputRef = useRef<HTMLInputElement>(null);\r\n\r\n const onChange = (e: ChangeEvent<HTMLInputElement>) => {\r\n const v = e.target.value;\r\n setSearch(v);\r\n handleChange?.(e);\r\n debounced(e.target.value);\r\n };\r\n\r\n useEffect(() => {\r\n setSearch(initialSearch ?? '');\r\n }, [ initialSearch ]);\r\n\r\n const handleKeyDown = useCallback((event: KeyboardEvent<HTMLInputElement>) => {\r\n if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {\r\n event.preventDefault();\r\n inputRef.current?.focus();\r\n }\r\n }, []);\r\n\r\n useEventListener(\r\n 'keydown',\r\n handleKeyDown,\r\n typeof window !== 'undefined' ? window : undefined\r\n );\r\n\r\n return (\r\n <Input\r\n ref={inputRef}\r\n name={name}\r\n placeholder={placeholder}\r\n value={search}\r\n className={cn('min-w-[340px]', className)}\r\n onChange={onChange}\r\n {...rest}\r\n {...(slotProps || {})}\r\n slotProps={{\r\n ...(slotProps || {}),\r\n input: {\r\n startAdornment: (\r\n <LoadedIcon loading={loading}>\r\n <SearchIcon/>\r\n </LoadedIcon>\r\n ),\r\n ...(slotProps?.input || {}),\r\n },\r\n }}\r\n />\r\n );\r\n};\r\n"],"names":["Search","props","initialSearch","handleChange","onSearch","placeholder","className","loading","slotProps","name","rest","search","setSearch","useState","debounced","useDebounceCallback","inputRef","useRef","onChange","v","useEffect","handleKeyDown","useCallback","event","useEventListener","jsx","Input","cn","LoadedIcon","SearchIcon"],"mappings":";;;;;;;AAYO,MAAMA,IAAS,CAACC,MAAuB;AAC5C,QAAM;AAAA,IACJ,QAAQC;AAAA,IACR,UAAUC;AAAA,IACV,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,IACDT,GACE,CAAEU,GAAQC,CAAU,IAAIC,EAASX,CAAa,GAC9CY,IAAYC,EAAoBX,GAAU,GAAI,GAE9CY,IAAWC,EAAyB,IAAI,GAExCC,IAAW,CAAC,MAAqC;AACrD,UAAMC,IAAI,EAAE,OAAO;AACnB,IAAAP,EAAUO,CAAC,GACXhB,IAAe,CAAC,GAChBW,EAAU,EAAE,OAAO,KAAK;AAAA,EAC1B;AAEA,EAAAM,EAAU,MAAM;AACd,IAAAR,EAAUV,KAAiB,EAAE;AAAA,EAC/B,GAAG,CAAEA,CAAc,CAAC;AAEpB,QAAMmB,IAAgBC,EAAY,CAACC,MAA2C;AAC5E,KAAKA,EAAM,WAAWA,EAAM,YAAYA,EAAM,IAAI,YAAA,MAAkB,QAClEA,EAAM,eAAA,GACNP,EAAS,SAAS,MAAA;AAAA,EAEtB,GAAG,CAAA,CAAE;AAEL,SAAAQ;AAAA,IACE;AAAA,IACAH;AAAA,IACA,OAAO,SAAW,MAAc,SAAS;AAAA,EAAA,GAIzC,gBAAAI;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAKV;AAAA,MACL,MAAAP;AAAA,MACA,aAAAJ;AAAA,MACA,OAAOM;AAAA,MACP,WAAWgB,EAAG,iBAAiBrB,CAAS;AAAA,MACxC,UAAAY;AAAA,MACC,GAAGR;AAAA,MACH,GAAIF,KAAa,CAAA;AAAA,MAClB,WAAW;AAAA,QACT,GAAIA,KAAa,CAAA;AAAA,QACjB,OAAO;AAAA,UACL,gBACE,gBAAAiB,EAACG,GAAA,EAAW,SAAArB,GACV,UAAA,gBAAAkB,EAACI,KAAU,GACb;AAAA,UAEF,GAAIrB,GAAW,SAAS,CAAA;AAAA,QAAC;AAAA,MAC3B;AAAA,IACF;AAAA,EAAA;AAGN;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.stories.js","sources":["../../src/Search/Search.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Search } from './Search';\n\nconst meta = {\n title: 'Input/Search',\n component: Search,\n} satisfies Meta<typeof Search>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {\n slotProps: {},\n search: \"search\",\n onSearch: () => {}\n }\n};\n"],"names":["meta","Search","Default"],"mappings":";AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AACb,GAMaC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,WAAW,CAAA;AAAA,IACX,QAAQ;AAAA,IACR,UAAU,MAAM;AAAA,IAAC;AAAA,EAAA;AAErB;"}
|
|
1
|
+
{"version":3,"file":"Search.stories.js","sources":["../../src/Search/Search.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\r\n\r\nimport { Search } from './Search';\r\n\r\nconst meta = {\r\n title: 'Input/Search',\r\n component: Search,\r\n} satisfies Meta<typeof Search>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n args: {\r\n slotProps: {},\r\n search: \"search\",\r\n onSearch: () => {}\r\n }\r\n};\r\n"],"names":["meta","Search","Default"],"mappings":";AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AACb,GAMaC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,WAAW,CAAA;AAAA,IACX,QAAQ;AAAA,IACR,UAAU,MAAM;AAAA,IAAC;AAAA,EAAA;AAErB;"}
|
package/Select/Select.js
CHANGED
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import { jsxs as u, jsx as o, Fragment as y } from "react/jsx-runtime";
|
|
2
2
|
import { useMemo as S, createElement as p } from "react";
|
|
3
|
-
import {
|
|
4
|
-
import "../Button/buttonVariants.js";
|
|
3
|
+
import { cn as v } from "@oneplatformdev/utils";
|
|
5
4
|
import { SelectRoot as b, SelectContent as C, SelectTrigger as O, SelectValue as N, SelectItem as P } from "./SelectRoot.js";
|
|
6
|
-
import {
|
|
5
|
+
import { Button as R } from "../Button/Button.js";
|
|
7
6
|
const k = (e) => {
|
|
8
7
|
const { placeholder: n, renderTrigger: t, slotProps: l } = e, r = /* @__PURE__ */ o(O, { ...l?.triggerProps || {}, children: /* @__PURE__ */ o(N, { placeholder: n }) });
|
|
9
8
|
return t && typeof t == "function" ? t(e, r) : r;
|
|
@@ -14,7 +13,7 @@ const k = (e) => {
|
|
|
14
13
|
{
|
|
15
14
|
value: l.value ?? "",
|
|
16
15
|
disabled: l.disabled,
|
|
17
|
-
className:
|
|
16
|
+
className: v("cursor-pointer", c),
|
|
18
17
|
style: { paddingLeft: `calc(8px + ${(r || 0) * 8}px)`, ...a || {} },
|
|
19
18
|
children: [
|
|
20
19
|
n,
|
|
@@ -53,7 +52,7 @@ const k = (e) => {
|
|
|
53
52
|
},
|
|
54
53
|
t.value
|
|
55
54
|
) : /* @__PURE__ */ o(s, { ...e }) : /* @__PURE__ */ o(s, { ...e });
|
|
56
|
-
},
|
|
55
|
+
}, w = (e) => {
|
|
57
56
|
const {
|
|
58
57
|
value: n,
|
|
59
58
|
options: t = [],
|
|
@@ -72,7 +71,7 @@ const k = (e) => {
|
|
|
72
71
|
/* @__PURE__ */ o(k, { ...e }),
|
|
73
72
|
/* @__PURE__ */ u(C, { ...m?.selectProps || {}, children: [
|
|
74
73
|
a && /* @__PURE__ */ o(
|
|
75
|
-
|
|
74
|
+
R,
|
|
76
75
|
{
|
|
77
76
|
className: "w-full px-2",
|
|
78
77
|
color: "secondary",
|
|
@@ -97,6 +96,6 @@ const k = (e) => {
|
|
|
97
96
|
] });
|
|
98
97
|
};
|
|
99
98
|
export {
|
|
100
|
-
|
|
99
|
+
w as Select
|
|
101
100
|
};
|
|
102
101
|
//# sourceMappingURL=Select.js.map
|
package/Select/Select.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.js","sources":["../../src/Select/Select.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useMemo } from 'react';\n\nimport { Button } from '../Button';\nimport {\n SelectContent,\n SelectItem,\n SelectOption,\n SelectProps,\n SelectRoot,\n SelectTrigger,\n SelectValue,\n} from '../Select';\nimport { cn } from '@oneplatformdev/utils';\n\nconst RenderSelectTrigger = <ExtendOptionData, >(\n props: SelectProps<ExtendOptionData>\n) => {\n const { placeholder, renderTrigger, slotProps } = props;\n const defaultComponent = (\n <SelectTrigger {...(slotProps?.triggerProps || {})}>\n <SelectValue placeholder={placeholder}/>\n </SelectTrigger>\n );\n\n if (Boolean(renderTrigger) && typeof renderTrigger === 'function') {\n return renderTrigger(props, defaultComponent);\n }\n\n return defaultComponent;\n};\n\nconst DefaultRenderSelectOption = <ExtendOptionData, >(\n props: SelectProps<ExtendOptionData> & {\n option: SelectOption<ExtendOptionData>;\n index: number;\n deep?: number;\n child?: ((params: SelectProps<ExtendOptionData> & {\n option: SelectOption<ExtendOptionData>;\n index: number;\n }) => ReactNode) | ReactNode;\n } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>\n) => {\n const { children, child, option, deep = 0, className, style = {} } = props;\n\n return (\n <SelectItem\n key={option.value}\n value={option.value ?? ''}\n disabled={option.disabled}\n className={cn('cursor-pointer', className)}\n style={{ paddingLeft: `calc(8px + ${(deep || 0) * 8}px)`, ...(style || {}) }}\n >\n {children}\n {!child && option.label}\n {child && (\n <>\n {typeof child === 'function'\n ? child({ ...props })\n : child\n }\n </>\n )}\n </SelectItem>\n )\n};\n\nconst RenderSelectOption = <ExtendOptionData, >(\n props: SelectProps<ExtendOptionData> & {\n option: SelectOption<ExtendOptionData>;\n index: number;\n deep?: number;\n }\n) => {\n const { renderOption, option, index, options, deep = 0, ...rest } = props;\n if (!renderOption) return <DefaultRenderSelectOption {...props} />;\n if (renderOption && typeof renderOption !== 'function') return <DefaultRenderSelectOption {...props} />;\n if (renderOption && typeof renderOption === 'function') return renderOption(\n option,\n index,\n options,\n { ...rest, options },\n <DefaultRenderSelectOption {...props} />\n )\n\n if (!option.children?.length) {\n return <DefaultRenderSelectOption {...props} />;\n }\n\n return (\n <div\n key={option.value}\n className=\"flex flex-col gap-1 truncate line-clamp-2\"\n >\n <DefaultRenderSelectOption {...props} />\n {option.children?.map((child, idx, arr) => (\n <RenderSelectOption\n {...props}\n key={child.value}\n option={child}\n options={arr}\n index={idx}\n deep={(deep || 0) + 1}\n />\n ))}\n </div>\n )\n};\n\n// TODO: add description\nexport const Select = <ExtendOptionData, >(\n props: SelectProps<ExtendOptionData>\n) => {\n const {\n value,\n options: initialOptions = [],\n filterOption,\n filterOptions,\n onChange,\n nullable = false,\n clearLabel = 'Clear',\n disabled,\n slotProps,\n } = props;\n\n const options = useMemo(() => {\n let opt = initialOptions;\n if(filterOption) opt = opt.filter(filterOption);\n if(filterOptions) opt = filterOptions(opt);\n return opt;\n }, [ initialOptions, filterOptions ]);\n\n return (\n <SelectRoot value={value} onValueChange={onChange} disabled={disabled}>\n <RenderSelectTrigger {...props} />\n <SelectContent {...(slotProps?.selectProps || {})}>\n {nullable && (\n <Button\n className=\"w-full px-2\"\n color=\"secondary\"\n size=\"sm\"\n onClick={() => {\n onChange?.('');\n }}\n >\n {clearLabel}\n </Button>\n )}\n {options.map((option, index) => (\n <RenderSelectOption\n {...props}\n key={option.value}\n option={option}\n index={index}\n deep={0}\n />\n ))}\n </SelectContent>\n </SelectRoot>\n );\n};\n"],"names":["RenderSelectTrigger","props","placeholder","renderTrigger","slotProps","defaultComponent","jsx","SelectTrigger","SelectValue","DefaultRenderSelectOption","children","child","option","deep","className","style","jsxs","SelectItem","cn","Fragment","RenderSelectOption","renderOption","index","options","rest","idx","arr","createElement","Select","value","initialOptions","filterOption","filterOptions","onChange","nullable","clearLabel","disabled","useMemo","opt","SelectRoot","SelectContent","Button"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Select.js","sources":["../../src/Select/Select.tsx"],"sourcesContent":["import { HTMLAttributes, ReactNode, useMemo } from 'react';\r\n\r\nimport { Button } from '../Button';\r\nimport {\r\n SelectContent,\r\n SelectItem,\r\n SelectOption,\r\n SelectProps,\r\n SelectRoot,\r\n SelectTrigger,\r\n SelectValue,\r\n} from '../Select';\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nconst RenderSelectTrigger = <ExtendOptionData, >(\r\n props: SelectProps<ExtendOptionData>\r\n) => {\r\n const { placeholder, renderTrigger, slotProps } = props;\r\n const defaultComponent = (\r\n <SelectTrigger {...(slotProps?.triggerProps || {})}>\r\n <SelectValue placeholder={placeholder}/>\r\n </SelectTrigger>\r\n );\r\n\r\n if (Boolean(renderTrigger) && typeof renderTrigger === 'function') {\r\n return renderTrigger(props, defaultComponent);\r\n }\r\n\r\n return defaultComponent;\r\n};\r\n\r\nconst DefaultRenderSelectOption = <ExtendOptionData, >(\r\n props: SelectProps<ExtendOptionData> & {\r\n option: SelectOption<ExtendOptionData>;\r\n index: number;\r\n deep?: number;\r\n child?: ((params: SelectProps<ExtendOptionData> & {\r\n option: SelectOption<ExtendOptionData>;\r\n index: number;\r\n }) => ReactNode) | ReactNode;\r\n } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>\r\n) => {\r\n const { children, child, option, deep = 0, className, style = {} } = props;\r\n\r\n return (\r\n <SelectItem\r\n key={option.value}\r\n value={option.value ?? ''}\r\n disabled={option.disabled}\r\n className={cn('cursor-pointer', className)}\r\n style={{ paddingLeft: `calc(8px + ${(deep || 0) * 8}px)`, ...(style || {}) }}\r\n >\r\n {children}\r\n {!child && option.label}\r\n {child && (\r\n <>\r\n {typeof child === 'function'\r\n ? child({ ...props })\r\n : child\r\n }\r\n </>\r\n )}\r\n </SelectItem>\r\n )\r\n};\r\n\r\nconst RenderSelectOption = <ExtendOptionData, >(\r\n props: SelectProps<ExtendOptionData> & {\r\n option: SelectOption<ExtendOptionData>;\r\n index: number;\r\n deep?: number;\r\n }\r\n) => {\r\n const { renderOption, option, index, options, deep = 0, ...rest } = props;\r\n if (!renderOption) return <DefaultRenderSelectOption {...props} />;\r\n if (renderOption && typeof renderOption !== 'function') return <DefaultRenderSelectOption {...props} />;\r\n if (renderOption && typeof renderOption === 'function') return renderOption(\r\n option,\r\n index,\r\n options,\r\n { ...rest, options },\r\n <DefaultRenderSelectOption {...props} />\r\n )\r\n\r\n if (!option.children?.length) {\r\n return <DefaultRenderSelectOption {...props} />;\r\n }\r\n\r\n return (\r\n <div\r\n key={option.value}\r\n className=\"flex flex-col gap-1 truncate line-clamp-2\"\r\n >\r\n <DefaultRenderSelectOption {...props} />\r\n {option.children?.map((child, idx, arr) => (\r\n <RenderSelectOption\r\n {...props}\r\n key={child.value}\r\n option={child}\r\n options={arr}\r\n index={idx}\r\n deep={(deep || 0) + 1}\r\n />\r\n ))}\r\n </div>\r\n )\r\n};\r\n\r\n// TODO: add description\r\nexport const Select = <ExtendOptionData, >(\r\n props: SelectProps<ExtendOptionData>\r\n) => {\r\n const {\r\n value,\r\n options: initialOptions = [],\r\n filterOption,\r\n filterOptions,\r\n onChange,\r\n nullable = false,\r\n clearLabel = 'Clear',\r\n disabled,\r\n slotProps,\r\n } = props;\r\n\r\n const options = useMemo(() => {\r\n let opt = initialOptions;\r\n if(filterOption) opt = opt.filter(filterOption);\r\n if(filterOptions) opt = filterOptions(opt);\r\n return opt;\r\n }, [ initialOptions, filterOptions ]);\r\n\r\n return (\r\n <SelectRoot value={value} onValueChange={onChange} disabled={disabled}>\r\n <RenderSelectTrigger {...props} />\r\n <SelectContent {...(slotProps?.selectProps || {})}>\r\n {nullable && (\r\n <Button\r\n className=\"w-full px-2\"\r\n color=\"secondary\"\r\n size=\"sm\"\r\n onClick={() => {\r\n onChange?.('');\r\n }}\r\n >\r\n {clearLabel}\r\n </Button>\r\n )}\r\n {options.map((option, index) => (\r\n <RenderSelectOption\r\n {...props}\r\n key={option.value}\r\n option={option}\r\n index={index}\r\n deep={0}\r\n />\r\n ))}\r\n </SelectContent>\r\n </SelectRoot>\r\n );\r\n};\r\n"],"names":["RenderSelectTrigger","props","placeholder","renderTrigger","slotProps","defaultComponent","jsx","SelectTrigger","SelectValue","DefaultRenderSelectOption","children","child","option","deep","className","style","jsxs","SelectItem","cn","Fragment","RenderSelectOption","renderOption","index","options","rest","idx","arr","createElement","Select","value","initialOptions","filterOption","filterOptions","onChange","nullable","clearLabel","disabled","useMemo","opt","SelectRoot","SelectContent","Button"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Select.stories.js","sources":["../../src/Select/Select.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport { Select } from './Select';\n\nconst meta: Meta<typeof Select> = {\n title: 'Select',\n component: Select,\n argTypes: {\n value: { control: 'text' },\n options: { control: 'object' },\n onChange: { action: 'changed' },\n nullable: { control: 'boolean' },\n clearLabel: { control: 'text' },\n disabled: { control: 'boolean' },\n },\n args: {\n value: '',\n options: [\n { value: 'option-0', label: 'Option 0' },\n { value: 'option-1', label: 'Option 1' },\n { value: 'option-2', label: 'Option 2' },\n { value: 'option-3', label: 'Option 3' },\n { value: 'option-4', label: 'Option 4' },\n ],\n placeholder: 'Select placeholder text',\n nullable: false,\n clearLabel: 'Clear button label text',\n disabled: false,\n }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {\n value: '',\n nullable: false,\n clearLabel: 'Clear',\n disabled: false,\n onChange: (v) => {\n console.log(v)\n },\n },\n};\n"],"names":["meta","Select","Default","v"],"mappings":";AAGA,MAAMA,IAA4B;AAAA,EAChC,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,SAAS,OAAA;AAAA,IAClB,SAAS,EAAE,SAAS,SAAA;AAAA,IACpB,UAAU,EAAE,QAAQ,UAAA;AAAA,IACpB,UAAU,EAAE,SAAS,UAAA;AAAA,IACrB,YAAY,EAAE,SAAS,OAAA;AAAA,IACvB,UAAU,EAAE,SAAS,UAAA;AAAA,EAAU;AAAA,EAEjC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,MACP,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,IAAW;AAAA,IAEzC,aAAa;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAEd,GAMaC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU,CAACC,MAAM;AACf,cAAQ,IAAIA,CAAC;AAAA,IACf;AAAA,EAAA;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"Select.stories.js","sources":["../../src/Select/Select.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\r\nimport { Select } from './Select';\r\n\r\nconst meta: Meta<typeof Select> = {\r\n title: 'Select',\r\n component: Select,\r\n argTypes: {\r\n value: { control: 'text' },\r\n options: { control: 'object' },\r\n onChange: { action: 'changed' },\r\n nullable: { control: 'boolean' },\r\n clearLabel: { control: 'text' },\r\n disabled: { control: 'boolean' },\r\n },\r\n args: {\r\n value: '',\r\n options: [\r\n { value: 'option-0', label: 'Option 0' },\r\n { value: 'option-1', label: 'Option 1' },\r\n { value: 'option-2', label: 'Option 2' },\r\n { value: 'option-3', label: 'Option 3' },\r\n { value: 'option-4', label: 'Option 4' },\r\n ],\r\n placeholder: 'Select placeholder text',\r\n nullable: false,\r\n clearLabel: 'Clear button label text',\r\n disabled: false,\r\n }\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n args: {\r\n value: '',\r\n nullable: false,\r\n clearLabel: 'Clear',\r\n disabled: false,\r\n onChange: (v) => {\r\n console.log(v)\r\n },\r\n },\r\n};\r\n"],"names":["meta","Select","Default","v"],"mappings":";AAGA,MAAMA,IAA4B;AAAA,EAChC,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,OAAO,EAAE,SAAS,OAAA;AAAA,IAClB,SAAS,EAAE,SAAS,SAAA;AAAA,IACpB,UAAU,EAAE,QAAQ,UAAA;AAAA,IACpB,UAAU,EAAE,SAAS,UAAA;AAAA,IACrB,YAAY,EAAE,SAAS,OAAA;AAAA,IACvB,UAAU,EAAE,SAAS,UAAA;AAAA,EAAU;AAAA,EAEjC,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS;AAAA,MACP,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,MAC5B,EAAE,OAAO,YAAY,OAAO,WAAA;AAAA,IAAW;AAAA,IAEzC,aAAa;AAAA,IACb,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,EAAA;AAEd,GAMaC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU,CAACC,MAAM;AACf,cAAQ,IAAIA,CAAC;AAAA,IACf;AAAA,EAAA;AAEJ;"}
|