@oneplatformdev/ui 0.1.99-beta.196 → 0.1.99-beta.197
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 +2649 -2641
- 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 +4 -5
- 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 +33 -35
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/ComboboxOptionItem.js +4 -4
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxOptions.js +14 -15
- package/Combobox/ComboboxOptions.js.map +1 -1
- package/Command/Command.js +22 -23
- package/Command/Command.js.map +1 -1
- package/DataTable/DataTable.js +22 -24
- 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.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 +7 -8
- 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.d.ts.map +1 -1
- package/FormInput/FormInput.js +26 -25
- package/FormInput/FormInput.js.map +1 -1
- package/FormInput/FormInput.stories.js +21 -17
- package/FormInput/FormInput.stories.js.map +1 -1
- package/FormInput/FormInput.types.d.ts +1 -0
- package/FormInput/FormInput.types.d.ts.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.d.ts.map +1 -1
- package/Input/Input.js +65 -51
- package/Input/Input.js.map +1 -1
- package/Input/Input.types.d.ts +1 -0
- package/Input/Input.types.d.ts.map +1 -1
- 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.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.map +1 -1
- package/Tooltip/TooltipRoot.js.map +1 -1
- package/Tooltip/tooltipVariants.js.map +1 -1
- package/index.js +280 -280
- package/package.json +4 -4
package/Calendar/Calendar.js
CHANGED
|
@@ -1,20 +1,18 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import { ChevronRight as
|
|
2
|
+
import { ChevronRight as i, ChevronLeft as l } from "lucide-react";
|
|
3
3
|
import { DayPicker as m } from "react-day-picker";
|
|
4
4
|
import { cn as e } from "@oneplatformdev/utils";
|
|
5
|
-
import "../Button/Button.js";
|
|
6
5
|
import { buttonVariants as o } from "../Button/buttonVariants.js";
|
|
7
|
-
import "react";
|
|
8
6
|
function u({
|
|
9
7
|
className: n,
|
|
10
8
|
classNames: s,
|
|
11
|
-
showOutsideDays:
|
|
9
|
+
showOutsideDays: c = !0,
|
|
12
10
|
...d
|
|
13
11
|
}) {
|
|
14
12
|
return /* @__PURE__ */ r(
|
|
15
13
|
m,
|
|
16
14
|
{
|
|
17
|
-
showOutsideDays:
|
|
15
|
+
showOutsideDays: c,
|
|
18
16
|
className: e("p-3", n),
|
|
19
17
|
classNames: {
|
|
20
18
|
caption_dropdowns: "flex flex-col gap-1",
|
|
@@ -53,7 +51,7 @@ function u({
|
|
|
53
51
|
},
|
|
54
52
|
components: {
|
|
55
53
|
IconLeft: ({ className: a, ...t }) => /* @__PURE__ */ r(l, { className: e("h-4 w-4", a), ...t }),
|
|
56
|
-
IconRight: ({ className: a, ...t }) => /* @__PURE__ */ r(
|
|
54
|
+
IconRight: ({ className: a, ...t }) => /* @__PURE__ */ r(i, { className: e("h-4 w-4", a), ...t })
|
|
57
55
|
},
|
|
58
56
|
...d
|
|
59
57
|
}
|
package/Calendar/Calendar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\nimport { DayPicker } from \"react-day-picker\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonVariants } from \"../Button\";\n\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\n\nfunction Calendar({\n className,\n classNames,\n showOutsideDays = true,\n ...props\n}: CalendarProps) {\n return (\n <DayPicker\n showOutsideDays={showOutsideDays}\n className={cn(\"p-3\", className)}\n classNames={{\n caption_dropdowns:\"flex flex-col gap-1\",\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\n month: \"space-y-4\",\n caption: \"flex justify-center pt-1 relative items-center gap-4\",\n caption_label: \"text-sm font-medium hidden\",\n nav: \"space-x-1 flex items-center\",\n nav_button: cn(\n buttonVariants({ variant: \"outline-solid\" }),\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\n ),\n nav_button_previous: \"absolute left-1\",\n nav_button_next: \"absolute right-1\",\n table: \"w-full border-collapse space-y-1\",\n head_row: \"flex\",\n head_cell:\n \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\n row: \"flex w-full mt-2\",\n cell: cn(\n \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\n props.mode === \"range\"\n ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\n : \"[&:has([aria-selected])]:rounded-md\"\n ),\n day: cn(\n buttonVariants({ variant: \"ghost\" }),\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\n ),\n day_range_start: \"day-range-start\",\n day_range_end: \"day-range-end\",\n day_selected:\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\n day_today: \"bg-accent text-accent-foreground\",\n day_outside:\n \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\n day_disabled: \"text-muted-foreground opacity-50\",\n day_range_middle:\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\n day_hidden: \"invisible\",\n ...classNames,\n }}\n components={{\n IconLeft: ({ className, ...props }) => (\n <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\n ),\n IconRight: ({ className, ...props }) => (\n <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\n ),\n }}\n {...props}\n />\n )\n}\nCalendar.displayName = \"Calendar\"\n\nexport { Calendar }\n"],"names":["Calendar","className","classNames","showOutsideDays","props","jsx","DayPicker","cn","buttonVariants","ChevronLeft","ChevronRight"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../src/Calendar/Calendar.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\r\nimport { DayPicker } from \"react-day-picker\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { buttonVariants } from \"../Button\";\r\n\r\nexport type CalendarProps = React.ComponentProps<typeof DayPicker>\r\n\r\nfunction Calendar({\r\n className,\r\n classNames,\r\n showOutsideDays = true,\r\n ...props\r\n}: CalendarProps) {\r\n return (\r\n <DayPicker\r\n showOutsideDays={showOutsideDays}\r\n className={cn(\"p-3\", className)}\r\n classNames={{\r\n caption_dropdowns:\"flex flex-col gap-1\",\r\n months: \"flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0\",\r\n month: \"space-y-4\",\r\n caption: \"flex justify-center pt-1 relative items-center gap-4\",\r\n caption_label: \"text-sm font-medium hidden\",\r\n nav: \"space-x-1 flex items-center\",\r\n nav_button: cn(\r\n buttonVariants({ variant: \"outline-solid\" }),\r\n \"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100\"\r\n ),\r\n nav_button_previous: \"absolute left-1\",\r\n nav_button_next: \"absolute right-1\",\r\n table: \"w-full border-collapse space-y-1\",\r\n head_row: \"flex\",\r\n head_cell:\r\n \"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]\",\r\n row: \"flex w-full mt-2\",\r\n cell: cn(\r\n \"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md\",\r\n props.mode === \"range\"\r\n ? \"[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md\"\r\n : \"[&:has([aria-selected])]:rounded-md\"\r\n ),\r\n day: cn(\r\n buttonVariants({ variant: \"ghost\" }),\r\n \"h-8 w-8 p-0 font-normal aria-selected:opacity-100\"\r\n ),\r\n day_range_start: \"day-range-start\",\r\n day_range_end: \"day-range-end\",\r\n day_selected:\r\n \"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground\",\r\n day_today: \"bg-accent text-accent-foreground\",\r\n day_outside:\r\n \"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground\",\r\n day_disabled: \"text-muted-foreground opacity-50\",\r\n day_range_middle:\r\n \"aria-selected:bg-accent aria-selected:text-accent-foreground\",\r\n day_hidden: \"invisible\",\r\n ...classNames,\r\n }}\r\n components={{\r\n IconLeft: ({ className, ...props }) => (\r\n <ChevronLeft className={cn(\"h-4 w-4\", className)} {...props} />\r\n ),\r\n IconRight: ({ className, ...props }) => (\r\n <ChevronRight className={cn(\"h-4 w-4\", className)} {...props} />\r\n ),\r\n }}\r\n {...props}\r\n />\r\n )\r\n}\r\nCalendar.displayName = \"Calendar\"\r\n\r\nexport { Calendar }\r\n"],"names":["Calendar","className","classNames","showOutsideDays","props","jsx","DayPicker","cn","buttonVariants","ChevronLeft","ChevronRight"],"mappings":";;;;;AAWA,SAASA,EAAS;AAAA,EAChB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,GAAGC;AACL,GAAkB;AAChB,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,iBAAAH;AAAA,MACA,WAAWI,EAAG,OAAON,CAAS;AAAA,MAC9B,YAAY;AAAA,QACV,mBAAkB;AAAA,QAClB,QAAQ;AAAA,QACR,OAAO;AAAA,QACP,SAAS;AAAA,QACT,eAAe;AAAA,QACf,KAAK;AAAA,QACL,YAAYM;AAAA,UACVC,EAAe,EAAE,SAAS,iBAAiB;AAAA,UAC3C;AAAA,QAAA;AAAA,QAEF,qBAAqB;AAAA,QACrB,iBAAiB;AAAA,QACjB,OAAO;AAAA,QACP,UAAU;AAAA,QACV,WACE;AAAA,QACF,KAAK;AAAA,QACL,MAAMD;AAAA,UACJ;AAAA,UACAH,EAAM,SAAS,UACX,yKACA;AAAA,QAAA;AAAA,QAEN,KAAKG;AAAA,UACHC,EAAe,EAAE,SAAS,SAAS;AAAA,UACnC;AAAA,QAAA;AAAA,QAEF,iBAAiB;AAAA,QACjB,eAAe;AAAA,QACf,cACE;AAAA,QACF,WAAW;AAAA,QACX,aACE;AAAA,QACF,cAAc;AAAA,QACd,kBACE;AAAA,QACF,YAAY;AAAA,QACZ,GAAGN;AAAA,MAAA;AAAA,MAEL,YAAY;AAAA,QACV,UAAU,CAAC,EAAE,WAAAD,GAAW,GAAGG,EAAAA,MACzB,gBAAAC,EAACI,GAAA,EAAY,WAAWF,EAAG,WAAWN,CAAS,GAAI,GAAGG,GAAO;AAAA,QAE/D,WAAW,CAAC,EAAE,WAAAH,GAAW,GAAGG,EAAAA,MAC1B,gBAAAC,EAACK,GAAA,EAAa,WAAWH,EAAG,WAAWN,CAAS,GAAI,GAAGG,EAAAA,CAAO;AAAA,MAAA;AAAA,MAGjE,GAAGA;AAAA,IAAA;AAAA,EAAA;AAGV;AACAJ,EAAS,cAAc;"}
|
package/Card/Card.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Card.js","sources":["../../src/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\n\nconst Card = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n 'flex flex-col gap-1 p-2',\n 'rounded-2xl border border-border bg-card text-card-foreground shadow-none',\n className\n )}\n {...props}\n />\n));\nCard.displayName = \"Card\"\n\nconst CardHeader = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\n {...props}\n />\n))\nCardHeader.displayName = \"CardHeader\"\n\nconst CardTitle = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"font-semibold leading-none tracking-tight\", className)}\n {...props}\n />\n))\nCardTitle.displayName = \"CardTitle\"\n\nconst CardDescription = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"text-sm text-muted-foreground\", className)}\n {...props}\n />\n))\nCardDescription.displayName = \"CardDescription\"\n\nconst CardContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\n))\nCardContent.displayName = \"CardContent\"\n\nconst CardFooter = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\"flex items-center p-6 pt-0\", className)}\n {...props}\n />\n))\nCardFooter.displayName = \"CardFooter\"\n\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\n"],"names":["Card","React","className","props","ref","jsx","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;AAIA,MAAMA,IAAOC,EAAM,WAGjB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAK,cAAc;AAEnB,MAAMO,IAAaN,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAW,cAAc;AAEzB,MAAMC,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,6CAA6CJ,CAAS;AAAA,IACnE,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAU,cAAc;AAExB,MAAMC,IAAkBR,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAgB,cAAc;AAE9B,MAAMC,IAAcT,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,YAAYJ,CAAS,GAAI,GAAGC,GAAO,CACjE;AACDO,EAAY,cAAc;AAE1B,MAAMC,IAAaV,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,8BAA8BJ,CAAS;AAAA,IACpD,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAW,cAAc;"}
|
|
1
|
+
{"version":3,"file":"Card.js","sources":["../../src/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\n\r\nconst Card = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n 'flex flex-col gap-1 p-2',\r\n 'rounded-2xl border border-border bg-card text-card-foreground shadow-none',\r\n className\r\n )}\r\n {...props}\r\n />\r\n));\r\nCard.displayName = \"Card\"\r\n\r\nconst CardHeader = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex flex-col space-y-1.5 p-6\", className)}\r\n {...props}\r\n />\r\n))\r\nCardHeader.displayName = \"CardHeader\"\r\n\r\nconst CardTitle = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"font-semibold leading-none tracking-tight\", className)}\r\n {...props}\r\n />\r\n))\r\nCardTitle.displayName = \"CardTitle\"\r\n\r\nconst CardDescription = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"text-sm text-muted-foreground\", className)}\r\n {...props}\r\n />\r\n))\r\nCardDescription.displayName = \"CardDescription\"\r\n\r\nconst CardContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div ref={ref} className={cn(\"p-6 pt-0\", className)} {...props} />\r\n))\r\nCardContent.displayName = \"CardContent\"\r\n\r\nconst CardFooter = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => (\r\n <div\r\n ref={ref}\r\n className={cn(\"flex items-center p-6 pt-0\", className)}\r\n {...props}\r\n />\r\n))\r\nCardFooter.displayName = \"CardFooter\"\r\n\r\nexport { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }\r\n"],"names":["Card","React","className","props","ref","jsx","cn","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"mappings":";;;AAIA,MAAMA,IAAOC,EAAM,WAGjB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE;AAAA,MACT;AAAA,MACA;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAK,cAAc;AAEnB,MAAMO,IAAaN,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAW,cAAc;AAEzB,MAAMC,IAAYP,EAAM,WAGtB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,6CAA6CJ,CAAS;AAAA,IACnE,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAU,cAAc;AAExB,MAAMC,IAAkBR,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,iCAAiCJ,CAAS;AAAA,IACvD,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAgB,cAAc;AAE9B,MAAMC,IAAcT,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGC,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWE,EAAG,YAAYJ,CAAS,GAAI,GAAGC,GAAO,CACjE;AACDO,EAAY,cAAc;AAE1B,MAAMC,IAAaV,EAAM,WAGvB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,WAAWE,EAAG,8BAA8BJ,CAAS;AAAA,IACpD,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAW,cAAc;"}
|
package/Carousel/Carousel.js
CHANGED
|
@@ -3,11 +3,10 @@ import * as e from "react";
|
|
|
3
3
|
import k from "embla-carousel-react";
|
|
4
4
|
import { ArrowLeft as z, ArrowRight as g } from "lucide-react";
|
|
5
5
|
import { cn as m } from "@oneplatformdev/utils";
|
|
6
|
-
import { Button as
|
|
7
|
-
|
|
8
|
-
const w = e.createContext(null);
|
|
6
|
+
import { Button as w } from "../Button/Button.js";
|
|
7
|
+
const p = e.createContext(null);
|
|
9
8
|
function C() {
|
|
10
|
-
const o = e.useContext(
|
|
9
|
+
const o = e.useContext(p);
|
|
11
10
|
if (!o)
|
|
12
11
|
throw new Error("useCarousel must be used within a <Carousel />");
|
|
13
12
|
return o;
|
|
@@ -48,7 +47,7 @@ const D = e.forwardRef(
|
|
|
48
47
|
r?.off("select", d);
|
|
49
48
|
};
|
|
50
49
|
}, [r, d]), /* @__PURE__ */ s(
|
|
51
|
-
|
|
50
|
+
p.Provider,
|
|
52
51
|
{
|
|
53
52
|
value: {
|
|
54
53
|
carouselRef: v,
|
|
@@ -114,7 +113,7 @@ I.displayName = "CarouselItem";
|
|
|
114
113
|
const j = e.forwardRef(({ className: o, variant: l = "outline-solid", size: t = "icon", ...a }, c) => {
|
|
115
114
|
const { orientation: i, scrollPrev: u, canScrollPrev: f } = C();
|
|
116
115
|
return /* @__PURE__ */ x(
|
|
117
|
-
|
|
116
|
+
w,
|
|
118
117
|
{
|
|
119
118
|
ref: c,
|
|
120
119
|
variant: l,
|
|
@@ -138,7 +137,7 @@ j.displayName = "CarouselPrevious";
|
|
|
138
137
|
const A = e.forwardRef(({ className: o, variant: l = "outline-solid", size: t = "icon", ...a }, c) => {
|
|
139
138
|
const { orientation: i, scrollNext: u, canScrollNext: f } = C();
|
|
140
139
|
return /* @__PURE__ */ x(
|
|
141
|
-
|
|
140
|
+
w,
|
|
142
141
|
{
|
|
143
142
|
ref: c,
|
|
144
143
|
variant: l,
|
package/Carousel/Carousel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Carousel.js","sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport useEmblaCarousel, {\n type UseEmblaCarouselType,\n} from \"embla-carousel-react\"\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\";\nimport { Button } from \"../Button\";\n\ntype CarouselApi = UseEmblaCarouselType[1]\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\ntype CarouselOptions = UseCarouselParameters[0]\ntype CarouselPlugin = UseCarouselParameters[1]\n\ntype CarouselProps = {\n opts?: CarouselOptions\n plugins?: CarouselPlugin\n orientation?: \"horizontal\" | \"vertical\"\n setApi?: (api: CarouselApi) => void\n}\n\ntype CarouselContextProps = {\n carouselRef: ReturnType<typeof useEmblaCarousel>[0]\n api: ReturnType<typeof useEmblaCarousel>[1]\n scrollPrev: () => void\n scrollNext: () => void\n canScrollPrev: boolean\n canScrollNext: boolean\n} & CarouselProps\n\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\n\nfunction useCarousel() {\n const context = React.useContext(CarouselContext)\n\n if (!context) {\n throw new Error(\"useCarousel must be used within a <Carousel />\")\n }\n\n return context\n}\n\nconst Carousel = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement> & CarouselProps\n>(\n (\n {\n orientation = \"horizontal\",\n opts,\n setApi,\n plugins,\n className,\n children,\n ...props\n },\n ref\n ) => {\n const [carouselRef, api] = useEmblaCarousel(\n {\n ...opts,\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\n },\n plugins\n )\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\n const [canScrollNext, setCanScrollNext] = React.useState(false)\n\n const onSelect = React.useCallback((api: CarouselApi) => {\n if (!api) {\n return\n }\n\n setCanScrollPrev(api.canScrollPrev())\n setCanScrollNext(api.canScrollNext())\n }, [])\n\n const scrollPrev = React.useCallback(() => {\n api?.scrollPrev()\n }, [api])\n\n const scrollNext = React.useCallback(() => {\n api?.scrollNext()\n }, [api])\n\n const handleKeyDown = React.useCallback(\n (event: React.KeyboardEvent<HTMLDivElement>) => {\n if (event.key === \"ArrowLeft\") {\n event.preventDefault()\n scrollPrev()\n } else if (event.key === \"ArrowRight\") {\n event.preventDefault()\n scrollNext()\n }\n },\n [scrollPrev, scrollNext]\n )\n\n React.useEffect(() => {\n if (!api || !setApi) {\n return\n }\n\n setApi(api)\n }, [api, setApi])\n\n React.useEffect(() => {\n if (!api) {\n return\n }\n\n onSelect(api)\n api.on(\"reInit\", onSelect)\n api.on(\"select\", onSelect)\n\n return () => {\n api?.off(\"select\", onSelect)\n }\n }, [api, onSelect])\n\n return (\n <CarouselContext.Provider\n value={{\n carouselRef,\n api: api,\n opts,\n orientation:\n orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\n scrollPrev,\n scrollNext,\n canScrollPrev,\n canScrollNext,\n }}\n >\n <div\n ref={ref}\n onKeyDownCapture={handleKeyDown}\n className={cn(\"relative\", className)}\n role=\"region\"\n aria-roledescription=\"carousel\"\n {...props}\n >\n {children}\n </div>\n </CarouselContext.Provider>\n )\n }\n)\nCarousel.displayName = \"Carousel\"\n\nconst CarouselContent = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { carouselRef, orientation } = useCarousel()\n\n return (\n <div ref={carouselRef} className=\"overflow-hidden\">\n <div\n ref={ref}\n className={cn(\n \"flex\",\n orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\n className\n )}\n {...props}\n />\n </div>\n )\n})\nCarouselContent.displayName = \"CarouselContent\"\n\nconst CarouselItem = React.forwardRef<\n HTMLDivElement,\n React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => {\n const { orientation } = useCarousel()\n\n return (\n <div\n ref={ref}\n role=\"group\"\n aria-roledescription=\"slide\"\n className={cn(\n \"min-w-0 shrink-0 grow-0 basis-full\",\n orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\n className\n )}\n {...props}\n />\n )\n})\nCarouselItem.displayName = \"CarouselItem\"\n\nconst CarouselPrevious = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline-solid\", size = \"icon\", ...props }, ref) => {\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\n\n return (\n <Button\n ref={ref}\n variant={variant}\n size={size}\n className={cn(\n \"absolute h-8 w-8 rounded-full\",\n orientation === \"horizontal\"\n ? \"-left-12 top-1/2 -translate-y-1/2\"\n : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\n className\n )}\n disabled={!canScrollPrev}\n onClick={scrollPrev}\n {...props}\n >\n <ArrowLeft className=\"h-4 w-4\" />\n <span className=\"sr-only\">Previous slide</span>\n </Button>\n )\n})\nCarouselPrevious.displayName = \"CarouselPrevious\"\n\nconst CarouselNext = React.forwardRef<\n HTMLButtonElement,\n React.ComponentProps<typeof Button>\n>(({ className, variant = \"outline-solid\", size = \"icon\", ...props }, ref) => {\n const { orientation, scrollNext, canScrollNext } = useCarousel()\n\n return (\n <Button\n ref={ref}\n variant={variant}\n size={size}\n className={cn(\n \"absolute h-8 w-8 rounded-full\",\n orientation === \"horizontal\"\n ? \"-right-12 top-1/2 -translate-y-1/2\"\n : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\n className\n )}\n disabled={!canScrollNext}\n onClick={scrollNext}\n {...props}\n >\n <ArrowRight className=\"h-4 w-4\" />\n <span className=\"sr-only\">Next slide</span>\n </Button>\n )\n})\nCarouselNext.displayName = \"CarouselNext\"\n\nexport {\n type CarouselApi,\n Carousel,\n CarouselContent,\n CarouselItem,\n CarouselPrevious,\n CarouselNext,\n}\n"],"names":["CarouselContext","React","useCarousel","context","Carousel","orientation","opts","setApi","plugins","className","children","props","ref","carouselRef","api","useEmblaCarousel","canScrollPrev","setCanScrollPrev","canScrollNext","setCanScrollNext","onSelect","scrollPrev","scrollNext","handleKeyDown","event","jsx","cn","CarouselContent","CarouselItem","CarouselPrevious","variant","size","jsxs","Button","ArrowLeft","CarouselNext","ArrowRight"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Carousel.js","sources":["../../src/Carousel/Carousel.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport useEmblaCarousel, {\r\n type UseEmblaCarouselType,\r\n} from \"embla-carousel-react\"\r\nimport { ArrowLeft, ArrowRight } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\";\r\nimport { Button } from \"../Button\";\r\n\r\ntype CarouselApi = UseEmblaCarouselType[1]\r\ntype UseCarouselParameters = Parameters<typeof useEmblaCarousel>\r\ntype CarouselOptions = UseCarouselParameters[0]\r\ntype CarouselPlugin = UseCarouselParameters[1]\r\n\r\ntype CarouselProps = {\r\n opts?: CarouselOptions\r\n plugins?: CarouselPlugin\r\n orientation?: \"horizontal\" | \"vertical\"\r\n setApi?: (api: CarouselApi) => void\r\n}\r\n\r\ntype CarouselContextProps = {\r\n carouselRef: ReturnType<typeof useEmblaCarousel>[0]\r\n api: ReturnType<typeof useEmblaCarousel>[1]\r\n scrollPrev: () => void\r\n scrollNext: () => void\r\n canScrollPrev: boolean\r\n canScrollNext: boolean\r\n} & CarouselProps\r\n\r\nconst CarouselContext = React.createContext<CarouselContextProps | null>(null)\r\n\r\nfunction useCarousel() {\r\n const context = React.useContext(CarouselContext)\r\n\r\n if (!context) {\r\n throw new Error(\"useCarousel must be used within a <Carousel />\")\r\n }\r\n\r\n return context\r\n}\r\n\r\nconst Carousel = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement> & CarouselProps\r\n>(\r\n (\r\n {\r\n orientation = \"horizontal\",\r\n opts,\r\n setApi,\r\n plugins,\r\n className,\r\n children,\r\n ...props\r\n },\r\n ref\r\n ) => {\r\n const [carouselRef, api] = useEmblaCarousel(\r\n {\r\n ...opts,\r\n axis: orientation === \"horizontal\" ? \"x\" : \"y\",\r\n },\r\n plugins\r\n )\r\n const [canScrollPrev, setCanScrollPrev] = React.useState(false)\r\n const [canScrollNext, setCanScrollNext] = React.useState(false)\r\n\r\n const onSelect = React.useCallback((api: CarouselApi) => {\r\n if (!api) {\r\n return\r\n }\r\n\r\n setCanScrollPrev(api.canScrollPrev())\r\n setCanScrollNext(api.canScrollNext())\r\n }, [])\r\n\r\n const scrollPrev = React.useCallback(() => {\r\n api?.scrollPrev()\r\n }, [api])\r\n\r\n const scrollNext = React.useCallback(() => {\r\n api?.scrollNext()\r\n }, [api])\r\n\r\n const handleKeyDown = React.useCallback(\r\n (event: React.KeyboardEvent<HTMLDivElement>) => {\r\n if (event.key === \"ArrowLeft\") {\r\n event.preventDefault()\r\n scrollPrev()\r\n } else if (event.key === \"ArrowRight\") {\r\n event.preventDefault()\r\n scrollNext()\r\n }\r\n },\r\n [scrollPrev, scrollNext]\r\n )\r\n\r\n React.useEffect(() => {\r\n if (!api || !setApi) {\r\n return\r\n }\r\n\r\n setApi(api)\r\n }, [api, setApi])\r\n\r\n React.useEffect(() => {\r\n if (!api) {\r\n return\r\n }\r\n\r\n onSelect(api)\r\n api.on(\"reInit\", onSelect)\r\n api.on(\"select\", onSelect)\r\n\r\n return () => {\r\n api?.off(\"select\", onSelect)\r\n }\r\n }, [api, onSelect])\r\n\r\n return (\r\n <CarouselContext.Provider\r\n value={{\r\n carouselRef,\r\n api: api,\r\n opts,\r\n orientation:\r\n orientation || (opts?.axis === \"y\" ? \"vertical\" : \"horizontal\"),\r\n scrollPrev,\r\n scrollNext,\r\n canScrollPrev,\r\n canScrollNext,\r\n }}\r\n >\r\n <div\r\n ref={ref}\r\n onKeyDownCapture={handleKeyDown}\r\n className={cn(\"relative\", className)}\r\n role=\"region\"\r\n aria-roledescription=\"carousel\"\r\n {...props}\r\n >\r\n {children}\r\n </div>\r\n </CarouselContext.Provider>\r\n )\r\n }\r\n)\r\nCarousel.displayName = \"Carousel\"\r\n\r\nconst CarouselContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const { carouselRef, orientation } = useCarousel()\r\n\r\n return (\r\n <div ref={carouselRef} className=\"overflow-hidden\">\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"flex\",\r\n orientation === \"horizontal\" ? \"-ml-4\" : \"-mt-4 flex-col\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n </div>\r\n )\r\n})\r\nCarouselContent.displayName = \"CarouselContent\"\r\n\r\nconst CarouselItem = React.forwardRef<\r\n HTMLDivElement,\r\n React.HTMLAttributes<HTMLDivElement>\r\n>(({ className, ...props }, ref) => {\r\n const { orientation } = useCarousel()\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n role=\"group\"\r\n aria-roledescription=\"slide\"\r\n className={cn(\r\n \"min-w-0 shrink-0 grow-0 basis-full\",\r\n orientation === \"horizontal\" ? \"pl-4\" : \"pt-4\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n )\r\n})\r\nCarouselItem.displayName = \"CarouselItem\"\r\n\r\nconst CarouselPrevious = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentProps<typeof Button>\r\n>(({ className, variant = \"outline-solid\", size = \"icon\", ...props }, ref) => {\r\n const { orientation, scrollPrev, canScrollPrev } = useCarousel()\r\n\r\n return (\r\n <Button\r\n ref={ref}\r\n variant={variant}\r\n size={size}\r\n className={cn(\r\n \"absolute h-8 w-8 rounded-full\",\r\n orientation === \"horizontal\"\r\n ? \"-left-12 top-1/2 -translate-y-1/2\"\r\n : \"-top-12 left-1/2 -translate-x-1/2 rotate-90\",\r\n className\r\n )}\r\n disabled={!canScrollPrev}\r\n onClick={scrollPrev}\r\n {...props}\r\n >\r\n <ArrowLeft className=\"h-4 w-4\" />\r\n <span className=\"sr-only\">Previous slide</span>\r\n </Button>\r\n )\r\n})\r\nCarouselPrevious.displayName = \"CarouselPrevious\"\r\n\r\nconst CarouselNext = React.forwardRef<\r\n HTMLButtonElement,\r\n React.ComponentProps<typeof Button>\r\n>(({ className, variant = \"outline-solid\", size = \"icon\", ...props }, ref) => {\r\n const { orientation, scrollNext, canScrollNext } = useCarousel()\r\n\r\n return (\r\n <Button\r\n ref={ref}\r\n variant={variant}\r\n size={size}\r\n className={cn(\r\n \"absolute h-8 w-8 rounded-full\",\r\n orientation === \"horizontal\"\r\n ? \"-right-12 top-1/2 -translate-y-1/2\"\r\n : \"-bottom-12 left-1/2 -translate-x-1/2 rotate-90\",\r\n className\r\n )}\r\n disabled={!canScrollNext}\r\n onClick={scrollNext}\r\n {...props}\r\n >\r\n <ArrowRight className=\"h-4 w-4\" />\r\n <span className=\"sr-only\">Next slide</span>\r\n </Button>\r\n )\r\n})\r\nCarouselNext.displayName = \"CarouselNext\"\r\n\r\nexport {\r\n type CarouselApi,\r\n Carousel,\r\n CarouselContent,\r\n CarouselItem,\r\n CarouselPrevious,\r\n CarouselNext,\r\n}\r\n"],"names":["CarouselContext","React","useCarousel","context","Carousel","orientation","opts","setApi","plugins","className","children","props","ref","carouselRef","api","useEmblaCarousel","canScrollPrev","setCanScrollPrev","canScrollNext","setCanScrollNext","onSelect","scrollPrev","scrollNext","handleKeyDown","event","jsx","cn","CarouselContent","CarouselItem","CarouselPrevious","variant","size","jsxs","Button","ArrowLeft","CarouselNext","ArrowRight"],"mappings":";;;;;;AAgCA,MAAMA,IAAkBC,EAAM,cAA2C,IAAI;AAE7E,SAASC,IAAc;AACrB,QAAMC,IAAUF,EAAM,WAAWD,CAAe;AAEhD,MAAI,CAACG;AACH,UAAM,IAAI,MAAM,gDAAgD;AAGlE,SAAOA;AACT;AAEA,MAAMC,IAAWH,EAAM;AAAA,EAIrB,CACE;AAAA,IACE,aAAAI,IAAc;AAAA,IACd,MAAAC;AAAA,IACA,QAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAM,CAACC,GAAaC,CAAG,IAAIC;AAAA,MACzB;AAAA,QACE,GAAGT;AAAA,QACH,MAAMD,MAAgB,eAAe,MAAM;AAAA,MAAA;AAAA,MAE7CG;AAAA,IAAA,GAEI,CAACQ,GAAeC,CAAgB,IAAIhB,EAAM,SAAS,EAAK,GACxD,CAACiB,GAAeC,CAAgB,IAAIlB,EAAM,SAAS,EAAK,GAExDmB,IAAWnB,EAAM,YAAY,CAACa,MAAqB;AACvD,MAAKA,MAILG,EAAiBH,EAAI,eAAe,GACpCK,EAAiBL,EAAI,eAAe;AAAA,IACtC,GAAG,CAAA,CAAE,GAECO,IAAapB,EAAM,YAAY,MAAM;AACzC,MAAAa,GAAK,WAAA;AAAA,IACP,GAAG,CAACA,CAAG,CAAC,GAEFQ,IAAarB,EAAM,YAAY,MAAM;AACzC,MAAAa,GAAK,WAAA;AAAA,IACP,GAAG,CAACA,CAAG,CAAC,GAEFS,IAAgBtB,EAAM;AAAA,MAC1B,CAACuB,MAA+C;AAC9C,QAAIA,EAAM,QAAQ,eAChBA,EAAM,eAAA,GACNH,EAAA,KACSG,EAAM,QAAQ,iBACvBA,EAAM,eAAA,GACNF,EAAA;AAAA,MAEJ;AAAA,MACA,CAACD,GAAYC,CAAU;AAAA,IAAA;AAGzB,WAAArB,EAAM,UAAU,MAAM;AACpB,MAAI,CAACa,KAAO,CAACP,KAIbA,EAAOO,CAAG;AAAA,IACZ,GAAG,CAACA,GAAKP,CAAM,CAAC,GAEhBN,EAAM,UAAU,MAAM;AACpB,UAAKa;AAIL,eAAAM,EAASN,CAAG,GACZA,EAAI,GAAG,UAAUM,CAAQ,GACzBN,EAAI,GAAG,UAAUM,CAAQ,GAElB,MAAM;AACX,UAAAN,GAAK,IAAI,UAAUM,CAAQ;AAAA,QAC7B;AAAA,IACF,GAAG,CAACN,GAAKM,CAAQ,CAAC,GAGhB,gBAAAK;AAAA,MAACzB,EAAgB;AAAA,MAAhB;AAAA,QACC,OAAO;AAAA,UACL,aAAAa;AAAA,UACA,KAAAC;AAAA,UACA,MAAAR;AAAA,UACA,aACED,MAAgBC,GAAM,SAAS,MAAM,aAAa;AAAA,UACpD,YAAAe;AAAA,UACA,YAAAC;AAAA,UACA,eAAAN;AAAA,UACA,eAAAE;AAAA,QAAA;AAAA,QAGF,UAAA,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAAb;AAAA,YACA,kBAAkBW;AAAA,YAClB,WAAWG,EAAG,YAAYjB,CAAS;AAAA,YACnC,MAAK;AAAA,YACL,wBAAqB;AAAA,YACpB,GAAGE;AAAA,YAEH,UAAAD;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAGN;AACF;AACAN,EAAS,cAAc;AAEvB,MAAMuB,IAAkB1B,EAAM,WAG5B,CAAC,EAAE,WAAAQ,GAAW,GAAGE,EAAA,GAASC,MAAQ;AAClC,QAAM,EAAE,aAAAC,GAAa,aAAAR,EAAA,IAAgBH,EAAA;AAErC,SACE,gBAAAuB,EAAC,OAAA,EAAI,KAAKZ,GAAa,WAAU,mBAC/B,UAAA,gBAAAY;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,WAAWc;AAAA,QACT;AAAA,QACArB,MAAgB,eAAe,UAAU;AAAA,QACzCI;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AACDgB,EAAgB,cAAc;AAE9B,MAAMC,IAAe3B,EAAM,WAGzB,CAAC,EAAE,WAAAQ,GAAW,GAAGE,EAAA,GAASC,MAAQ;AAClC,QAAM,EAAE,aAAAP,EAAA,IAAgBH,EAAA;AAExB,SACE,gBAAAuB;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAb;AAAA,MACA,MAAK;AAAA,MACL,wBAAqB;AAAA,MACrB,WAAWc;AAAA,QACT;AAAA,QACArB,MAAgB,eAAe,SAAS;AAAA,QACxCI;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDiB,EAAa,cAAc;AAE3B,MAAMC,IAAmB5B,EAAM,WAG7B,CAAC,EAAE,WAAAQ,GAAW,SAAAqB,IAAU,iBAAiB,MAAAC,IAAO,QAAQ,GAAGpB,EAAA,GAASC,MAAQ;AAC5E,QAAM,EAAE,aAAAP,GAAa,YAAAgB,GAAY,eAAAL,EAAA,IAAkBd,EAAA;AAEnD,SACE,gBAAA8B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAArB;AAAA,MACA,SAAAkB;AAAA,MACA,MAAAC;AAAA,MACA,WAAWL;AAAA,QACT;AAAA,QACArB,MAAgB,eACZ,sCACA;AAAA,QACJI;AAAA,MAAA;AAAA,MAEF,UAAU,CAACO;AAAA,MACX,SAASK;AAAA,MACR,GAAGV;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAc,EAACS,GAAA,EAAU,WAAU,UAAA,CAAU;AAAA,QAC/B,gBAAAT,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,iBAAA,CAAc;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG9C,CAAC;AACDI,EAAiB,cAAc;AAE/B,MAAMM,IAAelC,EAAM,WAGzB,CAAC,EAAE,WAAAQ,GAAW,SAAAqB,IAAU,iBAAiB,MAAAC,IAAO,QAAQ,GAAGpB,EAAA,GAASC,MAAQ;AAC5E,QAAM,EAAE,aAAAP,GAAa,YAAAiB,GAAY,eAAAJ,EAAA,IAAkBhB,EAAA;AAEnD,SACE,gBAAA8B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,KAAArB;AAAA,MACA,SAAAkB;AAAA,MACA,MAAAC;AAAA,MACA,WAAWL;AAAA,QACT;AAAA,QACArB,MAAgB,eACZ,uCACA;AAAA,QACJI;AAAA,MAAA;AAAA,MAEF,UAAU,CAACS;AAAA,MACX,SAASI;AAAA,MACR,GAAGX;AAAA,MAEJ,UAAA;AAAA,QAAA,gBAAAc,EAACW,GAAA,EAAW,WAAU,UAAA,CAAU;AAAA,QAChC,gBAAAX,EAAC,QAAA,EAAK,WAAU,WAAU,UAAA,aAAA,CAAU;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG1C,CAAC;AACDU,EAAa,cAAc;"}
|
package/Chart/Chart.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.js","sources":["../../src/Chart/Chart.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@oneplatformdev/utils\";\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n [k in string]: {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\n )\n}\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a <ChartContainer />\")\n }\n\n return context\n}\n\nconst ChartContainer = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n }\n>(({ id, className, children, config, ...props }, ref) => {\n const uniqueId = React.useId()\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\n\n return (\n <ChartContext.Provider value={{ config }}>\n <div\n data-chart={chartId}\n ref={ref}\n className={cn(\n \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden\",\n className\n )}\n {...props}\n >\n <ChartStyle id={chartId} config={config} />\n <RechartsPrimitive.ResponsiveContainer>\n {children}\n </RechartsPrimitive.ResponsiveContainer>\n </div>\n </ChartContext.Provider>\n )\n})\nChartContainer.displayName = \"Chart\"\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme || config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n <style\n dangerouslySetInnerHTML={{\n __html: Object.entries(THEMES)\n .map(\n ([theme, prefix]) => `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nconst ChartTooltipContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n }\n>(\n (\n {\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n },\n ref\n ) => {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? config[label as keyof typeof config]?.label || label\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n <div className={cn(\"font-medium\", labelClassName)}>\n {labelFormatter(value, payload)}\n </div>\n )\n }\n\n if (!value) {\n return null\n }\n\n return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n <div\n ref={ref}\n className={cn(\n \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\n className\n )}\n >\n {!nestLabel ? tooltipLabel : null}\n <div className=\"grid gap-1.5\">\n {payload.map((item, index) => {\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color || item.payload.fill || item.color\n\n return (\n <div\n key={item.dataKey}\n className={cn(\n \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n <itemConfig.icon />\n ) : (\n !hideIndicator && (\n <div\n className={cn(\n \"shrink-0 rounded-[2px] border-border bg-(--color-bg)\",\n {\n \"h-2.5 w-2.5\": indicator === \"dot\",\n \"w-1\": indicator === \"line\",\n \"w-0 border-[1.5px] border-dashed bg-transparent\":\n indicator === \"dashed\",\n \"my-0.5\": nestLabel && indicator === \"dashed\",\n }\n )}\n style={\n {\n \"--color-bg\": indicatorColor,\n \"--color-border\": indicatorColor,\n } as React.CSSProperties\n }\n />\n )\n )}\n <div\n className={cn(\n \"flex flex-1 justify-between leading-none\",\n nestLabel ? \"items-end\" : \"items-center\"\n )}\n >\n <div className=\"grid gap-1.5\">\n {nestLabel ? tooltipLabel : null}\n <span className=\"text-muted-foreground\">\n {itemConfig?.label || item.name}\n </span>\n </div>\n {item.value && (\n <span className=\"font-mono font-medium tabular-nums text-foreground\">\n {item.value.toLocaleString()}\n </span>\n )}\n </div>\n </>\n )}\n </div>\n )\n })}\n </div>\n </div>\n )\n }\n)\nChartTooltipContent.displayName = \"ChartTooltip\"\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nconst ChartLegendContent = React.forwardRef<\n HTMLDivElement,\n React.ComponentProps<\"div\"> &\n Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n hideIcon?: boolean\n nameKey?: string\n }\n>(\n (\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\n ref\n ) => {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n <div\n ref={ref}\n className={cn(\n \"flex items-center justify-center gap-4\",\n verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\n className\n )}\n >\n {payload.map((item) => {\n const key = `${nameKey || item.dataKey || \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n <div\n key={item.value}\n className={cn(\n \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n <itemConfig.icon />\n ) : (\n <div\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\n style={{\n backgroundColor: item.color,\n }}\n />\n )}\n {itemConfig?.label}\n </div>\n )\n })}\n </div>\n )\n }\n)\nChartLegendContent.displayName = \"ChartLegend\"\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config\n ? config[configLabelKey]\n : config[key as keyof typeof config]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n"],"names":["THEMES","ChartContext","React","useChart","context","ChartContainer","id","className","children","config","props","ref","uniqueId","chartId","jsxs","cn","jsx","ChartStyle","RechartsPrimitive","colorConfig","theme","prefix","key","itemConfig","color","ChartTooltip","ChartTooltipContent","active","payload","indicator","hideLabel","hideIndicator","label","labelFormatter","labelClassName","formatter","nameKey","labelKey","tooltipLabel","item","getPayloadConfigFromPayload","value","nestLabel","index","indicatorColor","Fragment","ChartLegend","ChartLegendContent","hideIcon","verticalAlign","payloadPayload","configLabelKey"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Chart.js","sources":["../../src/Chart/Chart.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as RechartsPrimitive from \"recharts\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\n// Format: { THEME_NAME: CSS_SELECTOR }\r\nconst THEMES = { light: \"\", dark: \".dark\" } as const\r\n\r\nexport type ChartConfig = {\r\n [k in string]: {\r\n label?: React.ReactNode\r\n icon?: React.ComponentType\r\n } & (\r\n | { color?: string; theme?: never }\r\n | { color?: never; theme: Record<keyof typeof THEMES, string> }\r\n )\r\n}\r\n\r\ntype ChartContextProps = {\r\n config: ChartConfig\r\n}\r\n\r\nconst ChartContext = React.createContext<ChartContextProps | null>(null)\r\n\r\nfunction useChart() {\r\n const context = React.useContext(ChartContext)\r\n\r\n if (!context) {\r\n throw new Error(\"useChart must be used within a <ChartContainer />\")\r\n }\r\n\r\n return context\r\n}\r\n\r\nconst ChartContainer = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentProps<\"div\"> & {\r\n config: ChartConfig\r\n children: React.ComponentProps<\r\n typeof RechartsPrimitive.ResponsiveContainer\r\n >[\"children\"]\r\n }\r\n>(({ id, className, children, config, ...props }, ref) => {\r\n const uniqueId = React.useId()\r\n const chartId = `chart-${id || uniqueId.replace(/:/g, \"\")}`\r\n\r\n return (\r\n <ChartContext.Provider value={{ config }}>\r\n <div\r\n data-chart={chartId}\r\n ref={ref}\r\n className={cn(\r\n \"flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-hidden [&_.recharts-surface]:outline-hidden\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n <ChartStyle id={chartId} config={config} />\r\n <RechartsPrimitive.ResponsiveContainer>\r\n {children}\r\n </RechartsPrimitive.ResponsiveContainer>\r\n </div>\r\n </ChartContext.Provider>\r\n )\r\n})\r\nChartContainer.displayName = \"Chart\"\r\n\r\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\r\n const colorConfig = Object.entries(config).filter(\r\n ([, config]) => config.theme || config.color\r\n )\r\n\r\n if (!colorConfig.length) {\r\n return null\r\n }\r\n\r\n return (\r\n <style\r\n dangerouslySetInnerHTML={{\r\n __html: Object.entries(THEMES)\r\n .map(\r\n ([theme, prefix]) => `\r\n${prefix} [data-chart=${id}] {\r\n${colorConfig\r\n .map(([key, itemConfig]) => {\r\n const color =\r\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||\r\n itemConfig.color\r\n return color ? ` --color-${key}: ${color};` : null\r\n })\r\n .join(\"\\n\")}\r\n}\r\n`\r\n )\r\n .join(\"\\n\"),\r\n }}\r\n />\r\n )\r\n}\r\n\r\nconst ChartTooltip = RechartsPrimitive.Tooltip\r\n\r\nconst ChartTooltipContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentProps<typeof RechartsPrimitive.Tooltip> &\r\n React.ComponentProps<\"div\"> & {\r\n hideLabel?: boolean\r\n hideIndicator?: boolean\r\n indicator?: \"line\" | \"dot\" | \"dashed\"\r\n nameKey?: string\r\n labelKey?: string\r\n }\r\n>(\r\n (\r\n {\r\n active,\r\n payload,\r\n className,\r\n indicator = \"dot\",\r\n hideLabel = false,\r\n hideIndicator = false,\r\n label,\r\n labelFormatter,\r\n labelClassName,\r\n formatter,\r\n color,\r\n nameKey,\r\n labelKey,\r\n },\r\n ref\r\n ) => {\r\n const { config } = useChart()\r\n\r\n const tooltipLabel = React.useMemo(() => {\r\n if (hideLabel || !payload?.length) {\r\n return null\r\n }\r\n\r\n const [item] = payload\r\n const key = `${labelKey || item.dataKey || item.name || \"value\"}`\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n const value =\r\n !labelKey && typeof label === \"string\"\r\n ? config[label as keyof typeof config]?.label || label\r\n : itemConfig?.label\r\n\r\n if (labelFormatter) {\r\n return (\r\n <div className={cn(\"font-medium\", labelClassName)}>\r\n {labelFormatter(value, payload)}\r\n </div>\r\n )\r\n }\r\n\r\n if (!value) {\r\n return null\r\n }\r\n\r\n return <div className={cn(\"font-medium\", labelClassName)}>{value}</div>\r\n }, [\r\n label,\r\n labelFormatter,\r\n payload,\r\n hideLabel,\r\n labelClassName,\r\n config,\r\n labelKey,\r\n ])\r\n\r\n if (!active || !payload?.length) {\r\n return null\r\n }\r\n\r\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"grid min-w-32 items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl\",\r\n className\r\n )}\r\n >\r\n {!nestLabel ? tooltipLabel : null}\r\n <div className=\"grid gap-1.5\">\r\n {payload.map((item, index) => {\r\n const key = `${nameKey || item.name || item.dataKey || \"value\"}`\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n const indicatorColor = color || item.payload.fill || item.color\r\n\r\n return (\r\n <div\r\n key={item.dataKey}\r\n className={cn(\r\n \"flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\r\n indicator === \"dot\" && \"items-center\"\r\n )}\r\n >\r\n {formatter && item?.value !== undefined && item.name ? (\r\n formatter(item.value, item.name, item, index, item.payload)\r\n ) : (\r\n <>\r\n {itemConfig?.icon ? (\r\n <itemConfig.icon />\r\n ) : (\r\n !hideIndicator && (\r\n <div\r\n className={cn(\r\n \"shrink-0 rounded-[2px] border-border bg-(--color-bg)\",\r\n {\r\n \"h-2.5 w-2.5\": indicator === \"dot\",\r\n \"w-1\": indicator === \"line\",\r\n \"w-0 border-[1.5px] border-dashed bg-transparent\":\r\n indicator === \"dashed\",\r\n \"my-0.5\": nestLabel && indicator === \"dashed\",\r\n }\r\n )}\r\n style={\r\n {\r\n \"--color-bg\": indicatorColor,\r\n \"--color-border\": indicatorColor,\r\n } as React.CSSProperties\r\n }\r\n />\r\n )\r\n )}\r\n <div\r\n className={cn(\r\n \"flex flex-1 justify-between leading-none\",\r\n nestLabel ? \"items-end\" : \"items-center\"\r\n )}\r\n >\r\n <div className=\"grid gap-1.5\">\r\n {nestLabel ? tooltipLabel : null}\r\n <span className=\"text-muted-foreground\">\r\n {itemConfig?.label || item.name}\r\n </span>\r\n </div>\r\n {item.value && (\r\n <span className=\"font-mono font-medium tabular-nums text-foreground\">\r\n {item.value.toLocaleString()}\r\n </span>\r\n )}\r\n </div>\r\n </>\r\n )}\r\n </div>\r\n )\r\n })}\r\n </div>\r\n </div>\r\n )\r\n }\r\n)\r\nChartTooltipContent.displayName = \"ChartTooltip\"\r\n\r\nconst ChartLegend = RechartsPrimitive.Legend\r\n\r\nconst ChartLegendContent = React.forwardRef<\r\n HTMLDivElement,\r\n React.ComponentProps<\"div\"> &\r\n Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\r\n hideIcon?: boolean\r\n nameKey?: string\r\n }\r\n>(\r\n (\r\n { className, hideIcon = false, payload, verticalAlign = \"bottom\", nameKey },\r\n ref\r\n ) => {\r\n const { config } = useChart()\r\n\r\n if (!payload?.length) {\r\n return null\r\n }\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"flex items-center justify-center gap-4\",\r\n verticalAlign === \"top\" ? \"pb-3\" : \"pt-3\",\r\n className\r\n )}\r\n >\r\n {payload.map((item) => {\r\n const key = `${nameKey || item.dataKey || \"value\"}`\r\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\r\n\r\n return (\r\n <div\r\n key={item.value}\r\n className={cn(\r\n \"flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\r\n )}\r\n >\r\n {itemConfig?.icon && !hideIcon ? (\r\n <itemConfig.icon />\r\n ) : (\r\n <div\r\n className=\"h-2 w-2 shrink-0 rounded-[2px]\"\r\n style={{\r\n backgroundColor: item.color,\r\n }}\r\n />\r\n )}\r\n {itemConfig?.label}\r\n </div>\r\n )\r\n })}\r\n </div>\r\n )\r\n }\r\n)\r\nChartLegendContent.displayName = \"ChartLegend\"\r\n\r\n// Helper to extract item config from a payload.\r\nfunction getPayloadConfigFromPayload(\r\n config: ChartConfig,\r\n payload: unknown,\r\n key: string\r\n) {\r\n if (typeof payload !== \"object\" || payload === null) {\r\n return undefined\r\n }\r\n\r\n const payloadPayload =\r\n \"payload\" in payload &&\r\n typeof payload.payload === \"object\" &&\r\n payload.payload !== null\r\n ? payload.payload\r\n : undefined\r\n\r\n let configLabelKey: string = key\r\n\r\n if (\r\n key in payload &&\r\n typeof payload[key as keyof typeof payload] === \"string\"\r\n ) {\r\n configLabelKey = payload[key as keyof typeof payload] as string\r\n } else if (\r\n payloadPayload &&\r\n key in payloadPayload &&\r\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\r\n ) {\r\n configLabelKey = payloadPayload[\r\n key as keyof typeof payloadPayload\r\n ] as string\r\n }\r\n\r\n return configLabelKey in config\r\n ? config[configLabelKey]\r\n : config[key as keyof typeof config]\r\n}\r\n\r\nexport {\r\n ChartContainer,\r\n ChartTooltip,\r\n ChartTooltipContent,\r\n ChartLegend,\r\n ChartLegendContent,\r\n ChartStyle,\r\n}\r\n"],"names":["THEMES","ChartContext","React","useChart","context","ChartContainer","id","className","children","config","props","ref","uniqueId","chartId","jsxs","cn","jsx","ChartStyle","RechartsPrimitive","colorConfig","theme","prefix","key","itemConfig","color","ChartTooltip","ChartTooltipContent","active","payload","indicator","hideLabel","hideIndicator","label","labelFormatter","labelClassName","formatter","nameKey","labelKey","tooltipLabel","item","getPayloadConfigFromPayload","value","nestLabel","index","indicatorColor","Fragment","ChartLegend","ChartLegendContent","hideIcon","verticalAlign","payloadPayload","configLabelKey"],"mappings":"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"}
|
package/Checkbox/Checkbox.js
CHANGED
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { jsx as t, jsxs as l } from "react/jsx-runtime";
|
|
2
2
|
import * as c from "@radix-ui/react-checkbox";
|
|
3
|
-
import { MinusIcon as m, CheckIcon as
|
|
3
|
+
import { MinusIcon as m, CheckIcon as h } from "lucide-react";
|
|
4
4
|
import * as d from "react";
|
|
5
5
|
import { cn as o } from "@oneplatformdev/utils";
|
|
6
|
-
import { Label as
|
|
7
|
-
import "../Label/labelVariants.js";
|
|
6
|
+
import { Label as p } from "../Label/Label.js";
|
|
8
7
|
const n = d.forwardRef(({ className: s, checked: a, indeterminate: e, ...r }, i) => {
|
|
9
|
-
const f = e ? m :
|
|
8
|
+
const f = e ? m : h;
|
|
10
9
|
return /* @__PURE__ */ t(
|
|
11
10
|
c.Root,
|
|
12
11
|
{
|
|
@@ -29,7 +28,7 @@ const n = d.forwardRef(({ className: s, checked: a, indeterminate: e, ...r }, i)
|
|
|
29
28
|
});
|
|
30
29
|
n.displayName = c.Root.displayName;
|
|
31
30
|
const x = d.forwardRef(({ label: s = "", children: a, labelProps: e, ...r }, i) => /* @__PURE__ */ l(
|
|
32
|
-
|
|
31
|
+
p,
|
|
33
32
|
{
|
|
34
33
|
ref: i,
|
|
35
34
|
...e,
|
package/Checkbox/Checkbox.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.js","sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\n\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\nimport { CheckIcon, MinusIcon } from 'lucide-react';\nimport * as React from 'react';\n\nimport { cn } from '@oneplatformdev/utils';\nimport type { CheckboxLabelProps, CheckboxProps } from './Checkbox.types';\n\nimport { Label } from '../Label';\n\nconst Checkbox = React.forwardRef<\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\n\tCheckboxProps\n>(({ className, checked, indeterminate, ...props }, ref) => {\n\tconst Icon = indeterminate ? MinusIcon : CheckIcon;\n\treturn (\n\t\t<CheckboxPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"peer size-5 shrink-0 rounded-sm\",\n 'shadow-none border',\n 'border-[#666A78] data-[state=checked]:border-[#9368FF]',\n 'bg-transparent data-[state=checked]:bg-[#9368FF]',\n 'bg-transparent data-[state=checked]:bg-[#9368FF] data-[state=checked]:text-[#fff]!',\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\t{...props}\n\t\t\tchecked={checked ?? indeterminate}\n\t\t>\n\t\t\t<CheckboxPrimitive.Indicator className={cn(\"flex items-center justify-center\")}>\n <Icon className=\"size-4 fill-[#9368FF] text-[#fff]!\" strokeWidth={2} />\n\t\t\t</CheckboxPrimitive.Indicator>\n\t\t</CheckboxPrimitive.Root>\n\t);\n});\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\n\nconst CheckboxLabel = React.forwardRef<\n\tHTMLLabelElement,\n\tCheckboxLabelProps\n>(({ label = '', children, labelProps, ...rest }, ref) => {\n\treturn (\n\t\t<Label\n\t\t\tref={ref}\n\t\t\t{...labelProps}\n className={cn(\n 'flex w-fit items-start gap-2 py-2 pl-1',\n 'text-[#06080D] text-md font-medium',\n 'cursor-pointer',\n labelProps?.className,\n )}\n\t\t\tstyle={labelProps?.style}\n\t\t>\n <div className='size-6 aspect-square flex items-center justify-center'>\n <Checkbox {...rest} />\n </div>\n <div className='flex flex-col w-fit gap-3'>\n <span className='inline-flex w-fit flex-col justify-start leading-[24px]'>{label}</span>\n {children}\n </div>\n\t\t</Label>\n\t);\n});\nCheckboxLabel.displayName = 'CheckboxLabel';\n\nexport { Checkbox, CheckboxLabel };\n"],"names":["Checkbox","React","className","checked","indeterminate","props","ref","Icon","MinusIcon","CheckIcon","jsx","CheckboxPrimitive","cn","CheckboxLabel","label","children","labelProps","rest","jsxs","Label"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../src/Checkbox/Checkbox.tsx"],"sourcesContent":["'use client';\r\n\r\nimport * as CheckboxPrimitive from '@radix-ui/react-checkbox';\r\nimport { CheckIcon, MinusIcon } from 'lucide-react';\r\nimport * as React from 'react';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport type { CheckboxLabelProps, CheckboxProps } from './Checkbox.types';\r\n\r\nimport { Label } from '../Label';\r\n\r\nconst Checkbox = React.forwardRef<\r\n\tReact.ElementRef<typeof CheckboxPrimitive.Root>,\r\n\tCheckboxProps\r\n>(({ className, checked, indeterminate, ...props }, ref) => {\r\n\tconst Icon = indeterminate ? MinusIcon : CheckIcon;\r\n\treturn (\r\n\t\t<CheckboxPrimitive.Root\r\n\t\t\tref={ref}\r\n\t\t\tclassName={cn(\r\n\t\t\t\t\"peer size-5 shrink-0 rounded-sm\",\r\n 'shadow-none border',\r\n 'border-[#666A78] data-[state=checked]:border-[#9368FF]',\r\n 'bg-transparent data-[state=checked]:bg-[#9368FF]',\r\n 'bg-transparent data-[state=checked]:bg-[#9368FF] data-[state=checked]:text-[#fff]!',\r\n 'focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring',\r\n 'disabled:cursor-not-allowed disabled:opacity-50',\r\n\t\t\t\tclassName\r\n\t\t\t)}\r\n\t\t\t{...props}\r\n\t\t\tchecked={checked ?? indeterminate}\r\n\t\t>\r\n\t\t\t<CheckboxPrimitive.Indicator className={cn(\"flex items-center justify-center\")}>\r\n <Icon className=\"size-4 fill-[#9368FF] text-[#fff]!\" strokeWidth={2} />\r\n\t\t\t</CheckboxPrimitive.Indicator>\r\n\t\t</CheckboxPrimitive.Root>\r\n\t);\r\n});\r\nCheckbox.displayName = CheckboxPrimitive.Root.displayName;\r\n\r\nconst CheckboxLabel = React.forwardRef<\r\n\tHTMLLabelElement,\r\n\tCheckboxLabelProps\r\n>(({ label = '', children, labelProps, ...rest }, ref) => {\r\n\treturn (\r\n\t\t<Label\r\n\t\t\tref={ref}\r\n\t\t\t{...labelProps}\r\n className={cn(\r\n 'flex w-fit items-start gap-2 py-2 pl-1',\r\n 'text-[#06080D] text-md font-medium',\r\n 'cursor-pointer',\r\n labelProps?.className,\r\n )}\r\n\t\t\tstyle={labelProps?.style}\r\n\t\t>\r\n <div className='size-6 aspect-square flex items-center justify-center'>\r\n <Checkbox {...rest} />\r\n </div>\r\n <div className='flex flex-col w-fit gap-3'>\r\n <span className='inline-flex w-fit flex-col justify-start leading-[24px]'>{label}</span>\r\n {children}\r\n </div>\r\n\t\t</Label>\r\n\t);\r\n});\r\nCheckboxLabel.displayName = 'CheckboxLabel';\r\n\r\nexport { Checkbox, CheckboxLabel };\r\n"],"names":["Checkbox","React","className","checked","indeterminate","props","ref","Icon","MinusIcon","CheckIcon","jsx","CheckboxPrimitive","cn","CheckboxLabel","label","children","labelProps","rest","jsxs","Label"],"mappings":";;;;;;AAWA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,SAAAC,GAAS,eAAAC,GAAe,GAAGC,EAAA,GAASC,MAAQ;AAC3D,QAAMC,IAAOH,IAAgBI,IAAYC;AACzC,SACC,gBAAAC;AAAA,IAACC,EAAkB;AAAA,IAAlB;AAAA,MACA,KAAAL;AAAA,MACA,WAAWM;AAAA,QACV;AAAA,QACI;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACJV;AAAA,MAAA;AAAA,MAEA,GAAGG;AAAA,MACJ,SAASF,KAAWC;AAAA,MAEpB,UAAA,gBAAAM,EAACC,EAAkB,WAAlB,EAA4B,WAAWC,EAAG,kCAAkC,GACxE,UAAA,gBAAAF,EAACH,GAAA,EAAK,WAAU,sCAAqC,aAAa,GAAG,EAAA,CAC1E;AAAA,IAAA;AAAA,EAAA;AAGH,CAAC;AACDP,EAAS,cAAcW,EAAkB,KAAK;AAE9C,MAAME,IAAgBZ,EAAM,WAG1B,CAAC,EAAE,OAAAa,IAAQ,IAAI,UAAAC,GAAU,YAAAC,GAAY,GAAGC,EAAA,GAAQX,MAEhD,gBAAAY;AAAA,EAACC;AAAA,EAAA;AAAA,IACA,KAAAb;AAAA,IACC,GAAGU;AAAA,IACD,WAAWJ;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACAI,GAAY;AAAA,IAAA;AAAA,IAEjB,OAAOA,GAAY;AAAA,IAEhB,UAAA;AAAA,MAAA,gBAAAN,EAAC,SAAI,WAAU,yDACb,4BAACV,GAAA,EAAU,GAAGiB,GAAM,EAAA,CACtB;AAAA,MACA,gBAAAC,EAAC,OAAA,EAAI,WAAU,6BACb,UAAA;AAAA,QAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,2DAA2D,UAAAI,GAAM;AAAA,QAChFC;AAAA,MAAA,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAAA,CAGL;AACDF,EAAc,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.stories.js","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport React from 'react';\nimport type { CheckedState } from '@radix-ui/react-checkbox';\n\nimport { Checkbox, CheckboxLabel } from './Checkbox';\n\nfunction ControlledCheckbox(props: React.ComponentProps<typeof Checkbox>) {\n const {\n checked: checkedProp,\n indeterminate: indeterminateProp,\n onCheckedChange,\n ...rest\n } = props;\n\n const [checked, setChecked] = React.useState<CheckedState>(checkedProp ?? false);\n const [indeterminate, setIndeterminate] = React.useState<boolean>(Boolean(indeterminateProp));\n\n // sync from Storybook controls\n React.useEffect(() => {\n setChecked(checkedProp ?? false);\n }, [checkedProp]);\n\n React.useEffect(() => {\n setIndeterminate(Boolean(indeterminateProp));\n }, [indeterminateProp]);\n\n const handleCheckedChange = (v: CheckedState) => {\n setChecked(v);\n\n // якщо прийшло indeterminate зі сторони Radix — підсвічуємо іконку мінуса\n if (v === 'indeterminate') setIndeterminate(true);\n\n onCheckedChange?.(v);\n };\n\n return (\n <Checkbox\n {...rest}\n checked={checked}\n indeterminate={indeterminate}\n onCheckedChange={handleCheckedChange}\n />\n );\n}\n\nfunction ControlledCheckboxLabel(props: React.ComponentProps<typeof CheckboxLabel>) {\n const {\n checked: checkedProp,\n indeterminate: indeterminateProp,\n onCheckedChange,\n ...rest\n } = props;\n\n const [checked, setChecked] = React.useState<CheckedState>(checkedProp ?? false);\n const [indeterminate, setIndeterminate] = React.useState<boolean>(Boolean(indeterminateProp));\n\n React.useEffect(() => {\n setChecked(checkedProp ?? false);\n }, [checkedProp]);\n\n React.useEffect(() => {\n setIndeterminate(Boolean(indeterminateProp));\n }, [indeterminateProp]);\n\n const handleCheckedChange = (v: CheckedState) => {\n setChecked(v);\n if (v === 'indeterminate') setIndeterminate(true);\n onCheckedChange?.(v);\n };\n\n return (\n <CheckboxLabel\n {...rest}\n checked={checked}\n indeterminate={indeterminate}\n onCheckedChange={handleCheckedChange}\n />\n );\n}\n\nconst meta: Meta<typeof Checkbox> = {\n title: 'Input/Checkbox',\n component: Checkbox,\n subcomponents: { CheckboxLabel },\n parameters: { layout: 'centered' },\n tags: ['autodocs'],\n args: {\n checked: false,\n indeterminate: false,\n disabled: false,\n },\n argTypes: {\n checked: { control: 'boolean' },\n indeterminate: { control: 'boolean' },\n disabled: { control: 'boolean' },\n className: { control: 'text' },\n },\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof Checkbox>;\n\nexport const Default: Story = {\n render: (args) => <ControlledCheckbox {...args} />,\n};\n\nexport const Indeterminate: Story = {\n args: { checked: false, indeterminate: true },\n render: (args) => <ControlledCheckbox {...args} />,\n};\n\nexport const Disabled: Story = {\n args: { disabled: true },\n render: (args) => <ControlledCheckbox {...args} />,\n};\n\nexport const Label: StoryObj<typeof CheckboxLabel> = {\n name: 'CheckboxLabel / Default',\n args: {\n label: 'Погоджуюсь з умовами',\n checked: false,\n indeterminate: false,\n disabled: false,\n },\n argTypes: {\n label: { control: 'text' },\n checked: { control: 'boolean' },\n indeterminate: { control: 'boolean' },\n disabled: { control: 'boolean' },\n },\n render: (args) => (\n <div style={{ width: 520 }}>\n <ControlledCheckboxLabel {...args} />\n </div>\n ),\n};\n\nexport const LabelWithDescription: StoryObj<typeof CheckboxLabel> = {\n name: 'CheckboxLabel / With description',\n args: {\n label: 'Отримувати новини на email',\n checked: true,\n indeterminate: false,\n disabled: false,\n },\n render: (args) => (\n <div style={{ width: 520 }}>\n <ControlledCheckboxLabel {...args}>\n <span style={{ fontSize: 14, opacity: 0.75 }}>\n Можна відписатися будь-коли в налаштуваннях профілю.\n </span>\n </ControlledCheckboxLabel>\n </div>\n ),\n};\n"],"names":["ControlledCheckbox","props","checkedProp","indeterminateProp","onCheckedChange","rest","checked","setChecked","React","indeterminate","setIndeterminate","jsx","Checkbox","v","ControlledCheckboxLabel","CheckboxLabel","meta","Default","args","Indeterminate","Disabled","Label","LabelWithDescription"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Checkbox.stories.js","sources":["../../src/Checkbox/Checkbox.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\r\nimport React from 'react';\r\nimport type { CheckedState } from '@radix-ui/react-checkbox';\r\n\r\nimport { Checkbox, CheckboxLabel } from './Checkbox';\r\n\r\nfunction ControlledCheckbox(props: React.ComponentProps<typeof Checkbox>) {\r\n const {\r\n checked: checkedProp,\r\n indeterminate: indeterminateProp,\r\n onCheckedChange,\r\n ...rest\r\n } = props;\r\n\r\n const [checked, setChecked] = React.useState<CheckedState>(checkedProp ?? false);\r\n const [indeterminate, setIndeterminate] = React.useState<boolean>(Boolean(indeterminateProp));\r\n\r\n // sync from Storybook controls\r\n React.useEffect(() => {\r\n setChecked(checkedProp ?? false);\r\n }, [checkedProp]);\r\n\r\n React.useEffect(() => {\r\n setIndeterminate(Boolean(indeterminateProp));\r\n }, [indeterminateProp]);\r\n\r\n const handleCheckedChange = (v: CheckedState) => {\r\n setChecked(v);\r\n\r\n // якщо прийшло indeterminate зі сторони Radix — підсвічуємо іконку мінуса\r\n if (v === 'indeterminate') setIndeterminate(true);\r\n\r\n onCheckedChange?.(v);\r\n };\r\n\r\n return (\r\n <Checkbox\r\n {...rest}\r\n checked={checked}\r\n indeterminate={indeterminate}\r\n onCheckedChange={handleCheckedChange}\r\n />\r\n );\r\n}\r\n\r\nfunction ControlledCheckboxLabel(props: React.ComponentProps<typeof CheckboxLabel>) {\r\n const {\r\n checked: checkedProp,\r\n indeterminate: indeterminateProp,\r\n onCheckedChange,\r\n ...rest\r\n } = props;\r\n\r\n const [checked, setChecked] = React.useState<CheckedState>(checkedProp ?? false);\r\n const [indeterminate, setIndeterminate] = React.useState<boolean>(Boolean(indeterminateProp));\r\n\r\n React.useEffect(() => {\r\n setChecked(checkedProp ?? false);\r\n }, [checkedProp]);\r\n\r\n React.useEffect(() => {\r\n setIndeterminate(Boolean(indeterminateProp));\r\n }, [indeterminateProp]);\r\n\r\n const handleCheckedChange = (v: CheckedState) => {\r\n setChecked(v);\r\n if (v === 'indeterminate') setIndeterminate(true);\r\n onCheckedChange?.(v);\r\n };\r\n\r\n return (\r\n <CheckboxLabel\r\n {...rest}\r\n checked={checked}\r\n indeterminate={indeterminate}\r\n onCheckedChange={handleCheckedChange}\r\n />\r\n );\r\n}\r\n\r\nconst meta: Meta<typeof Checkbox> = {\r\n title: 'Input/Checkbox',\r\n component: Checkbox,\r\n subcomponents: { CheckboxLabel },\r\n parameters: { layout: 'centered' },\r\n tags: ['autodocs'],\r\n args: {\r\n checked: false,\r\n indeterminate: false,\r\n disabled: false,\r\n },\r\n argTypes: {\r\n checked: { control: 'boolean' },\r\n indeterminate: { control: 'boolean' },\r\n disabled: { control: 'boolean' },\r\n className: { control: 'text' },\r\n },\r\n};\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof Checkbox>;\r\n\r\nexport const Default: Story = {\r\n render: (args) => <ControlledCheckbox {...args} />,\r\n};\r\n\r\nexport const Indeterminate: Story = {\r\n args: { checked: false, indeterminate: true },\r\n render: (args) => <ControlledCheckbox {...args} />,\r\n};\r\n\r\nexport const Disabled: Story = {\r\n args: { disabled: true },\r\n render: (args) => <ControlledCheckbox {...args} />,\r\n};\r\n\r\nexport const Label: StoryObj<typeof CheckboxLabel> = {\r\n name: 'CheckboxLabel / Default',\r\n args: {\r\n label: 'Погоджуюсь з умовами',\r\n checked: false,\r\n indeterminate: false,\r\n disabled: false,\r\n },\r\n argTypes: {\r\n label: { control: 'text' },\r\n checked: { control: 'boolean' },\r\n indeterminate: { control: 'boolean' },\r\n disabled: { control: 'boolean' },\r\n },\r\n render: (args) => (\r\n <div style={{ width: 520 }}>\r\n <ControlledCheckboxLabel {...args} />\r\n </div>\r\n ),\r\n};\r\n\r\nexport const LabelWithDescription: StoryObj<typeof CheckboxLabel> = {\r\n name: 'CheckboxLabel / With description',\r\n args: {\r\n label: 'Отримувати новини на email',\r\n checked: true,\r\n indeterminate: false,\r\n disabled: false,\r\n },\r\n render: (args) => (\r\n <div style={{ width: 520 }}>\r\n <ControlledCheckboxLabel {...args}>\r\n <span style={{ fontSize: 14, opacity: 0.75 }}>\r\n Можна відписатися будь-коли в налаштуваннях профілю.\r\n </span>\r\n </ControlledCheckboxLabel>\r\n </div>\r\n ),\r\n};\r\n"],"names":["ControlledCheckbox","props","checkedProp","indeterminateProp","onCheckedChange","rest","checked","setChecked","React","indeterminate","setIndeterminate","jsx","Checkbox","v","ControlledCheckboxLabel","CheckboxLabel","meta","Default","args","Indeterminate","Disabled","Label","LabelWithDescription"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Collapsible.js","sources":["../../src/Collapsible/Collapsible.tsx"],"sourcesContent":["\"use client\"\n\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\n\nconst Collapsible = CollapsiblePrimitive.Root\n\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\n\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\n\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\n"],"names":["Collapsible","CollapsiblePrimitive","CollapsibleTrigger","CollapsibleContent"],"mappings":";AAIA,MAAMA,IAAcC,EAAqB,MAEnCC,IAAqBD,EAAqB,oBAE1CE,IAAqBF,EAAqB;"}
|
|
1
|
+
{"version":3,"file":"Collapsible.js","sources":["../../src/Collapsible/Collapsible.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as CollapsiblePrimitive from \"@radix-ui/react-collapsible\"\r\n\r\nconst Collapsible = CollapsiblePrimitive.Root\r\n\r\nconst CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger\r\n\r\nconst CollapsibleContent = CollapsiblePrimitive.CollapsibleContent\r\n\r\nexport { Collapsible, CollapsibleTrigger, CollapsibleContent }\r\n"],"names":["Collapsible","CollapsiblePrimitive","CollapsibleTrigger","CollapsibleContent"],"mappings":";AAIA,MAAMA,IAAcC,EAAqB,MAEnCC,IAAqBD,EAAqB,oBAE1CE,IAAqBF,EAAqB;"}
|
package/Combobox/Combobox.js
CHANGED
|
@@ -1,21 +1,19 @@
|
|
|
1
1
|
import { jsx as e, jsxs as p, Fragment as j } from "react/jsx-runtime";
|
|
2
2
|
import { useState as s, useCallback as f, useEffect as se, useMemo as A, useLayoutEffect as le } from "react";
|
|
3
|
-
import { LoadingMask as X } from "../LoadingMask/LoadingMask.js";
|
|
4
|
-
import "../LoadingMask/RenderLoadingMask.js";
|
|
5
|
-
import { Popover as ce, PopoverTrigger as de, PopoverContent as pe } from "../Popover/Popover.js";
|
|
6
|
-
import { Button as fe } from "../Button/Button.js";
|
|
7
|
-
import "../Button/buttonVariants.js";
|
|
8
|
-
import { Command as me, CommandInput as ue, CommandList as he, CommandGroup as ge, CommandEmpty as _, CommandItem as be } from "../Command/Command.js";
|
|
9
3
|
import { cn as F } from "@oneplatformdev/utils";
|
|
10
|
-
import { useDebounceCallback as
|
|
11
|
-
import { X as
|
|
12
|
-
import { ComboboxOptions as
|
|
4
|
+
import { useDebounceCallback as ce } from "@oneplatformdev/hooks";
|
|
5
|
+
import { X as de, ChevronDown as pe } from "lucide-react";
|
|
6
|
+
import { ComboboxOptions as fe } from "./ComboboxOptions.js";
|
|
7
|
+
import { Popover as me, PopoverTrigger as ue, PopoverContent as he } from "../Popover/Popover.js";
|
|
8
|
+
import { Button as ge } from "../Button/Button.js";
|
|
9
|
+
import { LoadingMask as X } from "../LoadingMask/LoadingMask.js";
|
|
10
|
+
import { Command as be, CommandInput as ye, CommandList as ve, CommandGroup as Ce, CommandEmpty as _, CommandItem as we } from "../Command/Command.js";
|
|
13
11
|
const xe = (O) => {
|
|
14
12
|
const { value: n, flattenOptions: S = [], selectedOption: L } = O;
|
|
15
13
|
if (!n) return "No value for render label";
|
|
16
14
|
const y = [S.find((m) => String(m.value).toLowerCase() === String(n).toLowerCase()), L].filter(Boolean).map((m) => m.label).find(Boolean);
|
|
17
15
|
return y || n;
|
|
18
|
-
},
|
|
16
|
+
}, Ee = (O) => {
|
|
19
17
|
const {
|
|
20
18
|
value: n,
|
|
21
19
|
onChange: S,
|
|
@@ -34,7 +32,7 @@ const xe = (O) => {
|
|
|
34
32
|
defaultNodeMatched: K,
|
|
35
33
|
defaultNodeMuted: Q,
|
|
36
34
|
defaultNodeInteractive: Y
|
|
37
|
-
} = O, [G, W] = s(!1), [l, M] = s(!1), [
|
|
35
|
+
} = O, [G, W] = s(!1), [l, M] = s(!1), [a, P] = s(""), [u, B] = s(), [o, c] = s(!1), [r, Z] = s([]), [$, ee] = s([]), h = f((t) => {
|
|
38
36
|
const g = (E) => {
|
|
39
37
|
const i = [], V = (x) => {
|
|
40
38
|
if (x)
|
|
@@ -69,21 +67,21 @@ const xe = (O) => {
|
|
|
69
67
|
} finally {
|
|
70
68
|
c(!1);
|
|
71
69
|
}
|
|
72
|
-
}, [h]), ne =
|
|
70
|
+
}, [h]), ne = ce(q, 1e3, {
|
|
73
71
|
leading: !1,
|
|
74
72
|
trailing: !0
|
|
75
73
|
}), oe = f((t) => {
|
|
76
74
|
c(!0), P(t), ne(t);
|
|
77
75
|
}, []), z = f((t) => {
|
|
78
76
|
S(t.value), B(t), c(!1);
|
|
79
|
-
}, []),
|
|
77
|
+
}, []), ae = f(() => {
|
|
80
78
|
z({ value: "", label: "" }), B(void 0), c(!1);
|
|
81
|
-
}, []), H = A(() => !!
|
|
82
|
-
options:
|
|
79
|
+
}, []), H = A(() => !!a && !r.length && !o, [o, r.length, a]), U = A(() => !r.length && !o, [o, r.length, a]), d = A(() => ({
|
|
80
|
+
options: r,
|
|
83
81
|
setOptions: h,
|
|
84
82
|
selectedOption: u,
|
|
85
83
|
setSelectedOption: B,
|
|
86
|
-
search:
|
|
84
|
+
search: a || "",
|
|
87
85
|
setSearch: P,
|
|
88
86
|
open: l,
|
|
89
87
|
setOpen: M,
|
|
@@ -91,7 +89,7 @@ const xe = (O) => {
|
|
|
91
89
|
setLoading: c,
|
|
92
90
|
isEmptyList: U,
|
|
93
91
|
isSearchedEmptyList: H
|
|
94
|
-
}), [o, l,
|
|
92
|
+
}), [o, l, r, a, u, U, H, h]), re = f(async () => {
|
|
95
93
|
if (D) {
|
|
96
94
|
W(!0);
|
|
97
95
|
try {
|
|
@@ -102,17 +100,17 @@ const xe = (O) => {
|
|
|
102
100
|
}
|
|
103
101
|
}, [D, d]);
|
|
104
102
|
return le(() => {
|
|
105
|
-
|
|
103
|
+
re();
|
|
106
104
|
}, []), /* @__PURE__ */ e("div", { className: "w-full", children: /* @__PURE__ */ p(
|
|
107
|
-
|
|
105
|
+
me,
|
|
108
106
|
{
|
|
109
107
|
open: l,
|
|
110
108
|
onOpenChange: (t) => {
|
|
111
109
|
M(t), t && te();
|
|
112
110
|
},
|
|
113
111
|
children: [
|
|
114
|
-
/* @__PURE__ */ e(
|
|
115
|
-
|
|
112
|
+
/* @__PURE__ */ e(ue, { asChild: !0, className: "border-input", children: /* @__PURE__ */ e(
|
|
113
|
+
ge,
|
|
116
114
|
{
|
|
117
115
|
color: "secondary",
|
|
118
116
|
role: "combobox",
|
|
@@ -142,38 +140,38 @@ const xe = (O) => {
|
|
|
142
140
|
"opacity-50 cursor-pointer hover:opacity-100"
|
|
143
141
|
),
|
|
144
142
|
onClick: (t) => {
|
|
145
|
-
t.stopPropagation(),
|
|
143
|
+
t.stopPropagation(), ae();
|
|
146
144
|
},
|
|
147
|
-
children: /* @__PURE__ */ e(
|
|
145
|
+
children: /* @__PURE__ */ e(de, {})
|
|
148
146
|
}
|
|
149
|
-
) : /* @__PURE__ */ e(
|
|
147
|
+
) : /* @__PURE__ */ e(pe, { className: "opacity-50 w-4 h-4" })
|
|
150
148
|
] })
|
|
151
149
|
}
|
|
152
150
|
) }),
|
|
153
151
|
/* @__PURE__ */ e(
|
|
154
|
-
|
|
152
|
+
he,
|
|
155
153
|
{
|
|
156
154
|
className: "w-(--radix-popper-anchor-width) max-w-none p-0",
|
|
157
155
|
align: "start",
|
|
158
|
-
children: /* @__PURE__ */ p(
|
|
156
|
+
children: /* @__PURE__ */ p(be, { shouldFilter: !1, children: [
|
|
159
157
|
/* @__PURE__ */ e(
|
|
160
|
-
|
|
158
|
+
ye,
|
|
161
159
|
{
|
|
162
160
|
placeholder: y,
|
|
163
|
-
value:
|
|
161
|
+
value: a,
|
|
164
162
|
onValueChange: oe
|
|
165
163
|
}
|
|
166
164
|
),
|
|
167
165
|
typeof k == "function" ? k(d) : k,
|
|
168
|
-
/* @__PURE__ */ e(
|
|
166
|
+
/* @__PURE__ */ e(ve, { children: /* @__PURE__ */ p(Ce, { className: F(!r.length && "p-0 shadow-none"), children: [
|
|
169
167
|
o && /* @__PURE__ */ e(X, { fullWidth: !0 }),
|
|
170
|
-
!o && !!
|
|
168
|
+
!o && !!a && /* @__PURE__ */ e(j, { children: v ? /* @__PURE__ */ p(_, { className: "flex flex-col gap-3 py-5 px-3 items-center", children: [
|
|
171
169
|
/* @__PURE__ */ e("span", { children: R }),
|
|
172
170
|
typeof v == "function" ? v(d) : v
|
|
173
171
|
] }) : /* @__PURE__ */ e(_, { children: R }) }),
|
|
174
172
|
!o && /* @__PURE__ */ p(j, { children: [
|
|
175
173
|
C && /* @__PURE__ */ e(
|
|
176
|
-
|
|
174
|
+
we,
|
|
177
175
|
{
|
|
178
176
|
asChild: !0,
|
|
179
177
|
className: "w-full",
|
|
@@ -182,11 +180,11 @@ const xe = (O) => {
|
|
|
182
180
|
"combobox-list-head-action"
|
|
183
181
|
),
|
|
184
182
|
/* @__PURE__ */ e(
|
|
185
|
-
|
|
183
|
+
fe,
|
|
186
184
|
{
|
|
187
|
-
searchTerm:
|
|
185
|
+
searchTerm: a,
|
|
188
186
|
value: n,
|
|
189
|
-
options:
|
|
187
|
+
options: r,
|
|
190
188
|
onChangeOption: z,
|
|
191
189
|
setOpen: M,
|
|
192
190
|
defaultNodeDisabled: J,
|
|
@@ -213,6 +211,6 @@ const xe = (O) => {
|
|
|
213
211
|
) });
|
|
214
212
|
};
|
|
215
213
|
export {
|
|
216
|
-
|
|
214
|
+
Ee as Combobox
|
|
217
215
|
};
|
|
218
216
|
//# sourceMappingURL=Combobox.js.map
|