@westpac/ui 0.4.0 → 0.6.0

package/src/components/modal/components/dialog/dialog.component.tsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { useDialog } from 'react-aria';
+import { useDialog, useFocusRing } from 'react-aria';
 
 import { CloseIcon } from '../../../../components/icon/index.js';
 
@@ -10,7 +10,8 @@ import { type DialogProps } from './dialog.types.js';
 
 export function Dialog({ className, body, onClose, size = 'md', ...props }: DialogProps) {
   const { children } = props;
-  const styles = dialogStyles({ className, size });
+  const { isFocusVisible, focusProps } = useFocusRing();
+  const styles = dialogStyles({ className, size, isFocusVisible });
 
   const ref = useRef(null);
 
@@ -19,7 +20,7 @@ export function Dialog({ className, body, onClose, size = 'md', ...props }: Dial
   return (
     <div {...dialogProps} ref={ref} className={styles.base()}>
       {onClose && (
-        <button className={styles.close()} onClick={onClose} aria-label="Close modal">
+        <button className={styles.close()} onClick={onClose} aria-label="Close modal" {...focusProps}>
           <CloseIcon className="block" size="small" />
         </button>
       )}

package/src/components/modal/components/dialog/dialog.styles.ts

@@ -3,9 +3,9 @@ import { tv } from 'tailwind-variants';
 export const styles = tv(
   {
     slots: {
-      base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white focus:focus-outline',
-      title: 'border-b border-b-heading pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
-      close: 'absolute right-1 top-1 block p-1 focus:focus-outline',
+      base: 'relative mx-auto max-w-full overflow-hidden rounded-[0.1875rem] bg-white outline-none',
+      title: 'border-b-heading border-b pb-2 pl-4 pr-5 pt-3 text-lg font-medium',
+      close: 'absolute right-1 top-1 block p-1',
     },
     variants: {
       size: {
@@ -19,6 +19,10 @@ export const styles = tv(
           base: 'w-[18.75rem]',
         },
       },
+      isFocusVisible: {
+        true: { close: 'focus-outline' },
+        false: { close: 'outline-none' },
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/popover/components/panel/panel.styles.ts

@@ -7,7 +7,7 @@ export const styles = tv(
       popover: 'border-muted absolute z-[999] rounded-[3px] border bg-white shadow-[0_5px_10px_rgba(0,0,0,0.2)]',
       arrow:
         'border-t-muted absolute h-0 w-0 border-x-[8px] border-t-[12px] border-x-[transparent] after:absolute after:h-0 after:w-0 after:border-x-[7px] after:border-t-[11px] after:border-x-[transparent] after:border-t-white',
-      closeBtn: 'focus:focus-outline absolute right-1 top-1 m-1 p-0 hover:opacity-80',
+      closeBtn: 'absolute right-1 top-1 m-1 p-0 hover:opacity-80',
       content: 'w-[17.625rem] py-4 pl-3 pr-5',
       heading: 'typography-body-9 mb-2 font-bold',
       body: 'typography-body-10',

package/src/components/popover/popover.component.tsx

@@ -47,7 +47,6 @@ export function Popover({
       <Button
         look={icon && !children ? 'link' : look}
         iconAfter={icon}
-        className={styles.button()}
         aria-expanded={state.isOpen}
         aria-controls={panelId}
         onClick={handleClick}

package/src/components/popover/popover.styles.ts

@@ -4,7 +4,6 @@ export const styles = tv(
   {
     slots: {
       base: 'relative inline-block',
-      button: 'focus:focus-outline',
     },
     variants: {},
   },

package/src/components/radio-group/components/radio/radio.component.tsx

@@ -11,8 +11,8 @@ function BaseRadio({ className, hint, children, ...props }: RadioProps, ref: any
   const { size, orientation } = state;
   const localRef = useRef(null);
   const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, localRef);
-  const { isFocusVisible, focusProps } = useFocusRing();
-  const styles = radioStyles({ isDisabled, isSelected, isFocusVisible, size, orientation });
+  const { isFocused, focusProps } = useFocusRing();
+  const styles = radioStyles({ isDisabled, isSelected, isFocused, size, orientation });
 
   return (
     <label className={styles.base({ className })} ref={ref}>

package/src/components/radio-group/components/radio/radio.styles.ts

@@ -6,8 +6,8 @@ export const styles = tv(
       base: 'flex',
       textWrapper: 'flex flex-col justify-center',
       labelText: 'typography-body-10 py-[2px] pl-1',
-      hintText: 'typography-body-10 pl-1 text-muted',
-      selector: 'flex h-4 w-4 items-center justify-center rounded-full border border-hero',
+      hintText: 'typography-body-10 text-muted pl-1',
+      selector: 'border-hero flex h-4 w-4 items-center justify-center rounded-full border',
     },
     variants: {
       isDisabled: {
@@ -21,11 +21,11 @@ export const styles = tv(
       },
       isSelected: {
         true: {
-          selector: 'before:block before:h-2 before:w-2 before:rounded-full before:bg-hero',
+          selector: 'before:bg-hero before:block before:h-2 before:w-2 before:rounded-full',
         },
       },
-      isFocusVisible: {
-        true: { selector: 'rounded-full focus-outline' },
+      isFocused: {
+        true: { selector: 'focus-outline' },
       },
       orientation: {
         horizontal: {

package/src/components/repeater/index.ts

@@ -0,0 +1,2 @@
+export { Repeater } from './repeater.component.js';
+export { type RepeaterProps } from './repeater.types.js';

package/src/components/repeater/repeater.component.tsx

@@ -0,0 +1,124 @@
+import { AnimatePresence, LazyMotion, m } from 'framer-motion';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { useFocusRing } from 'react-aria';
+
+import { generateID } from '../../utils/index.js';
+import { Button } from '../button/index.js';
+import { AddCircleIcon, IconProps, RemoveCircleIcon } from '../icon/index.js';
+import { VisuallyHidden } from '../index.js';
+
+import { styles as repeaterStyles } from './repeater.styles.js';
+import { type RepeaterProps } from './repeater.types.js';
+
+interface Action {
+  id?: string;
+  index: number;
+  type: string;
+}
+
+const loadAnimations = () => import('./repeater.utils.js').then(res => res.default);
+
+export function Repeater({
+  addText = 'Add another item',
+  indexTag: ItemIndex = 'h3',
+  children,
+  separator = false,
+  className,
+}: RepeaterProps) {
+  const [items, setItems] = useState([{ id: generateID() }]);
+  const [action, setAction] = useState<Action>({ type: '', index: 0 });
+  const [status, setStatus] = useState('');
+  const refArr = useRef<HTMLElement[]>([]);
+  const { isFocused, focusProps } = useFocusRing();
+
+  const handleAdd = useCallback(() => {
+    setItems([...items, { id: generateID() }]);
+    setAction({ type: 'add', index: items.length });
+  }, [items]);
+
+  const handleRemove = useCallback(
+    (id: string, index: number) => {
+      const newItems = items.filter(item => item.id !== id);
+      setItems(newItems);
+      setAction({ type: 'remove', index, id });
+    },
+    [items],
+  );
+
+  useEffect(() => {
+    if (action.type === 'add') {
+      refArr.current[items.length - 1]?.focus();
+      setStatus(`Item added`);
+    }
+
+    if (action.type === 'remove') {
+      refArr.current.splice(action.index, 1);
+      const focusIndex = action.index === 0 ? 0 : action.index - 1;
+      refArr.current[focusIndex]?.focus();
+      setStatus(`Item ${action.index + 1} removed`);
+    }
+  }, [items.length, action]);
+
+  const Tag = separator ? 'ol' : 'ul';
+  const styles = repeaterStyles({ separator, isFocused });
+
+  return (
+    <div className={styles.base({ className })}>
+      <Tag className={styles.list()}>
+        <LazyMotion features={loadAnimations}>
+          <AnimatePresence>
+            {items.map((item, index) => {
+              return (
+                <m.li
+                  initial={{ opacity: 1 }}
+                  animate={{ opacity: 1 }}
+                  exit={{ opacity: 0 }}
+                  transition={{ duration: 0.15 }}
+                  key={index}
+                >
+                  <div
+                    ref={(el: HTMLDivElement) => {
+                      refArr.current[index] = el;
+                    }}
+                    tabIndex={-1}
+                    className={styles.item()}
+                    {...focusProps}
+                  >
+                    {separator && <ItemIndex className={styles.itemIndex()}>{index + 1}.</ItemIndex>}
+                    <div className={styles.content()}>{children}</div>
+                    {items.length > 1 && (
+                      <Button
+                        className={styles.removeBtn()}
+                        aria-label={`remove item ${index + 1}`}
+                        iconBefore={(props: IconProps) => <RemoveCircleIcon {...props} aria-hidden size="xsmall" />}
+                        look="link"
+                        size="small"
+                        soft
+                        onClick={() => handleRemove(item.id, index)}
+                      >
+                        Remove
+                      </Button>
+                    )}
+                  </div>
+                </m.li>
+              );
+            })}
+          </AnimatePresence>
+        </LazyMotion>
+      </Tag>
+      <div className={styles.footer()}>
+        <Button
+          className={styles.addBtn()}
+          iconBefore={(props: IconProps) => <AddCircleIcon {...props} aria-hidden look="outlined" />}
+          look="link"
+          size="small"
+          soft
+          onClick={() => handleAdd()}
+        >
+          {addText}
+        </Button>
+      </div>
+      <VisuallyHidden role="status">{status}</VisuallyHidden>
+    </div>
+  );
+}

package/src/components/repeater/repeater.stories.tsx

@@ -0,0 +1,49 @@
+import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
+
+import { Form, Input } from '../index.js';
+
+import { Repeater } from './repeater.component.js';
+
+const meta: Meta<typeof Repeater> = {
+  title: 'Example/Repeater',
+  component: Repeater,
+  tags: ['autodocs'],
+  decorators: [
+    (Story: StoryFn) => (
+      <div className="p-5">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    children: (
+      <Form>
+        <Form.Group>
+          <Form.Label htmlFor={`test`}>Primary</Form.Label>
+          <Form.Hint>Primary title text</Form.Hint>
+          <Input name={`test`} onChange={(e: any) => console.log(e)} />
+        </Form.Group>
+      </Form>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+/**
+ * > Default usage example
+ */
+export const DefaultStory: Story = {
+  args: {},
+};
+
+/**
+ * > Example using the separator prop
+ */
+export const SeparatedRepeater: Story = {
+  args: { separator: true },
+};

package/src/components/repeater/repeater.styles.ts

@@ -0,0 +1,32 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: '',
+      list: 'm-0 list-none pl-0',
+      item: 'relative',
+      itemIndex: 'mb-[1.125rem] font-bold',
+      content: '',
+      removeBtn: 'absolute right-0 top-0 h-auto p-0 no-underline hover:underline',
+      footer: 'flex justify-between',
+      addBtn: 'height-auto p-0 no-underline hover:underline',
+    },
+    variants: {
+      separator: {
+        true: {
+          item: 'border-neutral border-t-2 pt-[0.625rem]',
+          content: 'p-[0_1.125rem_2.625rem]',
+          removeBtn: 'relative m-[0_0_1.875rem_1.125rem]',
+          footer: 'border-neutral border-t-2 pt-[0.875rem]',
+        },
+      },
+      isFocused: {
+        true: {
+          item: 'outline-none',
+        },
+      },
+    },
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/repeater/repeater.types.ts

@@ -0,0 +1,20 @@
+import { HTMLAttributes } from 'react';
+
+export type RepeaterProps = {
+  /**
+   * Text for add button
+   */
+  addText?: string;
+  /**
+   * Component to repeat
+   */
+  children: React.ReactNode;
+  /**
+   * Index heading tag to use for index on separator version
+   */
+  indexTag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  /**
+   * Enable separator version
+   */
+  separator?: boolean;
+} & HTMLAttributes<Element>;

package/src/components/repeater/repeater.utils.tsx

@@ -0,0 +1,3 @@
+import { domAnimation } from 'framer-motion';
+
+export default domAnimation;

package/src/components/select/select.component.tsx

@@ -1,4 +1,5 @@
 import React, { ForwardedRef, forwardRef } from 'react';
+import { mergeProps, useFocusRing } from 'react-aria';
 
 import { styles } from './select.styles.js';
 import { type SelectProps } from './select.types.js';
@@ -7,8 +8,9 @@ function BaseSelect(
   { className, size = 'medium', invalid = false, children, ...props }: SelectProps,
   ref: ForwardedRef<HTMLSelectElement>,
 ) {
+  const { isFocused, focusProps } = useFocusRing();
   return (
-    <select ref={ref} className={styles({ className, size, invalid })} {...props}>
+    <select ref={ref} className={styles({ className, size, invalid, isFocused })} {...mergeProps(props, focusProps)}>
       {children}
     </select>
   );

package/src/components/select/select.styles.ts

@@ -2,7 +2,7 @@ import { tv } from 'tailwind-variants';
 
 export const styles = tv(
   {
-    base: 'form-control bg-no-repeat select-caret disabled:form-control-disabled focus:focus-outline group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
+    base: 'form-control select-caret disabled:form-control-disabled bg-no-repeat group-[.add-on-after]:rounded-l-none group-[.add-on-before]:rounded-r-none',
     variants: {
       size: {
         small: 'form-control-small bg-[right_0.5625rem_center] pr-[calc(0.5rem+14px+0.5625rem)]',
@@ -14,6 +14,11 @@ export const styles = tv(
         true: 'border-danger',
         false: 'border-borderDark',
       },
+      isFocused: {
+        true: {
+          base: 'focus-outline',
+        },
+      },
     },
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },

package/src/components/selector/components/index.ts

@@ -0,0 +1,2 @@
+export * from './selector-checkbox-group/index.js';
+export * from './selector-radio-group/index.js';

package/src/components/selector/components/selector-checkbox-group/components/index.ts

@@ -0,0 +1 @@
+export * from './selector-checkbox-group-option/index.js';

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/index.ts

@@ -0,0 +1,2 @@
+export { SelectorCheckboxGroupOption } from './selector-checkbox-group-option.component.js';
+export { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.component.tsx

@@ -0,0 +1,96 @@
+import React, { forwardRef, useContext, useRef } from 'react';
+import { VisuallyHidden, mergeProps, useCheckboxGroupItem, useFocusRing } from 'react-aria';
+
+import {
+  FlexiCellAdornment,
+  FlexiCellBody,
+  FlexiCellButton,
+  FlexiCellCircle,
+  FlexiCellFooter,
+  FlexiCellHint,
+  FlexiCellLabel,
+} from '../../../../../../components/flexi-cell/index.js';
+import { ArrowRightIcon, TickIcon } from '../../../../../../components/icon/index.js';
+import { FlexiCell } from '../../../../../../components/index.js';
+import { SelectorCheckboxGroupContext } from '../../selector-checkbox-group.component.js';
+
+import { styles as selectorCheckboxGroupOptionStyles } from './selector-checkbox-group-option.styles.js';
+import { type SelectorCheckboxGroupOptionProps } from './selector-checkbox-group-option.types.js';
+
+function BaseSelectorCheckboxGroupOption(
+  {
+    className,
+    children,
+    value,
+    withBorder = true,
+    withArrow,
+    after,
+    badge,
+    badgeZIndex,
+    before,
+    body = true,
+    checkIcon = 'checkbox',
+    ...props
+  }: SelectorCheckboxGroupOptionProps,
+  ref: any,
+) {
+  const state = useContext(SelectorCheckboxGroupContext);
+  const localRef = useRef(null);
+  const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({ ...props, value, children }, state, localRef);
+  const { isFocused, focusProps } = useFocusRing();
+  const styles = selectorCheckboxGroupOptionStyles({
+    className,
+    isSelected,
+    isFocused,
+    isDisabled,
+    checkIcon,
+  });
+
+  const FinalIcon = checkIcon === 'checkbox' ? TickIcon : ArrowRightIcon;
+
+  return (
+    <FlexiCell
+      after={
+        <div className="flex gap-2">
+          {after}
+          <FinalIcon aria-hidden="true" className={styles.icon({})} />
+        </div>
+      }
+      badge={badge}
+      badgeZIndex={badgeZIndex}
+      before={before}
+      body={body}
+      withBorder={withBorder}
+      withArrow={withArrow}
+      tag="label"
+      ref={ref}
+      withHoverEffect
+      className={styles.base({})}
+    >
+      <VisuallyHidden>
+        <input {...mergeProps(inputProps, focusProps)} ref={localRef} />
+      </VisuallyHidden>
+      {children}
+    </FlexiCell>
+  );
+}
+
+export const SelectorCheckboxGroupOption = forwardRef(
+  BaseSelectorCheckboxGroupOption,
+) as React.ForwardRefExoticComponent<SelectorCheckboxGroupOptionProps & React.RefAttributes<unknown>> & {
+  Adornment: typeof FlexiCell.Adornment;
+  Body: typeof FlexiCell.Body;
+  Button: typeof FlexiCell.Button;
+  Circle: typeof FlexiCell.Circle;
+  Footer: typeof FlexiCell.Footer;
+  Hint: typeof FlexiCell.Hint;
+  Label: typeof FlexiCell.Label;
+};
+
+SelectorCheckboxGroupOption.Body = FlexiCellBody;
+SelectorCheckboxGroupOption.Footer = FlexiCellFooter;
+SelectorCheckboxGroupOption.Adornment = FlexiCellAdornment;
+SelectorCheckboxGroupOption.Hint = FlexiCellHint;
+SelectorCheckboxGroupOption.Label = FlexiCellLabel;
+SelectorCheckboxGroupOption.Button = FlexiCellButton;
+SelectorCheckboxGroupOption.Circle = FlexiCellCircle;

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.styles.ts

@@ -0,0 +1,53 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    slots: {
+      base: 'group/checkbox-option cursor-pointer',
+      icon: 'transition-transform',
+    },
+    variants: {
+      checkIcon: {
+        arrow: {
+          icon: 'text-primary group-hover/checkbox-option:translate-x-1',
+        },
+        checkbox: {},
+      },
+      isSelected: {
+        true: {
+          base: 'border-hero shadow-[0_0_0_2px_inset]',
+        },
+        false: {},
+      },
+      isFocused: {
+        true: {
+          base: 'focus-outline',
+        },
+        false: {},
+      },
+      isDisabled: {
+        true: {
+          base: 'opacity-50',
+        },
+        false: {},
+      },
+    },
+    compoundVariants: [
+      {
+        checkIcon: 'checkbox',
+        isSelected: false,
+        className: {
+          icon: 'opacity-0',
+        },
+      },
+      {
+        checkIcon: 'checkbox',
+        isSelected: true,
+        className: {
+          icon: 'opacity-100',
+        },
+      },
+    ],
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/selector/components/selector-checkbox-group/components/selector-checkbox-group-option/selector-checkbox-group-option.types.ts

@@ -0,0 +1,15 @@
+import { type AriaCheckboxGroupItemProps } from 'react-aria';
+import { type VariantProps } from 'tailwind-variants';
+
+import { FlexiCellProps } from '../../../../../index.js';
+
+import { styles } from './selector-checkbox-group-option.styles.js';
+
+export type SelectorCheckboxGroupOptionProps = {
+  /**
+   * Check icon to render
+   */
+  checkIcon?: 'checkbox' | 'arrow';
+} & FlexiCellProps &
+  VariantProps<typeof styles> &
+  Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;

package/src/components/selector/components/selector-checkbox-group/index.ts

@@ -0,0 +1,2 @@
+export { SelectorCheckboxGroup } from './selector-checkbox-group.component.js';
+export { type SelectorCheckboxGroupProps } from './selector-checkbox-group.types.js';

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.component.tsx

@@ -0,0 +1,46 @@
+import React, { createContext } from 'react';
+import { useCheckboxGroup } from 'react-aria';
+import { useCheckboxGroupState } from 'react-stately';
+
+import { SelectorCheckboxGroupOption } from './components/index.js';
+import { styles } from './selector-checkbox-group.styles.js';
+import {
+  type SelectorCheckboxGroupContextState,
+  type SelectorCheckboxGroupProps,
+} from './selector-checkbox-group.types.js';
+
+export const SelectorCheckboxGroupContext = createContext<SelectorCheckboxGroupContextState>({
+  value: [],
+  isDisabled: false,
+  isReadOnly: false,
+  isSelected: () => false,
+  setValue: () => null,
+  addValue: () => null,
+  removeValue: () => null,
+  toggleValue: () => null,
+  validationState: 'valid',
+});
+
+export function SelectorCheckboxGroup(props: SelectorCheckboxGroupProps) {
+  const { children, label, description, errorMessage } = props;
+  const state = useCheckboxGroupState(props);
+  const { groupProps, labelProps, descriptionProps, errorMessageProps } = useCheckboxGroup(props, state);
+
+  return (
+    <div {...groupProps} className={styles({ className: groupProps.className })}>
+      <span {...labelProps}>{label}</span>
+      <SelectorCheckboxGroupContext.Provider value={state}>{children}</SelectorCheckboxGroupContext.Provider>
+      {description && (
+        <div {...descriptionProps} style={{ fontSize: 12 }}>
+          {description}
+        </div>
+      )}
+      {errorMessage && state.validationState === 'invalid' && (
+        <div {...errorMessageProps} className="typography-body-10 text-danger">
+          {errorMessage}
+        </div>
+      )}
+    </div>
+  );
+}
+SelectorCheckboxGroup.Option = SelectorCheckboxGroupOption;

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.styles.ts

@@ -0,0 +1,9 @@
+import { tv } from 'tailwind-variants';
+
+export const styles = tv(
+  {
+    base: 'flex flex-col gap-2 md:gap-3',
+    variants: {},
+  },
+  { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
+);

package/src/components/selector/components/selector-checkbox-group/selector-checkbox-group.types.ts

@@ -0,0 +1,25 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { AriaCheckboxGroupProps } from 'react-aria';
+import { CheckboxGroupState } from 'react-stately';
+import { type VariantProps } from 'tailwind-variants';
+
+import { styles } from './selector-checkbox-group.styles.js';
+
+export type SelectorCheckboxGroupContextState = CheckboxGroupState;
+
+export type SelectorCheckboxGroupProps = {
+  /**
+   * String to override base style
+   */
+  className?: string;
+  /**
+   * Orientation of checkbox items
+   */
+  orientation?: 'horizontal' | 'vertical';
+  /**
+   * Controls size of `CheckboxItem` components, can't be applied directly to `CheckboxItem`
+   */
+  size?: 'medium' | 'large';
+} & AriaCheckboxGroupProps &
+  VariantProps<typeof styles> &
+  Omit<HTMLAttributes<Element>, 'onChange'>;

package/src/components/selector/components/selector-radio-group/components/index.ts

@@ -0,0 +1 @@
+export * from './selector-radio-group-option/index.js';

package/src/components/selector/components/selector-radio-group/components/selector-radio-group-option/index.ts

@@ -0,0 +1,2 @@
+export { SelectorRadioGroupOption } from './selector-radio-group-option.component.js';
+export { type SelectorRadioGroupOptionProps } from './selector-radio-group-option.types.js';