@refinn/core-ui 0.1.17 → 0.1.18
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 +46 -47
- package/dist/index.d.mts +9 -6
- package/dist/index.d.ts +9 -6
- package/dist/index.js +47 -48
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -376,15 +376,15 @@ var import_react4 = require("react");
|
|
|
376
376
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
377
377
|
var sizeClasses2 = {
|
|
378
378
|
xs: "h-24 w-24",
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
379
|
+
sm: "h-32 w-32",
|
|
380
|
+
md: "h-40 w-40",
|
|
381
|
+
lg: "h-48 w-48"
|
|
382
382
|
};
|
|
383
383
|
var iconSizeClasses = {
|
|
384
384
|
xs: "h-16 w-16",
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
385
|
+
sm: "h-20 w-20",
|
|
386
|
+
md: "h-24 w-24",
|
|
387
|
+
lg: "h-24 w-24"
|
|
388
388
|
};
|
|
389
389
|
var surfaceBackgroundClasses = {
|
|
390
390
|
default: {
|
|
@@ -424,7 +424,7 @@ var IconButton = (0, import_react4.forwardRef)(
|
|
|
424
424
|
(_a, ref) => {
|
|
425
425
|
var _b = _a, {
|
|
426
426
|
icon,
|
|
427
|
-
size = "
|
|
427
|
+
size = "sm",
|
|
428
428
|
surface = "default",
|
|
429
429
|
transparent = false,
|
|
430
430
|
danger = false,
|
|
@@ -581,7 +581,7 @@ var AlertBanner = (0, import_react5.forwardRef)(
|
|
|
581
581
|
onClose && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
582
582
|
IconButton,
|
|
583
583
|
{
|
|
584
|
-
size: "
|
|
584
|
+
size: "sm",
|
|
585
585
|
surface: closeButtonSurface,
|
|
586
586
|
transparent: true,
|
|
587
587
|
onClick: onClose,
|
|
@@ -911,21 +911,21 @@ function IndeterminateIcon({ className }) {
|
|
|
911
911
|
);
|
|
912
912
|
}
|
|
913
913
|
var boxSizeClasses = {
|
|
914
|
-
|
|
915
|
-
|
|
914
|
+
sm: "h-20 w-20",
|
|
915
|
+
md: "h-24 w-24"
|
|
916
916
|
};
|
|
917
917
|
var labelTextClasses = {
|
|
918
|
-
|
|
919
|
-
|
|
918
|
+
sm: "text-label-medium",
|
|
919
|
+
md: "text-label-large"
|
|
920
920
|
};
|
|
921
921
|
var descriptionPaddingClasses = {
|
|
922
|
-
|
|
923
|
-
|
|
922
|
+
sm: "pl-24",
|
|
923
|
+
md: "pl-28"
|
|
924
924
|
};
|
|
925
925
|
var Checkbox = (0, import_react9.forwardRef)(
|
|
926
926
|
(_a, ref) => {
|
|
927
927
|
var _b = _a, {
|
|
928
|
-
size = "
|
|
928
|
+
size = "sm",
|
|
929
929
|
label,
|
|
930
930
|
description,
|
|
931
931
|
error = false,
|
|
@@ -1206,7 +1206,7 @@ var TextField = (0, import_react11.forwardRef)(
|
|
|
1206
1206
|
]);
|
|
1207
1207
|
const [isFocused, setIsFocused] = (0, import_react11.useState)(false);
|
|
1208
1208
|
const isActive = isFocused && !!value;
|
|
1209
|
-
const iconButtonSize = size === "lg" ? "
|
|
1209
|
+
const iconButtonSize = size === "lg" ? "md" : "sm";
|
|
1210
1210
|
const inputRef = (0, import_react11.useRef)(null);
|
|
1211
1211
|
(0, import_react11.useImperativeHandle)(ref, () => inputRef.current);
|
|
1212
1212
|
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
|
|
@@ -1603,7 +1603,7 @@ var Dialog = (0, import_react13.forwardRef)(
|
|
|
1603
1603
|
IconButton,
|
|
1604
1604
|
{
|
|
1605
1605
|
icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-24 w-24" }),
|
|
1606
|
-
size: "
|
|
1606
|
+
size: "md",
|
|
1607
1607
|
surface: "dark",
|
|
1608
1608
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1609
1609
|
onClick: handleClose
|
|
@@ -1624,7 +1624,7 @@ var Dialog = (0, import_react13.forwardRef)(
|
|
|
1624
1624
|
IconButton,
|
|
1625
1625
|
{
|
|
1626
1626
|
icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-20 w-20" }),
|
|
1627
|
-
size: "
|
|
1627
|
+
size: "sm",
|
|
1628
1628
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1629
1629
|
onClick: handleClose,
|
|
1630
1630
|
className: "lg:hidden!"
|
|
@@ -1634,7 +1634,7 @@ var Dialog = (0, import_react13.forwardRef)(
|
|
|
1634
1634
|
IconButton,
|
|
1635
1635
|
{
|
|
1636
1636
|
icon: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-24 w-24" }),
|
|
1637
|
-
size: "
|
|
1637
|
+
size: "md",
|
|
1638
1638
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1639
1639
|
onClick: handleClose,
|
|
1640
1640
|
className: "hidden! lg:inline-flex!"
|
|
@@ -1728,6 +1728,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1728
1728
|
dismiss,
|
|
1729
1729
|
secondary,
|
|
1730
1730
|
confirm,
|
|
1731
|
+
noPadding = false,
|
|
1731
1732
|
className = ""
|
|
1732
1733
|
} = _b, rest = __objRest(_b, [
|
|
1733
1734
|
"open",
|
|
@@ -1743,6 +1744,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1743
1744
|
"dismiss",
|
|
1744
1745
|
"secondary",
|
|
1745
1746
|
"confirm",
|
|
1747
|
+
"noPadding",
|
|
1746
1748
|
"className"
|
|
1747
1749
|
]);
|
|
1748
1750
|
const { mounted, animate } = useMountTransition2(open);
|
|
@@ -1794,12 +1796,12 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1794
1796
|
onMouseDown: (e) => e.stopPropagation()
|
|
1795
1797
|
}, rest), {
|
|
1796
1798
|
children: [
|
|
1797
|
-
showHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1799
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex flex-col w-full items-center border-b border-border-subtle bg-dialog-background-primary", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
|
|
1798
1800
|
"div",
|
|
1799
1801
|
{
|
|
1800
1802
|
className: [
|
|
1801
|
-
"flex shrink-0 items-center gap-8
|
|
1802
|
-
fullScreen ? "lg:gap-16 lg:px-
|
|
1803
|
+
"flex shrink-0 items-center gap-8 px-16 pb-12 pt-16 w-full",
|
|
1804
|
+
fullScreen ? "lg:gap-16 lg:px-0 lg:py-24 lg:max-w-1216" : "lg:px-24 lg:pb-16 lg:pt-20"
|
|
1803
1805
|
].join(" "),
|
|
1804
1806
|
children: [
|
|
1805
1807
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
|
|
@@ -1811,7 +1813,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1811
1813
|
IconButton,
|
|
1812
1814
|
{
|
|
1813
1815
|
icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon3, { className: "h-20 w-20" }),
|
|
1814
|
-
size: "
|
|
1816
|
+
size: "sm",
|
|
1815
1817
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1816
1818
|
onClick: handleClose,
|
|
1817
1819
|
className: "lg:hidden!"
|
|
@@ -1821,7 +1823,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1821
1823
|
IconButton,
|
|
1822
1824
|
{
|
|
1823
1825
|
icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CloseIcon3, { className: "h-24 w-24" }),
|
|
1824
|
-
size: fullScreen ? "
|
|
1826
|
+
size: fullScreen ? "lg" : "md",
|
|
1825
1827
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1826
1828
|
onClick: handleClose,
|
|
1827
1829
|
className: "hidden! lg:inline-flex!"
|
|
@@ -1830,24 +1832,24 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1830
1832
|
] })
|
|
1831
1833
|
]
|
|
1832
1834
|
}
|
|
1833
|
-
),
|
|
1835
|
+
) }),
|
|
1834
1836
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1835
1837
|
"div",
|
|
1836
1838
|
{
|
|
1837
1839
|
className: [
|
|
1838
|
-
"flex-1 overflow-y-auto
|
|
1839
|
-
|
|
1840
|
-
|
|
1840
|
+
"flex-1 overflow-y-auto text-body-regular text-dialog-text-primary",
|
|
1841
|
+
!noPadding && "p-16",
|
|
1842
|
+
background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary"
|
|
1841
1843
|
].join(" "),
|
|
1842
1844
|
children
|
|
1843
1845
|
}
|
|
1844
1846
|
),
|
|
1845
|
-
showFooter && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1847
|
+
showFooter && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: `flex shrink-0 w-full flex-col items-center border-t border-border-subtle bg-dialog-background-primary`, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
|
|
1846
1848
|
"div",
|
|
1847
1849
|
{
|
|
1848
1850
|
className: [
|
|
1849
|
-
"flex shrink-0 flex-col gap-8
|
|
1850
|
-
fullScreen ? "lg:gap-16 lg:px-
|
|
1851
|
+
"flex shrink-0 flex-col gap-8 px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
|
|
1852
|
+
fullScreen ? "lg:gap-16 lg:px-0 lg:max-w-1216 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
|
|
1851
1853
|
].join(" "),
|
|
1852
1854
|
children: allActions ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
|
|
1853
1855
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
|
|
@@ -1861,7 +1863,7 @@ var Drawer = (0, import_react14.forwardRef)(
|
|
|
1861
1863
|
/* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
|
|
1862
1864
|
] })
|
|
1863
1865
|
}
|
|
1864
|
-
)
|
|
1866
|
+
) })
|
|
1865
1867
|
]
|
|
1866
1868
|
})
|
|
1867
1869
|
)
|
|
@@ -1969,7 +1971,7 @@ var Dropdown = (0, import_react15.forwardRef)(
|
|
|
1969
1971
|
"className"
|
|
1970
1972
|
]);
|
|
1971
1973
|
const isCombobox = variant === "combobox";
|
|
1972
|
-
const iconButtonSize = size === "lg" ? "
|
|
1974
|
+
const iconButtonSize = size === "lg" ? "md" : "sm";
|
|
1973
1975
|
const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
|
|
1974
1976
|
const [isFocused, setIsFocused] = (0, import_react15.useState)(false);
|
|
1975
1977
|
const [query, setQuery] = (0, import_react15.useState)(value.label || "");
|
|
@@ -2386,17 +2388,11 @@ var linkVariantClasses = {
|
|
|
2386
2388
|
lg: "text-link-large gap-4"
|
|
2387
2389
|
};
|
|
2388
2390
|
var iconVariantClasses = {
|
|
2389
|
-
xs: "w-20 h-20",
|
|
2390
|
-
sm: "w-20 h-20",
|
|
2391
|
-
md: "w-20 h-20",
|
|
2392
|
-
lg: "w-24 h-24"
|
|
2391
|
+
xs: "w-20 h-20 text-[20px]",
|
|
2392
|
+
sm: "w-20 h-20 text-[20px]",
|
|
2393
|
+
md: "w-20 h-20 text-[20px]",
|
|
2394
|
+
lg: "w-24 h-24 text-[24px]"
|
|
2393
2395
|
};
|
|
2394
|
-
function SuccessIcon3({ className }) {
|
|
2395
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
2396
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
2397
|
-
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
2398
|
-
] });
|
|
2399
|
-
}
|
|
2400
2396
|
var Link = (0, import_react18.forwardRef)(
|
|
2401
2397
|
(_a, ref) => {
|
|
2402
2398
|
var _b = _a, {
|
|
@@ -2405,7 +2401,7 @@ var Link = (0, import_react18.forwardRef)(
|
|
|
2405
2401
|
linkStyle = "brand",
|
|
2406
2402
|
text,
|
|
2407
2403
|
href,
|
|
2408
|
-
icon
|
|
2404
|
+
icon,
|
|
2409
2405
|
className = "",
|
|
2410
2406
|
children
|
|
2411
2407
|
} = _b, rest = __objRest(_b, [
|
|
@@ -2418,6 +2414,7 @@ var Link = (0, import_react18.forwardRef)(
|
|
|
2418
2414
|
"className",
|
|
2419
2415
|
"children"
|
|
2420
2416
|
]);
|
|
2417
|
+
var _a2;
|
|
2421
2418
|
const styleClass = linkStyleClasses[linkStyle];
|
|
2422
2419
|
const variantClass = linkVariantClasses[variant];
|
|
2423
2420
|
const iconClass = iconVariantClasses[variant];
|
|
@@ -2428,9 +2425,11 @@ var Link = (0, import_react18.forwardRef)(
|
|
|
2428
2425
|
variantClass,
|
|
2429
2426
|
className
|
|
2430
2427
|
].filter(Boolean).join(" ");
|
|
2431
|
-
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("
|
|
2428
|
+
return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
|
|
2432
2429
|
/* @__PURE__ */ (0, import_jsx_runtime18.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", children: text }),
|
|
2433
|
-
icon &&
|
|
2430
|
+
icon && (0, import_react18.cloneElement)(icon, {
|
|
2431
|
+
className: `${(_a2 = icon.props.className) != null ? _a2 : ""} ${iconClass}`
|
|
2432
|
+
})
|
|
2434
2433
|
] }));
|
|
2435
2434
|
}
|
|
2436
2435
|
);
|
|
@@ -2963,7 +2962,7 @@ var TextArea = (0, import_react23.forwardRef)(
|
|
|
2963
2962
|
pending ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loading, { size: "sm", className: "shrink-0 absolute right-12 top-12" }) : clearable && isFocused && value ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
|
|
2964
2963
|
IconButton,
|
|
2965
2964
|
{
|
|
2966
|
-
size: "
|
|
2965
|
+
size: "sm",
|
|
2967
2966
|
transparent: true,
|
|
2968
2967
|
"aria-label": "\u0E25\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21",
|
|
2969
2968
|
className: "absolute right-6 top-6",
|
package/dist/index.d.mts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, ReactElement, TextareaHTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
interface AccordionItemData {
|
|
5
5
|
id?: string;
|
|
@@ -80,7 +80,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
80
80
|
}
|
|
81
81
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
82
82
|
|
|
83
|
-
type CheckboxSize = "
|
|
83
|
+
type CheckboxSize = "sm" | "md";
|
|
84
84
|
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
85
85
|
size?: CheckboxSize;
|
|
86
86
|
label?: ReactNode;
|
|
@@ -182,6 +182,7 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
|
182
182
|
dismiss?: DrawerActionProps;
|
|
183
183
|
secondary?: DrawerActionProps;
|
|
184
184
|
confirm?: DrawerActionProps;
|
|
185
|
+
noPadding?: boolean;
|
|
185
186
|
}
|
|
186
187
|
declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
|
|
187
188
|
|
|
@@ -233,7 +234,7 @@ interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
|
|
|
233
234
|
}
|
|
234
235
|
declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
|
|
235
236
|
|
|
236
|
-
type IconButtonSize = 'xs' | '
|
|
237
|
+
type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
237
238
|
type IconButtonSurface = 'default' | 'dark' | 'light';
|
|
238
239
|
interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
|
|
239
240
|
icon: ReactNode;
|
|
@@ -249,15 +250,17 @@ declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & reac
|
|
|
249
250
|
|
|
250
251
|
type LinkVariant = 'xs' | 'sm' | 'md' | 'lg';
|
|
251
252
|
type LinkStyle = 'brand' | 'white' | 'black' | 'brandLooped' | 'whiteLooped' | 'blackLooped';
|
|
252
|
-
interface LinkProps extends Omit<HTMLAttributes<
|
|
253
|
+
interface LinkProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'title'> {
|
|
253
254
|
variant?: LinkVariant;
|
|
254
255
|
isInline?: boolean;
|
|
255
256
|
linkStyle?: LinkStyle;
|
|
256
257
|
text?: ReactNode;
|
|
257
258
|
href?: string;
|
|
258
|
-
icon?:
|
|
259
|
+
icon?: ReactElement<{
|
|
260
|
+
className?: string;
|
|
261
|
+
}>;
|
|
259
262
|
}
|
|
260
|
-
declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<
|
|
263
|
+
declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLSpanElement>>;
|
|
261
264
|
|
|
262
265
|
type LoadingSize = "sm" | "lg";
|
|
263
266
|
interface LoadingProps extends HTMLAttributes<HTMLDivElement> {
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
|
-
import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, TextareaHTMLAttributes } from 'react';
|
|
2
|
+
import react__default, { HTMLAttributes, ReactNode, ButtonHTMLAttributes, InputHTMLAttributes, ReactElement, TextareaHTMLAttributes } from 'react';
|
|
3
3
|
|
|
4
4
|
interface AccordionItemData {
|
|
5
5
|
id?: string;
|
|
@@ -80,7 +80,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
|
80
80
|
}
|
|
81
81
|
declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
|
|
82
82
|
|
|
83
|
-
type CheckboxSize = "
|
|
83
|
+
type CheckboxSize = "sm" | "md";
|
|
84
84
|
interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
85
85
|
size?: CheckboxSize;
|
|
86
86
|
label?: ReactNode;
|
|
@@ -182,6 +182,7 @@ interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
|
|
|
182
182
|
dismiss?: DrawerActionProps;
|
|
183
183
|
secondary?: DrawerActionProps;
|
|
184
184
|
confirm?: DrawerActionProps;
|
|
185
|
+
noPadding?: boolean;
|
|
185
186
|
}
|
|
186
187
|
declare const Drawer: react.ForwardRefExoticComponent<DrawerProps & react.RefAttributes<HTMLDivElement>>;
|
|
187
188
|
|
|
@@ -233,7 +234,7 @@ interface IconProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
|
|
|
233
234
|
}
|
|
234
235
|
declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLSpanElement>>;
|
|
235
236
|
|
|
236
|
-
type IconButtonSize = 'xs' | '
|
|
237
|
+
type IconButtonSize = 'xs' | 'sm' | 'md' | 'lg';
|
|
237
238
|
type IconButtonSurface = 'default' | 'dark' | 'light';
|
|
238
239
|
interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
|
|
239
240
|
icon: ReactNode;
|
|
@@ -249,15 +250,17 @@ declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & reac
|
|
|
249
250
|
|
|
250
251
|
type LinkVariant = 'xs' | 'sm' | 'md' | 'lg';
|
|
251
252
|
type LinkStyle = 'brand' | 'white' | 'black' | 'brandLooped' | 'whiteLooped' | 'blackLooped';
|
|
252
|
-
interface LinkProps extends Omit<HTMLAttributes<
|
|
253
|
+
interface LinkProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'title'> {
|
|
253
254
|
variant?: LinkVariant;
|
|
254
255
|
isInline?: boolean;
|
|
255
256
|
linkStyle?: LinkStyle;
|
|
256
257
|
text?: ReactNode;
|
|
257
258
|
href?: string;
|
|
258
|
-
icon?:
|
|
259
|
+
icon?: ReactElement<{
|
|
260
|
+
className?: string;
|
|
261
|
+
}>;
|
|
259
262
|
}
|
|
260
|
-
declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<
|
|
263
|
+
declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLSpanElement>>;
|
|
261
264
|
|
|
262
265
|
type LoadingSize = "sm" | "lg";
|
|
263
266
|
interface LoadingProps extends HTMLAttributes<HTMLDivElement> {
|
package/dist/index.js
CHANGED
|
@@ -333,15 +333,15 @@ import { forwardRef as forwardRef4 } from "react";
|
|
|
333
333
|
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
334
334
|
var sizeClasses2 = {
|
|
335
335
|
xs: "h-24 w-24",
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
336
|
+
sm: "h-32 w-32",
|
|
337
|
+
md: "h-40 w-40",
|
|
338
|
+
lg: "h-48 w-48"
|
|
339
339
|
};
|
|
340
340
|
var iconSizeClasses = {
|
|
341
341
|
xs: "h-16 w-16",
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
342
|
+
sm: "h-20 w-20",
|
|
343
|
+
md: "h-24 w-24",
|
|
344
|
+
lg: "h-24 w-24"
|
|
345
345
|
};
|
|
346
346
|
var surfaceBackgroundClasses = {
|
|
347
347
|
default: {
|
|
@@ -381,7 +381,7 @@ var IconButton = forwardRef4(
|
|
|
381
381
|
(_a, ref) => {
|
|
382
382
|
var _b = _a, {
|
|
383
383
|
icon,
|
|
384
|
-
size = "
|
|
384
|
+
size = "sm",
|
|
385
385
|
surface = "default",
|
|
386
386
|
transparent = false,
|
|
387
387
|
danger = false,
|
|
@@ -538,7 +538,7 @@ var AlertBanner = forwardRef5(
|
|
|
538
538
|
onClose && /* @__PURE__ */ jsx5(
|
|
539
539
|
IconButton,
|
|
540
540
|
{
|
|
541
|
-
size: "
|
|
541
|
+
size: "sm",
|
|
542
542
|
surface: closeButtonSurface,
|
|
543
543
|
transparent: true,
|
|
544
544
|
onClick: onClose,
|
|
@@ -874,21 +874,21 @@ function IndeterminateIcon({ className }) {
|
|
|
874
874
|
);
|
|
875
875
|
}
|
|
876
876
|
var boxSizeClasses = {
|
|
877
|
-
|
|
878
|
-
|
|
877
|
+
sm: "h-20 w-20",
|
|
878
|
+
md: "h-24 w-24"
|
|
879
879
|
};
|
|
880
880
|
var labelTextClasses = {
|
|
881
|
-
|
|
882
|
-
|
|
881
|
+
sm: "text-label-medium",
|
|
882
|
+
md: "text-label-large"
|
|
883
883
|
};
|
|
884
884
|
var descriptionPaddingClasses = {
|
|
885
|
-
|
|
886
|
-
|
|
885
|
+
sm: "pl-24",
|
|
886
|
+
md: "pl-28"
|
|
887
887
|
};
|
|
888
888
|
var Checkbox = forwardRef9(
|
|
889
889
|
(_a, ref) => {
|
|
890
890
|
var _b = _a, {
|
|
891
|
-
size = "
|
|
891
|
+
size = "sm",
|
|
892
892
|
label,
|
|
893
893
|
description,
|
|
894
894
|
error = false,
|
|
@@ -1184,7 +1184,7 @@ var TextField = forwardRef11(
|
|
|
1184
1184
|
]);
|
|
1185
1185
|
const [isFocused, setIsFocused] = useState4(false);
|
|
1186
1186
|
const isActive = isFocused && !!value;
|
|
1187
|
-
const iconButtonSize = size === "lg" ? "
|
|
1187
|
+
const iconButtonSize = size === "lg" ? "md" : "sm";
|
|
1188
1188
|
const inputRef = useRef(null);
|
|
1189
1189
|
useImperativeHandle(ref, () => inputRef.current);
|
|
1190
1190
|
return /* @__PURE__ */ jsxs10("div", { className: "w-full flex flex-col gap-4 font-sans", children: [
|
|
@@ -1585,7 +1585,7 @@ var Dialog = forwardRef13(
|
|
|
1585
1585
|
IconButton,
|
|
1586
1586
|
{
|
|
1587
1587
|
icon: /* @__PURE__ */ jsx13(CloseIcon2, { className: "h-24 w-24" }),
|
|
1588
|
-
size: "
|
|
1588
|
+
size: "md",
|
|
1589
1589
|
surface: "dark",
|
|
1590
1590
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1591
1591
|
onClick: handleClose
|
|
@@ -1606,7 +1606,7 @@ var Dialog = forwardRef13(
|
|
|
1606
1606
|
IconButton,
|
|
1607
1607
|
{
|
|
1608
1608
|
icon: /* @__PURE__ */ jsx13(CloseIcon2, { className: "h-20 w-20" }),
|
|
1609
|
-
size: "
|
|
1609
|
+
size: "sm",
|
|
1610
1610
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1611
1611
|
onClick: handleClose,
|
|
1612
1612
|
className: "lg:hidden!"
|
|
@@ -1616,7 +1616,7 @@ var Dialog = forwardRef13(
|
|
|
1616
1616
|
IconButton,
|
|
1617
1617
|
{
|
|
1618
1618
|
icon: /* @__PURE__ */ jsx13(CloseIcon2, { className: "h-24 w-24" }),
|
|
1619
|
-
size: "
|
|
1619
|
+
size: "md",
|
|
1620
1620
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1621
1621
|
onClick: handleClose,
|
|
1622
1622
|
className: "hidden! lg:inline-flex!"
|
|
@@ -1714,6 +1714,7 @@ var Drawer = forwardRef14(
|
|
|
1714
1714
|
dismiss,
|
|
1715
1715
|
secondary,
|
|
1716
1716
|
confirm,
|
|
1717
|
+
noPadding = false,
|
|
1717
1718
|
className = ""
|
|
1718
1719
|
} = _b, rest = __objRest(_b, [
|
|
1719
1720
|
"open",
|
|
@@ -1729,6 +1730,7 @@ var Drawer = forwardRef14(
|
|
|
1729
1730
|
"dismiss",
|
|
1730
1731
|
"secondary",
|
|
1731
1732
|
"confirm",
|
|
1733
|
+
"noPadding",
|
|
1732
1734
|
"className"
|
|
1733
1735
|
]);
|
|
1734
1736
|
const { mounted, animate } = useMountTransition2(open);
|
|
@@ -1780,12 +1782,12 @@ var Drawer = forwardRef14(
|
|
|
1780
1782
|
onMouseDown: (e) => e.stopPropagation()
|
|
1781
1783
|
}, rest), {
|
|
1782
1784
|
children: [
|
|
1783
|
-
showHeader && /* @__PURE__ */ jsxs12(
|
|
1785
|
+
showHeader && /* @__PURE__ */ jsx14("div", { className: "flex flex-col w-full items-center border-b border-border-subtle bg-dialog-background-primary", children: /* @__PURE__ */ jsxs12(
|
|
1784
1786
|
"div",
|
|
1785
1787
|
{
|
|
1786
1788
|
className: [
|
|
1787
|
-
"flex shrink-0 items-center gap-8
|
|
1788
|
-
fullScreen ? "lg:gap-16 lg:px-
|
|
1789
|
+
"flex shrink-0 items-center gap-8 px-16 pb-12 pt-16 w-full",
|
|
1790
|
+
fullScreen ? "lg:gap-16 lg:px-0 lg:py-24 lg:max-w-1216" : "lg:px-24 lg:pb-16 lg:pt-20"
|
|
1789
1791
|
].join(" "),
|
|
1790
1792
|
children: [
|
|
1791
1793
|
/* @__PURE__ */ jsxs12("div", { className: "flex min-w-0 flex-1 flex-col gap-2", children: [
|
|
@@ -1797,7 +1799,7 @@ var Drawer = forwardRef14(
|
|
|
1797
1799
|
IconButton,
|
|
1798
1800
|
{
|
|
1799
1801
|
icon: /* @__PURE__ */ jsx14(CloseIcon3, { className: "h-20 w-20" }),
|
|
1800
|
-
size: "
|
|
1802
|
+
size: "sm",
|
|
1801
1803
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1802
1804
|
onClick: handleClose,
|
|
1803
1805
|
className: "lg:hidden!"
|
|
@@ -1807,7 +1809,7 @@ var Drawer = forwardRef14(
|
|
|
1807
1809
|
IconButton,
|
|
1808
1810
|
{
|
|
1809
1811
|
icon: /* @__PURE__ */ jsx14(CloseIcon3, { className: "h-24 w-24" }),
|
|
1810
|
-
size: fullScreen ? "
|
|
1812
|
+
size: fullScreen ? "lg" : "md",
|
|
1811
1813
|
"aria-label": "\u0E1B\u0E34\u0E14",
|
|
1812
1814
|
onClick: handleClose,
|
|
1813
1815
|
className: "hidden! lg:inline-flex!"
|
|
@@ -1816,24 +1818,24 @@ var Drawer = forwardRef14(
|
|
|
1816
1818
|
] })
|
|
1817
1819
|
]
|
|
1818
1820
|
}
|
|
1819
|
-
),
|
|
1821
|
+
) }),
|
|
1820
1822
|
/* @__PURE__ */ jsx14(
|
|
1821
1823
|
"div",
|
|
1822
1824
|
{
|
|
1823
1825
|
className: [
|
|
1824
|
-
"flex-1 overflow-y-auto
|
|
1825
|
-
|
|
1826
|
-
|
|
1826
|
+
"flex-1 overflow-y-auto text-body-regular text-dialog-text-primary",
|
|
1827
|
+
!noPadding && "p-16",
|
|
1828
|
+
background === "secondary" ? "bg-drawer-background-secondary" : "bg-dialog-background-primary"
|
|
1827
1829
|
].join(" "),
|
|
1828
1830
|
children
|
|
1829
1831
|
}
|
|
1830
1832
|
),
|
|
1831
|
-
showFooter && /* @__PURE__ */ jsx14(
|
|
1833
|
+
showFooter && /* @__PURE__ */ jsx14("div", { className: `flex shrink-0 w-full flex-col items-center border-t border-border-subtle bg-dialog-background-primary`, children: /* @__PURE__ */ jsx14(
|
|
1832
1834
|
"div",
|
|
1833
1835
|
{
|
|
1834
1836
|
className: [
|
|
1835
|
-
"flex shrink-0 flex-col gap-8
|
|
1836
|
-
fullScreen ? "lg:gap-16 lg:px-
|
|
1837
|
+
"flex shrink-0 flex-col gap-8 px-16 pb-16 pt-12 lg:flex-row lg:items-center lg:justify-end",
|
|
1838
|
+
fullScreen ? "lg:gap-16 lg:px-0 lg:max-w-1216 lg:py-24" : "lg:px-24 lg:pb-24 lg:pt-16"
|
|
1837
1839
|
].join(" "),
|
|
1838
1840
|
children: allActions ? /* @__PURE__ */ jsxs12(Fragment3, { children: [
|
|
1839
1841
|
/* @__PURE__ */ jsx14(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" }),
|
|
@@ -1847,7 +1849,7 @@ var Drawer = forwardRef14(
|
|
|
1847
1849
|
/* @__PURE__ */ jsx14(DrawerAction, { action: dismiss, variant: "tertiary", orderClass: "order-3 lg:order-1" })
|
|
1848
1850
|
] })
|
|
1849
1851
|
}
|
|
1850
|
-
)
|
|
1852
|
+
) })
|
|
1851
1853
|
]
|
|
1852
1854
|
})
|
|
1853
1855
|
)
|
|
@@ -1961,7 +1963,7 @@ var Dropdown = forwardRef15(
|
|
|
1961
1963
|
"className"
|
|
1962
1964
|
]);
|
|
1963
1965
|
const isCombobox = variant === "combobox";
|
|
1964
|
-
const iconButtonSize = size === "lg" ? "
|
|
1966
|
+
const iconButtonSize = size === "lg" ? "md" : "sm";
|
|
1965
1967
|
const [isOpen, setIsOpen] = useState8(false);
|
|
1966
1968
|
const [isFocused, setIsFocused] = useState8(false);
|
|
1967
1969
|
const [query, setQuery] = useState8(value.label || "");
|
|
@@ -2361,7 +2363,7 @@ var Icon = forwardRef17(
|
|
|
2361
2363
|
Icon.displayName = "Icon";
|
|
2362
2364
|
|
|
2363
2365
|
// src/components/Link/Link.tsx
|
|
2364
|
-
import { forwardRef as forwardRef18 } from "react";
|
|
2366
|
+
import { forwardRef as forwardRef18, cloneElement } from "react";
|
|
2365
2367
|
import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
2366
2368
|
var linkStyleClasses = {
|
|
2367
2369
|
brand: "font-sans text-link-text-enabled",
|
|
@@ -2378,17 +2380,11 @@ var linkVariantClasses = {
|
|
|
2378
2380
|
lg: "text-link-large gap-4"
|
|
2379
2381
|
};
|
|
2380
2382
|
var iconVariantClasses = {
|
|
2381
|
-
xs: "w-20 h-20",
|
|
2382
|
-
sm: "w-20 h-20",
|
|
2383
|
-
md: "w-20 h-20",
|
|
2384
|
-
lg: "w-24 h-24"
|
|
2383
|
+
xs: "w-20 h-20 text-[20px]",
|
|
2384
|
+
sm: "w-20 h-20 text-[20px]",
|
|
2385
|
+
md: "w-20 h-20 text-[20px]",
|
|
2386
|
+
lg: "w-24 h-24 text-[24px]"
|
|
2385
2387
|
};
|
|
2386
|
-
function SuccessIcon3({ className }) {
|
|
2387
|
-
return /* @__PURE__ */ jsxs15("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
|
|
2388
|
-
/* @__PURE__ */ jsx18("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
|
|
2389
|
-
/* @__PURE__ */ jsx18("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
2390
|
-
] });
|
|
2391
|
-
}
|
|
2392
2388
|
var Link = forwardRef18(
|
|
2393
2389
|
(_a, ref) => {
|
|
2394
2390
|
var _b = _a, {
|
|
@@ -2397,7 +2393,7 @@ var Link = forwardRef18(
|
|
|
2397
2393
|
linkStyle = "brand",
|
|
2398
2394
|
text,
|
|
2399
2395
|
href,
|
|
2400
|
-
icon
|
|
2396
|
+
icon,
|
|
2401
2397
|
className = "",
|
|
2402
2398
|
children
|
|
2403
2399
|
} = _b, rest = __objRest(_b, [
|
|
@@ -2410,6 +2406,7 @@ var Link = forwardRef18(
|
|
|
2410
2406
|
"className",
|
|
2411
2407
|
"children"
|
|
2412
2408
|
]);
|
|
2409
|
+
var _a2;
|
|
2413
2410
|
const styleClass = linkStyleClasses[linkStyle];
|
|
2414
2411
|
const variantClass = linkVariantClasses[variant];
|
|
2415
2412
|
const iconClass = iconVariantClasses[variant];
|
|
@@ -2420,9 +2417,11 @@ var Link = forwardRef18(
|
|
|
2420
2417
|
variantClass,
|
|
2421
2418
|
className
|
|
2422
2419
|
].filter(Boolean).join(" ");
|
|
2423
|
-
return /* @__PURE__ */ jsxs15("
|
|
2420
|
+
return /* @__PURE__ */ jsxs15("span", __spreadProps(__spreadValues({ ref, role: "link", className: classes }, rest), { children: [
|
|
2424
2421
|
/* @__PURE__ */ jsx18("a", { href, target: "_blank", rel: "noopener noreferrer", children: text }),
|
|
2425
|
-
icon &&
|
|
2422
|
+
icon && cloneElement(icon, {
|
|
2423
|
+
className: `${(_a2 = icon.props.className) != null ? _a2 : ""} ${iconClass}`
|
|
2424
|
+
})
|
|
2426
2425
|
] }));
|
|
2427
2426
|
}
|
|
2428
2427
|
);
|
|
@@ -2966,7 +2965,7 @@ var TextArea = forwardRef23(
|
|
|
2966
2965
|
pending ? /* @__PURE__ */ jsx23(Loading, { size: "sm", className: "shrink-0 absolute right-12 top-12" }) : clearable && isFocused && value ? /* @__PURE__ */ jsx23(
|
|
2967
2966
|
IconButton,
|
|
2968
2967
|
{
|
|
2969
|
-
size: "
|
|
2968
|
+
size: "sm",
|
|
2970
2969
|
transparent: true,
|
|
2971
2970
|
"aria-label": "\u0E25\u0E49\u0E32\u0E07\u0E02\u0E49\u0E2D\u0E04\u0E27\u0E32\u0E21",
|
|
2972
2971
|
className: "absolute right-6 top-6",
|