@seed-design/react 1.1.17 → 1.2.1

package/src/components/SelectBox/CheckSelectBox.tsx

@@ -1,35 +1,154 @@
-import { selectBox } from "@seed-design/css/recipes/select-box";
-import { selectBoxGroup } from "@seed-design/css/recipes/select-box-group";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/select-box";
+import {
+  selectBoxCheckmark,
+  type SelectBoxCheckmarkVariantProps,
+} from "@seed-design/css/recipes/selectBoxCheckmark";
+import {
+  selectBoxGroup,
+  type SelectBoxGroupVariantProps,
+} from "@seed-design/css/recipes/select-box-group";
 import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
+import {
+  Collapsible,
+  CollapsibleProvider,
+  useCollapsible,
+  useCollapsibleContext,
+} from "@seed-design/react-collapsible";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { forwardRef } from "react";
-import { createRecipeContext } from "../../utils/createRecipeContext";
+import clsx from "clsx";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import { InternalIcon, type InternalIconProps } from "../private/Icon";
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } =
+  createSlotRecipeContext(selectBox);
 
-const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
-const { withContext, withProvider } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useCheckboxContext]);
 
+const FooterContext = createContext<{
+  isFooterRendered: boolean;
+  footerRef: (node: HTMLDivElement | null) => void;
+  footerVisibility: Exclude<NonNullable<CheckSelectBoxRootProps["footerVisibility"]>, "always">;
+} | null>(null);
 export interface CheckSelectBoxGroupProps
-  extends PrimitiveProps,
-    React.HTMLAttributes<HTMLDivElement> {}
+  extends SelectBoxGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of columns in the grid layout. When bigger than 1, child `CheckSelectBoxRoot` will have a default layout of "vertical".
+   * @default 1
+   */
+  columns?: number;
+}
+
+export const CheckSelectBoxGroup = forwardRef<HTMLDivElement, CheckSelectBoxGroupProps>(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+
+    return (
+      <PropsProvider value={{ layout }}>
+        <Primitive.div
+          ref={ref}
+          data-columns={columns}
+          className={clsx(recipeClassName, className)}
+          style={
+            {
+              ...style,
+              "--seed-select-box-group--columns": columns,
+            } as React.CSSProperties
+          }
+          {...otherProps}
+        />
+      </PropsProvider>
+    );
+  },
+);
+
+function FooterVisibilityProvider({
+  children,
+  footerVisibility,
+}: PropsWithChildren<{
+  footerVisibility: Exclude<NonNullable<CheckSelectBoxRootProps["footerVisibility"]>, "always">;
+}>) {
+  const { checked } = useCheckboxContext();
+
+  const collapsible = useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked,
+    }[footerVisibility],
+  });
+
+  const [isFooterRendered, setIsFooterRendered] = useState(false);
+  const footerRef = useCallback((node: HTMLDivElement | null) => {
+    setIsFooterRendered(!!node);
+  }, []);
+
+  return (
+    <CollapsibleProvider value={collapsible}>
+      <FooterContext.Provider value={{ isFooterRendered, footerRef, footerVisibility }}>
+        {children}
+      </FooterContext.Provider>
+    </CollapsibleProvider>
+  );
+}
 
-/**
- * CheckSelectBoxGroup is a simple div wrapper for future extensibility.
- * It does not have spacing by default, nesting <VStack> under it is recommended.
- */
-export const CheckSelectBoxGroup = withGroupContext<HTMLDivElement, CheckSelectBoxGroupProps>(
-  forwardRef<HTMLDivElement, CheckSelectBoxGroupProps>((props, ref) => (
-    <Primitive.div ref={ref} role="group" {...props} />
-  )),
+export interface CheckSelectBoxRootProps
+  extends SelectBoxVariantProps,
+    CheckboxPrimitive.RootProps {
+  /**
+   * Controls when the footer is visible.
+   * @default "when-selected"
+   */
+  footerVisibility?: "when-selected" | "when-not-selected" | "always";
+}
+
+export const CheckSelectBoxRoot = forwardRef<HTMLLabelElement, CheckSelectBoxRootProps>(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps,
+    });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <CheckboxPrimitive.Root
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...otherProps}
+        >
+          {footerVisibility === "always" ? (
+            children
+          ) : (
+            <FooterVisibilityProvider footerVisibility={footerVisibility}>
+              {children}
+            </FooterVisibilityProvider>
+          )}
+        </CheckboxPrimitive.Root>
+      </ClassNamesProvider>
+    );
+  },
 );
 
-export interface CheckSelectBoxRootProps extends CheckboxPrimitive.RootProps {}
+export interface CheckSelectBoxTriggerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
 
-export const CheckSelectBoxRoot = withProvider<HTMLLabelElement, CheckSelectBoxRootProps>(
-  CheckboxPrimitive.Root,
-  "root",
+export const CheckSelectBoxTrigger = withContext<HTMLDivElement, CheckSelectBoxTriggerProps>(
+  withStateProps(Primitive.div),
+  "trigger",
 );
 
 export interface CheckSelectBoxContentProps
@@ -41,20 +160,106 @@ export const CheckSelectBoxContent = withContext<HTMLDivElement, CheckSelectBoxC
   "content",
 );
 
+export interface CheckSelectBoxBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxBody = withContext<HTMLDivElement, CheckSelectBoxBodyProps>(
+  withStateProps(Primitive.div),
+  "body",
+);
+
 export interface CheckSelectBoxLabelProps
   extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
+    React.HTMLAttributes<HTMLDivElement> {}
 
-export const CheckSelectBoxLabel = withContext<HTMLSpanElement, CheckSelectBoxLabelProps>(
+export const CheckSelectBoxLabel = withContext<HTMLDivElement, CheckSelectBoxLabelProps>(
   withStateProps(Primitive.div),
   "label",
 );
 
 export interface CheckSelectBoxDescriptionProps
   extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
+    React.HTMLAttributes<HTMLDivElement> {}
 
 export const CheckSelectBoxDescription = withContext<
-  HTMLSpanElement,
+  HTMLDivElement,
   CheckSelectBoxDescriptionProps
 >(withStateProps(Primitive.div), "description");
+
+const { withProvider: withCheckmarkProvider, withContext: withCheckmarkContext } =
+  createSlotRecipeContext(selectBoxCheckmark);
+const withCheckmarkStateProps = createWithStateProps([useCheckboxContext]);
+
+export interface CheckSelectBoxCheckmarkControlProps
+  extends SelectBoxCheckmarkVariantProps,
+    CheckboxPrimitive.ControlProps {}
+
+export const CheckSelectBoxCheckmarkControl = withCheckmarkProvider<
+  HTMLDivElement,
+  CheckSelectBoxCheckmarkControlProps
+>(CheckboxPrimitive.Control, "root");
+
+export interface CheckSelectBoxCheckmarkIconProps extends InternalIconProps {}
+
+export const CheckSelectBoxCheckmarkIcon = withCheckmarkContext<
+  SVGSVGElement,
+  CheckSelectBoxCheckmarkIconProps
+>(withCheckmarkStateProps(InternalIcon), "icon");
+
+export interface CheckSelectBoxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {}
+
+export const CheckSelectBoxHiddenInput = forwardRef<
+  HTMLInputElement,
+  CheckSelectBoxHiddenInputProps
+>((props, ref) => {
+  // when footerVisibility !== "when-selected", this context is automatically unavailable since it's not wrapped in CollapsibleProvider
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+
+  const triggerAriaProps = footerContext?.isFooterRendered
+    ? collapsibleContext?.triggerAriaProps
+    : undefined;
+
+  return <CheckboxPrimitive.HiddenInput ref={ref} {...triggerAriaProps} {...props} />;
+});
+CheckSelectBoxHiddenInput.displayName = "CheckSelectBoxHiddenInput";
+
+export interface CheckSelectBoxFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const CheckSelectBoxFooter = forwardRef<HTMLDivElement, CheckSelectBoxFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useCheckboxContext();
+    const collapsibleContext = useCollapsibleContext({ strict: false });
+    const footerContext = useContext(FooterContext);
+    const composedRef = composeRefs(ref, footerContext?.footerRef ?? null);
+
+    if (collapsibleContext) {
+      return (
+        <Collapsible.Content
+          ref={composedRef}
+          className={clsx(classNames.footer, className)}
+          {...stateProps}
+          {...props}
+        >
+          {children}
+        </Collapsible.Content>
+      );
+    }
+
+    return (
+      <Primitive.div
+        ref={composedRef}
+        className={clsx(classNames.footer, className)}
+        {...stateProps}
+        {...props}
+      >
+        {children}
+      </Primitive.div>
+    );
+  },
+);
+CheckSelectBoxFooter.displayName = "CheckSelectBoxFooter";

package/src/components/SelectBox/RadioSelectBox.namespace.ts

@@ -1,12 +1,20 @@
 export {
+  RadioSelectBoxBody as Body,
   RadioSelectBoxContent as Content,
   RadioSelectBoxDescription as Description,
+  RadioSelectBoxFooter as Footer,
+  RadioSelectBoxGroup as Group,
+  RadioSelectBoxHiddenInput as HiddenInput,
   RadioSelectBoxItem as Item,
   RadioSelectBoxLabel as Label,
-  RadioSelectBoxRoot as Root,
+  RadioSelectBoxTrigger as Trigger,
+  type RadioSelectBoxBodyProps as BodyProps,
   type RadioSelectBoxContentProps as ContentProps,
   type RadioSelectBoxDescriptionProps as DescriptionProps,
+  type RadioSelectBoxFooterProps as FooterProps,
+  type RadioSelectBoxGroupProps as GroupProps,
+  type RadioSelectBoxHiddenInputProps as HiddenInputProps,
   type RadioSelectBoxItemProps as ItemProps,
   type RadioSelectBoxLabelProps as LabelProps,
-  type RadioSelectBoxRootProps as RootProps,
+  type RadioSelectBoxTriggerProps as TriggerProps,
 } from "./RadioSelectBox";

package/src/components/SelectBox/RadioSelectBox.tsx

@@ -1,29 +1,153 @@
-import { selectBox } from "@seed-design/css/recipes/select-box";
-import { selectBoxGroup } from "@seed-design/css/recipes/select-box-group";
+import { composeRefs } from "@radix-ui/react-compose-refs";
+import { selectBox, type SelectBoxVariantProps } from "@seed-design/css/recipes/select-box";
+import {
+  selectBoxGroup,
+  type SelectBoxGroupVariantProps,
+} from "@seed-design/css/recipes/select-box-group";
+import {
+  Collapsible,
+  CollapsibleProvider,
+  useCollapsible,
+  useCollapsibleContext,
+} from "@seed-design/react-collapsible";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import {
   RadioGroup as RadioGroupPrimitive,
   useRadioGroupItemContext,
 } from "@seed-design/react-radio-group";
-import { createRecipeContext } from "../../utils/createRecipeContext";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useState,
+  type PropsWithChildren,
+} from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
+import clsx from "clsx";
+
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } =
+  createSlotRecipeContext(selectBox);
 
-const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
-const { withContext, withProvider } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useRadioGroupItemContext]);
 
-export interface RadioSelectBoxRootProps extends RadioGroupPrimitive.RootProps {}
+const FooterContext = createContext<{
+  isFooterRendered: boolean;
+  footerRef: (node: HTMLDivElement | null) => void;
+  footerVisibility: Exclude<NonNullable<RadioSelectBoxItemProps["footerVisibility"]>, "always">;
+} | null>(null);
+
+export interface RadioSelectBoxGroupProps
+  extends SelectBoxGroupVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Number of columns in the grid layout. When bigger than 1, child `RadioSelectBoxItem` will have a default layout of "vertical".
+   * @default 1
+   */
+  columns?: number;
+}
 
-export const RadioSelectBoxRoot = withGroupContext<HTMLDivElement, RadioSelectBoxRootProps>(
-  RadioGroupPrimitive.Root,
+export const RadioSelectBoxGroup = forwardRef<HTMLDivElement, RadioSelectBoxGroupProps>(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+
+    return (
+      <PropsProvider value={{ layout }}>
+        <Primitive.div
+          ref={ref}
+          data-columns={columns}
+          className={clsx(recipeClassName, className)}
+          style={
+            {
+              ...style,
+              "--seed-select-box-group--columns": columns,
+            } as React.CSSProperties
+          }
+          {...otherProps}
+        />
+      </PropsProvider>
+    );
+  },
 );
 
-export interface RadioSelectBoxItemProps extends RadioGroupPrimitive.ItemProps {}
+function FooterVisibilityProvider({
+  children,
+  footerVisibility,
+}: PropsWithChildren<{
+  footerVisibility: Exclude<NonNullable<RadioSelectBoxItemProps["footerVisibility"]>, "always">;
+}>) {
+  const { checked } = useRadioGroupItemContext();
+
+  const collapsible = useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked,
+    }[footerVisibility],
+  });
+
+  const [isFooterRendered, setIsFooterRendered] = useState(false);
+  const footerRef = useCallback((node: HTMLDivElement | null) => {
+    setIsFooterRendered(!!node);
+  }, []);
+
+  return (
+    <CollapsibleProvider value={collapsible}>
+      <FooterContext.Provider value={{ isFooterRendered, footerRef, footerVisibility }}>
+        {children}
+      </FooterContext.Provider>
+    </CollapsibleProvider>
+  );
+}
+
+export interface RadioSelectBoxItemProps
+  extends SelectBoxVariantProps,
+    RadioGroupPrimitive.ItemProps {
+  /**
+   * Controls when the footer is visible.
+   * @default "when-selected"
+   */
+  footerVisibility?: "when-selected" | "when-not-selected" | "always";
+}
 
-export const RadioSelectBoxItem = withProvider<HTMLLabelElement, RadioSelectBoxItemProps>(
-  RadioGroupPrimitive.Item,
-  "root",
+export const RadioSelectBoxItem = forwardRef<HTMLLabelElement, RadioSelectBoxItemProps>(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps,
+    });
+
+    return (
+      <ClassNamesProvider value={classNames}>
+        <RadioGroupPrimitive.Item
+          ref={ref}
+          className={clsx(classNames.root, className)}
+          {...otherProps}
+        >
+          {footerVisibility === "always" ? (
+            children
+          ) : (
+            <FooterVisibilityProvider footerVisibility={footerVisibility}>
+              {children}
+            </FooterVisibilityProvider>
+          )}
+        </RadioGroupPrimitive.Item>
+      </ClassNamesProvider>
+    );
+  },
+);
+
+export interface RadioSelectBoxTriggerProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxTrigger = withContext<HTMLDivElement, RadioSelectBoxTriggerProps>(
+  withStateProps(Primitive.div),
+  "trigger",
 );
 
 export interface RadioSelectBoxContentProps
@@ -35,20 +159,90 @@ export const RadioSelectBoxContent = withContext<HTMLDivElement, RadioSelectBoxC
   "content",
 );
 
+export interface RadioSelectBoxBodyProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxBody = withContext<HTMLDivElement, RadioSelectBoxBodyProps>(
+  withStateProps(Primitive.div),
+  "body",
+);
+
 export interface RadioSelectBoxLabelProps
   extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
+    React.HTMLAttributes<HTMLDivElement> {}
 
-export const RadioSelectBoxLabel = withContext<HTMLSpanElement, RadioSelectBoxLabelProps>(
+export const RadioSelectBoxLabel = withContext<HTMLDivElement, RadioSelectBoxLabelProps>(
   withStateProps(Primitive.div),
   "label",
 );
 
 export interface RadioSelectBoxDescriptionProps
   extends PrimitiveProps,
-    React.HTMLAttributes<HTMLSpanElement> {}
+    React.HTMLAttributes<HTMLDivElement> {}
 
 export const RadioSelectBoxDescription = withContext<
-  HTMLSpanElement,
+  HTMLDivElement,
   RadioSelectBoxDescriptionProps
 >(withStateProps(Primitive.div), "description");
+
+export interface RadioSelectBoxHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {}
+
+export const RadioSelectBoxHiddenInput = forwardRef<
+  HTMLInputElement,
+  RadioSelectBoxHiddenInputProps
+>((props, ref) => {
+  // when footerVisibility !== "when-selected", this context is automatically unavailable since it's not wrapped in CollapsibleProvider
+
+  // NOTE: aria-expanded on role="radio" is not officially supported. See: https://github.com/w3c/aria/issues/1404
+  // but it helps some screen readers to announce the expanded/collapsed state of the footer.
+  // gov.uk applies aria-expanded on the radio input as well. See: https://design-system.service.gov.uk/components/radios/#conditionally-revealing-a-related-question
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+
+  const triggerAriaProps = footerContext?.isFooterRendered
+    ? collapsibleContext?.triggerAriaProps
+    : undefined;
+
+  return <RadioGroupPrimitive.ItemHiddenInput ref={ref} {...triggerAriaProps} {...props} />;
+});
+RadioSelectBoxHiddenInput.displayName = "RadioSelectBoxHiddenInput";
+
+export interface RadioSelectBoxFooterProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const RadioSelectBoxFooter = forwardRef<HTMLDivElement, RadioSelectBoxFooterProps>(
+  ({ className, children, ...props }, ref) => {
+    const classNames = useClassNames();
+    const { stateProps } = useRadioGroupItemContext();
+    const collapsibleContext = useCollapsibleContext({ strict: false });
+    const footerContext = useContext(FooterContext);
+    const composedRef = composeRefs(ref, footerContext?.footerRef ?? null);
+
+    if (collapsibleContext) {
+      return (
+        <Collapsible.Content
+          ref={composedRef}
+          className={clsx(classNames.footer, className)}
+          {...stateProps}
+          {...props}
+        >
+          {children}
+        </Collapsible.Content>
+      );
+    }
+
+    return (
+      <Primitive.div
+        ref={composedRef}
+        className={clsx(classNames.footer, className)}
+        {...stateProps}
+        {...props}
+      >
+        {children}
+      </Primitive.div>
+    );
+  },
+);
+RadioSelectBoxFooter.displayName = "RadioSelectBoxFooter";

package/src/components/SelectBox/index.ts

@@ -1,27 +1,47 @@
 export {
+  CheckSelectBoxBody,
+  CheckSelectBoxCheckmarkControl,
+  CheckSelectBoxCheckmarkIcon,
   CheckSelectBoxContent,
   CheckSelectBoxDescription,
+  CheckSelectBoxFooter,
   CheckSelectBoxGroup,
+  CheckSelectBoxHiddenInput,
   CheckSelectBoxLabel,
   CheckSelectBoxRoot,
+  CheckSelectBoxTrigger,
+  type CheckSelectBoxBodyProps,
+  type CheckSelectBoxCheckmarkControlProps,
+  type CheckSelectBoxCheckmarkIconProps,
   type CheckSelectBoxContentProps,
   type CheckSelectBoxDescriptionProps,
+  type CheckSelectBoxFooterProps,
   type CheckSelectBoxGroupProps,
+  type CheckSelectBoxHiddenInputProps,
   type CheckSelectBoxLabelProps,
   type CheckSelectBoxRootProps,
+  type CheckSelectBoxTriggerProps,
 } from "./CheckSelectBox";
 
 export {
+  RadioSelectBoxBody,
   RadioSelectBoxContent,
   RadioSelectBoxDescription,
+  RadioSelectBoxFooter,
+  RadioSelectBoxGroup,
+  RadioSelectBoxHiddenInput,
   RadioSelectBoxItem,
   RadioSelectBoxLabel,
-  RadioSelectBoxRoot,
+  RadioSelectBoxTrigger,
+  type RadioSelectBoxBodyProps,
   type RadioSelectBoxContentProps,
   type RadioSelectBoxDescriptionProps,
+  type RadioSelectBoxFooterProps,
+  type RadioSelectBoxGroupProps,
+  type RadioSelectBoxHiddenInputProps,
   type RadioSelectBoxItemProps,
   type RadioSelectBoxLabelProps,
-  type RadioSelectBoxRootProps,
+  type RadioSelectBoxTriggerProps,
 } from "./RadioSelectBox";
 
 export * as CheckSelectBox from "./CheckSelectBox.namespace";

package/src/components/Switch/Switch.tsx

@@ -1,6 +1,6 @@
 import { Switch as SwitchPrimitive, useSwitchContext } from "@seed-design/react-switch";
 import { switchStyle, type SwitchVariantProps } from "@seed-design/css/recipes/switch";
-import { switchMark, type SwitchMarkVariantProps } from "@seed-design/css/recipes/switch-mark";
+import { switchmark, type SwitchmarkVariantProps } from "@seed-design/css/recipes/switchmark";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import { createWithStateProps } from "../../utils/createWithStateProps";
@@ -13,7 +13,7 @@ const {
   withContext: withControlContext,
   PropsProvider: ControlPropsProvider,
   withProvider: withControlProvider,
-} = createSlotRecipeContext(switchMark);
+} = createSlotRecipeContext(switchmark);
 const withStateProps = createWithStateProps([useSwitchContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -25,7 +25,7 @@ type SwitchVariantDeprecatedSizeProps = "small" | "medium";
 
 export interface SwitchRootProps
   extends Omit<SwitchVariantProps, "size">,
-    Omit<SwitchMarkVariantProps, "size">,
+    Omit<SwitchmarkVariantProps, "size">,
     SwitchPrimitive.RootProps {
   size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
 }
@@ -41,20 +41,20 @@ export const SwitchRoot = React.forwardRef<HTMLLabelElement, SwitchRootProps>(
       );
     }
 
-    const [{ switch: switchVariantProps, switchMark: switchMarkVariantProps }, otherProps] =
+    const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, otherProps] =
       splitMultipleVariantsProps(
         {
           ...props,
           // TODO: replace this mapping completely
           size: props.size === "small" ? "16" : props.size === "medium" ? "32" : props.size,
         },
-        { switchMark, switch: switchStyle },
+        { switchmark, switch: switchStyle },
       );
 
     const classNames = switchStyle(switchVariantProps);
 
     return (
-      <ControlPropsProvider value={switchMarkVariantProps}>
+      <ControlPropsProvider value={switchmarkVariantProps}>
         <ClassNamesProvider value={classNames}>
           <SwitchPrimitive.Root
             ref={ref}
@@ -70,7 +70,7 @@ SwitchRoot.displayName = "SwitchRoot";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface SwitchControlProps extends SwitchMarkVariantProps, SwitchPrimitive.ControlProps {}
+export interface SwitchControlProps extends SwitchmarkVariantProps, SwitchPrimitive.ControlProps {}
 
 export const SwitchControl = withControlProvider<HTMLDivElement, SwitchControlProps>(
   SwitchPrimitive.Control,

package/src/components/TagGroup/TagGroup.namespace.ts

@@ -1,6 +1,8 @@
 export {
   TagGroupRoot as Root,
   TagGroupItem as Item,
+  TagGroupItemLabel as ItemLabel,
   type TagGroupRootProps as RootProps,
   type TagGroupItemProps as ItemProps,
+  type TagGroupItemLabelProps as ItemLabelProps,
 } from "./TagGroup";