@oneplatformdev/ui 0.1.99-beta.261 → 0.1.99-beta.263
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/CHANGELOG.md +16 -0
- package/Input/Input.d.ts.map +1 -1
- package/Input/Input.js +95 -58
- package/Input/Input.js.map +1 -1
- package/Input/Input.stories.js +112 -41
- package/Input/Input.stories.js.map +1 -1
- package/Input/Input.types.d.ts +4 -0
- package/Input/Input.types.d.ts.map +1 -1
- package/Select/SelectRoot.js +5 -5
- package/Select/SelectRoot.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
## 0.1.99-beta.263 (2026-04-28)
|
|
2
|
+
|
|
3
|
+
### 🧱 Updated Dependencies
|
|
4
|
+
|
|
5
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.263
|
|
6
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.263
|
|
7
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.263
|
|
8
|
+
|
|
9
|
+
## 0.1.99-beta.262 (2026-04-28)
|
|
10
|
+
|
|
11
|
+
### 🧱 Updated Dependencies
|
|
12
|
+
|
|
13
|
+
- Updated @oneplatformdev/utils to 0.1.99-beta.262
|
|
14
|
+
- Updated @oneplatformdev/hooks to 0.1.99-beta.262
|
|
15
|
+
- Updated @oneplatformdev/tokens to 0.1.99-beta.262
|
|
16
|
+
|
|
1
17
|
## 0.1.99-beta.261 (2026-04-17)
|
|
2
18
|
|
|
3
19
|
### 🧱 Updated Dependencies
|
package/Input/Input.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgD,MAAM,OAAO,CAAC;AAKrE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAa3C,eAAO,MAAM,SAAS,qFA+GrB,CAAC;AAGF,eAAO,MAAM,aAAa,qFAiBzB,CAAC;AAkBF,eAAO,MAAM,KAAK,qFAKjB,CAAC"}
|
package/Input/Input.js
CHANGED
|
@@ -1,100 +1,137 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import
|
|
3
|
-
import { Eye as
|
|
4
|
-
import { inputVariants as
|
|
5
|
-
import { cn as
|
|
6
|
-
const
|
|
7
|
-
(
|
|
1
|
+
import { jsxs as b, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import g, { useRef as H, useImperativeHandle as L, useState as E } from "react";
|
|
3
|
+
import { X as M, Eye as _, EyeOff as A } from "lucide-react";
|
|
4
|
+
import { inputVariants as U } from "./inputVariants.js";
|
|
5
|
+
import { cn as s } from "@oneplatformdev/utils";
|
|
6
|
+
const X = (e) => {
|
|
7
|
+
if (!e) return;
|
|
8
|
+
Object.getOwnPropertyDescriptor(
|
|
9
|
+
HTMLInputElement.prototype,
|
|
10
|
+
"value"
|
|
11
|
+
)?.set?.call(e, ""), e.dispatchEvent(new Event("input", { bubbles: !0 })), e.dispatchEvent(new Event("change", { bubbles: !0 }));
|
|
12
|
+
}, v = g.forwardRef(
|
|
13
|
+
(e, r) => {
|
|
8
14
|
const {
|
|
9
15
|
className: a,
|
|
10
16
|
variant: o,
|
|
11
|
-
type:
|
|
12
|
-
slotProps: { input:
|
|
13
|
-
onChange:
|
|
14
|
-
onTransform:
|
|
15
|
-
counter:
|
|
16
|
-
maxLength:
|
|
17
|
+
type: i,
|
|
18
|
+
slotProps: { input: u, wrapper: y } = {},
|
|
19
|
+
onChange: h,
|
|
20
|
+
onTransform: w,
|
|
21
|
+
counter: S = !1,
|
|
22
|
+
maxLength: c,
|
|
17
23
|
fullSize: N = !1,
|
|
18
|
-
value:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
24
|
+
value: p,
|
|
25
|
+
defaultValue: d,
|
|
26
|
+
disabled: x,
|
|
27
|
+
readOnly: I,
|
|
28
|
+
clearable: C = !1,
|
|
29
|
+
onClear: j,
|
|
30
|
+
...z
|
|
31
|
+
} = e, {
|
|
32
|
+
startAdornment: f,
|
|
33
|
+
className: B,
|
|
34
|
+
...O
|
|
35
|
+
} = u || {}, l = H(null);
|
|
36
|
+
L(r, () => l.current);
|
|
37
|
+
const m = p !== void 0, [D, V] = E(
|
|
38
|
+
d !== void 0 ? String(d) : ""
|
|
39
|
+
), P = m ? String(p ?? "") : D, T = C && !x && !I && P.length > 0, k = () => {
|
|
40
|
+
X(l.current), m || V(""), l.current?.focus(), j?.();
|
|
41
|
+
};
|
|
42
|
+
return /* @__PURE__ */ b(
|
|
26
43
|
"div",
|
|
27
44
|
{
|
|
28
|
-
...
|
|
29
|
-
className:
|
|
45
|
+
...y || {},
|
|
46
|
+
className: s(
|
|
30
47
|
"relative",
|
|
31
48
|
N && "w-full",
|
|
32
|
-
|
|
49
|
+
y?.className
|
|
33
50
|
),
|
|
34
51
|
children: [
|
|
35
|
-
!!
|
|
36
|
-
/* @__PURE__ */
|
|
52
|
+
!!f && /* @__PURE__ */ t("span", { className: "absolute left-[10px] top-1/2 -translate-y-1/2", children: f }),
|
|
53
|
+
/* @__PURE__ */ t(
|
|
37
54
|
"input",
|
|
38
55
|
{
|
|
39
|
-
type:
|
|
40
|
-
className:
|
|
41
|
-
|
|
42
|
-
!!
|
|
43
|
-
|
|
56
|
+
type: i,
|
|
57
|
+
className: s(
|
|
58
|
+
U({ variant: o, className: a }),
|
|
59
|
+
!!f && "pl-10",
|
|
60
|
+
C && "pr-8",
|
|
61
|
+
B,
|
|
44
62
|
N && "min-w-auto"
|
|
45
63
|
),
|
|
46
|
-
ref:
|
|
47
|
-
maxLength:
|
|
48
|
-
value:
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
64
|
+
ref: l,
|
|
65
|
+
maxLength: c,
|
|
66
|
+
value: p,
|
|
67
|
+
defaultValue: d,
|
|
68
|
+
disabled: x,
|
|
69
|
+
readOnly: I,
|
|
70
|
+
...O,
|
|
71
|
+
...z,
|
|
72
|
+
onChange: (n) => {
|
|
73
|
+
typeof w?.(n.target.value, n) == "string" && (n.target.value = w(n.target.value, n)), m || V(n.target.value), h && h(n);
|
|
53
74
|
}
|
|
54
75
|
}
|
|
55
76
|
),
|
|
56
|
-
|
|
77
|
+
T && /* @__PURE__ */ t(
|
|
78
|
+
"button",
|
|
79
|
+
{
|
|
80
|
+
type: "button",
|
|
81
|
+
tabIndex: -1,
|
|
82
|
+
"aria-label": "Clear input",
|
|
83
|
+
onMouseDown: (n) => n.preventDefault(),
|
|
84
|
+
onClick: k,
|
|
85
|
+
className: s(
|
|
86
|
+
"absolute top-1/2 right-3 -translate-y-1/2",
|
|
87
|
+
"text-muted-foreground hover:text-foreground",
|
|
88
|
+
"inline-flex items-center justify-center"
|
|
89
|
+
),
|
|
90
|
+
children: /* @__PURE__ */ t(M, { size: 16 })
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
S && typeof c == "number" && /* @__PURE__ */ b("div", { className: s(
|
|
57
94
|
"w-full text-right inline-flex items-center justify-end",
|
|
58
95
|
"text-xs font-medium leading-[1.2] text-muted-foreground",
|
|
59
96
|
"peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
|
60
97
|
), children: [
|
|
61
|
-
|
|
98
|
+
P.length,
|
|
62
99
|
"/",
|
|
63
|
-
|
|
100
|
+
c
|
|
64
101
|
] })
|
|
65
102
|
]
|
|
66
103
|
}
|
|
67
104
|
);
|
|
68
105
|
}
|
|
69
106
|
);
|
|
70
|
-
|
|
71
|
-
const
|
|
72
|
-
(
|
|
73
|
-
const [a, o] =
|
|
107
|
+
v.displayName = "Input";
|
|
108
|
+
const R = g.forwardRef(
|
|
109
|
+
(e, r) => {
|
|
110
|
+
const [a, o] = E(!1), i = a ? "text" : "password", u = () => {
|
|
74
111
|
o(!a);
|
|
75
112
|
};
|
|
76
|
-
return /* @__PURE__ */
|
|
77
|
-
/* @__PURE__ */
|
|
78
|
-
/* @__PURE__ */
|
|
113
|
+
return /* @__PURE__ */ b("div", { ...e?.slotProps?.wrapper || {}, className: s("relative", e?.slotProps?.wrapper?.className), children: [
|
|
114
|
+
/* @__PURE__ */ t(v, { ...e, type: i, className: "pr-8", ref: r }),
|
|
115
|
+
/* @__PURE__ */ t(q, { isVisible: a, onClick: u })
|
|
79
116
|
] });
|
|
80
117
|
}
|
|
81
118
|
);
|
|
82
|
-
|
|
83
|
-
const
|
|
119
|
+
R.displayName = "PasswordInput";
|
|
120
|
+
const q = ({ isVisible: e, onClick: r }) => /* @__PURE__ */ t(
|
|
84
121
|
"button",
|
|
85
122
|
{
|
|
86
123
|
type: "button",
|
|
87
|
-
onClick:
|
|
124
|
+
onClick: r,
|
|
88
125
|
className: "absolute top-1/2 right-3 transform -translate-y-1/2",
|
|
89
|
-
children:
|
|
126
|
+
children: e ? /* @__PURE__ */ t(_, { size: 16 }) : /* @__PURE__ */ t(A, { size: 16 })
|
|
90
127
|
}
|
|
91
|
-
),
|
|
92
|
-
({ type:
|
|
128
|
+
), F = g.forwardRef(
|
|
129
|
+
({ type: e, ...r }, a) => e === "password" ? /* @__PURE__ */ t(R, { type: e, ...r, ref: a }) : /* @__PURE__ */ t(v, { type: e, ...r, ref: a })
|
|
93
130
|
);
|
|
94
|
-
|
|
131
|
+
F.displayName = "Input";
|
|
95
132
|
export {
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
133
|
+
v as BaseInput,
|
|
134
|
+
F as Input,
|
|
135
|
+
R as PasswordInput
|
|
99
136
|
};
|
|
100
137
|
//# sourceMappingURL=Input.js.map
|
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 counter = false,\n maxLength,\n fullSize = false,\n value,\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={
|
|
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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"}
|
package/Input/Input.stories.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
-
import { useState as
|
|
3
|
-
import { Search as
|
|
4
|
-
import { Input as
|
|
2
|
+
import { useState as o } from "react";
|
|
3
|
+
import { Search as c, Mail as s } from "lucide-react";
|
|
4
|
+
import { Input as n } from "./Input.js";
|
|
5
5
|
const h = {
|
|
6
6
|
title: "Input/Input",
|
|
7
|
-
component:
|
|
7
|
+
component: n,
|
|
8
8
|
tags: ["autodocs"],
|
|
9
9
|
parameters: {
|
|
10
10
|
layout: "centered"
|
|
@@ -14,9 +14,13 @@ const h = {
|
|
|
14
14
|
variant: "default",
|
|
15
15
|
fullSize: !1,
|
|
16
16
|
counter: !1,
|
|
17
|
-
disabled: !1
|
|
17
|
+
disabled: !1,
|
|
18
|
+
clearable: !1
|
|
18
19
|
},
|
|
19
20
|
argTypes: {
|
|
21
|
+
clearable: {
|
|
22
|
+
control: "boolean"
|
|
23
|
+
},
|
|
20
24
|
variant: {
|
|
21
25
|
control: "select",
|
|
22
26
|
options: ["default", "grey"]
|
|
@@ -52,39 +56,39 @@ const h = {
|
|
|
52
56
|
type: "text",
|
|
53
57
|
placeholder: "Grey input"
|
|
54
58
|
}
|
|
55
|
-
},
|
|
59
|
+
}, v = {
|
|
56
60
|
args: {
|
|
57
61
|
placeholder: "Search...",
|
|
58
62
|
slotProps: {
|
|
59
63
|
input: {
|
|
60
|
-
startAdornment: /* @__PURE__ */ e(
|
|
64
|
+
startAdornment: /* @__PURE__ */ e(c, { size: 16 })
|
|
61
65
|
}
|
|
62
66
|
}
|
|
63
67
|
}
|
|
64
|
-
},
|
|
68
|
+
}, b = {
|
|
65
69
|
args: {
|
|
66
70
|
type: "email",
|
|
67
71
|
placeholder: "Email address",
|
|
68
72
|
slotProps: {
|
|
69
73
|
input: {
|
|
70
|
-
startAdornment: /* @__PURE__ */ e(
|
|
74
|
+
startAdornment: /* @__PURE__ */ e(s, { size: 16 })
|
|
71
75
|
}
|
|
72
76
|
}
|
|
73
77
|
}
|
|
74
|
-
},
|
|
78
|
+
}, f = {
|
|
75
79
|
args: {
|
|
76
80
|
type: "password",
|
|
77
81
|
placeholder: "Password"
|
|
78
82
|
}
|
|
79
|
-
},
|
|
80
|
-
render: (
|
|
81
|
-
const [
|
|
83
|
+
}, x = {
|
|
84
|
+
render: (a) => {
|
|
85
|
+
const [t, l] = o("");
|
|
82
86
|
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
83
|
-
|
|
87
|
+
n,
|
|
84
88
|
{
|
|
85
|
-
...
|
|
86
|
-
value:
|
|
87
|
-
onChange: (
|
|
89
|
+
...a,
|
|
90
|
+
value: t,
|
|
91
|
+
onChange: (r) => l(r.target.value)
|
|
88
92
|
}
|
|
89
93
|
) });
|
|
90
94
|
},
|
|
@@ -93,8 +97,8 @@ const h = {
|
|
|
93
97
|
counter: !0,
|
|
94
98
|
maxLength: 50
|
|
95
99
|
}
|
|
96
|
-
},
|
|
97
|
-
render: (
|
|
100
|
+
}, y = {
|
|
101
|
+
render: (a) => /* @__PURE__ */ e("div", { className: "w-[480px]", children: /* @__PURE__ */ e(n, { ...a }) }),
|
|
98
102
|
args: {
|
|
99
103
|
placeholder: "Full width input",
|
|
100
104
|
fullSize: !0
|
|
@@ -105,31 +109,94 @@ const h = {
|
|
|
105
109
|
disabled: !0,
|
|
106
110
|
value: "Disabled value"
|
|
107
111
|
}
|
|
108
|
-
},
|
|
109
|
-
render: (
|
|
110
|
-
const [
|
|
112
|
+
}, C = {
|
|
113
|
+
render: (a) => {
|
|
114
|
+
const [t, l] = o("");
|
|
111
115
|
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
112
|
-
|
|
116
|
+
n,
|
|
113
117
|
{
|
|
114
|
-
...
|
|
115
|
-
value:
|
|
116
|
-
onTransform: (
|
|
117
|
-
onChange: (
|
|
118
|
+
...a,
|
|
119
|
+
value: t,
|
|
120
|
+
onTransform: (r) => r.replace(/\D/g, ""),
|
|
121
|
+
onChange: (r) => l(r.target.value)
|
|
118
122
|
}
|
|
119
123
|
) });
|
|
120
124
|
},
|
|
121
125
|
args: {
|
|
122
126
|
placeholder: "Only numbers allowed"
|
|
123
127
|
}
|
|
124
|
-
},
|
|
125
|
-
render: (
|
|
126
|
-
const [
|
|
128
|
+
}, S = {
|
|
129
|
+
render: (a) => {
|
|
130
|
+
const [t, l] = o("Clear me");
|
|
131
|
+
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
132
|
+
n,
|
|
133
|
+
{
|
|
134
|
+
...a,
|
|
135
|
+
value: t,
|
|
136
|
+
onChange: (r) => l(r.target.value),
|
|
137
|
+
onClear: () => console.log("cleared")
|
|
138
|
+
}
|
|
139
|
+
) });
|
|
140
|
+
},
|
|
141
|
+
args: {
|
|
142
|
+
placeholder: "Type something...",
|
|
143
|
+
clearable: !0
|
|
144
|
+
}
|
|
145
|
+
}, N = {
|
|
146
|
+
render: (a) => /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(n, { ...a, defaultValue: "Uncontrolled value" }) }),
|
|
147
|
+
args: {
|
|
148
|
+
placeholder: "Type something...",
|
|
149
|
+
clearable: !0
|
|
150
|
+
}
|
|
151
|
+
}, V = {
|
|
152
|
+
render: (a) => {
|
|
153
|
+
const [t, l] = o("john@example.com");
|
|
154
|
+
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
155
|
+
n,
|
|
156
|
+
{
|
|
157
|
+
...a,
|
|
158
|
+
value: t,
|
|
159
|
+
onChange: (r) => l(r.target.value)
|
|
160
|
+
}
|
|
161
|
+
) });
|
|
162
|
+
},
|
|
163
|
+
args: {
|
|
164
|
+
type: "email",
|
|
165
|
+
placeholder: "Email address",
|
|
166
|
+
clearable: !0,
|
|
167
|
+
slotProps: {
|
|
168
|
+
input: {
|
|
169
|
+
startAdornment: /* @__PURE__ */ e(s, { size: 16 })
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
}, P = {
|
|
174
|
+
render: (a) => {
|
|
175
|
+
const [t, l] = o("Some text");
|
|
176
|
+
return /* @__PURE__ */ e("div", { className: "w-[320px]", children: /* @__PURE__ */ e(
|
|
177
|
+
n,
|
|
178
|
+
{
|
|
179
|
+
...a,
|
|
180
|
+
value: t,
|
|
181
|
+
onChange: (r) => l(r.target.value)
|
|
182
|
+
}
|
|
183
|
+
) });
|
|
184
|
+
},
|
|
185
|
+
args: {
|
|
186
|
+
placeholder: "Type something...",
|
|
187
|
+
clearable: !0,
|
|
188
|
+
counter: !0,
|
|
189
|
+
maxLength: 50
|
|
190
|
+
}
|
|
191
|
+
}, T = {
|
|
192
|
+
render: (a) => {
|
|
193
|
+
const [t, l] = o("");
|
|
127
194
|
return /* @__PURE__ */ e("div", { className: "w-[360px]", children: /* @__PURE__ */ e(
|
|
128
|
-
|
|
195
|
+
n,
|
|
129
196
|
{
|
|
130
|
-
...
|
|
131
|
-
value:
|
|
132
|
-
onChange: (
|
|
197
|
+
...a,
|
|
198
|
+
value: t,
|
|
199
|
+
onChange: (r) => l(r.target.value)
|
|
133
200
|
}
|
|
134
201
|
) });
|
|
135
202
|
},
|
|
@@ -139,16 +206,20 @@ const h = {
|
|
|
139
206
|
}
|
|
140
207
|
};
|
|
141
208
|
export {
|
|
209
|
+
S as Clearable,
|
|
210
|
+
N as ClearableUncontrolled,
|
|
211
|
+
P as ClearableWithCounter,
|
|
212
|
+
V as ClearableWithStartAdornment,
|
|
142
213
|
m as Default,
|
|
143
214
|
w as Disabled,
|
|
144
|
-
|
|
145
|
-
|
|
215
|
+
b as Email,
|
|
216
|
+
y as FullWidth,
|
|
146
217
|
g as GreyVariant,
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
218
|
+
f as Password,
|
|
219
|
+
T as Playground,
|
|
220
|
+
x as WithCounter,
|
|
221
|
+
v as WithStartAdornment,
|
|
222
|
+
C as WithTransform,
|
|
152
223
|
h as default
|
|
153
224
|
};
|
|
154
225
|
//# sourceMappingURL=Input.stories.js.map
|
|
@@ -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 },\n argTypes: {\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 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","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,EAAA;AAAA,
|
|
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":"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"}
|
package/Input/Input.types.d.ts
CHANGED
|
@@ -17,5 +17,9 @@ export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement>,
|
|
|
17
17
|
onPastePrepare?: (value: string, event: React.ClipboardEvent<HTMLInputElement>) => string;
|
|
18
18
|
fullSize?: boolean;
|
|
19
19
|
counter?: boolean;
|
|
20
|
+
/** Show a clear (X) button inside the input that empties the value and emulates a native input/change event */
|
|
21
|
+
clearable?: boolean;
|
|
22
|
+
/** Optional callback fired after the input has been cleared */
|
|
23
|
+
onClear?: () => void;
|
|
20
24
|
}
|
|
21
25
|
//# sourceMappingURL=Input.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../src/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,wBAAwB,EACxB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,mBACf,SAAQ,wBAAwB,CAAC,OAAO,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC9E,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.types.d.ts","sourceRoot":"","sources":["../../src/Input/Input.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,WAAW,EACX,wBAAwB,EACxB,cAAc,EACd,SAAS,EACV,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEpC,MAAM,WAAW,mBACf,SAAQ,wBAAwB,CAAC,OAAO,SAAS,CAAC;IAClD,cAAc,CAAC,EAAE,SAAS,CAAC;CAC5B;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,mBAAmB,CAAC;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAC;CAC1C;AAED,MAAM,WAAW,UACf,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,YAAY,CAAC,OAAO,aAAa,CAAC;IACvF,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,kEAAkE;IAClE,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC9E,sDAAsD;IACtD,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,KAAK,MAAM,CAAC;IAC1F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,+GAA+G;IAC/G,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}
|
package/Select/SelectRoot.js
CHANGED
|
@@ -12,12 +12,12 @@ function b({
|
|
|
12
12
|
}) {
|
|
13
13
|
return /* @__PURE__ */ e(a.Group, { "data-slot": "select-group", ...t });
|
|
14
14
|
}
|
|
15
|
-
function
|
|
15
|
+
function y({
|
|
16
16
|
...t
|
|
17
17
|
}) {
|
|
18
18
|
return /* @__PURE__ */ e(a.Value, { "data-slot": "select-value", ...t });
|
|
19
19
|
}
|
|
20
|
-
function
|
|
20
|
+
function w(t) {
|
|
21
21
|
const {
|
|
22
22
|
className: o,
|
|
23
23
|
size: r = "default",
|
|
@@ -31,7 +31,7 @@ function y(t) {
|
|
|
31
31
|
"data-slot": "select-trigger",
|
|
32
32
|
"data-size": r,
|
|
33
33
|
className: s(
|
|
34
|
-
"relative flex w-inherit items-center justify-between gap-2 rounded-lg bg-[#FCFCFC] px-3 py-2 text-sm font-normal whitespace-nowrap
|
|
34
|
+
"relative flex w-inherit items-center justify-between gap-2 rounded-lg bg-[#FCFCFC] px-3 py-2 text-sm font-normal whitespace-nowrap",
|
|
35
35
|
"border border-[#E1E1E5] outline-none text-[#06080D]",
|
|
36
36
|
"data-[placeholder]:text-gray-400 [&_svg:not([class*='text-'])]:text-muted-foreground transition-[color,box-shadow,background-color,border-color]",
|
|
37
37
|
"hover:bg-[#F9FAFB] hover:border-[#E1E1E5]",
|
|
@@ -187,7 +187,7 @@ export {
|
|
|
187
187
|
f as SelectScrollDownButton,
|
|
188
188
|
m as SelectScrollUpButton,
|
|
189
189
|
N as SelectSeparator,
|
|
190
|
-
|
|
191
|
-
|
|
190
|
+
w as SelectTrigger,
|
|
191
|
+
y as SelectValue
|
|
192
192
|
};
|
|
193
193
|
//# sourceMappingURL=SelectRoot.js.map
|
package/Select/SelectRoot.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectRoot.js","sources":["../../src/Select/SelectRoot.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction SelectRoot({\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Root>) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Group>) {\n return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Value>) {\n return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger(props: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n size?: \"sm\" | \"default\";\n showIcon?: boolean;\n}) {\n const {\n className,\n size = \"default\",\n children,\n showIcon = true,\n ...rest\n } = props\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n \"relative flex w-inherit items-center justify-between gap-2 rounded-lg bg-[#FCFCFC] px-3 py-2 text-sm font-normal whitespace-nowrap shadow-xs\",\n \"border border-[#E1E1E5] outline-none text-[#06080D]\",\n \"data-[placeholder]:text-gray-400 [&_svg:not([class*='text-'])]:text-muted-foreground transition-[color,box-shadow,background-color,border-color]\",\n \"hover:bg-[#F9FAFB] hover:border-[#E1E1E5]\",\n \"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-[#C5C7CD]\",\n \"data-[state=open]:outline-hidden data-[state=open]:ring-1 data-[state=open]:ring-ring data-[state=open]:border-[#C5C7CD]\",\n \"data-[state=open]:[&_[data-slot=select-trigger-icon]]:opacity-0 data-[state=open]:[&_[data-slot=select-trigger-icon]]:pointer-events-none\",\n \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n 'cursor-pointer',\n 'disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8',\n className\n )}\n {...rest}\n >\n {children}\n {showIcon && (\n <SelectPrimitive.Icon asChild>\n <span\n data-slot=\"select-trigger-icon\"\n className=\"flex items-center justify-center opacity-50 transition-opacity hover:opacity-100\"\n >\n <ChevronDownIcon className=\"size-5 text-[#06080D]\" />\n </span>\n </SelectPrimitive.Icon>\n )}\n </SelectPrimitive.Trigger>\n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"popper\",\n align = \"center\",\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Content>) {\n return (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n data-slot=\"select-content\"\n className={cn(\n \"bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n position === \"popper\" &&\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n 'p-1 rounded-xl shadow-md',\n className\n )}\n position={position}\n align={align}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n return (\n <SelectPrimitive.Label\n data-slot=\"select-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Item>) {\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n return (\n <SelectPrimitive.Separator\n data-slot=\"select-separator\"\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n return (\n <SelectPrimitive.ScrollUpButton\n data-slot=\"select-scroll-up-button\"\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n {...props}\n >\n <ChevronUpIcon className=\"size-4\" />\n </SelectPrimitive.ScrollUpButton>\n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n return (\n <SelectPrimitive.ScrollDownButton\n data-slot=\"select-scroll-down-button\"\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n {...props}\n >\n <ChevronDownIcon className=\"size-4\" />\n </SelectPrimitive.ScrollDownButton>\n )\n}\n\nexport {\n SelectRoot,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n SelectPrimitive,\n}\n"],"names":["SelectRoot","props","SelectPrimitive","SelectGroup","SelectValue","SelectTrigger","className","size","children","showIcon","rest","jsxs","cn","jsx","ChevronDownIcon","SelectContent","position","align","SelectScrollUpButton","SelectScrollDownButton","SelectLabel","SelectItem","CheckIcon","SelectSeparator","ChevronUpIcon"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"SelectRoot.js","sources":["../../src/Select/SelectRoot.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport * as SelectPrimitive from \"@radix-ui/react-select\"\nimport { CheckIcon, ChevronDownIcon, ChevronUpIcon } from \"lucide-react\"\n\nimport { cn } from \"@oneplatformdev/utils\"\n\nfunction SelectRoot({\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Root>) {\n return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Group>) {\n return <SelectPrimitive.Group data-slot=\"select-group\" {...props} />\n}\n\nfunction SelectValue({\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Value>) {\n return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger(props: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n size?: \"sm\" | \"default\";\n showIcon?: boolean;\n}) {\n const {\n className,\n size = \"default\",\n children,\n showIcon = true,\n ...rest\n } = props\n return (\n <SelectPrimitive.Trigger\n data-slot=\"select-trigger\"\n data-size={size}\n className={cn(\n \"relative flex w-inherit items-center justify-between gap-2 rounded-lg bg-[#FCFCFC] px-3 py-2 text-sm font-normal whitespace-nowrap\",\n \"border border-[#E1E1E5] outline-none text-[#06080D]\",\n \"data-[placeholder]:text-gray-400 [&_svg:not([class*='text-'])]:text-muted-foreground transition-[color,box-shadow,background-color,border-color]\",\n \"hover:bg-[#F9FAFB] hover:border-[#E1E1E5]\",\n \"focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-[#C5C7CD]\",\n \"data-[state=open]:outline-hidden data-[state=open]:ring-1 data-[state=open]:ring-ring data-[state=open]:border-[#C5C7CD]\",\n \"data-[state=open]:[&_[data-slot=select-trigger-icon]]:opacity-0 data-[state=open]:[&_[data-slot=select-trigger-icon]]:pointer-events-none\",\n \"*:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\",\n \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n 'cursor-pointer',\n 'disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-10 data-[size=sm]:h-8',\n className\n )}\n {...rest}\n >\n {children}\n {showIcon && (\n <SelectPrimitive.Icon asChild>\n <span\n data-slot=\"select-trigger-icon\"\n className=\"flex items-center justify-center opacity-50 transition-opacity hover:opacity-100\"\n >\n <ChevronDownIcon className=\"size-5 text-[#06080D]\" />\n </span>\n </SelectPrimitive.Icon>\n )}\n </SelectPrimitive.Trigger>\n )\n}\n\nfunction SelectContent({\n className,\n children,\n position = \"popper\",\n align = \"center\",\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Content>) {\n return (\n <SelectPrimitive.Portal>\n <SelectPrimitive.Content\n data-slot=\"select-content\"\n className={cn(\n \"bg-popover text-popover-foreground 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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md\",\n position === \"popper\" &&\n \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n 'p-1 rounded-xl shadow-md',\n className\n )}\n position={position}\n align={align}\n {...props}\n >\n <SelectScrollUpButton />\n <SelectPrimitive.Viewport\n className={cn(\n \"p-1\",\n position === \"popper\" &&\n \"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1\"\n )}\n >\n {children}\n </SelectPrimitive.Viewport>\n <SelectScrollDownButton />\n </SelectPrimitive.Content>\n </SelectPrimitive.Portal>\n )\n}\n\nfunction SelectLabel({\n className,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Label>) {\n return (\n <SelectPrimitive.Label\n data-slot=\"select-label\"\n className={cn(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\n {...props}\n />\n )\n}\n\nfunction SelectItem({\n className,\n children,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Item>) {\n return (\n <SelectPrimitive.Item\n data-slot=\"select-item\"\n className={cn(\n \"focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n className\n )}\n {...props}\n >\n <span className=\"absolute right-2 flex size-3.5 items-center justify-center\">\n <SelectPrimitive.ItemIndicator>\n <CheckIcon className=\"size-4\" />\n </SelectPrimitive.ItemIndicator>\n </span>\n <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n </SelectPrimitive.Item>\n )\n}\n\nfunction SelectSeparator({\n className,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n return (\n <SelectPrimitive.Separator\n data-slot=\"select-separator\"\n className={cn(\"bg-border pointer-events-none -mx-1 my-1 h-px\", className)}\n {...props}\n />\n )\n}\n\nfunction SelectScrollUpButton({\n className,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n return (\n <SelectPrimitive.ScrollUpButton\n data-slot=\"select-scroll-up-button\"\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n {...props}\n >\n <ChevronUpIcon className=\"size-4\" />\n </SelectPrimitive.ScrollUpButton>\n )\n}\n\nfunction SelectScrollDownButton({\n className,\n ...props\n }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n return (\n <SelectPrimitive.ScrollDownButton\n data-slot=\"select-scroll-down-button\"\n className={cn(\n \"flex cursor-default items-center justify-center py-1\",\n className\n )}\n {...props}\n >\n <ChevronDownIcon className=\"size-4\" />\n </SelectPrimitive.ScrollDownButton>\n )\n}\n\nexport {\n SelectRoot,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectLabel,\n SelectScrollDownButton,\n SelectScrollUpButton,\n SelectSeparator,\n SelectTrigger,\n SelectValue,\n SelectPrimitive,\n}\n"],"names":["SelectRoot","props","SelectPrimitive","SelectGroup","SelectValue","SelectTrigger","className","size","children","showIcon","rest","jsxs","cn","jsx","ChevronDownIcon","SelectContent","position","align","SelectScrollUpButton","SelectScrollDownButton","SelectLabel","SelectItem","CheckIcon","SelectSeparator","ChevronUpIcon"],"mappings":"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"}
|
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.263",
|
|
4
4
|
"description": "UI component library for OnePlatform",
|
|
5
5
|
"author": "One Platform Development Team",
|
|
6
6
|
"keywords": [
|
|
@@ -107,9 +107,9 @@
|
|
|
107
107
|
"recharts": "^3.2.0",
|
|
108
108
|
"sonner": "^2.0.7",
|
|
109
109
|
"vaul": "^1.1.2",
|
|
110
|
-
"@oneplatformdev/
|
|
111
|
-
"@oneplatformdev/hooks": "^0.1.99-beta.
|
|
112
|
-
"@oneplatformdev/
|
|
110
|
+
"@oneplatformdev/utils": "^0.1.99-beta.263",
|
|
111
|
+
"@oneplatformdev/hooks": "^0.1.99-beta.263",
|
|
112
|
+
"@oneplatformdev/tokens": "^0.1.99-beta.263"
|
|
113
113
|
},
|
|
114
114
|
"scripts": {
|
|
115
115
|
"chromatic": "chromatic"
|