@rehagro/ui 1.0.8 → 1.0.9
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.d.mts +57 -1
- package/dist/index.d.ts +57 -1
- package/dist/index.js +403 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +402 -14
- package/dist/index.mjs.map +1 -1
- package/dist/native.js.map +1 -1
- package/dist/native.mjs.map +1 -1
- package/dist/styles.css +3 -3
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -426,6 +426,62 @@ declare const Tag: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTML
|
|
|
426
426
|
disabled?: boolean;
|
|
427
427
|
} & React$1.RefAttributes<HTMLSpanElement>>;
|
|
428
428
|
|
|
429
|
+
type TagInputSize = "sm" | "md" | "lg";
|
|
430
|
+
type TagInputRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
431
|
+
type TagInputStatus = "default" | "error";
|
|
432
|
+
type TagInputOption = {
|
|
433
|
+
value: string;
|
|
434
|
+
label: string;
|
|
435
|
+
};
|
|
436
|
+
type TagInputProps = {
|
|
437
|
+
/** Label text displayed above the input */
|
|
438
|
+
label?: string;
|
|
439
|
+
/** Subtitle displayed next to the label */
|
|
440
|
+
subtitle?: string;
|
|
441
|
+
/** Available options to select from */
|
|
442
|
+
options: TagInputOption[];
|
|
443
|
+
/** Current selected values */
|
|
444
|
+
value: TagInputOption[];
|
|
445
|
+
/** Callback when tags change */
|
|
446
|
+
onChange: (tags: TagInputOption[]) => void;
|
|
447
|
+
/** Placeholder text when no tags */
|
|
448
|
+
placeholder?: string;
|
|
449
|
+
/** Validation status */
|
|
450
|
+
status?: TagInputStatus;
|
|
451
|
+
/** Input size */
|
|
452
|
+
size?: TagInputSize;
|
|
453
|
+
/** Border radius */
|
|
454
|
+
radius?: TagInputRadius;
|
|
455
|
+
/** Helper/error message displayed below the input */
|
|
456
|
+
helperText?: React$1.ReactNode;
|
|
457
|
+
/** Whether the input is disabled */
|
|
458
|
+
disabled?: boolean;
|
|
459
|
+
/** Custom class for the outermost wrapper */
|
|
460
|
+
wrapperClassName?: string;
|
|
461
|
+
/** Custom class for the input container */
|
|
462
|
+
className?: string;
|
|
463
|
+
};
|
|
464
|
+
declare const TagInput: React$1.ForwardRefExoticComponent<TagInputProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
465
|
+
|
|
466
|
+
type ProgressBarSize = "sm" | "lg";
|
|
467
|
+
type ProgressBarProps = {
|
|
468
|
+
/** Progress value from 0 to 100 */
|
|
469
|
+
value: number;
|
|
470
|
+
/** Label text (only shown in lg size) */
|
|
471
|
+
label?: string;
|
|
472
|
+
/** Size variant */
|
|
473
|
+
size?: ProgressBarSize;
|
|
474
|
+
/** Whether to show percentage text */
|
|
475
|
+
showPercentage?: boolean;
|
|
476
|
+
/** Custom bar color */
|
|
477
|
+
barColor?: string;
|
|
478
|
+
/** Custom background color */
|
|
479
|
+
bgColor?: string;
|
|
480
|
+
/** Custom class for the wrapper */
|
|
481
|
+
className?: string;
|
|
482
|
+
};
|
|
483
|
+
declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
484
|
+
|
|
429
485
|
type ToggleGroupSize = "sm" | "md" | "lg";
|
|
430
486
|
type ToggleGroupRadius = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
431
487
|
type ToggleGroupOption<T extends string = string> = {
|
|
@@ -664,4 +720,4 @@ declare const NeutralIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
|
|
|
664
720
|
|
|
665
721
|
declare const CloseIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
|
|
666
722
|
|
|
667
|
-
export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
|
|
723
|
+
export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
|
package/dist/index.d.ts
CHANGED
|
@@ -426,6 +426,62 @@ declare const Tag: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTML
|
|
|
426
426
|
disabled?: boolean;
|
|
427
427
|
} & React$1.RefAttributes<HTMLSpanElement>>;
|
|
428
428
|
|
|
429
|
+
type TagInputSize = "sm" | "md" | "lg";
|
|
430
|
+
type TagInputRadius = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
431
|
+
type TagInputStatus = "default" | "error";
|
|
432
|
+
type TagInputOption = {
|
|
433
|
+
value: string;
|
|
434
|
+
label: string;
|
|
435
|
+
};
|
|
436
|
+
type TagInputProps = {
|
|
437
|
+
/** Label text displayed above the input */
|
|
438
|
+
label?: string;
|
|
439
|
+
/** Subtitle displayed next to the label */
|
|
440
|
+
subtitle?: string;
|
|
441
|
+
/** Available options to select from */
|
|
442
|
+
options: TagInputOption[];
|
|
443
|
+
/** Current selected values */
|
|
444
|
+
value: TagInputOption[];
|
|
445
|
+
/** Callback when tags change */
|
|
446
|
+
onChange: (tags: TagInputOption[]) => void;
|
|
447
|
+
/** Placeholder text when no tags */
|
|
448
|
+
placeholder?: string;
|
|
449
|
+
/** Validation status */
|
|
450
|
+
status?: TagInputStatus;
|
|
451
|
+
/** Input size */
|
|
452
|
+
size?: TagInputSize;
|
|
453
|
+
/** Border radius */
|
|
454
|
+
radius?: TagInputRadius;
|
|
455
|
+
/** Helper/error message displayed below the input */
|
|
456
|
+
helperText?: React$1.ReactNode;
|
|
457
|
+
/** Whether the input is disabled */
|
|
458
|
+
disabled?: boolean;
|
|
459
|
+
/** Custom class for the outermost wrapper */
|
|
460
|
+
wrapperClassName?: string;
|
|
461
|
+
/** Custom class for the input container */
|
|
462
|
+
className?: string;
|
|
463
|
+
};
|
|
464
|
+
declare const TagInput: React$1.ForwardRefExoticComponent<TagInputProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
465
|
+
|
|
466
|
+
type ProgressBarSize = "sm" | "lg";
|
|
467
|
+
type ProgressBarProps = {
|
|
468
|
+
/** Progress value from 0 to 100 */
|
|
469
|
+
value: number;
|
|
470
|
+
/** Label text (only shown in lg size) */
|
|
471
|
+
label?: string;
|
|
472
|
+
/** Size variant */
|
|
473
|
+
size?: ProgressBarSize;
|
|
474
|
+
/** Whether to show percentage text */
|
|
475
|
+
showPercentage?: boolean;
|
|
476
|
+
/** Custom bar color */
|
|
477
|
+
barColor?: string;
|
|
478
|
+
/** Custom background color */
|
|
479
|
+
bgColor?: string;
|
|
480
|
+
/** Custom class for the wrapper */
|
|
481
|
+
className?: string;
|
|
482
|
+
};
|
|
483
|
+
declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
484
|
+
|
|
429
485
|
type ToggleGroupSize = "sm" | "md" | "lg";
|
|
430
486
|
type ToggleGroupRadius = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "full";
|
|
431
487
|
type ToggleGroupOption<T extends string = string> = {
|
|
@@ -664,4 +720,4 @@ declare const NeutralIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
|
|
|
664
720
|
|
|
665
721
|
declare const CloseIcon: (props: IconProps) => react_jsx_runtime.JSX.Element;
|
|
666
722
|
|
|
667
|
-
export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
|
|
723
|
+
export { Avatar, type AvatarProps, type AvatarSize, type AvatarVariant, Button, ButtonColor, type ButtonProps, type ButtonRadius, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardPadding, type CardProps, type CardRadius, type CardVariant, Checkbox, type CheckboxProps, type CheckboxSize, CloseIcon, Container, type ContainerProps, DeleteIcon, EditIcon, ErrorIcon, GridContainer, type GridContainerProps, GridItem, type GridItemProps, type GridSpan, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonRadius, type IconButtonSize, type IconButtonVariant, type IconProps, InfoIcon, type MobileSpan, NeutralIcon, PlusIcon, ProgressBar, type ProgressBarProps, type ProgressBarSize, RehagroProvider, type RehagroProviderProps, type RehagroTheme, SearchIcon, Select, type SelectMultipleProps, type SelectOption, type SelectProps, type SelectRadius, type SelectSingleProps, type SelectSize, type SelectStatus, type SortDirection, Spinner, type SpinnerProps, type SpinnerSize, SuccessIcon, Table, type TableColumn, type TableProps, type TableSize, type TableSort, type TableVariant, Tag, TagInput, type TagInputOption, type TagInputProps, type TagInputRadius, type TagInputSize, type TagInputStatus, type TagProps, type TagSize, TextInput, type TextInputProps, type TextInputRadius, type TextInputSize, type TextInputStatus, Toast, type ToastAppearance, ToastContainer, type ToastFn, type ToastItem, type ToastLink, type ToastOptions, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleGroup, type ToggleGroupOption, type ToggleGroupProps, type ToggleGroupRadius, type ToggleGroupSize, Tooltip, type TooltipPlacement, type TooltipProps, type TooltipSize, type TooltipVariant, WarningIcon, useToast };
|
package/dist/index.js
CHANGED
|
@@ -1962,6 +1962,394 @@ var Tag = React8.forwardRef(function Tag2({
|
|
|
1962
1962
|
}
|
|
1963
1963
|
);
|
|
1964
1964
|
});
|
|
1965
|
+
var statusClasses3 = {
|
|
1966
|
+
default: "rh-border-border focus-within:rh-ring-2 focus-within:rh-ring-ring focus-within:rh-ring-offset-2",
|
|
1967
|
+
error: "rh-border-danger focus-within:rh-ring-2 focus-within:rh-ring-danger focus-within:rh-ring-offset-2"
|
|
1968
|
+
};
|
|
1969
|
+
var sizeClasses9 = {
|
|
1970
|
+
sm: "rh-min-h-[36px] rh-text-sm rh-px-2 rh-py-1",
|
|
1971
|
+
md: "rh-h-[44px] rh-text-sm rh-px-2 rh-py-[6px]",
|
|
1972
|
+
lg: "rh-min-h-[52px] rh-text-base rh-px-3 rh-py-2"
|
|
1973
|
+
};
|
|
1974
|
+
var radiusClasses5 = {
|
|
1975
|
+
none: "rh-rounded-none",
|
|
1976
|
+
xxs: "rh-rounded-xxs",
|
|
1977
|
+
xs: "rh-rounded-xs",
|
|
1978
|
+
sm: "rh-rounded-sm",
|
|
1979
|
+
md: "rh-rounded-[8px]",
|
|
1980
|
+
lg: "rh-rounded-lg",
|
|
1981
|
+
xl: "rh-rounded-xl",
|
|
1982
|
+
full: "rh-rounded-full"
|
|
1983
|
+
};
|
|
1984
|
+
var helperStatusClasses3 = {
|
|
1985
|
+
default: "rh-text-text-muted",
|
|
1986
|
+
error: "rh-text-danger"
|
|
1987
|
+
};
|
|
1988
|
+
var tagSizeClasses = {
|
|
1989
|
+
sm: "rh-h-6 rh-text-xs rh-py-0.5 rh-px-1.5",
|
|
1990
|
+
md: "rh-h-[28px] rh-text-sm rh-py-[2px] rh-px-[6px]",
|
|
1991
|
+
lg: "rh-h-8 rh-text-sm rh-py-0.5 rh-px-2"
|
|
1992
|
+
};
|
|
1993
|
+
var deleteButtonSizeClasses = {
|
|
1994
|
+
sm: "rh-w-3 rh-h-3",
|
|
1995
|
+
md: "rh-w-[12px] rh-h-[12px]",
|
|
1996
|
+
lg: "rh-w-4 rh-h-4"
|
|
1997
|
+
};
|
|
1998
|
+
var addButtonSizeClasses = {
|
|
1999
|
+
sm: "rh-w-4 rh-h-4",
|
|
2000
|
+
md: "rh-w-5 rh-h-5",
|
|
2001
|
+
lg: "rh-w-5 rh-h-5"
|
|
2002
|
+
};
|
|
2003
|
+
var TagInput = React8.forwardRef(
|
|
2004
|
+
function TagInput2({
|
|
2005
|
+
label,
|
|
2006
|
+
subtitle,
|
|
2007
|
+
options = [],
|
|
2008
|
+
value = [],
|
|
2009
|
+
onChange,
|
|
2010
|
+
placeholder,
|
|
2011
|
+
status = "default",
|
|
2012
|
+
size = "md",
|
|
2013
|
+
radius = "md",
|
|
2014
|
+
helperText,
|
|
2015
|
+
disabled,
|
|
2016
|
+
className = "",
|
|
2017
|
+
wrapperClassName = ""
|
|
2018
|
+
}, ref) {
|
|
2019
|
+
const inputId = React8__default.default.useId();
|
|
2020
|
+
const [isOpen, setIsOpen] = React8.useState(false);
|
|
2021
|
+
const containerRef = React8.useRef(null);
|
|
2022
|
+
React8.useEffect(() => {
|
|
2023
|
+
const handleClickOutside = (event) => {
|
|
2024
|
+
if (containerRef.current && !containerRef.current.contains(event.target)) {
|
|
2025
|
+
setIsOpen(false);
|
|
2026
|
+
}
|
|
2027
|
+
};
|
|
2028
|
+
document.addEventListener("mousedown", handleClickOutside);
|
|
2029
|
+
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
2030
|
+
}, []);
|
|
2031
|
+
const handleRemoveTag = (tagValue) => {
|
|
2032
|
+
if (disabled) return;
|
|
2033
|
+
onChange(value.filter((tag) => tag.value !== tagValue));
|
|
2034
|
+
};
|
|
2035
|
+
const handleToggleOption = (option) => {
|
|
2036
|
+
if (disabled) return;
|
|
2037
|
+
const isSelected = value.some((v) => v.value === option.value);
|
|
2038
|
+
if (isSelected) {
|
|
2039
|
+
onChange(value.filter((v) => v.value !== option.value));
|
|
2040
|
+
} else {
|
|
2041
|
+
onChange([...value, option]);
|
|
2042
|
+
}
|
|
2043
|
+
};
|
|
2044
|
+
const handleAddClick = () => {
|
|
2045
|
+
if (disabled) return;
|
|
2046
|
+
setIsOpen(!isOpen);
|
|
2047
|
+
};
|
|
2048
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2049
|
+
"div",
|
|
2050
|
+
{
|
|
2051
|
+
ref: (node) => {
|
|
2052
|
+
if (typeof ref === "function") ref(node);
|
|
2053
|
+
else if (ref) ref.current = node;
|
|
2054
|
+
containerRef.current = node;
|
|
2055
|
+
},
|
|
2056
|
+
className: [
|
|
2057
|
+
"rh-flex rh-flex-col rh-gap-2 rh-font-sans rh-relative",
|
|
2058
|
+
wrapperClassName
|
|
2059
|
+
].filter(Boolean).join(" "),
|
|
2060
|
+
children: [
|
|
2061
|
+
label && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2062
|
+
"label",
|
|
2063
|
+
{
|
|
2064
|
+
htmlFor: inputId,
|
|
2065
|
+
className: "rh-flex rh-items-baseline rh-gap-1",
|
|
2066
|
+
children: [
|
|
2067
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-semibold rh-text-text", children: label }),
|
|
2068
|
+
subtitle && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-text-text-muted", children: subtitle })
|
|
2069
|
+
]
|
|
2070
|
+
}
|
|
2071
|
+
),
|
|
2072
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
2073
|
+
"div",
|
|
2074
|
+
{
|
|
2075
|
+
className: [
|
|
2076
|
+
"rh-flex rh-flex-row rh-items-center rh-justify-between rh-gap-2",
|
|
2077
|
+
"rh-border rh-bg-surface rh-font-sans",
|
|
2078
|
+
"rh-transition-colors rh-duration-150",
|
|
2079
|
+
statusClasses3[status],
|
|
2080
|
+
radiusClasses5[radius],
|
|
2081
|
+
sizeClasses9[size],
|
|
2082
|
+
disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-bg-background" : "",
|
|
2083
|
+
className
|
|
2084
|
+
].filter(Boolean).join(" "),
|
|
2085
|
+
children: [
|
|
2086
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-flex-row rh-flex-wrap rh-items-center rh-gap-2 rh-flex-1", children: [
|
|
2087
|
+
value.length === 0 && placeholder && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-text-muted", children: placeholder }),
|
|
2088
|
+
value.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2089
|
+
"div",
|
|
2090
|
+
{
|
|
2091
|
+
className: [
|
|
2092
|
+
"rh-inline-flex rh-items-center rh-justify-center rh-gap-1",
|
|
2093
|
+
"rh-bg-gray-200 rh-border rh-border-gray-200 rh-rounded-[4px]",
|
|
2094
|
+
tagSizeClasses[size]
|
|
2095
|
+
].join(" "),
|
|
2096
|
+
children: [
|
|
2097
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-font-semibold rh-text-gray-700", children: tag.label }),
|
|
2098
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2099
|
+
"button",
|
|
2100
|
+
{
|
|
2101
|
+
type: "button",
|
|
2102
|
+
onClick: () => handleRemoveTag(tag.value),
|
|
2103
|
+
disabled,
|
|
2104
|
+
className: [
|
|
2105
|
+
"rh-flex rh-items-center rh-justify-center",
|
|
2106
|
+
"rh-bg-white rh-rounded-full",
|
|
2107
|
+
"rh-cursor-pointer hover:rh-bg-gray-100",
|
|
2108
|
+
"disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
|
|
2109
|
+
deleteButtonSizeClasses[size]
|
|
2110
|
+
].join(" "),
|
|
2111
|
+
"aria-label": `Remover ${tag.label}`,
|
|
2112
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2113
|
+
"svg",
|
|
2114
|
+
{
|
|
2115
|
+
viewBox: "0 0 8 8",
|
|
2116
|
+
fill: "none",
|
|
2117
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2118
|
+
className: "rh-w-[8px] rh-h-[8px]",
|
|
2119
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2120
|
+
"path",
|
|
2121
|
+
{
|
|
2122
|
+
d: "M6 2L2 6M2 2L6 6",
|
|
2123
|
+
stroke: "#374151",
|
|
2124
|
+
strokeWidth: "1.5",
|
|
2125
|
+
strokeLinecap: "round",
|
|
2126
|
+
strokeLinejoin: "round"
|
|
2127
|
+
}
|
|
2128
|
+
)
|
|
2129
|
+
}
|
|
2130
|
+
)
|
|
2131
|
+
}
|
|
2132
|
+
)
|
|
2133
|
+
]
|
|
2134
|
+
},
|
|
2135
|
+
tag.value
|
|
2136
|
+
))
|
|
2137
|
+
] }),
|
|
2138
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2139
|
+
"button",
|
|
2140
|
+
{
|
|
2141
|
+
type: "button",
|
|
2142
|
+
onClick: handleAddClick,
|
|
2143
|
+
disabled,
|
|
2144
|
+
className: [
|
|
2145
|
+
"rh-flex rh-items-center rh-justify-center rh-shrink-0",
|
|
2146
|
+
"rh-text-text-muted hover:rh-text-text",
|
|
2147
|
+
"rh-cursor-pointer",
|
|
2148
|
+
"disabled:rh-cursor-not-allowed disabled:rh-opacity-50",
|
|
2149
|
+
addButtonSizeClasses[size]
|
|
2150
|
+
].join(" "),
|
|
2151
|
+
"aria-label": "Adicionar",
|
|
2152
|
+
"aria-expanded": isOpen,
|
|
2153
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2154
|
+
"svg",
|
|
2155
|
+
{
|
|
2156
|
+
viewBox: "0 0 20 20",
|
|
2157
|
+
fill: "none",
|
|
2158
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2159
|
+
className: "rh-w-full rh-h-full",
|
|
2160
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2161
|
+
"path",
|
|
2162
|
+
{
|
|
2163
|
+
d: "M10 4V16M4 10H16",
|
|
2164
|
+
stroke: "currentColor",
|
|
2165
|
+
strokeWidth: "2",
|
|
2166
|
+
strokeLinecap: "round",
|
|
2167
|
+
strokeLinejoin: "round"
|
|
2168
|
+
}
|
|
2169
|
+
)
|
|
2170
|
+
}
|
|
2171
|
+
)
|
|
2172
|
+
}
|
|
2173
|
+
)
|
|
2174
|
+
]
|
|
2175
|
+
}
|
|
2176
|
+
),
|
|
2177
|
+
isOpen && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2178
|
+
"div",
|
|
2179
|
+
{
|
|
2180
|
+
className: [
|
|
2181
|
+
"rh-absolute rh-top-full rh-left-0 rh-right-0 rh-z-50",
|
|
2182
|
+
"rh-mt-1 rh-bg-surface rh-border rh-border-border",
|
|
2183
|
+
"rh-rounded-[8px] rh-shadow-lg rh-overflow-hidden"
|
|
2184
|
+
].join(" "),
|
|
2185
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "rh-max-h-[200px] rh-overflow-y-auto", children: options.map((option) => {
|
|
2186
|
+
const isSelected = value.some((v) => v.value === option.value);
|
|
2187
|
+
return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2188
|
+
"button",
|
|
2189
|
+
{
|
|
2190
|
+
type: "button",
|
|
2191
|
+
onClick: () => handleToggleOption(option),
|
|
2192
|
+
className: [
|
|
2193
|
+
"rh-w-full rh-flex rh-items-center rh-justify-between",
|
|
2194
|
+
"rh-px-3 rh-py-3 rh-text-left",
|
|
2195
|
+
"rh-border-b rh-border-border/50 last:rh-border-b-0",
|
|
2196
|
+
"hover:rh-bg-gray-50 rh-transition-colors",
|
|
2197
|
+
isSelected ? "rh-text-text" : "rh-text-text-muted"
|
|
2198
|
+
].join(" "),
|
|
2199
|
+
children: [
|
|
2200
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { className: "rh-text-sm rh-font-normal", children: option.label }),
|
|
2201
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2202
|
+
"span",
|
|
2203
|
+
{
|
|
2204
|
+
className: [
|
|
2205
|
+
"rh-w-5 rh-h-5 rh-rounded rh-border-2 rh-flex rh-items-center rh-justify-center",
|
|
2206
|
+
isSelected ? "rh-bg-primary rh-border-primary" : "rh-bg-white rh-border-gray-300"
|
|
2207
|
+
].join(" "),
|
|
2208
|
+
children: isSelected && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2209
|
+
"svg",
|
|
2210
|
+
{
|
|
2211
|
+
viewBox: "0 0 12 12",
|
|
2212
|
+
fill: "none",
|
|
2213
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
2214
|
+
className: "rh-w-3 rh-h-3",
|
|
2215
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2216
|
+
"path",
|
|
2217
|
+
{
|
|
2218
|
+
d: "M2 6L5 9L10 3",
|
|
2219
|
+
stroke: "white",
|
|
2220
|
+
strokeWidth: "2",
|
|
2221
|
+
strokeLinecap: "round",
|
|
2222
|
+
strokeLinejoin: "round"
|
|
2223
|
+
}
|
|
2224
|
+
)
|
|
2225
|
+
}
|
|
2226
|
+
)
|
|
2227
|
+
}
|
|
2228
|
+
)
|
|
2229
|
+
]
|
|
2230
|
+
}
|
|
2231
|
+
) }, option.value);
|
|
2232
|
+
}) })
|
|
2233
|
+
}
|
|
2234
|
+
),
|
|
2235
|
+
helperText && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2236
|
+
"span",
|
|
2237
|
+
{
|
|
2238
|
+
id: `${inputId}-helper`,
|
|
2239
|
+
className: [
|
|
2240
|
+
"rh-flex rh-items-center rh-gap-1 rh-text-xs",
|
|
2241
|
+
helperStatusClasses3[status]
|
|
2242
|
+
].join(" "),
|
|
2243
|
+
children: helperText
|
|
2244
|
+
}
|
|
2245
|
+
)
|
|
2246
|
+
]
|
|
2247
|
+
}
|
|
2248
|
+
);
|
|
2249
|
+
}
|
|
2250
|
+
);
|
|
2251
|
+
var ProgressBar = React8.forwardRef(
|
|
2252
|
+
function ProgressBar2({
|
|
2253
|
+
value,
|
|
2254
|
+
label,
|
|
2255
|
+
size = "sm",
|
|
2256
|
+
showPercentage = true,
|
|
2257
|
+
barColor,
|
|
2258
|
+
bgColor,
|
|
2259
|
+
className = ""
|
|
2260
|
+
}, ref) {
|
|
2261
|
+
const clampedValue = Math.min(100, Math.max(0, value));
|
|
2262
|
+
if (size === "lg") {
|
|
2263
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2264
|
+
"div",
|
|
2265
|
+
{
|
|
2266
|
+
ref,
|
|
2267
|
+
className: [
|
|
2268
|
+
"rh-flex rh-flex-col rh-items-start rh-gap-2 rh-font-sans",
|
|
2269
|
+
className
|
|
2270
|
+
].filter(Boolean).join(" "),
|
|
2271
|
+
children: [
|
|
2272
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rh-flex rh-flex-row rh-justify-between rh-items-start rh-w-full", children: [
|
|
2273
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
2274
|
+
"span",
|
|
2275
|
+
{
|
|
2276
|
+
className: "rh-font-sora rh-font-bold rh-text-base rh-leading-6 rh-text-[#374151] rh-flex-1",
|
|
2277
|
+
children: label
|
|
2278
|
+
}
|
|
2279
|
+
),
|
|
2280
|
+
showPercentage && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2281
|
+
"span",
|
|
2282
|
+
{
|
|
2283
|
+
className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right",
|
|
2284
|
+
children: [
|
|
2285
|
+
clampedValue,
|
|
2286
|
+
"%"
|
|
2287
|
+
]
|
|
2288
|
+
}
|
|
2289
|
+
)
|
|
2290
|
+
] }),
|
|
2291
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2292
|
+
"div",
|
|
2293
|
+
{
|
|
2294
|
+
className: "rh-w-full rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
|
|
2295
|
+
style: { backgroundColor: bgColor || "#E5E7EB" },
|
|
2296
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2297
|
+
"div",
|
|
2298
|
+
{
|
|
2299
|
+
className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
|
|
2300
|
+
style: {
|
|
2301
|
+
width: `${clampedValue}%`,
|
|
2302
|
+
backgroundColor: barColor || "#538CC6"
|
|
2303
|
+
}
|
|
2304
|
+
}
|
|
2305
|
+
)
|
|
2306
|
+
}
|
|
2307
|
+
)
|
|
2308
|
+
]
|
|
2309
|
+
}
|
|
2310
|
+
);
|
|
2311
|
+
}
|
|
2312
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2313
|
+
"div",
|
|
2314
|
+
{
|
|
2315
|
+
ref,
|
|
2316
|
+
className: [
|
|
2317
|
+
"rh-flex rh-flex-row rh-items-center rh-gap-2 rh-font-sans",
|
|
2318
|
+
className
|
|
2319
|
+
].filter(Boolean).join(" "),
|
|
2320
|
+
children: [
|
|
2321
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2322
|
+
"div",
|
|
2323
|
+
{
|
|
2324
|
+
className: "rh-flex-1 rh-h-1 rh-rounded-[40px] rh-overflow-hidden",
|
|
2325
|
+
style: { backgroundColor: bgColor || "#E5E7EB" },
|
|
2326
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2327
|
+
"div",
|
|
2328
|
+
{
|
|
2329
|
+
className: "rh-h-full rh-rounded-[40px] rh-transition-all rh-duration-300",
|
|
2330
|
+
style: {
|
|
2331
|
+
width: `${clampedValue}%`,
|
|
2332
|
+
backgroundColor: barColor || "#538CC6"
|
|
2333
|
+
}
|
|
2334
|
+
}
|
|
2335
|
+
)
|
|
2336
|
+
}
|
|
2337
|
+
),
|
|
2338
|
+
showPercentage && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
2339
|
+
"span",
|
|
2340
|
+
{
|
|
2341
|
+
className: "rh-font-inter rh-font-normal rh-text-sm rh-leading-5 rh-text-[#9CA3AF] rh-tracking-[0.025em] rh-text-right rh-min-w-[40px]",
|
|
2342
|
+
children: [
|
|
2343
|
+
clampedValue,
|
|
2344
|
+
"%"
|
|
2345
|
+
]
|
|
2346
|
+
}
|
|
2347
|
+
)
|
|
2348
|
+
]
|
|
2349
|
+
}
|
|
2350
|
+
);
|
|
2351
|
+
}
|
|
2352
|
+
);
|
|
1965
2353
|
var PRESET_COLORS4 = /* @__PURE__ */ new Set([
|
|
1966
2354
|
"primary",
|
|
1967
2355
|
"secondary",
|
|
@@ -1971,12 +2359,12 @@ var PRESET_COLORS4 = /* @__PURE__ */ new Set([
|
|
|
1971
2359
|
"info"
|
|
1972
2360
|
]);
|
|
1973
2361
|
var isPresetColor4 = (color) => PRESET_COLORS4.has(color);
|
|
1974
|
-
var
|
|
2362
|
+
var sizeClasses10 = {
|
|
1975
2363
|
sm: { container: "rh-h-8", button: "rh-px-2 rh-text-xs" },
|
|
1976
2364
|
md: { container: "rh-h-9", button: "rh-px-3 rh-text-sm" },
|
|
1977
2365
|
lg: { container: "rh-h-10", button: "rh-px-4 rh-text-sm" }
|
|
1978
2366
|
};
|
|
1979
|
-
var
|
|
2367
|
+
var radiusClasses6 = {
|
|
1980
2368
|
none: "rh-rounded-none",
|
|
1981
2369
|
xs: "rh-rounded-xs",
|
|
1982
2370
|
sm: "rh-rounded-sm",
|
|
@@ -2009,8 +2397,8 @@ function ToggleGroupInner({
|
|
|
2009
2397
|
className: [
|
|
2010
2398
|
"rh-inline-flex rh-items-center rh-bg-muted rh-overflow-hidden",
|
|
2011
2399
|
"rh-p-1 rh-gap-0.5",
|
|
2012
|
-
|
|
2013
|
-
|
|
2400
|
+
radiusClasses6[radius],
|
|
2401
|
+
sizeClasses10[size].container,
|
|
2014
2402
|
disabled ? "rh-opacity-50 rh-cursor-not-allowed" : "",
|
|
2015
2403
|
className
|
|
2016
2404
|
].filter(Boolean).join(" "),
|
|
@@ -2032,8 +2420,8 @@ function ToggleGroupInner({
|
|
|
2032
2420
|
"rh-border-0 rh-font-sans rh-font-medium",
|
|
2033
2421
|
"rh-transition-all rh-duration-150",
|
|
2034
2422
|
"focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring",
|
|
2035
|
-
|
|
2036
|
-
|
|
2423
|
+
radiusClasses6[radius],
|
|
2424
|
+
sizeClasses10[size].button,
|
|
2037
2425
|
isActive ? "rh-bg-surface rh-text-text rh-shadow-sm" : "rh-bg-transparent rh-text-text-muted",
|
|
2038
2426
|
!isActive && !isDisabled ? "hover:rh-bg-surface/50" : "",
|
|
2039
2427
|
isDisabled ? "rh-cursor-not-allowed rh-pointer-events-none" : "rh-cursor-pointer"
|
|
@@ -2056,7 +2444,7 @@ var variantClasses3 = {
|
|
|
2056
2444
|
outlined: "rh-bg-surface rh-border rh-border-border rh-shadow-none",
|
|
2057
2445
|
filled: "rh-bg-background rh-border-0 rh-shadow-none"
|
|
2058
2446
|
};
|
|
2059
|
-
var
|
|
2447
|
+
var radiusClasses7 = {
|
|
2060
2448
|
none: "rh-rounded-none",
|
|
2061
2449
|
xs: "rh-rounded-xs",
|
|
2062
2450
|
sm: "rh-rounded-sm",
|
|
@@ -2091,7 +2479,7 @@ var Card = React8.forwardRef(function Card2({
|
|
|
2091
2479
|
className: [
|
|
2092
2480
|
"rh-font-sans rh-transition-all rh-duration-150",
|
|
2093
2481
|
variantClasses3[variant],
|
|
2094
|
-
|
|
2482
|
+
radiusClasses7[radius],
|
|
2095
2483
|
paddingClasses[padding],
|
|
2096
2484
|
isInteractive ? "rh-cursor-pointer hover:rh-shadow-lg hover:rh-scale-[1.01] active:rh-scale-[0.99]" : "",
|
|
2097
2485
|
disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
|
|
@@ -2139,7 +2527,7 @@ var PRESET_COLORS5 = /* @__PURE__ */ new Set([
|
|
|
2139
2527
|
"info"
|
|
2140
2528
|
]);
|
|
2141
2529
|
var isPresetColor5 = (color) => PRESET_COLORS5.has(color);
|
|
2142
|
-
var
|
|
2530
|
+
var sizeClasses11 = {
|
|
2143
2531
|
xs: "rh-w-3 rh-h-3",
|
|
2144
2532
|
sm: "rh-w-4 rh-h-4",
|
|
2145
2533
|
md: "rh-w-6 rh-h-6",
|
|
@@ -2166,7 +2554,7 @@ var Spinner = React8.forwardRef(function Spinner2({ size = "md", color = "primar
|
|
|
2166
2554
|
"aria-label": label,
|
|
2167
2555
|
className: [
|
|
2168
2556
|
"rh-inline-flex rh-items-center rh-justify-center",
|
|
2169
|
-
|
|
2557
|
+
sizeClasses11[size],
|
|
2170
2558
|
colorClass,
|
|
2171
2559
|
className
|
|
2172
2560
|
].filter(Boolean).join(" "),
|
|
@@ -2209,7 +2597,7 @@ var Spinner = React8.forwardRef(function Spinner2({ size = "md", color = "primar
|
|
|
2209
2597
|
}
|
|
2210
2598
|
);
|
|
2211
2599
|
});
|
|
2212
|
-
var
|
|
2600
|
+
var sizeClasses12 = {
|
|
2213
2601
|
sm: { cell: "rh-px-2 rh-py-2 rh-text-xs", header: "rh-px-2 rh-py-2 rh-text-xs" },
|
|
2214
2602
|
md: { cell: "rh-px-3 rh-py-3 rh-text-sm", header: "rh-px-3 rh-py-3 rh-text-xs" },
|
|
2215
2603
|
lg: { cell: "rh-px-4 rh-py-4 rh-text-sm", header: "rh-px-4 rh-py-3 rh-text-sm" }
|
|
@@ -2289,7 +2677,7 @@ function TableInner({
|
|
|
2289
2677
|
scope: "col",
|
|
2290
2678
|
style: { width: column.width },
|
|
2291
2679
|
className: [
|
|
2292
|
-
|
|
2680
|
+
sizeClasses12[size].header,
|
|
2293
2681
|
alignClasses[column.align || "left"],
|
|
2294
2682
|
"rh-font-semibold rh-text-text-muted rh-whitespace-nowrap",
|
|
2295
2683
|
stickyHeader ? "rh-sticky rh-top-0 rh-bg-surface rh-z-10" : "",
|
|
@@ -2350,7 +2738,7 @@ function TableInner({
|
|
|
2350
2738
|
"td",
|
|
2351
2739
|
{
|
|
2352
2740
|
className: [
|
|
2353
|
-
|
|
2741
|
+
sizeClasses12[size].cell,
|
|
2354
2742
|
alignClasses[column.align || "left"],
|
|
2355
2743
|
"rh-text-text"
|
|
2356
2744
|
].filter(Boolean).join(" "),
|
|
@@ -2554,6 +2942,7 @@ exports.IconButton = IconButton;
|
|
|
2554
2942
|
exports.InfoIcon = InfoIcon;
|
|
2555
2943
|
exports.NeutralIcon = NeutralIcon;
|
|
2556
2944
|
exports.PlusIcon = PlusIcon;
|
|
2945
|
+
exports.ProgressBar = ProgressBar;
|
|
2557
2946
|
exports.RehagroProvider = RehagroProvider;
|
|
2558
2947
|
exports.SearchIcon = SearchIcon;
|
|
2559
2948
|
exports.Select = Select;
|
|
@@ -2561,6 +2950,7 @@ exports.Spinner = Spinner;
|
|
|
2561
2950
|
exports.SuccessIcon = SuccessIcon;
|
|
2562
2951
|
exports.Table = Table;
|
|
2563
2952
|
exports.Tag = Tag;
|
|
2953
|
+
exports.TagInput = TagInput;
|
|
2564
2954
|
exports.TextInput = TextInput;
|
|
2565
2955
|
exports.Toast = Toast;
|
|
2566
2956
|
exports.ToastContainer = ToastContainer;
|