@seed-design/react 1.1.16 → 1.2.0

package/lib/components/SelectBox/RadioSelectBox.js

@@ -1,30 +1,129 @@
 'use client';
+import { jsx } from 'react/jsx-runtime';
+import { composeRefs } from '@radix-ui/react-compose-refs';
 import { selectBox } from '@seed-design/css/recipes/select-box';
 import { selectBoxGroup } from '@seed-design/css/recipes/select-box-group';
+import { useCollapsibleContext, Collapsible, useCollapsible, CollapsibleProvider } from '@seed-design/react-collapsible';
 import { Primitive } from '@seed-design/react-primitive';
-import { RadioGroup, useRadioGroupItemContext } from '@seed-design/react-radio-group';
-import { createRecipeContext } from '../../utils/createRecipeContext.js';
+import { useRadioGroupItemContext, RadioGroup } from '@seed-design/react-radio-group';
+import { forwardRef, useContext, createContext, useState, useCallback } from 'react';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import clsx from 'clsx';
 
-const { withContext: withGroupContext } = createRecipeContext(selectBoxGroup);
-const { withContext, withProvider } = createSlotRecipeContext(selectBox);
+const { PropsProvider, ClassNamesProvider, withContext, useProps, useClassNames } = createSlotRecipeContext(selectBox);
 const withStateProps = createWithStateProps([useRadioGroupItemContext]);
-const RadioSelectBoxRoot = withGroupContext(
-  RadioGroup.Root
+const FooterContext = createContext(null);
+const RadioSelectBoxGroup = forwardRef(
+  ({ columns = 1, className, style, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBoxGroup.splitVariantProps(props);
+    const recipeClassName = selectBoxGroup(variantProps);
+    const layout = columns === 1 ? "horizontal" : "vertical";
+    return /* @__PURE__ */ jsx(PropsProvider, { value: { layout }, children: /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ref,
+        "data-columns": columns,
+        className: clsx(recipeClassName, className),
+        style: {
+          ...style,
+          "--seed-select-box-group--columns": columns
+        },
+        ...otherProps
+      }
+    ) });
+  }
 );
-const RadioSelectBoxItem = withProvider(
-  RadioGroup.Item,
-  "root"
+function FooterVisibilityProvider({
+  children,
+  footerVisibility
+}) {
+  const { checked } = useRadioGroupItemContext();
+  const collapsible = useCollapsible({
+    open: {
+      "when-selected": checked,
+      "when-not-selected": !checked
+    }[footerVisibility]
+  });
+  const [isFooterRendered, setIsFooterRendered] = useState(false);
+  const footerRef = useCallback((node) => {
+    setIsFooterRendered(!!node);
+  }, []);
+  return /* @__PURE__ */ jsx(CollapsibleProvider, { value: collapsible, children: /* @__PURE__ */ jsx(FooterContext.Provider, { value: { isFooterRendered, footerRef, footerVisibility }, children }) });
+}
+const RadioSelectBoxItem = forwardRef(
+  ({ footerVisibility = "when-selected", className, children, ...props }, ref) => {
+    const [variantProps, otherProps] = selectBox.splitVariantProps(props);
+    const classNames = selectBox({
+      ...useProps(),
+      ...variantProps
+    });
+    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
+      RadioGroup.Item,
+      {
+        ref,
+        className: clsx(classNames.root, className),
+        ...otherProps,
+        children: footerVisibility === "always" ? children : /* @__PURE__ */ jsx(FooterVisibilityProvider, { footerVisibility, children })
+      }
+    ) });
+  }
+);
+const RadioSelectBoxTrigger = withContext(
+  withStateProps(Primitive.div),
+  "trigger"
 );
 const RadioSelectBoxContent = withContext(
   withStateProps(Primitive.div),
   "content"
 );
+const RadioSelectBoxBody = withContext(
+  withStateProps(Primitive.div),
+  "body"
+);
 const RadioSelectBoxLabel = withContext(
   withStateProps(Primitive.div),
   "label"
 );
 const RadioSelectBoxDescription = withContext(withStateProps(Primitive.div), "description");
+const RadioSelectBoxHiddenInput = forwardRef((props, ref) => {
+  const collapsibleContext = useCollapsibleContext({ strict: false });
+  const footerContext = useContext(FooterContext);
+  const triggerAriaProps = footerContext?.isFooterRendered ? collapsibleContext?.triggerAriaProps : void 0;
+  return /* @__PURE__ */ jsx(RadioGroup.ItemHiddenInput, { ref, ...triggerAriaProps, ...props });
+});
+RadioSelectBoxHiddenInput.displayName = "RadioSelectBoxHiddenInput";
+const RadioSelectBoxFooter = forwardRef(
+  ({ 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 /* @__PURE__ */ jsx(
+        Collapsible.Content,
+        {
+          ref: composedRef,
+          className: clsx(classNames.footer, className),
+          ...stateProps,
+          ...props,
+          children
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      Primitive.div,
+      {
+        ref: composedRef,
+        className: clsx(classNames.footer, className),
+        ...stateProps,
+        ...props,
+        children
+      }
+    );
+  }
+);
+RadioSelectBoxFooter.displayName = "RadioSelectBoxFooter";
 
-export { RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxRoot };
+export { RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxHiddenInput, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger };

package/lib/components/SelectBox/RadioSelectBox.namespace.cjs

@@ -6,8 +6,12 @@ const RadioSelectBox = require('./RadioSelectBox.cjs');
 
 
 
+exports.Body = RadioSelectBox.RadioSelectBoxBody;
 exports.Content = RadioSelectBox.RadioSelectBoxContent;
 exports.Description = RadioSelectBox.RadioSelectBoxDescription;
+exports.Footer = RadioSelectBox.RadioSelectBoxFooter;
+exports.Group = RadioSelectBox.RadioSelectBoxGroup;
+exports.HiddenInput = RadioSelectBox.RadioSelectBoxHiddenInput;
 exports.Item = RadioSelectBox.RadioSelectBoxItem;
 exports.Label = RadioSelectBox.RadioSelectBoxLabel;
-exports.Root = RadioSelectBox.RadioSelectBoxRoot;
+exports.Trigger = RadioSelectBox.RadioSelectBoxTrigger;

package/lib/components/SelectBox/RadioSelectBox.namespace.d.ts

@@ -1,2 +1,2 @@
-export { RadioSelectBoxContent as Content, RadioSelectBoxDescription as Description, RadioSelectBoxItem as Item, RadioSelectBoxLabel as Label, RadioSelectBoxRoot as Root, type RadioSelectBoxContentProps as ContentProps, type RadioSelectBoxDescriptionProps as DescriptionProps, type RadioSelectBoxItemProps as ItemProps, type RadioSelectBoxLabelProps as LabelProps, type RadioSelectBoxRootProps as RootProps, } from './RadioSelectBox';
+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, 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 RadioSelectBoxTriggerProps as TriggerProps, } from './RadioSelectBox';
 //# sourceMappingURL=RadioSelectBox.namespace.d.ts.map

package/lib/components/SelectBox/RadioSelectBox.namespace.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"RadioSelectBox.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/RadioSelectBox.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,IAAI,OAAO,EAChC,yBAAyB,IAAI,WAAW,EACxC,kBAAkB,IAAI,IAAI,EAC1B,mBAAmB,IAAI,KAAK,EAC5B,kBAAkB,IAAI,IAAI,EAC1B,KAAK,0BAA0B,IAAI,YAAY,EAC/C,KAAK,8BAA8B,IAAI,gBAAgB,EACvD,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,uBAAuB,IAAI,SAAS,GAC1C,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"RadioSelectBox.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/RadioSelectBox.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,IAAI,IAAI,EAC1B,qBAAqB,IAAI,OAAO,EAChC,yBAAyB,IAAI,WAAW,EACxC,oBAAoB,IAAI,MAAM,EAC9B,mBAAmB,IAAI,KAAK,EAC5B,yBAAyB,IAAI,WAAW,EACxC,kBAAkB,IAAI,IAAI,EAC1B,mBAAmB,IAAI,KAAK,EAC5B,qBAAqB,IAAI,OAAO,EAChC,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,0BAA0B,IAAI,YAAY,EAC/C,KAAK,8BAA8B,IAAI,gBAAgB,EACvD,KAAK,yBAAyB,IAAI,WAAW,EAC7C,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,8BAA8B,IAAI,gBAAgB,EACvD,KAAK,uBAAuB,IAAI,SAAS,EACzC,KAAK,wBAAwB,IAAI,UAAU,EAC3C,KAAK,0BAA0B,IAAI,YAAY,GAChD,MAAM,kBAAkB,CAAC"}

package/lib/components/SelectBox/RadioSelectBox.namespace.js

@@ -1 +1 @@
-export { RadioSelectBoxContent as Content, RadioSelectBoxDescription as Description, RadioSelectBoxItem as Item, RadioSelectBoxLabel as Label, RadioSelectBoxRoot as Root } from './RadioSelectBox.js';
+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, RadioSelectBoxTrigger as Trigger } from './RadioSelectBox.js';

package/lib/components/SelectBox/index.cjs

@@ -9,15 +9,25 @@ const RadioSelectBox_namespace = require('./RadioSelectBox.namespace.cjs');
 
 
 
+exports.CheckSelectBoxBody = CheckSelectBox.CheckSelectBoxBody;
+exports.CheckSelectBoxCheckmarkControl = CheckSelectBox.CheckSelectBoxCheckmarkControl;
+exports.CheckSelectBoxCheckmarkIcon = CheckSelectBox.CheckSelectBoxCheckmarkIcon;
 exports.CheckSelectBoxContent = CheckSelectBox.CheckSelectBoxContent;
 exports.CheckSelectBoxDescription = CheckSelectBox.CheckSelectBoxDescription;
+exports.CheckSelectBoxFooter = CheckSelectBox.CheckSelectBoxFooter;
 exports.CheckSelectBoxGroup = CheckSelectBox.CheckSelectBoxGroup;
+exports.CheckSelectBoxHiddenInput = CheckSelectBox.CheckSelectBoxHiddenInput;
 exports.CheckSelectBoxLabel = CheckSelectBox.CheckSelectBoxLabel;
 exports.CheckSelectBoxRoot = CheckSelectBox.CheckSelectBoxRoot;
+exports.CheckSelectBoxTrigger = CheckSelectBox.CheckSelectBoxTrigger;
+exports.RadioSelectBoxBody = RadioSelectBox.RadioSelectBoxBody;
 exports.RadioSelectBoxContent = RadioSelectBox.RadioSelectBoxContent;
 exports.RadioSelectBoxDescription = RadioSelectBox.RadioSelectBoxDescription;
+exports.RadioSelectBoxFooter = RadioSelectBox.RadioSelectBoxFooter;
+exports.RadioSelectBoxGroup = RadioSelectBox.RadioSelectBoxGroup;
+exports.RadioSelectBoxHiddenInput = RadioSelectBox.RadioSelectBoxHiddenInput;
 exports.RadioSelectBoxItem = RadioSelectBox.RadioSelectBoxItem;
 exports.RadioSelectBoxLabel = RadioSelectBox.RadioSelectBoxLabel;
-exports.RadioSelectBoxRoot = RadioSelectBox.RadioSelectBoxRoot;
+exports.RadioSelectBoxTrigger = RadioSelectBox.RadioSelectBoxTrigger;
 exports.CheckSelectBox = CheckSelectBox_namespace;
 exports.RadioSelectBox = RadioSelectBox_namespace;

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

@@ -1,5 +1,5 @@
-export { CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot, type CheckSelectBoxContentProps, type CheckSelectBoxDescriptionProps, type CheckSelectBoxGroupProps, type CheckSelectBoxLabelProps, type CheckSelectBoxRootProps, } from './CheckSelectBox';
-export { RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxRoot, type RadioSelectBoxContentProps, type RadioSelectBoxDescriptionProps, type RadioSelectBoxItemProps, type RadioSelectBoxLabelProps, type RadioSelectBoxRootProps, } from './RadioSelectBox';
+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, RadioSelectBoxTrigger, type RadioSelectBoxBodyProps, type RadioSelectBoxContentProps, type RadioSelectBoxDescriptionProps, type RadioSelectBoxFooterProps, type RadioSelectBoxGroupProps, type RadioSelectBoxHiddenInputProps, type RadioSelectBoxItemProps, type RadioSelectBoxLabelProps, type RadioSelectBoxTriggerProps, } from './RadioSelectBox';
 export * as CheckSelectBox from './CheckSelectBox.namespace';
 export * as RadioSelectBox from './RadioSelectBox.namespace';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,mBAAmB,EACnB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,0BAA0B,EAC/B,KAAK,8BAA8B,EACnC,KAAK,wBAAwB,EAC7B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,qBAAqB,EACrB,yBAAyB,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,kBAAkB,EAClB,KAAK,0BAA0B,EAC/B,KAAK,8BAA8B,EACnC,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,GAC7B,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,kBAAkB,EAClB,8BAA8B,EAC9B,2BAA2B,EAC3B,qBAAqB,EACrB,yBAAyB,EACzB,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EACzB,mBAAmB,EACnB,kBAAkB,EAClB,qBAAqB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,mCAAmC,EACxC,KAAK,gCAAgC,EACrC,KAAK,0BAA0B,EAC/B,KAAK,8BAA8B,EACnC,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,8BAA8B,EACnC,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,GAChC,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EACL,kBAAkB,EAClB,qBAAqB,EACrB,yBAAyB,EACzB,oBAAoB,EACpB,mBAAmB,EACnB,yBAAyB,EACzB,kBAAkB,EAClB,mBAAmB,EACnB,qBAAqB,EACrB,KAAK,uBAAuB,EAC5B,KAAK,0BAA0B,EAC/B,KAAK,8BAA8B,EACnC,KAAK,yBAAyB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,8BAA8B,EACnC,KAAK,uBAAuB,EAC5B,KAAK,wBAAwB,EAC7B,KAAK,0BAA0B,GAChC,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC;AAC7D,OAAO,KAAK,cAAc,MAAM,4BAA4B,CAAC"}

package/lib/components/SelectBox/index.js

@@ -1,5 +1,5 @@
-export { CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxGroup, CheckSelectBoxLabel, CheckSelectBoxRoot } from './CheckSelectBox.js';
-export { RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxRoot } from './RadioSelectBox.js';
+export { CheckSelectBoxBody, CheckSelectBoxCheckmarkControl, CheckSelectBoxCheckmarkIcon, CheckSelectBoxContent, CheckSelectBoxDescription, CheckSelectBoxFooter, CheckSelectBoxGroup, CheckSelectBoxHiddenInput, CheckSelectBoxLabel, CheckSelectBoxRoot, CheckSelectBoxTrigger } from './CheckSelectBox.js';
+export { RadioSelectBoxBody, RadioSelectBoxContent, RadioSelectBoxDescription, RadioSelectBoxFooter, RadioSelectBoxGroup, RadioSelectBoxHiddenInput, RadioSelectBoxItem, RadioSelectBoxLabel, RadioSelectBoxTrigger } from './RadioSelectBox.js';
 import * as CheckSelectBox_namespace from './CheckSelectBox.namespace.js';
 export { CheckSelectBox_namespace as CheckSelectBox };
 import * as RadioSelectBox_namespace from './RadioSelectBox.namespace.js';

package/lib/components/Switch/Switch.cjs

@@ -6,7 +6,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 const jsxRuntime = require('react/jsx-runtime');
 const reactSwitch = require('@seed-design/react-switch');
 const _switch = require('@seed-design/css/recipes/switch');
-const switchMark = require('@seed-design/css/recipes/switch-mark');
+const switchmark = require('@seed-design/css/recipes/switchmark');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createWithStateProps = require('../../utils/createWithStateProps.cjs');
@@ -19,20 +19,25 @@ const {
   withContext: withControlContext,
   PropsProvider: ControlPropsProvider,
   withProvider: withControlProvider
-} = createSlotRecipeContext.createSlotRecipeContext(switchMark.switchMark);
+} = createSlotRecipeContext.createSlotRecipeContext(switchmark.switchmark);
 const withStateProps = createWithStateProps.createWithStateProps([reactSwitch.useSwitchContext]);
 const SwitchRoot = React.forwardRef(
   ({ className, ...props }, ref) => {
-    const [{ switch: switchVariantProps, switchMark: switchMarkVariantProps }, otherProps] = splitMultipleVariantsProps.splitMultipleVariantsProps(
+    if (process.env.NODE_ENV !== "production" && (props.size === "small" || props.size === "medium")) {
+      console.warn(
+        `[SEED Design System] Switch size='${props.size}' is deprecated and will be removed in @seed-design/react@1.3.0. Use size='${props.size === "small" ? "16" : "32"}' instead.`
+      );
+    }
+    const [{ switch: switchVariantProps, switchmark: switchmarkVariantProps }, otherProps] = splitMultipleVariantsProps.splitMultipleVariantsProps(
       {
         ...props,
         // TODO: replace this mapping completely
         size: props.size === "small" ? "16" : props.size === "medium" ? "32" : props.size
       },
-      { switchMark: switchMark.switchMark, switch: _switch.switchStyle }
+      { switchmark: switchmark.switchmark, switch: _switch.switchStyle }
     );
     const classNames = _switch.switchStyle(switchVariantProps);
-    return /* @__PURE__ */ jsxRuntime.jsx(ControlPropsProvider, { value: switchMarkVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ControlPropsProvider, { value: switchmarkVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
       reactSwitch.Switch.Root,
       {
         ref,

package/lib/components/Switch/Switch.d.ts

@@ -1,17 +1,17 @@
 import { Switch as SwitchPrimitive } from '@seed-design/react-switch';
 import { SwitchVariantProps } from '@seed-design/css/recipes/switch';
-import { SwitchMarkVariantProps } from '@seed-design/css/recipes/switch-mark';
+import { SwitchmarkVariantProps } from '@seed-design/css/recipes/switchmark';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { default as React } from 'react';
 /**
  * @deprecated Use `16` or `32` instead of `small` or `medium`.
  */
 type SwitchVariantDeprecatedSizeProps = "small" | "medium";
-export interface SwitchRootProps extends Omit<SwitchVariantProps, "size">, Omit<SwitchMarkVariantProps, "size">, SwitchPrimitive.RootProps {
+export interface SwitchRootProps extends Omit<SwitchVariantProps, "size">, Omit<SwitchmarkVariantProps, "size">, SwitchPrimitive.RootProps {
     size?: SwitchVariantProps["size"] | SwitchVariantDeprecatedSizeProps;
 }
 export declare const SwitchRoot: React.ForwardRefExoticComponent<SwitchRootProps & React.RefAttributes<HTMLLabelElement>>;
-export interface SwitchControlProps extends SwitchMarkVariantProps, SwitchPrimitive.ControlProps {
+export interface SwitchControlProps extends SwitchmarkVariantProps, SwitchPrimitive.ControlProps {
 }
 export declare const SwitchControl: React.ForwardRefExoticComponent<SwitchControlProps & React.RefAttributes<HTMLDivElement>>;
 export interface SwitchThumbProps extends SwitchPrimitive.ThumbProps {

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAE/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B;;GAEG;AACH,KAAK,gCAAgC,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EACtC,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,EACpC,eAAe,CAAC,SAAS;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,gCAAgC,CAAC;CACtE;AAED,eAAO,MAAM,UAAU,0FA0BtB,CAAC;AAKF,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB,EAAE,eAAe,CAAC,YAAY;CAAG;AAEnG,eAAO,MAAM,aAAa,2FAGzB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEvE,eAAO,MAAM,WAAW,yFAGvB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAElG,eAAO,MAAM,WAAW,0FAGvB,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEnF,eAAO,MAAM,iBAAiB,2GAA8B,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAoB,MAAM,2BAA2B,CAAC;AACxF,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,iCAAiC,CAAC;AACvF,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAE9F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAE9E,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B;;GAEG;AACH,KAAK,gCAAgC,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3D,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,MAAM,CAAC,EACtC,IAAI,CAAC,sBAAsB,EAAE,MAAM,CAAC,EACpC,eAAe,CAAC,SAAS;IAC3B,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,GAAG,gCAAgC,CAAC;CACtE;AAED,eAAO,MAAM,UAAU,0FAmCtB,CAAC;AAKF,MAAM,WAAW,kBAAmB,SAAQ,sBAAsB,EAAE,eAAe,CAAC,YAAY;CAAG;AAEnG,eAAO,MAAM,aAAa,2FAGzB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,eAAe,CAAC,UAAU;CAAG;AAEvE,eAAO,MAAM,WAAW,yFAGvB,CAAC;AAIF,MAAM,WAAW,gBAAiB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAElG,eAAO,MAAM,WAAW,0FAGvB,CAAC;AAIF,MAAM,WAAW,sBAAuB,SAAQ,eAAe,CAAC,gBAAgB;CAAG;AAEnF,eAAO,MAAM,iBAAiB,2GAA8B,CAAC"}

package/lib/components/Switch/Switch.js

@@ -2,7 +2,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { Switch, useSwitchContext } from '@seed-design/react-switch';
 import { switchStyle } from '@seed-design/css/recipes/switch';
-import { switchMark } from '@seed-design/css/recipes/switch-mark';
+import { switchmark } from '@seed-design/css/recipes/switchmark';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { Primitive } from '@seed-design/react-primitive';
 import { createWithStateProps } from '../../utils/createWithStateProps.js';
@@ -15,20 +15,25 @@ const {
   withContext: withControlContext,
   PropsProvider: ControlPropsProvider,
   withProvider: withControlProvider
-} = createSlotRecipeContext(switchMark);
+} = createSlotRecipeContext(switchmark);
 const withStateProps = createWithStateProps([useSwitchContext]);
 const SwitchRoot = React__default.forwardRef(
   ({ className, ...props }, ref) => {
-    const [{ switch: switchVariantProps, switchMark: switchMarkVariantProps }, otherProps] = splitMultipleVariantsProps(
+    if (process.env.NODE_ENV !== "production" && (props.size === "small" || props.size === "medium")) {
+      console.warn(
+        `[SEED Design System] Switch size='${props.size}' is deprecated and will be removed in @seed-design/react@1.3.0. Use size='${props.size === "small" ? "16" : "32"}' instead.`
+      );
+    }
+    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 /* @__PURE__ */ jsx(ControlPropsProvider, { value: switchMarkVariantProps, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(ControlPropsProvider, { value: switchmarkVariantProps, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
       Switch.Root,
       {
         ref,

package/lib/components/TagGroup/TagGroup.cjs

@@ -7,13 +7,13 @@ const jsxRuntime = require('react/jsx-runtime');
 const reactPrimitive = require('@seed-design/react-primitive');
 const tagGroup = require('@seed-design/css/recipes/tag-group');
 const tagGroupItem = require('@seed-design/css/recipes/tag-group-item');
-const createRecipeContext = require('../../utils/createRecipeContext.cjs');
 const React = require('react');
 const clsx = require('clsx');
 const splitMultipleVariantsProps = require('../../utils/splitMultipleVariantsProps.cjs');
-const domUtils = require('@seed-design/dom-utils');
+const styled = require('../../utils/styled.cjs');
+const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 
-const { PropsProvider, useProps } = createRecipeContext.createRecipeContext(tagGroupItem.tagGroupItem);
+const { PropsProvider, useProps, withContext, ClassNamesProvider } = createSlotRecipeContext.createSlotRecipeContext(tagGroupItem.tagGroupItem);
 const TagGroupRoot = React.forwardRef(
   ({ className, children, separator = " · ", ...props }, ref) => {
     const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps.splitMultipleVariantsProps(props, { tagGroup: tagGroup.tagGroup, tagGroupItem: tagGroupItem.tagGroupItem });
@@ -27,12 +27,28 @@ const TagGroupRoot = React.forwardRef(
     )) }) });
   }
 );
-const TagGroupItem = React.forwardRef((props, ref) => {
-  const parentVariantProps = useProps();
-  const [variantProps, { className, ...otherProps }] = tagGroupItem.tagGroupItem.splitVariantProps(props);
-  const recipeClassName = tagGroupItem.tagGroupItem(domUtils.mergeProps(parentVariantProps, variantProps));
-  return /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { ref, className: clsx(recipeClassName, className), ...otherProps });
-});
+const TagGroupItem = React.forwardRef(
+  ({ className, ...props }, ref) => {
+    const parentVariantProps = useProps();
+    const [variantProps, otherProps] = tagGroupItem.tagGroupItem.splitVariantProps(props);
+    const classNames = tagGroupItem.tagGroupItem({ ...parentVariantProps, ...variantProps });
+    const { style, restProps } = styled.useStyleProps(otherProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
+      reactPrimitive.Primitive.span,
+      {
+        ref,
+        style,
+        className: clsx(classNames.root, className),
+        ...restProps
+      }
+    ) });
+  }
+);
+const TagGroupItemLabel = withContext(
+  reactPrimitive.Primitive.span,
+  "label"
+);
 
 exports.TagGroupItem = TagGroupItem;
+exports.TagGroupItemLabel = TagGroupItemLabel;
 exports.TagGroupRoot = TagGroupRoot;

package/lib/components/TagGroup/TagGroup.d.ts

@@ -1,12 +1,16 @@
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import { TagGroupVariantProps } from '@seed-design/css/recipes/tag-group';
 import { TagGroupItemVariantProps } from '@seed-design/css/recipes/tag-group-item';
+import { StyleProps } from '../../utils/styled';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 export interface TagGroupRootProps extends TagGroupVariantProps, TagGroupItemVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
     separator?: React.ReactNode;
 }
 export declare const TagGroupRoot: ForwardRefExoticComponent<TagGroupRootProps & RefAttributes<HTMLSpanElement>>;
-export interface TagGroupItemProps extends TagGroupItemVariantProps, PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+export interface TagGroupItemProps extends TagGroupItemVariantProps, Pick<StyleProps, "flexShrink">, PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
 }
 export declare const TagGroupItem: ForwardRefExoticComponent<TagGroupItemProps & RefAttributes<HTMLSpanElement>>;
+export interface TagGroupItemLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const TagGroupItemLabel: ForwardRefExoticComponent<TagGroupItemLabelProps & RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=TagGroup.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,yCAAyC,CAAC;AASjD,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,+GA0BxB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,YAAY,+GAOvB,CAAC"}
+{"version":3,"file":"TagGroup.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,EAAY,KAAK,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AACzF,OAAO,EAEL,KAAK,wBAAwB,EAC9B,MAAM,yCAAyC,CAAC;AAIjD,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAMpE,MAAM,WAAW,iBACf,SAAQ,oBAAoB,EAC1B,wBAAwB,EACxB,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAED,eAAO,MAAM,YAAY,+GA0BxB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,IAAI,CAAC,UAAU,EAAE,YAAY,CAAC,EAC9B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,YAAY,+GAoBxB,CAAC;AAEF,MAAM,WAAW,sBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,iBAAiB,oHAG7B,CAAC"}

package/lib/components/TagGroup/TagGroup.js

@@ -3,13 +3,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { Primitive } from '@seed-design/react-primitive';
 import { tagGroup } from '@seed-design/css/recipes/tag-group';
 import { tagGroupItem } from '@seed-design/css/recipes/tag-group-item';
-import { createRecipeContext } from '../../utils/createRecipeContext.js';
 import { forwardRef, Children, Fragment } from 'react';
 import clsx from 'clsx';
 import { splitMultipleVariantsProps } from '../../utils/splitMultipleVariantsProps.js';
-import { mergeProps } from '@seed-design/dom-utils';
+import { useStyleProps } from '../../utils/styled.js';
+import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 
-const { PropsProvider, useProps } = createRecipeContext(tagGroupItem);
+const { PropsProvider, useProps, withContext, ClassNamesProvider } = createSlotRecipeContext(tagGroupItem);
 const TagGroupRoot = forwardRef(
   ({ className, children, separator = " · ", ...props }, ref) => {
     const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
@@ -23,11 +23,26 @@ const TagGroupRoot = forwardRef(
     )) }) });
   }
 );
-const TagGroupItem = forwardRef((props, ref) => {
-  const parentVariantProps = useProps();
-  const [variantProps, { className, ...otherProps }] = tagGroupItem.splitVariantProps(props);
-  const recipeClassName = tagGroupItem(mergeProps(parentVariantProps, variantProps));
-  return /* @__PURE__ */ jsx(Primitive.span, { ref, className: clsx(recipeClassName, className), ...otherProps });
-});
+const TagGroupItem = forwardRef(
+  ({ className, ...props }, ref) => {
+    const parentVariantProps = useProps();
+    const [variantProps, otherProps] = tagGroupItem.splitVariantProps(props);
+    const classNames = tagGroupItem({ ...parentVariantProps, ...variantProps });
+    const { style, restProps } = useStyleProps(otherProps);
+    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
+      Primitive.span,
+      {
+        ref,
+        style,
+        className: clsx(classNames.root, className),
+        ...restProps
+      }
+    ) });
+  }
+);
+const TagGroupItemLabel = withContext(
+  Primitive.span,
+  "label"
+);
 
-export { TagGroupItem, TagGroupRoot };
+export { TagGroupItem, TagGroupItemLabel, TagGroupRoot };

package/lib/components/TagGroup/TagGroup.namespace.cjs

@@ -7,4 +7,5 @@ const TagGroup = require('./TagGroup.cjs');
 
 
 exports.Item = TagGroup.TagGroupItem;
+exports.ItemLabel = TagGroup.TagGroupItemLabel;
 exports.Root = TagGroup.TagGroupRoot;

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

@@ -1,2 +1,2 @@
-export { TagGroupRoot as Root, TagGroupItem as Item, type TagGroupRootProps as RootProps, type TagGroupItemProps as ItemProps, } from './TagGroup';
+export { TagGroupRoot as Root, TagGroupItem as Item, TagGroupItemLabel as ItemLabel, type TagGroupRootProps as RootProps, type TagGroupItemProps as ItemProps, type TagGroupItemLabelProps as ItemLabelProps, } from './TagGroup';
 //# sourceMappingURL=TagGroup.namespace.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TagGroup.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,IAAI,EACpB,YAAY,IAAI,IAAI,EACpB,KAAK,iBAAiB,IAAI,SAAS,EACnC,KAAK,iBAAiB,IAAI,SAAS,GACpC,MAAM,YAAY,CAAC"}
+{"version":3,"file":"TagGroup.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/TagGroup.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,IAAI,IAAI,EACpB,YAAY,IAAI,IAAI,EACpB,iBAAiB,IAAI,SAAS,EAC9B,KAAK,iBAAiB,IAAI,SAAS,EACnC,KAAK,iBAAiB,IAAI,SAAS,EACnC,KAAK,sBAAsB,IAAI,cAAc,GAC9C,MAAM,YAAY,CAAC"}

package/lib/components/TagGroup/TagGroup.namespace.js

@@ -1 +1 @@
-export { TagGroupItem as Item, TagGroupRoot as Root } from './TagGroup.js';
+export { TagGroupItem as Item, TagGroupItemLabel as ItemLabel, TagGroupRoot as Root } from './TagGroup.js';

package/lib/components/TagGroup/index.cjs

@@ -8,5 +8,6 @@ const TagGroup_namespace = require('./TagGroup.namespace.cjs');
 
 
 exports.TagGroupItem = TagGroup.TagGroupItem;
+exports.TagGroupItemLabel = TagGroup.TagGroupItemLabel;
 exports.TagGroupRoot = TagGroup.TagGroupRoot;
 exports.TagGroup = TagGroup_namespace;

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

@@ -1,3 +1,3 @@
-export { TagGroupRoot, TagGroupItem, type TagGroupRootProps, type TagGroupItemProps, } from './TagGroup';
+export { TagGroupRoot, TagGroupItem, TagGroupItemLabel, type TagGroupRootProps, type TagGroupItemProps, type TagGroupItemLabelProps, } from './TagGroup';
 export * as TagGroup from './TagGroup.namespace';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,GACvB,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,iBAAiB,EACjB,KAAK,iBAAiB,EACtB,KAAK,iBAAiB,EACtB,KAAK,sBAAsB,GAC5B,MAAM,YAAY,CAAC;AAEpB,OAAO,KAAK,QAAQ,MAAM,sBAAsB,CAAC"}

package/lib/components/TagGroup/index.js

@@ -1,3 +1,3 @@
-export { TagGroupItem, TagGroupRoot } from './TagGroup.js';
+export { TagGroupItem, TagGroupItemLabel, TagGroupRoot } from './TagGroup.js';
 import * as TagGroup_namespace from './TagGroup.namespace.js';
 export { TagGroup_namespace as TagGroup };