ics-ui-kit 0.1.0-alpha.34 → 0.1.0-alpha.35
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/README.md +32 -32
- package/dist/AlertContext-CxjW1LVL.js.map +1 -1
- package/dist/AlertIcon-BTZh7FQZ.js.map +1 -1
- package/dist/Button-Kf5vwkHh.js.map +1 -1
- package/dist/ButtonBase-DRSjPh5I.js.map +1 -1
- package/dist/CarouselItem-BzVQ8h8v.js.map +1 -1
- package/dist/CheckboxField-CqWkYQ-Z.js.map +1 -1
- package/dist/Command-CIbwIJiT.js.map +1 -1
- package/dist/ComponentVariantProvider-B0SFUaXB.js.map +1 -1
- package/dist/Description-B5wn0Rpy.js.map +1 -1
- package/dist/Dialog-BqFP9MUA.js.map +1 -1
- package/dist/Divider-Dm2gjy8W.js.map +1 -1
- package/dist/EmptyState-BjH7BJ-H.js.map +1 -1
- package/dist/ErrorState-C-XPMDAa.js.map +1 -1
- package/dist/FeatureIcon-BrWA9wvT.js.map +1 -1
- package/dist/Field-CBc3Z3Lg.js.map +1 -1
- package/dist/FieldLabel-CMipw7fJ.js.map +1 -1
- package/dist/FolderSvg-cw0DxNVy.js.map +1 -1
- package/dist/FormBody-D1w8vHrS.js.map +1 -1
- package/dist/FormHeaderTemplate-NfdHG33w.js.map +1 -1
- package/dist/FormStack-DUZ-g6g2.js.map +1 -1
- package/dist/HintState-CBGmqO7T.js.map +1 -1
- package/dist/Icon-DH3ev9GK.js.map +1 -1
- package/dist/IconButton-BbL0cLUL.js.map +1 -1
- package/dist/IconTooltip-Dl8bBiR8.js.map +1 -1
- package/dist/ImagePlaceholder-B6mGYVx2.js.map +1 -1
- package/dist/ImagePreview-RtfJHGfM.js.map +1 -1
- package/dist/ImageUploader-Dn9N2b0r.js.map +1 -1
- package/dist/Indicator-nOrhS8bQ.js.map +1 -1
- package/dist/Input-Ck-nZBBl.js.map +1 -1
- package/dist/InputGroup-DDwZaZQm.js.map +1 -1
- package/dist/InputOTP-FInKYwJd.js.map +1 -1
- package/dist/Loader-BpHiL6W-.js.map +1 -1
- package/dist/MenuItem-Die-qr8a.js.map +1 -1
- package/dist/Modal-9NNMBF-S.js.map +1 -1
- package/dist/Overlay-CLw_hvAN.js.map +1 -1
- package/dist/Popover-YwPKBpCX.js.map +1 -1
- package/dist/RichButton-DC6-pK-N.js.map +1 -1
- package/dist/ScrollShadowContainer-ODG9ChxA.js.map +1 -1
- package/dist/SearchSelectTag-DOHGWBGw.js.map +1 -1
- package/dist/Select-DTHY73Qf.js.map +1 -1
- package/dist/Sheet-BbiIPXuA.js.map +1 -1
- package/dist/Shortcut-Cm4nUx2C.js.map +1 -1
- package/dist/Skeleton-CxKGeAKm.js.map +1 -1
- package/dist/Tag-D3JqSOIw.js.map +1 -1
- package/dist/TextInput-BzjGIROj.js.map +1 -1
- package/dist/Toggle-Db3flKrn.js.map +1 -1
- package/dist/ToggleGroup-Bym73Xh6.js.map +1 -1
- package/dist/Tooltip-Bc6tybKO.js.map +1 -1
- package/dist/TriggerButton-CbeMZdLX.js.map +1 -1
- package/dist/blocks/auth/otp-form.js.map +1 -1
- package/dist/components/alert-dialog.js.map +1 -1
- package/dist/components/alert.js.map +1 -1
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/badge.js.map +1 -1
- package/dist/components/breadcrumb.js.map +1 -1
- package/dist/components/button.js.map +1 -1
- package/dist/components/calendar.js.map +1 -1
- package/dist/components/card.js.map +1 -1
- package/dist/components/carousel.js.map +1 -1
- package/dist/components/collapsible.js.map +1 -1
- package/dist/components/divider.js.map +1 -1
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/dropdown.js.map +1 -1
- package/dist/components/error-state.js.map +1 -1
- package/dist/components/file-upload/components/file-upload-item-compact/FileUploadItemCompact.d.ts +2 -0
- package/dist/components/file-upload/components/file-upload-item-compact/FileUploadItemCompact.stories.d.ts +1 -0
- package/dist/components/file-upload/file-upload-compact/FileUploadCompact.d.ts +2 -0
- package/dist/components/file-upload/file-upload-compact/FileUploadCompact.stories.d.ts +1 -0
- package/dist/components/file-upload.js +175 -173
- package/dist/components/file-upload.js.map +1 -1
- package/dist/components/form.js.map +1 -1
- package/dist/components/gallery.js.map +1 -1
- package/dist/components/input.js.map +1 -1
- package/dist/components/menu-item.js.map +1 -1
- package/dist/components/modal.js.map +1 -1
- package/dist/components/option-group.js.map +1 -1
- package/dist/components/overflow-tooltip.js.map +1 -1
- package/dist/components/page-state.js.map +1 -1
- package/dist/components/portal-container.js.map +1 -1
- package/dist/components/progress-circle.js.map +1 -1
- package/dist/components/progress.js.map +1 -1
- package/dist/components/prose.js.map +1 -1
- package/dist/components/scheduler.js.map +1 -1
- package/dist/components/search-select.js.map +1 -1
- package/dist/components/sidebar.js.map +1 -1
- package/dist/components/switch.js.map +1 -1
- package/dist/components/system-state.js.map +1 -1
- package/dist/components/table/Table.stories.d.ts +1 -0
- package/dist/components/table.js +2 -2
- package/dist/components/table.js.map +1 -1
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/tag-input.js.map +1 -1
- package/dist/components/textarea.js.map +1 -1
- package/dist/components/toast.js.map +1 -1
- package/dist/components/toolbar.js.map +1 -1
- package/dist/design-tokens.source.json +1 -1
- package/dist/downloadFile-yZV-aaO2.js.map +1 -1
- package/dist/font-inter.css +15 -15
- package/dist/font-menlo.css +15 -15
- package/dist/index-0ioNhtNM.js.map +1 -1
- package/dist/index-5Bhkapwi.js.map +1 -1
- package/dist/index-BGfrl8IX.js.map +1 -1
- package/dist/index-BVqs-uqP.js.map +1 -1
- package/dist/index-BZPx6jYI.js.map +1 -1
- package/dist/index-BdXokVmb.js.map +1 -1
- package/dist/index-Bwf2hSw6.js.map +1 -1
- package/dist/index-C0UREtMP.js.map +1 -1
- package/dist/index-CCKe-Mpx.js.map +1 -1
- package/dist/index-CYdkaWkn.js.map +1 -1
- package/dist/index-CpDnqHCm.js.map +1 -1
- package/dist/index-DFZozV_h.js.map +1 -1
- package/dist/index-DG36Jang.js.map +1 -1
- package/dist/index-DfNPZZ8M.js.map +1 -1
- package/dist/index-DpXwz_9G.js.map +1 -1
- package/dist/index-Nzc5v6h6.js.map +1 -1
- package/dist/index-WsrVm_oB.js.map +1 -1
- package/dist/index-l1F44JQJ.js.map +1 -1
- package/dist/index.js.map +1 -1
- package/dist/inputBaseStyles-Bbxc3y_F.js.map +1 -1
- package/dist/styles-scoped.css +6792 -6718
- package/dist/styles.css +1796 -1738
- package/dist/types/css.d.ts +4 -4
- package/dist/useBreakpoints-wEcfJPHd.js.map +1 -1
- package/dist/useDebounce-BRah78CF.js.map +1 -1
- package/dist/useFileUpload-iDag0iqM.js.map +1 -1
- package/dist/useMergeRefs-qoKniYqT.js.map +1 -1
- package/dist/usePortalContainer-ae6EzS08.js.map +1 -1
- package/dist/utils-dsXlqdJg.js.map +1 -1
- package/dist/vendors/tanstack/react-table.js.map +1 -1
- package/dist/zod-BMNoK3aM.js.map +1 -1
- package/package.json +161 -161
package/README.md
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
# ICS UI Kit
|
|
2
|
-
|
|
3
|
-
Библиотека React компонентов для создания современных пользовательских интерфейсов.
|
|
4
|
-
|
|
5
|
-
## 🚀 Установка
|
|
6
|
-
|
|
7
|
-
```bash
|
|
8
|
-
npm install ics-ui-kit
|
|
9
|
-
```
|
|
10
|
-
|
|
11
|
-
## 📖 Использование
|
|
12
|
-
|
|
13
|
-
```jsx
|
|
14
|
-
import { Button, Card, Modal } from 'ics-ui-kit';
|
|
15
|
-
import 'ics-ui-kit/styles.css';
|
|
16
|
-
|
|
17
|
-
function App() {
|
|
18
|
-
return (
|
|
19
|
-
<Card>
|
|
20
|
-
<Button variant="primary">
|
|
21
|
-
Нажми меня
|
|
22
|
-
</Button>
|
|
23
|
-
</Card>
|
|
24
|
-
);
|
|
25
|
-
}
|
|
26
|
-
```
|
|
27
|
-
|
|
28
|
-
## Ссылки
|
|
29
|
-
|
|
30
|
-
- **Репозиторий**: [GitLab](https://gitlab.ics-it.ru/ics/ui-kit)
|
|
31
|
-
- **NPM пакет**: [ics-ui-kit](https://www.npmjs.com/package/ics-ui-kit)
|
|
32
|
-
- **Storybook**: [Демо версия](https://ui-kit.ics-it.ru)
|
|
1
|
+
# ICS UI Kit
|
|
2
|
+
|
|
3
|
+
Библиотека React компонентов для создания современных пользовательских интерфейсов.
|
|
4
|
+
|
|
5
|
+
## 🚀 Установка
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install ics-ui-kit
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 📖 Использование
|
|
12
|
+
|
|
13
|
+
```jsx
|
|
14
|
+
import { Button, Card, Modal } from 'ics-ui-kit';
|
|
15
|
+
import 'ics-ui-kit/styles.css';
|
|
16
|
+
|
|
17
|
+
function App() {
|
|
18
|
+
return (
|
|
19
|
+
<Card>
|
|
20
|
+
<Button variant="primary">
|
|
21
|
+
Нажми меня
|
|
22
|
+
</Button>
|
|
23
|
+
</Card>
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
## Ссылки
|
|
29
|
+
|
|
30
|
+
- **Репозиторий**: [GitLab](https://gitlab.ics-it.ru/ics/ui-kit)
|
|
31
|
+
- **NPM пакет**: [ics-ui-kit](https://www.npmjs.com/package/ics-ui-kit)
|
|
32
|
+
- **Storybook**: [Демо версия](https://ui-kit.ics-it.ru)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertContext-CxjW1LVL.js","sources":["../src/components/alert/AlertContext.tsx"],"sourcesContent":["import React from \"react\";\
|
|
1
|
+
{"version":3,"file":"AlertContext-CxjW1LVL.js","sources":["../src/components/alert/AlertContext.tsx"],"sourcesContent":["import React from \"react\";\nimport { AlertVariants } from \"./Alert\";\n\nexport const AlertContext = React.createContext<AlertVariants>({});\n\n/**\n * Хук для получения значений контекста Alert\n * Если переданы props, они имеют приоритет над значениями из контекста\n *\n * @example\n * ```tsx\n * const { status, focus } = useAlert({ status: props.status, focus: props.focus });\n * ```\n */\n\nexport const useAlert = (props?: AlertVariants) => {\n\tconst context = React.useContext(AlertContext);\n\n\treturn {\n\t\tstatus: props?.status ?? context.status,\n\t\tfocus: props?.focus ?? context.focus\n\t};\n};\n"],"names":["AlertContext","React","useAlert","props","context"],"mappings":";AAGO,MAAMA,IAAeC,EAAM,cAA6B,CAAE,CAAA,GAYpDC,IAAW,CAACC,MAA0B;AAC5C,QAAAC,IAAUH,EAAM,WAAWD,CAAY;AAEtC,SAAA;AAAA,IACN,QAAQG,GAAO,UAAUC,EAAQ;AAAA,IACjC,OAAOD,GAAO,SAASC,EAAQ;AAAA,EAChC;AACD;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AlertIcon-BTZh7FQZ.js","sources":["../src/components/alert/Alert.tsx","../src/components/alert/components/AlertDescription.tsx","../src/components/alert/components/AlertIcon.tsx"],"sourcesContent":["import * as React from \"react\";\
|
|
1
|
+
{"version":3,"file":"AlertIcon-BTZh7FQZ.js","sources":["../src/components/alert/Alert.tsx","../src/components/alert/components/AlertDescription.tsx","../src/components/alert/components/AlertIcon.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { AlertContext } from \"./AlertContext\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\nexport interface AlertVariants {\n\t/** Статус алерта */\n\tstatus?: \"success\" | \"warning\" | \"error\" | \"info\";\n\t/** Состояние фокуса */\n\tfocus?: \"low\" | \"medium\" | \"high\";\n}\n\nconst alertStyles = tv({\n\tbase: [\n\t\t\"group relative w-full items-start rounded-lg border border-secondary-border bg-secondary-bg px-4 py-3 text-sm\",\n\t\t\"grid grid-cols-[auto_1fr_auto] gap-y-1.5\"\n\t],\n\tvariants: {\n\t\tstatus: {\n\t\t\tsuccess: \"border-status-success-border bg-status-success-bg\",\n\t\t\twarning: \"border-status-warning-border bg-status-warning-bg\",\n\t\t\terror: \"border-status-error-border bg-status-error-bg\",\n\t\t\tinfo: \"border-status-info-border bg-status-info-bg\"\n\t\t},\n\t\tfocus: {\n\t\t\tlow: \"border-secondary-border bg-secondary-bg\",\n\t\t\tmedium: \"border-secondary-border bg-secondary-bg\",\n\t\t\t// Не задаем bg, чтобы не переопределять status. Определяем в compoundVariants.\n\t\t\thigh: \"\"\n\t\t}\n\t} satisfies VariantsConfig<AlertVariants>,\n\tcompoundVariants: [\n\t\t{\n\t\t\tstatus: undefined,\n\t\t\tfocus: \"high\",\n\t\t\tclass: \"bg-status-neutral-fg\"\n\t\t}\n\t],\n\tdefaultVariants: {\n\t\tfocus: \"low\"\n\t}\n});\n\nexport type AlertProps = React.HTMLAttributes<HTMLDivElement> & AlertVariants;\n\n/**\n * Компонент Alert для отображения уведомлений и сообщений\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n\t({ className, status, focus = \"low\", children, ...props }, ref) => {\n\t\tconst contextValue = React.useMemo(\n\t\t\t() => ({\n\t\t\t\tstatus,\n\t\t\t\tfocus\n\t\t\t}),\n\t\t\t[status, focus]\n\t\t);\n\n\t\treturn (\n\t\t\t<AlertContext.Provider value={contextValue}>\n\t\t\t\t<div ref={ref} role=\"alert\" className={alertStyles({ status, focus, className })} {...props}>\n\t\t\t\t\t{children}\n\t\t\t\t</div>\n\t\t\t</AlertContext.Provider>\n\t\t);\n\t}\n);\n\nAlert.displayName = \"Alert\";\n","import { tv } from \"tailwind-variants\";\nimport React from \"react\";\nimport { useAlert } from \"../AlertContext\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\nimport { AlertVariants } from \"../Alert\";\n\nconst alertDescriptionStyles = tv({\n\tbase: \"col-start-2 text-sm text-muted\",\n\tvariants: {\n\t\tstatus: {\n\t\t\tsuccess: \"text-status-success\",\n\t\t\twarning: \"text-status-warning\",\n\t\t\terror: \"text-status-error\",\n\t\t\tinfo: \"text-status-info\"\n\t\t},\n\t\tfocus: {\n\t\t\tlow: \"text-muted\",\n\t\t\tmedium: \"\",\n\t\t\thigh: \"\"\n\t\t}\n\t} satisfies VariantsConfig<AlertVariants>,\n\tdefaultVariants: {\n\t\tfocus: \"low\"\n\t}\n});\n\nexport type AlertDescriptionProps = React.HTMLAttributes<HTMLParagraphElement> & AlertVariants;\n\n/**\n * Компонент AlertDescription для отображения описания алерта\n */\nexport const AlertDescription = React.forwardRef<HTMLParagraphElement, AlertDescriptionProps>(\n\t({ className, focus: focusProp, status: statusProp, ...props }, ref) => {\n\t\tconst { status, focus } = useAlert({ status: statusProp, focus: focusProp });\n\n\t\treturn <div ref={ref} className={alertDescriptionStyles({ className, focus, status })} {...props} />;\n\t}\n);\n\nAlertDescription.displayName = \"AlertDescription\";\n","import { Icon, IconProps } from \"@/components/icon/Icon\";\nimport React from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { useAlert } from \"../AlertContext\";\nimport { AlertVariants } from \"../Alert\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\ntype AlertIconVariants = Omit<AlertVariants, \"focus\">;\n\nconst alertIconStyles = tv({\n\tbase: \"text-status-default mr-3 translate-y-0.5\",\n\tvariants: {\n\t\tstatus: {\n\t\t\tsuccess: \"text-status-success-hover\",\n\t\t\twarning: \"text-status-warning-hover\",\n\t\t\terror: \"text-status-error-hover\",\n\t\t\tinfo: \"text-status-info-hover\"\n\t\t}\n\t} satisfies VariantsConfig<AlertIconVariants>\n});\n\nexport type AlertIconProps = IconProps & AlertIconVariants;\n\n/**\n * Компонент AlertIcon для отображения иконки алерта\n */\nexport const AlertIcon = React.forwardRef<SVGSVGElement, AlertIconProps>(\n\t({ className, status: statusProp, ...props }, ref) => {\n\t\tconst { status } = useAlert({ status: statusProp });\n\n\t\treturn <Icon ref={ref} className={alertIconStyles({ status, className })} {...props} />;\n\t}\n);\n\nAlertIcon.displayName = \"AlertIcon\";\n"],"names":["alertStyles","tv","Alert","React","className","status","focus","children","props","ref","contextValue","jsx","AlertContext","alertDescriptionStyles","AlertDescription","focusProp","statusProp","useAlert","alertIconStyles","AlertIcon","Icon"],"mappings":";;;;;;AAYA,MAAMA,IAAcC,EAAG;AAAA,EACtB,MAAM;AAAA,IACL;AAAA,IACA;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IACP;AAAA,IACA,OAAO;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA;AAAA,MAER,MAAM;AAAA,IAAA;AAAA,EAER;AAAA,EACA,kBAAkB;AAAA,IACjB;AAAA,MACC,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,OAAO;AAAA,IAAA;AAAA,EAET;AAAA,EACA,iBAAiB;AAAA,IAChB,OAAO;AAAA,EAAA;AAET,CAAC,GAOYC,IAAQC,EAAM;AAAA,EAC1B,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,OAAAC,IAAQ,OAAO,UAAAC,GAAU,GAAGC,EAAM,GAAGC,MAAQ;AAClE,UAAMC,IAAeP,EAAM;AAAA,MAC1B,OAAO;AAAA,QACN,QAAAE;AAAA,QACA,OAAAC;AAAA,MAAA;AAAA,MAED,CAACD,GAAQC,CAAK;AAAA,IACf;AAGC,WAAA,gBAAAK,EAACC,EAAa,UAAb,EAAsB,OAAOF,GAC7B,UAAA,gBAAAC,EAAC,OAAI,EAAA,KAAAF,GAAU,MAAK,SAAQ,WAAWT,EAAY,EAAE,QAAAK,GAAQ,OAAAC,GAAO,WAAAF,EAAW,CAAA,GAAI,GAAGI,GACpF,UAAAD,EAAA,CACF,EACD,CAAA;AAAA,EAAA;AAGH;AAEAL,EAAM,cAAc;AC9DpB,MAAMW,IAAyBZ,EAAG;AAAA,EACjC,MAAM;AAAA,EACN,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IACP;AAAA,IACA,OAAO;AAAA,MACN,KAAK;AAAA,MACL,QAAQ;AAAA,MACR,MAAM;AAAA,IAAA;AAAA,EAER;AAAA,EACA,iBAAiB;AAAA,IAChB,OAAO;AAAA,EAAA;AAET,CAAC,GAOYa,IAAmBX,EAAM;AAAA,EACrC,CAAC,EAAE,WAAAC,GAAW,OAAOW,GAAW,QAAQC,GAAY,GAAGR,EAAM,GAAGC,MAAQ;AACjE,UAAA,EAAE,QAAAJ,GAAQ,OAAAC,EAAA,IAAUW,EAAS,EAAE,QAAQD,GAAY,OAAOD,GAAW;AAE3E,WAAQ,gBAAAJ,EAAA,OAAA,EAAI,KAAAF,GAAU,WAAWI,EAAuB,EAAE,WAAAT,GAAW,OAAAE,GAAO,QAAAD,EAAO,CAAC,GAAI,GAAGG,EAAO,CAAA;AAAA,EAAA;AAEpG;AAEAM,EAAiB,cAAc;AC9B/B,MAAMI,IAAkBjB,EAAG;AAAA,EAC1B,MAAM;AAAA,EACN,UAAU;AAAA,IACT,QAAQ;AAAA,MACP,SAAS;AAAA,MACT,SAAS;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,IAAA;AAAA,EACP;AAEF,CAAC,GAOYkB,IAAYhB,EAAM;AAAA,EAC9B,CAAC,EAAE,WAAAC,GAAW,QAAQY,GAAY,GAAGR,KAASC,MAAQ;AACrD,UAAM,EAAE,QAAAJ,EAAO,IAAIY,EAAS,EAAE,QAAQD,GAAY;AAE3C,WAAA,gBAAAL,EAACS,GAAK,EAAA,KAAAX,GAAU,WAAWS,EAAgB,EAAE,QAAAb,GAAQ,WAAAD,EAAU,CAAC,GAAI,GAAGI,EAAO,CAAA;AAAA,EAAA;AAEvF;AAEAW,EAAU,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Button-Kf5vwkHh.js","sources":["../src/components/button/button/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\
|
|
1
|
+
{"version":3,"file":"Button-Kf5vwkHh.js","sources":["../src/components/button/button/Button.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\nimport { tv } from \"tailwind-variants\";\nimport { ButtonBase, ButtonBaseProps, ButtonBaseVariants } from \"../button-base/ButtonBase\";\nimport { VariantsConfig } from \"@/lib/utils/variants\";\n\ntype ButtonVariants = Pick<ButtonBaseVariants, \"size\">;\n\nconst buttonStyles = tv({\n\tslots: {\n\t\tcontainer: \"flex items-center justify-center gap-2 overflow-hidden\",\n\t\ticon: \"h-4 w-4\"\n\t},\n\tvariants: {\n\t\tsize: {\n\t\t\txs: { icon: \"h-3 w-3\" },\n\t\t\tsm: { icon: \"h-3.5 w-3.5\" },\n\t\t\tmd: {},\n\t\t\tlg: {},\n\t\t\txl: { icon: \"h-5 w-5\", container: \"gap-3\" }\n\t\t}\n\t} satisfies VariantsConfig<ButtonVariants>,\n\tdefaultVariants: {\n\t\tsize: \"md\"\n\t}\n});\n\nexport type ButtonProps = PropsWithChildren<\n\tButtonBaseProps &\n\t\tButtonVariants & {\n\t\t\tstartIcon?: React.ElementType;\n\t\t\tendIcon?: React.ElementType;\n\t\t\tcontainerClassName?: string;\n\t\t\ticonClassName?: string;\n\t\t}\n>;\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n\t({ startIcon: StartIcon, endIcon: EndIcon, size, children, iconClassName, containerClassName, ...props }, ref) => {\n\t\tconst styles = buttonStyles({ size });\n\n\t\tconst startIconEl = StartIcon && <StartIcon className={styles.icon({ className: iconClassName })} />;\n\t\tconst endIconEl = EndIcon && <EndIcon className={styles.icon({ className: iconClassName })} />;\n\n\t\treturn (\n\t\t\t<ButtonBase {...props} size={size} ref={ref}>\n\t\t\t\t<div className={styles.container({ className: containerClassName })}>\n\t\t\t\t\t{startIconEl}\n\t\t\t\t\t{children}\n\t\t\t\t\t{endIconEl}\n\t\t\t\t</div>\n\t\t\t</ButtonBase>\n\t\t);\n\t}\n);\n\nButton.displayName = \"Button\";\n"],"names":["buttonStyles","tv","Button","React","StartIcon","EndIcon","size","children","iconClassName","containerClassName","props","ref","styles","startIconEl","jsx","endIconEl","ButtonBase","jsxs"],"mappings":";;;;AAOA,MAAMA,IAAeC,EAAG;AAAA,EACvB,OAAO;AAAA,IACN,WAAW;AAAA,IACX,MAAM;AAAA,EACP;AAAA,EACA,UAAU;AAAA,IACT,MAAM;AAAA,MACL,IAAI,EAAE,MAAM,UAAU;AAAA,MACtB,IAAI,EAAE,MAAM,cAAc;AAAA,MAC1B,IAAI,CAAC;AAAA,MACL,IAAI,CAAC;AAAA,MACL,IAAI,EAAE,MAAM,WAAW,WAAW,QAAQ;AAAA,IAAA;AAAA,EAE5C;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC,GAYYC,IAASC,EAAM;AAAA,EAC3B,CAAC,EAAE,WAAWC,GAAW,SAASC,GAAS,MAAAC,GAAM,UAAAC,GAAU,eAAAC,GAAe,oBAAAC,GAAoB,GAAGC,EAAA,GAASC,MAAQ;AACjH,UAAMC,IAASZ,EAAa,EAAE,MAAAM,GAAM,GAE9BO,IAAcT,KAAa,gBAAAU,EAACV,GAAU,EAAA,WAAWQ,EAAO,KAAK,EAAE,WAAWJ,EAAc,CAAC,EAAG,CAAA,GAC5FO,IAAYV,KAAW,gBAAAS,EAACT,GAAQ,EAAA,WAAWO,EAAO,KAAK,EAAE,WAAWJ,EAAc,CAAC,EAAG,CAAA;AAE5F,WACE,gBAAAM,EAAAE,GAAA,EAAY,GAAGN,GAAO,MAAAJ,GAAY,KAAAK,GAClC,UAAA,gBAAAM,EAAC,OAAI,EAAA,WAAWL,EAAO,UAAU,EAAE,WAAWH,EAAA,CAAoB,GAChE,UAAA;AAAA,MAAAI;AAAA,MACAN;AAAA,MACAQ;AAAA,IAAA,EAAA,CACF,EACD,CAAA;AAAA,EAAA;AAGH;AAEAb,EAAO,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBase-DRSjPh5I.js","sources":["../src/components/button/button-base/ButtonBase.tsx"],"sourcesContent":["import { VariantsConfig } from \"@/lib/utils/variants\";\
|
|
1
|
+
{"version":3,"file":"ButtonBase-DRSjPh5I.js","sources":["../src/components/button/button-base/ButtonBase.tsx"],"sourcesContent":["import { VariantsConfig } from \"@/lib/utils/variants\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport React, { PropsWithChildren } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport interface ButtonBaseVariants {\n\tvariant?: \"primary\" | \"secondary\" | \"outline\" | \"ghost\" | \"link\" | \"text\";\n\tstatus?: \"default\" | \"info\" | \"success\" | \"warning\" | \"error\";\n\tsize?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n}\n\nconst buttonBaseStyles = tv({\n\tbase: \"inline-flex cursor-pointer select-none items-center justify-center overflow-hidden rounded-lg font-medium text-primary-fg transition-all focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-50\",\n\tvariants: {\n\t\tvariant: {\n\t\t\tprimary: \"bg-primary-accent text-primary-bg shadow-base hover:bg-primary-accent-hover\",\n\t\t\tsecondary: \"bg-secondary-bg-hover hover:bg-primary-bg-hover\",\n\t\t\toutline:\n\t\t\t\t\"border border-solid border-secondary-border bg-secondary-bg shadow-sm hover:border-primary-border hover:bg-secondary-bg-hover\",\n\t\t\tghost: \"bg-transparent hover:bg-secondary-bg-hover\",\n\t\t\tlink: \"bg-transparent text-muted underline hover:text-primary-fg\",\n\t\t\ttext: \"bg-transparent text-muted hover:text-primary-fg\"\n\t\t},\n\t\tstatus: {\n\t\t\tdefault: \"\",\n\t\t\tinfo: \"text-status-info\",\n\t\t\tsuccess: \"text-status-success\",\n\t\t\twarning: \"text-status-warning\",\n\t\t\terror: \"text-status-error\"\n\t\t},\n\t\tsize: {\n\t\t\txs: \"h-7 gap-2 px-2.5 py-1.5 text-xs\",\n\t\t\tsm: \"h-8 gap-2 px-3 py-2 text-xs\",\n\t\t\tmd: \"h-9 gap-2 px-4 py-2 text-sm\",\n\t\t\tlg: \"h-10 gap-2 px-5 py-2 text-sm\",\n\t\t\txl: \"h-11 gap-3 px-6 py-3 text-base\"\n\t\t}\n\t} satisfies VariantsConfig<ButtonBaseVariants>,\n\tdefaultVariants: {\n\t\tvariant: \"primary\",\n\t\tsize: \"md\",\n\t\tstatus: \"default\"\n\t},\n\tcompoundVariants: [\n\t\t/*\n\t\t * Statuses\n\t\t */\n\t\t// Primary\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: [\"info\", \"success\", \"warning\", \"error\"],\n\t\t\tclass: \"text-white hover:text-white\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: \"info\",\n\t\t\tclass: \"bg-status-info hover:bg-status-info-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: \"success\",\n\t\t\tclass: \"bg-status-success hover:bg-status-success-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: \"warning\",\n\t\t\tclass: \"bg-status-warning hover:bg-status-warning-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"primary\",\n\t\t\tstatus: \"error\",\n\t\t\tclass: \"bg-status-error hover:bg-status-error-hover\"\n\t\t},\n\t\t// Secondary\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tstatus: \"info\",\n\t\t\tclass: \"bg-status-info-bg hover:bg-status-info-bg-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tstatus: \"success\",\n\t\t\tclass: \"bg-status-success-bg hover:bg-status-success-bg-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tstatus: \"warning\",\n\t\t\tclass: \"bg-status-warning-bg hover:bg-status-warning-bg-hover\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"secondary\",\n\t\t\tstatus: \"error\",\n\t\t\tclass: \"bg-status-error-bg hover:bg-status-error-bg-hover\"\n\t\t},\n\t\t// Outline\n\t\t{\n\t\t\tvariant: \"outline\",\n\t\t\tstatus: \"info\",\n\t\t\tclass: \"border-status-info-border hover:border-status-info-border hover:bg-status-info-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"outline\",\n\t\t\tstatus: \"success\",\n\t\t\tclass: \"border-status-success-border hover:border-status-success-border hover:bg-status-success-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"outline\",\n\t\t\tstatus: \"warning\",\n\t\t\tclass: \"border-status-warning-border hover:border-status-warning-border hover:bg-status-warning-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"outline\",\n\t\t\tstatus: \"error\",\n\t\t\tclass: \"border-status-error-border hover:border-status-error-border hover:bg-status-error-bg\"\n\t\t},\n\t\t// Ghost\n\t\t{\n\t\t\tvariant: \"ghost\",\n\t\t\tstatus: \"info\",\n\t\t\tclass: \"text-status-info hover:bg-status-info-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"ghost\",\n\t\t\tstatus: \"success\",\n\t\t\tclass: \"text-status-success hover:bg-status-success-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"ghost\",\n\t\t\tstatus: \"warning\",\n\t\t\tclass: \"text-status-warning hover:bg-status-warning-bg\"\n\t\t},\n\t\t{\n\t\t\tvariant: \"ghost\",\n\t\t\tstatus: \"error\",\n\t\t\tclass: \"text-status-error hover:bg-status-error-bg\"\n\t\t},\n\t\t// Text & Link\n\t\t{\n\t\t\tvariant: [\"text\", \"link\"],\n\t\t\tstatus: \"info\",\n\t\t\tclass: \"text-status-info/70 hover:text-status-info\"\n\t\t},\n\t\t{\n\t\t\tvariant: [\"text\", \"link\"],\n\t\t\tstatus: \"success\",\n\t\t\tclass: \"text-status-success/70 hover:text-status-success\"\n\t\t},\n\t\t{\n\t\t\tvariant: [\"text\", \"link\"],\n\t\t\tstatus: \"warning\",\n\t\t\tclass: \"text-status-warning/70 hover:text-status-warning\"\n\t\t},\n\t\t{\n\t\t\tvariant: [\"text\", \"link\"],\n\t\t\tstatus: \"error\",\n\t\t\tclass: \"text-status-error/70 hover:text-status-error\"\n\t\t}\n\t]\n});\n\nexport type ButtonBaseProps = React.ButtonHTMLAttributes<HTMLButtonElement> &\n\tButtonBaseVariants & {\n\t\tasChild?: boolean;\n\t};\n\nexport const ButtonBase = React.forwardRef<HTMLButtonElement, PropsWithChildren<ButtonBaseProps>>(\n\t({ variant, size, children, status, className, asChild = false, ...props }, ref) => {\n\t\tconst Comp = asChild ? Slot : \"button\";\n\t\treturn (\n\t\t\t<Comp className={buttonBaseStyles({ variant, size, status, className })} ref={ref} {...props}>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t);\n\t}\n);\n\nButtonBase.displayName = \"ButtonBase\";\n"],"names":["buttonBaseStyles","tv","ButtonBase","React","variant","size","children","status","className","asChild","props","ref","jsx","Slot"],"mappings":"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"}
|