@seed-design/react 0.2.0 → 0.2.1

package/lib/components/Chip/Chip.cjs

@@ -7,27 +7,36 @@ const chip = require('@seed-design/css/recipes/chip');
 const reactPrimitive = require('@seed-design/react-primitive');
 const createSlotRecipeContext = require('../../utils/createSlotRecipeContext.cjs');
 const Icon = require('../Icon/Icon.cjs');
+const createWithStateProps = require('../../utils/createWithStateProps.cjs');
+const reactCheckbox = require('@seed-design/react-checkbox');
+const reactRadioGroup = require('@seed-design/react-radio-group');
 
 const { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(chip.chip);
+const withStateProps = createWithStateProps.createWithStateProps([reactCheckbox.useCheckboxContext, reactRadioGroup.useRadioGroupItemContext], {
+  strict: false
+});
 const ChipRoot = Icon.withIconRequired(
   withProvider(reactPrimitive.Primitive.button, "root"),
   (props) => props.layout === "iconOnly"
 );
 ChipRoot.displayName = "Chip.Root";
-const ChipLabel = withContext(reactPrimitive.Primitive.span, "label");
+const ChipLabel = withContext(
+  withStateProps(reactPrimitive.Primitive.span),
+  "label"
+);
 ChipLabel.displayName = "Chip.Label";
 const ChipPrefixIcon = withContext(
-  reactPrimitive.Primitive.div,
+  withStateProps(reactPrimitive.Primitive.div),
   "prefixIcon"
 );
 ChipPrefixIcon.displayName = "Chip.PrefixIcon";
 const ChipPrefixAvatar = withContext(
-  reactPrimitive.Primitive.div,
+  withStateProps(reactPrimitive.Primitive.div),
   "prefixAvatar"
 );
 ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
 const ChipSuffixIcon = withContext(
-  reactPrimitive.Primitive.div,
+  withStateProps(reactPrimitive.Primitive.div),
   "suffixIcon"
 );
 ChipSuffixIcon.displayName = "Chip.SuffixIcon";

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAQpC,MAAM,WAAW,aACf,SAAQ,cAAc,EACpB,gBAAgB,EAChB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,QAAQ,+IAGpB,CAAC;AAKF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEhG,eAAO,MAAM,SAAS,wFAAwE,CAAC;AAK/F,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACpG,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAKF,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,gBAAgB,8FAG5B,CAAC;AAKF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACpG,eAAO,MAAM,cAAc,4FAG1B,CAAC"}
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAcpC,MAAM,WAAW,aACf,SAAQ,cAAc,EACpB,gBAAgB,EAChB,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,QAAQ,+IAGpB,CAAC;AAKF,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAEhG,eAAO,MAAM,SAAS,wFAGrB,CAAC;AAKF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACpG,eAAO,MAAM,cAAc,4FAG1B,CAAC;AAKF,MAAM,WAAW,qBACf,SAAQ,cAAc,EACpB,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAE3C,eAAO,MAAM,gBAAgB,8FAG5B,CAAC;AAKF,MAAM,WAAW,mBAAoB,SAAQ,cAAc,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AACpG,eAAO,MAAM,cAAc,4FAG1B,CAAC"}

package/lib/components/Chip/Chip.js

@@ -3,27 +3,36 @@ import { chip } from '@seed-design/css/recipes/chip';
 import { Primitive } from '@seed-design/react-primitive';
 import { createSlotRecipeContext } from '../../utils/createSlotRecipeContext.js';
 import { withIconRequired } from '../Icon/Icon.js';
+import { createWithStateProps } from '../../utils/createWithStateProps.js';
+import { useCheckboxContext } from '@seed-design/react-checkbox';
+import { useRadioGroupItemContext } from '@seed-design/react-radio-group';
 
 const { withProvider, withContext } = createSlotRecipeContext(chip);
+const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
+  strict: false
+});
 const ChipRoot = withIconRequired(
   withProvider(Primitive.button, "root"),
   (props) => props.layout === "iconOnly"
 );
 ChipRoot.displayName = "Chip.Root";
-const ChipLabel = withContext(Primitive.span, "label");
+const ChipLabel = withContext(
+  withStateProps(Primitive.span),
+  "label"
+);
 ChipLabel.displayName = "Chip.Label";
 const ChipPrefixIcon = withContext(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "prefixIcon"
 );
 ChipPrefixIcon.displayName = "Chip.PrefixIcon";
 const ChipPrefixAvatar = withContext(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "prefixAvatar"
 );
 ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
 const ChipSuffixIcon = withContext(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "suffixIcon"
 );
 ChipSuffixIcon.displayName = "Chip.SuffixIcon";

package/lib/components/Chip/Chip.namespace.cjs

@@ -9,4 +9,5 @@ const Chip = require('./Chip.cjs');
 exports.Label = Chip.ChipLabel;
 exports.PrefixAvatar = Chip.ChipPrefixAvatar;
 exports.PrefixIcon = Chip.ChipPrefixIcon;
+exports.Root = Chip.ChipRoot;
 exports.SuffixIcon = Chip.ChipSuffixIcon;

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

@@ -1,2 +1,2 @@
-export { ChipLabel as Label, ChipPrefixIcon as PrefixIcon, ChipPrefixAvatar as PrefixAvatar, ChipSuffixIcon as SuffixIcon, type ChipLabelProps as LabelProps, type ChipPrefixIconProps as PrefixIconProps, type ChipPrefixAvatarProps as PrefixAvatarProps, type ChipSuffixIconProps as SuffixIconProps, } from './Chip';
+export { ChipRoot as Root, ChipLabel as Label, ChipPrefixIcon as PrefixIcon, ChipPrefixAvatar as PrefixAvatar, ChipSuffixIcon as SuffixIcon, type ChipRootProps as RootProps, type ChipLabelProps as LabelProps, type ChipPrefixIconProps as PrefixIconProps, type ChipPrefixAvatarProps as PrefixAvatarProps, type ChipSuffixIconProps as SuffixIconProps, } from './Chip';
 //# sourceMappingURL=Chip.namespace.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Chip.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,IAAI,KAAK,EAClB,cAAc,IAAI,UAAU,EAC5B,gBAAgB,IAAI,YAAY,EAChC,cAAc,IAAI,UAAU,EAC5B,KAAK,cAAc,IAAI,UAAU,EACjC,KAAK,mBAAmB,IAAI,eAAe,EAC3C,KAAK,qBAAqB,IAAI,iBAAiB,EAC/C,KAAK,mBAAmB,IAAI,eAAe,GAC5C,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"Chip.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Chip.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,IAAI,IAAI,EAChB,SAAS,IAAI,KAAK,EAClB,cAAc,IAAI,UAAU,EAC5B,gBAAgB,IAAI,YAAY,EAChC,cAAc,IAAI,UAAU,EAC5B,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,cAAc,IAAI,UAAU,EACjC,KAAK,mBAAmB,IAAI,eAAe,EAC3C,KAAK,qBAAqB,IAAI,iBAAiB,EAC/C,KAAK,mBAAmB,IAAI,eAAe,GAC5C,MAAM,QAAQ,CAAC"}

package/lib/components/Chip/Chip.namespace.js

@@ -1 +1 @@
-export { ChipLabel as Label, ChipPrefixAvatar as PrefixAvatar, ChipPrefixIcon as PrefixIcon, ChipSuffixIcon as SuffixIcon } from './Chip.js';
+export { ChipLabel as Label, ChipPrefixAvatar as PrefixAvatar, ChipPrefixIcon as PrefixIcon, ChipRoot as Root, ChipSuffixIcon as SuffixIcon } from './Chip.js';

package/lib/components/Divider/Divider.cjs

@@ -29,7 +29,7 @@ const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 const Divider = React__namespace.forwardRef((props, ref) => {
   const {
     as = "hr",
-    color = "stroke.neutral",
+    color = "stroke.neutralMuted",
     thickness = 1,
     orientation = "horizontal",
     role,

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

@@ -9,7 +9,7 @@ export interface DividerProps {
      */
     as?: "hr" | "div" | "li";
     /**
-     * @default "stroke.neutral"
+     * @default "stroke.neutralMuted"
      */
     color?: BoxProps["borderColor"];
     /**

package/lib/components/Divider/Divider.js

@@ -6,7 +6,7 @@ import { Box } from '../Box/Box.js';
 const Divider = React.forwardRef((props, ref) => {
   const {
     as = "hr",
-    color = "stroke.neutral",
+    color = "stroke.neutralMuted",
     thickness = 1,
     orientation = "horizontal",
     role,

package/lib/components/ResponsivePair/ResponsivePair.d.ts

@@ -2,7 +2,7 @@ import { FlexProps } from '../Flex';
 import * as React from "react";
 export interface ResponsivePairProps extends Omit<FlexProps, "flexDirection" | "flexWrap"> {
     /**
-     * @default wrap-reverse
+     * @default "wrap-reverse"
      */
     wrap?: "wrap" | "wrap-reverse";
     children: [React.ReactNode, React.ReactNode];

package/lib/utils/createWithStateProps.cjs

@@ -7,7 +7,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
 
 function createWithStateProps(useContexts, options) {
-  const strict = true;
+  const strict = options?.strict ?? true;
   return function withStateProps(Component) {
     const Node = React.forwardRef((props, ref) => {
       const stateProps = {};

package/lib/utils/createWithStateProps.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 
 function createWithStateProps(useContexts, options) {
-  const strict = true;
+  const strict = options?.strict ?? true;
   return function withStateProps(Component) {
     const Node = forwardRef((props, ref) => {
       const stateProps = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "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.0",
+    "@seed-design/css": "0.2.1",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.2.0",
+    "@seed-design/css": "0.2.1",
     "@vitejs/plugin-react": "^5.0.0",
     "ajv": "^8.17.1",
     "globby": "^14.1.0",

package/src/components/Chip/Chip.namespace.ts

@@ -1,8 +1,10 @@
 export {
+  ChipRoot as Root,
   ChipLabel as Label,
   ChipPrefixIcon as PrefixIcon,
   ChipPrefixAvatar as PrefixAvatar,
   ChipSuffixIcon as SuffixIcon,
+  type ChipRootProps as RootProps,
   type ChipLabelProps as LabelProps,
   type ChipPrefixIconProps as PrefixIconProps,
   type ChipPrefixAvatarProps as PrefixAvatarProps,

package/src/components/Chip/Chip.tsx

@@ -3,8 +3,14 @@ import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import type * as React from "react";
 import { createSlotRecipeContext } from "../../utils/createSlotRecipeContext";
 import { withIconRequired } from "../Icon/Icon";
+import { createWithStateProps } from "../../utils/createWithStateProps";
+import { useCheckboxContext } from "@seed-design/react-checkbox";
+import { useRadioGroupItemContext } from "@seed-design/react-radio-group";
 
 const { withProvider, withContext } = createSlotRecipeContext(chip);
+const withStateProps = createWithStateProps([useCheckboxContext, useRadioGroupItemContext], {
+  strict: false,
+});
 
 ////////////////////////////////////////////////////////////////////////////////////
 
@@ -23,14 +29,17 @@ ChipRoot.displayName = "Chip.Root";
 
 export interface ChipLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
 
-export const ChipLabel = withContext<HTMLSpanElement, ChipLabelProps>(Primitive.span, "label");
+export const ChipLabel = withContext<HTMLSpanElement, ChipLabelProps>(
+  withStateProps(Primitive.span),
+  "label",
+);
 ChipLabel.displayName = "Chip.Label";
 
 ////////////////////////////////////////////////////////////////////////////////////
 
 export interface ChipPrefixIconProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 export const ChipPrefixIcon = withContext<HTMLDivElement, ChipPrefixIconProps>(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "prefixIcon",
 );
 ChipPrefixIcon.displayName = "Chip.PrefixIcon";
@@ -42,7 +51,7 @@ export interface ChipPrefixAvatarProps
     React.HTMLAttributes<HTMLDivElement> {}
 
 export const ChipPrefixAvatar = withContext<HTMLDivElement, ChipPrefixAvatarProps>(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "prefixAvatar",
 );
 ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
@@ -51,7 +60,7 @@ ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
 
 export interface ChipSuffixIconProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 export const ChipSuffixIcon = withContext<HTMLDivElement, ChipSuffixIconProps>(
-  Primitive.div,
+  withStateProps(Primitive.div),
   "suffixIcon",
 );
 ChipSuffixIcon.displayName = "Chip.SuffixIcon";

package/src/components/Divider/Divider.tsx

@@ -11,7 +11,7 @@ export interface DividerProps {
   as?: "hr" | "div" | "li";
 
   /**
-   * @default "stroke.neutral"
+   * @default "stroke.neutralMuted"
    */
   color?: BoxProps["borderColor"];
 
@@ -31,7 +31,7 @@ export interface DividerProps {
 export const Divider = React.forwardRef<HTMLHRElement, DividerProps>((props, ref) => {
   const {
     as = "hr",
-    color = "stroke.neutral",
+    color = "stroke.neutralMuted",
     thickness = 1,
     orientation = "horizontal",
     role,

package/src/components/ResponsivePair/ResponsivePair.tsx

@@ -5,7 +5,7 @@ import { Flex, type FlexProps } from "../Flex";
 
 export interface ResponsivePairProps extends Omit<FlexProps, "flexDirection" | "flexWrap"> {
   /**
-   * @default wrap-reverse
+   * @default "wrap-reverse"
    */
   wrap?: "wrap" | "wrap-reverse";