fis-component 0.0.22 → 0.0.23

package/dist/cjs/index.js

@@ -4948,6 +4948,7 @@ const FISIconButton = React.forwardRef((props, ref) => {
     const { type, children, active = false, size = "md", variant = "primary", icon: iconProp, ...rest } = props;
     return (jsxRuntime.jsx(ButtonStyled, { ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, children: iconProp }));
 });
+FISIconButton.displayName = "FISIconButton";
 
 const GroupButtonContainerStyled = dt.div `
   overflow: hidden;
@@ -5218,7 +5219,7 @@ const IconStyled = dt.span `
   align-items: center;
 `;
 
-const FISGroupButton = ({ className, size = "md", disabled = false, options, variant, }) => {
+const FISButtonGroup = ({ className, size = "md", disabled = false, options, variant, }) => {
     return (jsxRuntime.jsx(GroupButtonContainerStyled, { className: className, children: options.map((option, index) => (React.createElement(Button, { ...option, key: index, disabledContainer: disabled, size: size, variant: variant }))) }));
 };
 const Button = ({ disabledContainer, startIcon: startIconProp, endIcon: endIconProp, size = "md", variant = "default", label, disabled, ...rest }) => {
@@ -5229,7 +5230,7 @@ const Button = ({ disabledContainer, startIcon: startIconProp, endIcon: endIconP
     return (jsxRuntime.jsxs(ButtonItemStyled, { ...rest, disabled: disabledContainer || disabled, "$onlyIcon": onlyIcon, "$size": size, "$variant": variant, children: [startIcon, label && jsxRuntime.jsx("span", { className: "button-content", children: label }), endIcon] }));
 };
 
-const DivContainerSC$3 = dt.div `
+const DivContainerSC$4 = dt.div `
   display: flex;
   align-items: center;
 `;
@@ -5309,8 +5310,9 @@ const BreadcrumbEllipsis = () => (jsxRuntime.jsxs(jsxRuntime.Fragment, { childre
 const FISBreadcrumb = ({ items, className }) => {
     if (items.length === 0)
         return null;
-    return (jsxRuntime.jsxs(DivContainerSC$3, { className: className, children: [items?.[0]?.icon && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsxRuntime.jsx(SeparatorIcon, {})] })), items.length > MAX_VISIBLE_ITEMS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, index))), jsxRuntime.jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, `end-${index}`)))] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.slice(1).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, index))) }))] }));
+    return (jsxRuntime.jsxs(DivContainerSC$4, { className: className, children: [items?.[0]?.icon && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsxRuntime.jsx(SeparatorIcon, {})] })), items.length > MAX_VISIBLE_ITEMS ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, index))), jsxRuntime.jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, `end-${index}`)))] })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: items.slice(1).map((item, index) => (jsxRuntime.jsxs(React.Fragment, { children: [jsxRuntime.jsx(BreadcrumbItem, { ...item }), jsxRuntime.jsx(SeparatorIcon, {})] }, index))) }))] }));
 };
+FISBreadcrumb.displayName = "FISBreadcrumb";
 
 const SpanRadioControlSC = dt.span `
   display: inline-flex;
@@ -5498,6 +5500,39 @@ const FISRadio = React.forwardRef(({ className, children, subLabel, checked = fa
 });
 FISRadio.displayName = "FISRadio";
 
+const DivContainerSC$3 = dt.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+
+  ${(props) => props.$direction === "row"
+    ? lt `
+          flex-direction: row;
+        `
+    : lt `
+          flex-direction: column;
+        `}
+`;
+const DivScreenReaderLabelSC$1 = dt.div `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
+function FISRadioGroup({ className, groupLabel, options, name, value, direction = "row", disabled, getOptionDisabled, onChange, onFocus, onBlur, }) {
+    const groupId = "radio-group-" + React.useId();
+    const handleChange = (option) => {
+        onChange(option.value);
+    };
+    return (jsxRuntime.jsxs(DivContainerSC$3, { role: "radiogroup", className: className, "aria-labelledby": groupId, "$direction": direction, children: [jsxRuntime.jsx(DivScreenReaderLabelSC$1, { id: groupId, children: groupLabel }), options.map((option) => (jsxRuntime.jsx(FISRadio, { value: option.value, name: name, disabled: getOptionDisabled?.(option) ?? disabled, checked: option.value === value, onChange: () => handleChange(option), onFocus: onFocus, onBlur: onBlur, children: option.label }, option.value)))] }));
+}
+
 const CheckboxControlStyled = dt.span `
   display: inline-flex;
   align-items: center;
@@ -5693,6 +5728,36 @@ const FISCheckbox = React.forwardRef(({ className, children, subLabel, checked =
 });
 FISCheckbox.displayName = "FISCheckbox";
 
+const DivGroupContainerSC = dt.div `
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  flex-direction: ${props => props.$direction};
+`;
+const DivScreenReaderLabelSC = dt.div `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;
+
+function FISCheckboxGroup({ className, groupLabel, options, value = [], direction = "row", disabled, getOptionDisabled, onChange, onFocus, onBlur, }) {
+    const groupId = "checkbox-group-" + React.useId();
+    const validValue = value.filter((v) => options.some((option) => option.value === v));
+    const handleChange = (option) => {
+        const nextValue = validValue.includes(option.value)
+            ? validValue.filter((v) => v !== option.value)
+            : [...validValue, option.value];
+        onChange(nextValue);
+    };
+    return (jsxRuntime.jsxs(DivGroupContainerSC, { role: "group", className: className, "$direction": direction, "aria-labelledby": groupId, children: [jsxRuntime.jsx(DivScreenReaderLabelSC, { id: groupId, children: groupLabel }), options.map((option) => (jsxRuntime.jsx(FISCheckbox, { value: option.value, disabled: getOptionDisabled?.(option) ?? disabled, checked: value.includes(option.value), onChange: () => handleChange(option), onFocus: onFocus, onBlur: onBlur, children: option.label }, option.value)))] }));
+}
+
 var classnames = {exports: {}};
 
 /*!
@@ -6612,6 +6677,7 @@ const DivBadge = dt.div `
 const FISAvatar = ({ className, src, alt = "Avatar", badge = "rounded", size = "xl", icon, status = "green", color = "neutral", letter, isBadgeDot = true, }) => {
     return (jsxRuntime.jsxs(DivContainer, { className: className, "$size": size, "$badge": badge, "$color": color, children: [src ? (jsxRuntime.jsx(ImgAvatar, { "$size": size, "$badge": badge, src: src, alt: alt })) : icon ? (jsxRuntime.jsx(DivIcon, { "$size": size, "$badge": badge, children: icon })) : (jsxRuntime.jsx(SpanLetter, { "$size": size, "$badge": badge, "$color": color, children: letter?.slice(0, 2) })), isBadgeDot && jsxRuntime.jsx(DivBadge, { "$size": size, "$status": status })] }));
 };
+FISAvatar.displayName = "FISAvatar";
 
 const DicContainerSC = dt.div `
   display: flex;
@@ -7063,8 +7129,9 @@ FISInputStepper.displayName = "FISInputStepper";
 exports.FISAvatar = FISAvatar;
 exports.FISBreadcrumb = FISBreadcrumb;
 exports.FISButton = FISButton;
+exports.FISButtonGroup = FISButtonGroup;
 exports.FISCheckbox = FISCheckbox;
-exports.FISGroupButton = FISGroupButton;
+exports.FISCheckboxGroup = FISCheckboxGroup;
 exports.FISIconButton = FISIconButton;
 exports.FISInputField = FISInputField;
 exports.FISInputLabel = FISInputLabel;
@@ -7072,6 +7139,7 @@ exports.FISInputStepper = FISInputStepper;
 exports.FISInputText = FISInputText;
 exports.FISLinkButton = FISLinkButton;
 exports.FISRadio = FISRadio;
+exports.FISRadioGroup = FISRadioGroup;
 exports.FISTextArea = FISTextArea;
 exports.FISThemeProvider = FISThemeProvider;
 //# sourceMappingURL=index.js.map