ssovee-os-web-ui 0.1.56 → 0.1.57
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/dist/index.cjs +32 -34
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +18 -61
- package/dist/index.js +32 -34
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/tailwind-preset.js +0 -20
package/dist/index.cjs
CHANGED
|
@@ -183,11 +183,11 @@ var Input = React22__namespace.default.forwardRef(
|
|
|
183
183
|
onKeyUp,
|
|
184
184
|
...props
|
|
185
185
|
}, ref) => {
|
|
186
|
-
const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-
|
|
186
|
+
const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
|
|
187
187
|
const variantClasses = {
|
|
188
|
-
default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
189
|
-
filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
190
|
-
outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
|
|
188
|
+
default: "bg-primary text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
189
|
+
filled: "bg-surface-4 text-neutral-500 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
190
|
+
outline: "bg-transparent text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
|
|
191
191
|
};
|
|
192
192
|
const sizeClasses = {
|
|
193
193
|
sm: "h-8 px-2 text-sm",
|
|
@@ -204,7 +204,7 @@ var Input = React22__namespace.default.forwardRef(
|
|
|
204
204
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col", fullWidth && "w-full"), children: [
|
|
205
205
|
label && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-neutral-500 mb-1", children: label }),
|
|
206
206
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
|
|
207
|
-
leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-
|
|
207
|
+
leftIcon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400", children: leftIcon }),
|
|
208
208
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
209
209
|
"input",
|
|
210
210
|
{
|
|
@@ -223,14 +223,14 @@ var Input = React22__namespace.default.forwardRef(
|
|
|
223
223
|
...props
|
|
224
224
|
}
|
|
225
225
|
),
|
|
226
|
-
rightIcon && !showSubmitButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-
|
|
226
|
+
rightIcon && !showSubmitButton && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400", children: rightIcon }),
|
|
227
227
|
showSubmitButton && /* @__PURE__ */ jsxRuntime.jsx(
|
|
228
228
|
"button",
|
|
229
229
|
{
|
|
230
230
|
type: "button",
|
|
231
231
|
onClick: onSubmit,
|
|
232
232
|
disabled: props.disabled || props.readOnly || !onSubmit,
|
|
233
|
-
className: "absolute right-3 top-1/2 -translate-y-1/2 text-
|
|
233
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-300 transition-colors hover:text-neutral-400 disabled:cursor-not-allowed disabled:opacity-50",
|
|
234
234
|
"aria-label": "Submit input",
|
|
235
235
|
children: /* @__PURE__ */ jsxRuntime.jsx(react.ArrowCircleRightIcon, { size: 20 })
|
|
236
236
|
}
|
|
@@ -257,11 +257,11 @@ var TextArea = React22__namespace.default.forwardRef(
|
|
|
257
257
|
resize = "vertical",
|
|
258
258
|
...props
|
|
259
259
|
}, ref) => {
|
|
260
|
-
const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-
|
|
260
|
+
const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
|
|
261
261
|
const variantClasses = {
|
|
262
|
-
default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
263
|
-
filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
264
|
-
outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
|
|
262
|
+
default: "bg-primary text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
263
|
+
filled: "bg-surface-4 text-neutral-500 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
264
|
+
outline: "bg-transparent text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
|
|
265
265
|
};
|
|
266
266
|
const sizeClasses = {
|
|
267
267
|
sm: "px-2 py-1 text-sm",
|
|
@@ -329,7 +329,6 @@ var Select = React22__namespace.default.forwardRef(
|
|
|
329
329
|
lg: "h-12 px-4 text-lg"
|
|
330
330
|
};
|
|
331
331
|
const widthClasses = fullWidth ? "w-full" : "";
|
|
332
|
-
const isPlaceholderSelected = Boolean(placeholder) && (value === "" || value === void 0 || value === null);
|
|
333
332
|
const handleChange = (e) => {
|
|
334
333
|
onChange?.(e.target.value);
|
|
335
334
|
};
|
|
@@ -343,7 +342,6 @@ var Select = React22__namespace.default.forwardRef(
|
|
|
343
342
|
className: cn(
|
|
344
343
|
baseClasses,
|
|
345
344
|
variantClasses[variant],
|
|
346
|
-
isPlaceholderSelected ? "text-neutral-700 dark:text-neutral-200" : "text-[#173657] dark:text-[#d7e1ef]",
|
|
347
345
|
sizeClasses[size],
|
|
348
346
|
widthClasses,
|
|
349
347
|
"pr-10",
|
|
@@ -371,7 +369,7 @@ var Select = React22__namespace.default.forwardRef(
|
|
|
371
369
|
react.CaretDownIcon,
|
|
372
370
|
{
|
|
373
371
|
size: 16,
|
|
374
|
-
className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-
|
|
372
|
+
className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-neutral-400 pointer-events-none"
|
|
375
373
|
}
|
|
376
374
|
)
|
|
377
375
|
] }),
|
|
@@ -624,13 +622,13 @@ var Dropdown = ({
|
|
|
624
622
|
className
|
|
625
623
|
),
|
|
626
624
|
children: [
|
|
627
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "text-
|
|
625
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: selectedOption ? "text-neutral-500" : "text-neutral-300", children: selectedOption ? selectedOption.label : placeholder }),
|
|
628
626
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
629
627
|
react.CaretDownIcon,
|
|
630
628
|
{
|
|
631
629
|
size: 16,
|
|
632
630
|
className: cn(
|
|
633
|
-
"text-
|
|
631
|
+
"text-neutral-400 transition-transform duration-200",
|
|
634
632
|
isOpen && "rotate-180"
|
|
635
633
|
)
|
|
636
634
|
}
|
|
@@ -1662,11 +1660,11 @@ var SearchInput = React22__namespace.default.forwardRef(
|
|
|
1662
1660
|
};
|
|
1663
1661
|
}, [enableKeyboardShortcuts, isActive, handleClear, addShortcutListener, removeShortcutListener]);
|
|
1664
1662
|
const displayPlaceholder = enableKeyboardShortcuts ? `${placeholder} (${formatKeys(getShortcutByCommand("focus_search"))})` : placeholder;
|
|
1665
|
-
const baseClasses = "transition-all duration-200 focus:outline-none
|
|
1663
|
+
const baseClasses = "transition-all duration-200 focus:outline-none placeholder:text-neutral-300 rounded-[6px]";
|
|
1666
1664
|
const variantClasses = {
|
|
1667
|
-
default: "bg-primary border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
1668
|
-
filled: "bg-surface-4 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
1669
|
-
outline: "bg-transparent border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
|
|
1665
|
+
default: "bg-primary text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
1666
|
+
filled: "bg-surface-4 text-neutral-500 border border-surface-4 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50",
|
|
1667
|
+
outline: "bg-transparent text-neutral-500 border border-surface-1 focus:border-brand-color focus:ring-1 focus:ring-brand-color/50"
|
|
1670
1668
|
};
|
|
1671
1669
|
const sizeClasses = {
|
|
1672
1670
|
sm: "h-8 text-sm leading-tight",
|
|
@@ -1698,7 +1696,7 @@ var SearchInput = React22__namespace.default.forwardRef(
|
|
|
1698
1696
|
"div",
|
|
1699
1697
|
{
|
|
1700
1698
|
className: cn(
|
|
1701
|
-
"pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 text-
|
|
1699
|
+
"pointer-events-none absolute top-1/2 z-10 -translate-y-1/2 text-neutral-400",
|
|
1702
1700
|
iconPositionClasses[size]
|
|
1703
1701
|
),
|
|
1704
1702
|
children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -1750,7 +1748,7 @@ var SearchInput = React22__namespace.default.forwardRef(
|
|
|
1750
1748
|
"button",
|
|
1751
1749
|
{
|
|
1752
1750
|
onClick: handleClear,
|
|
1753
|
-
className: "absolute right-3 top-1/2 -translate-y-1/2 text-
|
|
1751
|
+
className: "absolute right-3 top-1/2 -translate-y-1/2 text-neutral-400 hover:text-neutral-600 transition-colors",
|
|
1754
1752
|
"aria-label": "Clear search",
|
|
1755
1753
|
type: "button",
|
|
1756
1754
|
children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: iconSizeClasses[size], fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
|
|
@@ -1825,9 +1823,9 @@ var FileUpload = ({
|
|
|
1825
1823
|
lg: "h-32 px-6 text-lg"
|
|
1826
1824
|
};
|
|
1827
1825
|
const defaultContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center h-full text-center", children: [
|
|
1828
|
-
/* @__PURE__ */ jsxRuntime.jsx(react.UploadIcon, { size: 24, className: "text-neutral-
|
|
1829
|
-
/* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-sm text-neutral-
|
|
1830
|
-
accept && /* @__PURE__ */ jsxRuntime.jsxs(Typography_default, { variant: "p", className: "text-xs text-neutral-
|
|
1826
|
+
/* @__PURE__ */ jsxRuntime.jsx(react.UploadIcon, { size: 24, className: "text-neutral-400 mb-2" }),
|
|
1827
|
+
/* @__PURE__ */ jsxRuntime.jsx(Typography_default, { variant: "p", className: "text-sm text-neutral-400", children: dragAndDrop ? "Drag and drop files here" : "Click to upload files" }),
|
|
1828
|
+
accept && /* @__PURE__ */ jsxRuntime.jsxs(Typography_default, { variant: "p", className: "text-xs text-neutral-300 mt-1", children: [
|
|
1831
1829
|
"Accepted: ",
|
|
1832
1830
|
accept
|
|
1833
1831
|
] })
|
|
@@ -1989,7 +1987,7 @@ var Pagination = ({
|
|
|
1989
1987
|
className: cn(
|
|
1990
1988
|
"flex items-center justify-center",
|
|
1991
1989
|
sizeClasses[size],
|
|
1992
|
-
"text-neutral-400
|
|
1990
|
+
"text-neutral-400"
|
|
1993
1991
|
),
|
|
1994
1992
|
children: "..."
|
|
1995
1993
|
},
|
|
@@ -2005,8 +2003,8 @@ var Pagination = ({
|
|
|
2005
2003
|
"flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
|
|
2006
2004
|
sizeClasses[size],
|
|
2007
2005
|
variantClasses[variant],
|
|
2008
|
-
isActive ? activeClasses[variant] : "text-neutral-
|
|
2009
|
-
!isActive && "hover:text-neutral-
|
|
2006
|
+
isActive ? activeClasses[variant] : "text-neutral-400",
|
|
2007
|
+
!isActive && "hover:text-neutral-500"
|
|
2010
2008
|
),
|
|
2011
2009
|
children: page
|
|
2012
2010
|
},
|
|
@@ -2022,7 +2020,7 @@ var Pagination = ({
|
|
|
2022
2020
|
"flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
|
|
2023
2021
|
sizeClasses[size],
|
|
2024
2022
|
variantClasses[variant],
|
|
2025
|
-
"text-neutral-
|
|
2023
|
+
"text-neutral-400 hover:text-neutral-500"
|
|
2026
2024
|
),
|
|
2027
2025
|
children: "First"
|
|
2028
2026
|
}
|
|
@@ -2035,7 +2033,7 @@ var Pagination = ({
|
|
|
2035
2033
|
"flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
|
|
2036
2034
|
sizeClasses[size],
|
|
2037
2035
|
variantClasses[variant],
|
|
2038
|
-
"text-neutral-
|
|
2036
|
+
"text-neutral-400 hover:text-neutral-500"
|
|
2039
2037
|
),
|
|
2040
2038
|
children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretLeftIcon, { size: 16 })
|
|
2041
2039
|
}
|
|
@@ -2049,7 +2047,7 @@ var Pagination = ({
|
|
|
2049
2047
|
"flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
|
|
2050
2048
|
sizeClasses[size],
|
|
2051
2049
|
variantClasses[variant],
|
|
2052
|
-
"text-neutral-
|
|
2050
|
+
"text-neutral-400 hover:text-neutral-500"
|
|
2053
2051
|
),
|
|
2054
2052
|
children: /* @__PURE__ */ jsxRuntime.jsx(react.CaretRightIcon, { size: 16 })
|
|
2055
2053
|
}
|
|
@@ -2062,7 +2060,7 @@ var Pagination = ({
|
|
|
2062
2060
|
"flex items-center justify-center font-medium transition-all duration-200 rounded-[6px]",
|
|
2063
2061
|
sizeClasses[size],
|
|
2064
2062
|
variantClasses[variant],
|
|
2065
|
-
"text-neutral-
|
|
2063
|
+
"text-neutral-400 hover:text-neutral-500"
|
|
2066
2064
|
),
|
|
2067
2065
|
children: "Last"
|
|
2068
2066
|
}
|
|
@@ -3133,13 +3131,13 @@ var Table = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @
|
|
|
3133
3131
|
}
|
|
3134
3132
|
) }));
|
|
3135
3133
|
Table.displayName = "Table";
|
|
3136
|
-
var TableHeader = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-
|
|
3134
|
+
var TableHeader = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("[&_tr]:border-b text-neutral-400 bg-surface-2", className), ...props }));
|
|
3137
3135
|
TableHeader.displayName = "TableHeader";
|
|
3138
3136
|
var TableBody = React22__namespace.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3139
3137
|
"tbody",
|
|
3140
3138
|
{
|
|
3141
3139
|
ref,
|
|
3142
|
-
className: cn("[&_tr:last-child]:border-0 text-neutral-
|
|
3140
|
+
className: cn("[&_tr:last-child]:border-0 text-neutral-300", className),
|
|
3143
3141
|
...props
|
|
3144
3142
|
}
|
|
3145
3143
|
));
|