fis-component 0.0.22 → 0.0.23

package/dist/cjs/types/src/components/Avatar/Avatar.stories.d.ts

@@ -1,4 +1,4 @@
 import { Meta } from "@storybook/react";
 declare const _default: Meta;
 export default _default;
-export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./index").AvatarProps>;
+export declare const Default: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import(".").AvatarProps>;

package/dist/cjs/types/src/components/{GroupButton/GroupButton.stories.d.ts → ButtonGroup/ButtonGroup.stories.d.ts}

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import FISGroupButton from ".";
-declare const meta: Meta<typeof FISGroupButton>;
+import FISButtonGroup from ".";
+declare const meta: Meta<typeof FISButtonGroup>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;

package/dist/{esm/types/src/components/GroupButton → cjs/types/src/components/ButtonGroup}/index.d.ts

@@ -28,5 +28,5 @@ export interface GroupButtonProps {
     /** List of button options */
     options: ButtonOption[];
 }
-declare const FISGroupButton: React.FC<GroupButtonProps>;
-export default FISGroupButton;
+declare const FISButtonGroup: React.FC<GroupButtonProps>;
+export default FISButtonGroup;

package/dist/cjs/types/src/components/{GroupRadio → RadioGroup}/index.d.ts

@@ -16,6 +16,6 @@ type RadioGroupProps<T extends Value> = {
     onFocus?: () => void;
     onBlur?: () => void;
 };
-declare function RadioGroup<T extends Value>({ className, groupLabel, options, name, value, direction, disabled, getOptionDisabled, onChange, onFocus, onBlur, }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
-export default RadioGroup;
+declare function FISRadioGroup<T extends Value>({ className, groupLabel, options, name, value, direction, disabled, getOptionDisabled, onChange, onFocus, onBlur, }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+export default FISRadioGroup;
 export type { RadioGroupProps };

package/dist/cjs/types/src/index.d.ts

@@ -3,10 +3,12 @@ export type { ThemeType } from "./styles/design-system";
 export { default as FISButton } from "./components/Button";
 export { default as FISLinkButton } from "./components/LinkButton";
 export { default as FISIconButton } from "./components/IconButton";
-export { default as FISGroupButton } from "./components/GroupButton";
+export { default as FISButtonGroup } from "./components/ButtonGroup";
 export { default as FISBreadcrumb } from "./components/Breadcrumb";
 export { default as FISRadio } from "./components/Radio";
+export { default as FISRadioGroup } from "./components/RadioGroup";
 export { default as FISCheckbox } from "./components/Checkbox";
+export { default as FISCheckboxGroup } from "./components/CheckboxGroup";
 export { default as FISInputField } from "./components/Input/InputField";
 export { default as FISInputText } from "./components/Input/InputText";
 export { default as FISInputLabel } from "./components/Input/InputLabel";

package/dist/esm/index.js

@@ -4946,6 +4946,7 @@ const FISIconButton = forwardRef((props, ref) => {
     const { type, children, active = false, size = "md", variant = "primary", icon: iconProp, ...rest } = props;
     return (jsx(ButtonStyled, { ...rest, ref: ref, "$variant": variant, "$size": size, "$active": active, children: iconProp }));
 });
+FISIconButton.displayName = "FISIconButton";
 
 const GroupButtonContainerStyled = dt.div `
   overflow: hidden;
@@ -5216,7 +5217,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 (jsx(GroupButtonContainerStyled, { className: className, children: options.map((option, index) => (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 }) => {
@@ -5227,7 +5228,7 @@ const Button = ({ disabledContainer, startIcon: startIconProp, endIcon: endIconP
     return (jsxs(ButtonItemStyled, { ...rest, disabled: disabledContainer || disabled, "$onlyIcon": onlyIcon, "$size": size, "$variant": variant, children: [startIcon, label && jsx("span", { className: "button-content", children: label }), endIcon] }));
 };
 
-const DivContainerSC$3 = dt.div `
+const DivContainerSC$4 = dt.div `
   display: flex;
   align-items: center;
 `;
@@ -5307,8 +5308,9 @@ const BreadcrumbEllipsis = () => (jsxs(Fragment, { children: [jsx(DivIconDotSC,
 const FISBreadcrumb = ({ items, className }) => {
     if (items.length === 0)
         return null;
-    return (jsxs(DivContainerSC$3, { className: className, children: [items?.[0]?.icon && (jsxs(Fragment, { children: [jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsx(SeparatorIcon, {})] })), items.length > MAX_VISIBLE_ITEMS ? (jsxs(Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxs(React.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, index))), jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxs(React.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, `end-${index}`)))] })) : (jsx(Fragment, { children: items.slice(1).map((item, index) => (jsxs(React.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, index))) }))] }));
+    return (jsxs(DivContainerSC$4, { className: className, children: [items?.[0]?.icon && (jsxs(Fragment, { children: [jsx(FISIconButton, { size: "xs", icon: items?.[0]?.icon, variant: "tertiary-invisible", onClick: items[0].onClick }), jsx(SeparatorIcon, {})] })), items.length > MAX_VISIBLE_ITEMS ? (jsxs(Fragment, { children: [items.slice(1, 2).map((item, index) => (jsxs(React.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, index))), jsx(BreadcrumbEllipsis, {}), items.slice(-2).map((item, index) => (jsxs(React.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, `end-${index}`)))] })) : (jsx(Fragment, { children: items.slice(1).map((item, index) => (jsxs(React.Fragment, { children: [jsx(BreadcrumbItem, { ...item }), jsx(SeparatorIcon, {})] }, index))) }))] }));
 };
+FISBreadcrumb.displayName = "FISBreadcrumb";
 
 const SpanRadioControlSC = dt.span `
   display: inline-flex;
@@ -5496,6 +5498,39 @@ const FISRadio = forwardRef(({ className, children, subLabel, checked = false, d
 });
 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-" + useId();
+    const handleChange = (option) => {
+        onChange(option.value);
+    };
+    return (jsxs(DivContainerSC$3, { role: "radiogroup", className: className, "aria-labelledby": groupId, "$direction": direction, children: [jsx(DivScreenReaderLabelSC$1, { id: groupId, children: groupLabel }), options.map((option) => (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;
@@ -5691,6 +5726,36 @@ const FISCheckbox = forwardRef(({ className, children, subLabel, checked = false
 });
 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-" + 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 (jsxs(DivGroupContainerSC, { role: "group", className: className, "$direction": direction, "aria-labelledby": groupId, children: [jsx(DivScreenReaderLabelSC, { id: groupId, children: groupLabel }), options.map((option) => (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: {}};
 
 /*!
@@ -6610,6 +6675,7 @@ const DivBadge = dt.div `
 const FISAvatar = ({ className, src, alt = "Avatar", badge = "rounded", size = "xl", icon, status = "green", color = "neutral", letter, isBadgeDot = true, }) => {
     return (jsxs(DivContainer, { className: className, "$size": size, "$badge": badge, "$color": color, children: [src ? (jsx(ImgAvatar, { "$size": size, "$badge": badge, src: src, alt: alt })) : icon ? (jsx(DivIcon, { "$size": size, "$badge": badge, children: icon })) : (jsx(SpanLetter, { "$size": size, "$badge": badge, "$color": color, children: letter?.slice(0, 2) })), isBadgeDot && jsx(DivBadge, { "$size": size, "$status": status })] }));
 };
+FISAvatar.displayName = "FISAvatar";
 
 const DicContainerSC = dt.div `
   display: flex;
@@ -7058,5 +7124,5 @@ const FISInputStepper = forwardRef((props) => {
 });
 FISInputStepper.displayName = "FISInputStepper";
 
-export { FISAvatar, FISBreadcrumb, FISButton, FISCheckbox, FISGroupButton, FISIconButton, FISInputField, FISInputLabel, FISInputStepper, FISInputText, FISLinkButton, FISRadio, FISTextArea, FISThemeProvider };
+export { FISAvatar, FISBreadcrumb, FISButton, FISButtonGroup, FISCheckbox, FISCheckboxGroup, FISIconButton, FISInputField, FISInputLabel, FISInputStepper, FISInputText, FISLinkButton, FISRadio, FISRadioGroup, FISTextArea, FISThemeProvider };
 //# sourceMappingURL=index.js.map