@rehagro/ui 1.0.7 → 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 +407 -13
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +406 -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
|
@@ -619,6 +619,10 @@ function RehagroProvider({ theme, toastPosition, children }) {
|
|
|
619
619
|
vars[config.var] = value;
|
|
620
620
|
}
|
|
621
621
|
}
|
|
622
|
+
if (!theme.ring && theme.primary) {
|
|
623
|
+
const triplet = toRgbTriplet(theme.primary);
|
|
624
|
+
if (triplet) vars["--rh-ring"] = triplet;
|
|
625
|
+
}
|
|
622
626
|
return vars;
|
|
623
627
|
}, [theme]);
|
|
624
628
|
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rh-root", style, children: /* @__PURE__ */ jsxRuntime.jsx(ToastProvider, { position: toastPosition, children }) });
|
|
@@ -1958,6 +1962,394 @@ var Tag = React8.forwardRef(function Tag2({
|
|
|
1958
1962
|
}
|
|
1959
1963
|
);
|
|
1960
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
|
+
);
|
|
1961
2353
|
var PRESET_COLORS4 = /* @__PURE__ */ new Set([
|
|
1962
2354
|
"primary",
|
|
1963
2355
|
"secondary",
|
|
@@ -1967,12 +2359,12 @@ var PRESET_COLORS4 = /* @__PURE__ */ new Set([
|
|
|
1967
2359
|
"info"
|
|
1968
2360
|
]);
|
|
1969
2361
|
var isPresetColor4 = (color) => PRESET_COLORS4.has(color);
|
|
1970
|
-
var
|
|
2362
|
+
var sizeClasses10 = {
|
|
1971
2363
|
sm: { container: "rh-h-8", button: "rh-px-2 rh-text-xs" },
|
|
1972
2364
|
md: { container: "rh-h-9", button: "rh-px-3 rh-text-sm" },
|
|
1973
2365
|
lg: { container: "rh-h-10", button: "rh-px-4 rh-text-sm" }
|
|
1974
2366
|
};
|
|
1975
|
-
var
|
|
2367
|
+
var radiusClasses6 = {
|
|
1976
2368
|
none: "rh-rounded-none",
|
|
1977
2369
|
xs: "rh-rounded-xs",
|
|
1978
2370
|
sm: "rh-rounded-sm",
|
|
@@ -2005,8 +2397,8 @@ function ToggleGroupInner({
|
|
|
2005
2397
|
className: [
|
|
2006
2398
|
"rh-inline-flex rh-items-center rh-bg-muted rh-overflow-hidden",
|
|
2007
2399
|
"rh-p-1 rh-gap-0.5",
|
|
2008
|
-
|
|
2009
|
-
|
|
2400
|
+
radiusClasses6[radius],
|
|
2401
|
+
sizeClasses10[size].container,
|
|
2010
2402
|
disabled ? "rh-opacity-50 rh-cursor-not-allowed" : "",
|
|
2011
2403
|
className
|
|
2012
2404
|
].filter(Boolean).join(" "),
|
|
@@ -2028,8 +2420,8 @@ function ToggleGroupInner({
|
|
|
2028
2420
|
"rh-border-0 rh-font-sans rh-font-medium",
|
|
2029
2421
|
"rh-transition-all rh-duration-150",
|
|
2030
2422
|
"focus-visible:rh-outline-none focus-visible:rh-ring-2 focus-visible:rh-ring-ring",
|
|
2031
|
-
|
|
2032
|
-
|
|
2423
|
+
radiusClasses6[radius],
|
|
2424
|
+
sizeClasses10[size].button,
|
|
2033
2425
|
isActive ? "rh-bg-surface rh-text-text rh-shadow-sm" : "rh-bg-transparent rh-text-text-muted",
|
|
2034
2426
|
!isActive && !isDisabled ? "hover:rh-bg-surface/50" : "",
|
|
2035
2427
|
isDisabled ? "rh-cursor-not-allowed rh-pointer-events-none" : "rh-cursor-pointer"
|
|
@@ -2052,7 +2444,7 @@ var variantClasses3 = {
|
|
|
2052
2444
|
outlined: "rh-bg-surface rh-border rh-border-border rh-shadow-none",
|
|
2053
2445
|
filled: "rh-bg-background rh-border-0 rh-shadow-none"
|
|
2054
2446
|
};
|
|
2055
|
-
var
|
|
2447
|
+
var radiusClasses7 = {
|
|
2056
2448
|
none: "rh-rounded-none",
|
|
2057
2449
|
xs: "rh-rounded-xs",
|
|
2058
2450
|
sm: "rh-rounded-sm",
|
|
@@ -2087,7 +2479,7 @@ var Card = React8.forwardRef(function Card2({
|
|
|
2087
2479
|
className: [
|
|
2088
2480
|
"rh-font-sans rh-transition-all rh-duration-150",
|
|
2089
2481
|
variantClasses3[variant],
|
|
2090
|
-
|
|
2482
|
+
radiusClasses7[radius],
|
|
2091
2483
|
paddingClasses[padding],
|
|
2092
2484
|
isInteractive ? "rh-cursor-pointer hover:rh-shadow-lg hover:rh-scale-[1.01] active:rh-scale-[0.99]" : "",
|
|
2093
2485
|
disabled ? "rh-opacity-50 rh-cursor-not-allowed rh-pointer-events-none" : "",
|
|
@@ -2135,7 +2527,7 @@ var PRESET_COLORS5 = /* @__PURE__ */ new Set([
|
|
|
2135
2527
|
"info"
|
|
2136
2528
|
]);
|
|
2137
2529
|
var isPresetColor5 = (color) => PRESET_COLORS5.has(color);
|
|
2138
|
-
var
|
|
2530
|
+
var sizeClasses11 = {
|
|
2139
2531
|
xs: "rh-w-3 rh-h-3",
|
|
2140
2532
|
sm: "rh-w-4 rh-h-4",
|
|
2141
2533
|
md: "rh-w-6 rh-h-6",
|
|
@@ -2162,7 +2554,7 @@ var Spinner = React8.forwardRef(function Spinner2({ size = "md", color = "primar
|
|
|
2162
2554
|
"aria-label": label,
|
|
2163
2555
|
className: [
|
|
2164
2556
|
"rh-inline-flex rh-items-center rh-justify-center",
|
|
2165
|
-
|
|
2557
|
+
sizeClasses11[size],
|
|
2166
2558
|
colorClass,
|
|
2167
2559
|
className
|
|
2168
2560
|
].filter(Boolean).join(" "),
|
|
@@ -2205,7 +2597,7 @@ var Spinner = React8.forwardRef(function Spinner2({ size = "md", color = "primar
|
|
|
2205
2597
|
}
|
|
2206
2598
|
);
|
|
2207
2599
|
});
|
|
2208
|
-
var
|
|
2600
|
+
var sizeClasses12 = {
|
|
2209
2601
|
sm: { cell: "rh-px-2 rh-py-2 rh-text-xs", header: "rh-px-2 rh-py-2 rh-text-xs" },
|
|
2210
2602
|
md: { cell: "rh-px-3 rh-py-3 rh-text-sm", header: "rh-px-3 rh-py-3 rh-text-xs" },
|
|
2211
2603
|
lg: { cell: "rh-px-4 rh-py-4 rh-text-sm", header: "rh-px-4 rh-py-3 rh-text-sm" }
|
|
@@ -2285,7 +2677,7 @@ function TableInner({
|
|
|
2285
2677
|
scope: "col",
|
|
2286
2678
|
style: { width: column.width },
|
|
2287
2679
|
className: [
|
|
2288
|
-
|
|
2680
|
+
sizeClasses12[size].header,
|
|
2289
2681
|
alignClasses[column.align || "left"],
|
|
2290
2682
|
"rh-font-semibold rh-text-text-muted rh-whitespace-nowrap",
|
|
2291
2683
|
stickyHeader ? "rh-sticky rh-top-0 rh-bg-surface rh-z-10" : "",
|
|
@@ -2346,7 +2738,7 @@ function TableInner({
|
|
|
2346
2738
|
"td",
|
|
2347
2739
|
{
|
|
2348
2740
|
className: [
|
|
2349
|
-
|
|
2741
|
+
sizeClasses12[size].cell,
|
|
2350
2742
|
alignClasses[column.align || "left"],
|
|
2351
2743
|
"rh-text-text"
|
|
2352
2744
|
].filter(Boolean).join(" "),
|
|
@@ -2550,6 +2942,7 @@ exports.IconButton = IconButton;
|
|
|
2550
2942
|
exports.InfoIcon = InfoIcon;
|
|
2551
2943
|
exports.NeutralIcon = NeutralIcon;
|
|
2552
2944
|
exports.PlusIcon = PlusIcon;
|
|
2945
|
+
exports.ProgressBar = ProgressBar;
|
|
2553
2946
|
exports.RehagroProvider = RehagroProvider;
|
|
2554
2947
|
exports.SearchIcon = SearchIcon;
|
|
2555
2948
|
exports.Select = Select;
|
|
@@ -2557,6 +2950,7 @@ exports.Spinner = Spinner;
|
|
|
2557
2950
|
exports.SuccessIcon = SuccessIcon;
|
|
2558
2951
|
exports.Table = Table;
|
|
2559
2952
|
exports.Tag = Tag;
|
|
2953
|
+
exports.TagInput = TagInput;
|
|
2560
2954
|
exports.TextInput = TextInput;
|
|
2561
2955
|
exports.Toast = Toast;
|
|
2562
2956
|
exports.ToastContainer = ToastContainer;
|