@oneplatformdev/ui 0.1.99-beta.263 → 0.1.99-beta.265
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/Accordion/Accordion.js.map +1 -1
- package/Alert/Alert.js.map +1 -1
- package/Alert/alertVariants.js.map +1 -1
- package/AlertDialog/AlertDialog.js.map +1 -1
- package/AlertDialog/AlertDialog.stories.js +2 -4
- package/AlertDialog/AlertDialog.stories.js.map +1 -1
- package/AlertDialog/AlertDialogRoot.js +18 -20
- package/AlertDialog/AlertDialogRoot.js.map +1 -1
- package/AreaChart/AreaChart.js.map +1 -1
- package/Aside/Aside.js.map +1 -1
- package/Aside/AsideSidebar.js.map +1 -1
- package/AspectRatio/AspectRatio.js.map +1 -1
- package/Avatar/Avatar.js.map +1 -1
- package/Badge/Badge.js.map +1 -1
- package/Badge/badgeVariants.js.map +1 -1
- package/Breadcrumb/Breadcrumb.js.map +1 -1
- package/Button/Button.js +10 -11
- package/Button/Button.js.map +1 -1
- package/Button/Button.stories.js +1 -1
- package/Button/Button.stories.js.map +1 -1
- package/Button/Button.utils.js.map +1 -1
- package/Button/ButtonCounterBadge.js.map +1 -1
- package/Button/buttonVariants.js.map +1 -1
- package/ButtonIcon/ButtonIcon.js +19 -22
- package/ButtonIcon/ButtonIcon.js.map +1 -1
- package/ButtonIcon/ButtonIcon.stories.js +1 -1
- package/ButtonIcon/ButtonIcon.stories.js.map +1 -1
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +3401 -3393
- package/Calendar/Calendar.js +4 -6
- package/Calendar/Calendar.js.map +1 -1
- package/Card/Card.js.map +1 -1
- package/Carousel/Carousel.js +6 -7
- package/Carousel/Carousel.js.map +1 -1
- package/Chart/Chart.js.map +1 -1
- package/Checkbox/Checkbox.js +0 -1
- package/Checkbox/Checkbox.js.map +1 -1
- package/Checkbox/Checkbox.stories.js.map +1 -1
- package/Collapsible/Collapsible.js.map +1 -1
- package/Combobox/Combobox.js +10 -10
- package/Combobox/Combobox.js.map +1 -1
- package/Combobox/Combobox.stories.js.map +1 -1
- package/Combobox/Combobox.types.js.map +1 -1
- package/Combobox/ComboboxOptionItem.js +18 -19
- package/Combobox/ComboboxOptionItem.js.map +1 -1
- package/Combobox/ComboboxRenderContent.js +26 -27
- package/Combobox/ComboboxRenderContent.js.map +1 -1
- package/Combobox/ComboboxRenderOptions.js +5 -5
- package/Combobox/ComboboxRenderOptions.js.map +1 -1
- package/Combobox/ComboboxRenderTrigger.js +28 -30
- package/Combobox/ComboboxRenderTrigger.js.map +1 -1
- package/Command/Command.js +21 -22
- package/Command/Command.js.map +1 -1
- package/ContextPopover/ContextDropdownMenu.js.map +1 -1
- package/ContextPopover/ContextPopover.js.map +1 -1
- package/ContextPopover/useContextPopoverHandler.js.map +1 -1
- package/DataTable/DataTable.js +24 -26
- package/DataTable/DataTable.js.map +1 -1
- package/DataTable/DataTableColumnFilter.js +6 -7
- package/DataTable/DataTableColumnFilter.js.map +1 -1
- package/DataTable/useDataTable.js.map +1 -1
- package/DatePicker/DatePicker.js +12 -13
- package/DatePicker/DatePicker.js.map +1 -1
- package/Dialog/Dialog.js +20 -21
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/Dialog.stories.js +14 -15
- package/Dialog/Dialog.stories.js.map +1 -1
- package/Dialog/DialogOverlayScope.js.map +1 -1
- package/Dialog/useDialogClosePosition.js.map +1 -1
- package/Drawer/Drawer.js.map +1 -1
- package/DropdownMenu/DropdownMenu.js.map +1 -1
- package/Dropzone/Dropzone.d.ts.map +1 -1
- package/Dropzone/Dropzone.js +321 -159
- package/Dropzone/Dropzone.js.map +1 -1
- package/Dropzone/Dropzone.stories.js +257 -63
- package/Dropzone/Dropzone.stories.js.map +1 -1
- package/Dropzone/Dropzone.types.d.ts +17 -1
- package/Dropzone/Dropzone.types.d.ts.map +1 -1
- package/Dropzone/Dropzone.types.js +18 -7
- package/Dropzone/Dropzone.types.js.map +1 -1
- package/Dropzone/DropzoneFilePreview.d.ts.map +1 -1
- package/Dropzone/DropzoneFilePreview.js +45 -24
- package/Dropzone/DropzoneFilePreview.js.map +1 -1
- package/Dropzone/DropzoneSinglePickPreview.d.ts +5 -2
- package/Dropzone/DropzoneSinglePickPreview.d.ts.map +1 -1
- package/Dropzone/DropzoneSinglePickPreview.js +120 -22
- package/Dropzone/DropzoneSinglePickPreview.js.map +1 -1
- package/Dropzone/DropzoneUtils.js.map +1 -1
- package/Dropzone/index.js +7 -5
- package/Form/Form.js +14 -15
- package/Form/Form.js.map +1 -1
- package/Form/FormRenderControl.js +6 -7
- package/Form/FormRenderControl.js.map +1 -1
- package/Form/Form_old.js +4 -5
- package/Form/Form_old.js.map +1 -1
- package/FormCheckbox/FormCheckbox.js +4 -4
- package/FormCheckbox/FormCheckbox.js.map +1 -1
- package/FormCombobox/FormCombobox.js +4 -4
- package/FormCombobox/FormCombobox.js.map +1 -1
- package/FormDatePicker/FormDatePicker.js +4 -4
- package/FormDatePicker/FormDatePicker.js.map +1 -1
- package/FormDropzone/FormDropzone.js +3 -3
- package/FormDropzone/FormDropzone.js.map +1 -1
- package/FormInput/FormInput.js +6 -6
- package/FormInput/FormInput.js.map +1 -1
- package/FormInput/FormInput.stories.js.map +1 -1
- package/FormRadio/FormRadio.js.map +1 -1
- package/FormSelect/FormSelect.js +6 -9
- package/FormSelect/FormSelect.js.map +1 -1
- package/FormTextarea/FormTextarea.js +4 -4
- package/FormTextarea/FormTextarea.js.map +1 -1
- package/Header/Header.js.map +1 -1
- package/HoverCard/HoverCard.js.map +1 -1
- package/InfoBlock/InfoBlock.js.map +1 -1
- package/InfoBlock/InfoBlock.stories.js.map +1 -1
- package/InfoBlock/infoBlockVariants.js.map +1 -1
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js.map +1 -1
- package/Input/inputVariants.js.map +1 -1
- package/InputOTP/InputOTP.d.ts.map +1 -1
- package/InputOTP/InputOTP.js.map +1 -1
- package/LICENSE +21 -21
- package/Label/Label.js.map +1 -1
- package/Label/labelVariants.js.map +1 -1
- package/LazyLoader/LazyLoader.js +4 -5
- package/LazyLoader/LazyLoader.js.map +1 -1
- package/LoadedIcon/LoadedIcon.js.map +1 -1
- package/LoadingMask/LoadingMask.js.map +1 -1
- package/LoadingMask/RenderLoadingMask.js.map +1 -1
- package/LoadingProgress/LoadingProgress.js.map +1 -1
- package/LoadingProgress/loadingProgressVariants.js.map +1 -1
- package/Menubar/Menubar.js.map +1 -1
- package/NavigationMenu/NavigationMenu.js.map +1 -1
- package/NavigationMenu/navigationMenuVariants.js.map +1 -1
- package/Pagination/Pagination.js +0 -1
- package/Pagination/Pagination.js.map +1 -1
- package/Popover/Popover.js.map +1 -1
- package/Progress/Progress.js.map +1 -1
- package/README.md +7 -7
- package/Radio/Radio.js.map +1 -1
- package/RadioGroup/RadioGroup.js.map +1 -1
- package/Resizable/Resizable.js.map +1 -1
- package/Resizable/Resizable.stories.js.map +1 -1
- package/ScrollArea/ScrollArea.js.map +1 -1
- package/Search/Search.js +9 -9
- package/Search/Search.js.map +1 -1
- package/Search/Search.stories.js.map +1 -1
- package/Select/Select.js +6 -7
- package/Select/Select.js.map +1 -1
- package/Select/Select.stories.js.map +1 -1
- package/Select/SelectRoot.js.map +1 -1
- package/Separator/Separator.js.map +1 -1
- package/Sheet/Sheet.js.map +1 -1
- package/Sidebar/Sidebar.js +20 -21
- package/Sidebar/Sidebar.js.map +1 -1
- package/Skeleton/Skeleton.js.map +1 -1
- package/Slider/Slider.js.map +1 -1
- package/Sonner/Sonner.js.map +1 -1
- package/Switch/Switch.js.map +1 -1
- package/Switch/Switch.stories.js.map +1 -1
- package/Table/Table.js.map +1 -1
- package/TablePagination/TablePagination.js +21 -26
- package/TablePagination/TablePagination.js.map +1 -1
- package/Tabs/Tabs.js.map +1 -1
- package/Tabs/TabsRoot.js.map +1 -1
- package/Textarea/Textarea.js.map +1 -1
- package/Textarea/Textarea.stories.js.map +1 -1
- package/Textarea/useAutosizeTextArea.js.map +1 -1
- package/Theme/ThemeModeToggle.js +3 -4
- package/Theme/ThemeModeToggle.js.map +1 -1
- package/Theme/ThemeProvider.js.map +1 -1
- package/Toast/Toast.js.map +1 -1
- package/Toast/toast.constants.js.map +1 -1
- package/Toast/toastVariants.js.map +1 -1
- package/Toast/useToast.js.map +1 -1
- package/Toaster/Toaster.js.map +1 -1
- package/Toggle/Toggle.js.map +1 -1
- package/ToggleGroup/ToggleGroup.js.map +1 -1
- package/Tooltip/Tooltip.js.map +1 -1
- package/Tooltip/TooltipRoot.js.map +1 -1
- package/Tooltip/tooltipVariants.js.map +1 -1
- package/index.js +298 -296
- package/package.json +7 -5
- package/packages/ui/.storybook/Wrappers.js.map +1 -0
- package/styles.css +1 -0
- package/vite-env.d.ts +7 -7
- package/.storybook/Wrappers.js.map +0 -1
- /package/{.storybook → packages/ui/.storybook}/Wrappers.js +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormCombobox.js","sources":["../../src/FormCombobox/FormCombobox.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Combobox, ComboboxSelectedType } from '../Combobox';\nimport {\n FormComboboxMultiProps, FormComboboxProps,\n FormComboboxSingleProps\n} from './FormCombobox.types';\nimport { FieldValues } from 'react-hook-form';\nimport { JSX } from \"react\";\n\ntype RestOmitedType<T> = Omit<T, 'form' | 'label' | 'tooltip' | 'tooltipProps' | 'name'>;\n\ntype RestPropsType<\n T extends ComboboxSelectedType,\n Data extends FieldValues,\n Node extends object = object,\n> = T extends 'single'\n ? RestOmitedType<FormComboboxSingleProps<Data, Node>>\n : RestOmitedType<FormComboboxMultiProps<Data, Node>>\n\nexport function FormCombobox<\n Data extends FieldValues,\n Node extends object = object\n>(props: FormComboboxSingleProps<Data, Node>): JSX.Element;\nexport function FormCombobox<\n Data extends FieldValues,\n Node extends object = object\n>(props: FormComboboxMultiProps<Data, Node>): JSX.Element;\n\nexport function FormCombobox<\n Data extends object = object,\n Node extends object = object\n>(\n props: FormComboboxProps<Data, Node>\n): JSX.Element {\n const { form, label, tooltip, tooltipProps, name, imperativeRef, ...rest } = props;\n const type = (props.type ?? 'single') as 'single' | 'multi';\n return (\n <FormRenderControl\n form={form}\n label={label}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n name={name}\n render={({ field }) => (\n <FormControl>\n {type === 'multi' ? (\n <Combobox<Node>\n {...(rest as RestPropsType<'multi', Data, Node>)}\n {...field}\n type=\"multi\"\n imperativeRef={imperativeRef}\n onChange={field.onChange}\n />\n ) : (\n <Combobox<Node>\n {...(rest as RestPropsType<'single', Data, Node>)}\n {...field}\n type=\"single\"\n imperativeRef={imperativeRef}\n onChange={field.onChange}\n />\n )}\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormCombobox","props","form","label","tooltip","tooltipProps","name","imperativeRef","rest","type","jsx","FormRenderControl","field","FormControl","Combobox"],"mappings":";;;;AA4BO,SAASA,EAIdC,GACa;AACb,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,eAAAC,GAAe,GAAGC,EAAA,IAASP,GACvEQ,IAAQR,EAAM,QAAQ;AAC5B,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,EAAA,MACT,gBAAAF,EAACG,GAAA,EACE,gBAAS,UACR,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,IAGlB,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,EAClB,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
1
|
+
{"version":3,"file":"FormCombobox.js","sources":["../../src/FormCombobox/FormCombobox.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { Combobox, ComboboxSelectedType } from '../Combobox';\r\nimport {\r\n FormComboboxMultiProps, FormComboboxProps,\r\n FormComboboxSingleProps\r\n} from './FormCombobox.types';\r\nimport { FieldValues } from 'react-hook-form';\r\nimport { JSX } from \"react\";\r\n\r\ntype RestOmitedType<T> = Omit<T, 'form' | 'label' | 'tooltip' | 'tooltipProps' | 'name'>;\r\n\r\ntype RestPropsType<\r\n T extends ComboboxSelectedType,\r\n Data extends FieldValues,\r\n Node extends object = object,\r\n> = T extends 'single'\r\n ? RestOmitedType<FormComboboxSingleProps<Data, Node>>\r\n : RestOmitedType<FormComboboxMultiProps<Data, Node>>\r\n\r\nexport function FormCombobox<\r\n Data extends FieldValues,\r\n Node extends object = object\r\n>(props: FormComboboxSingleProps<Data, Node>): JSX.Element;\r\nexport function FormCombobox<\r\n Data extends FieldValues,\r\n Node extends object = object\r\n>(props: FormComboboxMultiProps<Data, Node>): JSX.Element;\r\n\r\nexport function FormCombobox<\r\n Data extends object = object,\r\n Node extends object = object\r\n>(\r\n props: FormComboboxProps<Data, Node>\r\n): JSX.Element {\r\n const { form, label, tooltip, tooltipProps, name, imperativeRef, ...rest } = props;\r\n const type = (props.type ?? 'single') as 'single' | 'multi';\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n label={label}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n name={name}\r\n render={({ field }) => (\r\n <FormControl>\r\n {type === 'multi' ? (\r\n <Combobox<Node>\r\n {...(rest as RestPropsType<'multi', Data, Node>)}\r\n {...field}\r\n type=\"multi\"\r\n imperativeRef={imperativeRef}\r\n onChange={field.onChange}\r\n />\r\n ) : (\r\n <Combobox<Node>\r\n {...(rest as RestPropsType<'single', Data, Node>)}\r\n {...field}\r\n type=\"single\"\r\n imperativeRef={imperativeRef}\r\n onChange={field.onChange}\r\n />\r\n )}\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormCombobox","props","form","label","tooltip","tooltipProps","name","imperativeRef","rest","type","jsx","FormRenderControl","field","FormControl","Combobox"],"mappings":";;;;AA4BO,SAASA,EAIdC,GACa;AACb,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,eAAAC,GAAe,GAAGC,EAAA,IAASP,GACvEQ,IAAQR,EAAM,QAAQ;AAC5B,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,EAAA,MACT,gBAAAF,EAACG,GAAA,EACE,gBAAS,UACR,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,IAGlB,gBAAAF;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAIN;AAAA,UACJ,GAAGI;AAAA,UACJ,MAAK;AAAA,UACL,eAAAL;AAAA,UACA,UAAUK,EAAM;AAAA,QAAA;AAAA,MAAA,EAClB,CAEJ;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { DatePicker as s } from "../DatePicker/DatePicker.js";
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
3
|
+
import { FormRenderControl as C } from "../Form/FormRenderControl.js";
|
|
4
|
+
import { FormControl as D } from "../Form/Form.js";
|
|
5
5
|
const P = (t) => {
|
|
6
6
|
const { form: n, name: m, tooltip: a, tooltipProps: p, label: i, onDateChange: l, ...c } = t;
|
|
7
7
|
return /* @__PURE__ */ r(
|
|
8
|
-
|
|
8
|
+
C,
|
|
9
9
|
{
|
|
10
10
|
form: n,
|
|
11
11
|
name: m,
|
|
12
12
|
tooltip: a,
|
|
13
13
|
tooltipProps: p,
|
|
14
14
|
label: i,
|
|
15
|
-
render: ({ field: o }) => /* @__PURE__ */ r(
|
|
15
|
+
render: ({ field: o }) => /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(
|
|
16
16
|
s,
|
|
17
17
|
{
|
|
18
18
|
...o,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormDatePicker.js","sources":["../../src/FormDatePicker/FormDatePicker.tsx"],"sourcesContent":["'use client';\n\nimport { DatePicker } from '../DatePicker';\nimport { FormControl, FormRenderControl } from '../Form';\nimport { FieldValues } from 'react-hook-form';\nimport { FormDatePickerProps } from './FormDatePicker.types';\n\n// TODO: add description\nexport const FormDatePicker = <Data extends FieldValues>(\n props: FormDatePickerProps<Data>\n) => {\n const { form, name, tooltip, tooltipProps, label, onDateChange, ...rest } = props;\n return (\n <FormRenderControl\n form={form}\n name={name}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n label={label}\n render={({ field }) => (\n <FormControl>\n <DatePicker\n { ...field }\n { ...rest }\n selectedDate={field.value}\n onDateChange={(date: Date | undefined) => {\n field.onChange(date);\n onDateChange?.(date);\n }}\n />\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormDatePicker","props","form","name","tooltip","tooltipProps","label","onDateChange","rest","jsx","FormRenderControl","field","FormControl","DatePicker","date"],"mappings":";;;;AAQO,MAAMA,IAAiB,CAC5BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,cAAAC,GAAc,GAAGC,EAAA,IAASP;AAC5E,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAR;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,GAAGF;AAAA,UACH,GAAGH;AAAA,UACL,cAAcG,EAAM;AAAA,UACpB,cAAc,CAACG,MAA2B;AACxC,YAAAH,EAAM,SAASG,CAAI,GACnBP,IAAeO,CAAI;AAAA,UACrB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
1
|
+
{"version":3,"file":"FormDatePicker.js","sources":["../../src/FormDatePicker/FormDatePicker.tsx"],"sourcesContent":["'use client';\r\n\r\nimport { DatePicker } from '../DatePicker';\r\nimport { FormControl, FormRenderControl } from '../Form';\r\nimport { FieldValues } from 'react-hook-form';\r\nimport { FormDatePickerProps } from './FormDatePicker.types';\r\n\r\n// TODO: add description\r\nexport const FormDatePicker = <Data extends FieldValues>(\r\n props: FormDatePickerProps<Data>\r\n) => {\r\n const { form, name, tooltip, tooltipProps, label, onDateChange, ...rest } = props;\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n name={name}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n label={label}\r\n render={({ field }) => (\r\n <FormControl>\r\n <DatePicker\r\n { ...field }\r\n { ...rest }\r\n selectedDate={field.value}\r\n onDateChange={(date: Date | undefined) => {\r\n field.onChange(date);\r\n onDateChange?.(date);\r\n }}\r\n />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormDatePicker","props","form","name","tooltip","tooltipProps","label","onDateChange","rest","jsx","FormRenderControl","field","FormControl","DatePicker","date"],"mappings":";;;;AAQO,MAAMA,IAAiB,CAC5BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,cAAAC,GAAc,GAAGC,EAAA,IAASP;AAC5E,SACE,gBAAAQ;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAR;AAAA,MACA,MAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACG,GAAGF;AAAA,UACH,GAAGH;AAAA,UACL,cAAcG,EAAM;AAAA,UACpB,cAAc,CAACG,MAA2B;AACxC,YAAAH,EAAM,SAASG,CAAI,GACnBP,IAAeO,CAAI;AAAA,UACrB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { Dropzone as a } from "../Dropzone/Dropzone.js";
|
|
3
3
|
import { FormRenderControl as s } from "../Form/FormRenderControl.js";
|
|
4
|
-
import {
|
|
4
|
+
import { FormControl as f } from "../Form/Form.js";
|
|
5
5
|
const d = (n) => {
|
|
6
6
|
const { form: t, label: e, tooltip: m, tooltipProps: p, name: l, ...i } = n;
|
|
7
7
|
return /* @__PURE__ */ o(
|
|
@@ -12,7 +12,7 @@ const d = (n) => {
|
|
|
12
12
|
tooltip: m,
|
|
13
13
|
tooltipProps: p,
|
|
14
14
|
name: l,
|
|
15
|
-
render: ({ field: r }) => /* @__PURE__ */ o(
|
|
15
|
+
render: ({ field: r }) => /* @__PURE__ */ o(f, { children: /* @__PURE__ */ o(a, { ...i, ...r, onChangeValue: r.onChange }) })
|
|
16
16
|
}
|
|
17
17
|
);
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormDropzone.js","sources":["../../src/FormDropzone/FormDropzone.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Dropzone } from '../Dropzone';\nimport { FieldValues } from 'react-hook-form';\nimport { FormDropzoneProps } from './FormDropzone.types';\n\nexport const FormDropzone = <Data extends FieldValues>(\n props: FormDropzoneProps<Data>\n) => {\n const { form, label, tooltip, tooltipProps, name, ...rest } = props;\n\n return (\n <FormRenderControl\n form={form}\n label={label}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n name={name}\n render={({ field }) => (\n <FormControl>\n <Dropzone {...rest} {...field} onChangeValue={field.onChange} />\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormDropzone","props","form","label","tooltip","tooltipProps","name","rest","jsx","FormRenderControl","field","FormControl","Dropzone"],"mappings":";;;;AAKO,MAAMA,IAAe,CAC1BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,GAAGC,MAASN;AAE9D,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAI,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH,EAACI,GAAA,EAAU,GAAGL,GAAO,GAAGG,GAAO,eAAeA,EAAM,UAAU,EAAA,CAChE;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
1
|
+
{"version":3,"file":"FormDropzone.js","sources":["../../src/FormDropzone/FormDropzone.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { Dropzone } from '../Dropzone';\r\nimport { FieldValues } from 'react-hook-form';\r\nimport { FormDropzoneProps } from './FormDropzone.types';\r\n\r\nexport const FormDropzone = <Data extends FieldValues>(\r\n props: FormDropzoneProps<Data>\r\n) => {\r\n const { form, label, tooltip, tooltipProps, name, ...rest } = props;\r\n\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n label={label}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n name={name}\r\n render={({ field }) => (\r\n <FormControl>\r\n <Dropzone {...rest} {...field} onChangeValue={field.onChange} />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormDropzone","props","form","label","tooltip","tooltipProps","name","rest","jsx","FormRenderControl","field","FormControl","Dropzone"],"mappings":";;;;AAKO,MAAMA,IAAe,CAC1BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,GAAGC,MAASN;AAE9D,SACE,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAP;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAI,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH,EAACI,GAAA,EAAU,GAAGL,GAAO,GAAGG,GAAO,eAAeA,EAAM,UAAU,EAAA,CAChE;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
package/FormInput/FormInput.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { jsx as m } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { forwardRef as S } from "react";
|
|
3
3
|
import { FormRenderControl as V } from "../Form/FormRenderControl.js";
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
4
|
+
import { FormControl as j } from "../Form/Form.js";
|
|
5
|
+
import { Input as q } from "../Input/Input.js";
|
|
6
6
|
function w(D, o) {
|
|
7
7
|
const { form: a, tooltip: x, tooltipProps: P, label: b, name: u, maxLength: s, counter: y, onChange: C, onBlur: F, onPaste: A, style: I, onPastePrepare: p, ...B } = D;
|
|
8
8
|
return /* @__PURE__ */ m(
|
|
@@ -13,8 +13,8 @@ function w(D, o) {
|
|
|
13
13
|
tooltip: x,
|
|
14
14
|
tooltipProps: P,
|
|
15
15
|
label: b,
|
|
16
|
-
render: ({ field: n, fieldState: R }) => /* @__PURE__ */ m(
|
|
17
|
-
|
|
16
|
+
render: ({ field: n, fieldState: R }) => /* @__PURE__ */ m(j, { children: /* @__PURE__ */ m(
|
|
17
|
+
q,
|
|
18
18
|
{
|
|
19
19
|
...n,
|
|
20
20
|
...B,
|
|
@@ -62,7 +62,7 @@ function w(D, o) {
|
|
|
62
62
|
}
|
|
63
63
|
);
|
|
64
64
|
}
|
|
65
|
-
const G =
|
|
65
|
+
const G = S(w);
|
|
66
66
|
export {
|
|
67
67
|
G as FormInput
|
|
68
68
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.js","sources":["../../src/FormInput/FormInput.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Input } from '../Input';\nimport { FormInputProps } from './FormInput.types';\nimport { FieldValues, Path, PathValue } from 'react-hook-form';\nimport { forwardRef, ReactElement, Ref, RefObject } from 'react';\n\n// TODO: add description\n// export const FormInput = <Data extends FieldValues>(\n// props: FormInputProps<Data> & { inputRef?: Ref<HTMLInputElement> }\n// ) => {\n// const { inputRef, form, label, name, onChange, onBlur, style, ...rest } =\n// props;\n// return (\n// <FormRenderControl\n// form={form}\n// name={name}\n// label={label}\n// render={({ field }) => (\n// <FormControl>\n// <Input\n// {...field}\n// {...rest}\n// ref={(el) => {\n// field.ref(el);\n// if (typeof inputRef === 'function') {\n// inputRef(el);\n// } else if (inputRef) {\n// (inputRef as RefObject<HTMLInputElement | null>).current = el;\n// }\n// }}\n// style={style}\n// value={field.value || ''}\n// onChange={(...rest) => {\n// field.onChange?.(...rest);\n// onChange?.(...rest);\n// }}\n// onBlur={(...rest) => {\n// field.onBlur?.();\n// onBlur?.(...rest);\n// }}\n// />\n// </FormControl>\n// )}\n// />\n// );\n// };\n\nfunction FormInputInner<Data extends FieldValues>(\n props: FormInputProps<Data>,\n ref: Ref<HTMLInputElement>\n) {\n const { form, tooltip, tooltipProps, label, name, maxLength, counter, onChange, onBlur, onPaste, style, onPastePrepare, ...rest } = props;\n return (\n <FormRenderControl\n form={form}\n name={name}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n label={label}\n render={({ field, fieldState }) => (\n <FormControl>\n <Input\n {...field}\n {...rest}\n counter={!!fieldState.error ? false : counter}\n maxLength={maxLength}\n ref={(el) => {\n field.ref(el);\n if (typeof ref === 'function') {\n ref(el);\n } else if (ref) {\n (ref as RefObject<HTMLInputElement | null>).current = el;\n }\n }}\n style={style}\n value={field.value || ''}\n onChange={(...rest) => {\n field.onChange?.(...rest);\n onChange?.(...rest);\n }}\n onPaste={(e) => {\n const pasted = e.clipboardData.getData('text');\n const input = e.currentTarget;\n\n const start = input.selectionStart ?? input.value.length;\n const end = input.selectionEnd ?? input.value.length;\n\n const current = input.value;\n\n let next = current.slice(0, start) + pasted + current.slice(end);\n\n if (onPastePrepare) {\n next = onPastePrepare(next, e);\n }\n\n if (typeof maxLength !== 'number') {\n e.preventDefault();\n\n form.setValue(name, next as PathValue<Data, Path<Data>>, {\n shouldDirty: true,\n shouldTouch: true,\n });\n\n return;\n }\n\n const before = current.slice(0, start);\n const after = current.slice(end);\n\n const available = maxLength - (before.length + after.length);\n\n if (available <= 0) {\n e.preventDefault();\n return;\n }\n\n const limitedPaste = pasted.slice(0, available);\n const limitedNext = before + limitedPaste + after;\n\n e.preventDefault();\n\n form.setValue(name, limitedNext as PathValue<Data, Path<Data>>, {\n shouldDirty: true,\n shouldTouch: true,\n });\n\n requestAnimationFrame(() => {\n input.setSelectionRange(\n before.length + limitedPaste.length,\n before.length + limitedPaste.length\n );\n });\n }}\n onBlur={(...rest) => {\n field.onBlur?.();\n onBlur?.(...rest);\n }}\n />\n </FormControl>\n )}\n />\n );\n}\n\nexport const FormInput = forwardRef(FormInputInner) as <Data extends FieldValues>(\n props: FormInputProps<Data> & { ref?: Ref<HTMLInputElement> }\n) => ReactElement;\n"],"names":["FormInputInner","props","ref","form","tooltip","tooltipProps","label","name","maxLength","counter","onChange","onBlur","onPaste","style","onPastePrepare","rest","jsx","FormRenderControl","field","fieldState","FormControl","Input","el","e","pasted","input","start","end","current","next","before","after","available","limitedPaste","limitedNext","FormInput","forwardRef"],"mappings":";;;;;AA+CA,SAASA,EACPC,GACAC,GACA;AACA,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,OAAAC,GAAO,gBAAAC,GAAgB,GAAGC,MAASd;AACpI,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAd;AAAA,MACA,MAAAI;AAAA,MACA,SAAAH;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAY,GAAO,YAAAC,EAAA,wBACfC,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACE,GAAGH;AAAA,UACH,GAAGH;AAAA,UACJ,SAAWI,EAAW,QAAQ,KAAQV;AAAA,UACtC,WAAAD;AAAA,UACA,KAAK,CAACc,MAAO;AACX,YAAAJ,EAAM,IAAII,CAAE,GACR,OAAOpB,KAAQ,aACjBA,EAAIoB,CAAE,IACGpB,MACRA,EAA2C,UAAUoB;AAAA,UAE1D;AAAA,UACA,OAAAT;AAAA,UACA,OAAOK,EAAM,SAAS;AAAA,UACtB,UAAU,IAAIH,MAAS;AACrB,YAAAG,EAAM,WAAW,GAAGH,CAAI,GACxBL,IAAW,GAAGK,CAAI;AAAA,UACpB;AAAA,UACA,SAAS,CAACQ,MAAM;AACd,kBAAMC,IAASD,EAAE,cAAc,QAAQ,MAAM,GACvCE,IAAQF,EAAE,eAEVG,IAAQD,EAAM,kBAAkBA,EAAM,MAAM,QAC5CE,IAAMF,EAAM,gBAAgBA,EAAM,MAAM,QAExCG,IAAUH,EAAM;AAEtB,gBAAII,IAAOD,EAAQ,MAAM,GAAGF,CAAK,IAAIF,IAASI,EAAQ,MAAMD,CAAG;AAM/D,gBAJIb,MACFe,IAAOf,EAAee,GAAMN,CAAC,IAG3B,OAAOf,KAAc,UAAU;AACjC,cAAAe,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAMsB,GAAqC;AAAA,gBACvD,aAAa;AAAA,gBACb,aAAa;AAAA,cAAA,CACd;AAED;AAAA,YACF;AAEA,kBAAMC,IAASF,EAAQ,MAAM,GAAGF,CAAK,GAC/BK,IAAQH,EAAQ,MAAMD,CAAG,GAEzBK,IAAYxB,KAAasB,EAAO,SAASC,EAAM;AAErD,gBAAIC,KAAa,GAAG;AAClB,cAAAT,EAAE,eAAA;AACF;AAAA,YACF;AAEA,kBAAMU,IAAeT,EAAO,MAAM,GAAGQ,CAAS,GACxCE,IAAcJ,IAASG,IAAeF;AAE5C,YAAAR,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAM2B,GAA4C;AAAA,cAC9D,aAAa;AAAA,cACb,aAAa;AAAA,YAAA,CACd,GAED,sBAAsB,MAAM;AAC1B,cAAAT,EAAM;AAAA,gBACJK,EAAO,SAASG,EAAa;AAAA,gBAC7BH,EAAO,SAASG,EAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAAA,UACH;AAAA,UACA,QAAQ,IAAIlB,MAAS;AACnB,YAAAG,EAAM,SAAA,GACNP,IAAS,GAAGI,CAAI;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAMoB,IAAYC,EAAWpC,CAAc;"}
|
|
1
|
+
{"version":3,"file":"FormInput.js","sources":["../../src/FormInput/FormInput.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { Input } from '../Input';\r\nimport { FormInputProps } from './FormInput.types';\r\nimport { FieldValues, Path, PathValue } from 'react-hook-form';\r\nimport { forwardRef, ReactElement, Ref, RefObject } from 'react';\r\n\r\n// TODO: add description\r\n// export const FormInput = <Data extends FieldValues>(\r\n// props: FormInputProps<Data> & { inputRef?: Ref<HTMLInputElement> }\r\n// ) => {\r\n// const { inputRef, form, label, name, onChange, onBlur, style, ...rest } =\r\n// props;\r\n// return (\r\n// <FormRenderControl\r\n// form={form}\r\n// name={name}\r\n// label={label}\r\n// render={({ field }) => (\r\n// <FormControl>\r\n// <Input\r\n// {...field}\r\n// {...rest}\r\n// ref={(el) => {\r\n// field.ref(el);\r\n// if (typeof inputRef === 'function') {\r\n// inputRef(el);\r\n// } else if (inputRef) {\r\n// (inputRef as RefObject<HTMLInputElement | null>).current = el;\r\n// }\r\n// }}\r\n// style={style}\r\n// value={field.value || ''}\r\n// onChange={(...rest) => {\r\n// field.onChange?.(...rest);\r\n// onChange?.(...rest);\r\n// }}\r\n// onBlur={(...rest) => {\r\n// field.onBlur?.();\r\n// onBlur?.(...rest);\r\n// }}\r\n// />\r\n// </FormControl>\r\n// )}\r\n// />\r\n// );\r\n// };\r\n\r\nfunction FormInputInner<Data extends FieldValues>(\r\n props: FormInputProps<Data>,\r\n ref: Ref<HTMLInputElement>\r\n) {\r\n const { form, tooltip, tooltipProps, label, name, maxLength, counter, onChange, onBlur, onPaste, style, onPastePrepare, ...rest } = props;\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n name={name}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n label={label}\r\n render={({ field, fieldState }) => (\r\n <FormControl>\r\n <Input\r\n {...field}\r\n {...rest}\r\n counter={!!fieldState.error ? false : counter}\r\n maxLength={maxLength}\r\n ref={(el) => {\r\n field.ref(el);\r\n if (typeof ref === 'function') {\r\n ref(el);\r\n } else if (ref) {\r\n (ref as RefObject<HTMLInputElement | null>).current = el;\r\n }\r\n }}\r\n style={style}\r\n value={field.value || ''}\r\n onChange={(...rest) => {\r\n field.onChange?.(...rest);\r\n onChange?.(...rest);\r\n }}\r\n onPaste={(e) => {\r\n const pasted = e.clipboardData.getData('text');\r\n const input = e.currentTarget;\r\n\r\n const start = input.selectionStart ?? input.value.length;\r\n const end = input.selectionEnd ?? input.value.length;\r\n\r\n const current = input.value;\r\n\r\n let next = current.slice(0, start) + pasted + current.slice(end);\r\n\r\n if (onPastePrepare) {\r\n next = onPastePrepare(next, e);\r\n }\r\n\r\n if (typeof maxLength !== 'number') {\r\n e.preventDefault();\r\n\r\n form.setValue(name, next as PathValue<Data, Path<Data>>, {\r\n shouldDirty: true,\r\n shouldTouch: true,\r\n });\r\n\r\n return;\r\n }\r\n\r\n const before = current.slice(0, start);\r\n const after = current.slice(end);\r\n\r\n const available = maxLength - (before.length + after.length);\r\n\r\n if (available <= 0) {\r\n e.preventDefault();\r\n return;\r\n }\r\n\r\n const limitedPaste = pasted.slice(0, available);\r\n const limitedNext = before + limitedPaste + after;\r\n\r\n e.preventDefault();\r\n\r\n form.setValue(name, limitedNext as PathValue<Data, Path<Data>>, {\r\n shouldDirty: true,\r\n shouldTouch: true,\r\n });\r\n\r\n requestAnimationFrame(() => {\r\n input.setSelectionRange(\r\n before.length + limitedPaste.length,\r\n before.length + limitedPaste.length\r\n );\r\n });\r\n }}\r\n onBlur={(...rest) => {\r\n field.onBlur?.();\r\n onBlur?.(...rest);\r\n }}\r\n />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n}\r\n\r\nexport const FormInput = forwardRef(FormInputInner) as <Data extends FieldValues>(\r\n props: FormInputProps<Data> & { ref?: Ref<HTMLInputElement> }\r\n) => ReactElement;\r\n"],"names":["FormInputInner","props","ref","form","tooltip","tooltipProps","label","name","maxLength","counter","onChange","onBlur","onPaste","style","onPastePrepare","rest","jsx","FormRenderControl","field","fieldState","FormControl","Input","el","e","pasted","input","start","end","current","next","before","after","available","limitedPaste","limitedNext","FormInput","forwardRef"],"mappings":";;;;;AA+CA,SAASA,EACPC,GACAC,GACA;AACA,QAAM,EAAE,MAAAC,GAAM,SAAAC,GAAS,cAAAC,GAAc,OAAAC,GAAO,MAAAC,GAAM,WAAAC,GAAW,SAAAC,GAAS,UAAAC,GAAU,QAAAC,GAAQ,SAAAC,GAAS,OAAAC,GAAO,gBAAAC,GAAgB,GAAGC,MAASd;AACpI,SACE,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAd;AAAA,MACA,MAAAI;AAAA,MACA,SAAAH;AAAA,MACA,cAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAY,GAAO,YAAAC,EAAA,wBACfC,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACE,GAAGH;AAAA,UACH,GAAGH;AAAA,UACJ,SAAWI,EAAW,QAAQ,KAAQV;AAAA,UACtC,WAAAD;AAAA,UACA,KAAK,CAACc,MAAO;AACX,YAAAJ,EAAM,IAAII,CAAE,GACR,OAAOpB,KAAQ,aACjBA,EAAIoB,CAAE,IACGpB,MACRA,EAA2C,UAAUoB;AAAA,UAE1D;AAAA,UACA,OAAAT;AAAA,UACA,OAAOK,EAAM,SAAS;AAAA,UACtB,UAAU,IAAIH,MAAS;AACrB,YAAAG,EAAM,WAAW,GAAGH,CAAI,GACxBL,IAAW,GAAGK,CAAI;AAAA,UACpB;AAAA,UACA,SAAS,CAACQ,MAAM;AACd,kBAAMC,IAASD,EAAE,cAAc,QAAQ,MAAM,GACvCE,IAAQF,EAAE,eAEVG,IAAQD,EAAM,kBAAkBA,EAAM,MAAM,QAC5CE,IAAMF,EAAM,gBAAgBA,EAAM,MAAM,QAExCG,IAAUH,EAAM;AAEtB,gBAAII,IAAOD,EAAQ,MAAM,GAAGF,CAAK,IAAIF,IAASI,EAAQ,MAAMD,CAAG;AAM/D,gBAJIb,MACFe,IAAOf,EAAee,GAAMN,CAAC,IAG3B,OAAOf,KAAc,UAAU;AACjC,cAAAe,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAMsB,GAAqC;AAAA,gBACvD,aAAa;AAAA,gBACb,aAAa;AAAA,cAAA,CACd;AAED;AAAA,YACF;AAEA,kBAAMC,IAASF,EAAQ,MAAM,GAAGF,CAAK,GAC/BK,IAAQH,EAAQ,MAAMD,CAAG,GAEzBK,IAAYxB,KAAasB,EAAO,SAASC,EAAM;AAErD,gBAAIC,KAAa,GAAG;AAClB,cAAAT,EAAE,eAAA;AACF;AAAA,YACF;AAEA,kBAAMU,IAAeT,EAAO,MAAM,GAAGQ,CAAS,GACxCE,IAAcJ,IAASG,IAAeF;AAE5C,YAAAR,EAAE,eAAA,GAEFpB,EAAK,SAASI,GAAM2B,GAA4C;AAAA,cAC9D,aAAa;AAAA,cACb,aAAa;AAAA,YAAA,CACd,GAED,sBAAsB,MAAM;AAC1B,cAAAT,EAAM;AAAA,gBACJK,EAAO,SAASG,EAAa;AAAA,gBAC7BH,EAAO,SAASG,EAAa;AAAA,cAAA;AAAA,YAEjC,CAAC;AAAA,UACH;AAAA,UACA,QAAQ,IAAIlB,MAAS;AACnB,YAAAG,EAAM,SAAA,GACNP,IAAS,GAAGI,CAAI;AAAA,UAClB;AAAA,QAAA;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEO,MAAMoB,IAAYC,EAAWpC,CAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.stories.js","sources":["../../src/FormInput/FormInput.stories.tsx"],"sourcesContent":["import React from 'react';\nimport type { Meta, StoryObj } from '@storybook/react';\nimport { FormProvider, useForm } from 'react-hook-form';\n\nimport { FormInput } from './FormInput';\n\ntype FormValues = {\n name: string;\n};\n\ntype ControlledProps = Omit<\n React.ComponentProps<typeof FormInput<FormValues>>,\n 'form' | 'name'\n> & {\n initialValue?: string;\n};\n\nfunction ControlledFormInput({ initialValue = '', ...args }: ControlledProps) {\n const form = useForm<FormValues>({\n defaultValues: {\n name: initialValue,\n },\n });\n\n const value = form.watch('name');\n const tooltip = \"UX/UI принципи, композиція, типографіка, колір, дизайн-системи та робота з інтерфейсами\"\n return (\n <FormProvider {...form}>\n <div className=\"max-w-sm space-y-3\">\n <FormInput<FormValues>\n form={form}\n name=\"name\"\n counter\n maxLength={255}\n tooltip={tooltip}\n label={\"Label\"}\n />\n\n <div className=\"text-xs text-muted-foreground\">\n value: <span className=\"font-mono\">{value}</span>\n </div>\n\n <div className=\"text-xs text-muted-foreground\">\n length: <span className=\"font-mono\">\n {value?.length ?? 0}\n </span>\n </div>\n </div>\n </FormProvider>\n );\n}\n\nconst meta = {\n title: 'FormInput',\n component: FormInput,\n parameters: {\n layout: 'centered',\n },\n args: {\n label: 'Input label',\n placeholder: 'Type something...',\n disabled: false,\n },\n argTypes: {\n form: { control: false },\n name: { control: false },\n onChange: { control: false },\n onBlur: { control: false },\n onPaste: { control: false },\n onPastePrepare: { control: false },\n },\n decorators: [\n (Story) => (\n <div className=\"p-6 w-[420px]\">\n <Story />\n </div>\n ),\n ],\n} satisfies Meta<typeof FormInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n render: (args) => <ControlledFormInput {...args} />,\n};\n"],"names":["ControlledFormInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormInput","meta","Story","Default"],"mappings":";;;AAiBA,SAASA,EAAoB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC5E,QAAMC,IAAOC,EAAoB;AAAA,IAC/B,eAAe;AAAA,MACb,MAAMH;AAAA,IAAA;AAAA,EACR,CACD,GAEKI,IAAQF,EAAK,MAAM,MAAM;AAE/B,2BACGG,GAAA,EAAc,GAAGH,GAChB,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,MAAK;AAAA,QACL,SAAO;AAAA,QACP,WAAW;AAAA,QACX,SATQ;AAAA,QAUR,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT,gBAAAI,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACtC,gBAAAC,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAM;AAAA,IAAA,GAC5C;AAAA,IAEA,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,wBACpC,QAAA,EAAK,WAAU,aACrB,UAAAF,GAAO,UAAU,EAAA,CACpB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMK,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,QAAQ,EAAE,SAAS,GAAA;AAAA,IACnB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,gBAAgB,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAEnC,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAiB;AAAA,EAC5B,QAAQ,CAACV,MAAS,gBAAAM,EAACR,GAAA,EAAqB,GAAGE,EAAA,CAAM;AACnD;"}
|
|
1
|
+
{"version":3,"file":"FormInput.stories.js","sources":["../../src/FormInput/FormInput.stories.tsx"],"sourcesContent":["import React from 'react';\r\nimport type { Meta, StoryObj } from '@storybook/react';\r\nimport { FormProvider, useForm } from 'react-hook-form';\r\n\r\nimport { FormInput } from './FormInput';\r\n\r\ntype FormValues = {\r\n name: string;\r\n};\r\n\r\ntype ControlledProps = Omit<\r\n React.ComponentProps<typeof FormInput<FormValues>>,\r\n 'form' | 'name'\r\n> & {\r\n initialValue?: string;\r\n};\r\n\r\nfunction ControlledFormInput({ initialValue = '', ...args }: ControlledProps) {\r\n const form = useForm<FormValues>({\r\n defaultValues: {\r\n name: initialValue,\r\n },\r\n });\r\n\r\n const value = form.watch('name');\r\n const tooltip = \"UX/UI принципи, композиція, типографіка, колір, дизайн-системи та робота з інтерфейсами\"\r\n return (\r\n <FormProvider {...form}>\r\n <div className=\"max-w-sm space-y-3\">\r\n <FormInput<FormValues>\r\n form={form}\r\n name=\"name\"\r\n counter\r\n maxLength={255}\r\n tooltip={tooltip}\r\n label={\"Label\"}\r\n />\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n value: <span className=\"font-mono\">{value}</span>\r\n </div>\r\n\r\n <div className=\"text-xs text-muted-foreground\">\r\n length: <span className=\"font-mono\">\r\n {value?.length ?? 0}\r\n </span>\r\n </div>\r\n </div>\r\n </FormProvider>\r\n );\r\n}\r\n\r\nconst meta = {\r\n title: 'FormInput',\r\n component: FormInput,\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n label: 'Input label',\r\n placeholder: 'Type something...',\r\n disabled: false,\r\n },\r\n argTypes: {\r\n form: { control: false },\r\n name: { control: false },\r\n onChange: { control: false },\r\n onBlur: { control: false },\r\n onPaste: { control: false },\r\n onPastePrepare: { control: false },\r\n },\r\n decorators: [\r\n (Story) => (\r\n <div className=\"p-6 w-[420px]\">\r\n <Story />\r\n </div>\r\n ),\r\n ],\r\n} satisfies Meta<typeof FormInput>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n render: (args) => <ControlledFormInput {...args} />,\r\n};\r\n"],"names":["ControlledFormInput","initialValue","args","form","useForm","value","FormProvider","jsxs","jsx","FormInput","meta","Story","Default"],"mappings":";;;AAiBA,SAASA,EAAoB,EAAE,cAAAC,IAAe,IAAI,GAAGC,KAAyB;AAC5E,QAAMC,IAAOC,EAAoB;AAAA,IAC/B,eAAe;AAAA,MACb,MAAMH;AAAA,IAAA;AAAA,EACR,CACD,GAEKI,IAAQF,EAAK,MAAM,MAAM;AAE/B,2BACGG,GAAA,EAAc,GAAGH,GAChB,UAAA,gBAAAI,EAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,MAAAN;AAAA,QACA,MAAK;AAAA,QACL,SAAO;AAAA,QACP,WAAW;AAAA,QACX,SATQ;AAAA,QAUR,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,IAGT,gBAAAI,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,MACtC,gBAAAC,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAM;AAAA,IAAA,GAC5C;AAAA,IAEA,gBAAAE,EAAC,OAAA,EAAI,WAAU,iCAAgC,UAAA;AAAA,MAAA;AAAA,wBACpC,QAAA,EAAK,WAAU,aACrB,UAAAF,GAAO,UAAU,EAAA,CACpB;AAAA,IAAA,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;AAEA,MAAMK,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWD;AAAA,EACX,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,MAAM,EAAE,SAAS,GAAA;AAAA,IACjB,UAAU,EAAE,SAAS,GAAA;AAAA,IACrB,QAAQ,EAAE,SAAS,GAAA;AAAA,IACnB,SAAS,EAAE,SAAS,GAAA;AAAA,IACpB,gBAAgB,EAAE,SAAS,GAAA;AAAA,EAAM;AAAA,EAEnC,YAAY;AAAA,IACV,CAACE,MACC,gBAAAH,EAAC,OAAA,EAAI,WAAU,iBACb,UAAA,gBAAAA,EAACG,KAAM,EAAA,CACT;AAAA,EAAA;AAGN,GAMaC,IAAiB;AAAA,EAC5B,QAAQ,CAACV,MAAS,gBAAAM,EAACR,GAAA,EAAqB,GAAGE,EAAA,CAAM;AACnD;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormRadio.js","sources":["../../src/FormRadio/FormRadio.tsx"],"sourcesContent":["import { FieldValues } from 'react-hook-form';\n\nimport { FormControl, FormItem } from '../Form/Form';\nimport { FormRenderControl } from '../Form/FormRenderControl';\nimport { Radio } from '../Radio';\n\nimport type { FormRadioGroupProps } from './FormRadio.types.ts';\n\nexport const FormRadio = <Data extends FieldValues>(\n props: FormRadioGroupProps<Data>\n) => {\n const {\n form,\n name,\n label,\n onValueChange,\n value,\n defaultValue,\n renderOption,\n ...rest\n } = props;\n return (\n <FormRenderControl\n form={form}\n name={name}\n label={label}\n render={({ field }) => (\n <FormControl>\n <Radio\n {...field}\n {...rest}\n defaultValue={defaultValue || field.value}\n value={value || field.value}\n onValueChange={(value) => {\n field.onChange(value);\n onValueChange?.(value);\n }}\n renderOption={(option, DefaultOptionComponent) => {\n return (\n <FormItem key={option.value}>\n <FormControl>\n {renderOption?.(option, DefaultOptionComponent) || (\n <DefaultOptionComponent {...option} />\n )}\n </FormControl>\n </FormItem>\n );\n }}\n />\n </FormControl>\n )}\n />\n );\n};\n"],"names":["FormRadio","props","form","name","label","onValueChange","value","defaultValue","renderOption","rest","jsx","FormRenderControl","field","FormControl","Radio","option","DefaultOptionComponent","FormItem"],"mappings":";;;;AAQO,MAAMA,IAAY,CACvBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,MAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAQ,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,cAAcF,KAAgBK,EAAM;AAAA,UACpC,OAAON,KAASM,EAAM;AAAA,UACtB,eAAe,CAACN,MAAU;AACxB,YAAAM,EAAM,SAASN,CAAK,GACpBD,IAAgBC,CAAK;AAAA,UACvB;AAAA,UACA,cAAc,CAACS,GAAQC,MAEnB,gBAAAN,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACG,GAAA,EACE,cAAeE,GAAQC,CAAsB,KAC5C,gBAAAN,EAACM,KAAwB,GAAGD,EAAA,CAAQ,GAExC,EAAA,GALaA,EAAO,KAMtB;AAAA,QAEJ;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
1
|
+
{"version":3,"file":"FormRadio.js","sources":["../../src/FormRadio/FormRadio.tsx"],"sourcesContent":["import { FieldValues } from 'react-hook-form';\r\n\r\nimport { FormControl, FormItem } from '../Form/Form';\r\nimport { FormRenderControl } from '../Form/FormRenderControl';\r\nimport { Radio } from '../Radio';\r\n\r\nimport type { FormRadioGroupProps } from './FormRadio.types.ts';\r\n\r\nexport const FormRadio = <Data extends FieldValues>(\r\n props: FormRadioGroupProps<Data>\r\n) => {\r\n const {\r\n form,\r\n name,\r\n label,\r\n onValueChange,\r\n value,\r\n defaultValue,\r\n renderOption,\r\n ...rest\r\n } = props;\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n name={name}\r\n label={label}\r\n render={({ field }) => (\r\n <FormControl>\r\n <Radio\r\n {...field}\r\n {...rest}\r\n defaultValue={defaultValue || field.value}\r\n value={value || field.value}\r\n onValueChange={(value) => {\r\n field.onChange(value);\r\n onValueChange?.(value);\r\n }}\r\n renderOption={(option, DefaultOptionComponent) => {\r\n return (\r\n <FormItem key={option.value}>\r\n <FormControl>\r\n {renderOption?.(option, DefaultOptionComponent) || (\r\n <DefaultOptionComponent {...option} />\r\n )}\r\n </FormControl>\r\n </FormItem>\r\n );\r\n }}\r\n />\r\n </FormControl>\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormRadio","props","form","name","label","onValueChange","value","defaultValue","renderOption","rest","jsx","FormRenderControl","field","FormControl","Radio","option","DefaultOptionComponent","FormItem"],"mappings":";;;;AAQO,MAAMA,IAAY,CACvBC,MACG;AACH,QAAM;AAAA,IACJ,MAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,cAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDR;AACJ,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,MAAAC;AAAA,MACA,OAAAC;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAQ,EAAA,wBACRC,GAAA,EACC,UAAA,gBAAAH;AAAA,QAACI;AAAA,QAAA;AAAA,UACE,GAAGF;AAAA,UACH,GAAGH;AAAA,UACJ,cAAcF,KAAgBK,EAAM;AAAA,UACpC,OAAON,KAASM,EAAM;AAAA,UACtB,eAAe,CAACN,MAAU;AACxB,YAAAM,EAAM,SAASN,CAAK,GACpBD,IAAgBC,CAAK;AAAA,UACvB;AAAA,UACA,cAAc,CAACS,GAAQC,MAEnB,gBAAAN,EAACO,GAAA,EACC,UAAA,gBAAAP,EAACG,GAAA,EACE,cAAeE,GAAQC,CAAsB,KAC5C,gBAAAN,EAACM,KAAwB,GAAGD,EAAA,CAAQ,GAExC,EAAA,GALaA,EAAO,KAMtB;AAAA,QAEJ;AAAA,MAAA,EACF,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
package/FormSelect/FormSelect.js
CHANGED
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { Select as u } from "../Select/Select.js";
|
|
3
3
|
import { FormRenderControl as x } from "../Form/FormRenderControl.js";
|
|
4
|
-
import "
|
|
5
|
-
|
|
6
|
-
import "@oneplatformdev/utils";
|
|
7
|
-
import { Select as F } from "../Select/Select.js";
|
|
8
|
-
const V = (m) => {
|
|
4
|
+
import { FormControl as F } from "../Form/Form.js";
|
|
5
|
+
const b = (m) => {
|
|
9
6
|
const {
|
|
10
7
|
value: i = void 0,
|
|
11
8
|
form: p,
|
|
@@ -30,7 +27,7 @@ const V = (m) => {
|
|
|
30
27
|
label: a,
|
|
31
28
|
containerProps: C,
|
|
32
29
|
render: ({ field: t }) => /* @__PURE__ */ e(
|
|
33
|
-
|
|
30
|
+
u,
|
|
34
31
|
{
|
|
35
32
|
value: t.value ?? (i || ""),
|
|
36
33
|
options: c,
|
|
@@ -38,7 +35,7 @@ const V = (m) => {
|
|
|
38
35
|
const o = n ? n(r) : r;
|
|
39
36
|
t.onChange(o), h?.(r, o);
|
|
40
37
|
},
|
|
41
|
-
renderTrigger: (r, o) => /* @__PURE__ */ e(
|
|
38
|
+
renderTrigger: (r, o) => /* @__PURE__ */ e(F, { children: d?.(r, o) || o }),
|
|
42
39
|
...f
|
|
43
40
|
}
|
|
44
41
|
)
|
|
@@ -46,6 +43,6 @@ const V = (m) => {
|
|
|
46
43
|
);
|
|
47
44
|
};
|
|
48
45
|
export {
|
|
49
|
-
|
|
46
|
+
b as FormSelect
|
|
50
47
|
};
|
|
51
48
|
//# sourceMappingURL=FormSelect.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormSelect.js","sources":["../../src/FormSelect/FormSelect.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { Select } from '../Select';\nimport { FormSelectProps } from './FormSelect.types';\nimport { FieldValues } from 'react-hook-form';\n\n// TODO: add description\nexport const FormSelect = <Data extends FieldValues, ExtendOptionData>(\n props: FormSelectProps<Data, ExtendOptionData>\n) => {\n const {\n value = undefined,\n form,\n label,\n tooltip,\n tooltipProps,\n name,\n options = [],\n onChange,\n containerProps,\n renderTrigger,\n onChangePrepare,\n ...rest\n } = props;\n\n return (\n <FormRenderControl\n form={form}\n name={name}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n label={label}\n containerProps={containerProps}\n render={({ field }) => (\n <Select<ExtendOptionData>\n value={field.value ?? (value || '')}\n options={options}\n onChange={(value) => {\n const nextValue = onChangePrepare ? onChangePrepare(value) : value;\n field.onChange(nextValue);\n onChange?.(value, nextValue);\n }}\n renderTrigger={(p, defaultComponent) => {\n return (\n <FormControl>\n {renderTrigger?.(p, defaultComponent) || defaultComponent}\n </FormControl>\n )\n }}\n {...rest}\n />\n )}\n />\n );\n};\n"],"names":["FormSelect","props","value","form","label","tooltip","tooltipProps","name","options","onChange","containerProps","renderTrigger","onChangePrepare","rest","jsx","FormRenderControl","field","Select","nextValue","p","defaultComponent","FormControl"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormSelect.js","sources":["../../src/FormSelect/FormSelect.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { Select } from '../Select';\r\nimport { FormSelectProps } from './FormSelect.types';\r\nimport { FieldValues } from 'react-hook-form';\r\n\r\n// TODO: add description\r\nexport const FormSelect = <Data extends FieldValues, ExtendOptionData>(\r\n props: FormSelectProps<Data, ExtendOptionData>\r\n) => {\r\n const {\r\n value = undefined,\r\n form,\r\n label,\r\n tooltip,\r\n tooltipProps,\r\n name,\r\n options = [],\r\n onChange,\r\n containerProps,\r\n renderTrigger,\r\n onChangePrepare,\r\n ...rest\r\n } = props;\r\n\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n name={name}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n label={label}\r\n containerProps={containerProps}\r\n render={({ field }) => (\r\n <Select<ExtendOptionData>\r\n value={field.value ?? (value || '')}\r\n options={options}\r\n onChange={(value) => {\r\n const nextValue = onChangePrepare ? onChangePrepare(value) : value;\r\n field.onChange(nextValue);\r\n onChange?.(value, nextValue);\r\n }}\r\n renderTrigger={(p, defaultComponent) => {\r\n return (\r\n <FormControl>\r\n {renderTrigger?.(p, defaultComponent) || defaultComponent}\r\n </FormControl>\r\n )\r\n }}\r\n {...rest}\r\n />\r\n )}\r\n />\r\n );\r\n};\r\n"],"names":["FormSelect","props","value","form","label","tooltip","tooltipProps","name","options","onChange","containerProps","renderTrigger","onChangePrepare","rest","jsx","FormRenderControl","field","Select","nextValue","p","defaultComponent","FormControl"],"mappings":";;;;AAMO,MAAMA,IAAa,CACxBC,MACG;AACH,QAAM;AAAA,IACJ,OAAAC,IAAQ;AAAA,IACR,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,cAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC,IAAU,CAAA;AAAA,IACV,UAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDZ;AAEJ,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAZ;AAAA,MACA,MAAAI;AAAA,MACA,SAAAF;AAAA,MACA,cAAAC;AAAA,MACA,OAAAF;AAAA,MACA,gBAAAM;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAM,EAAA,MACT,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,OAAOD,EAAM,UAAUd,KAAS;AAAA,UAChC,SAAAM;AAAA,UACA,UAAU,CAACN,MAAU;AACnB,kBAAMgB,IAAYN,IAAkBA,EAAgBV,CAAK,IAAIA;AAC7D,YAAAc,EAAM,SAASE,CAAS,GACxBT,IAAWP,GAAOgB,CAAS;AAAA,UAC7B;AAAA,UACA,eAAe,CAACC,GAAGC,wBAEdC,GAAA,EACE,UAAAV,IAAgBQ,GAAGC,CAAgB,KAAKA,GAC3C;AAAA,UAGH,GAAGP;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIR;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
2
|
+
import { Textarea as f } from "../Textarea/Textarea.js";
|
|
3
3
|
import { FormRenderControl as u } from "../Form/FormRenderControl.js";
|
|
4
|
-
import {
|
|
4
|
+
import { FormControl as x } from "../Form/Form.js";
|
|
5
5
|
const P = (e) => {
|
|
6
6
|
const { form: t, label: m, tooltip: n, tooltipProps: a, name: l, containerProps: p, counter: i, ...s } = e;
|
|
7
7
|
return /* @__PURE__ */ r(
|
|
@@ -13,8 +13,8 @@ const P = (e) => {
|
|
|
13
13
|
name: l,
|
|
14
14
|
label: m,
|
|
15
15
|
containerProps: p,
|
|
16
|
-
render: ({ field: o, fieldState: c }) => /* @__PURE__ */ r(
|
|
17
|
-
|
|
16
|
+
render: ({ field: o, fieldState: c }) => /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(
|
|
17
|
+
f,
|
|
18
18
|
{
|
|
19
19
|
...o,
|
|
20
20
|
value: o.value || "",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormTextarea.js","sources":["../../src/FormTextarea/FormTextarea.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\nimport { FormTextareaProps } from './FormTextarea.types';\nimport { FieldValues } from 'react-hook-form';\nimport { Textarea } from '../Textarea';\n\n// TODO: add description\nexport const FormTextarea = <Data extends FieldValues>(\n props: FormTextareaProps<Data>\n) => {\n const { form, label, tooltip, tooltipProps, name, containerProps, counter, ...rest } = props;\n return (\n <FormRenderControl\n form={form}\n tooltip={tooltip}\n tooltipProps={tooltipProps}\n name={name}\n label={label}\n containerProps={containerProps}\n render={({ field, fieldState }) => (\n <FormControl>\n <Textarea\n {...field}\n value={field.value || ''}\n {...rest}\n counter={!!fieldState.error ? false : counter}\n />\n </FormControl>\n )}\n />\n )\n};\n"],"names":["FormTextarea","props","form","label","tooltip","tooltipProps","name","containerProps","counter","rest","jsx","FormRenderControl","field","fieldState","FormControl","Textarea"],"mappings":";;;;AAMO,MAAMA,IAAe,CAC1BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,gBAAAC,GAAgB,SAAAC,GAAS,GAAGC,EAAA,IAASR;AACvF,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,SAAAE;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,OAAAH;AAAA,MACA,gBAAAI;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,GAAO,YAAAC,EAAA,wBACfC,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACE,GAAGH;AAAA,UACJ,OAAOA,EAAM,SAAS;AAAA,UACrB,GAAGH;AAAA,UACJ,SAAWI,EAAW,QAAQ,KAAQL;AAAA,QAAA;AAAA,MAAA,EACxC,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
|
1
|
+
{"version":3,"file":"FormTextarea.js","sources":["../../src/FormTextarea/FormTextarea.tsx"],"sourcesContent":["import { FormControl, FormRenderControl } from '../Form';\r\nimport { FormTextareaProps } from './FormTextarea.types';\r\nimport { FieldValues } from 'react-hook-form';\r\nimport { Textarea } from '../Textarea';\r\n\r\n// TODO: add description\r\nexport const FormTextarea = <Data extends FieldValues>(\r\n props: FormTextareaProps<Data>\r\n) => {\r\n const { form, label, tooltip, tooltipProps, name, containerProps, counter, ...rest } = props;\r\n return (\r\n <FormRenderControl\r\n form={form}\r\n tooltip={tooltip}\r\n tooltipProps={tooltipProps}\r\n name={name}\r\n label={label}\r\n containerProps={containerProps}\r\n render={({ field, fieldState }) => (\r\n <FormControl>\r\n <Textarea\r\n {...field}\r\n value={field.value || ''}\r\n {...rest}\r\n counter={!!fieldState.error ? false : counter}\r\n />\r\n </FormControl>\r\n )}\r\n />\r\n )\r\n};\r\n"],"names":["FormTextarea","props","form","label","tooltip","tooltipProps","name","containerProps","counter","rest","jsx","FormRenderControl","field","fieldState","FormControl","Textarea"],"mappings":";;;;AAMO,MAAMA,IAAe,CAC1BC,MACG;AACH,QAAM,EAAE,MAAAC,GAAM,OAAAC,GAAO,SAAAC,GAAS,cAAAC,GAAc,MAAAC,GAAM,gBAAAC,GAAgB,SAAAC,GAAS,GAAGC,EAAA,IAASR;AACvF,SACE,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAT;AAAA,MACA,SAAAE;AAAA,MACA,cAAAC;AAAA,MACA,MAAAC;AAAA,MACA,OAAAH;AAAA,MACA,gBAAAI;AAAA,MACA,QAAQ,CAAC,EAAE,OAAAK,GAAO,YAAAC,EAAA,wBACfC,GAAA,EACC,UAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACE,GAAGH;AAAA,UACJ,OAAOA,EAAM,SAAS;AAAA,UACrB,GAAGH;AAAA,UACJ,SAAWI,EAAW,QAAQ,KAAQL;AAAA,QAAA;AAAA,MAAA,EACxC,CACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
package/Header/Header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sources":["../../src/Header/Header.tsx"],"sourcesContent":["import * as React from \"react\";\n\nimport { SidebarTrigger } from \"../Sidebar\";\nimport { Separator } from \"../Separator\";\nimport { HeaderProps } from \"./Header.types\";\n\nexport const Header: React.FC<React.PropsWithChildren<HeaderProps>> = (props) => {\n const {\n children,\n hideTrigger = false,\n } = props;\n return (\n <header\n className=\"flex h-16 shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\"\n >\n {!hideTrigger && (\n <div className=\"flex items-center gap-2\">\n <SidebarTrigger className=\"ml-1\"/>\n <Separator orientation=\"vertical\" className=\"mr-2 h-4\"/>\n </div>\n )}\n {Boolean(hideTrigger)\n ? children\n : (\n <div className=\"flex-1 text-right pr-6\">\n {children}\n </div>\n )\n }\n </header>\n )\n}\n\nexport default Header;\n"],"names":["Header","props","children","hideTrigger","jsxs","jsx","SidebarTrigger","Separator"],"mappings":";;;AAMO,MAAMA,IAAyD,CAACC,MAAU;AAC/E,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,EAAA,IACZF;AACJ,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAET,UAAA;AAAA,QAAA,CAACD,KACA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAA,gBAAAC,EAACC,GAAA,EAAe,WAAU,OAAA,CAAM;AAAA,UAChC,gBAAAD,EAACE,GAAA,EAAU,aAAY,YAAW,WAAU,WAAA,CAAU;AAAA,QAAA,GACxD;AAAA,QAEOJ,IACLD,sBAEC,OAAA,EAAI,WAAU,0BACZ,UAAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKV;"}
|
|
1
|
+
{"version":3,"file":"Header.js","sources":["../../src/Header/Header.tsx"],"sourcesContent":["import * as React from \"react\";\r\n\r\nimport { SidebarTrigger } from \"../Sidebar\";\r\nimport { Separator } from \"../Separator\";\r\nimport { HeaderProps } from \"./Header.types\";\r\n\r\nexport const Header: React.FC<React.PropsWithChildren<HeaderProps>> = (props) => {\r\n const {\r\n children,\r\n hideTrigger = false,\r\n } = props;\r\n return (\r\n <header\r\n className=\"flex h-16 shrink-0 items-center justify-between gap-2 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12\"\r\n >\r\n {!hideTrigger && (\r\n <div className=\"flex items-center gap-2\">\r\n <SidebarTrigger className=\"ml-1\"/>\r\n <Separator orientation=\"vertical\" className=\"mr-2 h-4\"/>\r\n </div>\r\n )}\r\n {Boolean(hideTrigger)\r\n ? children\r\n : (\r\n <div className=\"flex-1 text-right pr-6\">\r\n {children}\r\n </div>\r\n )\r\n }\r\n </header>\r\n )\r\n}\r\n\r\nexport default Header;\r\n"],"names":["Header","props","children","hideTrigger","jsxs","jsx","SidebarTrigger","Separator"],"mappings":";;;AAMO,MAAMA,IAAyD,CAACC,MAAU;AAC/E,QAAM;AAAA,IACJ,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,EAAA,IACZF;AACJ,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MAET,UAAA;AAAA,QAAA,CAACD,KACA,gBAAAC,EAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAA,gBAAAC,EAACC,GAAA,EAAe,WAAU,OAAA,CAAM;AAAA,UAChC,gBAAAD,EAACE,GAAA,EAAU,aAAY,YAAW,WAAU,WAAA,CAAU;AAAA,QAAA,GACxD;AAAA,QAEOJ,IACLD,sBAEC,OAAA,EAAI,WAAU,0BACZ,UAAAA,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKV;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HoverCard.js","sources":["../../src/HoverCard/HoverCard.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nconst HoverCard = HoverCardPrimitive.Root\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n React.ElementRef<typeof HoverCardPrimitive.Content>,\n React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\n <HoverCardPrimitive.Content\n ref={ref}\n align={align}\n sideOffset={sideOffset}\n className={cn(\n \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\n className\n )}\n {...props}\n />\n))\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"names":["HoverCard","HoverCardPrimitive","HoverCardTrigger","HoverCardContent","React","className","align","sideOffset","props","ref","jsx","cn"],"mappings":";;;;AAOA,MAAMA,IAAYC,EAAmB,MAE/BC,IAAmBD,EAAmB,SAEtCE,IAAmBC,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,OAAAC,IAAQ,UAAU,YAAAC,IAAa,GAAG,GAAGC,EAAA,GAASC,MAC5D,gBAAAC;AAAA,EAACT,EAAmB;AAAA,EAAnB;AAAA,IACC,KAAAQ;AAAA,IACA,OAAAH;AAAA,IACA,YAAAC;AAAA,IACA,WAAWI;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,EAAA;AACN,CACD;AACDL,EAAiB,cAAcF,EAAmB,QAAQ;"}
|
|
1
|
+
{"version":3,"file":"HoverCard.js","sources":["../../src/HoverCard/HoverCard.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as HoverCardPrimitive from \"@radix-ui/react-hover-card\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nconst HoverCard = HoverCardPrimitive.Root\r\n\r\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\r\n\r\nconst HoverCardContent = React.forwardRef<\r\n React.ElementRef<typeof HoverCardPrimitive.Content>,\r\n React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\r\n>(({ className, align = \"center\", sideOffset = 4, ...props }, ref) => (\r\n <HoverCardPrimitive.Content\r\n ref={ref}\r\n align={align}\r\n sideOffset={sideOffset}\r\n className={cn(\r\n \"z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2\",\r\n className\r\n )}\r\n {...props}\r\n />\r\n))\r\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\r\n\r\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\r\n"],"names":["HoverCard","HoverCardPrimitive","HoverCardTrigger","HoverCardContent","React","className","align","sideOffset","props","ref","jsx","cn"],"mappings":";;;;AAOA,MAAMA,IAAYC,EAAmB,MAE/BC,IAAmBD,EAAmB,SAEtCE,IAAmBC,EAAM,WAG7B,CAAC,EAAE,WAAAC,GAAW,OAAAC,IAAQ,UAAU,YAAAC,IAAa,GAAG,GAAGC,EAAA,GAASC,MAC5D,gBAAAC;AAAA,EAACT,EAAmB;AAAA,EAAnB;AAAA,IACC,KAAAQ;AAAA,IACA,OAAAH;AAAA,IACA,YAAAC;AAAA,IACA,WAAWI;AAAA,MACT;AAAA,MACAN;AAAA,IAAA;AAAA,IAED,GAAGG;AAAA,EAAA;AACN,CACD;AACDL,EAAiB,cAAcF,EAAmB,QAAQ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBlock.js","sources":["../../src/InfoBlock/InfoBlock.tsx"],"sourcesContent":["import { InfoBlockIconType, InfoBlockProps } from \"./InfoBlock.types\";\nimport { cn } from \"@oneplatformdev/utils\";\nimport { infoBlockVariants } from \"./infoBlockVariants\";\nimport { createElement, isValidElement } from \"react\";\nimport { TriangleAlertIcon, InfoIcon } from \"lucide-react\";\n\nconst renderInnerIcon = (Icon?: InfoBlockIconType) => {\n if (!Icon) return null;\n if (isValidElement(Icon)) return Icon;\n return createElement(Icon);\n};\n\nconst iconByVariant: Record<NonNullable<InfoBlockProps['variant']>, InfoBlockIconType> = {\n error: <TriangleAlertIcon className='fill-[#DC2626] text-white!'/>,\n info: <InfoIcon className='fill-[#9368FF] text-white!'/>\n}\n\nexport const InfoBlock = (props: InfoBlockProps) => {\n const { className, variant = 'error', content, icon, children, node, ...rest } = props;\n return (\n <div\n {...rest}\n className={cn(infoBlockVariants({ className, variant }))}\n >\n {children ?? (\n <>\n {renderInnerIcon(icon ?? iconByVariant[variant!])}\n {node ?? (\n <span className='whitespace-pre-wrap wrap-break-word line-clamp-10'>\n {content}\n </span>\n )}\n </>\n )}\n </div>\n )\n}\nInfoBlock.displayName = 'InfoBlock';\nexport default InfoBlock;\n\n"],"names":["renderInnerIcon","Icon","isValidElement","createElement","iconByVariant","jsx","TriangleAlertIcon","InfoIcon","InfoBlock","props","className","variant","content","icon","children","node","rest","cn","infoBlockVariants","jsxs","Fragment"],"mappings":";;;;;AAMA,MAAMA,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAI,IAAUA,IAC1BE,EAAcF,CAAI,IAFP,MAKdG,IAAmF;AAAA,EACvF,OAAO,gBAAAC,EAACC,GAAA,EAAkB,WAAU,6BAAA,CAA4B;AAAA,EAChE,MAAM,gBAAAD,EAACE,GAAA,EAAS,WAAU,6BAAA,CAA4B;AACxD,GAEaC,IAAY,CAACC,MAA0B;AAClD,QAAM,EAAE,WAAAC,GAAW,SAAAC,IAAU,SAAS,SAAAC,GAAS,MAAAC,GAAM,UAAAC,GAAU,MAAAC,GAAM,GAAGC,EAAA,IAASP;AACjF,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGW;AAAA,MACJ,WAAWC,EAAGC,EAAkB,EAAE,WAAAR,GAAW,SAAAC,EAAA,CAAS,CAAC;AAAA,MAEtD,eACC,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,QAAApB,EAAgBa,KAAQT,EAAcO,CAAQ,CAAC;AAAA,QAC/CI,KACC,gBAAAV,EAAC,QAAA,EAAK,WAAU,qDACf,UAAAO,EAAA,CACH;AAAA,MAAA,EAAA,CAEF;AAAA,IAAA;AAAA,EAAA;AAIR;AACAJ,EAAU,cAAc;"}
|
|
1
|
+
{"version":3,"file":"InfoBlock.js","sources":["../../src/InfoBlock/InfoBlock.tsx"],"sourcesContent":["import { InfoBlockIconType, InfoBlockProps } from \"./InfoBlock.types\";\r\nimport { cn } from \"@oneplatformdev/utils\";\r\nimport { infoBlockVariants } from \"./infoBlockVariants\";\r\nimport { createElement, isValidElement } from \"react\";\r\nimport { TriangleAlertIcon, InfoIcon } from \"lucide-react\";\r\n\r\nconst renderInnerIcon = (Icon?: InfoBlockIconType) => {\r\n if (!Icon) return null;\r\n if (isValidElement(Icon)) return Icon;\r\n return createElement(Icon);\r\n};\r\n\r\nconst iconByVariant: Record<NonNullable<InfoBlockProps['variant']>, InfoBlockIconType> = {\r\n error: <TriangleAlertIcon className='fill-[#DC2626] text-white!'/>,\r\n info: <InfoIcon className='fill-[#9368FF] text-white!'/>\r\n}\r\n\r\nexport const InfoBlock = (props: InfoBlockProps) => {\r\n const { className, variant = 'error', content, icon, children, node, ...rest } = props;\r\n return (\r\n <div\r\n {...rest}\r\n className={cn(infoBlockVariants({ className, variant }))}\r\n >\r\n {children ?? (\r\n <>\r\n {renderInnerIcon(icon ?? iconByVariant[variant!])}\r\n {node ?? (\r\n <span className='whitespace-pre-wrap wrap-break-word line-clamp-10'>\r\n {content}\r\n </span>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n )\r\n}\r\nInfoBlock.displayName = 'InfoBlock';\r\nexport default InfoBlock;\r\n\r\n"],"names":["renderInnerIcon","Icon","isValidElement","createElement","iconByVariant","jsx","TriangleAlertIcon","InfoIcon","InfoBlock","props","className","variant","content","icon","children","node","rest","cn","infoBlockVariants","jsxs","Fragment"],"mappings":";;;;;AAMA,MAAMA,IAAkB,CAACC,MAClBA,IACDC,EAAeD,CAAI,IAAUA,IAC1BE,EAAcF,CAAI,IAFP,MAKdG,IAAmF;AAAA,EACvF,OAAO,gBAAAC,EAACC,GAAA,EAAkB,WAAU,6BAAA,CAA4B;AAAA,EAChE,MAAM,gBAAAD,EAACE,GAAA,EAAS,WAAU,6BAAA,CAA4B;AACxD,GAEaC,IAAY,CAACC,MAA0B;AAClD,QAAM,EAAE,WAAAC,GAAW,SAAAC,IAAU,SAAS,SAAAC,GAAS,MAAAC,GAAM,UAAAC,GAAU,MAAAC,GAAM,GAAGC,EAAA,IAASP;AACjF,SACE,gBAAAJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGW;AAAA,MACJ,WAAWC,EAAGC,EAAkB,EAAE,WAAAR,GAAW,SAAAC,EAAA,CAAS,CAAC;AAAA,MAEtD,eACC,gBAAAQ,EAAAC,GAAA,EACG,UAAA;AAAA,QAAApB,EAAgBa,KAAQT,EAAcO,CAAQ,CAAC;AAAA,QAC/CI,KACC,gBAAAV,EAAC,QAAA,EAAK,WAAU,qDACf,UAAAO,EAAA,CACH;AAAA,MAAA,EAAA,CAEF;AAAA,IAAA;AAAA,EAAA;AAIR;AACAJ,EAAU,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InfoBlock.stories.js","sources":["../../src/InfoBlock/InfoBlock.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\nimport { InfoBlock } from './InfoBlock';\nimport { CircleAlert } from 'lucide-react';\n\nconst meta = {\n title: 'UI/InfoBlock',\n component: InfoBlock,\n argTypes: {\n variant: {\n control: 'select',\n options: ['error', 'info'],\n description: 'Defines the color scheme and default icon',\n },\n content: {\n control: 'text',\n description: 'Text or content inside the block',\n },\n },\n parameters: {\n layout: 'centered',\n },\n} satisfies Meta<typeof InfoBlock>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Error: Story = {\n args: {\n variant: 'error',\n content: 'Увага! Перш ніж архівувати підрозділ “Підрозділ дизайну”, переведіть співробітників до іншого — інакше вони будуть автоматично звільнені.',\n },\n};\n\nexport const Info: Story = {\n args: {\n variant: 'info',\n content: 'Зміни вступлять в силу після збереження налаштувань профілю.',\n },\n};\n\nexport const CustomIcon: Story = {\n args: {\n variant: 'info',\n icon: <CircleAlert className=\"text-blue-500\" />,\n content: 'Цей блок використовує передану вручну іконку замість стандартної.',\n },\n};\n\nexport const LongContent: Story = {\n args: {\n variant: 'error',\n content: 'Дуже довгий текст: '.repeat(20),\n },\n};\n"],"names":["meta","InfoBlock","Error","Info","CustomIcon","jsx","CircleAlert","LongContent"],"mappings":";;;AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,SAAS,MAAM;AAAA,MACzB,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ,GAMaC,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAc;AAAA,EACzB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM,gBAAAC,EAACC,GAAA,EAAY,WAAU,gBAAA,CAAgB;AAAA,IAC7C,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS,sBAAsB,OAAO,EAAE;AAAA,EAAA;AAE5C;"}
|
|
1
|
+
{"version":3,"file":"InfoBlock.stories.js","sources":["../../src/InfoBlock/InfoBlock.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\r\nimport { InfoBlock } from './InfoBlock';\r\nimport { CircleAlert } from 'lucide-react';\r\n\r\nconst meta = {\r\n title: 'UI/InfoBlock',\r\n component: InfoBlock,\r\n argTypes: {\r\n variant: {\r\n control: 'select',\r\n options: ['error', 'info'],\r\n description: 'Defines the color scheme and default icon',\r\n },\r\n content: {\r\n control: 'text',\r\n description: 'Text or content inside the block',\r\n },\r\n },\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n} satisfies Meta<typeof InfoBlock>;\r\n\r\nexport default meta;\r\n\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Error: Story = {\r\n args: {\r\n variant: 'error',\r\n content: 'Увага! Перш ніж архівувати підрозділ “Підрозділ дизайну”, переведіть співробітників до іншого — інакше вони будуть автоматично звільнені.',\r\n },\r\n};\r\n\r\nexport const Info: Story = {\r\n args: {\r\n variant: 'info',\r\n content: 'Зміни вступлять в силу після збереження налаштувань профілю.',\r\n },\r\n};\r\n\r\nexport const CustomIcon: Story = {\r\n args: {\r\n variant: 'info',\r\n icon: <CircleAlert className=\"text-blue-500\" />,\r\n content: 'Цей блок використовує передану вручну іконку замість стандартної.',\r\n },\r\n};\r\n\r\nexport const LongContent: Story = {\r\n args: {\r\n variant: 'error',\r\n content: 'Дуже довгий текст: '.repeat(20),\r\n },\r\n};\r\n"],"names":["meta","InfoBlock","Error","Info","CustomIcon","jsx","CircleAlert","LongContent"],"mappings":";;;AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,SAAS,MAAM;AAAA,MACzB,aAAa;AAAA,IAAA;AAAA,IAEf,SAAS;AAAA,MACP,SAAS;AAAA,MACT,aAAa;AAAA,IAAA;AAAA,EACf;AAAA,EAEF,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAEZ,GAMaC,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAc;AAAA,EACzB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAoB;AAAA,EAC/B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM,gBAAAC,EAACC,GAAA,EAAY,WAAU,gBAAA,CAAgB;AAAA,IAC7C,SAAS;AAAA,EAAA;AAEb,GAEaC,IAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,SAAS,sBAAsB,OAAO,EAAE;AAAA,EAAA;AAE5C;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"infoBlockVariants.js","sources":["../../src/InfoBlock/infoBlockVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\n\nexport const infoBlockVariants = cva(\n [\n 'flex items-start gap-2',\n 'p-2.5 rounded-lg',\n 'font-medium text-base leading-normal text-[#06080D]',\n 'whitespace-pre-wrap break-words',\n '[&>p]:m-0 [&>p]:p-0',\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-6\",\n 'transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200',\n ],\n {\n variants: {\n variant: {\n error: 'bg-[#DC26260F] [&>svg]:text-[#DC2626]',\n info: 'bg-[#9368FF0F] [&>svg]:text-[#9368FF]',\n },\n },\n defaultVariants: {\n variant: 'error',\n },\n }\n)\n\nexport type InfoBlockVariantsProps = VariantProps<typeof infoBlockVariants>;\n"],"names":["infoBlockVariants","cva"],"mappings":";AAEO,MAAMA,IAAoBC;AAAA,EAC/B;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,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"infoBlockVariants.js","sources":["../../src/InfoBlock/infoBlockVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\r\n\r\nexport const infoBlockVariants = cva(\r\n [\r\n 'flex items-start gap-2',\r\n 'p-2.5 rounded-lg',\r\n 'font-medium text-base leading-normal text-[#06080D]',\r\n 'whitespace-pre-wrap break-words',\r\n '[&>p]:m-0 [&>p]:p-0',\r\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-6\",\r\n 'transition-transform duration-200 [&_svg]:transition-transform [&_svg]:duration-200',\r\n ],\r\n {\r\n variants: {\r\n variant: {\r\n error: 'bg-[#DC26260F] [&>svg]:text-[#DC2626]',\r\n info: 'bg-[#9368FF0F] [&>svg]:text-[#9368FF]',\r\n },\r\n },\r\n defaultVariants: {\r\n variant: 'error',\r\n },\r\n }\r\n)\r\n\r\nexport type InfoBlockVariantsProps = VariantProps<typeof infoBlockVariants>;\r\n"],"names":["infoBlockVariants","cva"],"mappings":";AAEO,MAAMA,IAAoBC;AAAA,EAC/B;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,OAAO;AAAA,QACP,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
package/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../src/Input/Input.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState } from 'react';\nimport { Eye, EyeOff, X } from 'lucide-react';\nimport { inputVariants } from './inputVariants';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { InputProps } from './Input.types';\n\nconst clearInputNatively = (input: HTMLInputElement | null) => {\n if (!input) return;\n const setter = Object.getOwnPropertyDescriptor(\n HTMLInputElement.prototype,\n 'value',\n )?.set;\n setter?.call(input, '');\n input.dispatchEvent(new Event('input', { bubbles: true }));\n input.dispatchEvent(new Event('change', { bubbles: true }));\n};\n\nexport const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(\n (props, ref) => {\n const {\n className,\n variant,\n type,\n slotProps: { input, wrapper } = {},\n onChange,\n onTransform,\n counter = false,\n maxLength,\n fullSize = false,\n value,\n defaultValue,\n disabled,\n readOnly,\n clearable = false,\n onClear,\n ...rest\n } = props;\n const {\n startAdornment,\n className: classNameInputSlotProps,\n ...restInputSlotProps\n } = input || {};\n\n const innerRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);\n\n const isControlled = value !== undefined;\n const [uncontrolledValue, setUncontrolledValue] = useState<string>(\n defaultValue !== undefined ? String(defaultValue) : '',\n );\n const currentValue = isControlled ? String(value ?? '') : uncontrolledValue;\n\n const showClear =\n clearable && !disabled && !readOnly && currentValue.length > 0;\n\n const handleClear = () => {\n clearInputNatively(innerRef.current);\n if (!isControlled) setUncontrolledValue('');\n innerRef.current?.focus();\n onClear?.();\n };\n\n return (\n <div\n {...(wrapper || {})}\n className={cn(\n 'relative',\n fullSize && 'w-full',\n wrapper?.className\n )}>\n {Boolean(startAdornment) && (\n <span className=\"absolute left-[10px] top-1/2 -translate-y-1/2\">\n {startAdornment}\n </span>\n )}\n <input\n type={type}\n className={cn(\n inputVariants({ variant, className }),\n Boolean(startAdornment) && 'pl-10',\n clearable && 'pr-8',\n classNameInputSlotProps,\n fullSize && 'min-w-auto',\n )}\n ref={innerRef}\n maxLength={maxLength}\n value={value}\n defaultValue={defaultValue}\n disabled={disabled}\n readOnly={readOnly}\n {...restInputSlotProps}\n {...rest}\n onChange={(e) => {\n if (typeof onTransform?.(e.target.value, e) === 'string') {\n e.target.value = onTransform(e.target.value, e);\n }\n if (!isControlled) setUncontrolledValue(e.target.value);\n if (onChange) onChange(e);\n }}\n />\n {showClear && (\n <button\n type=\"button\"\n tabIndex={-1}\n aria-label=\"Clear input\"\n onMouseDown={(e) => e.preventDefault()}\n onClick={handleClear}\n className={cn(\n 'absolute top-1/2 right-3 -translate-y-1/2',\n 'text-muted-foreground hover:text-foreground',\n 'inline-flex items-center justify-center',\n )}\n >\n <X size={16} />\n </button>\n )}\n {counter && typeof maxLength === 'number' && (\n <div className={cn(\n 'w-full text-right inline-flex items-center justify-end',\n 'text-xs font-medium leading-[1.2] text-muted-foreground',\n 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\n )}>\n {currentValue.length}/{maxLength}\n </div>\n )}\n </div>\n );\n }\n);\nBaseInput.displayName = 'Input';\n\nexport const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(\n (props, ref) => {\n const [isVisible, setIsVisible] = useState<boolean>(false);\n\n const inputType = isVisible ? 'text' : 'password';\n\n const toggleVisibility = () => {\n setIsVisible(!isVisible);\n };\n\n return (\n <div {...(props?.slotProps?.wrapper || {})} className={cn('relative', props?.slotProps?.wrapper?.className)}>\n <BaseInput {...props} type={inputType} className=\"pr-8\" ref={ref} />\n <VisibilityButton isVisible={isVisible} onClick={toggleVisibility} />\n </div>\n );\n }\n);\nPasswordInput.displayName = 'PasswordInput';\n\ntype VisibilityButtonProps = {\n isVisible: boolean\n onClick: () => void\n}\n\nconst VisibilityButton = ({ isVisible, onClick }:VisibilityButtonProps) => (\n <button\n type=\"button\"\n onClick={onClick}\n className=\"absolute top-1/2 right-3 transform -translate-y-1/2\"\n >\n {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}\n </button>\n);\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n ({ type, ...props }, ref) => {\n if (type === 'password') return <PasswordInput type={type} {...props} ref={ref} />;\n return <BaseInput type={type} {...props} ref={ref} />;\n }\n);\nInput.displayName = 'Input';\n"],"names":["clearInputNatively","input","BaseInput","React","props","ref","className","variant","type","wrapper","onChange","onTransform","counter","maxLength","fullSize","value","defaultValue","disabled","readOnly","clearable","onClear","rest","startAdornment","classNameInputSlotProps","restInputSlotProps","innerRef","useRef","useImperativeHandle","isControlled","uncontrolledValue","setUncontrolledValue","useState","currentValue","showClear","handleClear","jsxs","cn","jsx","inputVariants","e","X","PasswordInput","isVisible","setIsVisible","inputType","toggleVisibility","VisibilityButton","onClick","Eye","EyeOff","Input"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../src/Input/Input.tsx"],"sourcesContent":["import React, { useImperativeHandle, useRef, useState } from 'react';\r\nimport { Eye, EyeOff, X } from 'lucide-react';\r\nimport { inputVariants } from './inputVariants';\r\n\r\nimport { cn } from '@oneplatformdev/utils';\r\nimport { InputProps } from './Input.types';\r\n\r\nconst clearInputNatively = (input: HTMLInputElement | null) => {\r\n if (!input) return;\r\n const setter = Object.getOwnPropertyDescriptor(\r\n HTMLInputElement.prototype,\r\n 'value',\r\n )?.set;\r\n setter?.call(input, '');\r\n input.dispatchEvent(new Event('input', { bubbles: true }));\r\n input.dispatchEvent(new Event('change', { bubbles: true }));\r\n};\r\n\r\nexport const BaseInput = React.forwardRef<HTMLInputElement, InputProps>(\r\n (props, ref) => {\r\n const {\r\n className,\r\n variant,\r\n type,\r\n slotProps: { input, wrapper } = {},\r\n onChange,\r\n onTransform,\r\n counter = false,\r\n maxLength,\r\n fullSize = false,\r\n value,\r\n defaultValue,\r\n disabled,\r\n readOnly,\r\n clearable = false,\r\n onClear,\r\n ...rest\r\n } = props;\r\n const {\r\n startAdornment,\r\n className: classNameInputSlotProps,\r\n ...restInputSlotProps\r\n } = input || {};\r\n\r\n const innerRef = useRef<HTMLInputElement>(null);\r\n useImperativeHandle(ref, () => innerRef.current as HTMLInputElement);\r\n\r\n const isControlled = value !== undefined;\r\n const [uncontrolledValue, setUncontrolledValue] = useState<string>(\r\n defaultValue !== undefined ? String(defaultValue) : '',\r\n );\r\n const currentValue = isControlled ? String(value ?? '') : uncontrolledValue;\r\n\r\n const showClear =\r\n clearable && !disabled && !readOnly && currentValue.length > 0;\r\n\r\n const handleClear = () => {\r\n clearInputNatively(innerRef.current);\r\n if (!isControlled) setUncontrolledValue('');\r\n innerRef.current?.focus();\r\n onClear?.();\r\n };\r\n\r\n return (\r\n <div\r\n {...(wrapper || {})}\r\n className={cn(\r\n 'relative',\r\n fullSize && 'w-full',\r\n wrapper?.className\r\n )}>\r\n {Boolean(startAdornment) && (\r\n <span className=\"absolute left-[10px] top-1/2 -translate-y-1/2\">\r\n {startAdornment}\r\n </span>\r\n )}\r\n <input\r\n type={type}\r\n className={cn(\r\n inputVariants({ variant, className }),\r\n Boolean(startAdornment) && 'pl-10',\r\n clearable && 'pr-8',\r\n classNameInputSlotProps,\r\n fullSize && 'min-w-auto',\r\n )}\r\n ref={innerRef}\r\n maxLength={maxLength}\r\n value={value}\r\n defaultValue={defaultValue}\r\n disabled={disabled}\r\n readOnly={readOnly}\r\n {...restInputSlotProps}\r\n {...rest}\r\n onChange={(e) => {\r\n if (typeof onTransform?.(e.target.value, e) === 'string') {\r\n e.target.value = onTransform(e.target.value, e);\r\n }\r\n if (!isControlled) setUncontrolledValue(e.target.value);\r\n if (onChange) onChange(e);\r\n }}\r\n />\r\n {showClear && (\r\n <button\r\n type=\"button\"\r\n tabIndex={-1}\r\n aria-label=\"Clear input\"\r\n onMouseDown={(e) => e.preventDefault()}\r\n onClick={handleClear}\r\n className={cn(\r\n 'absolute top-1/2 right-3 -translate-y-1/2',\r\n 'text-muted-foreground hover:text-foreground',\r\n 'inline-flex items-center justify-center',\r\n )}\r\n >\r\n <X size={16} />\r\n </button>\r\n )}\r\n {counter && typeof maxLength === 'number' && (\r\n <div className={cn(\r\n 'w-full text-right inline-flex items-center justify-end',\r\n 'text-xs font-medium leading-[1.2] text-muted-foreground',\r\n 'peer-disabled:cursor-not-allowed peer-disabled:opacity-70'\r\n )}>\r\n {currentValue.length}/{maxLength}\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n);\r\nBaseInput.displayName = 'Input';\r\n\r\nexport const PasswordInput = React.forwardRef<HTMLInputElement, InputProps>(\r\n (props, ref) => {\r\n const [isVisible, setIsVisible] = useState<boolean>(false);\r\n\r\n const inputType = isVisible ? 'text' : 'password';\r\n\r\n const toggleVisibility = () => {\r\n setIsVisible(!isVisible);\r\n };\r\n\r\n return (\r\n <div {...(props?.slotProps?.wrapper || {})} className={cn('relative', props?.slotProps?.wrapper?.className)}>\r\n <BaseInput {...props} type={inputType} className=\"pr-8\" ref={ref} />\r\n <VisibilityButton isVisible={isVisible} onClick={toggleVisibility} />\r\n </div>\r\n );\r\n }\r\n);\r\nPasswordInput.displayName = 'PasswordInput';\r\n\r\ntype VisibilityButtonProps = {\r\n isVisible: boolean\r\n onClick: () => void\r\n}\r\n\r\nconst VisibilityButton = ({ isVisible, onClick }:VisibilityButtonProps) => (\r\n <button\r\n type=\"button\"\r\n onClick={onClick}\r\n className=\"absolute top-1/2 right-3 transform -translate-y-1/2\"\r\n >\r\n {isVisible ? <Eye size={16} /> : <EyeOff size={16} />}\r\n </button>\r\n);\r\n\r\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n ({ type, ...props }, ref) => {\r\n if (type === 'password') return <PasswordInput type={type} {...props} ref={ref} />;\r\n return <BaseInput type={type} {...props} ref={ref} />;\r\n }\r\n);\r\nInput.displayName = 'Input';\r\n"],"names":["clearInputNatively","input","BaseInput","React","props","ref","className","variant","type","wrapper","onChange","onTransform","counter","maxLength","fullSize","value","defaultValue","disabled","readOnly","clearable","onClear","rest","startAdornment","classNameInputSlotProps","restInputSlotProps","innerRef","useRef","useImperativeHandle","isControlled","uncontrolledValue","setUncontrolledValue","useState","currentValue","showClear","handleClear","jsxs","cn","jsx","inputVariants","e","X","PasswordInput","isVisible","setIsVisible","inputType","toggleVisibility","VisibilityButton","onClick","Eye","EyeOff","Input"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\nimport React, { useState } from 'react';\nimport { Mail, Search } from 'lucide-react';\n\nimport { Input } from './Input';\n\nconst meta = {\n title: 'Input/Input',\n component: Input,\n tags: ['autodocs'],\n parameters: {\n layout: 'centered',\n },\n args: {\n placeholder: 'Enter text...',\n variant: 'default',\n fullSize: false,\n counter: false,\n disabled: false,\n clearable: false,\n },\n argTypes: {\n clearable: {\n control: 'boolean',\n },\n variant: {\n control: 'select',\n options: ['default', 'grey'],\n },\n type: {\n control: 'select',\n options: ['text', 'password', 'email', 'search', 'number'],\n },\n fullSize: {\n control: 'boolean',\n },\n counter: {\n control: 'boolean',\n },\n disabled: {\n control: 'boolean',\n },\n maxLength: {\n control: 'number',\n },\n onChange: { action: 'changed' },\n onBlur: { action: 'blurred' },\n onFocus: { action: 'focused' },\n },\n} satisfies Meta<typeof Input>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {\n type: 'text',\n placeholder: 'Default input',\n },\n};\n\nexport const GreyVariant: Story = {\n args: {\n variant: 'grey',\n type: 'text',\n placeholder: 'Grey input',\n },\n};\n\nexport const WithStartAdornment: Story = {\n args: {\n placeholder: 'Search...',\n slotProps: {\n input: {\n startAdornment: <Search size={16} />,\n },\n },\n },\n};\n\nexport const Email: Story = {\n args: {\n type: 'email',\n placeholder: 'Email address',\n slotProps: {\n input: {\n startAdornment: <Mail size={16} />,\n },\n },\n },\n};\n\nexport const Password: Story = {\n args: {\n type: 'password',\n placeholder: 'Password',\n },\n};\n\nexport const WithCounter: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Type something...',\n counter: true,\n maxLength: 50,\n },\n};\n\nexport const FullWidth: Story = {\n render: (args) => (\n <div className=\"w-[480px]\">\n <Input {...args} />\n </div>\n ),\n args: {\n placeholder: 'Full width input',\n fullSize: true,\n },\n};\n\nexport const Disabled: Story = {\n args: {\n placeholder: 'Disabled input',\n disabled: true,\n value: 'Disabled value',\n },\n};\n\nexport const WithTransform: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onTransform={(next) => next.replace(/\\D/g, '')}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Only numbers allowed',\n },\n};\n\nexport const Clearable: Story = {\n render: (args) => {\n const [value, setValue] = useState('Clear me');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n onClear={() => console.log('cleared')}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Type something...',\n clearable: true,\n },\n};\n\nexport const ClearableUncontrolled: Story = {\n render: (args) => (\n <div className=\"w-[320px]\">\n <Input {...args} defaultValue=\"Uncontrolled value\" />\n </div>\n ),\n args: {\n placeholder: 'Type something...',\n clearable: true,\n },\n};\n\nexport const ClearableWithStartAdornment: Story = {\n render: (args) => {\n const [value, setValue] = useState('john@example.com');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n type: 'email',\n placeholder: 'Email address',\n clearable: true,\n slotProps: {\n input: {\n startAdornment: <Mail size={16} />,\n },\n },\n },\n};\n\nexport const ClearableWithCounter: Story = {\n render: (args) => {\n const [value, setValue] = useState('Some text');\n\n return (\n <div className=\"w-[320px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Type something...',\n clearable: true,\n counter: true,\n maxLength: 50,\n },\n};\n\nexport const Playground: Story = {\n render: (args) => {\n const [value, setValue] = useState('');\n\n return (\n <div className=\"w-[360px]\">\n <Input\n {...args}\n value={value}\n onChange={(e) => setValue(e.target.value)}\n />\n </div>\n );\n },\n args: {\n placeholder: 'Play with controls',\n maxLength: 100,\n },\n};\n"],"names":["meta","Input","Default","GreyVariant","WithStartAdornment","jsx","Search","Email","Mail","Password","WithCounter","args","value","setValue","useState","e","FullWidth","Disabled","WithTransform","next","Clearable","ClearableUncontrolled","ClearableWithStartAdornment","ClearableWithCounter","Playground"],"mappings":";;;;AAMA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,MAAM,CAAC,UAAU;AAAA,EACjB,YAAY;AAAA,IACV,QAAQ;AAAA,EAAA;AAAA,EAEV,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,WAAW;AAAA,EAAA;AAAA,EAEb,UAAU;AAAA,IACR,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,SAAS;AAAA,MACT,SAAS,CAAC,WAAW,MAAM;AAAA,IAAA;AAAA,IAE7B,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,SAAS,UAAU,QAAQ;AAAA,IAAA;AAAA,IAE3D,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,SAAS;AAAA,MACP,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU;AAAA,MACR,SAAS;AAAA,IAAA;AAAA,IAEX,WAAW;AAAA,MACT,SAAS;AAAA,IAAA;AAAA,IAEX,UAAU,EAAE,QAAQ,UAAA;AAAA,IACpB,QAAQ,EAAE,QAAQ,UAAA;AAAA,IAClB,SAAS,EAAE,QAAQ,UAAA;AAAA,EAAU;AAEjC,GAKaC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,aAAa;AAAA,EAAA;AAEjB,GAEaC,IAAqB;AAAA,EAChC,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,MAAM;AAAA,IACN,aAAa;AAAA,EAAA;AAEjB,GAEaC,IAA4B;AAAA,EACvC,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,WAAW;AAAA,MACT,OAAO;AAAA,QACL,gBAAgB,gBAAAC,EAACC,GAAA,EAAO,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IACpC;AAAA,EACF;AAEJ,GAEaC,IAAe;AAAA,EAC1B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,MACT,OAAO;AAAA,QACL,gBAAgB,gBAAAF,EAACG,GAAA,EAAK,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAClC;AAAA,EACF;AAEJ,GAEaC,IAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,aAAa;AAAA,EAAA;AAEjB,GAEaC,IAAqB;AAAA,EAChC,QAAQ,CAACC,MAAS;AAChB,UAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE;AAErC,WACE,gBAAAT,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGU;AAAA,QACJ,OAAAC;AAAA,QACA,UAAU,CAACG,MAAMF,EAASE,EAAE,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA,GAE5C;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAEf,GAEaC,IAAmB;AAAA,EAC9B,QAAQ,CAACL,MACP,gBAAAN,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA,EAACJ,GAAA,EAAO,GAAGU,EAAA,CAAM,EAAA,CACnB;AAAA,EAEF,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,UAAU;AAAA,EAAA;AAEd,GAEaM,IAAkB;AAAA,EAC7B,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,UAAU;AAAA,IACV,OAAO;AAAA,EAAA;AAEX,GAEaC,IAAuB;AAAA,EAClC,QAAQ,CAACP,MAAS;AAChB,UAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE;AAErC,WACE,gBAAAT,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGU;AAAA,QACJ,OAAAC;AAAA,QACA,aAAa,CAACO,MAASA,EAAK,QAAQ,OAAO,EAAE;AAAA,QAC7C,UAAU,CAACJ,MAAMF,EAASE,EAAE,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA,GAE5C;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,aAAa;AAAA,EAAA;AAEjB,GAEaK,IAAmB;AAAA,EAC9B,QAAQ,CAACT,MAAS;AAChB,UAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,UAAU;AAE7C,WACE,gBAAAT,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGU;AAAA,QACJ,OAAAC;AAAA,QACA,UAAU,CAACG,MAAMF,EAASE,EAAE,OAAO,KAAK;AAAA,QACxC,SAAS,MAAM,QAAQ,IAAI,SAAS;AAAA,MAAA;AAAA,IAAA,GAExC;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,WAAW;AAAA,EAAA;AAEf,GAEaM,IAA+B;AAAA,EAC1C,QAAQ,CAACV,MACP,gBAAAN,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA,EAACJ,GAAA,EAAO,GAAGU,GAAM,cAAa,sBAAqB,GACrD;AAAA,EAEF,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,WAAW;AAAA,EAAA;AAEf,GAEaW,IAAqC;AAAA,EAChD,QAAQ,CAACX,MAAS;AAChB,UAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,kBAAkB;AAErD,WACE,gBAAAT,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGU;AAAA,QACJ,OAAAC;AAAA,QACA,UAAU,CAACG,MAAMF,EAASE,EAAE,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA,GAE5C;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,aAAa;AAAA,IACb,WAAW;AAAA,IACX,WAAW;AAAA,MACT,OAAO;AAAA,QACL,gBAAgB,gBAAAV,EAACG,GAAA,EAAK,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAClC;AAAA,EACF;AAEJ,GAEae,IAA8B;AAAA,EACzC,QAAQ,CAACZ,MAAS;AAChB,UAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,WAAW;AAE9C,WACE,gBAAAT,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGU;AAAA,QACJ,OAAAC;AAAA,QACA,UAAU,CAACG,MAAMF,EAASE,EAAE,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA,GAE5C;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,WAAW;AAAA,IACX,SAAS;AAAA,IACT,WAAW;AAAA,EAAA;AAEf,GAEaS,IAAoB;AAAA,EAC/B,QAAQ,CAACb,MAAS;AAChB,UAAM,CAACC,GAAOC,CAAQ,IAAIC,EAAS,EAAE;AAErC,WACE,gBAAAT,EAAC,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAA;AAAA,MAACJ;AAAA,MAAA;AAAA,QACE,GAAGU;AAAA,QACJ,OAAAC;AAAA,QACA,UAAU,CAACG,MAAMF,EAASE,EAAE,OAAO,KAAK;AAAA,MAAA;AAAA,IAAA,GAE5C;AAAA,EAEJ;AAAA,EACA,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,WAAW;AAAA,EAAA;AAEf;"}
|
|
1
|
+
{"version":3,"file":"Input.stories.js","sources":["../../src/Input/Input.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react';\r\nimport React, { useState } from 'react';\r\nimport { Mail, Search } from 'lucide-react';\r\n\r\nimport { Input } from './Input';\r\n\r\nconst meta = {\r\n title: 'Input/Input',\r\n component: Input,\r\n tags: ['autodocs'],\r\n parameters: {\r\n layout: 'centered',\r\n },\r\n args: {\r\n placeholder: 'Enter text...',\r\n variant: 'default',\r\n fullSize: false,\r\n counter: false,\r\n disabled: false,\r\n clearable: false,\r\n },\r\n argTypes: {\r\n clearable: {\r\n control: 'boolean',\r\n },\r\n variant: {\r\n control: 'select',\r\n options: ['default', 'grey'],\r\n },\r\n type: {\r\n control: 'select',\r\n options: ['text', 'password', 'email', 'search', 'number'],\r\n },\r\n fullSize: {\r\n control: 'boolean',\r\n },\r\n counter: {\r\n control: 'boolean',\r\n },\r\n disabled: {\r\n control: 'boolean',\r\n },\r\n maxLength: {\r\n control: 'number',\r\n },\r\n onChange: { action: 'changed' },\r\n onBlur: { action: 'blurred' },\r\n onFocus: { action: 'focused' },\r\n },\r\n} satisfies Meta<typeof Input>;\r\n\r\nexport default meta;\r\ntype Story = StoryObj<typeof meta>;\r\n\r\nexport const Default: Story = {\r\n args: {\r\n type: 'text',\r\n placeholder: 'Default input',\r\n },\r\n};\r\n\r\nexport const GreyVariant: Story = {\r\n args: {\r\n variant: 'grey',\r\n type: 'text',\r\n placeholder: 'Grey input',\r\n },\r\n};\r\n\r\nexport const WithStartAdornment: Story = {\r\n args: {\r\n placeholder: 'Search...',\r\n slotProps: {\r\n input: {\r\n startAdornment: <Search size={16} />,\r\n },\r\n },\r\n },\r\n};\r\n\r\nexport const Email: Story = {\r\n args: {\r\n type: 'email',\r\n placeholder: 'Email address',\r\n slotProps: {\r\n input: {\r\n startAdornment: <Mail size={16} />,\r\n },\r\n },\r\n },\r\n};\r\n\r\nexport const Password: Story = {\r\n args: {\r\n type: 'password',\r\n placeholder: 'Password',\r\n },\r\n};\r\n\r\nexport const WithCounter: Story = {\r\n render: (args) => {\r\n const [value, setValue] = useState('');\r\n\r\n return (\r\n <div className=\"w-[320px]\">\r\n <Input\r\n {...args}\r\n value={value}\r\n onChange={(e) => setValue(e.target.value)}\r\n />\r\n </div>\r\n );\r\n },\r\n args: {\r\n placeholder: 'Type something...',\r\n counter: true,\r\n maxLength: 50,\r\n },\r\n};\r\n\r\nexport const FullWidth: Story = {\r\n render: (args) => (\r\n <div className=\"w-[480px]\">\r\n <Input {...args} />\r\n </div>\r\n ),\r\n args: {\r\n placeholder: 'Full width input',\r\n fullSize: true,\r\n },\r\n};\r\n\r\nexport const Disabled: Story = {\r\n args: {\r\n placeholder: 'Disabled input',\r\n disabled: true,\r\n value: 'Disabled value',\r\n },\r\n};\r\n\r\nexport const WithTransform: Story = {\r\n render: (args) => {\r\n const [value, setValue] = useState('');\r\n\r\n return (\r\n <div className=\"w-[320px]\">\r\n <Input\r\n {...args}\r\n value={value}\r\n onTransform={(next) => next.replace(/\\D/g, '')}\r\n onChange={(e) => setValue(e.target.value)}\r\n />\r\n </div>\r\n );\r\n },\r\n args: {\r\n placeholder: 'Only numbers allowed',\r\n },\r\n};\r\n\r\nexport const Clearable: Story = {\r\n render: (args) => {\r\n const [value, setValue] = useState('Clear me');\r\n\r\n return (\r\n <div className=\"w-[320px]\">\r\n <Input\r\n {...args}\r\n value={value}\r\n onChange={(e) => setValue(e.target.value)}\r\n onClear={() => console.log('cleared')}\r\n />\r\n </div>\r\n );\r\n },\r\n args: {\r\n placeholder: 'Type something...',\r\n clearable: true,\r\n },\r\n};\r\n\r\nexport const ClearableUncontrolled: Story = {\r\n render: (args) => (\r\n <div className=\"w-[320px]\">\r\n <Input {...args} defaultValue=\"Uncontrolled value\" />\r\n </div>\r\n ),\r\n args: {\r\n placeholder: 'Type something...',\r\n clearable: true,\r\n },\r\n};\r\n\r\nexport const ClearableWithStartAdornment: Story = {\r\n render: (args) => {\r\n const [value, setValue] = useState('john@example.com');\r\n\r\n return (\r\n <div className=\"w-[320px]\">\r\n <Input\r\n {...args}\r\n value={value}\r\n onChange={(e) => setValue(e.target.value)}\r\n />\r\n </div>\r\n );\r\n },\r\n args: {\r\n type: 'email',\r\n placeholder: 'Email address',\r\n clearable: true,\r\n slotProps: {\r\n input: {\r\n startAdornment: <Mail size={16} />,\r\n },\r\n },\r\n },\r\n};\r\n\r\nexport const ClearableWithCounter: Story = {\r\n render: (args) => {\r\n const [value, setValue] = useState('Some text');\r\n\r\n return (\r\n <div className=\"w-[320px]\">\r\n <Input\r\n {...args}\r\n value={value}\r\n onChange={(e) => setValue(e.target.value)}\r\n />\r\n </div>\r\n );\r\n },\r\n args: {\r\n placeholder: 'Type something...',\r\n clearable: true,\r\n counter: true,\r\n maxLength: 50,\r\n },\r\n};\r\n\r\nexport const Playground: Story = {\r\n render: (args) => {\r\n const [value, setValue] = useState('');\r\n\r\n return (\r\n <div className=\"w-[360px]\">\r\n <Input\r\n {...args}\r\n value={value}\r\n onChange={(e) => setValue(e.target.value)}\r\n />\r\n </div>\r\n );\r\n },\r\n args: {\r\n placeholder: 'Play with controls',\r\n maxLength: 100,\r\n },\r\n};\r\n"],"names":["meta","Input","Default","GreyVariant","WithStartAdornment","jsx","Search","Email","Mail","Password","WithCounter","args","value","setValue","useState","e","FullWidth","Disabled","WithTransform","next","Clearable","ClearableUncontrolled","ClearableWithStartAdornment","ClearableWithCounter","Playground"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputVariants.js","sources":["../../src/Input/inputVariants.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport const inputVariants = cva(\n [\n 'flex h-10 w-full rounded-lg border border-input px-3 py-2',\n 'text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground',\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\n 'group-data-[state=invalid]/form-control:border-destructive',\n 'group-data-[state=valid]/form-control:border-input',\n 'box-border',\n ],\n {\n variants: {\n variant: {\n default: 'bg-background',\n grey: 'bg-slate-200',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n);\n"],"names":["inputVariants","cva"],"mappings":";AAEO,MAAMA,IAAgBC;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
|
1
|
+
{"version":3,"file":"inputVariants.js","sources":["../../src/Input/inputVariants.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\r\n\r\nexport const inputVariants = cva(\r\n [\r\n 'flex h-10 w-full rounded-lg border border-input px-3 py-2',\r\n 'text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground',\r\n 'focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',\r\n 'group-data-[state=invalid]/form-control:border-destructive',\r\n 'group-data-[state=valid]/form-control:border-input',\r\n 'box-border',\r\n ],\r\n {\r\n variants: {\r\n variant: {\r\n default: 'bg-background',\r\n grey: 'bg-slate-200',\r\n },\r\n },\r\n defaultVariants: {\r\n variant: 'default',\r\n },\r\n }\r\n);\r\n"],"names":["inputVariants","cva"],"mappings":";AAEO,MAAMA,IAAgBC;AAAA,EAC3B;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputOTP.d.ts","sourceRoot":"","sources":["../../src/InputOTP/InputOTP.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,QAAQ;;;;;
|
|
1
|
+
{"version":3,"file":"InputOTP.d.ts","sourceRoot":"","sources":["../../src/InputOTP/InputOTP.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,QAAQ;;;;;kBAUmB,GAAG;;;;;;;;;;;;;kBAAH,GAAG;;;;;;;;2FAGlC,CAAA;AAGF,QAAA,MAAM,aAAa,mKAKjB,CAAA;AAGF,QAAA,MAAM,YAAY;WAEiC,MAAM;wCAuBvD,CAAA;AAGF,QAAA,MAAM,iBAAiB,mKAOrB,CAAA;AAGF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,iBAAiB,EAAE,CAAA"}
|
package/InputOTP/InputOTP.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputOTP.js","sources":["../../src/InputOTP/InputOTP.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { Minus } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\";\n\nconst InputOTP = React.forwardRef<\n React.ElementRef<typeof OTPInput>,\n React.ComponentPropsWithoutRef<typeof OTPInput>\n>(({ className, containerClassName, ...props }, ref) => (\n <OTPInput\n ref={ref}\n containerClassName={cn(\n \"flex items-center gap-2 has-disabled:opacity-50\",\n containerClassName\n )}\n className={cn(\"disabled:cursor-not-allowed\", className)}\n {...props}\n />\n))\nInputOTP.displayName = \"InputOTP\"\n\nconst InputOTPGroup = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ className, ...props }, ref) => (\n <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\n))\nInputOTPGroup.displayName = \"InputOTPGroup\"\n\nconst InputOTPSlot = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\"> & { index: number }\n>(({ index, className, ...props }, ref) => {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\n\n return (\n <div\n ref={ref}\n className={cn(\n \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\n isActive && \"z-10 ring-1 ring-ring\",\n className\n )}\n {...props}\n >\n {char}\n {hasFakeCaret && (\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n </div>\n )}\n </div>\n )\n})\nInputOTPSlot.displayName = \"InputOTPSlot\"\n\nconst InputOTPSeparator = React.forwardRef<\n React.ElementRef<\"div\">,\n React.ComponentPropsWithoutRef<\"div\">\n>(({ ...props }, ref) => (\n <div ref={ref} role=\"separator\" {...props}>\n <Minus />\n </div>\n))\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n"],"names":["InputOTP","React","className","containerClassName","props","ref","jsx","OTPInput","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","OTPInputContext","char","hasFakeCaret","isActive","jsxs","InputOTPSeparator","Minus"],"mappings":";;;;;AAQA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,GAAGC,KAASC,MAC9C,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,oBAAoBG;AAAA,MAClB;AAAA,MACAL;AAAA,IAAA;AAAA,IAEF,WAAWK,EAAG,+BAA+BN,CAAS;AAAA,IACrD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAS,cAAc;AAEvB,MAAMS,IAAgBR,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWG,EAAG,qBAAqBN,CAAS,GAAI,GAAGE,GAAO,CAC1E;AACDK,EAAc,cAAc;AAE5B,MAAMC,IAAeT,EAAM,WAGzB,CAAC,EAAE,OAAAU,GAAO,WAAAT,GAAW,GAAGE,EAAA,GAASC,MAAQ;AACzC,QAAMO,IAAkBX,EAAM,WAAWY,CAAe,GAClD,EAAE,MAAAC,GAAM,cAAAC,GAAc,UAAAC,MAAaJ,EAAgB,MAAMD,CAAK;AAEpE,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAQ,KAAY;AAAA,QACZd;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAU;AAAA,QACAC,uBACE,OAAA,EAAI,WAAU,yEACb,UAAA,gBAAAT,EAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,EAAA,CAC5E;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AACDI,EAAa,cAAc;AAE3B,MAAMQ,IAAoBjB,EAAM,WAG9B,CAAC,EAAE,GAAGG,KAASC,wBACd,OAAA,EAAI,KAAAA,GAAU,MAAK,aAAa,GAAGD,GAClC,UAAA,gBAAAE,EAACa,GAAA,CAAA,CAAM,GACT,CACD;AACDD,EAAkB,cAAc;"}
|
|
1
|
+
{"version":3,"file":"InputOTP.js","sources":["../../src/InputOTP/InputOTP.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport { OTPInput, OTPInputContext } from \"input-otp\"\r\nimport { Minus } from \"lucide-react\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\";\r\n\r\nconst InputOTP = React.forwardRef<\r\n React.ElementRef<typeof OTPInput>,\r\n React.ComponentPropsWithoutRef<typeof OTPInput>\r\n>(({ className, containerClassName, ...props }, ref) => (\r\n <OTPInput\r\n ref={ref}\r\n containerClassName={cn(\r\n \"flex items-center gap-2 has-disabled:opacity-50\",\r\n containerClassName\r\n )}\r\n className={cn(\"disabled:cursor-not-allowed\", className)}\r\n {...props}\r\n />\r\n))\r\nInputOTP.displayName = \"InputOTP\"\r\n\r\nconst InputOTPGroup = React.forwardRef<\r\n React.ElementRef<\"div\">,\r\n React.ComponentPropsWithoutRef<\"div\">\r\n>(({ className, ...props }, ref) => (\r\n <div ref={ref} className={cn(\"flex items-center\", className)} {...props} />\r\n))\r\nInputOTPGroup.displayName = \"InputOTPGroup\"\r\n\r\nconst InputOTPSlot = React.forwardRef<\r\n React.ElementRef<\"div\">,\r\n React.ComponentPropsWithoutRef<\"div\"> & { index: number }\r\n>(({ index, className, ...props }, ref) => {\r\n const inputOTPContext = React.useContext(OTPInputContext)\r\n const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]\r\n\r\n return (\r\n <div\r\n ref={ref}\r\n className={cn(\r\n \"relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-xs transition-all first:rounded-l-md first:border-l last:rounded-r-md\",\r\n isActive && \"z-10 ring-1 ring-ring\",\r\n className\r\n )}\r\n {...props}\r\n >\r\n {char}\r\n {hasFakeCaret && (\r\n <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\r\n <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\r\n </div>\r\n )}\r\n </div>\r\n )\r\n})\r\nInputOTPSlot.displayName = \"InputOTPSlot\"\r\n\r\nconst InputOTPSeparator = React.forwardRef<\r\n React.ElementRef<\"div\">,\r\n React.ComponentPropsWithoutRef<\"div\">\r\n>(({ ...props }, ref) => (\r\n <div ref={ref} role=\"separator\" {...props}>\r\n <Minus />\r\n </div>\r\n))\r\nInputOTPSeparator.displayName = \"InputOTPSeparator\"\r\n\r\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\r\n"],"names":["InputOTP","React","className","containerClassName","props","ref","jsx","OTPInput","cn","InputOTPGroup","InputOTPSlot","index","inputOTPContext","OTPInputContext","char","hasFakeCaret","isActive","jsxs","InputOTPSeparator","Minus"],"mappings":";;;;;AAQA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,oBAAAC,GAAoB,GAAGC,KAASC,MAC9C,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,KAAAF;AAAA,IACA,oBAAoBG;AAAA,MAClB;AAAA,MACAL;AAAA,IAAA;AAAA,IAEF,WAAWK,EAAG,+BAA+BN,CAAS;AAAA,IACrD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAS,cAAc;AAEvB,MAAMS,IAAgBR,EAAM,WAG1B,CAAC,EAAE,WAAAC,GAAW,GAAGE,KAASC,wBACzB,OAAA,EAAI,KAAAA,GAAU,WAAWG,EAAG,qBAAqBN,CAAS,GAAI,GAAGE,GAAO,CAC1E;AACDK,EAAc,cAAc;AAE5B,MAAMC,IAAeT,EAAM,WAGzB,CAAC,EAAE,OAAAU,GAAO,WAAAT,GAAW,GAAGE,EAAA,GAASC,MAAQ;AACzC,QAAMO,IAAkBX,EAAM,WAAWY,CAAe,GAClD,EAAE,MAAAC,GAAM,cAAAC,GAAc,UAAAC,MAAaJ,EAAgB,MAAMD,CAAK;AAEpE,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAQ,KAAY;AAAA,QACZd;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,MAEH,UAAA;AAAA,QAAAU;AAAA,QACAC,uBACE,OAAA,EAAI,WAAU,yEACb,UAAA,gBAAAT,EAAC,OAAA,EAAI,WAAU,2DAAA,CAA2D,EAAA,CAC5E;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR,CAAC;AACDI,EAAa,cAAc;AAE3B,MAAMQ,IAAoBjB,EAAM,WAG9B,CAAC,EAAE,GAAGG,KAASC,wBACd,OAAA,EAAI,KAAAA,GAAU,MAAK,aAAa,GAAGD,GAClC,UAAA,gBAAAE,EAACa,GAAA,CAAA,CAAM,GACT,CACD;AACDD,EAAkB,cAAc;"}
|
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
The MIT License (MIT)
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2025 Oleh Maksimenko
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
The MIT License (MIT)
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 Oleh Maksimenko
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/Label/Label.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Label.js","sources":["../../src/Label/Label.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction Label(props: React.ComponentProps<typeof LabelPrimitive.Root>) {\n const { className, ...rest } = props;\n return (\n <LabelPrimitive.Root\n data-slot=\"label\"\n className={cn(\n \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n className\n )}\n {...rest}\n />\n )\n}\nexport { Label, LabelPrimitive }\n\nexport default Label;\n"],"names":["Label","props","className","rest","jsx","LabelPrimitive","cn"],"mappings":";;;AAOA,SAASA,EAAMC,GAAyD;AACtE,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAASF;AAC/B,SACE,gBAAAG;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|
|
1
|
+
{"version":3,"file":"Label.js","sources":["../../src/Label/Label.tsx"],"sourcesContent":["\"use client\"\r\n\r\nimport * as React from \"react\"\r\nimport * as LabelPrimitive from \"@radix-ui/react-label\"\r\n\r\nimport { cn } from \"@oneplatformdev/utils\"\r\n\r\nfunction Label(props: React.ComponentProps<typeof LabelPrimitive.Root>) {\r\n const { className, ...rest } = props;\r\n return (\r\n <LabelPrimitive.Root\r\n data-slot=\"label\"\r\n className={cn(\r\n \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\r\n className\r\n )}\r\n {...rest}\r\n />\r\n )\r\n}\r\nexport { Label, LabelPrimitive }\r\n\r\nexport default Label;\r\n"],"names":["Label","props","className","rest","jsx","LabelPrimitive","cn"],"mappings":";;;AAOA,SAASA,EAAMC,GAAyD;AACtE,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAASF;AAC/B,SACE,gBAAAG;AAAA,IAACC,EAAe;AAAA,IAAf;AAAA,MACC,aAAU;AAAA,MACV,WAAWC;AAAA,QACT;AAAA,QACAJ;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV;"}
|