@seed-design/react 0.1.3 → 0.1.4

package/lib/components/ActionChip/ActionChip.d.ts

@@ -1,7 +1,23 @@
 import { ActionChipVariantProps } from '@seed-design/css/recipes/action-chip';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import type * as React from "react";
+/**
+ * @deprecated ActionChip is deprecated. Use Chip.Button with variant="solid" instead.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <ActionChip size="medium">Label</ActionChip>
+ *
+ * // After
+ * import { Chip } from "@seed-design/react";
+ * <Chip.Button size="medium" variant="solid">Label</Chip.Button>
+ * ```
+ */
 export interface ActionChipProps extends ActionChipVariantProps, PrimitiveProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
 }
+/**
+ * @deprecated ActionChip is deprecated. Use Chip.Button with variant="solid" instead.
+ */
 export declare const ActionChip: React.ForwardRefExoticComponent<Omit<ActionChipProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=ActionChip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../src/components/ActionChip/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,eACf,SAAQ,sBAAsB,EAC5B,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD,eAAO,MAAM,UAAU,iJAGtB,CAAC"}
+{"version":3,"file":"ActionChip.d.ts","sourceRoot":"","sources":["../../../src/components/ActionChip/ActionChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAC/F,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,eACf,SAAQ,sBAAsB,EAC5B,cAAc,EACd,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;CAAG;AAEpD;;GAEG;AACH,eAAO,MAAM,UAAU,iJAGtB,CAAC"}

package/lib/components/Chip/Chip.cjs

@@ -0,0 +1,39 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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 { withProvider, withContext } = createSlotRecipeContext.createSlotRecipeContext(chip.chip);
+const ChipRoot = Icon.withIconRequired(
+  withProvider(reactPrimitive.Primitive.button, "root"),
+  (props) => props.layout === "iconOnly"
+);
+ChipRoot.displayName = "Chip.Root";
+const ChipLabel = withContext(reactPrimitive.Primitive.span, "label");
+ChipLabel.displayName = "Chip.Label";
+const ChipPrefixIcon = withContext(
+  reactPrimitive.Primitive.div,
+  "prefixIcon"
+);
+ChipPrefixIcon.displayName = "Chip.PrefixIcon";
+const ChipPrefixAvatar = withContext(
+  reactPrimitive.Primitive.div,
+  "prefixAvatar"
+);
+ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
+const ChipSuffixIcon = withContext(
+  reactPrimitive.Primitive.div,
+  "suffixIcon"
+);
+ChipSuffixIcon.displayName = "Chip.SuffixIcon";
+
+exports.ChipLabel = ChipLabel;
+exports.ChipPrefixAvatar = ChipPrefixAvatar;
+exports.ChipPrefixIcon = ChipPrefixIcon;
+exports.ChipRoot = ChipRoot;
+exports.ChipSuffixIcon = ChipSuffixIcon;

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

@@ -0,0 +1,19 @@
+import { ChipVariantProps } from '@seed-design/css/recipes/chip';
+import { PrimitiveProps } from '@seed-design/react-primitive';
+import type * as React from "react";
+export interface ChipRootProps extends PrimitiveProps, ChipVariantProps, React.ButtonHTMLAttributes<HTMLButtonElement> {
+}
+export declare const ChipRoot: React.ForwardRefExoticComponent<Omit<ChipRootProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export interface ChipLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {
+}
+export declare const ChipLabel: React.ForwardRefExoticComponent<ChipLabelProps & React.RefAttributes<HTMLSpanElement>>;
+export interface ChipPrefixIconProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const ChipPrefixIcon: React.ForwardRefExoticComponent<ChipPrefixIconProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChipPrefixAvatarProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const ChipPrefixAvatar: React.ForwardRefExoticComponent<ChipPrefixAvatarProps & React.RefAttributes<HTMLDivElement>>;
+export interface ChipSuffixIconProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const ChipSuffixIcon: React.ForwardRefExoticComponent<ChipSuffixIconProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Chip.d.ts.map

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

@@ -0,0 +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"}

package/lib/components/Chip/Chip.js

@@ -0,0 +1,31 @@
+'use client';
+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';
+
+const { withProvider, withContext } = createSlotRecipeContext(chip);
+const ChipRoot = withIconRequired(
+  withProvider(Primitive.button, "root"),
+  (props) => props.layout === "iconOnly"
+);
+ChipRoot.displayName = "Chip.Root";
+const ChipLabel = withContext(Primitive.span, "label");
+ChipLabel.displayName = "Chip.Label";
+const ChipPrefixIcon = withContext(
+  Primitive.div,
+  "prefixIcon"
+);
+ChipPrefixIcon.displayName = "Chip.PrefixIcon";
+const ChipPrefixAvatar = withContext(
+  Primitive.div,
+  "prefixAvatar"
+);
+ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
+const ChipSuffixIcon = withContext(
+  Primitive.div,
+  "suffixIcon"
+);
+ChipSuffixIcon.displayName = "Chip.SuffixIcon";
+
+export { ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRoot, ChipSuffixIcon };

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

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Chip = require('./Chip.cjs');
+
+
+
+exports.Label = Chip.ChipLabel;
+exports.PrefixAvatar = Chip.ChipPrefixAvatar;
+exports.PrefixIcon = Chip.ChipPrefixIcon;
+exports.SuffixIcon = Chip.ChipSuffixIcon;

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

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

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

@@ -0,0 +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"}

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

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

package/lib/components/Chip/index.cjs

@@ -0,0 +1,15 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Chip = require('./Chip.cjs');
+const Chip_namespace = require('./Chip.namespace.cjs');
+
+
+
+exports.ChipLabel = Chip.ChipLabel;
+exports.ChipPrefixAvatar = Chip.ChipPrefixAvatar;
+exports.ChipPrefixIcon = Chip.ChipPrefixIcon;
+exports.ChipRoot = Chip.ChipRoot;
+exports.ChipSuffixIcon = Chip.ChipSuffixIcon;
+exports.Chip = Chip_namespace;

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

@@ -0,0 +1,3 @@
+export { ChipRoot, ChipLabel, ChipPrefixIcon, ChipPrefixAvatar, ChipSuffixIcon, type ChipRootProps, type ChipLabelProps, type ChipPrefixIconProps, type ChipPrefixAvatarProps, type ChipSuffixIconProps, } from './Chip';
+export * as Chip from './Chip.namespace';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,QAAQ,EACR,SAAS,EACT,cAAc,EACd,gBAAgB,EAChB,cAAc,EACd,KAAK,aAAa,EAClB,KAAK,cAAc,EACnB,KAAK,mBAAmB,EACxB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,GACzB,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}

package/lib/components/Chip/index.js

@@ -0,0 +1,3 @@
+export { ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRoot, ChipSuffixIcon } from './Chip.js';
+import * as Chip_namespace from './Chip.namespace.js';
+export { Chip_namespace as Chip };

package/lib/components/ControlChip/ControlChip.cjs

@@ -13,5 +13,6 @@ const ControlChip = Icon.withIconRequired(
   withContext(reactPrimitive.Primitive.button),
   (props) => props.layout === "iconOnly"
 );
+ControlChip.displayName = "ControlChip";
 
 exports.ControlChip = ControlChip;

package/lib/components/ControlChip/ControlChip.d.ts

@@ -1,9 +1,28 @@
 import { ControlChipVariantProps } from '@seed-design/css/recipes/control-chip';
 import { PrimitiveProps } from '@seed-design/react-primitive';
 import type * as React from "react";
+/**
+ * @deprecated ControlChipBaseProps is deprecated. Use ChipBaseProps from Chip instead.
+ */
 export interface ControlChipBaseProps extends PrimitiveProps, ControlChipVariantProps {
 }
+/**
+ * @deprecated ControlChipProps is deprecated. Use Chip.Toggle or Chip.Button instead.
+ *
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <ControlChip size="medium">Label</ControlChip>
+ *
+ * // After
+ * import { Chip } from "@seed-design/react";
+ * <Chip.Toggle size="medium" variant="outlineStrong">Label</Chip.Toggle>
+ * ```
+ */
 export interface ControlChipProps extends ControlChipBaseProps, React.HTMLAttributes<HTMLButtonElement> {
 }
+/**
+ * @deprecated ControlChip is deprecated. Use Chip.Toggle or Chip.Button instead.
+ */
 export declare const ControlChip: React.ForwardRefExoticComponent<Omit<ControlChipProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 //# sourceMappingURL=ControlChip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ControlChip.d.ts","sourceRoot":"","sources":["../../../src/components/ControlChip/ControlChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC,MAAM,WAAW,oBAAqB,SAAQ,cAAc,EAAE,uBAAuB;CAAG;AAExF,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C,eAAO,MAAM,WAAW,kJAGvB,CAAC"}
+{"version":3,"file":"ControlChip.d.ts","sourceRoot":"","sources":["../../../src/components/ControlChip/ControlChip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,uBAAuB,EAAE,MAAM,uCAAuC,CAAC;AAClG,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAMpC;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,cAAc,EAAE,uBAAuB;CAAG;AAExF;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,gBACf,SAAQ,oBAAoB,EAC1B,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;CAAG;AAE9C;;GAEG;AACH,eAAO,MAAM,WAAW,kJAGvB,CAAC"}

package/lib/components/ControlChip/ControlChip.js

@@ -9,5 +9,6 @@ const ControlChip = withIconRequired(
   withContext(Primitive.button),
   (props) => props.layout === "iconOnly"
 );
+ControlChip.displayName = "ControlChip";
 
 export { ControlChip };

package/lib/components/index.cjs

@@ -17,6 +17,8 @@ const Callout_namespace = require('./Callout/Callout.namespace.cjs');
 const Celcius = require('./Celcius/Celcius.cjs');
 const Checkbox = require('./Checkbox/Checkbox.cjs');
 const Checkbox_namespace = require('./Checkbox/Checkbox.namespace.cjs');
+const Chip = require('./Chip/Chip.cjs');
+const Chip_namespace = require('./Chip/Chip.namespace.cjs');
 const ChipTabs = require('./ChipTabs/ChipTabs.cjs');
 const ChipTabs_namespace = require('./ChipTabs/ChipTabs.namespace.cjs');
 const Columns = require('./Columns/Columns.cjs');
@@ -129,6 +131,12 @@ exports.CheckboxIndicator = Checkbox.CheckboxIndicator;
 exports.CheckboxLabel = Checkbox.CheckboxLabel;
 exports.CheckboxRoot = Checkbox.CheckboxRoot;
 exports.Checkbox = Checkbox_namespace;
+exports.ChipLabel = Chip.ChipLabel;
+exports.ChipPrefixAvatar = Chip.ChipPrefixAvatar;
+exports.ChipPrefixIcon = Chip.ChipPrefixIcon;
+exports.ChipRoot = Chip.ChipRoot;
+exports.ChipSuffixIcon = Chip.ChipSuffixIcon;
+exports.Chip = Chip_namespace;
 exports.ChipTabsCarousel = ChipTabs.ChipTabsCarousel;
 exports.ChipTabsCarouselCamera = ChipTabs.ChipTabsCarouselCamera;
 exports.ChipTabsContent = ChipTabs.ChipTabsContent;

package/lib/components/index.d.ts

@@ -8,6 +8,7 @@ export * from './Box';
 export * from './Callout';
 export * from './Celcius';
 export * from './Checkbox';
+export * from './Chip';
 export * from './ChipTabs';
 export * from './Columns';
 export * from './ConsistentWidth';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,uBAAuB,CAAC;AACtC,cAAc,eAAe,CAAC;AAC9B,cAAc,OAAO,CAAC;AACtB,cAAc,wBAAwB,CAAC;AACvC,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,YAAY,CAAC;AAC3B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/lib/components/index.js

@@ -18,6 +18,9 @@ export { Celcius } from './Celcius/Celcius.js';
 export { CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from './Checkbox/Checkbox.js';
 import * as Checkbox_namespace from './Checkbox/Checkbox.namespace.js';
 export { Checkbox_namespace as Checkbox };
+export { ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRoot, ChipSuffixIcon } from './Chip/Chip.js';
+import * as Chip_namespace from './Chip/Chip.namespace.js';
+export { Chip_namespace as Chip };
 export { ChipTabsCarousel, ChipTabsCarouselCamera, ChipTabsContent, ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from './ChipTabs/ChipTabs.js';
 import * as ChipTabs_namespace from './ChipTabs/ChipTabs.namespace.js';
 export { ChipTabs_namespace as ChipTabs };

package/lib/index.cjs

@@ -17,6 +17,8 @@ const Callout_namespace = require('./components/Callout/Callout.namespace.cjs');
 const Celcius = require('./components/Celcius/Celcius.cjs');
 const Checkbox = require('./components/Checkbox/Checkbox.cjs');
 const Checkbox_namespace = require('./components/Checkbox/Checkbox.namespace.cjs');
+const Chip = require('./components/Chip/Chip.cjs');
+const Chip_namespace = require('./components/Chip/Chip.namespace.cjs');
 const ChipTabs = require('./components/ChipTabs/ChipTabs.cjs');
 const ChipTabs_namespace = require('./components/ChipTabs/ChipTabs.namespace.cjs');
 const Columns = require('./components/Columns/Columns.cjs');
@@ -129,6 +131,12 @@ exports.CheckboxIndicator = Checkbox.CheckboxIndicator;
 exports.CheckboxLabel = Checkbox.CheckboxLabel;
 exports.CheckboxRoot = Checkbox.CheckboxRoot;
 exports.Checkbox = Checkbox_namespace;
+exports.ChipLabel = Chip.ChipLabel;
+exports.ChipPrefixAvatar = Chip.ChipPrefixAvatar;
+exports.ChipPrefixIcon = Chip.ChipPrefixIcon;
+exports.ChipRoot = Chip.ChipRoot;
+exports.ChipSuffixIcon = Chip.ChipSuffixIcon;
+exports.Chip = Chip_namespace;
 exports.ChipTabsCarousel = ChipTabs.ChipTabsCarousel;
 exports.ChipTabsCarouselCamera = ChipTabs.ChipTabsCarouselCamera;
 exports.ChipTabsContent = ChipTabs.ChipTabsContent;

package/lib/index.js

@@ -18,6 +18,9 @@ export { Celcius } from './components/Celcius/Celcius.js';
 export { CheckboxControl, CheckboxHiddenInput, CheckboxIndicator, CheckboxLabel, CheckboxRoot } from './components/Checkbox/Checkbox.js';
 import * as Checkbox_namespace from './components/Checkbox/Checkbox.namespace.js';
 export { Checkbox_namespace as Checkbox };
+export { ChipLabel, ChipPrefixAvatar, ChipPrefixIcon, ChipRoot, ChipSuffixIcon } from './components/Chip/Chip.js';
+import * as Chip_namespace from './components/Chip/Chip.namespace.js';
+export { Chip_namespace as Chip };
 export { ChipTabsCarousel, ChipTabsCarouselCamera, ChipTabsContent, ChipTabsList, ChipTabsRoot, ChipTabsTrigger } from './components/ChipTabs/ChipTabs.js';
 import * as ChipTabs_namespace from './components/ChipTabs/ChipTabs.namespace.js';
 export { ChipTabs_namespace as ChipTabs };

package/lib/utils/styled.cjs

@@ -33,6 +33,13 @@ function handleBleed(dimension, direction) {
   }
   return handleDimension(dimension);
 }
+function handlePaddingWithSafeArea(padding, direction) {
+  if (padding === "safeArea") {
+    return `var(--seed-safe-area-${direction})`;
+  }
+  const paddingValue = handleDimension(padding);
+  return paddingValue;
+}
 function handleRadius(radius) {
   if (radius == null) {
     return void 0;
@@ -234,9 +241,9 @@ function useStyleProps(props) {
       "--seed-box-padding": handleDimension(padding ?? p),
       "--seed-box-padding-x": handleDimension(paddingX ?? px),
       "--seed-box-padding-y": handleDimension(paddingY ?? py),
-      "--seed-box-padding-top": handleDimension(paddingTop ?? pt),
+      "--seed-box-padding-top": handlePaddingWithSafeArea(paddingTop ?? pt, "top"),
       "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
-      "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
+      "--seed-box-padding-bottom": handlePaddingWithSafeArea(paddingBottom ?? pb, "bottom"),
       "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
       "--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
       "--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),
@@ -279,5 +286,6 @@ function withStyleProps(Component) {
 
 exports.handleColor = handleColor;
 exports.handleDimension = handleDimension;
+exports.handlePaddingWithSafeArea = handlePaddingWithSafeArea;
 exports.useStyleProps = useStyleProps;
 exports.withStyleProps = withStyleProps;

package/lib/utils/styled.d.ts

@@ -2,6 +2,7 @@ import { ScopedColorBg, ScopedColorFg, ScopedColorPalette, ScopedColorStroke, Di
 import { ForwardRefExoticComponent, PropsWithoutRef, RefAttributes } from 'react';
 export declare function handleColor(color: string | undefined): any;
 export declare function handleDimension(dimension: string | 0 | undefined): string | undefined;
+export declare function handlePaddingWithSafeArea(padding: string | 0 | undefined, direction: "top" | "bottom"): string | undefined;
 export interface StyleProps {
     /**
      * Shorthand for `background`.
@@ -59,21 +60,21 @@ export interface StyleProps {
      * Shorthand for `paddingY`.
      */
     py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
-    paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
     /**
      * Shorthand for `paddingTop`.
      */
-    pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
     paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
     /**
      * Shorthand for `paddingRight`.
      */
     pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
-    paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
     /**
      * Shorthand for `paddingBottom`.
      */
-    pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+    pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
     paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
     /**
      * Shorthand for `paddingLeft`.

package/lib/utils/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../src/utils/styled.tsx"],"names":[],"mappings":"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"}

package/lib/utils/styled.js

@@ -29,6 +29,13 @@ function handleBleed(dimension, direction) {
   }
   return handleDimension(dimension);
 }
+function handlePaddingWithSafeArea(padding, direction) {
+  if (padding === "safeArea") {
+    return `var(--seed-safe-area-${direction})`;
+  }
+  const paddingValue = handleDimension(padding);
+  return paddingValue;
+}
 function handleRadius(radius) {
   if (radius == null) {
     return void 0;
@@ -230,9 +237,9 @@ function useStyleProps(props) {
       "--seed-box-padding": handleDimension(padding ?? p),
       "--seed-box-padding-x": handleDimension(paddingX ?? px),
       "--seed-box-padding-y": handleDimension(paddingY ?? py),
-      "--seed-box-padding-top": handleDimension(paddingTop ?? pt),
+      "--seed-box-padding-top": handlePaddingWithSafeArea(paddingTop ?? pt, "top"),
       "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
-      "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
+      "--seed-box-padding-bottom": handlePaddingWithSafeArea(paddingBottom ?? pb, "bottom"),
       "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
       "--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
       "--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),
@@ -273,4 +280,4 @@ function withStyleProps(Component) {
   return Node;
 }
 
-export { handleColor, handleDimension, useStyleProps, withStyleProps };
+export { handleColor, handleDimension, handlePaddingWithSafeArea, useStyleProps, withStyleProps };

package/package.json

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

package/src/components/ActionChip/ActionChip.tsx

@@ -6,11 +6,27 @@ import { withIconRequired } from "../Icon/Icon";
 
 const { withContext } = createRecipeContext(actionChip);
 
+/**
+ * @deprecated ActionChip is deprecated. Use Chip.Button with variant="solid" instead.
+ * 
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <ActionChip size="medium">Label</ActionChip>
+ * 
+ * // After
+ * import { Chip } from "@seed-design/react";
+ * <Chip.Button size="medium" variant="solid">Label</Chip.Button>
+ * ```
+ */
 export interface ActionChipProps
   extends ActionChipVariantProps,
     PrimitiveProps,
     React.ButtonHTMLAttributes<HTMLButtonElement> {}
 
+/**
+ * @deprecated ActionChip is deprecated. Use Chip.Button with variant="solid" instead.
+ */
 export const ActionChip = withIconRequired(
   withContext<HTMLButtonElement, ActionChipProps>(Primitive.button),
   (props: ActionChipProps) => props.layout === "iconOnly",

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

@@ -0,0 +1,10 @@
+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";

package/src/components/Chip/Chip.tsx

@@ -0,0 +1,57 @@
+import { chip, type ChipVariantProps } from "@seed-design/css/recipes/chip";
+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";
+
+const { withProvider, withContext } = createSlotRecipeContext(chip);
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipRootProps
+  extends PrimitiveProps,
+    ChipVariantProps,
+    React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const ChipRoot = withIconRequired(
+  withProvider<HTMLButtonElement, ChipRootProps>(Primitive.button, "root"),
+  (props: ChipRootProps) => props.layout === "iconOnly",
+);
+ChipRoot.displayName = "Chip.Root";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLSpanElement> {}
+
+export const ChipLabel = withContext<HTMLSpanElement, ChipLabelProps>(Primitive.span, "label");
+ChipLabel.displayName = "Chip.Label";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipPrefixIconProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+export const ChipPrefixIcon = withContext<HTMLDivElement, ChipPrefixIconProps>(
+  Primitive.div,
+  "prefixIcon",
+);
+ChipPrefixIcon.displayName = "Chip.PrefixIcon";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipPrefixAvatarProps
+  extends PrimitiveProps,
+    React.HTMLAttributes<HTMLDivElement> {}
+
+export const ChipPrefixAvatar = withContext<HTMLDivElement, ChipPrefixAvatarProps>(
+  Primitive.div,
+  "prefixAvatar",
+);
+ChipPrefixAvatar.displayName = "Chip.PrefixAvatar";
+
+////////////////////////////////////////////////////////////////////////////////////
+
+export interface ChipSuffixIconProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
+export const ChipSuffixIcon = withContext<HTMLDivElement, ChipSuffixIconProps>(
+  Primitive.div,
+  "suffixIcon",
+);
+ChipSuffixIcon.displayName = "Chip.SuffixIcon";

package/src/components/Chip/index.ts

@@ -0,0 +1,14 @@
+export {
+  ChipRoot,
+  ChipLabel,
+  ChipPrefixIcon,
+  ChipPrefixAvatar,
+  ChipSuffixIcon,
+  type ChipRootProps,
+  type ChipLabelProps,
+  type ChipPrefixIconProps,
+  type ChipPrefixAvatarProps,
+  type ChipSuffixIconProps,
+} from "./Chip";
+
+export * as Chip from "./Chip.namespace";

package/src/components/ControlChip/ControlChip.tsx

@@ -6,13 +6,33 @@ import { withIconRequired } from "../Icon/Icon";
 
 const { withContext } = createRecipeContext(controlChip);
 
+/**
+ * @deprecated ControlChipBaseProps is deprecated. Use ChipBaseProps from Chip instead.
+ */
 export interface ControlChipBaseProps extends PrimitiveProps, ControlChipVariantProps {}
 
+/**
+ * @deprecated ControlChipProps is deprecated. Use Chip.Toggle or Chip.Button instead.
+ * 
+ * Migration guide:
+ * ```tsx
+ * // Before
+ * <ControlChip size="medium">Label</ControlChip>
+ * 
+ * // After
+ * import { Chip } from "@seed-design/react";
+ * <Chip.Toggle size="medium" variant="outlineStrong">Label</Chip.Toggle>
+ * ```
+ */
 export interface ControlChipProps
   extends ControlChipBaseProps,
     React.HTMLAttributes<HTMLButtonElement> {}
 
+/**
+ * @deprecated ControlChip is deprecated. Use Chip.Toggle or Chip.Button instead.
+ */
 export const ControlChip = withIconRequired(
   withContext<HTMLButtonElement, ControlChipProps>(Primitive.button),
   (props: ControlChipProps) => props.layout === "iconOnly",
 );
+ControlChip.displayName = "ControlChip";

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from "./Box";
 export * from "./Callout";
 export * from "./Celcius";
 export * from "./Checkbox";
+export * from "./Chip";
 export * from "./ChipTabs";
 export * from "./Columns";
 export * from "./ConsistentWidth";

package/src/utils/styled.tsx

@@ -51,6 +51,19 @@ function handleBleed(
   return handleDimension(dimension);
 }
 
+export function handlePaddingWithSafeArea(
+  padding: string | 0 | undefined,
+  direction: "top" | "bottom",
+): string | undefined {
+  if (padding === "safeArea") {
+    return `var(--seed-safe-area-${direction})`;
+  }
+
+  const paddingValue = handleDimension(padding);
+
+  return paddingValue;
+}
+
 function handleRadius(radius: string | 0 | undefined) {
   if (radius == null) {
     return undefined;
@@ -284,12 +297,18 @@ export interface StyleProps {
    */
   py?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
-  paddingTop?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingTop?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
 
   /**
    * Shorthand for `paddingTop`.
    */
-  pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  pt?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
 
   paddingRight?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
@@ -298,12 +317,18 @@ export interface StyleProps {
    */
   pr?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
-  paddingBottom?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  paddingBottom?:
+    | Dimension
+    | `spacingX.${SpacingX}`
+    | `spacingY.${SpacingY}`
+    | 0
+    | "safeArea"
+    | (string & {});
 
   /**
    * Shorthand for `paddingBottom`.
    */
-  pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
+  pb?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | "safeArea" | (string & {});
 
   paddingLeft?: Dimension | `spacingX.${SpacingX}` | `spacingY.${SpacingY}` | 0 | (string & {});
 
@@ -576,9 +601,9 @@ export function useStyleProps<T extends UseStyleProps>(
       "--seed-box-padding": handleDimension(padding ?? p),
       "--seed-box-padding-x": handleDimension(paddingX ?? px),
       "--seed-box-padding-y": handleDimension(paddingY ?? py),
-      "--seed-box-padding-top": handleDimension(paddingTop ?? pt),
+      "--seed-box-padding-top": handlePaddingWithSafeArea(paddingTop ?? pt, "top"),
       "--seed-box-padding-right": handleDimension(paddingRight ?? pr),
-      "--seed-box-padding-bottom": handleDimension(paddingBottom ?? pb),
+      "--seed-box-padding-bottom": handlePaddingWithSafeArea(paddingBottom ?? pb, "bottom"),
       "--seed-box-padding-left": handleDimension(paddingLeft ?? pl),
       "--seed-box-bleed-top": handleBleed(bleedTop ?? bleedY, "top"),
       "--seed-box-bleed-right": handleBleed(bleedRight ?? bleedX, "right"),