@oneplatformdev/ui 0.1.99-beta.20 → 0.1.99-beta.22
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/ButtonIcon/buttonIconVariants.js +1 -1
- package/ButtonIcon/buttonIconVariants.js.map +1 -1
- package/CHANGELOG.md +24 -0
- package/Input/Input.js +1 -1
- package/Input/Input.js.map +1 -1
- package/Input/inputVariants.d.ts.map +1 -1
- package/Input/inputVariants.js +5 -4
- package/Input/inputVariants.js.map +1 -1
- package/Search/Search.js +12 -12
- package/Search/Search.js.map +1 -1
- package/Search/Search.stories.js +17 -0
- package/Search/Search.stories.js.map +1 -0
- package/Textarea/Textarea.stories.js +1 -1
- package/Textarea/Textarea.stories.js.map +1 -1
- package/package.json +4 -4
|
@@ -138,7 +138,7 @@ const a = r(
|
|
|
138
138
|
variant: "ghost",
|
|
139
139
|
rounded: !0,
|
|
140
140
|
className: e(
|
|
141
|
-
"shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]",
|
|
141
|
+
"bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]",
|
|
142
142
|
"disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]"
|
|
143
143
|
)
|
|
144
144
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n [\n \"inline-flex items-center justify-center relative\",\n 'whitespace-nowrap font-medium aspect-square',\n 'cursor-pointer box-border',\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n \"disabled:pointer-events-none disabled:cursor-default\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n ],\n {\n variants: {\n variant: {\n none: '',\n contained: '',\n outlined: '',\n ghost: \"\",\n },\n color: {\n primary: \"\",\n secondary: \"\",\n error: \"\"\n },\n size: {\n xs: 'w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3',\n sm: 'w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4',\n md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\n lg: 'w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6',\n },\n rounded: {\n true: \"rounded-full\",\n false: \"\",\n },\n },\n compoundVariants: [\n // PRIMARY BUTTON VARIANTS\n {\n color: 'primary',\n variant: 'contained',\n className: cn(\n 'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#7F4EEB]',\n 'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n 'active:bg-[#6B3DD9]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:bg-[#9368FF0F]',\n 'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n 'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n 'active:bg-[#9368FF0F]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // SECONDARY BUTTON VARIANTS\n {\n color: 'secondary',\n variant: 'contained',\n className: cn(\n 'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'ghost',\n className: cn(\n 'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n 'hover:bg-[#F9FAFB]',\n 'focus:bg-[#FCFCFC]',\n 'active:bg-[#F9FAFB]',\n 'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // ERROR BUTTON VARIANTS\n {\n color: 'error',\n variant: 'contained',\n className: cn(\n 'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#DC2626]',\n 'focus:bg-[#DC2626]',\n 'active:bg-[#DC2626]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // ROUNDED BUTTON VARIANTS\n {\n variant: 'ghost',\n rounded: true,\n className: cn(\n 'shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n }
|
|
1
|
+
{"version":3,"file":"buttonIconVariants.js","sources":["../../src/ButtonIcon/buttonIconVariants.ts"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from \"@oneplatformdev/utils\";\n\nexport const buttonIconVariants = cva(\n [\n \"inline-flex items-center justify-center relative\",\n 'whitespace-nowrap font-medium aspect-square',\n 'cursor-pointer box-border',\n \"transition-colors focus-visible:outline-hidden focus-visible:ring-none focus-visible:ring-transparent\",\n \"disabled:pointer-events-none disabled:cursor-default\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n ],\n {\n variants: {\n variant: {\n none: '',\n contained: '',\n outlined: '',\n ghost: \"\",\n },\n color: {\n primary: \"\",\n secondary: \"\",\n error: \"\"\n },\n size: {\n xs: 'w-4 h-4 size-4 rounded-sm p-0 [&_svg]:size-3',\n sm: 'w-6 h-6 size-6 rounded-md p-0 [&_svg]:size-4',\n md: 'w-8 h-8 size-8 rounded-lg p-1 [&_svg]:size-5',\n lg: 'w-10 h-10 size-10 rounded-lg p-1 [&_svg]:size-6',\n },\n rounded: {\n true: \"rounded-full\",\n false: \"\",\n },\n },\n compoundVariants: [\n // PRIMARY BUTTON VARIANTS\n {\n color: 'primary',\n variant: 'contained',\n className: cn(\n 'bg-[#9368FF] border border-[#9368FF] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#7F4EEB]',\n 'focus:bg-[#7F4EEB] focus:border-[#6B3DD9]',\n 'active:bg-[#6B3DD9]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#9368FF] text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:bg-[#9368FF0F]',\n 'active:bg-[#9368FF0F] active:border-[#6B3DD9]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'primary',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#9368FF] [&_svg]:text-[#9368FF]',\n 'hover:text-[#6B3DD9] hover:[&_svg]:text-[#6B3DD9]',\n 'focus:text-[#6B3DD9] focus:[&_svg]:text-[#6B3DD9]',\n 'active:bg-[#9368FF0F]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // SECONDARY BUTTON VARIANTS\n {\n color: 'secondary',\n variant: 'contained',\n className: cn(\n 'bg-[#FCFCFC] border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#E1E1E5] text-[#06080D] [&_svg]:text-[#06080D]',\n 'hover:bg-[#F9FAFB] hover:border-[#E1E1E5]',\n 'focus:bg-[#FCFCFC] focus:border-[#C5C7CD]',\n 'active:bg-[#F9FAFB] active:border-[#C5C7CD]',\n 'disabled:bg-[#FCFCFC] disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'secondary',\n variant: 'ghost',\n className: cn(\n 'text-[#06080D] [&_svg]:text-[#06080D] bg-transparent border border-transparent',\n 'hover:bg-[#F9FAFB]',\n 'focus:bg-[#FCFCFC]',\n 'active:bg-[#F9FAFB]',\n 'disabled:bg-[#FCFCFC] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // ERROR BUTTON VARIANTS\n {\n color: 'error',\n variant: 'contained',\n className: cn(\n 'bg-[#EF4444] border border-[#EF4444] text-[#FCFCFC] [&_svg]:text-[#FCFCFC]',\n 'hover:bg-[#DC2626]',\n 'focus:bg-[#DC2626]',\n 'active:bg-[#DC2626]',\n 'disabled:bg-[#E8E9EB] disabled:border-[#E8E9EB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'outlined',\n className: cn(\n 'bg-transparent border border-[#EF4444] text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:border-[#EBEBEB] disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n {\n color: 'error',\n variant: 'ghost',\n className: cn(\n 'bg-transparent border border-transparent text-[#EF4444] [&_svg]:text-[#EF4444]',\n 'hover:bg-[#EF44440F] hover:text-[#DC2626] hover:[&_svg]:text-[#DC2626]',\n 'active:bg-[#DC26260F] active:border-[#DC2626]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n },\n // ROUNDED BUTTON VARIANTS\n {\n variant: 'ghost',\n rounded: true,\n className: cn(\n 'bg-[#FCFCFC] shadow-[-1px_-1px_10px_rgba(6,8,13,0.06),_1px_1px_10px_rgba(6,8,13,0.06)]',\n 'disabled:text-[#666A78] disabled:[&_svg]:text-[#666A78]',\n ),\n }\n ],\n defaultVariants: {\n color: \"primary\",\n variant: \"contained\",\n size: \"lg\",\n rounded: false,\n },\n }\n)\n\nexport type ButtonIconVarianceProps = VariantProps<typeof buttonIconVariants>;\n"],"names":["buttonIconVariants","cva","cn"],"mappings":";;AAGO,MAAMA,IAAqBC;AAAA,EAChC;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,MAAM;AAAA,QACN,WAAW;AAAA,QACX,UAAU;AAAA,QACV,OAAO;AAAA,MAAA;AAAA,MAET,OAAO;AAAA,QACL,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,MAAA;AAAA,MAET,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,SAAS;AAAA,QACP,MAAM;AAAA,QACN,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,kBAAkB;AAAA;AAAA,MAEhB;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF;AAAA,QACE,OAAO;AAAA,QACP,SAAS;AAAA,QACT,WAAWA;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA;AAAA,MAGF;AAAA,QACE,SAAS;AAAA,QACT,SAAS;AAAA,QACT,WAAWA;AAAA,UACX;AAAA,UACE;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;"}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,27 @@
|
|
|
1
|
+
## 0.1.99-beta.22 (2026-01-07)
|
|
2
|
+
|
|
3
|
+
### 🩹 Fixes
|
|
4
|
+
|
|
5
|
+
- **Resizable:** update button icon styles and refactor ResizableHandle component props ([cd56236](https://github.com/oneplatformdev/core-web/commit/cd56236))
|
|
6
|
+
|
|
7
|
+
### 🧱 Updated Dependencies
|
|
8
|
+
|
|
9
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.22
|
|
10
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.22
|
|
11
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.22
|
|
12
|
+
|
|
13
|
+
### ❤️ Thank You
|
|
14
|
+
|
|
15
|
+
- Bohdan Radchenko
|
|
16
|
+
|
|
17
|
+
## 0.1.99-beta.21 (2026-01-07)
|
|
18
|
+
|
|
19
|
+
### 🧱 Updated Dependencies
|
|
20
|
+
|
|
21
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.21
|
|
22
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.21
|
|
23
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.21
|
|
24
|
+
|
|
1
25
|
## 0.1.99-beta.20 (2026-01-07)
|
|
2
26
|
|
|
3
27
|
### 🩹 Fixes
|
package/Input/Input.js
CHANGED
package/Input/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sources":["../../src/Input/Input.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { inputVariants } from './inputVariants';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { InputProps } from './Input.types';\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 fullSize = false,\n ...rest\n } = props;\n const {\n startAdornment,\n className: classNameInputSlotProps,\n ...restInputSlotProps\n } = input || {};\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-
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../src/Input/Input.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport { Eye, EyeOff } from 'lucide-react';\nimport { inputVariants } from './inputVariants';\n\nimport { cn } from '@oneplatformdev/utils';\nimport { InputProps } from './Input.types';\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 fullSize = false,\n ...rest\n } = props;\n const {\n startAdornment,\n className: classNameInputSlotProps,\n ...restInputSlotProps\n } = input || {};\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 classNameInputSlotProps,\n fullSize && 'min-w-auto',\n )}\n ref={ref}\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 (onChange) onChange(e);\n }}\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":["BaseInput","React","props","ref","className","variant","type","input","wrapper","onChange","onTransform","fullSize","rest","startAdornment","classNameInputSlotProps","restInputSlotProps","jsxs","cn","jsx","inputVariants","e","PasswordInput","isVisible","setIsVisible","useState","inputType","toggleVisibility","VisibilityButton","onClick","Eye","EyeOff","Input"],"mappings":";;;;;AAOO,MAAMA,IAAYC,EAAM;AAAA,EAC7B,CAACC,GAAOC,MAAQ;AACd,UAAM;AAAA,MACJ,WAAAC;AAAA,MACA,SAAAC;AAAA,MACA,MAAAC;AAAA,MACA,WAAW,EAAE,OAAAC,GAAO,SAAAC,EAAA,IAAY,CAAA;AAAA,MAChC,UAAAC;AAAA,MACA,aAAAC;AAAA,MACA,UAAAC,IAAW;AAAA,MACX,GAAGC;AAAA,IAAA,IACDV,GACE;AAAA,MACJ,gBAAAW;AAAA,MACA,WAAWC;AAAA,MACX,GAAGC;AAAA,IAAA,IACDR,KAAS,CAAA;AACb,WACE,gBAAAS;AAAA,MAAC;AAAA,MAAA;AAAA,QACE,GAAIR,KAAW,CAAA;AAAA,QAChB,WAAWS;AAAA,UACT;AAAA,UACAN,KAAY;AAAA,UACZH,GAAS;AAAA,QAAA;AAAA,QAEV,UAAA;AAAA,UAAA,EAAQK,KACP,gBAAAK,EAAC,QAAA,EAAK,WAAU,iDACb,UAAAL,GACH;AAAA,UAEF,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAAZ;AAAA,cACA,WAAWW;AAAA,gBACTE,EAAc,EAAE,SAAAd,GAAS,WAAAD,GAAW;AAAA,gBACpC,EAAQS,KAAmB;AAAA,gBAC3BC;AAAA,gBACAH,KAAY;AAAA,cAAA;AAAA,cAEd,KAAAR;AAAA,cACC,GAAGY;AAAA,cACH,GAAGH;AAAA,cACJ,UAAU,CAACQ,MAAM;AACf,gBAAI,OAAOV,IAAcU,EAAE,OAAO,OAAOA,CAAC,KAAM,aAC9CA,EAAE,OAAO,QAAQV,EAAYU,EAAE,OAAO,OAAOA,CAAC,IAE5CX,OAAmBW,CAAC;AAAA,cAC1B;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AACApB,EAAU,cAAc;AAEjB,MAAMqB,IAAgBpB,EAAM;AAAA,EACjC,CAACC,GAAOC,MAAQ;AACd,UAAM,CAACmB,GAAWC,CAAY,IAAIC,EAAkB,EAAK,GAEnDC,IAAYH,IAAY,SAAS,YAEjCI,IAAmB,MAAM;AAC7B,MAAAH,EAAa,CAACD,CAAS;AAAA,IACzB;AAEA,WACE,gBAAAN,EAAC,OAAA,EAAK,GAAId,GAAO,WAAW,WAAW,CAAA,GAAK,WAAWe,EAAG,YAAYf,GAAO,WAAW,SAAS,SAAS,GACxG,UAAA;AAAA,MAAA,gBAAAgB,EAAClB,KAAW,GAAGE,GAAO,MAAMuB,GAAW,WAAU,QAAO,KAAAtB,GAAU;AAAA,MAClE,gBAAAe,EAACS,GAAA,EAAiB,WAAAL,GAAsB,SAASI,EAAA,CAAkB;AAAA,IAAA,GACrE;AAAA,EAEJ;AACF;AACAL,EAAc,cAAc;AAO5B,MAAMM,IAAmB,CAAC,EAAE,WAAAL,GAAW,SAAAM,QACrC,gBAAAV;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,MAAK;AAAA,IACL,SAAAU;AAAA,IACA,WAAU;AAAA,IAET,UAAAN,sBAAaO,GAAA,EAAI,MAAM,IAAI,IAAK,gBAAAX,EAACY,GAAA,EAAO,MAAM,GAAA,CAAI;AAAA,EAAA;AACrD,GAGWC,IAAQ9B,EAAM;AAAA,EACzB,CAAC,EAAE,MAAAK,GAAM,GAAGJ,EAAA,GAASC,MACfG,MAAS,aAAmB,gBAAAY,EAACG,KAAc,MAAAf,GAAa,GAAGJ,GAAO,KAAAC,GAAU,IACzE,gBAAAe,EAAClB,GAAA,EAAU,MAAAM,GAAa,GAAGJ,GAAO,KAAAC,GAAU;AAEvD;AACA4B,EAAM,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputVariants.d.ts","sourceRoot":"","sources":["../../src/Input/inputVariants.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;
|
|
1
|
+
{"version":3,"file":"inputVariants.d.ts","sourceRoot":"","sources":["../../src/Input/inputVariants.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa;;8EAoBzB,CAAC"}
|
package/Input/inputVariants.js
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
import { cva as
|
|
2
|
-
const t =
|
|
1
|
+
import { cva as r } from "class-variance-authority";
|
|
2
|
+
const t = r(
|
|
3
3
|
[
|
|
4
|
-
"flex h-10 w-full rounded-
|
|
4
|
+
"flex h-10 w-full rounded-lg border border-input px-3 py-2",
|
|
5
5
|
"text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground",
|
|
6
6
|
"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
|
|
7
7
|
"group-data-[state=invalid]/form-control:border-destructive",
|
|
8
|
-
"group-data-[state=valid]/form-control:border-input"
|
|
8
|
+
"group-data-[state=valid]/form-control:border-input",
|
|
9
|
+
"box-border"
|
|
9
10
|
],
|
|
10
11
|
{
|
|
11
12
|
variants: {
|
|
@@ -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-
|
|
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;"}
|
package/Search/Search.js
CHANGED
|
@@ -5,37 +5,37 @@ import { useDebounceCallback as b } from "@oneplatformdev/hooks";
|
|
|
5
5
|
import { cn as x } from "@oneplatformdev/utils";
|
|
6
6
|
import { SearchIcon as I } from "lucide-react";
|
|
7
7
|
import { LoadedIcon as N } from "../LoadedIcon/LoadedIcon.js";
|
|
8
|
-
const
|
|
8
|
+
const L = (n) => {
|
|
9
9
|
const {
|
|
10
10
|
search: e,
|
|
11
|
-
onChange:
|
|
12
|
-
onSearch:
|
|
11
|
+
onChange: c,
|
|
12
|
+
onSearch: s,
|
|
13
13
|
placeholder: m = "Search",
|
|
14
|
-
className:
|
|
15
|
-
loading:
|
|
14
|
+
className: l,
|
|
15
|
+
loading: h = !1,
|
|
16
16
|
slotProps: o,
|
|
17
|
-
name:
|
|
17
|
+
name: i = "search",
|
|
18
18
|
...p
|
|
19
|
-
} = n, [u, a] = g(e), f = b(
|
|
19
|
+
} = n, [u, a] = g(e), f = b(s, 1e3), d = (r) => {
|
|
20
20
|
const S = r.target.value;
|
|
21
|
-
a(S),
|
|
21
|
+
a(S), c?.(r), f(r.target.value);
|
|
22
22
|
};
|
|
23
23
|
return v(() => {
|
|
24
24
|
a(e ?? "");
|
|
25
25
|
}, [e]), /* @__PURE__ */ t(
|
|
26
26
|
C,
|
|
27
27
|
{
|
|
28
|
-
name:
|
|
28
|
+
name: i,
|
|
29
29
|
placeholder: m,
|
|
30
30
|
value: u,
|
|
31
|
-
className: x("min-w-[340px]",
|
|
31
|
+
className: x("min-w-[340px]", l),
|
|
32
32
|
onChange: d,
|
|
33
33
|
...p,
|
|
34
34
|
...o || {},
|
|
35
35
|
slotProps: {
|
|
36
36
|
...o || {},
|
|
37
37
|
input: {
|
|
38
|
-
startAdornment: /* @__PURE__ */ t(N, { loading:
|
|
38
|
+
startAdornment: /* @__PURE__ */ t(N, { loading: h, children: /* @__PURE__ */ t(I, {}) }),
|
|
39
39
|
...o?.input || {}
|
|
40
40
|
}
|
|
41
41
|
}
|
|
@@ -43,6 +43,6 @@ const E = (n) => {
|
|
|
43
43
|
);
|
|
44
44
|
};
|
|
45
45
|
export {
|
|
46
|
-
|
|
46
|
+
L as Search
|
|
47
47
|
};
|
|
48
48
|
//# sourceMappingURL=Search.js.map
|
package/Search/Search.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Search.js","sources":["../../src/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport { ChangeEvent, useEffect, useState } from 'react';\n\nimport { Input } from '../Input';\nimport { SearchProps } from './Search.types';\n\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { cn } from '@oneplatformdev/utils';\nimport { SearchIcon } from 'lucide-react';\nimport { LoadedIcon } from '../LoadedIcon';\n\nexport const Search = (props: SearchProps) => {\n const {\n search: initialSearch,\n onChange: handleChange,\n onSearch,\n placeholder = 'Search',\n className,\n loading = false,\n slotProps,\n name = 'search',\n ...rest\n } = props;\n const [search, setSearch] = useState(initialSearch);\n const debounced = useDebounceCallback(onSearch, 1000);\n\n const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n const v = e.target.value;\n setSearch(v);\n handleChange?.(e);\n debounced(e.target.value);\n };\n\n useEffect(() => {\n setSearch(initialSearch ?? '');\n }, [initialSearch]);\n\n return (\n <Input\n name={name}\n placeholder={placeholder}\n value={search}\n className={cn('min-w-[340px]', className)}\n onChange={onChange}\n {...rest}\n {...(slotProps || {})}\n slotProps={{\n ...(slotProps || {}),\n input: {\n startAdornment: (\n <LoadedIcon loading={loading}
|
|
1
|
+
{"version":3,"file":"Search.js","sources":["../../src/Search/Search.tsx"],"sourcesContent":["'use client';\n\nimport { ChangeEvent, useEffect, useState } from 'react';\n\nimport { Input } from '../Input';\nimport { SearchProps } from './Search.types';\n\nimport { useDebounceCallback } from '@oneplatformdev/hooks';\nimport { cn } from '@oneplatformdev/utils';\nimport { SearchIcon } from 'lucide-react';\nimport { LoadedIcon } from '../LoadedIcon';\n\nexport const Search = (props: SearchProps) => {\n const {\n search: initialSearch,\n onChange: handleChange,\n onSearch,\n placeholder = 'Search',\n className,\n loading = false,\n slotProps,\n name = 'search',\n ...rest\n } = props;\n const [search, setSearch] = useState(initialSearch);\n const debounced = useDebounceCallback(onSearch, 1000);\n\n const onChange = (e: ChangeEvent<HTMLInputElement>) => {\n const v = e.target.value;\n setSearch(v);\n handleChange?.(e);\n debounced(e.target.value);\n };\n\n useEffect(() => {\n setSearch(initialSearch ?? '');\n }, [initialSearch]);\n\n return (\n <Input\n name={name}\n placeholder={placeholder}\n value={search}\n className={cn('min-w-[340px]', className)}\n onChange={onChange}\n {...rest}\n {...(slotProps || {})}\n slotProps={{\n ...(slotProps || {}),\n input: {\n startAdornment: (\n <LoadedIcon loading={loading}>\n <SearchIcon />\n </LoadedIcon>\n ),\n ...(slotProps?.input || {}),\n },\n }}\n />\n );\n};\n"],"names":["Search","props","initialSearch","handleChange","onSearch","placeholder","className","loading","slotProps","name","rest","search","setSearch","useState","debounced","useDebounceCallback","onChange","e","v","useEffect","jsx","Input","cn","LoadedIcon","SearchIcon"],"mappings":";;;;;;;AAYO,MAAMA,IAAS,CAACC,MAAuB;AAC5C,QAAM;AAAA,IACJ,QAAQC;AAAA,IACR,UAAUC;AAAA,IACV,UAAAC;AAAA,IACA,aAAAC,IAAc;AAAA,IACd,WAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,WAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,GAAGC;AAAA,EAAA,IACDT,GACE,CAACU,GAAQC,CAAS,IAAIC,EAASX,CAAa,GAC5CY,IAAYC,EAAoBX,GAAU,GAAI,GAE9CY,IAAW,CAACC,MAAqC;AACrD,UAAMC,IAAID,EAAE,OAAO;AACnB,IAAAL,EAAUM,CAAC,GACXf,IAAec,CAAC,GAChBH,EAAUG,EAAE,OAAO,KAAK;AAAA,EAC1B;AAEA,SAAAE,EAAU,MAAM;AACd,IAAAP,EAAUV,KAAiB,EAAE;AAAA,EAC/B,GAAG,CAACA,CAAa,CAAC,GAGhB,gBAAAkB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAAZ;AAAA,MACA,aAAAJ;AAAA,MACA,OAAOM;AAAA,MACP,WAAWW,EAAG,iBAAiBhB,CAAS;AAAA,MACxC,UAAAU;AAAA,MACC,GAAGN;AAAA,MACH,GAAIF,KAAa,CAAA;AAAA,MAClB,WAAW;AAAA,QACT,GAAIA,KAAa,CAAA;AAAA,QACjB,OAAO;AAAA,UACL,gBACE,gBAAAY,EAACG,GAAA,EAAW,SAAAhB,GACV,UAAA,gBAAAa,EAACI,KAAW,GACd;AAAA,UAEF,GAAIhB,GAAW,SAAS,CAAA;AAAA,QAAC;AAAA,MAC3B;AAAA,IACF;AAAA,EAAA;AAGN;"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { Search as t } from "./Search.js";
|
|
2
|
+
const a = {
|
|
3
|
+
title: "Input/Search",
|
|
4
|
+
component: t
|
|
5
|
+
}, o = {
|
|
6
|
+
args: {
|
|
7
|
+
slotProps: {},
|
|
8
|
+
search: "search",
|
|
9
|
+
onSearch: () => {
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
o as Default,
|
|
15
|
+
a as default
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=Search.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Search.stories.js","sources":["../../src/Search/Search.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Search } from './Search';\n\nconst meta = {\n title: 'Input/Search',\n component: Search,\n} satisfies Meta<typeof Search>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {\n slotProps: {},\n search: \"search\",\n onSearch: () => {}\n }\n};\n"],"names":["meta","Search","Default"],"mappings":";AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AACb,GAMaC,IAAiB;AAAA,EAC5B,MAAM;AAAA,IACJ,WAAW,CAAA;AAAA,IACX,QAAQ;AAAA,IACR,UAAU,MAAM;AAAA,IAAC;AAAA,EAAA;AAErB;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.stories.js","sources":["../../src/Textarea/Textarea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Textarea } from './Textarea';\n\nconst meta = {\n title: 'Textarea',\n component: Textarea,\n} satisfies Meta<typeof Textarea>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {}\n};\n"],"names":["meta","Textarea","Default"],"mappings":";AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AACb,GAMaC,IAAiB;AAAA,EAC5B,MAAM,CAAA;AACR;"}
|
|
1
|
+
{"version":3,"file":"Textarea.stories.js","sources":["../../src/Textarea/Textarea.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from '@storybook/react-vite';\n\nimport { Textarea } from './Textarea';\n\nconst meta = {\n title: 'Input/Textarea',\n component: Textarea,\n} satisfies Meta<typeof Textarea>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n args: {}\n};\n"],"names":["meta","Textarea","Default"],"mappings":";AAIA,MAAMA,IAAO;AAAA,EACX,OAAO;AAAA,EACP,WAAWC;AACb,GAMaC,IAAiB;AAAA,EAC5B,MAAM,CAAA;AACR;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@oneplatformdev/ui",
|
|
3
|
-
"version": "0.1.99-beta.
|
|
3
|
+
"version": "0.1.99-beta.22",
|
|
4
4
|
"description": "UI component library for OnePlatform",
|
|
5
5
|
"author": "One Platform Development Team",
|
|
6
6
|
"keywords": [
|
|
@@ -105,9 +105,9 @@
|
|
|
105
105
|
"recharts": "^3.2.0",
|
|
106
106
|
"sonner": "^2.0.7",
|
|
107
107
|
"vaul": "^1.1.2",
|
|
108
|
-
"@oneplatformdev/
|
|
109
|
-
"@oneplatformdev/
|
|
110
|
-
"@oneplatformdev/
|
|
108
|
+
"@oneplatformdev/utils": "^0.1.99-beta.22",
|
|
109
|
+
"@oneplatformdev/tokens": "^0.1.99-beta.22",
|
|
110
|
+
"@oneplatformdev/hooks": "^0.1.99-beta.22"
|
|
111
111
|
},
|
|
112
112
|
"scripts": {
|
|
113
113
|
"chromatic": "chromatic"
|