@seed-design/react 0.2.2 → 0.2.3

package/lib/index.cjs

@@ -33,10 +33,10 @@ const ExtendedActionSheet = require('./components/ExtendedActionSheet/ExtendedAc
 const ExtendedActionSheet_namespace = require('./components/ExtendedActionSheet/ExtendedActionSheet.namespace.cjs');
 const ExtendedFab = require('./components/ExtendedFab/ExtendedFab.cjs');
 const Fab = require('./components/Fab/Fab.cjs');
-const FloatingActionButton = require('./components/FloatingActionButton/FloatingActionButton.cjs');
-const FloatingActionButton_namespace = require('./components/FloatingActionButton/FloatingActionButton.namespace.cjs');
 const Flex = require('./components/Flex/Flex.cjs');
 const Float = require('./components/Float/Float.cjs');
+const FloatingActionButton = require('./components/FloatingActionButton/FloatingActionButton.cjs');
+const FloatingActionButton_namespace = require('./components/FloatingActionButton/FloatingActionButton.namespace.cjs');
 const HelpBubble = require('./components/HelpBubble/HelpBubble.cjs');
 const HelpBubble_namespace = require('./components/HelpBubble/HelpBubble.namespace.cjs');
 const Icon = require('./components/Icon/Icon.cjs');
@@ -46,6 +46,8 @@ const Inline = require('./components/Inline/Inline.cjs');
 const InlineBanner = require('./components/InlineBanner/InlineBanner.cjs');
 const InlineBanner_namespace = require('./components/InlineBanner/InlineBanner.namespace.cjs');
 const LinkContent = require('./components/LinkContent/LinkContent.cjs');
+const List = require('./components/List/List.cjs');
+const List_namespace = require('./components/List/List.namespace.cjs');
 const LoadingIndicator = require('./components/LoadingIndicator/LoadingIndicator.cjs');
 const MannerTemp = require('./components/MannerTemp/MannerTemp.cjs');
 const MannerTempEmote = require('./components/MannerTemp/MannerTempEmote.cjs');
@@ -60,6 +62,8 @@ const ProgressCircle = require('./components/ProgressCircle/ProgressCircle.cjs')
 const ProgressCircle_namespace = require('./components/ProgressCircle/ProgressCircle.namespace.cjs');
 const PullToRefresh = require('./components/PullToRefresh/PullToRefresh.cjs');
 const PullToRefresh_namespace = require('./components/PullToRefresh/PullToRefresh.namespace.cjs');
+const RadioGroup = require('./components/RadioGroup/RadioGroup.cjs');
+const RadioGroup_namespace = require('./components/RadioGroup/RadioGroup.namespace.cjs');
 const ReactionButton = require('./components/ReactionButton/ReactionButton.cjs');
 const ResponsivePair = require('./components/ResponsivePair/ResponsivePair.cjs');
 const SegmentedControl = require('./components/SegmentedControl/SegmentedControl.cjs');
@@ -181,12 +185,12 @@ exports.ExtendedActionSheetTrigger = ExtendedActionSheet.ExtendedActionSheetTrig
 exports.ExtendedActionSheet = ExtendedActionSheet_namespace;
 exports.ExtendedFab = ExtendedFab.ExtendedFab;
 exports.Fab = Fab.Fab;
+exports.Flex = Flex.Flex;
+exports.Float = Float.Float;
 exports.FloatingActionButtonIcon = FloatingActionButton.FloatingActionButtonIcon;
 exports.FloatingActionButtonLabel = FloatingActionButton.FloatingActionButtonLabel;
 exports.FloatingActionButtonRoot = FloatingActionButton.FloatingActionButtonRoot;
 exports.FloatingActionButton = FloatingActionButton_namespace;
-exports.Flex = Flex.Flex;
-exports.Float = Float.Float;
 exports.HelpBubbleAnchor = HelpBubble.HelpBubbleAnchor;
 exports.HelpBubbleArrow = HelpBubble.HelpBubbleArrow;
 exports.HelpBubbleArrowTip = HelpBubble.HelpBubbleArrowTip;
@@ -213,6 +217,14 @@ exports.InlineBannerRoot = InlineBanner.InlineBannerRoot;
 exports.InlineBannerTitle = InlineBanner.InlineBannerTitle;
 exports.InlineBanner = InlineBanner_namespace;
 exports.LinkContent = LinkContent.LinkContent;
+exports.ListContent = List.ListContent;
+exports.ListDetail = List.ListDetail;
+exports.ListItem = List.ListItem;
+exports.ListPrefix = List.ListPrefix;
+exports.ListRoot = List.ListRoot;
+exports.ListSuffix = List.ListSuffix;
+exports.ListTitle = List.ListTitle;
+exports.List = List_namespace;
 exports.LoadingIndicator = LoadingIndicator.LoadingIndicator;
 exports.MannerTemp = MannerTemp.MannerTemp;
 exports.MannerTempEmote = MannerTempEmote.MannerTempEmote;
@@ -251,6 +263,13 @@ exports.PullToRefreshContent = PullToRefresh.PullToRefreshContent;
 exports.PullToRefreshIndicator = PullToRefresh.PullToRefreshIndicator;
 exports.PullToRefreshRoot = PullToRefresh.PullToRefreshRoot;
 exports.PullToRefresh = PullToRefresh_namespace;
+exports.RadioGroupItem = RadioGroup.RadioGroupItem;
+exports.RadioGroupItemControl = RadioGroup.RadioGroupItemControl;
+exports.RadioGroupItemHiddenInput = RadioGroup.RadioGroupItemHiddenInput;
+exports.RadioGroupItemIndicator = RadioGroup.RadioGroupItemIndicator;
+exports.RadioGroupItemLabel = RadioGroup.RadioGroupItemLabel;
+exports.RadioGroupRoot = RadioGroup.RadioGroupRoot;
+exports.RadioGroup = RadioGroup_namespace;
 exports.ReactionButton = ReactionButton.ReactionButton;
 exports.ResponsivePair = ResponsivePair.ResponsivePair;
 exports.SegmentedControlIndicator = SegmentedControl.SegmentedControlIndicator;
@@ -259,18 +278,12 @@ exports.SegmentedControlItemHiddenInput = SegmentedControl.SegmentedControlItemH
 exports.SegmentedControlRoot = SegmentedControl.SegmentedControlRoot;
 exports.SegmentedControl = SegmentedControl_namespace;
 exports.CheckSelectBoxContent = CheckSelectBox.CheckSelectBoxContent;
-exports.CheckSelectBoxControl = CheckSelectBox.CheckSelectBoxControl;
 exports.CheckSelectBoxDescription = CheckSelectBox.CheckSelectBoxDescription;
 exports.CheckSelectBoxGroup = CheckSelectBox.CheckSelectBoxGroup;
-exports.CheckSelectBoxHiddenInput = CheckSelectBox.CheckSelectBoxHiddenInput;
-exports.CheckSelectBoxIcon = CheckSelectBox.CheckSelectBoxIcon;
 exports.CheckSelectBoxLabel = CheckSelectBox.CheckSelectBoxLabel;
 exports.CheckSelectBoxRoot = CheckSelectBox.CheckSelectBoxRoot;
 exports.RadioSelectBoxContent = RadioSelectBox.RadioSelectBoxContent;
-exports.RadioSelectBoxControl = RadioSelectBox.RadioSelectBoxControl;
 exports.RadioSelectBoxDescription = RadioSelectBox.RadioSelectBoxDescription;
-exports.RadioSelectBoxHiddenInput = RadioSelectBox.RadioSelectBoxHiddenInput;
-exports.RadioSelectBoxIcon = RadioSelectBox.RadioSelectBoxIcon;
 exports.RadioSelectBoxItem = RadioSelectBox.RadioSelectBoxItem;
 exports.RadioSelectBoxLabel = RadioSelectBox.RadioSelectBoxLabel;
 exports.RadioSelectBoxRoot = RadioSelectBox.RadioSelectBoxRoot;

package/lib/index.js

@@ -38,11 +38,11 @@ import * as ExtendedActionSheet_namespace from './components/ExtendedActionSheet
 export { ExtendedActionSheet_namespace as ExtendedActionSheet };
 export { ExtendedFab } from './components/ExtendedFab/ExtendedFab.js';
 export { Fab } from './components/Fab/Fab.js';
+export { Flex } from './components/Flex/Flex.js';
+export { Float } from './components/Float/Float.js';
 export { FloatingActionButtonIcon, FloatingActionButtonLabel, FloatingActionButtonRoot } from './components/FloatingActionButton/FloatingActionButton.js';
 import * as FloatingActionButton_namespace from './components/FloatingActionButton/FloatingActionButton.namespace.js';
 export { FloatingActionButton_namespace as FloatingActionButton };
-export { Flex } from './components/Flex/Flex.js';
-export { Float } from './components/Float/Float.js';
 export { HelpBubbleAnchor, HelpBubbleArrow, HelpBubbleArrowTip, HelpBubbleCloseButton, HelpBubbleContent, HelpBubbleDescription, HelpBubblePositioner, HelpBubbleRoot, HelpBubbleTitle, HelpBubbleTrigger } from './components/HelpBubble/HelpBubble.js';
 import * as HelpBubble_namespace from './components/HelpBubble/HelpBubble.namespace.js';
 export { HelpBubble_namespace as HelpBubble };
@@ -55,6 +55,9 @@ export { InlineBannerCloseButton, InlineBannerContent, InlineBannerDescription,
 import * as InlineBanner_namespace from './components/InlineBanner/InlineBanner.namespace.js';
 export { InlineBanner_namespace as InlineBanner };
 export { LinkContent } from './components/LinkContent/LinkContent.js';
+export { ListContent, ListDetail, ListItem, ListPrefix, ListRoot, ListSuffix, ListTitle } from './components/List/List.js';
+import * as List_namespace from './components/List/List.namespace.js';
+export { List_namespace as List };
 export { LoadingIndicator } from './components/LoadingIndicator/LoadingIndicator.js';
 export { MannerTemp } from './components/MannerTemp/MannerTemp.js';
 export { MannerTempEmote } from './components/MannerTemp/MannerTempEmote.js';
@@ -73,13 +76,16 @@ export { ProgressCircle_namespace as ProgressCircle };
 export { PullToRefreshContent, PullToRefreshIndicator, PullToRefreshRoot } from './components/PullToRefresh/PullToRefresh.js';
 import * as PullToRefresh_namespace from './components/PullToRefresh/PullToRefresh.namespace.js';
 export { PullToRefresh_namespace as PullToRefresh };
+export { RadioGroupItem, RadioGroupItemControl, RadioGroupItemHiddenInput, RadioGroupItemIndicator, RadioGroupItemLabel, RadioGroupRoot } from './components/RadioGroup/RadioGroup.js';
+import * as RadioGroup_namespace from './components/RadioGroup/RadioGroup.namespace.js';
+export { RadioGroup_namespace as RadioGroup };
 export { ReactionButton } from './components/ReactionButton/ReactionButton.js';
 export { ResponsivePair } from './components/ResponsivePair/ResponsivePair.js';
 export { SegmentedControlIndicator, SegmentedControlItem, SegmentedControlItemHiddenInput, SegmentedControlRoot } from './components/SegmentedControl/SegmentedControl.js';
 import * as SegmentedControl_namespace from './components/SegmentedControl/SegmentedControl.namespace.js';
 export { SegmentedControl_namespace as SegmentedControl };
-export { CheckSelectBoxContent, CheckSelectBoxControl, CheckSelectBoxDescription, CheckSelectBoxGroup, CheckSelectBoxHiddenInput, CheckSelectBoxIcon, CheckSelectBoxLabel, CheckSelectBoxRoot } from './components/SelectBox/CheckSelectBox.js';
-export { RadioSelectBoxContent, RadioSelectBoxControl, RadioSelectBoxDescription, RadioSelectBoxHiddenInput, RadioSelectBoxIcon, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxRoot } from './components/SelectBox/RadioSelectBox.js';
+export { CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot } from './components/SelectBox/CheckSelectBox.js';
+export { RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxRoot } from './components/SelectBox/RadioSelectBox.js';
 import * as CheckSelectBox_namespace from './components/SelectBox/CheckSelectBox.namespace.js';
 export { CheckSelectBox_namespace as CheckSelectBox };
 import * as RadioSelectBox_namespace from './components/SelectBox/RadioSelectBox.namespace.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -58,12 +58,12 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.2.1",
+    "@seed-design/css": "0.2.3",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.2.1",
+    "@seed-design/css": "0.2.3",
     "@vitejs/plugin-react": "^5.0.0",
     "ajv": "^8.17.1",
     "globby": "^14.1.0",

package/src/components/Checkbox/Checkbox.tsx

@@ -1,31 +1,66 @@
+import { checkbox, type CheckboxVariantProps } from "@seed-design/css/recipes/checkbox";
+import { checkmark, type CheckmarkVariantProps } from "@seed-design/css/recipes/checkmark";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Checkbox as CheckboxPrimitive, useCheckboxContext } from "@seed-design/react-checkbox";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
-import { checkbox, type CheckboxVariantProps } from "@seed-design/css/recipes/checkbox";
+import clsx from "clsx";
 import { forwardRef } from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { createWithStateProps } from "../../utils/createWithStateProps";
 import { InternalIcon } from "../private/Icon";
 
-const { withProvider, withContext, useClassNames } = createSlotRecipeContext(checkbox);
+const { ClassNamesProvider, withContext } = createSlotRecipeContext(checkbox);
+const {
+  withProvider: withCheckmarkProvider,
+  useClassNames: useCheckmarkClassNames,
+  PropsProvider: CheckmarkPropsProvider,
+} = createSlotRecipeContext(checkmark);
 const withStateProps = createWithStateProps([useCheckboxContext]);
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface CheckboxRootProps extends CheckboxVariantProps, CheckboxPrimitive.RootProps {}
-
-export const CheckboxRoot = withProvider<HTMLLabelElement, CheckboxRootProps>(
-  CheckboxPrimitive.Root,
-  "root",
+export interface CheckboxRootProps
+  extends CheckboxVariantProps,
+    CheckmarkVariantProps,
+    CheckboxPrimitive.RootProps {}
+
+export const CheckboxRoot = Object.assign(
+  forwardRef<HTMLLabelElement, CheckboxRootProps>(({ className, ...props }, ref) => {
+    const [checkboxVariantProps, otherProps] = checkbox.splitVariantProps(props);
+    const [checkmarkVariantProps] = checkmark.splitVariantProps(props);
+    const classNames = checkbox(checkboxVariantProps);
+
+    return (
+      <CheckmarkPropsProvider value={checkmarkVariantProps}>
+        <ClassNamesProvider value={classNames}>
+          <CheckboxPrimitive.Root
+            ref={ref}
+            className={clsx(classNames.root, className)}
+            {...otherProps}
+          />
+        </ClassNamesProvider>
+      </CheckmarkPropsProvider>
+    );
+  }),
+  {
+    Primitive: CheckboxPrimitive.Root,
+  },
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
 
-export interface CheckboxControlProps extends CheckboxPrimitive.ControlProps {}
+/**
+ * CheckboxControl combines Checkbox.Primitive with checkmark.root styling
+ * This enables standalone usage of Checkbox.Control with variants
+ */
 
-export const CheckboxControl = withContext<HTMLDivElement, CheckboxControlProps>(
+export interface CheckboxControlProps
+  extends CheckmarkVariantProps,
+    CheckboxPrimitive.ControlProps {}
+
+export const CheckboxControl = withCheckmarkProvider<HTMLDivElement, CheckboxControlProps>(
   CheckboxPrimitive.Control,
-  "control",
+  "root",
 );
 
 ////////////////////////////////////////////////////////////////////////////////////
@@ -58,7 +93,7 @@ export const CheckboxIndicator = forwardRef<SVGSVGElement, CheckboxIndicatorProp
     ref,
   ) => {
     const { stateProps, checked, indeterminate } = useCheckboxContext();
-    const classNames = useClassNames();
+    const classNames = useCheckmarkClassNames();
 
     const mergedProps = mergeProps(
       stateProps,

package/src/components/Divider/Divider.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Box, type BoxProps } from "../Box/Box";
 
-export interface DividerProps {
+export interface DividerProps extends Omit<React.HTMLAttributes<HTMLHRElement>, "color"> {
   /**
    * The HTML element to use for the divider.
    * Keep in mind that "hr" elements are read by screen readers as a semantic break with an implicit role="separator"
@@ -18,43 +18,44 @@ export interface DividerProps {
   /**
    * @default 1
    */
-  thickness?: BoxProps["borderBottomWidth"];
+  thickness?: BoxProps["borderWidth"];
 
   /**
    * @default "horizontal"
    */
   orientation?: "horizontal" | "vertical";
-
-  role?: Extract<React.AriaRole, "separator">;
 }
 
-export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
-  const {
-    as = "hr",
-    color = "stroke.neutralMuted",
-    thickness = 1,
-    orientation = "horizontal",
-    role,
-    ...rest
-  } = props;
-
-  return (
-    <Box
-      ref={ref}
-      as={as}
-      role={role}
-      // if hr, aria-orientation=horizontal is implied if not specified
-      // if not hr, aria-orientation is needed
-      {...(((as === "hr" && orientation !== "horizontal") ||
-        (as !== "hr" && role === "separator")) && {
-        "aria-orientation": orientation,
-      })}
-      display="block"
-      borderColor={color}
-      borderWidth={0}
-      {...(orientation === "vertical" && { borderRightWidth: thickness })}
-      {...(orientation === "horizontal" && { borderBottomWidth: thickness })}
-      {...rest}
-    />
-  );
-});
+export const Divider = React.forwardRef<HTMLHRElement, DividerProps>(
+  (
+    {
+      as = "hr",
+      color = "stroke.neutralMuted",
+      thickness = 1,
+      orientation = "horizontal",
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <Box
+        ref={ref}
+        as={as}
+        // if hr, aria-orientation=horizontal is implied if not specified
+        {...(((as === "hr" &&
+          orientation !== "horizontal" &&
+          (props.role === undefined || props.role === "separator")) ||
+          // if not hr but role is separator aria-orientation is needed
+          (as !== "hr" && props.role === "separator")) && {
+          "aria-orientation": orientation,
+        })}
+        display="block"
+        borderColor={color}
+        borderWidth={0}
+        {...(orientation === "vertical" && { borderRightWidth: thickness })}
+        {...(orientation === "horizontal" && { borderBottomWidth: thickness })}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/LinkContent/LinkContent.tsx

@@ -6,12 +6,18 @@ import { withStyleProps, type StyleProps } from "../../utils/styled";
 
 const { withContext } = createRecipeContext(linkContent);
 
+/**
+ * @deprecated Use `ActionButton` with variant="ghost" instead.
+ */
 export interface LinkContentProps
   extends LinkContentVariantProps,
     PrimitiveProps,
     Pick<StyleProps, "color">,
     Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {}
 
+/**
+ * @deprecated Use `ActionButton` with variant="ghost" instead.
+ */
 export const LinkContent = withContext<HTMLButtonElement, LinkContentProps>(
   withStyleProps(Primitive.span),
 );

package/src/components/List/List.namespace.ts

@@ -0,0 +1,16 @@
+export {
+  ListContent as Content,
+  ListDetail as Detail,
+  ListItem as Item,
+  ListPrefix as Prefix,
+  ListRoot as Root,
+  ListSuffix as Suffix,
+  ListTitle as Title,
+  type ListContentProps as ContentProps,
+  type ListDetailProps as DetailProps,
+  type ListItemProps as ItemProps,
+  type ListPrefixProps as PrefixProps,
+  type ListRootProps as RootProps,
+  type ListSuffixProps as SuffixProps,
+  type ListTitleProps as TitleProps,
+} from "./List";

package/src/components/List/List.tsx

@@ -0,0 +1,79 @@
+import type * as React from "react";
+
+import { listItem, type ListItemVariantProps } from "@seed-design/css/recipes/list-item";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { withStyleProps, type StyleProps } from "../../utils/styled";
+import { VStack, type VStackProps } from "../Stack";
+import { useCheckboxContext } from "@seed-design/react-checkbox";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { useRadioGroupItemContext } from "@seed-design/react-radio-group";
+
+const { withContext, withProvider } = createSlotRecipeContext(listItem);
+const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
+  strict: false,
+});
+
+export interface ListRootProps extends VStackProps {}
+
+export const ListRoot = forwardRef<HTMLUListElement, ListRootProps>(
+  ({ as = "ul", ...props }, ref) => {
+    return <VStack as={as} ref={ref as React.ForwardedRef<HTMLDivElement>} {...props} />;
+  },
+);
+
+export interface ListItemProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "alignItems">,
+    React.HTMLAttributes<HTMLLIElement>,
+    ListItemVariantProps {}
+
+export const ListItem = withProvider<HTMLLIElement, ListItemProps>(
+  withStateProps(withStyleProps(Primitive.li)),
+  "root",
+);
+
+export interface ListContentProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "gap" | "pr" | "paddingRight">,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ListContent = withContext<HTMLDivElement, ListContentProps>(
+  withStateProps(withStyleProps(Primitive.div)),
+  "content",
+);
+
+export interface ListPrefixProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "pr" | "paddingRight">,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ListPrefix = withContext<HTMLDivElement, ListPrefixProps>(
+  withStateProps(withStyleProps(Primitive.div)),
+  "prefix",
+);
+
+export interface ListSuffixProps
+  extends PrimitiveProps,
+    Pick<StyleProps, "gap" | "position">,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ListSuffix = withContext<HTMLDivElement, ListSuffixProps>(
+  withStateProps(withStyleProps(Primitive.div)),
+  "suffix",
+);
+
+export interface ListTitleProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const ListTitle = withContext<HTMLDivElement, ListTitleProps>(
+  withStateProps(Primitive.div),
+  "title",
+);
+
+export interface ListDetailProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+
+export const ListDetail = withContext<HTMLDivElement, ListDetailProps>(
+  withStateProps(Primitive.div),
+  "detail",
+);

package/src/components/List/index.ts

@@ -0,0 +1,18 @@
+export {
+  ListContent,
+  ListDetail,
+  ListItem,
+  ListPrefix,
+  ListRoot,
+  ListSuffix,
+  ListTitle,
+  type ListContentProps,
+  type ListDetailProps,
+  type ListItemProps,
+  type ListPrefixProps,
+  type ListRootProps,
+  type ListSuffixProps,
+  type ListTitleProps,
+} from "./List";
+
+export * as List from "./List.namespace";

package/src/components/RadioGroup/RadioGroup.namespace.ts

@@ -0,0 +1,14 @@
+export {
+  RadioGroupRoot as Root,
+  RadioGroupItem as Item,
+  RadioGroupItemLabel as ItemLabel,
+  RadioGroupItemControl as ItemControl,
+  RadioGroupItemIndicator as ItemIndicator,
+  RadioGroupItemHiddenInput as ItemHiddenInput,
+  type RadioGroupRootProps as RootProps,
+  type RadioGroupItemProps as ItemProps,
+  type RadioGroupItemLabelProps as ItemLabelProps,
+  type RadioGroupItemControlProps as ItemControlProps,
+  type RadioGroupItemIndicatorProps as ItemIndicatorProps,
+  type RadioGroupItemHiddenInputProps as ItemHiddenInputProps,
+} from "./RadioGroup";

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,130 @@
+import { radio, type RadioVariantProps } from "@seed-design/css/recipes/radio";
+import { radiomark, type RadiomarkVariantProps } from "@seed-design/css/recipes/radiomark";
+import { mergeProps } from "@seed-design/dom-utils";
+import {
+  RadioGroup as RadioGroupPrimitive,
+  useRadioGroupItemContext,
+} from "@seed-design/react-radio-group";
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { InternalIcon } from "../private/Icon";
+
+const { ClassNamesProvider, withContext } = createSlotRecipeContext(radio);
+const {
+  withProvider: withRadiomarkProvider,
+  useClassNames: useRadiomarkClassNames,
+  PropsProvider: RadiomarkPropsProvider,
+} = createSlotRecipeContext(radiomark);
+const withStateProps = createWithStateProps([useRadioGroupItemContext]);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupRootProps extends RadioGroupPrimitive.RootProps {}
+
+export const RadioGroupRoot = RadioGroupPrimitive.Root;
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemProps
+  extends RadioVariantProps,
+    RadiomarkVariantProps,
+    RadioGroupPrimitive.ItemProps {}
+
+export const RadioGroupItem = Object.assign(
+  forwardRef<HTMLLabelElement, RadioGroupItemProps>(({ className, ...props }, ref) => {
+    const [radioVariantProps, otherProps] = radio.splitVariantProps(props);
+    const [radiomarkVariantProps] = radiomark.splitVariantProps(props);
+    const classNames = radio(radioVariantProps);
+
+    return (
+      <RadiomarkPropsProvider value={radiomarkVariantProps}>
+        <ClassNamesProvider value={classNames}>
+          <RadioGroupPrimitive.Item
+            ref={ref}
+            className={clsx(classNames.root, className)}
+            {...otherProps}
+          />
+        </ClassNamesProvider>
+      </RadiomarkPropsProvider>
+    );
+  }),
+  {
+    Primitive: RadioGroupPrimitive.Item,
+  },
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemLabelProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const RadioGroupItemLabel = withContext<HTMLSpanElement, RadioGroupItemLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemControlProps
+  extends RadiomarkVariantProps,
+    RadioGroupPrimitive.ItemControlProps {}
+
+export const RadioGroupItemControl = withRadiomarkProvider<
+  HTMLDivElement,
+  RadioGroupItemControlProps
+>(RadioGroupPrimitive.ItemControl, "root");
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemIndicatorProps extends React.SVGAttributes<SVGSVGElement> {
+  /**
+   * The icon to display when the radio is unchecked.
+   */
+  unchecked?: React.ReactNode;
+
+  /**
+   * The icon to display when the radio is checked.
+   */
+  checked?: React.ReactNode;
+}
+
+export const RadioGroupItemIndicator = forwardRef<SVGSVGElement, RadioGroupItemIndicatorProps>(
+  ({ unchecked: uncheckedSvg, checked: checkedSvg, ...otherProps }, ref) => {
+    const { stateProps, checked } = useRadioGroupItemContext();
+    const classNames = useRadiomarkClassNames();
+
+    const mergedProps = mergeProps(
+      stateProps,
+      { className: classNames.icon },
+      otherProps as React.HTMLAttributes<HTMLElement>,
+    );
+
+    if (checked)
+      return (
+        <InternalIcon
+          ref={ref}
+          svg={
+            checkedSvg ?? (
+              <svg aria-hidden="true" viewBox="0 0 24 24">
+                <circle cx="12" cy="12" r="12" fill="currentColor" />
+              </svg>
+            )
+          }
+          {...mergedProps}
+        />
+      );
+    if (uncheckedSvg) return <InternalIcon ref={ref} svg={uncheckedSvg} {...mergedProps} />;
+    return null;
+  },
+);
+RadioGroupItemIndicator.displayName = "RadioGroupItemIndicator";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface RadioGroupItemHiddenInputProps extends RadioGroupPrimitive.ItemHiddenInputProps {}
+
+export const RadioGroupItemHiddenInput = RadioGroupPrimitive.ItemHiddenInput;

package/src/components/RadioGroup/index.ts

@@ -0,0 +1,16 @@
+export {
+  RadioGroupRoot,
+  RadioGroupItem,
+  RadioGroupItemLabel,
+  RadioGroupItemControl,
+  RadioGroupItemIndicator,
+  RadioGroupItemHiddenInput,
+  type RadioGroupRootProps,
+  type RadioGroupItemProps,
+  type RadioGroupItemLabelProps,
+  type RadioGroupItemControlProps,
+  type RadioGroupItemIndicatorProps,
+  type RadioGroupItemHiddenInputProps,
+} from "./RadioGroup";
+
+export * as RadioGroup from "./RadioGroup.namespace";

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

@@ -1,18 +1,12 @@
 export {
   CheckSelectBoxContent as Content,
-  CheckSelectBoxControl as Control,
   CheckSelectBoxDescription as Description,
   CheckSelectBoxGroup as Group,
-  CheckSelectBoxHiddenInput as HiddenInput,
-  CheckSelectBoxIcon as Icon,
   CheckSelectBoxLabel as Label,
   CheckSelectBoxRoot as Root,
   type CheckSelectBoxContentProps as ContentProps,
-  type CheckSelectBoxControlProps as ControlProps,
   type CheckSelectBoxDescriptionProps as DescriptionProps,
   type CheckSelectBoxGroupProps as GroupProps,
-  type CheckSelectBoxHiddenInputProps as HiddenInputProps,
-  type CheckSelectBoxIconProps as IconProps,
   type CheckSelectBoxLabelProps as LabelProps,
   type CheckSelectBoxRootProps as RootProps,
 } from "./CheckSelectBox";