@seed-design/react 0.2.2 → 0.2.4

package/lib/components/Checkbox/Checkbox.cjs

@@ -4,24 +4,51 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
+const checkbox = require('@seed-design/css/recipes/checkbox');
+const checkmark = require('@seed-design/css/recipes/checkmark');
 const domUtils = require('@seed-design/dom-utils');
 const reactCheckbox = require('@seed-design/react-checkbox');
 const reactPrimitive = require('@seed-design/react-primitive');
-const checkbox = require('@seed-design/css/recipes/checkbox');
+const clsx = require('clsx');
 const React = require('react');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
 const Icon = require('../private/Icon.cjs');
 
-const { withProvider, withContext, useClassNames } = createSlotRecipeContext.createSlotRecipeContext(checkbox.checkbox);
+const { ClassNamesProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(checkbox.checkbox);
+const {
+  withProvider: withCheckmarkProvider,
+  useClassNames: useCheckmarkClassNames,
+  PropsProvider: CheckmarkPropsProvider
+} = createSlotRecipeContext.createSlotRecipeContext(checkmark.checkmark);
 const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext]);
-const CheckboxRoot = withProvider(
-  reactCheckbox.Checkbox.Root,
-  "root"
+const CheckboxRoot = Object.assign(
+  React.forwardRef(({ className, ...props }, ref) => {
+    const normalizedProps = {
+      ...props,
+      // TODO: replace this mapping completely
+      weight: props.weight === "stronger" ? "bold" : props.weight === "default" ? "regular" : props.weight
+    };
+    const [checkboxVariantProps, __otherProps] = checkbox.checkbox.splitVariantProps(normalizedProps);
+    const [checkmarkVariantProps] = checkmark.checkmark.splitVariantProps(normalizedProps);
+    const [, otherProps] = checkmark.checkmark.splitVariantProps(__otherProps);
+    const classNames = checkbox.checkbox(checkboxVariantProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(CheckmarkPropsProvider, { value: checkmarkVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactCheckbox.Checkbox.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps
+      }
+    ) }) });
+  }),
+  {
+    Primitive: reactCheckbox.Checkbox.Root
+  }
 );
-const CheckboxControl = withContext(
+const CheckboxControl = withCheckmarkProvider(
   reactCheckbox.Checkbox.Control,
-  "control"
+  "root"
 );
 const CheckboxIndicator = React.forwardRef(
   ({
@@ -31,7 +58,7 @@ const CheckboxIndicator = React.forwardRef(
     ...otherProps
   }, ref) => {
     const { stateProps, checked, indeterminate } = reactCheckbox.useCheckboxContext();
-    const classNames = useClassNames();
+    const classNames = useCheckmarkClassNames();
     const mergedProps = domUtils.mergeProps(
       stateProps,
       { className: classNames.icon },

package/lib/components/Checkbox/Checkbox.d.ts

@@ -1,11 +1,23 @@
+import { CheckboxVariantProps } from '@seed-design/css/recipes/checkbox';
+import { CheckmarkVariantProps } from '@seed-design/css/recipes/checkmark';
 import { Checkbox as CheckboxPrimitive } from '@seed-design/react-checkbox';
 import { PrimitiveProps } from '@seed-design/react-primitive';
-import { CheckboxVariantProps } from '@seed-design/css/recipes/checkbox';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
-export interface CheckboxRootProps extends CheckboxVariantProps, CheckboxPrimitive.RootProps {
+/**
+ * @deprecated Use `regular` or `bold` instead of `default` or `stronger`
+ */
+type CheckboxVariantDeprecatedWeightProps = "default" | "stronger";
+export interface CheckboxRootProps extends Omit<CheckboxVariantProps, "weight">, CheckmarkVariantProps, CheckboxPrimitive.RootProps {
+    weight?: CheckboxVariantProps["weight"] | CheckboxVariantDeprecatedWeightProps;
 }
-export declare const CheckboxRoot: ForwardRefExoticComponent<CheckboxRootProps & RefAttributes<HTMLLabelElement>>;
-export interface CheckboxControlProps extends CheckboxPrimitive.ControlProps {
+export declare const CheckboxRoot: ForwardRefExoticComponent<CheckboxRootProps & RefAttributes<HTMLLabelElement>> & {
+    Primitive: ForwardRefExoticComponent<CheckboxPrimitive.RootProps & RefAttributes<HTMLLabelElement>>;
+};
+/**
+ * CheckboxControl combines Checkbox.Primitive with checkmark.root styling
+ * This enables standalone usage of Checkbox.Control with variants
+ */
+export interface CheckboxControlProps extends CheckmarkVariantProps, CheckboxPrimitive.ControlProps {
 }
 export declare const CheckboxControl: ForwardRefExoticComponent<CheckboxControlProps & RefAttributes<HTMLDivElement>>;
 export interface CheckboxIndicatorProps extends React.SVGAttributes<SVGSVGElement> {
@@ -29,4 +41,5 @@ export declare const CheckboxLabel: ForwardRefExoticComponent<CheckboxLabelProps
 export interface CheckboxHiddenInputProps extends CheckboxPrimitive.HiddenInputProps {
 }
 export declare const CheckboxHiddenInput: ForwardRefExoticComponent<CheckboxPrimitive.HiddenInputProps & RefAttributes<HTMLInputElement>>;
+export {};
 //# sourceMappingURL=Checkbox.d.ts.map

package/lib/components/Checkbox/Checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AAWxF,MAAM,WAAW,iBAAkB,SAAQ,oBAAoB,EAAE,iBAAiB,CAAC,SAAS;CAAG;AAE/F,eAAO,MAAM,YAAY,gHAGxB,CAAC;AAIF,MAAM,WAAW,oBAAqB,SAAQ,iBAAiB,CAAC,YAAY;CAAG;AAE/E,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAChF;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB,kHA8B7B,CAAC;AAKF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEpG,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAEvF,eAAO,MAAM,mBAAmB,iIAAgC,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,mCAAmC,CAAC;AACxF,OAAO,EAAa,KAAK,qBAAqB,EAAE,MAAM,oCAAoC,CAAC;AAE3F,OAAO,EAAE,QAAQ,IAAI,iBAAiB,EAAsB,MAAM,6BAA6B,CAAC;AAChG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAiB9E;;GAEG;AACH,KAAK,oCAAoC,GAAG,SAAS,GAAG,UAAU,CAAC;AAEnE,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,oBAAoB,EAAE,QAAQ,CAAC,EAC1C,qBAAqB,EACrB,iBAAiB,CAAC,SAAS;IAC7B,MAAM,CAAC,EAAE,oBAAoB,CAAC,QAAQ,CAAC,GAAG,oCAAoC,CAAC;CAChF;AAED,eAAO,MAAM,YAAY;;CAmCxB,CAAC;AAIF;;;GAGG;AAEH,MAAM,WAAW,oBACf,SAAQ,qBAAqB,EAC3B,iBAAiB,CAAC,YAAY;CAAG;AAErC,eAAO,MAAM,eAAe,iHAG3B,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC;IAChF;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAED,eAAO,MAAM,iBAAiB,kHA8B7B,CAAC;AAKF,MAAM,WAAW,kBAAmB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEpG,eAAO,MAAM,aAAa,+GAGzB,CAAC;AAIF,MAAM,WAAW,wBAAyB,SAAQ,iBAAiB,CAAC,gBAAgB;CAAG;AAEvF,eAAO,MAAM,mBAAmB,iIAAgC,CAAC"}

package/lib/components/Checkbox/Checkbox.js

@@ -1,23 +1,50 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
+import { checkbox } from '@seed-design/css/recipes/checkbox';
+import { checkmark } from '@seed-design/css/recipes/checkmark';
 import { mergeProps } from '@seed-design/dom-utils';
 import { Checkbox, useCheckboxContext } from '@seed-design/react-checkbox';
 import { Primitive } from '@seed-design/react-primitive';
-import { checkbox } from '@seed-design/css/recipes/checkbox';
+import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
 import { InternalIcon } from '../private/Icon.js';
 
-const { withProvider, withContext, useClassNames } = createSlotRecipeContext(checkbox);
+const { ClassNamesProvider, withContext } = createSlotRecipeContext(checkbox);
+const {
+  withProvider: withCheckmarkProvider,
+  useClassNames: useCheckmarkClassNames,
+  PropsProvider: CheckmarkPropsProvider
+} = createSlotRecipeContext(checkmark);
 const withStateProps = createWithStateProps([useCheckboxContext]);
-const CheckboxRoot = withProvider(
-  Checkbox.Root,
-  "root"
+const CheckboxRoot = Object.assign(
+  forwardRef(({ className, ...props }, ref) => {
+    const normalizedProps = {
+      ...props,
+      // TODO: replace this mapping completely
+      weight: props.weight === "stronger" ? "bold" : props.weight === "default" ? "regular" : props.weight
+    };
+    const [checkboxVariantProps, __otherProps] = checkbox.splitVariantProps(normalizedProps);
+    const [checkmarkVariantProps] = checkmark.splitVariantProps(normalizedProps);
+    const [, otherProps] = checkmark.splitVariantProps(__otherProps);
+    const classNames = checkbox(checkboxVariantProps);
+    return /* @__PURE__ */ jsx(CheckmarkPropsProvider, { value: checkmarkVariantProps, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
+      Checkbox.Root,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps
+      }
+    ) }) });
+  }),
+  {
+    Primitive: Checkbox.Root
+  }
 );
-const CheckboxControl = withContext(
+const CheckboxControl = withCheckmarkProvider(
   Checkbox.Control,
-  "control"
+  "root"
 );
 const CheckboxIndicator = forwardRef(
   ({
@@ -27,7 +54,7 @@ const CheckboxIndicator = forwardRef(
     ...otherProps
   }, ref) => {
     const { stateProps, checked, indeterminate } = useCheckboxContext();
-    const classNames = useClassNames();
+    const classNames = useCheckmarkClassNames();
     const mergedProps = mergeProps(
       stateProps,
       { className: classNames.icon },

package/lib/components/Divider/Divider.cjs

@@ -26,32 +26,32 @@ function _interopNamespaceDefault(e) {
 
 const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const Divider = React__namespace.forwardRef((props, ref) => {
-  const {
+const Divider = React__namespace.forwardRef(
+  ({
     as = "hr",
     color = "stroke.neutralMuted",
     thickness = 1,
     orientation = "horizontal",
-    role,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Box.Box,
-    {
-      ref,
-      as,
-      role,
-      ...(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
-    }
-  );
-});
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Box.Box,
+      {
+        ref,
+        as,
+        ...(as === "hr" && orientation !== "horizontal" && (props.role === void 0 || 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
+      }
+    );
+  }
+);
 
 exports.Divider = Divider;

package/lib/components/Divider/Divider.d.ts

@@ -1,6 +1,6 @@
 import { BoxProps } from '../Box/Box';
 import * as React from "react";
-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"
@@ -15,12 +15,11 @@ export interface DividerProps {
     /**
      * @default 1
      */
-    thickness?: BoxProps["borderBottomWidth"];
+    thickness?: BoxProps["borderWidth"];
     /**
      * @default "horizontal"
      */
     orientation?: "horizontal" | "vertical";
-    role?: Extract<React.AriaRole, "separator">;
 }
 export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLHRElement>>;
 //# sourceMappingURL=Divider.d.ts.map

package/lib/components/Divider/Divider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B;;;;;OAKG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,mBAAmB,CAAC,CAAC;IAE1C;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAExC,IAAI,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;CAC7C;AAED,eAAO,MAAM,OAAO,oFA6BlB,CAAC"}
+{"version":3,"file":"Divider.d.ts","sourceRoot":"","sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEhD,MAAM,WAAW,YAAa,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EAAE,OAAO,CAAC;IACtF;;;;;OAKG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEhC;;OAEG;IACH,SAAS,CAAC,EAAE,QAAQ,CAAC,aAAa,CAAC,CAAC;IAEpC;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;CACzC;AAED,eAAO,MAAM,OAAO,oFAgCnB,CAAC"}

package/lib/components/Divider/Divider.js

@@ -3,32 +3,32 @@ import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { Box } from '../Box/Box.js';
 
-const Divider = React.forwardRef((props, ref) => {
-  const {
+const Divider = React.forwardRef(
+  ({
     as = "hr",
     color = "stroke.neutralMuted",
     thickness = 1,
     orientation = "horizontal",
-    role,
-    ...rest
-  } = props;
-  return /* @__PURE__ */ jsx(
-    Box,
-    {
-      ref,
-      as,
-      role,
-      ...(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
-    }
-  );
-});
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        ref,
+        as,
+        ...(as === "hr" && orientation !== "horizontal" && (props.role === void 0 || 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
+      }
+    );
+  }
+);
 
 export { Divider };

package/lib/components/LinkContent/LinkContent.d.ts

@@ -2,7 +2,13 @@ import { LinkContentVariantProps } from '@seed-design/css/recipes/link-content';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { StyleProps } from '../../utils/styled';
 import type * as React from "react";
+/**
+ * @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 declare const LinkContent: React.ForwardRefExoticComponent<LinkContentProps & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=LinkContent.d.ts.map

package/lib/components/LinkContent/LinkContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LinkContent.d.ts","sourceRoot":"","sources":["../../../src/components/LinkContent/LinkContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE,MAAM,WAAW,gBACf,SAAQ,uBAAuB,EAC7B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CAAG;AAE3D,eAAO,MAAM,WAAW,4FAEvB,CAAC"}
+{"version":3,"file":"LinkContent.d.ts","sourceRoot":"","sources":["../../../src/components/LinkContent/LinkContent.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAIrE;;GAEG;AACH,MAAM,WAAW,gBACf,SAAQ,uBAAuB,EAC7B,cAAc,EACd,IAAI,CAAC,UAAU,EAAE,OAAO,CAAC,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC;CAAG;AAE3D;;GAEG;AACH,eAAO,MAAM,WAAW,4FAEvB,CAAC"}

package/lib/components/List/List.cjs

@@ -0,0 +1,57 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const listItem = require('@seed-design/css/recipes/list-item');
+const reactPrimitive = require('@seed-design/react-primitive');
+const React = require('react');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+const styled = require('../../utils/styled.cjs');
+const Stack = require('../Stack/Stack.cjs');
+const reactCheckbox = require('@seed-design/react-checkbox');
+const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+const reactRadioGroup = require('@seed-design/react-radio-group');
+
+const { withContext, withProvider } = createSlotRecipeContext.createSlotRecipeContext(listItem.listItem);
+const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext, reactRadioGroup.useRadioGroupItemContext], {
+  strict: false
+});
+const ListRoot = React.forwardRef(
+  ({ as = "ul", ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Stack.VStack, { as, ref, ...props });
+  }
+);
+const ListItem = withProvider(
+  withStateProps(styled.withStyleProps(reactPrimitive.Primitive.li)),
+  "root"
+);
+const ListContent = withContext(
+  withStateProps(styled.withStyleProps(reactPrimitive.Primitive.div)),
+  "content"
+);
+const ListPrefix = withContext(
+  withStateProps(styled.withStyleProps(reactPrimitive.Primitive.div)),
+  "prefix"
+);
+const ListSuffix = withContext(
+  withStateProps(styled.withStyleProps(reactPrimitive.Primitive.div)),
+  "suffix"
+);
+const ListTitle = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "title"
+);
+const ListDetail = withContext(
+  withStateProps(reactPrimitive.Primitive.div),
+  "detail"
+);
+
+exports.ListContent = ListContent;
+exports.ListDetail = ListDetail;
+exports.ListItem = ListItem;
+exports.ListPrefix = ListPrefix;
+exports.ListRoot = ListRoot;
+exports.ListSuffix = ListSuffix;
+exports.ListTitle = ListTitle;

package/lib/components/List/List.d.ts

@@ -0,0 +1,27 @@
+import { ListItemVariantProps } from '@seed-design/css/recipes/list-item';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import { StyleProps } from '../../utils/styled';
+import { VStackProps } from '../Stack';
+import type * as React from "react";
+export interface ListRootProps extends VStackProps {
+}
+export declare const ListRoot: React.ForwardRefExoticComponent<ListRootProps & React.RefAttributes<HTMLUListElement>>;
+export interface ListItemProps extends PrimitiveProps, Pick<StyleProps, "alignItems">, React.HTMLAttributes<HTMLLIElement>, ListItemVariantProps {
+}
+export declare const ListItem: React.ForwardRefExoticComponent<ListItemProps & React.RefAttributes<HTMLLIElement>>;
+export interface ListContentProps extends PrimitiveProps, Pick<StyleProps, "gap" | "pr" | "paddingRight">, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const ListContent: React.ForwardRefExoticComponent<ListContentProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListPrefixProps extends PrimitiveProps, Pick<StyleProps, "pr" | "paddingRight">, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const ListPrefix: React.ForwardRefExoticComponent<ListPrefixProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListSuffixProps extends PrimitiveProps, Pick<StyleProps, "gap" | "position">, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const ListSuffix: React.ForwardRefExoticComponent<ListSuffixProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListTitleProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const ListTitle: React.ForwardRefExoticComponent<ListTitleProps & React.RefAttributes<HTMLDivElement>>;
+export interface ListDetailProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const ListDetail: React.ForwardRefExoticComponent<ListDetailProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=List.d.ts.map

package/lib/components/List/List.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAG9E,OAAO,EAAkB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAUpD,MAAM,WAAW,aAAc,SAAQ,WAAW;CAAG;AAErD,eAAO,MAAM,QAAQ,wFAIpB,CAAC;AAEF,MAAM,WAAW,aACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,KAAK,CAAC,cAAc,CAAC,aAAa,CAAC,EACnC,oBAAoB;CAAG;AAE3B,eAAO,MAAM,QAAQ,qFAGpB,CAAC;AAEF,MAAM,WAAW,gBACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,IAAI,GAAG,cAAc,CAAC,EAC/C,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,WAAW,yFAGvB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,cAAc,CAAC,EACvC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,UAAU,wFAGtB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,cAAc,EACpB,IAAI,CAAC,UAAU,EAAE,KAAK,GAAG,UAAU,CAAC,EACpC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,UAAU,wFAGtB,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE/F,eAAO,MAAM,SAAS,uFAGrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhG,eAAO,MAAM,UAAU,wFAGtB,CAAC"}

package/lib/components/List/List.js

@@ -0,0 +1,47 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { listItem } from '@seed-design/css/recipes/list-item';
+import { Primitive } from '@seed-design/react-primitive';
+import { forwardRef } from 'react';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
+import { withStyleProps } from '../../utils/styled.js';
+import { VStack } from '../Stack/Stack.js';
+import { useCheckboxContext } from '@seed-design/react-checkbox';
+import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import { useRadioGroupItemContext } from '@seed-design/react-radio-group';
+
+const { withContext, withProvider } = createSlotRecipeContext(listItem);
+const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
+  strict: false
+});
+const ListRoot = forwardRef(
+  ({ as = "ul", ...props }, ref) => {
+    return /* @__PURE__ */ jsx(VStack, { as, ref, ...props });
+  }
+);
+const ListItem = withProvider(
+  withStateProps(withStyleProps(Primitive.li)),
+  "root"
+);
+const ListContent = withContext(
+  withStateProps(withStyleProps(Primitive.div)),
+  "content"
+);
+const ListPrefix = withContext(
+  withStateProps(withStyleProps(Primitive.div)),
+  "prefix"
+);
+const ListSuffix = withContext(
+  withStateProps(withStyleProps(Primitive.div)),
+  "suffix"
+);
+const ListTitle = withContext(
+  withStateProps(Primitive.div),
+  "title"
+);
+const ListDetail = withContext(
+  withStateProps(Primitive.div),
+  "detail"
+);
+
+export { ListContent, ListDetail, ListItem, ListPrefix, ListRoot, ListSuffix, ListTitle };

package/lib/components/List/List.namespace.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const List = require('./List.cjs');
+
+
+
+exports.Content = List.ListContent;
+exports.Detail = List.ListDetail;
+exports.Item = List.ListItem;
+exports.Prefix = List.ListPrefix;
+exports.Root = List.ListRoot;
+exports.Suffix = List.ListSuffix;
+exports.Title = List.ListTitle;

package/lib/components/List/List.namespace.d.ts

@@ -0,0 +1,2 @@
+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';
+//# sourceMappingURL=List.namespace.d.ts.map

package/lib/components/List/List.namespace.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/List/List.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,OAAO,EACtB,UAAU,IAAI,MAAM,EACpB,QAAQ,IAAI,IAAI,EAChB,UAAU,IAAI,MAAM,EACpB,QAAQ,IAAI,IAAI,EAChB,UAAU,IAAI,MAAM,EACpB,SAAS,IAAI,KAAK,EAClB,KAAK,gBAAgB,IAAI,YAAY,EACrC,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,eAAe,IAAI,WAAW,EACnC,KAAK,cAAc,IAAI,UAAU,GAClC,MAAM,QAAQ,CAAC"}

package/lib/components/List/List.namespace.js

@@ -0,0 +1 @@
+export { ListContent as Content, ListDetail as Detail, ListItem as Item, ListPrefix as Prefix, ListRoot as Root, ListSuffix as Suffix, ListTitle as Title } from './List.js';

package/lib/components/List/index.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const List = require('./List.cjs');
+const List_namespace = require('./List.namespace.cjs');
+
+
+
+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;

package/lib/components/List/index.d.ts

@@ -0,0 +1,3 @@
+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';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/List/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/List/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,UAAU,EACV,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,UAAU,EACV,SAAS,EACT,KAAK,gBAAgB,EACrB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,cAAc,GACpB,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}

package/lib/components/List/index.js

@@ -0,0 +1,3 @@
+export { ListContent, ListDetail, ListItem, ListPrefix, ListRoot, ListSuffix, ListTitle } from './List.js';
+import * as List_namespace from './List.namespace.js';
+export { List_namespace as List };

package/lib/components/RadioGroup/RadioGroup.cjs

@@ -0,0 +1,80 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const radio = require('@seed-design/css/recipes/radio');
+const radiomark = require('@seed-design/css/recipes/radiomark');
+const domUtils = require('@seed-design/dom-utils');
+const reactRadioGroup = require('@seed-design/react-radio-group');
+const reactPrimitive = require('@seed-design/react-primitive');
+const clsx = require('clsx');
+const React = require('react');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
+const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+const Icon = require('../private/Icon.cjs');
+
+const { ClassNamesProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(radio.radio);
+const {
+  withProvider: withRadiomarkProvider,
+  useClassNames: useRadiomarkClassNames,
+  PropsProvider: RadiomarkPropsProvider
+} = createSlotRecipeContext.createSlotRecipeContext(radiomark.radiomark);
+const withStateProps = createWithStateProps.createWithStateProps([reactRadioGroup.useRadioGroupItemContext]);
+const RadioGroupRoot = reactRadioGroup.RadioGroup.Root;
+const RadioGroupItem = Object.assign(
+  React.forwardRef(({ className, ...props }, ref) => {
+    const [radioVariantProps, __otherProps] = radio.radio.splitVariantProps(props);
+    const [radiomarkVariantProps] = radiomark.radiomark.splitVariantProps(props);
+    const [, otherProps] = radiomark.radiomark.splitVariantProps(__otherProps);
+    const classNames = radio.radio(radioVariantProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(RadiomarkPropsProvider, { value: radiomarkVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactRadioGroup.RadioGroup.Item,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps
+      }
+    ) }) });
+  }),
+  {
+    Primitive: reactRadioGroup.RadioGroup.Item
+  }
+);
+const RadioGroupItemLabel = withContext(
+  withStateProps(reactPrimitive.Primitive.span),
+  "label"
+);
+const RadioGroupItemControl = withRadiomarkProvider(reactRadioGroup.RadioGroup.ItemControl, "root");
+const RadioGroupItemIndicator = React.forwardRef(
+  ({ unchecked: uncheckedSvg, checked: checkedSvg, ...otherProps }, ref) => {
+    const { stateProps, checked } = reactRadioGroup.useRadioGroupItemContext();
+    const classNames = useRadiomarkClassNames();
+    const mergedProps = domUtils.mergeProps(
+      stateProps,
+      { className: classNames.icon },
+      otherProps
+    );
+    if (checked)
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Icon.InternalIcon,
+        {
+          ref,
+          svg: checkedSvg ?? /* @__PURE__ */ jsxRuntime.jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "12", fill: "currentColor" }) }),
+          ...mergedProps
+        }
+      );
+    if (uncheckedSvg) return /* @__PURE__ */ jsxRuntime.jsx(Icon.InternalIcon, { ref, svg: uncheckedSvg, ...mergedProps });
+    return null;
+  }
+);
+RadioGroupItemIndicator.displayName = "RadioGroupItemIndicator";
+const RadioGroupItemHiddenInput = reactRadioGroup.RadioGroup.ItemHiddenInput;
+
+exports.RadioGroupItem = RadioGroupItem;
+exports.RadioGroupItemControl = RadioGroupItemControl;
+exports.RadioGroupItemHiddenInput = RadioGroupItemHiddenInput;
+exports.RadioGroupItemIndicator = RadioGroupItemIndicator;
+exports.RadioGroupItemLabel = RadioGroupItemLabel;
+exports.RadioGroupRoot = RadioGroupRoot;