@seed-design/react 1.0.5 → 1.0.6

package/lib/components/Article/Article.cjs

@@ -0,0 +1,45 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const Box = require('../Box/Box.cjs');
+const clsx = require('clsx');
+const article = require('@seed-design/css/recipes/article');
+
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
+  if (e) {
+    for (const k in e) {
+      if (k !== 'default') {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const Article = React__namespace.forwardRef(
+  ({ as = "article", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Box.Box,
+      {
+        as,
+        ref,
+        className: clsx(article.article(), className),
+        ...props
+      }
+    );
+  }
+);
+
+exports.Article = Article;

package/lib/components/Article/Article.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '../Box/Box';
+import * as React from "react";
+export interface ArticleProps extends BoxProps {
+}
+export declare const Article: React.ForwardRefExoticComponent<ArticleProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Article.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Article.d.ts","sourceRoot":"","sources":["../../../src/components/Article/Article.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAO,KAAK,QAAQ,EAAE,MAAM,YAAY,CAAC;AAIhD,MAAM,WAAW,YAAa,SAAQ,QAAQ;CAAG;AAEjD,eAAO,MAAM,OAAO,kFAWnB,CAAC"}

package/lib/components/Article/Article.js

@@ -0,0 +1,22 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import * as React from 'react';
+import { Box } from '../Box/Box.js';
+import clsx from 'clsx';
+import { article } from '@seed-design/css/recipes/article';
+
+const Article = React.forwardRef(
+  ({ as = "article", className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        as,
+        ref,
+        className: clsx(article(), className),
+        ...props
+      }
+    );
+  }
+);
+
+export { Article };

package/lib/components/Article/index.cjs

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const Article = require('./Article.cjs');
+
+
+
+exports.Article = Article.Article;

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

@@ -0,0 +1,2 @@
+export { Article, type ArticleProps } from './Article';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Article/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/lib/components/Article/index.js

@@ -0,0 +1 @@
+export { Article } from './Article.js';

package/lib/components/TagGroup/TagGroup.cjs

@@ -0,0 +1,35 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+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 { PropsProvider, useProps } = createRecipeContext.createRecipeContext(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 });
+    const classNames = tagGroup.tagGroup(tagGroupVariantProps);
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: React.Children.map(children, (child, index) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsxRuntime.jsx(reactPrimitive.Primitive.span, { "aria-hidden": true, className: classNames.separator, children: separator }),
+      child
+    ] })) }) });
+  }
+);
+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 });
+});
+
+exports.TagGroupItem = TagGroupItem;
+exports.TagGroupRoot = TagGroupRoot;

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

@@ -0,0 +1,12 @@
+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 { 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 declare const TagGroupItem: ForwardRefExoticComponent<TagGroupItemProps & RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=TagGroup.d.ts.map

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

@@ -0,0 +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,+GAuBxB,CAAC;AAEF,MAAM,WAAW,iBACf,SAAQ,wBAAwB,EAC9B,cAAc,EACd,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;CAAG;AAE5C,eAAO,MAAM,YAAY,+GAOvB,CAAC"}

package/lib/components/TagGroup/TagGroup.js

@@ -0,0 +1,30 @@
+'use client';
+import { jsx, jsxs, Fragment } 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 } from 'react';
+import clsx from 'clsx';
+import { splitMultipleVariantsProps } from '../../utils/splitMultipleVariantsProps.js';
+import { mergeProps } from '@seed-design/dom-utils';
+
+const { PropsProvider, useProps } = createRecipeContext(tagGroupItem);
+const TagGroupRoot = forwardRef(
+  ({ className, children, separator = " · ", ...props }, ref) => {
+    const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] = splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
+    const classNames = tagGroup(tagGroupVariantProps);
+    return /* @__PURE__ */ jsx(PropsProvider, { value: tagGroupItemVariantProps, children: /* @__PURE__ */ jsx(Primitive.span, { ref, className: clsx(classNames.root, className), ...otherProps, children: Children.map(children, (child, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+      index > 0 && /* @__PURE__ */ jsx(Primitive.span, { "aria-hidden": true, className: classNames.separator, children: separator }),
+      child
+    ] })) }) });
+  }
+);
+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 });
+});
+
+export { TagGroupItem, TagGroupRoot };

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

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const TagGroup = require('./TagGroup.cjs');
+
+
+
+exports.Item = TagGroup.TagGroupItem;
+exports.Root = TagGroup.TagGroupRoot;

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

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

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

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

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

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

package/lib/components/TagGroup/index.cjs

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const TagGroup = require('./TagGroup.cjs');
+const TagGroup_namespace = require('./TagGroup.namespace.cjs');
+
+
+
+exports.TagGroupItem = TagGroup.TagGroupItem;
+exports.TagGroupRoot = TagGroup.TagGroupRoot;
+exports.TagGroup = TagGroup_namespace;

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

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

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

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

package/lib/components/TagGroup/index.js

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

package/lib/components/Text/Text.cjs

@@ -53,6 +53,9 @@ const Text = React.forwardRef(
     fontWeight,
     maxLines,
     textDecorationLine,
+    align,
+    userSelect,
+    whiteSpace,
     children,
     className,
     style,
@@ -78,7 +81,9 @@ const Text = React.forwardRef(
           "--seed-font-size": handleFontSize(fontSize),
           "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
           "--seed-font-weight": handleFontWeight(fontWeight),
-          "--seed-text-align": otherProps.align,
+          "--seed-text-align": align,
+          "--seed-user-select": userSelect,
+          "--seed-white-space": whiteSpace,
           ...style
         },
         ...otherProps,

package/lib/components/Text/Text.d.ts

@@ -1,6 +1,7 @@
 import { TextVariantProps } from '@seed-design/css/recipes/text';
 import { FontSize, FontWeight, LineHeight, ScopedColorFg, ScopedColorPalette } from '@seed-design/css/vars';
 import type * as React from "react";
+import type * as CSS from "csstype";
 export interface TextProps extends Omit<TextVariantProps, "maxLines">, React.HTMLAttributes<HTMLSpanElement> {
     /**
      * The element to render as
@@ -30,7 +31,15 @@ export interface TextProps extends Omit<TextVariantProps, "maxLines">, React.HTM
     /**
      * The alignment of the text.
      */
-    align?: "left" | "center" | "right";
+    align?: Extract<CSS.Property.TextAlign, "left" | "center" | "right">;
+    /**
+     * The user-select behavior of the text.
+     */
+    userSelect?: Extract<CSS.Property.UserSelect, "none" | "text" | "auto">;
+    /**
+     * The white-space behavior of the text.
+     */
+    whiteSpace?: Extract<CSS.Property.WhiteSpace, "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces">;
 }
 export declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
 //# sourceMappingURL=Text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAoCpC,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhG;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAE3D;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAYD,eAAO,MAAM,IAAI,mFAmDhB,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../src/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,gBAAgB,EAAE,MAAM,+BAA+B,CAAC;AAC5E,OAAO,EAEL,KAAK,QAAQ,EACb,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,aAAa,EAClB,KAAK,kBAAkB,EACxB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,KAAK,GAAG,MAAM,SAAS,CAAC;AAmCpC,MAAM,WAAW,SACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,EACxC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACvC;;;OAGG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAEhG;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAE3D;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEpC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAExC;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,SAAS,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAC;IAErE;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC,CAAC;IAExE;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAClB,GAAG,CAAC,QAAQ,CAAC,UAAU,EACvB,QAAQ,GAAG,QAAQ,GAAG,KAAK,GAAG,UAAU,GAAG,UAAU,GAAG,cAAc,CACvE,CAAC;CACH;AAYD,eAAO,MAAM,IAAI,mFAwDhB,CAAC"}

package/lib/components/Text/Text.js

@@ -49,6 +49,9 @@ const Text = forwardRef(
     fontWeight,
     maxLines,
     textDecorationLine,
+    align,
+    userSelect,
+    whiteSpace,
     children,
     className,
     style,
@@ -74,7 +77,9 @@ const Text = forwardRef(
           "--seed-font-size": handleFontSize(fontSize),
           "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
           "--seed-font-weight": handleFontWeight(fontWeight),
-          "--seed-text-align": otherProps.align,
+          "--seed-text-align": align,
+          "--seed-user-select": userSelect,
+          "--seed-white-space": whiteSpace,
           ...style
         },
         ...otherProps,

package/lib/components/index.cjs

@@ -6,6 +6,7 @@ const ActionButton = require('./ActionButton/ActionButton.cjs');
 const ActionChip = require('./ActionChip/ActionChip.cjs');
 const ActionSheet = require('./ActionSheet/ActionSheet.cjs');
 const ActionSheet_namespace = require('./ActionSheet/ActionSheet.namespace.cjs');
+const Article = require('./Article/Article.cjs');
 const Avatar = require('./Avatar/Avatar.cjs');
 const Avatar_namespace = require('./Avatar/Avatar.namespace.cjs');
 const Badge = require('./Badge/Badge.cjs');
@@ -85,6 +86,8 @@ const Switch_namespace = require('./Switch/Switch.namespace.cjs');
 const Tabs = require('./Tabs/Tabs.cjs');
 const reactTabs = require('@seed-design/react-tabs');
 const Tabs_namespace = require('./Tabs/Tabs.namespace.cjs');
+const TagGroup = require('./TagGroup/TagGroup.cjs');
+const TagGroup_namespace = require('./TagGroup/TagGroup.namespace.cjs');
 const Text = require('./Text/Text.cjs');
 const TextField = require('./TextField/TextField.cjs');
 const TextField_namespace = require('./TextField/TextField.namespace.cjs');
@@ -107,6 +110,7 @@ exports.ActionSheetRoot = ActionSheet.ActionSheetRoot;
 exports.ActionSheetTitle = ActionSheet.ActionSheetTitle;
 exports.ActionSheetTrigger = ActionSheet.ActionSheetTrigger;
 exports.ActionSheet = ActionSheet_namespace;
+exports.Article = Article.Article;
 exports.AvatarBadge = Avatar.AvatarBadge;
 exports.AvatarFallback = Avatar.AvatarFallback;
 exports.AvatarImage = Avatar.AvatarImage;
@@ -333,6 +337,9 @@ Object.defineProperty(exports, "tabsCarouselPreventDrag", {
 	get: () => reactTabs.tabsCarouselPreventDrag
 });
 exports.Tabs = Tabs_namespace;
+exports.TagGroupItem = TagGroup.TagGroupItem;
+exports.TagGroupRoot = TagGroup.TagGroupRoot;
+exports.TagGroup = TagGroup_namespace;
 exports.Text = Text.Text;
 exports.TextFieldCharacterCount = TextField.TextFieldCharacterCount;
 exports.TextFieldCharacterCountArea = TextField.TextFieldCharacterCountArea;

package/lib/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './ActionButton';
 export * from './ActionChip';
 export * from './ActionSheet';
+export * from './Article';
 export * from './Avatar';
 export * from './Badge';
 export * from './BottomSheet';
@@ -49,6 +50,7 @@ export * from './Snackbar';
 export * from './Stack';
 export * from './Switch';
 export * from './Tabs';
+export * from './TagGroup';
 export * from './Text';
 export * from './TextField';
 export * from './ToggleButton';

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,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,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,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,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,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,WAAW,CAAC;AAC1B,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,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,wBAAwB,CAAC;AACvC,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,QAAQ,CAAC;AACvB,cAAc,oBAAoB,CAAC;AACnC,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,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,YAAY,CAAC;AAC3B,cAAc,QAAQ,CAAC;AACvB,cAAc,aAAa,CAAC;AAC5B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}

package/lib/components/index.js

@@ -3,6 +3,7 @@ export { ActionChip } from './ActionChip/ActionChip.js';
 export { ActionSheetBackdrop, ActionSheetCloseButton, ActionSheetContent, ActionSheetDescription, ActionSheetHeader, ActionSheetItem, ActionSheetList, ActionSheetPositioner, ActionSheetRoot, ActionSheetTitle, ActionSheetTrigger } from './ActionSheet/ActionSheet.js';
 import * as ActionSheet_namespace from './ActionSheet/ActionSheet.namespace.js';
 export { ActionSheet_namespace as ActionSheet };
+export { Article } from './Article/Article.js';
 export { AvatarBadge, AvatarFallback, AvatarImage, AvatarRoot, AvatarStack } from './Avatar/Avatar.js';
 import * as Avatar_namespace from './Avatar/Avatar.namespace.js';
 export { Avatar_namespace as Avatar };
@@ -106,6 +107,9 @@ export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList,
 export { tabsCarouselPreventDrag } from '@seed-design/react-tabs';
 import * as Tabs_namespace from './Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
+export { TagGroupItem, TagGroupRoot } from './TagGroup/TagGroup.js';
+import * as TagGroup_namespace from './TagGroup/TagGroup.namespace.js';
+export { TagGroup_namespace as TagGroup };
 export { Text } from './Text/Text.js';
 export { TextFieldCharacterCount, TextFieldCharacterCountArea, TextFieldDescription, TextFieldErrorIcon, TextFieldErrorMessage, TextFieldField, TextFieldFooter, TextFieldHeader, TextFieldIndicator, TextFieldInput, TextFieldLabel, TextFieldMaxCharacterCount, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea } from './TextField/TextField.js';
 import * as TextField_namespace from './TextField/TextField.namespace.js';

package/lib/index.cjs

@@ -6,6 +6,7 @@ const ActionButton = require('./components/ActionButton/ActionButton.cjs');
 const ActionChip = require('./components/ActionChip/ActionChip.cjs');
 const ActionSheet = require('./components/ActionSheet/ActionSheet.cjs');
 const ActionSheet_namespace = require('./components/ActionSheet/ActionSheet.namespace.cjs');
+const Article = require('./components/Article/Article.cjs');
 const Avatar = require('./components/Avatar/Avatar.cjs');
 const Avatar_namespace = require('./components/Avatar/Avatar.namespace.cjs');
 const Badge = require('./components/Badge/Badge.cjs');
@@ -85,6 +86,8 @@ const Switch_namespace = require('./components/Switch/Switch.namespace.cjs');
 const Tabs = require('./components/Tabs/Tabs.cjs');
 const reactTabs = require('@seed-design/react-tabs');
 const Tabs_namespace = require('./components/Tabs/Tabs.namespace.cjs');
+const TagGroup = require('./components/TagGroup/TagGroup.cjs');
+const TagGroup_namespace = require('./components/TagGroup/TagGroup.namespace.cjs');
 const Text = require('./components/Text/Text.cjs');
 const TextField = require('./components/TextField/TextField.cjs');
 const TextField_namespace = require('./components/TextField/TextField.namespace.cjs');
@@ -107,6 +110,7 @@ exports.ActionSheetRoot = ActionSheet.ActionSheetRoot;
 exports.ActionSheetTitle = ActionSheet.ActionSheetTitle;
 exports.ActionSheetTrigger = ActionSheet.ActionSheetTrigger;
 exports.ActionSheet = ActionSheet_namespace;
+exports.Article = Article.Article;
 exports.AvatarBadge = Avatar.AvatarBadge;
 exports.AvatarFallback = Avatar.AvatarFallback;
 exports.AvatarImage = Avatar.AvatarImage;
@@ -333,6 +337,9 @@ Object.defineProperty(exports, "tabsCarouselPreventDrag", {
 	get: () => reactTabs.tabsCarouselPreventDrag
 });
 exports.Tabs = Tabs_namespace;
+exports.TagGroupItem = TagGroup.TagGroupItem;
+exports.TagGroupRoot = TagGroup.TagGroupRoot;
+exports.TagGroup = TagGroup_namespace;
 exports.Text = Text.Text;
 exports.TextFieldCharacterCount = TextField.TextFieldCharacterCount;
 exports.TextFieldCharacterCountArea = TextField.TextFieldCharacterCountArea;

package/lib/index.js

@@ -3,6 +3,7 @@ export { ActionChip } from './components/ActionChip/ActionChip.js';
 export { ActionSheetBackdrop, ActionSheetCloseButton, ActionSheetContent, ActionSheetDescription, ActionSheetHeader, ActionSheetItem, ActionSheetList, ActionSheetPositioner, ActionSheetRoot, ActionSheetTitle, ActionSheetTrigger } from './components/ActionSheet/ActionSheet.js';
 import * as ActionSheet_namespace from './components/ActionSheet/ActionSheet.namespace.js';
 export { ActionSheet_namespace as ActionSheet };
+export { Article } from './components/Article/Article.js';
 export { AvatarBadge, AvatarFallback, AvatarImage, AvatarRoot, AvatarStack } from './components/Avatar/Avatar.js';
 import * as Avatar_namespace from './components/Avatar/Avatar.namespace.js';
 export { Avatar_namespace as Avatar };
@@ -106,6 +107,9 @@ export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList,
 export { tabsCarouselPreventDrag } from '@seed-design/react-tabs';
 import * as Tabs_namespace from './components/Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
+export { TagGroupItem, TagGroupRoot } from './components/TagGroup/TagGroup.js';
+import * as TagGroup_namespace from './components/TagGroup/TagGroup.namespace.js';
+export { TagGroup_namespace as TagGroup };
 export { Text } from './components/Text/Text.js';
 export { TextFieldCharacterCount, TextFieldCharacterCountArea, TextFieldDescription, TextFieldErrorIcon, TextFieldErrorMessage, TextFieldField, TextFieldFooter, TextFieldHeader, TextFieldIndicator, TextFieldInput, TextFieldLabel, TextFieldMaxCharacterCount, TextFieldPrefixIcon, TextFieldPrefixText, TextFieldRoot, TextFieldSuffixIcon, TextFieldSuffixText, TextFieldTextarea } from './components/TextField/TextField.js';
 import * as TextField_namespace from './components/TextField/TextField.namespace.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -58,16 +58,17 @@
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "1.0.5",
+    "@seed-design/css": "1.0.6",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "1.0.5",
+    "@seed-design/css": "1.0.6",
     "@types/react": "^19.2.2",
     "@types/react-dom": "^19.2.1",
     "@vitejs/plugin-react": "^5.0.0",
     "ajv": "^8.17.1",
+    "csstype": "^3.1.3",
     "globby": "^15.0.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

package/src/components/Article/Article.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Box, type BoxProps } from "../Box/Box";
+import clsx from "clsx";
+import { article } from "@seed-design/css/recipes/article";
+
+export interface ArticleProps extends BoxProps {}
+
+export const Article = React.forwardRef<HTMLElement, ArticleProps>(
+  ({ as = "article", className, ...props }, ref) => {
+    return (
+      <Box
+        as={as}
+        ref={ref as React.ForwardedRef<HTMLDivElement>}
+        className={clsx(article(), className)}
+        {...props}
+      />
+    );
+  },
+);

package/src/components/Article/index.ts

@@ -0,0 +1 @@
+export { Article, type ArticleProps } from "./Article";

package/src/components/TagGroup/TagGroup.namespace.ts

@@ -0,0 +1,6 @@
+export {
+  TagGroupRoot as Root,
+  TagGroupItem as Item,
+  type TagGroupRootProps as RootProps,
+  type TagGroupItemProps as ItemProps,
+} from "./TagGroup";

package/src/components/TagGroup/TagGroup.tsx

@@ -0,0 +1,60 @@
+import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
+import { tagGroup, type TagGroupVariantProps } from "@seed-design/css/recipes/tag-group";
+import {
+  tagGroupItem,
+  type TagGroupItemVariantProps,
+} from "@seed-design/css/recipes/tag-group-item";
+import { createRecipeContext } from "../../utils/createRecipeContext";
+import { forwardRef, Children } from "react";
+import clsx from "clsx";
+import { splitMultipleVariantsProps } from "../../utils/splitMultipleVariantsProps";
+import { mergeProps } from "@seed-design/dom-utils";
+
+const { PropsProvider, useProps } = createRecipeContext(tagGroupItem);
+
+export interface TagGroupRootProps
+  extends TagGroupVariantProps,
+    TagGroupItemVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {
+  separator?: React.ReactNode;
+}
+
+export const TagGroupRoot = forwardRef<HTMLSpanElement, TagGroupRootProps>(
+  ({ className, children, separator = " · ", ...props }, ref) => {
+    const [{ tagGroup: tagGroupVariantProps, tagGroupItem: tagGroupItemVariantProps }, otherProps] =
+      splitMultipleVariantsProps(props, { tagGroup, tagGroupItem });
+    const classNames = tagGroup(tagGroupVariantProps);
+
+    return (
+      <PropsProvider value={tagGroupItemVariantProps}>
+        <Primitive.span ref={ref} className={clsx(classNames.root, className)} {...otherProps}>
+          {Children.map(children, (child, index) => (
+            <>
+              {index > 0 && (
+                <Primitive.span aria-hidden className={classNames.separator}>
+                  {separator}
+                </Primitive.span>
+              )}
+              {child}
+            </>
+          ))}
+        </Primitive.span>
+      </PropsProvider>
+    );
+  },
+);
+
+export interface TagGroupItemProps
+  extends TagGroupItemVariantProps,
+    PrimitiveProps,
+    React.HTMLAttributes<HTMLSpanElement> {}
+
+export const TagGroupItem = forwardRef<HTMLSpanElement, TagGroupItemProps>((props, ref) => {
+  const parentVariantProps = useProps();
+
+  const [variantProps, { className, ...otherProps }] = tagGroupItem.splitVariantProps(props);
+  const recipeClassName = tagGroupItem(mergeProps(parentVariantProps, variantProps));
+
+  return <Primitive.span ref={ref} className={clsx(recipeClassName, className)} {...otherProps} />;
+});

package/src/components/TagGroup/index.ts

@@ -0,0 +1,8 @@
+export {
+  TagGroupRoot,
+  TagGroupItem,
+  type TagGroupRootProps,
+  type TagGroupItemProps,
+} from "./TagGroup";
+
+export * as TagGroup from "./TagGroup.namespace";

package/src/components/Text/Text.tsx

@@ -10,13 +10,14 @@ import {
 import clsx from "clsx";
 import type * as React from "react";
 import { forwardRef, useMemo } from "react";
+import type * as CSS from "csstype";
 
 function handleColor(color: string | undefined) {
   if (!color) {
     return undefined;
   }
   const [type, value] = color.split(".");
-  // @ts-ignore
+  // @ts-expect-error
   return vars.$color[type]?.[value] ?? color;
 }
 
@@ -24,7 +25,7 @@ function handleFontWeight(fontWeight: string | undefined) {
   if (!fontWeight) {
     return undefined;
   }
-  // @ts-ignore
+  // @ts-expect-error
   return vars.$fontWeight[fontWeight] ?? undefined;
 }
 
@@ -32,7 +33,7 @@ function handleFontSize(size: string | undefined) {
   if (!size) {
     return undefined;
   }
-  // @ts-ignore
+  // @ts-expect-error
   return vars.$fontSize[size] ?? size;
 }
 
@@ -40,7 +41,7 @@ function handleLineHeight(lineHeight: string | undefined) {
   if (!lineHeight) {
     return undefined;
   }
-  // @ts-ignore
+  // @ts-expect-error
   return vars.$lineHeight[lineHeight] ?? lineHeight;
 }
 
@@ -81,7 +82,20 @@ export interface TextProps
   /**
    * The alignment of the text.
    */
-  align?: "left" | "center" | "right";
+  align?: Extract<CSS.Property.TextAlign, "left" | "center" | "right">;
+
+  /**
+   * The user-select behavior of the text.
+   */
+  userSelect?: Extract<CSS.Property.UserSelect, "none" | "text" | "auto">;
+
+  /**
+   * The white-space behavior of the text.
+   */
+  whiteSpace?: Extract<
+    CSS.Property.WhiteSpace,
+    "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces"
+  >;
 }
 
 function mapMaxLines(maxLines: number | undefined): "none" | "single" | "multi" {
@@ -105,6 +119,9 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
       fontWeight,
       maxLines,
       textDecorationLine,
+      align,
+      userSelect,
+      whiteSpace,
       children,
       className,
       style,
@@ -125,7 +142,7 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
 
     return (
       <Comp
-        // @ts-ignore: We might need overloading for ref types, not a big deal for now.
+        // @ts-expect-error: We might need overloading for ref types, not a big deal for now.
         ref={ref}
         className={clsx(textClassName, className)}
         style={
@@ -135,7 +152,9 @@ export const Text = forwardRef<HTMLSpanElement, TextProps>(
             "--seed-font-size": handleFontSize(fontSize),
             "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
             "--seed-font-weight": handleFontWeight(fontWeight),
-            "--seed-text-align": otherProps.align,
+            "--seed-text-align": align,
+            "--seed-user-select": userSelect,
+            "--seed-white-space": whiteSpace,
             ...style,
           } as React.CSSProperties
         }

package/src/components/index.ts

@@ -1,6 +1,7 @@
 export * from "./ActionButton";
 export * from "./ActionChip";
 export * from "./ActionSheet";
+export * from "./Article";
 export * from "./Avatar";
 export * from "./Badge";
 export * from "./BottomSheet";
@@ -49,6 +50,7 @@ export * from "./Snackbar";
 export * from "./Stack";
 export * from "./Switch";
 export * from "./Tabs";
+export * from "./TagGroup";
 export * from "./Text";
 export * from "./TextField";
 export * from "./ToggleButton";