@oneplatformdev/ui 0.1.99-beta.34 → 0.1.99-beta.36
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.d.ts +1 -1
- package/Accordion/Accordion.d.ts.map +1 -1
- package/Accordion/Accordion.js +26 -48
- 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 -3
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +18 -19
- 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 +1 -2
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js.map +1 -1
- package/Button/ButtonCounterBadge.js.map +1 -1
- package/Button/buttonVariants.js +1 -1
- package/Button/buttonVariants.js.map +1 -1
- package/ButtonIcon/ButtonIcon.js +18 -19
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.js +1 -1
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +1874 -1949
- package/Calendar/Calendar.js +0 -1
- 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 +17 -18
- package/Checkbox/Checkbox.js.map +1 -1
- package/Collapsible/Collapsible.js.map +1 -1
- package/Combobox/Combobox.js +30 -32
- 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 +8 -9
- package/Combobox/ComboboxOptions.js.map +1 -1
- package/Command/Command.js +25 -26
- package/Command/Command.js.map +1 -1
- package/DataTable/DataTable.js +12 -13
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/DataTableColumnFilter.js +6 -7
- package/DataTable/DataTableColumnFilter.js.map +1 -1
- package/DataTable/useDataTable.d.ts +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.map +1 -1
- package/Dialog/DialogOverlayScope.js.map +1 -1
- package/Drawer/Drawer.js.map +1 -1
- package/DropdownMenu/DropdownMenu.d.ts.map +1 -1
- package/DropdownMenu/DropdownMenu.js +20 -33
- 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.d.ts.map +1 -1
- package/Form/FormRenderControl.js +26 -13
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/FormRenderControl.types.d.ts +2 -1
- package/Form/FormRenderControl.types.d.ts.map +1 -1
- package/Form/FormTooltipButton.d.ts +6 -0
- package/Form/FormTooltipButton.d.ts.map +1 -0
- package/Form/FormTooltipButton.js +33 -0
- package/Form/FormTooltipButton.js.map +1 -0
- 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 +22 -21
- package/FormInput/FormInput.js.map +1 -1
- package/FormRadio/FormRadio.js.map +1 -1
- package/FormSelect/FormSelect.js +22 -25
- 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/Input/Input.js.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 +8 -8
- 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 +17 -21
- 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 +17 -17
- 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/index.js +278 -278
- package/package.json +4 -4
package/Button/Button.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { ButtonVarianceProps, buttonVariants } from './buttonVariants';\nimport { ButtonAdornmentProps, type ButtonProps } from './Button.types';\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { createElement, isValidElement } from \"react\";\n\nconst normalizedVariantProperties = (props: ButtonVarianceProps): ButtonVarianceProps => {\n const { variant, size, color } = props;\n const vls = { color, variant, size }\n if ((variant as string) === 'default') {\n console.warn('Button variant \"default\" is deprecated. Please use \"variant=contained color=primary\" instead.')\n vls.variant = 'contained'\n vls.color = 'primary'\n return vls\n }\n if ((size as string) === 'icon') {\n console.warn('Button size \"icon\" is deprecated. Please use \"<ButtonIcon/>\" component instead.')\n vls.variant = 'contained'\n vls.color = 'secondary'\n return vls\n // throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n }\n if ((variant as string) === 'transparent') {\n console.warn('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\n }\n if ((variant as string) === 'outline') {\n console.warn('Button variant \"outline\" is deprecated. Please use \"variant=outlined color=primary\" instead.')\n vls.variant = 'outlined'\n vls.color = 'primary'\n return vls\n }\n if ((variant as string) === 'secondary') {\n console.warn('Button variant \"secondary\" is deprecated. Please use \"variant=contained color=secondary\" instead.')\n vls.variant = 'contained'\n vls.color = 'secondary'\n return vls\n }\n if ((variant as string) === 'destructive') {\n console.warn('Button variant \"destructive\" is deprecated. Please use \"variant=contained color=error\" instead.')\n vls.variant = 'contained'\n vls.color = 'error'\n return vls\n }\n return vls;\n}\n\nconst renderAdornment = (Adornment?: ButtonAdornmentProps) => {\n if (!Adornment) return null;\n if (isValidElement(Adornment)) return Adornment;\n return createElement(Adornment);\n};\n\n/**\n * Universal Button component used for triggering actions and UI interactions.\n * Supports variants, sizes, colors, start/end icon adornments, custom slot content,\n * tooltip integration, loading state, and polymorphic rendering via `asChild`.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { Button } from '@oneplatformdev/ui/Button';\n * ```\n * > Basic usage:\n * ```tsx\n * <Button>Click me</Button>\n * ```\n * > Variant and size:\n * ```tsx\n * <Button variant=\"outline\" size=\"lg\">Large Button</Button>\n * ```\n * > With icons:\n * ```tsx\n * <Button startAdornment={<PlusIcon />}>Create</Button>\n * <Button endAdornment={<ArrowRightIcon />}>Next</Button>\n * ```\n * > Icon style button:\n * ```tsx\n * <Button size=\"icon\">\n * <PlusIcon />\n * </Button>\n * ```\n * > Polymorphic rendering (`asChild`):\n * ```tsx\n * <Button asChild>\n * <a href=\"/dashboard\">Go to Dashboard</a>\n * </Button>\n * ```\n * > Tooltip via `message` or native `title`:\n * ```tsx\n * <Button title=\"Tooltip text\">Hover me</Button>\n * <Button message=\"Tooltip content\">Hover me</Button>\n * ```\n * > Loading state:\n * ```tsx\n * <Button loading>Processing...</Button>\n * ```\n * > Disabled:\n * ```tsx\n * <Button disabled>Disabled</Button>\n * ```\n *\n * Sizes\n * xs — compact, for tight UI areas. Classes: rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14.\n * sm — small; slightly larger than xs. Classes: rounded-md p-1 gap-1 text-sm min-h-6 min-w-20.\n * md — default/text-heavy buttons. Classes: min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1 text-sm leading-[1.12] [&_svg]:size-6.\n * lg — large/call-to-action. Classes: min-h-10 min-w-35 rounded-lg gap-1 px-3 py-2 text-base leading-normal [&_svg]:size-6.\n *\n * @remarks\n * - Designed for texted usage. If you need icon-only, use `ButtonIcon`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link ButtonIcon} for icon-only buttons\n */\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n (props, ref) => {\n const {\n disabled,\n className,\n variant,\n color,\n size,\n asChild = false,\n title = '',\n tooltip,\n tooltipProps = {},\n message,\n loading = false,\n children,\n startAdornment,\n endAdornment,\n screenReader,\n ...rest\n } = props;\n const Comp = asChild ? Slot : \"button\"\n const msg = message || tooltip || title;\n\n const content = asChild\n ? children\n : (\n <>\n {!!startAdornment && (\n <LoadedIcon loading={loading} size={size}>\n {renderAdornment(startAdornment)}\n </LoadedIcon>\n )}\n\n {children}\n\n {!!endAdornment && (\n <LoadedIcon loading={loading} size={size}>\n {renderAdornment(endAdornment)}\n </LoadedIcon>\n )}\n\n {!!screenReader && <span className=\"sr-only\">{typeof screenReader === 'string' ? screenReader : screenReader.text}</span>}\n </>\n )\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n buttonVariants({\n ...normalizedVariantProperties({ variant, size, color }),\n className\n }),\n loading && 'pointer-events-none opacity-80 user-select-none',\n )}\n {...rest}\n >\n {content}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButton.displayName = \"Button\"\nexport default Button;\n"],"names":["normalizedVariantProperties","props","variant","size","color","vls","renderAdornment","Adornment","isValidElement","createElement","Button","React","ref","disabled","className","asChild","title","tooltip","tooltipProps","message","loading","children","startAdornment","endAdornment","screenReader","rest","Comp","Slot","msg","content","jsxs","Fragment","jsx","LoadedIcon","cmp","cn","buttonVariants","Tooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Button.js","sources":["../../src/Button/Button.tsx"],"sourcesContent":["import * as React from \"react\"\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { ButtonVarianceProps, buttonVariants } from './buttonVariants';\r\nimport { ButtonAdornmentProps, type ButtonProps } from './Button.types';\r\n\r\nimport { Tooltip } from '../Tooltip';\r\nimport { LoadedIcon } from \"../LoadedIcon\";\r\nimport { createElement, isValidElement } from \"react\";\r\n\r\nconst normalizedVariantProperties = (props: ButtonVarianceProps): ButtonVarianceProps => {\r\n const { variant, size, color } = props;\r\n const vls = { color, variant, size }\r\n if ((variant as string) === 'default') {\r\n console.warn('Button variant \"default\" is deprecated. Please use \"variant=contained color=primary\" instead.')\r\n vls.variant = 'contained'\r\n vls.color = 'primary'\r\n return vls\r\n }\r\n if ((size as string) === 'icon') {\r\n console.warn('Button size \"icon\" is deprecated. Please use \"<ButtonIcon/>\" component instead.')\r\n vls.variant = 'contained'\r\n vls.color = 'secondary'\r\n return vls\r\n // throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\r\n }\r\n if ((variant as string) === 'transparent') {\r\n console.warn('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\r\n throw new Error('Button variant \"transparent\" is removed. Please use \"variant=none\" instead.')\r\n }\r\n if ((variant as string) === 'outline') {\r\n console.warn('Button variant \"outline\" is deprecated. Please use \"variant=outlined color=primary\" instead.')\r\n vls.variant = 'outlined'\r\n vls.color = 'primary'\r\n return vls\r\n }\r\n if ((variant as string) === 'secondary') {\r\n console.warn('Button variant \"secondary\" is deprecated. Please use \"variant=contained color=secondary\" instead.')\r\n vls.variant = 'contained'\r\n vls.color = 'secondary'\r\n return vls\r\n }\r\n if ((variant as string) === 'destructive') {\r\n console.warn('Button variant \"destructive\" is deprecated. Please use \"variant=contained color=error\" instead.')\r\n vls.variant = 'contained'\r\n vls.color = 'error'\r\n return vls\r\n }\r\n return vls;\r\n}\r\n\r\nconst renderAdornment = (Adornment?: ButtonAdornmentProps) => {\r\n if (!Adornment) return null;\r\n if (isValidElement(Adornment)) return Adornment;\r\n return createElement(Adornment);\r\n};\r\n\r\n/**\r\n * Universal Button component used for triggering actions and UI interactions.\r\n * Supports variants, sizes, colors, start/end icon adornments, custom slot content,\r\n * tooltip integration, loading state, and polymorphic rendering via `asChild`.\r\n *\r\n * @public\r\n * @see [Documentation](#) // TODO: add link to docs\r\n *\r\n * @example\r\n * > Import:\r\n * ```tsx\r\n * import { Button } from '@oneplatformdev/ui/Button';\r\n * ```\r\n * > Basic usage:\r\n * ```tsx\r\n * <Button>Click me</Button>\r\n * ```\r\n * > Variant and size:\r\n * ```tsx\r\n * <Button variant=\"outline\" size=\"lg\">Large Button</Button>\r\n * ```\r\n * > With icons:\r\n * ```tsx\r\n * <Button startAdornment={<PlusIcon />}>Create</Button>\r\n * <Button endAdornment={<ArrowRightIcon />}>Next</Button>\r\n * ```\r\n * > Icon style button:\r\n * ```tsx\r\n * <Button size=\"icon\">\r\n * <PlusIcon />\r\n * </Button>\r\n * ```\r\n * > Polymorphic rendering (`asChild`):\r\n * ```tsx\r\n * <Button asChild>\r\n * <a href=\"/dashboard\">Go to Dashboard</a>\r\n * </Button>\r\n * ```\r\n * > Tooltip via `message` or native `title`:\r\n * ```tsx\r\n * <Button title=\"Tooltip text\">Hover me</Button>\r\n * <Button message=\"Tooltip content\">Hover me</Button>\r\n * ```\r\n * > Loading state:\r\n * ```tsx\r\n * <Button loading>Processing...</Button>\r\n * ```\r\n * > Disabled:\r\n * ```tsx\r\n * <Button disabled>Disabled</Button>\r\n * ```\r\n *\r\n * Sizes\r\n * xs — compact, for tight UI areas. Classes: rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14.\r\n * sm — small; slightly larger than xs. Classes: rounded-md p-1 gap-1 text-sm min-h-6 min-w-20.\r\n * md — default/text-heavy buttons. Classes: min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1 text-sm leading-[1.12] [&_svg]:size-6.\r\n * lg — large/call-to-action. Classes: min-h-10 min-w-35 rounded-lg gap-1 px-3 py-2 text-base leading-normal [&_svg]:size-6.\r\n *\r\n * @remarks\r\n * - Designed for texted usage. If you need icon-only, use `ButtonIcon`.\r\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\r\n *\r\n * @see {@link ButtonIcon} for icon-only buttons\r\n */\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n (props, ref) => {\r\n const {\r\n disabled,\r\n className,\r\n variant,\r\n color,\r\n size,\r\n asChild = false,\r\n title = '',\r\n tooltip,\r\n tooltipProps = {},\r\n message,\r\n loading = false,\r\n children,\r\n startAdornment,\r\n endAdornment,\r\n screenReader,\r\n ...rest\r\n } = props;\r\n const Comp = asChild ? Slot : \"button\"\r\n const msg = message || tooltip || title;\r\n\r\n const content = asChild\r\n ? children\r\n : (\r\n <>\r\n {!!startAdornment && (\r\n <LoadedIcon loading={loading} size={size}>\r\n {renderAdornment(startAdornment)}\r\n </LoadedIcon>\r\n )}\r\n\r\n {children}\r\n\r\n {!!endAdornment && (\r\n <LoadedIcon loading={loading} size={size}>\r\n {renderAdornment(endAdornment)}\r\n </LoadedIcon>\r\n )}\r\n\r\n {!!screenReader && <span className=\"sr-only\">{typeof screenReader === 'string' ? screenReader : screenReader.text}</span>}\r\n </>\r\n )\r\n\r\n const cmp = (\r\n <Comp\r\n type='button'\r\n ref={ref}\r\n disabled={disabled}\r\n className={cn(\r\n buttonVariants({\r\n ...normalizedVariantProperties({ variant, size, color }),\r\n className\r\n }),\r\n loading && 'pointer-events-none opacity-80 user-select-none',\r\n )}\r\n {...rest}\r\n >\r\n {content}\r\n </Comp>\r\n )\r\n\r\n if (!msg) return cmp\r\n return (\r\n <Tooltip\r\n {...(tooltipProps || {})}\r\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\r\n message={msg}\r\n >\r\n {cmp}\r\n </Tooltip>\r\n )\r\n }\r\n)\r\nButton.displayName = \"Button\"\r\nexport default Button;\r\n"],"names":["normalizedVariantProperties","props","variant","size","color","vls","renderAdornment","Adornment","isValidElement","createElement","Button","React","ref","disabled","className","asChild","title","tooltip","tooltipProps","message","loading","children","startAdornment","endAdornment","screenReader","rest","Comp","Slot","msg","content","jsxs","Fragment","jsx","LoadedIcon","cmp","cn","buttonVariants","Tooltip"],"mappings":";;;;;;;;AAWA,MAAMA,IAA8B,CAACC,MAAoD;AACvF,QAAM,EAAE,SAAAC,GAAS,MAAAC,GAAM,OAAAC,EAAA,IAAUH,GAC3BI,IAAM,EAAE,OAAAD,GAAO,SAAAF,GAAS,MAAAC,EAAA;AAC9B,MAAKD,MAAuB;AAC1B,mBAAQ,KAAK,+FAA+F,GAC5GG,EAAI,UAAU,aACdA,EAAI,QAAQ,WACLA;AAET,MAAKF,MAAoB;AACvB,mBAAQ,KAAK,iFAAiF,GAC9FE,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA;AAGT,MAAKH,MAAuB;AAC1B,kBAAQ,KAAK,6EAA6E,GACpF,IAAI,MAAM,6EAA6E;AAE/F,SAAKA,MAAuB,aAC1B,QAAQ,KAAK,8FAA8F,GAC3GG,EAAI,UAAU,YACdA,EAAI,QAAQ,WACLA,KAEJH,MAAuB,eAC1B,QAAQ,KAAK,mGAAmG,GAChHG,EAAI,UAAU,aACdA,EAAI,QAAQ,aACLA,MAEJH,MAAuB,kBAC1B,QAAQ,KAAK,iGAAiG,GAC9GG,EAAI,UAAU,aACdA,EAAI,QAAQ,UACLA;AAGX,GAEMC,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAS,IAAUA,IAC/BE,EAAcF,CAAS,IAFP,MAqEZG,IAASC,EAAM;AAAA,EAC1B,CAACV,GAAOW,MAAQ;AACd,UAAM;AAAA,MACJ,UAAAC;AAAA,MACA,WAAAC;AAAA,MACA,SAAAZ;AAAA,MACA,OAAAE;AAAA,MACA,MAAAD;AAAA,MACA,SAAAY,IAAU;AAAA,MACV,OAAAC,IAAQ;AAAA,MACR,SAAAC;AAAA,MACA,cAAAC,IAAe,CAAA;AAAA,MACf,SAAAC;AAAA,MACA,SAAAC,IAAU;AAAA,MACV,UAAAC;AAAA,MACA,gBAAAC;AAAA,MACA,cAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDxB,GACEyB,IAAOX,IAAUY,IAAO,UACxBC,IAAMT,KAAWF,KAAWD,GAE5Ba,IAAUd,IACZM,IAEA,gBAAAS,EAAAC,GAAA,EACG,UAAA;AAAA,MAAA,CAAC,CAACT,KACD,gBAAAU,EAACC,GAAA,EAAW,SAAAb,GAAkB,MAAAjB,GAC3B,UAAAG,EAAgBgB,CAAc,GACjC;AAAA,MAGDD;AAAA,MAEA,CAAC,CAACE,KACD,gBAAAS,EAACC,KAAW,SAAAb,GAAkB,MAAAjB,GAC3B,UAAAG,EAAgBiB,CAAY,GAC/B;AAAA,MAGD,CAAC,CAACC,KAAgB,gBAAAQ,EAAC,QAAA,EAAK,WAAU,WAAW,UAAA,OAAOR,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAAK;AAAA,IAAA,GACpH,GAGEU,IACJ,gBAAAF;AAAA,MAACN;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAd;AAAA,QACA,UAAAC;AAAA,QACA,WAAWsB;AAAA,UACTC,EAAe;AAAA,YACb,GAAGpC,EAA4B,EAAE,SAAAE,GAAS,MAAAC,GAAM,OAAAC,GAAO;AAAA,YACvD,WAAAU;AAAA,UAAA,CACD;AAAA,UACDM,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGK;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAI;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAInB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASL,KAAYO,KAAW,CAACQ,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAM;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACAxB,EAAO,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { Button } from './Button';\nimport { ButtonProps } from './Button.types';\nimport React from 'react';\nimport { PlusIcon, Trash2Icon, FileDownIcon } from 'lucide-react';\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\n\nconst States = (props: ButtonProps) => (\n <div\n style={{\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n }}\n >\n {[ 'default', 'hover', 'focus', 'active', 'disabled', 'loading' ]\n .map((state) => (\n <Button\n key={state}\n id={state}\n {...props}\n disabled={state === 'disabled' || props.disabled}\n loading={state === 'loading' || props.loading}\n >\n {props.children}\n </Button>\n ))}\n </div>\n);\n\nconst variants: ButtonProps['variant'][] = [ 'none', 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst variant_default: ButtonProps['variant'] = 'contained';\nconst color_default: ButtonProps['color'] = 'primary';\nconst size_default: ButtonProps['size'] = 'lg';\n\nconst iconMap = {\n 'undefined': undefined,\n \"<PlusIcon />\": <PlusIcon/>,\n \"<Trash2Icon />\": <Trash2Icon/>,\n \"<FileDownIcon />\": <FileDownIcon/>,\n PlusIcon: PlusIcon,\n Trash2Icon: Trash2Icon,\n FileDownIcon: FileDownIcon,\n};\n\nconst meta = {\n title: 'Button',\n component: Button,\n // render: Template,\n args: {\n tooltip: undefined,\n asChild: false,\n //\n variant: variant_default,\n color: color_default,\n size: size_default,\n loading: false,\n disabled: false,\n startAdornment: undefined,\n endAdornment: undefined,\n slotProps: {},\n tooltipProps: {}\n },\n argTypes: {\n tooltip: {\n name: 'tooltip',\n description: 'Button tooltip from ButtonProps [deprecated, use title and message instead]',\n control: false,\n },\n asChild: {\n name: 'asChild',\n description: 'Button asChild from ButtonProps [boolean]',\n control: false\n },\n variant: {\n name: 'variant',\n description: 'Button variant from ButtonProps',\n options: variants,\n control: { type: 'inline-radio', }\n },\n color: {\n name: 'color',\n description: 'Button color from ButtonProps',\n options: colors,\n control: { type: 'inline-radio' }\n },\n size: {\n name: 'size',\n description: 'Button size from ButtonProps',\n options: sizes,\n control: { type: 'inline-radio' }\n },\n title: {\n name: 'title',\n description: \"Button tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n control: { type: 'text' },\n },\n message: {\n name: 'message',\n description: 'Button tooltip message from ButtonProps [ReactNode]',\n control: { type: \"object\" },\n },\n startAdornment: {\n name: 'startAdornment',\n description: 'Button startAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n options: Object.keys(iconMap),\n mapping: iconMap,\n control: { type: 'inline-radio' },\n },\n endAdornment: {\n name: 'endAdornment',\n description: 'Button endAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n options: Object.keys(iconMap),\n mapping: iconMap,\n control: { type: 'inline-radio' },\n },\n slotProps: {\n name: 'slotProps',\n description: 'Button slotProps from ButtonProps [object]',\n control: { type: \"object\" },\n },\n tooltipProps: {\n name: 'tooltipProps',\n description: 'Button tooltipProps from ButtonProps [object]',\n control: { type: \"object\" },\n },\n },\n parameters: {\n pseudo: {\n hover: '#hover',\n focus: '#focus',\n active: '#active',\n disabled: '#disabled',\n },\n }\n} satisfies Meta<typeof Button>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n ...meta.args,\n startAdornment: <PlusIcon/>,\n endAdornment: <PlusIcon/>,\n children: 'children',\n}\n\nexport const Default: Story = {\n args: {\n ...meta.args,\n children: '_children_',\n }\n};\n\nexport const Disabled: Story = {\n render: (props) => (\n <DashedWrapper>\n <Button {...props} />\n <Button {...props} startAdornment={<PlusIcon/>}/>\n <Button {...props} startAdornment={<PlusIcon/>} endAdornment={<PlusIcon/>}/>\n <Button {...props} endAdornment={<PlusIcon/>}/>\n </DashedWrapper>\n ),\n args: {\n ...meta.args,\n disabled: true,\n children: 'disabled',\n }\n};\n\nexport const Loading: Story = {\n render: (props) => (\n <DashedWrapper>\n <Button {...props} />\n <Button {...props} startAdornment={<PlusIcon/>}/>\n <Button {...props} startAdornment={<PlusIcon/>} endAdornment={<PlusIcon/>}/>\n <Button {...props} endAdornment={<PlusIcon/>}/>\n </DashedWrapper>\n ),\n args: {\n children: 'Loading…',\n loading: true,\n },\n};\n\nexport const Tooltips: Story = {\n render: (props) => (\n <DashedWrapper>\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n <Button\n {...props}\n title='delayDuration: 0'\n tooltipProps={{ delayDuration: 0 }}\n >\n delayDuration: 0\n </Button>\n <Button\n {...props}\n title='delayDuration: 300 [default]'\n tooltipProps={{ delayDuration: 300 }}\n >\n delayDuration: 300\n </Button>\n <Button\n {...props}\n title='delayDuration: 700'\n tooltipProps={{ delayDuration: 700 }}\n >\n delayDuration: 700\n </Button>\n\n <Button {...props} title='title_string'>title</Button>\n <Button {...props} message='message_string'>message: string</Button>\n <Button\n {...props}\n message={<span>message_node_span</span>}\n >\n message: ReactNode\n </Button>\n <Button\n {...props}\n message='message_string'\n tooltipProps={{\n showQuestionMark: true\n }}\n >\n showQuestionMark: true\n </Button>\n </div>\n </DashedWrapper>\n ),\n args: {\n children: 'tooltips',\n tooltipProps: {\n defaultOpen: true\n },\n },\n};\n\nexport const Primary: Story = {\n args: {\n ...args,\n color: 'primary',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n\nexport const Secondary: Story = {\n args: {\n ...args,\n color: 'secondary',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n\nexport const Error: Story = {\n args: {\n ...args,\n color: 'error',\n size: 'lg',\n children: 'Створити',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: (props) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n </div>\n ),\n};\n"],"names":["States","props","jsx","state","Button","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","meta","args","Default","Disabled","jsxs","DashedWrapper","Loading","Tooltips","Primary","Secondary","Error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Button.stories.js","sources":["../../src/Button/Button.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { Button } from './Button';\r\nimport { ButtonProps } from './Button.types';\r\nimport React from 'react';\r\nimport { PlusIcon, Trash2Icon, FileDownIcon } from 'lucide-react';\r\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\r\n\r\nconst States = (props: ButtonProps) => (\r\n <div\r\n style={{\r\n position: 'relative',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '16px',\r\n }}\r\n >\r\n {[ 'default', 'hover', 'focus', 'active', 'disabled', 'loading' ]\r\n .map((state) => (\r\n <Button\r\n key={state}\r\n id={state}\r\n {...props}\r\n disabled={state === 'disabled' || props.disabled}\r\n loading={state === 'loading' || props.loading}\r\n >\r\n {props.children}\r\n </Button>\r\n ))}\r\n </div>\r\n);\r\n\r\nconst variants: ButtonProps['variant'][] = [ 'none', 'contained', 'outlined', 'ghost' ]\r\nconst colors: ButtonProps['color'][] = [ 'primary', 'secondary', 'error' ]\r\nconst sizes: ButtonProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\r\n\r\nconst variant_default: ButtonProps['variant'] = 'contained';\r\nconst color_default: ButtonProps['color'] = 'primary';\r\nconst size_default: ButtonProps['size'] = 'lg';\r\n\r\nconst iconMap = {\r\n 'undefined': undefined,\r\n \"<PlusIcon />\": <PlusIcon/>,\r\n \"<Trash2Icon />\": <Trash2Icon/>,\r\n \"<FileDownIcon />\": <FileDownIcon/>,\r\n PlusIcon: PlusIcon,\r\n Trash2Icon: Trash2Icon,\r\n FileDownIcon: FileDownIcon,\r\n};\r\n\r\nconst meta = {\r\n title: 'Button',\r\n component: Button,\r\n // render: Template,\r\n args: {\r\n tooltip: undefined,\r\n asChild: false,\r\n //\r\n variant: variant_default,\r\n color: color_default,\r\n size: size_default,\r\n loading: false,\r\n disabled: false,\r\n startAdornment: undefined,\r\n endAdornment: undefined,\r\n slotProps: {},\r\n tooltipProps: {}\r\n },\r\n argTypes: {\r\n tooltip: {\r\n name: 'tooltip',\r\n description: 'Button tooltip from ButtonProps [deprecated, use title and message instead]',\r\n control: false,\r\n },\r\n asChild: {\r\n name: 'asChild',\r\n description: 'Button asChild from ButtonProps [boolean]',\r\n control: false\r\n },\r\n variant: {\r\n name: 'variant',\r\n description: 'Button variant from ButtonProps',\r\n options: variants,\r\n control: { type: 'inline-radio', }\r\n },\r\n color: {\r\n name: 'color',\r\n description: 'Button color from ButtonProps',\r\n options: colors,\r\n control: { type: 'inline-radio' }\r\n },\r\n size: {\r\n name: 'size',\r\n description: 'Button size from ButtonProps',\r\n options: sizes,\r\n control: { type: 'inline-radio' }\r\n },\r\n title: {\r\n name: 'title',\r\n description: \"Button tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\r\n control: { type: 'text' },\r\n },\r\n message: {\r\n name: 'message',\r\n description: 'Button tooltip message from ButtonProps [ReactNode]',\r\n control: { type: \"object\" },\r\n },\r\n startAdornment: {\r\n name: 'startAdornment',\r\n description: 'Button startAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\r\n options: Object.keys(iconMap),\r\n mapping: iconMap,\r\n control: { type: 'inline-radio' },\r\n },\r\n endAdornment: {\r\n name: 'endAdornment',\r\n description: 'Button endAdornment from ButtonProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\r\n options: Object.keys(iconMap),\r\n mapping: iconMap,\r\n control: { type: 'inline-radio' },\r\n },\r\n slotProps: {\r\n name: 'slotProps',\r\n description: 'Button slotProps from ButtonProps [object]',\r\n control: { type: \"object\" },\r\n },\r\n tooltipProps: {\r\n name: 'tooltipProps',\r\n description: 'Button tooltipProps from ButtonProps [object]',\r\n control: { type: \"object\" },\r\n },\r\n },\r\n parameters: {\r\n pseudo: {\r\n hover: '#hover',\r\n focus: '#focus',\r\n active: '#active',\r\n disabled: '#disabled',\r\n },\r\n }\r\n} satisfies Meta<typeof Button>;\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\nconst args: Story['args'] = {\r\n ...meta.args,\r\n startAdornment: <PlusIcon/>,\r\n endAdornment: <PlusIcon/>,\r\n children: 'children',\r\n}\r\n\r\nexport const Default: Story = {\r\n args: {\r\n ...meta.args,\r\n children: '_children_',\r\n }\r\n};\r\n\r\nexport const Disabled: Story = {\r\n render: (props) => (\r\n <DashedWrapper>\r\n <Button {...props} />\r\n <Button {...props} startAdornment={<PlusIcon/>}/>\r\n <Button {...props} startAdornment={<PlusIcon/>} endAdornment={<PlusIcon/>}/>\r\n <Button {...props} endAdornment={<PlusIcon/>}/>\r\n </DashedWrapper>\r\n ),\r\n args: {\r\n ...meta.args,\r\n disabled: true,\r\n children: 'disabled',\r\n }\r\n};\r\n\r\nexport const Loading: Story = {\r\n render: (props) => (\r\n <DashedWrapper>\r\n <Button {...props} />\r\n <Button {...props} startAdornment={<PlusIcon/>}/>\r\n <Button {...props} startAdornment={<PlusIcon/>} endAdornment={<PlusIcon/>}/>\r\n <Button {...props} endAdornment={<PlusIcon/>}/>\r\n </DashedWrapper>\r\n ),\r\n args: {\r\n children: 'Loading…',\r\n loading: true,\r\n },\r\n};\r\n\r\nexport const Tooltips: Story = {\r\n render: (props) => (\r\n <DashedWrapper>\r\n <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\r\n <Button\r\n {...props}\r\n title='delayDuration: 0'\r\n tooltipProps={{ delayDuration: 0 }}\r\n >\r\n delayDuration: 0\r\n </Button>\r\n <Button\r\n {...props}\r\n title='delayDuration: 300 [default]'\r\n tooltipProps={{ delayDuration: 300 }}\r\n >\r\n delayDuration: 300\r\n </Button>\r\n <Button\r\n {...props}\r\n title='delayDuration: 700'\r\n tooltipProps={{ delayDuration: 700 }}\r\n >\r\n delayDuration: 700\r\n </Button>\r\n\r\n <Button {...props} title='title_string'>title</Button>\r\n <Button {...props} message='message_string'>message: string</Button>\r\n <Button\r\n {...props}\r\n message={<span>message_node_span</span>}\r\n >\r\n message: ReactNode\r\n </Button>\r\n <Button\r\n {...props}\r\n message='message_string'\r\n tooltipProps={{\r\n showQuestionMark: true\r\n }}\r\n >\r\n showQuestionMark: true\r\n </Button>\r\n </div>\r\n </DashedWrapper>\r\n ),\r\n args: {\r\n children: 'tooltips',\r\n tooltipProps: {\r\n defaultOpen: true\r\n },\r\n },\r\n};\r\n\r\nexport const Primary: Story = {\r\n args: {\r\n ...args,\r\n color: 'primary',\r\n size: 'lg',\r\n children: 'Створити',\r\n },\r\n argTypes: {\r\n variant: { control: false },\r\n color: { control: false },\r\n },\r\n render: (props) => (\r\n <div className='flex'>\r\n <DashedWrapper>\r\n <States {...props} variant='contained'/>\r\n <States {...props} variant='outlined'/>\r\n <States {...props} variant='ghost'/>\r\n </DashedWrapper>\r\n </div>\r\n ),\r\n};\r\n\r\nexport const Secondary: Story = {\r\n args: {\r\n ...args,\r\n color: 'secondary',\r\n size: 'lg',\r\n children: 'Створити',\r\n },\r\n argTypes: {\r\n variant: { control: false },\r\n color: { control: false },\r\n },\r\n render: (props) => (\r\n <div className='flex'>\r\n <DashedWrapper>\r\n <States {...props} variant='contained'/>\r\n <States {...props} variant='outlined'/>\r\n <States {...props} variant='ghost'/>\r\n </DashedWrapper>\r\n </div>\r\n ),\r\n};\r\n\r\nexport const Error: Story = {\r\n args: {\r\n ...args,\r\n color: 'error',\r\n size: 'lg',\r\n children: 'Створити',\r\n },\r\n argTypes: {\r\n variant: { control: false },\r\n color: { control: false },\r\n },\r\n render: (props) => (\r\n <div className='flex'>\r\n <DashedWrapper>\r\n <States {...props} variant='contained'/>\r\n <States {...props} variant='outlined'/>\r\n <States {...props} variant='ghost'/>\r\n </DashedWrapper>\r\n </div>\r\n ),\r\n};\r\n"],"names":["States","props","jsx","state","Button","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","meta","args","Default","Disabled","jsxs","DashedWrapper","Loading","Tooltips","Primary","Secondary","Error"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonCounterBadge.js","sources":["../../src/Button/ButtonCounterBadge.tsx"],"sourcesContent":["import { ButtonCounterBadgeReader, ButtonCounterBadgeReaderOptions } from \"./Button.types\";\nimport { type ButtonBadgeCVAProps, buttonBadgeVariants } from \"./buttonVariants\";\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport interface ButtonCounterBadgeProps extends ButtonBadgeCVAProps {\n counter?: ButtonCounterBadgeReader;\n}\n\nconst normalizeCounter = (counter: ButtonCounterBadgeReader): ButtonCounterBadgeReaderOptions | null => {\n if(!counter) return null\n if(typeof counter === 'number') return { count: counter };\n return counter;\n}\n\nconst MIN_COUNT = 99;\nconst normalizeCount = (count: number): number => {\n const c = count || 0;\n return Math.max(0, Math.min(c, MIN_COUNT));\n}\n\nconst isOverflown = (count: number): boolean => count > MIN_COUNT\n\nexport const ButtonCounterBadge = (props: ButtonCounterBadgeProps) => {\n const {counter: initializeCounter, ...rest} = props;\n const counter = normalizeCounter(initializeCounter);\n if(!counter?.count) return null;\n return (\n <div\n className={cn(buttonBadgeVariants({ ...rest }))}\n >\n {normalizeCount(counter.count)}\n {isOverflown(counter.count) && (\n <span className=\"relative -top-[0.5px]\">+</span>\n )}\n </div>\n )\n}\n"],"names":["normalizeCounter","counter","MIN_COUNT","normalizeCount","count","isOverflown","ButtonCounterBadge","props","initializeCounter","rest","jsxs","cn","buttonBadgeVariants"],"mappings":";;;AAQA,MAAMA,IAAmB,CAACC,MACpBA,IACD,OAAOA,KAAY,WAAiB,EAAE,OAAOA,EAAA,IACzCA,IAFa,MAKhBC,IAAY,IACZC,IAAiB,CAACC,MAEf,KAAK,IAAI,GAAG,KAAK,IADdA,KAAS,GACYF,CAAS,CAAC,GAGrCG,IAAc,CAACD,MAA2BA,IAAQF,GAE3CI,IAAqB,CAACC,MAAmC;AACpE,QAAM,EAAC,SAASC,GAAmB,GAAGC,MAAQF,GACxCN,IAAUD,EAAiBQ,CAAiB;AAClD,SAAIP,GAAS,QAEX,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGC,EAAoB,EAAE,GAAGH,EAAA,CAAM,CAAC;AAAA,MAE7C,UAAA;AAAA,QAAAN,EAAeF,EAAQ,KAAK;AAAA,QAC5BI,EAAYJ,EAAQ,KAAK,uBACvB,QAAA,EAAK,WAAU,yBAAwB,UAAA,IAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAPpB;AAW7B;"}
|
|
1
|
+
{"version":3,"file":"ButtonCounterBadge.js","sources":["../../src/Button/ButtonCounterBadge.tsx"],"sourcesContent":["import { ButtonCounterBadgeReader, ButtonCounterBadgeReaderOptions } from \"./Button.types\";\r\nimport { type ButtonBadgeCVAProps, buttonBadgeVariants } from \"./buttonVariants\";\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\nexport interface ButtonCounterBadgeProps extends ButtonBadgeCVAProps {\r\n counter?: ButtonCounterBadgeReader;\r\n}\r\n\r\nconst normalizeCounter = (counter: ButtonCounterBadgeReader): ButtonCounterBadgeReaderOptions | null => {\r\n if(!counter) return null\r\n if(typeof counter === 'number') return { count: counter };\r\n return counter;\r\n}\r\n\r\nconst MIN_COUNT = 99;\r\nconst normalizeCount = (count: number): number => {\r\n const c = count || 0;\r\n return Math.max(0, Math.min(c, MIN_COUNT));\r\n}\r\n\r\nconst isOverflown = (count: number): boolean => count > MIN_COUNT\r\n\r\nexport const ButtonCounterBadge = (props: ButtonCounterBadgeProps) => {\r\n const {counter: initializeCounter, ...rest} = props;\r\n const counter = normalizeCounter(initializeCounter);\r\n if(!counter?.count) return null;\r\n return (\r\n <div\r\n className={cn(buttonBadgeVariants({ ...rest }))}\r\n >\r\n {normalizeCount(counter.count)}\r\n {isOverflown(counter.count) && (\r\n <span className=\"relative -top-[0.5px]\">+</span>\r\n )}\r\n </div>\r\n )\r\n}\r\n"],"names":["normalizeCounter","counter","MIN_COUNT","normalizeCount","count","isOverflown","ButtonCounterBadge","props","initializeCounter","rest","jsxs","cn","buttonBadgeVariants"],"mappings":";;;AAQA,MAAMA,IAAmB,CAACC,MACpBA,IACD,OAAOA,KAAY,WAAiB,EAAE,OAAOA,EAAA,IACzCA,IAFa,MAKhBC,IAAY,IACZC,IAAiB,CAACC,MAEf,KAAK,IAAI,GAAG,KAAK,IADdA,KAAS,GACYF,CAAS,CAAC,GAGrCG,IAAc,CAACD,MAA2BA,IAAQF,GAE3CI,IAAqB,CAACC,MAAmC;AACpE,QAAM,EAAC,SAASC,GAAmB,GAAGC,MAAQF,GACxCN,IAAUD,EAAiBQ,CAAiB;AAClD,SAAIP,GAAS,QAEX,gBAAAS;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAGC,EAAoB,EAAE,GAAGH,EAAA,CAAM,CAAC;AAAA,MAE7C,UAAA;AAAA,QAAAN,EAAeF,EAAQ,KAAK;AAAA,QAC5BI,EAAYJ,EAAQ,KAAK,uBACvB,QAAA,EAAK,WAAU,yBAAwB,UAAA,IAAA,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,IAPpB;AAW7B;"}
|
package/Button/buttonVariants.js
CHANGED
|
@@ -8,7 +8,7 @@ const s = r(
|
|
|
8
8
|
"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent",
|
|
9
9
|
"disabled:pointer-events-none disabled:cursor-default",
|
|
10
10
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
11
|
-
"transition-transform
|
|
11
|
+
"transition-transform [&_svg]:transition-transform"
|
|
12
12
|
],
|
|
13
13
|
{
|
|
14
14
|
variants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonVariants.js","sources":["../../src/Button/buttonVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonVariants = cva(\n [\n \"inline-flex items-center justify-center box-border\",\n 'whitespace-nowrap font-medium',\n 'cursor-pointer',\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n \"disabled:pointer-events-none disabled:cursor-default\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n 'transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200',\n ],\n {\n variants: {\n variant: {\n none: \"\",\n contained: \"\",\n outlined: \"\",\n ghost: '',\n },\n color: {\n primary: '',\n secondary: '',\n error: '',\n },\n size: {\n xs: 'rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14',\n sm: 'rounded-md p-1 gap-1 text-sm min-h-6 min-w-20',\n md: cn(\n 'min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1',\n 'text-sm leading-[1.12] [&_svg]:size-6',\n ),\n lg: cn(\n \"min-h-10 min-w-35 rounded-lg gap-1 px-2.5 py-1.5\",\n 'text-base leading-normal [&_svg]:size-6',\n )\n }\n },\n compoundVariants: [\n // PRIMARY BUTTON VARIANTS\n {\n color: 'primary',\n variant: 'contained',\n className: cn(\n 'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#7F4EEB]',\n 'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n 'active:bg-[#6B3DD9]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:bg-[#9368FF0F]',\n 'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n 'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n 'active:bg-[#9368FF0F]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // SECONDARY BUTTON VARIANTS\n {\n color: 'secondary',\n variant: 'contained',\n className: cn(\n 'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'ghost',\n className: cn(\n 'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n 'hover:bg-[#F9FAFB]',\n 'focus:bg-[#FCFCFC]',\n 'active:bg-[#F9FAFB]',\n 'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // ERROR BUTTON VARIANTS\n {\n color: 'error',\n variant: 'contained',\n className: cn(\n 'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#DC2626]',\n 'focus:bg-[#DC2626]',\n 'active:bg-[#DC2626]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n ],\n defaultVariants: {\n variant: 'contained',\n color: 'primary',\n size: 'lg',\n },\n }\n)\n\nexport type ButtonVarianceProps = VariantProps<typeof buttonVariants>;\n\nexport const buttonBadgeVariants = cva(\n [\n 'absolute z-0',\n 'flex items-center justify-center text-center p-0',\n 'font-medium leading-none tracking-tighter',\n 'rounded-full w-fit min-w-4 h-4 text-[10px] px-0.5 box-border',\n ],\n {\n variants: {\n variant: {\n none: '',\n contained: '',\n outlined: '',\n ghost: \"\",\n },\n color: {\n primary: \"\",\n secondary: \"\",\n error: \"\"\n },\n size: {\n xs: '',\n sm: '',\n md: '',\n lg: '-top-[2px] left-[14px]',\n },\n rounded: {\n true: 'left-1/2 -translate-x-1/2 -translate-y-1/2',\n false: '',\n },\n disabled: {\n true: '',\n false: '',\n }\n },\n compoundVariants: [\n // SIZE XS\n { size: 'xs', rounded: false, className: '-top-px -right-px translate-x-1/2 -translate-y-1/2' },\n { size: 'xs', rounded: true, className: '-top-px' },\n // SIZE SM\n { size: 'sm', rounded: false, className: 'top-0 right-0 translate-x-1/2 -translate-y-1/2' },\n { size: 'sm', rounded: true, className: '-top-[3px]' },\n // SIZE MD\n { size: 'md', rounded: false, className: '-top-[4px] left-[12px]' },\n { size: 'md', rounded: true, className: '-top-[6px]' },\n // SIZE LG\n { size: 'lg', rounded: false, className: '-top-[4px] left-[12px]' },\n { size: 'lg', rounded: true, className: '-top-2' },\n\n // COLORS\n {\n color: ['primary', 'secondary', 'error'],\n className: 'bg-[#9368FF] text-[#FCFCFC]',\n },\n {\n color: ['primary', 'secondary', 'error'],\n disabled: true,\n className: 'bg-[#666A78] text-[#FCFCFC]'\n },\n ],\n defaultVariants: {\n color: \"primary\",\n variant: \"contained\",\n size: \"lg\",\n disabled: false,\n rounded: false,\n },\n }\n)\nexport type ButtonBadgeCVAProps = VariantProps<typeof buttonBadgeVariants>;\n"],"names":["buttonVariants","cva","cn","buttonBadgeVariants"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"buttonVariants.js","sources":["../../src/Button/buttonVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\nexport const buttonVariants = cva(\r\n [\r\n \"inline-flex items-center justify-center box-border\",\r\n 'whitespace-nowrap font-medium',\r\n 'cursor-pointer',\r\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\r\n \"disabled:pointer-events-none disabled:cursor-default\",\r\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n 'transition-transform [&_svg]:transition-transform',\r\n ],\r\n {\r\n variants: {\r\n variant: {\r\n none: \"\",\r\n contained: \"\",\r\n outlined: \"\",\r\n ghost: '',\r\n },\r\n color: {\r\n primary: '',\r\n secondary: '',\r\n error: '',\r\n },\r\n size: {\r\n xs: 'rounded-sm p-1 gap-1 text-xs min-h-4 min-w-14',\r\n sm: 'rounded-md p-1 gap-1 text-sm min-h-6 min-w-20',\r\n md: cn(\r\n 'min-h-8 min-w-[102px] rounded-lg gap-1 px-2 py-1',\r\n 'text-sm leading-[1.12] [&_svg]:size-6',\r\n ),\r\n lg: cn(\r\n \"min-h-10 min-w-35 rounded-lg gap-1 px-2.5 py-1.5\",\r\n 'text-base leading-normal [&_svg]:size-6',\r\n )\r\n }\r\n },\r\n compoundVariants: [\r\n // PRIMARY BUTTON VARIANTS\r\n {\r\n color: 'primary',\r\n variant: 'contained',\r\n className: cn(\r\n 'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\r\n 'hover:bg-[#7F4EEB]',\r\n 'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\r\n 'active:bg-[#6B3DD9]',\r\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'primary',\r\n variant: 'outlined',\r\n className: cn(\r\n 'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\r\n 'hover:bg-[#9368FF0F]',\r\n 'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\r\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'primary',\r\n variant: 'ghost',\r\n className: cn(\r\n 'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\r\n 'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\r\n 'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\r\n 'active:bg-[#9368FF0F]',\r\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n // SECONDARY BUTTON VARIANTS\r\n {\r\n color: 'secondary',\r\n variant: 'contained',\r\n className: cn(\r\n 'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\r\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\r\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\r\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\r\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'secondary',\r\n variant: 'outlined',\r\n className: cn(\r\n 'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\r\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\r\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\r\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\r\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'secondary',\r\n variant: 'ghost',\r\n className: cn(\r\n 'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\r\n 'hover:bg-[#F9FAFB]',\r\n 'focus:bg-[#FCFCFC]',\r\n 'active:bg-[#F9FAFB]',\r\n 'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n // ERROR BUTTON VARIANTS\r\n {\r\n color: 'error',\r\n variant: 'contained',\r\n className: cn(\r\n 'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\r\n 'hover:bg-[#DC2626]',\r\n 'focus:bg-[#DC2626]',\r\n 'active:bg-[#DC2626]',\r\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'error',\r\n variant: 'outlined',\r\n className: cn(\r\n 'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\r\n 'hover:bg-[#EF44440F]',\r\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\r\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'error',\r\n variant: 'ghost',\r\n className: cn(\r\n 'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\r\n 'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\r\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\r\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n ],\r\n defaultVariants: {\r\n variant: 'contained',\r\n color: 'primary',\r\n size: 'lg',\r\n },\r\n }\r\n)\r\n\r\nexport type ButtonVarianceProps = VariantProps<typeof buttonVariants>;\r\n\r\nexport const buttonBadgeVariants = cva(\r\n [\r\n 'absolute z-0',\r\n 'flex items-center justify-center text-center p-0',\r\n 'font-medium leading-none tracking-tighter',\r\n 'rounded-full w-fit min-w-4 h-4 text-[10px] px-0.5 box-border',\r\n ],\r\n {\r\n variants: {\r\n variant: {\r\n none: '',\r\n contained: '',\r\n outlined: '',\r\n ghost: \"\",\r\n },\r\n color: {\r\n primary: \"\",\r\n secondary: \"\",\r\n error: \"\"\r\n },\r\n size: {\r\n xs: '',\r\n sm: '',\r\n md: '',\r\n lg: '-top-[2px] left-[14px]',\r\n },\r\n rounded: {\r\n true: 'left-1/2 -translate-x-1/2 -translate-y-1/2',\r\n false: '',\r\n },\r\n disabled: {\r\n true: '',\r\n false: '',\r\n }\r\n },\r\n compoundVariants: [\r\n // SIZE XS\r\n { size: 'xs', rounded: false, className: '-top-px -right-px translate-x-1/2 -translate-y-1/2' },\r\n { size: 'xs', rounded: true, className: '-top-px' },\r\n // SIZE SM\r\n { size: 'sm', rounded: false, className: 'top-0 right-0 translate-x-1/2 -translate-y-1/2' },\r\n { size: 'sm', rounded: true, className: '-top-[3px]' },\r\n // SIZE MD\r\n { size: 'md', rounded: false, className: '-top-[4px] left-[12px]' },\r\n { size: 'md', rounded: true, className: '-top-[6px]' },\r\n // SIZE LG\r\n { size: 'lg', rounded: false, className: '-top-[4px] left-[12px]' },\r\n { size: 'lg', rounded: true, className: '-top-2' },\r\n\r\n // COLORS\r\n {\r\n color: ['primary', 'secondary', 'error'],\r\n className: 'bg-[#9368FF] text-[#FCFCFC]',\r\n },\r\n {\r\n color: ['primary', 'secondary', 'error'],\r\n disabled: true,\r\n className: 'bg-[#666A78] text-[#FCFCFC]'\r\n },\r\n ],\r\n defaultVariants: {\r\n color: \"primary\",\r\n variant: \"contained\",\r\n size: \"lg\",\r\n disabled: false,\r\n rounded: false,\r\n },\r\n }\r\n)\r\nexport type ButtonBadgeCVAProps = VariantProps<typeof buttonBadgeVariants>;\r\n"],"names":["buttonVariants","cva","cn","buttonBadgeVariants"],"mappings":"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"}
|
package/ButtonIcon/ButtonIcon.js
CHANGED
|
@@ -1,24 +1,23 @@
|
|
|
1
|
-
import { jsxs as g, Fragment as R, jsx as
|
|
1
|
+
import { jsxs as g, Fragment as R, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import * as j from "react";
|
|
3
3
|
import { isValidElement as E, createElement as I } from "react";
|
|
4
4
|
import { cn as V } from "@oneplatformdev/utils";
|
|
5
5
|
import { buttonIconVariants as w } from "./buttonIconVariants.js";
|
|
6
6
|
import { Slot as z } from "@radix-ui/react-slot";
|
|
7
|
-
import "
|
|
8
|
-
import { Tooltip as F } from "../Tooltip/Tooltip.js";
|
|
7
|
+
import { ButtonCounterBadge as F } from "../Button/ButtonCounterBadge.js";
|
|
9
8
|
import { LoadedIcon as L } from "../LoadedIcon/LoadedIcon.js";
|
|
10
|
-
import {
|
|
9
|
+
import { Tooltip as P } from "../Tooltip/Tooltip.js";
|
|
11
10
|
const S = (t) => t ? E(t) ? t : I(t) : null, T = j.forwardRef(
|
|
12
11
|
(t, h) => {
|
|
13
12
|
const {
|
|
14
13
|
asChild: a,
|
|
15
|
-
children:
|
|
14
|
+
children: l,
|
|
16
15
|
icon: b,
|
|
17
|
-
disabled:
|
|
16
|
+
disabled: r = !1,
|
|
18
17
|
loading: n = !1,
|
|
19
18
|
message: y,
|
|
20
19
|
title: x = "",
|
|
21
|
-
tooltipProps:
|
|
20
|
+
tooltipProps: m = {},
|
|
22
21
|
className: B,
|
|
23
22
|
variant: c,
|
|
24
23
|
color: p,
|
|
@@ -27,30 +26,30 @@ const S = (t) => t ? E(t) ? t : I(t) : null, T = j.forwardRef(
|
|
|
27
26
|
screenReader: o,
|
|
28
27
|
counter: N,
|
|
29
28
|
...v
|
|
30
|
-
} = t, C = a ? z : "button", i = y || x, d = a ?
|
|
29
|
+
} = t, C = a ? z : "button", i = y || x, d = a ? l : /* @__PURE__ */ g(R, { children: [
|
|
31
30
|
/* @__PURE__ */ g(L, { loading: n, size: s, children: [
|
|
32
|
-
S(b) ??
|
|
33
|
-
/* @__PURE__ */
|
|
34
|
-
|
|
31
|
+
S(b) ?? l,
|
|
32
|
+
/* @__PURE__ */ e(
|
|
33
|
+
F,
|
|
35
34
|
{
|
|
36
35
|
counter: N,
|
|
37
36
|
variant: c,
|
|
38
37
|
color: p,
|
|
39
38
|
size: s,
|
|
40
|
-
disabled:
|
|
39
|
+
disabled: r,
|
|
41
40
|
rounded: u
|
|
42
41
|
}
|
|
43
42
|
)
|
|
44
43
|
] }),
|
|
45
|
-
!!o && /* @__PURE__ */
|
|
44
|
+
!!o && /* @__PURE__ */ e("span", { className: "sr-only", children: typeof o == "string" ? o : o.text })
|
|
46
45
|
] });
|
|
47
46
|
if (!d) return null;
|
|
48
|
-
const f = /* @__PURE__ */
|
|
47
|
+
const f = /* @__PURE__ */ e(
|
|
49
48
|
C,
|
|
50
49
|
{
|
|
51
50
|
type: "button",
|
|
52
51
|
ref: h,
|
|
53
|
-
disabled:
|
|
52
|
+
disabled: r,
|
|
54
53
|
className: V(
|
|
55
54
|
"group group/button group/button-icon",
|
|
56
55
|
w({
|
|
@@ -66,11 +65,11 @@ const S = (t) => t ? E(t) ? t : I(t) : null, T = j.forwardRef(
|
|
|
66
65
|
children: d
|
|
67
66
|
}
|
|
68
67
|
);
|
|
69
|
-
return i ? /* @__PURE__ */
|
|
70
|
-
|
|
68
|
+
return i ? /* @__PURE__ */ e(
|
|
69
|
+
P,
|
|
71
70
|
{
|
|
72
|
-
...
|
|
73
|
-
open:
|
|
71
|
+
...m || {},
|
|
72
|
+
open: m.open ?? (r || n || !i) ? !1 : void 0,
|
|
74
73
|
message: i,
|
|
75
74
|
children: f
|
|
76
75
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.js","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import * as React from \"react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\nimport { buttonIconVariants } from './buttonIconVariants';\nimport { ButtonIconProps } from './ButtonIcon.types';\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { Tooltip } from '../Tooltip';\nimport { LoadedIcon } from \"../LoadedIcon\";\nimport { ButtonIconType } from \"../Button\";\nimport { createElement, isValidElement } from \"react\";\nimport { ButtonCounterBadge } from \"../Button/ButtonCounterBadge\";\n\nconst renderInnerIcon = (Icon?: ButtonIconType) => {\n if (!Icon) return null;\n if (isValidElement(Icon)) return Icon;\n return createElement(Icon);\n};\n\n/**\n * Icon-only version of the Button component.\n *\n * `ButtonIcon` is used for compact actions represented by an icon instead of text.\n * Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.\n *\n * @public\n * @see [Documentation](#) // TODO: add link to docs\n *\n * @example\n * > Import:\n * ```tsx\n * import { ButtonIcon } from '@oneplatformdev/ui/ButtonIcon';\n * ```\n * > Basic usage by icon:\n * ```tsx\n *<ButtonIcon icon={<PlusIcon />}/>\n *<ButtonIcon icon={PlusIcon}/>\n * ```\n * > Basic usage by children:\n * ```tsx\n *<ButtonIcon>\n * <PlusIcon />\n *</ButtonIcon>\n * ```\n * > With variant & color:\n * ```tsx\n *<ButtonIcon variant=\"outline\" color=\"primary\">\n * <Search />\n *</ButtonIcon>\n * ```\n * > With tooltip message:\n * ```tsx\n *<ButtonIcon message=\"Edit item\">\n * <PencilLine />\n *</ButtonIcon>\n * ```\n * > Loading state:\n * ```tsx\n *<ButtonIcon loading>\n * <Trash2 />\n *</ButtonIcon>\n * ```\n * > Badge counter:\n * ```tsx\n *<ButtonIcon counter={5} icon={MessageCircleMoreIcon}/>\n *<ButtonIcon counter={{ count: 8 }} icon={MessageCircleMoreIcon}/>\n * ```\n *\n * @remarks\n * - Designed for icon-only usage. If you need text, use `Button`.\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\n *\n * @see {@link Button} for regular text buttons\n */\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\n (props, ref) => {\n const {\n asChild,\n children,\n icon,\n disabled = false,\n loading = false,\n message,\n title = '',\n tooltipProps = {},\n className,\n variant,\n color,\n size,\n rounded,\n screenReader,\n counter,\n ...rest\n } = props;\n\n const Comp = asChild ? Slot : \"button\"\n const msg = message || title;\n\n const content = asChild\n ? children\n : (\n <>\n <LoadedIcon loading={loading} size={size}>\n {renderInnerIcon(icon) ?? children}\n <ButtonCounterBadge\n counter={counter}\n variant={variant}\n color={color}\n size={size}\n disabled={disabled}\n rounded={rounded}\n />\n </LoadedIcon>\n\n {!!screenReader && (\n <span className=\"sr-only\">\n {typeof screenReader === 'string' ? screenReader : screenReader.text}\n </span>\n )}\n </>\n )\n\n if (!content) return null;\n\n const cmp = (\n <Comp\n type='button'\n ref={ref}\n disabled={disabled}\n className={cn(\n 'group group/button group/button-icon',\n buttonIconVariants({\n variant, size, color, rounded,\n className\n }),\n loading && 'pointer-events-none opacity-80',\n )}\n {...rest}\n >\n {content}\n </Comp>\n )\n\n if (!msg) return cmp\n return (\n <Tooltip\n {...(tooltipProps || {})}\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\n message={msg}\n >\n {cmp}\n </Tooltip>\n )\n }\n)\nButtonIcon.displayName = \"Button\"\nexport default ButtonIcon;\n"],"names":["renderInnerIcon","Icon","isValidElement","createElement","ButtonIcon","React","props","ref","asChild","children","icon","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","screenReader","counter","rest","Comp","Slot","msg","content","jsxs","Fragment","LoadedIcon","jsx","ButtonCounterBadge","cmp","cn","buttonIconVariants","Tooltip"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ButtonIcon.js","sources":["../../src/ButtonIcon/ButtonIcon.tsx"],"sourcesContent":["import * as React from \"react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\nimport { buttonIconVariants } from './buttonIconVariants';\r\nimport { ButtonIconProps } from './ButtonIcon.types';\r\nimport { Slot } from \"@radix-ui/react-slot\"\r\n\r\nimport { Tooltip } from '../Tooltip';\r\nimport { LoadedIcon } from \"../LoadedIcon\";\r\nimport { ButtonIconType } from \"../Button\";\r\nimport { createElement, isValidElement } from \"react\";\r\nimport { ButtonCounterBadge } from \"../Button/ButtonCounterBadge\";\r\n\r\nconst renderInnerIcon = (Icon?: ButtonIconType) => {\r\n if (!Icon) return null;\r\n if (isValidElement(Icon)) return Icon;\r\n return createElement(Icon);\r\n};\r\n\r\n/**\r\n * Icon-only version of the Button component.\r\n *\r\n * `ButtonIcon` is used for compact actions represented by an icon instead of text.\r\n * Supports all core features of Button: variants, sizes, tooltips, disabled and loading state.\r\n *\r\n * @public\r\n * @see [Documentation](#) // TODO: add link to docs\r\n *\r\n * @example\r\n * > Import:\r\n * ```tsx\r\n * import { ButtonIcon } from '@oneplatformdev/ui/ButtonIcon';\r\n * ```\r\n * > Basic usage by icon:\r\n * ```tsx\r\n *<ButtonIcon icon={<PlusIcon />}/>\r\n *<ButtonIcon icon={PlusIcon}/>\r\n * ```\r\n * > Basic usage by children:\r\n * ```tsx\r\n *<ButtonIcon>\r\n * <PlusIcon />\r\n *</ButtonIcon>\r\n * ```\r\n * > With variant & color:\r\n * ```tsx\r\n *<ButtonIcon variant=\"outline\" color=\"primary\">\r\n * <Search />\r\n *</ButtonIcon>\r\n * ```\r\n * > With tooltip message:\r\n * ```tsx\r\n *<ButtonIcon message=\"Edit item\">\r\n * <PencilLine />\r\n *</ButtonIcon>\r\n * ```\r\n * > Loading state:\r\n * ```tsx\r\n *<ButtonIcon loading>\r\n * <Trash2 />\r\n *</ButtonIcon>\r\n * ```\r\n * > Badge counter:\r\n * ```tsx\r\n *<ButtonIcon counter={5} icon={MessageCircleMoreIcon}/>\r\n *<ButtonIcon counter={{ count: 8 }} icon={MessageCircleMoreIcon}/>\r\n * ```\r\n *\r\n * @remarks\r\n * - Designed for icon-only usage. If you need text, use `Button`.\r\n * - Works with any SVG React component or element, e.g. lucide-react, heroicons, custom icons.\r\n *\r\n * @see {@link Button} for regular text buttons\r\n */\r\nexport const ButtonIcon = React.forwardRef<HTMLButtonElement, ButtonIconProps>(\r\n (props, ref) => {\r\n const {\r\n asChild,\r\n children,\r\n icon,\r\n disabled = false,\r\n loading = false,\r\n message,\r\n title = '',\r\n tooltipProps = {},\r\n className,\r\n variant,\r\n color,\r\n size,\r\n rounded,\r\n screenReader,\r\n counter,\r\n ...rest\r\n } = props;\r\n\r\n const Comp = asChild ? Slot : \"button\"\r\n const msg = message || title;\r\n\r\n const content = asChild\r\n ? children\r\n : (\r\n <>\r\n <LoadedIcon loading={loading} size={size}>\r\n {renderInnerIcon(icon) ?? children}\r\n <ButtonCounterBadge\r\n counter={counter}\r\n variant={variant}\r\n color={color}\r\n size={size}\r\n disabled={disabled}\r\n rounded={rounded}\r\n />\r\n </LoadedIcon>\r\n\r\n {!!screenReader && (\r\n <span className=\"sr-only\">\r\n {typeof screenReader === 'string' ? screenReader : screenReader.text}\r\n </span>\r\n )}\r\n </>\r\n )\r\n\r\n if (!content) return null;\r\n\r\n const cmp = (\r\n <Comp\r\n type='button'\r\n ref={ref}\r\n disabled={disabled}\r\n className={cn(\r\n 'group group/button group/button-icon',\r\n buttonIconVariants({\r\n variant, size, color, rounded,\r\n className\r\n }),\r\n loading && 'pointer-events-none opacity-80',\r\n )}\r\n {...rest}\r\n >\r\n {content}\r\n </Comp>\r\n )\r\n\r\n if (!msg) return cmp\r\n return (\r\n <Tooltip\r\n {...(tooltipProps || {})}\r\n open={tooltipProps.open ?? (disabled || loading || !msg) ? false : undefined}\r\n message={msg}\r\n >\r\n {cmp}\r\n </Tooltip>\r\n )\r\n }\r\n)\r\nButtonIcon.displayName = \"Button\"\r\nexport default ButtonIcon;\r\n"],"names":["renderInnerIcon","Icon","isValidElement","createElement","ButtonIcon","React","props","ref","asChild","children","icon","disabled","loading","message","title","tooltipProps","className","variant","color","size","rounded","screenReader","counter","rest","Comp","Slot","msg","content","jsxs","Fragment","LoadedIcon","jsx","ButtonCounterBadge","cmp","cn","buttonIconVariants","Tooltip"],"mappings":";;;;;;;;;AAaA,MAAMA,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAI,IAAUA,IAC1BE,EAAcF,CAAI,IAFP,MA4DPG,IAAaC,EAAM;AAAA,EAC9B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,MAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,SAAAC,IAAU;AAAA,MACV,SAAAC;AAAA,MACA,OAAAC,IAAQ;AAAA,MACR,cAAAC,IAAe,CAAA;AAAA,MACf,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,OAAAC;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,SAAAC;AAAA,MACA,GAAGC;AAAA,IAAA,IACDjB,GAEEkB,IAAOhB,IAAUiB,IAAO,UACxBC,IAAMb,KAAWC,GAEjBa,IAAUnB,IACZC,IAEA,gBAAAmB,EAAAC,GAAA,EACE,UAAA;AAAA,MAAA,gBAAAD,EAACE,GAAA,EAAW,SAAAlB,GAAkB,MAAAO,GAC3B,UAAA;AAAA,QAAAnB,EAAgBU,CAAI,KAAKD;AAAA,QAC1B,gBAAAsB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,SAAAV;AAAA,YACA,SAAAL;AAAA,YACA,OAAAC;AAAA,YACA,MAAAC;AAAA,YACA,UAAAR;AAAA,YACA,SAAAS;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,GACF;AAAA,MAEC,CAAC,CAACC,KACD,gBAAAU,EAAC,QAAA,EAAK,WAAU,WACb,UAAA,OAAOV,KAAiB,WAAWA,IAAeA,EAAa,KAAA,CAClE;AAAA,IAAA,GAEJ;AAGJ,QAAI,CAACM,EAAS,QAAO;AAErB,UAAMM,IACJ,gBAAAF;AAAA,MAACP;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,KAAAjB;AAAA,QACA,UAAAI;AAAA,QACA,WAAWuB;AAAA,UACT;AAAA,UACAC,EAAmB;AAAA,YACjB,SAAAlB;AAAA,YAAS,MAAAE;AAAA,YAAM,OAAAD;AAAA,YAAO,SAAAE;AAAA,YACtB,WAAAJ;AAAA,UAAA,CACD;AAAA,UACDJ,KAAW;AAAA,QAAA;AAAA,QAEZ,GAAGW;AAAA,QAEH,UAAAI;AAAA,MAAA;AAAA,IAAA;AAIL,WAAKD,IAEH,gBAAAK;AAAA,MAACK;AAAA,MAAA;AAAA,QACE,GAAIrB,KAAgB,CAAA;AAAA,QACrB,MAAMA,EAAa,SAASJ,KAAYC,KAAW,CAACc,KAAO,KAAQ;AAAA,QACnE,SAASA;AAAA,QAER,UAAAO;AAAA,MAAA;AAAA,IAAA,IAPYA;AAAA,EAUnB;AACF;AACA7B,EAAW,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\n\nimport { ButtonIcon } from './ButtonIcon';\nimport type { ButtonIconProps } from './ButtonIcon.types';\nimport React from 'react';\nimport { FileDownIcon, PlusIcon, Trash2Icon, MessageCircleMoreIcon } from 'lucide-react'\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\nimport { ButtonProps } from \"../Button\";\n\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\nTemplate.args = {\n onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\n};\n\nconst States = (props: ButtonIconProps) => (\n <div\n style={{\n position: 'relative',\n display: 'flex',\n flexDirection: 'column',\n gap: '16px',\n }}\n >\n {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\n .map((state) => (\n <ButtonIcon\n key={state}\n id={state}\n {...props}\n disabled={state === 'disabled' || props.disabled}\n >\n {props.children}\n </ButtonIcon>\n ))}\n </div>\n);\n\nconst StateRender = (props: ButtonIconProps) => (\n <div className='flex'>\n <DashedWrapper>\n <States {...props} variant='contained'/>\n <States {...props} variant='outlined'/>\n <States {...props} variant='ghost'/>\n </DashedWrapper>\n <DashedWrapper>\n <States {...props} variant='contained' rounded/>\n <States {...props} variant='outlined' rounded/>\n <States {...props} variant='ghost' rounded/>\n </DashedWrapper>\n </div>\n);\n\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\n\nconst variant_default: ButtonProps['variant'] = 'contained';\nconst color_default: ButtonProps['color'] = 'primary';\nconst size_default: ButtonProps['size'] = 'lg';\n\nconst iconMap = {\n 'undefined': undefined,\n \"<PlusIcon />\": <PlusIcon/>,\n \"<Trash2Icon />\": <Trash2Icon/>,\n \"<FileDownIcon />\": <FileDownIcon/>,\n PlusIcon: PlusIcon,\n Trash2Icon: Trash2Icon,\n FileDownIcon: FileDownIcon,\n};\n\nconst iconChildrenMap = {\n \"<PlusIcon />\": <PlusIcon/>,\n \"<Trash2Icon />\": <Trash2Icon/>,\n \"<FileDownIcon />\": <FileDownIcon/>,\n};\n\nconst meta = {\n title: 'ButtonIcon',\n component: ButtonIcon,\n render: Template,\n args: {\n asChild: false,\n disabled: false,\n loading: false,\n rounded: false,\n variant: variant_default,\n color: color_default,\n size: size_default,\n children: <PlusIcon/>,\n icon: undefined,\n message: undefined,\n title: undefined,\n },\n argTypes: {\n tooltip: {\n name: 'tooltip',\n description: 'ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]',\n control: false,\n },\n asChild: {\n name: 'asChild',\n description: 'ButtonIcon asChild from ButtonIconProps [boolean]',\n control: false\n },\n variant: {\n name: 'variant',\n description: 'ButtonIcon variant',\n defaultValue: variants[0],\n options: variants,\n control: { type: 'inline-radio', },\n },\n color: {\n name: 'color',\n description: 'ButtonIcon color',\n defaultValue: colors[0],\n options: colors,\n control: { type: 'inline-radio' },\n },\n size: {\n name: 'size',\n description: 'ButtonIcon size',\n defaultValue: sizes[0],\n options: sizes,\n control: { type: 'inline-radio' },\n },\n title: {\n name: 'title',\n description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\n control: { type: 'text' },\n },\n message: {\n name: 'message',\n description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\n control: { type: \"object\" },\n },\n disabled: {\n name: 'disabled',\n description: 'ButtonIcon disabled',\n control: { type: 'boolean' }\n },\n rounded: {\n name: 'rounded',\n description: 'ButtonIcon rounded',\n control: { type: 'boolean' }\n },\n loading: {\n name: 'loading',\n description: 'ButtonIcon loading',\n control: { type: 'boolean' }\n },\n icon: {\n name: 'icon',\n description: 'ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\n options: Object.keys(iconMap),\n mapping: iconMap,\n control: { type: 'inline-radio' },\n },\n children: {\n name: 'children',\n description: 'ButtonIcon children from ButtonIconProps [`ReactNode`]',\n options: Object.keys(iconChildrenMap),\n mapping: iconChildrenMap,\n control: { type: 'inline-radio' },\n },\n counter: {\n name: 'counter',\n description: 'ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]',\n control: { type: 'number' },\n }\n },\n parameters: {\n pseudo: {\n hover: '#hover',\n focus: '#focus',\n active: '#active',\n disabled: '#disabled',\n },\n }\n} satisfies Meta<typeof ButtonIcon>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\nconst args: Story['args'] = {\n asChild: false,\n disabled: false,\n loading: false,\n rounded: false,\n children: <PlusIcon/>,\n}\n\nexport const Default: Story = {\n args: {\n ...meta.args,\n icon: FileDownIcon,\n children: undefined,\n }\n};\n\nexport const Counter: Story = {\n render: (props) => (\n <div className='flex flex-col gap-3'>\n {sizes.map((size) => (\n <DashedWrapper key={size}>\n <ButtonIcon {...props} size={size} message='from counter'/>\n <ButtonIcon {...props} size={size} counter={0} message='count=0'/>\n <ButtonIcon {...props} size={size} counter={9} message='count=9'/>\n <ButtonIcon {...props} size={size} counter={99} message='count=99'/>\n <ButtonIcon {...props} size={size} counter={999} message='count=999'/>\n </DashedWrapper>\n ))}\n </div>\n ),\n args: {\n ...meta.args,\n variant: 'ghost',\n color: 'secondary',\n icon: MessageCircleMoreIcon,\n counter: 12,\n title: 'counter',\n },\n parameters: {\n controls: {\n include: ['counter', 'variant', 'color', 'disabled', 'loading', 'rounded' ],\n },\n },\n};\n\nexport const Primary: Story = {\n args: {\n ...args,\n color: 'primary',\n size: 'lg',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: StateRender,\n};\nPrimary.parameters = {\n controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Secondary: Story = {\n args: {\n ...args,\n color: 'secondary',\n size: 'lg',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: StateRender,\n};\nSecondary.parameters = {\n controls: { exclude: [ 'variant', 'color' ] },\n}\n\nexport const Error: Story = {\n args: {\n ...args,\n color: 'error',\n size: 'lg',\n },\n argTypes: {\n variant: { control: false },\n color: { control: false },\n },\n render: StateRender,\n};\nError.parameters = {\n controls: { exclude: [ 'variant', 'color' ] },\n}\n"],"names":["Template","props","jsx","ButtonIcon","States","state","StateRender","jsxs","DashedWrapper","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","iconChildrenMap","meta","args","Default","Counter","size","MessageCircleMoreIcon","Primary","Secondary","Error"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ButtonIcon.stories.js","sources":["../../src/ButtonIcon/ButtonIcon.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\r\n\r\nimport { ButtonIcon } from './ButtonIcon';\r\nimport type { ButtonIconProps } from './ButtonIcon.types';\r\nimport React from 'react';\r\nimport { FileDownIcon, PlusIcon, Trash2Icon, MessageCircleMoreIcon } from 'lucide-react'\r\nimport { DashedWrapper } from \"../../.storybook/Wrappers\";\r\nimport { ButtonProps } from \"../Button\";\r\n\r\nconst Template = (props: ButtonIconProps) => <ButtonIcon {...props}/>\r\nTemplate.args = {\r\n onClick: { action: (e: React.MouseEvent<HTMLButtonElement>) => e },\r\n};\r\n\r\nconst States = (props: ButtonIconProps) => (\r\n <div\r\n style={{\r\n position: 'relative',\r\n display: 'flex',\r\n flexDirection: 'column',\r\n gap: '16px',\r\n }}\r\n >\r\n {[ 'default', 'hover', 'focus', 'active', 'disabled' ]\r\n .map((state) => (\r\n <ButtonIcon\r\n key={state}\r\n id={state}\r\n {...props}\r\n disabled={state === 'disabled' || props.disabled}\r\n >\r\n {props.children}\r\n </ButtonIcon>\r\n ))}\r\n </div>\r\n);\r\n\r\nconst StateRender = (props: ButtonIconProps) => (\r\n <div className='flex'>\r\n <DashedWrapper>\r\n <States {...props} variant='contained'/>\r\n <States {...props} variant='outlined'/>\r\n <States {...props} variant='ghost'/>\r\n </DashedWrapper>\r\n <DashedWrapper>\r\n <States {...props} variant='contained' rounded/>\r\n <States {...props} variant='outlined' rounded/>\r\n <States {...props} variant='ghost' rounded/>\r\n </DashedWrapper>\r\n </div>\r\n);\r\n\r\nconst variants: ButtonIconProps['variant'][] = [ 'contained', 'outlined', 'ghost' ]\r\nconst colors: ButtonIconProps['color'][] = [ 'primary', 'secondary', 'error' ]\r\nconst sizes: ButtonIconProps['size'][] = [ 'xs', 'sm', 'md', 'lg' ]\r\n\r\nconst variant_default: ButtonProps['variant'] = 'contained';\r\nconst color_default: ButtonProps['color'] = 'primary';\r\nconst size_default: ButtonProps['size'] = 'lg';\r\n\r\nconst iconMap = {\r\n 'undefined': undefined,\r\n \"<PlusIcon />\": <PlusIcon/>,\r\n \"<Trash2Icon />\": <Trash2Icon/>,\r\n \"<FileDownIcon />\": <FileDownIcon/>,\r\n PlusIcon: PlusIcon,\r\n Trash2Icon: Trash2Icon,\r\n FileDownIcon: FileDownIcon,\r\n};\r\n\r\nconst iconChildrenMap = {\r\n \"<PlusIcon />\": <PlusIcon/>,\r\n \"<Trash2Icon />\": <Trash2Icon/>,\r\n \"<FileDownIcon />\": <FileDownIcon/>,\r\n};\r\n\r\nconst meta = {\r\n title: 'ButtonIcon',\r\n component: ButtonIcon,\r\n render: Template,\r\n args: {\r\n asChild: false,\r\n disabled: false,\r\n loading: false,\r\n rounded: false,\r\n variant: variant_default,\r\n color: color_default,\r\n size: size_default,\r\n children: <PlusIcon/>,\r\n icon: undefined,\r\n message: undefined,\r\n title: undefined,\r\n },\r\n argTypes: {\r\n tooltip: {\r\n name: 'tooltip',\r\n description: 'ButtonIcon tooltip from ButtonIconProps [deprecated, use title and message instead]',\r\n control: false,\r\n },\r\n asChild: {\r\n name: 'asChild',\r\n description: 'ButtonIcon asChild from ButtonIconProps [boolean]',\r\n control: false\r\n },\r\n variant: {\r\n name: 'variant',\r\n description: 'ButtonIcon variant',\r\n defaultValue: variants[0],\r\n options: variants,\r\n control: { type: 'inline-radio', },\r\n },\r\n color: {\r\n name: 'color',\r\n description: 'ButtonIcon color',\r\n defaultValue: colors[0],\r\n options: colors,\r\n control: { type: 'inline-radio' },\r\n },\r\n size: {\r\n name: 'size',\r\n description: 'ButtonIcon size',\r\n defaultValue: sizes[0],\r\n options: sizes,\r\n control: { type: 'inline-radio' },\r\n },\r\n title: {\r\n name: 'title',\r\n description: \"ButtonIcon tooltip title from HTMLAttributes<HTMLButtonElement> [string only]\",\r\n control: { type: 'text' },\r\n },\r\n message: {\r\n name: 'message',\r\n description: 'ButtonIcon tooltip message from ButtonProps [ReactNode]',\r\n control: { type: \"object\" },\r\n },\r\n disabled: {\r\n name: 'disabled',\r\n description: 'ButtonIcon disabled',\r\n control: { type: 'boolean' }\r\n },\r\n rounded: {\r\n name: 'rounded',\r\n description: 'ButtonIcon rounded',\r\n control: { type: 'boolean' }\r\n },\r\n loading: {\r\n name: 'loading',\r\n description: 'ButtonIcon loading',\r\n control: { type: 'boolean' }\r\n },\r\n icon: {\r\n name: 'icon',\r\n description: 'ButtonIcon icon from ButtonIconProps [`undefined` | `ComponentType<SVGProps<SVGSVGElement>>` | `ReactElement<SVGProps<SVGSVGElement>>`]',\r\n options: Object.keys(iconMap),\r\n mapping: iconMap,\r\n control: { type: 'inline-radio' },\r\n },\r\n children: {\r\n name: 'children',\r\n description: 'ButtonIcon children from ButtonIconProps [`ReactNode`]',\r\n options: Object.keys(iconChildrenMap),\r\n mapping: iconChildrenMap,\r\n control: { type: 'inline-radio' },\r\n },\r\n counter: {\r\n name: 'counter',\r\n description: 'ButtonIcon counter from ButtonIconProps [`number` | `ButtonCounterBadgeReaderOptions`]',\r\n control: { type: 'number' },\r\n }\r\n },\r\n parameters: {\r\n pseudo: {\r\n hover: '#hover',\r\n focus: '#focus',\r\n active: '#active',\r\n disabled: '#disabled',\r\n },\r\n }\r\n} satisfies Meta<typeof ButtonIcon>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\nconst args: Story['args'] = {\r\n asChild: false,\r\n disabled: false,\r\n loading: false,\r\n rounded: false,\r\n children: <PlusIcon/>,\r\n}\r\n\r\nexport const Default: Story = {\r\n args: {\r\n ...meta.args,\r\n icon: FileDownIcon,\r\n children: undefined,\r\n }\r\n};\r\n\r\nexport const Counter: Story = {\r\n render: (props) => (\r\n <div className='flex flex-col gap-3'>\r\n {sizes.map((size) => (\r\n <DashedWrapper key={size}>\r\n <ButtonIcon {...props} size={size} message='from counter'/>\r\n <ButtonIcon {...props} size={size} counter={0} message='count=0'/>\r\n <ButtonIcon {...props} size={size} counter={9} message='count=9'/>\r\n <ButtonIcon {...props} size={size} counter={99} message='count=99'/>\r\n <ButtonIcon {...props} size={size} counter={999} message='count=999'/>\r\n </DashedWrapper>\r\n ))}\r\n </div>\r\n ),\r\n args: {\r\n ...meta.args,\r\n variant: 'ghost',\r\n color: 'secondary',\r\n icon: MessageCircleMoreIcon,\r\n counter: 12,\r\n title: 'counter',\r\n },\r\n parameters: {\r\n controls: {\r\n include: ['counter', 'variant', 'color', 'disabled', 'loading', 'rounded' ],\r\n },\r\n },\r\n};\r\n\r\nexport const Primary: Story = {\r\n args: {\r\n ...args,\r\n color: 'primary',\r\n size: 'lg',\r\n },\r\n argTypes: {\r\n variant: { control: false },\r\n color: { control: false },\r\n },\r\n render: StateRender,\r\n};\r\nPrimary.parameters = {\r\n controls: { exclude: [ 'variant', 'color' ] },\r\n}\r\n\r\nexport const Secondary: Story = {\r\n args: {\r\n ...args,\r\n color: 'secondary',\r\n size: 'lg',\r\n },\r\n argTypes: {\r\n variant: { control: false },\r\n color: { control: false },\r\n },\r\n render: StateRender,\r\n};\r\nSecondary.parameters = {\r\n controls: { exclude: [ 'variant', 'color' ] },\r\n}\r\n\r\nexport const Error: Story = {\r\n args: {\r\n ...args,\r\n color: 'error',\r\n size: 'lg',\r\n },\r\n argTypes: {\r\n variant: { control: false },\r\n color: { control: false },\r\n },\r\n render: StateRender,\r\n};\r\nError.parameters = {\r\n controls: { exclude: [ 'variant', 'color' ] },\r\n}\r\n"],"names":["Template","props","jsx","ButtonIcon","States","state","StateRender","jsxs","DashedWrapper","variants","colors","sizes","variant_default","color_default","size_default","iconMap","PlusIcon","Trash2Icon","FileDownIcon","iconChildrenMap","meta","args","Default","Counter","size","MessageCircleMoreIcon","Primary","Secondary","Error"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ const a = r(
|
|
|
8
8
|
"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent",
|
|
9
9
|
"disabled:pointer-events-none disabled:cursor-default",
|
|
10
10
|
"[&_svg]:pointer-events-none [&_svg]:shrink-0",
|
|
11
|
-
"transition-transform
|
|
11
|
+
"transition-transform [&_svg]:transition-transform"
|
|
12
12
|
],
|
|
13
13
|
{
|
|
14
14
|
variants: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n [\n \"inline-flex items-center justify-center relative\",\n 'whitespace-nowrap font-medium aspect-square',\n 'cursor-pointer box-border',\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n \"disabled:pointer-events-none disabled:cursor-default\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n 'transition-transform
|
|
1
|
+
{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\nexport const buttonIconVariants = cva(\r\n [\r\n \"inline-flex items-center justify-center relative\",\r\n 'whitespace-nowrap font-medium aspect-square',\r\n 'cursor-pointer box-border',\r\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\r\n \"disabled:pointer-events-none disabled:cursor-default\",\r\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\r\n 'transition-transform [&_svg]:transition-transform',\r\n ],\r\n {\r\n variants: {\r\n variant: {\r\n none: '',\r\n contained: '',\r\n outlined: '',\r\n ghost: \"\",\r\n },\r\n color: {\r\n primary: \"\",\r\n secondary: \"\",\r\n error: \"\"\r\n },\r\n size: {\r\n xs: 'w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3',\r\n sm: 'w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4',\r\n md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\r\n lg: 'w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6',\r\n },\r\n rounded: {\r\n true: \"rounded-full\",\r\n false: \"\",\r\n },\r\n },\r\n compoundVariants: [\r\n // PRIMARY BUTTON VARIANTS\r\n {\r\n color: 'primary',\r\n variant: 'contained',\r\n className: cn(\r\n 'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\r\n 'hover:bg-[#7F4EEB]',\r\n 'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\r\n 'active:bg-[#6B3DD9]',\r\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'primary',\r\n variant: 'outlined',\r\n className: cn(\r\n 'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\r\n 'hover:bg-[#9368FF0F]',\r\n 'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\r\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'primary',\r\n variant: 'ghost',\r\n className: cn(\r\n 'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\r\n 'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\r\n 'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\r\n 'active:bg-[#9368FF0F]',\r\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n // SECONDARY BUTTON VARIANTS\r\n {\r\n color: 'secondary',\r\n variant: 'contained',\r\n className: cn(\r\n 'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\r\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\r\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\r\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\r\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'secondary',\r\n variant: 'outlined',\r\n className: cn(\r\n 'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\r\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\r\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\r\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\r\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'secondary',\r\n variant: 'ghost',\r\n className: cn(\r\n 'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\r\n 'hover:bg-[#F9FAFB]',\r\n 'focus:bg-[#FCFCFC]',\r\n 'active:bg-[#F9FAFB]',\r\n 'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n // ERROR BUTTON VARIANTS\r\n {\r\n color: 'error',\r\n variant: 'contained',\r\n className: cn(\r\n 'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\r\n 'hover:bg-[#DC2626]',\r\n 'focus:bg-[#DC2626]',\r\n 'active:bg-[#DC2626]',\r\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'error',\r\n variant: 'outlined',\r\n className: cn(\r\n 'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\r\n 'hover:bg-[#EF44440F]',\r\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\r\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n {\r\n color: 'error',\r\n variant: 'ghost',\r\n className: cn(\r\n 'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\r\n 'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\r\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\r\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n },\r\n // ROUNDED BUTTON VARIANTS\r\n {\r\n variant: 'ghost',\r\n rounded: true,\r\n className: cn(\r\n 'bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\r\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\r\n ),\r\n }\r\n ],\r\n defaultVariants: {\r\n color: \"primary\",\r\n variant: \"contained\",\r\n size: \"lg\",\r\n rounded: false,\r\n },\r\n }\r\n)\r\n\r\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\r\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|