@seed-design/react 0.0.30 → 0.0.32

package/lib/components/Box/Box.cjs

@@ -7,6 +7,7 @@ const jsxRuntime = require('react/jsx-runtime');
 const clsx = require('clsx');
 const React = require('react');
 const styled = require('../../utils/styled.cjs');
+const reactSlot = require('@radix-ui/react-slot');
 
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -29,7 +30,10 @@ const React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const Box = React__namespace.forwardRef((props, ref) => {
   const { style, restProps } = styled.useStyleProps(props);
-  const { as: Comp = "div", className, ...nativeProps } = restProps;
+  const { as: Comp = "div", asChild = false, className, ...nativeProps } = restProps;
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { ref, className: clsx("seed-box", className), style, ...nativeProps });
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(Comp, { ref, className: clsx("seed-box", className), style, ...nativeProps });
 });
 

package/lib/components/Box/Box.d.ts

@@ -2,6 +2,7 @@ import { StyleProps } from '../../utils/styled';
 import * as React from "react";
 export interface BoxProps extends StyleProps, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
     as?: React.ElementType;
+    asChild?: boolean;
 }
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;
 //# sourceMappingURL=Box.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEpE,MAAM,WAAW,QAAS,SAAQ,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;CACxB;AAED,eAAO,MAAM,GAAG,iFAKd,CAAC"}
+{"version":3,"file":"Box.d.ts","sourceRoot":"","sources":["../../../src/components/Box/Box.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAGpE,MAAM,WAAW,QAAS,SAAQ,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IAC/F,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAEvB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,GAAG,iFAWd,CAAC"}

package/lib/components/Box/Box.js

@@ -3,10 +3,14 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import * as React from 'react';
 import { useStyleProps } from '../../utils/styled.js';
+import { Slot } from '@radix-ui/react-slot';
 
 const Box = React.forwardRef((props, ref) => {
   const { style, restProps } = useStyleProps(props);
-  const { as: Comp = "div", className, ...nativeProps } = restProps;
+  const { as: Comp = "div", asChild = false, className, ...nativeProps } = restProps;
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { ref, className: clsx("seed-box", className), style, ...nativeProps });
+  }
   return /* @__PURE__ */ jsx(Comp, { ref, className: clsx("seed-box", className), style, ...nativeProps });
 });
 

package/lib/components/Icon/Icon.d.ts

@@ -14,7 +14,7 @@ export declare const IconRequired: ({ children, enabled, }: {
 }) => import("react/jsx-runtime").JSX.Element;
 export interface IconProps {
     svg: React.ReactNode;
-    size?: Dimension | string;
+    size?: Dimension | (string & {});
     color?: ScopedColorFg | ScopedColorPalette;
 }
 export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI1F,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAIF,eAAO,MAAM,YAAY,GAAI,wBAG1B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,4CAsDjD,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAE1B,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;CAC5C;AAED,eAAO,MAAM,IAAI,qGA+BhB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,oHAe/D"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../src/components/Icon/Icon.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,uBAAuB,CAAC;AAI1F,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAEF,MAAM,WAAW,eAAe;IAC9B,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,2GAatB,CAAC;AAIF,eAAO,MAAM,YAAY,GAAI,wBAG1B;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,4CAsDjD,CAAC;AAEF,MAAM,WAAW,SAAS;IACxB,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC;IAErB,IAAI,CAAC,EAAE,SAAS,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;IAEjC,KAAK,CAAC,EAAE,aAAa,GAAG,kBAAkB,CAAC;CAC5C;AAED,eAAO,MAAM,IAAI,qGA+BhB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,EAC9C,SAAS,EAAE,KAAK,CAAC,aAAa,CAAC,CAAC,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,EAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,KAAK,OAAO,oHAe/D"}

package/lib/components/Tabs/Tabs.namespace.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const Tabs = require('./Tabs.cjs');
+const reactTabs = require('@seed-design/react-tabs');
 
 
 
@@ -13,3 +14,7 @@ exports.Indicator = Tabs.TabsIndicator;
 exports.List = Tabs.TabsList;
 exports.Root = Tabs.TabsRoot;
 exports.Trigger = Tabs.TabsTrigger;
+Object.defineProperty(exports, "carouselPreventDrag", {
+  enumerable: true,
+  get: () => reactTabs.tabsCarouselPreventDrag
+});

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

@@ -1,2 +1,3 @@
 export { TabsContent as Content, TabsIndicator as Indicator, TabsList as List, TabsRoot as Root, TabsCarouselCamera as CarouselCamera, TabsCarousel as Carousel, TabsTrigger as Trigger, type TabsContentProps as ContentProps, type TabsIndicatorProps as IndicatorProps, type TabsListProps as ListProps, type TabsRootProps as RootProps, type TabsCarouselCameraProps as CarouselCameraProps, type TabsCarouselProps as CarouselProps, type TabsTriggerProps as TriggerProps, } from './Tabs';
+export { tabsCarouselPreventDrag as carouselPreventDrag } from '@seed-design/react-tabs';
 //# sourceMappingURL=Tabs.namespace.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,OAAO,EACtB,aAAa,IAAI,SAAS,EAC1B,QAAQ,IAAI,IAAI,EAChB,QAAQ,IAAI,IAAI,EAChB,kBAAkB,IAAI,cAAc,EACpC,YAAY,IAAI,QAAQ,EACxB,WAAW,IAAI,OAAO,EACtB,KAAK,gBAAgB,IAAI,YAAY,EACrC,KAAK,kBAAkB,IAAI,cAAc,EACzC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,uBAAuB,IAAI,mBAAmB,EACnD,KAAK,iBAAiB,IAAI,aAAa,EACvC,KAAK,gBAAgB,IAAI,YAAY,GACtC,MAAM,QAAQ,CAAC"}
+{"version":3,"file":"Tabs.namespace.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.namespace.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,IAAI,OAAO,EACtB,aAAa,IAAI,SAAS,EAC1B,QAAQ,IAAI,IAAI,EAChB,QAAQ,IAAI,IAAI,EAChB,kBAAkB,IAAI,cAAc,EACpC,YAAY,IAAI,QAAQ,EACxB,WAAW,IAAI,OAAO,EACtB,KAAK,gBAAgB,IAAI,YAAY,EACrC,KAAK,kBAAkB,IAAI,cAAc,EACzC,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,aAAa,IAAI,SAAS,EAC/B,KAAK,uBAAuB,IAAI,mBAAmB,EACnD,KAAK,iBAAiB,IAAI,aAAa,EACvC,KAAK,gBAAgB,IAAI,YAAY,GACtC,MAAM,QAAQ,CAAC;AAEhB,OAAO,EAAE,uBAAuB,IAAI,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}

package/lib/components/Tabs/Tabs.namespace.js

@@ -1 +1,2 @@
 export { TabsCarousel as Carousel, TabsCarouselCamera as CarouselCamera, TabsContent as Content, TabsIndicator as Indicator, TabsList as List, TabsRoot as Root, TabsTrigger as Trigger } from './Tabs.js';
+export { tabsCarouselPreventDrag as carouselPreventDrag } from '@seed-design/react-tabs';

package/lib/components/Tabs/index.cjs

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const Tabs = require('./Tabs.cjs');
+const reactTabs = require('@seed-design/react-tabs');
 const Tabs_namespace = require('./Tabs.namespace.cjs');
 
 
@@ -14,4 +15,8 @@ exports.TabsIndicator = Tabs.TabsIndicator;
 exports.TabsList = Tabs.TabsList;
 exports.TabsRoot = Tabs.TabsRoot;
 exports.TabsTrigger = Tabs.TabsTrigger;
+Object.defineProperty(exports, "tabsCarouselPreventDrag", {
+  enumerable: true,
+  get: () => reactTabs.tabsCarouselPreventDrag
+});
 exports.Tabs = Tabs_namespace;

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

@@ -1,3 +1,4 @@
 export { TabsContent, TabsIndicator, TabsList, TabsRoot, TabsCarouselCamera, TabsCarousel, TabsTrigger, type TabsContentProps, type TabsIndicatorProps, type TabsListProps, type TabsRootProps, type TabsCarouselCameraProps, type TabsCarouselProps, type TabsTriggerProps, } from './Tabs';
+export { tabsCarouselPreventDrag } from '@seed-design/react-tabs';
 export * as Tabs from './Tabs.namespace';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,QAAQ,CAAC;AAEhB,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Tabs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,kBAAkB,EAClB,YAAY,EACZ,WAAW,EACX,KAAK,gBAAgB,EACrB,KAAK,kBAAkB,EACvB,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,GACtB,MAAM,QAAQ,CAAC;AAEhB,OAAO,EAAE,uBAAuB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,KAAK,IAAI,MAAM,kBAAkB,CAAC"}

package/lib/components/Tabs/index.js

@@ -1,3 +1,4 @@
 export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from './Tabs.js';
+export { tabsCarouselPreventDrag } from '@seed-design/react-tabs';
 import * as Tabs_namespace from './Tabs.namespace.js';
 export { Tabs_namespace as Tabs };

package/lib/components/Text/Text.cjs

@@ -43,44 +43,48 @@ function mapMaxLines(maxLines) {
   }
   return "multi";
 }
-const Text = ({
-  as,
-  color,
-  textStyle,
-  fontSize,
-  lineHeight,
-  fontWeight,
-  maxLines,
-  children,
-  className,
-  style,
-  ...otherProps
-}) => {
-  const Comp = as || "span";
-  const textClassName = React.useMemo(
-    () => text.text({
-      textStyle,
-      maxLines: mapMaxLines(maxLines)
-    }),
-    [textStyle, maxLines]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      className: clsx(textClassName, className),
-      style: {
-        "--seed-max-lines": maxLines,
-        "--seed-text-color": handleColor(color),
-        "--seed-font-size": handleFontSize(fontSize),
-        "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
-        "--seed-font-weight": handleFontWeight(fontWeight),
-        "--seed-text-align": otherProps.align,
-        ...style
-      },
-      ...otherProps,
-      children
-    }
-  );
-};
+const Text = React.forwardRef(
+  ({
+    as,
+    color,
+    textStyle,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    maxLines,
+    children,
+    className,
+    style,
+    ...otherProps
+  }, ref) => {
+    const Comp = as || "span";
+    const textClassName = React.useMemo(
+      () => text.text({
+        textStyle,
+        maxLines: mapMaxLines(maxLines)
+      }),
+      [textStyle, maxLines]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Comp,
+      {
+        ref,
+        className: clsx(textClassName, className),
+        style: {
+          "--seed-max-lines": maxLines,
+          "--seed-text-color": handleColor(color),
+          "--seed-font-size": handleFontSize(fontSize),
+          "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
+          "--seed-font-weight": handleFontWeight(fontWeight),
+          "--seed-text-align": otherProps.align,
+          ...style
+        },
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
+Text.displayName = "Text";
 
 exports.Text = Text;

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

@@ -32,5 +32,5 @@ export interface TextProps extends Omit<TextVariantProps, "maxLines">, React.HTM
      */
     align?: "left" | "center" | "right";
 }
-export declare const Text: ({ as, color, textStyle, fontSize, lineHeight, fontWeight, maxLines, children, className, style, ...otherProps }: TextProps) => import("react/jsx-runtime").JSX.Element;
+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,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;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,GAAI,iHAYlB,SAAS,4CA8BX,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;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,CAAC;IAE3C;;OAEG;IACH,QAAQ,CAAC,EAAE,QAAQ,CAAC;IAEpB;;OAEG;IACH,UAAU,CAAC,EAAE,UAAU,CAAC;IAExB;;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,mFAiDhB,CAAC"}

package/lib/components/Text/Text.js

@@ -3,7 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { text } from '@seed-design/css/recipes/text';
 import { vars } from '@seed-design/css/vars';
 import clsx from 'clsx';
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 
 function handleColor(color) {
   if (!color) {
@@ -39,44 +39,48 @@ function mapMaxLines(maxLines) {
   }
   return "multi";
 }
-const Text = ({
-  as,
-  color,
-  textStyle,
-  fontSize,
-  lineHeight,
-  fontWeight,
-  maxLines,
-  children,
-  className,
-  style,
-  ...otherProps
-}) => {
-  const Comp = as || "span";
-  const textClassName = useMemo(
-    () => text({
-      textStyle,
-      maxLines: mapMaxLines(maxLines)
-    }),
-    [textStyle, maxLines]
-  );
-  return /* @__PURE__ */ jsx(
-    Comp,
-    {
-      className: clsx(textClassName, className),
-      style: {
-        "--seed-max-lines": maxLines,
-        "--seed-text-color": handleColor(color),
-        "--seed-font-size": handleFontSize(fontSize),
-        "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
-        "--seed-font-weight": handleFontWeight(fontWeight),
-        "--seed-text-align": otherProps.align,
-        ...style
-      },
-      ...otherProps,
-      children
-    }
-  );
-};
+const Text = forwardRef(
+  ({
+    as,
+    color,
+    textStyle,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    maxLines,
+    children,
+    className,
+    style,
+    ...otherProps
+  }, ref) => {
+    const Comp = as || "span";
+    const textClassName = useMemo(
+      () => text({
+        textStyle,
+        maxLines: mapMaxLines(maxLines)
+      }),
+      [textStyle, maxLines]
+    );
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: clsx(textClassName, className),
+        style: {
+          "--seed-max-lines": maxLines,
+          "--seed-text-color": handleColor(color),
+          "--seed-font-size": handleFontSize(fontSize),
+          "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
+          "--seed-font-weight": handleFontWeight(fontWeight),
+          "--seed-text-align": otherProps.align,
+          ...style
+        },
+        ...otherProps,
+        children
+      }
+    );
+  }
+);
+Text.displayName = "Text";
 
 export { Text };

package/lib/components/index.cjs

@@ -71,6 +71,7 @@ const Stack = require('./Stack/Stack.cjs');
 const Switch = require('./Switch/Switch.cjs');
 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 Text = require('./Text/Text.cjs');
 const TextField = require('./TextField/TextField.cjs');
@@ -275,6 +276,10 @@ exports.TabsIndicator = Tabs.TabsIndicator;
 exports.TabsList = Tabs.TabsList;
 exports.TabsRoot = Tabs.TabsRoot;
 exports.TabsTrigger = Tabs.TabsTrigger;
+Object.defineProperty(exports, "tabsCarouselPreventDrag", {
+	enumerable: true,
+	get: () => reactTabs.tabsCarouselPreventDrag
+});
 exports.Tabs = Tabs_namespace;
 exports.Text = Text.Text;
 exports.TextFieldCharacterCount = TextField.TextFieldCharacterCount;

package/lib/components/index.js

@@ -86,6 +86,7 @@ export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb
 import * as Switch_namespace from './Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };
 export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from './Tabs/Tabs.js';
+export { tabsCarouselPreventDrag } from '@seed-design/react-tabs';
 import * as Tabs_namespace from './Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
 export { Text } from './Text/Text.js';

package/lib/index.cjs

@@ -71,6 +71,7 @@ const Stack = require('./components/Stack/Stack.cjs');
 const Switch = require('./components/Switch/Switch.cjs');
 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 Text = require('./components/Text/Text.cjs');
 const TextField = require('./components/TextField/TextField.cjs');
@@ -275,6 +276,10 @@ exports.TabsIndicator = Tabs.TabsIndicator;
 exports.TabsList = Tabs.TabsList;
 exports.TabsRoot = Tabs.TabsRoot;
 exports.TabsTrigger = Tabs.TabsTrigger;
+Object.defineProperty(exports, "tabsCarouselPreventDrag", {
+	enumerable: true,
+	get: () => reactTabs.tabsCarouselPreventDrag
+});
 exports.Tabs = Tabs_namespace;
 exports.Text = Text.Text;
 exports.TextFieldCharacterCount = TextField.TextFieldCharacterCount;

package/lib/index.js

@@ -86,6 +86,7 @@ export { SwitchControl, SwitchHiddenInput, SwitchLabel, SwitchRoot, SwitchThumb
 import * as Switch_namespace from './components/Switch/Switch.namespace.js';
 export { Switch_namespace as Switch };
 export { TabsCarousel, TabsCarouselCamera, TabsContent, TabsIndicator, TabsList, TabsRoot, TabsTrigger } from './components/Tabs/Tabs.js';
+export { tabsCarouselPreventDrag } from '@seed-design/react-tabs';
 import * as Tabs_namespace from './components/Tabs/Tabs.namespace.js';
 export { Tabs_namespace as Tabs };
 export { Text } from './components/Text/Text.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.0.30",
+  "version": "0.0.32",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -51,18 +51,18 @@
     "@seed-design/react-segmented-control": "0.0.5",
     "@seed-design/react-snackbar": "0.0.5",
     "@seed-design/react-switch": "0.0.4",
-    "@seed-design/react-tabs": "0.0.7",
+    "@seed-design/react-tabs": "0.0.8",
     "@seed-design/react-text-field": "0.0.4",
     "@seed-design/react-toggle": "0.0.4",
     "clsx": "^2.1.1"
   },
   "peerDependencies": {
-    "@seed-design/css": "0.0.30",
+    "@seed-design/css": "0.0.31",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@seed-design/css": "0.0.30",
+    "@seed-design/css": "0.0.31",
     "@vitejs/plugin-react": "^4.4.1",
     "globby": "^14.1.0",
     "react": "^19.1.0",

package/src/components/Box/Box.tsx

@@ -1,14 +1,23 @@
 import clsx from "clsx";
 import * as React from "react";
 import { useStyleProps, type StyleProps } from "../../utils/styled";
+import { Slot } from "@radix-ui/react-slot";
 
 export interface BoxProps extends StyleProps, Omit<React.HTMLAttributes<HTMLDivElement>, "color"> {
   as?: React.ElementType;
+
+  asChild?: boolean;
 }
 
 export const Box = React.forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   const { style, restProps } = useStyleProps(props);
-  const { as: Comp = "div", className, ...nativeProps } = restProps;
+  const { as: Comp = "div", asChild = false, className, ...nativeProps } = restProps;
+
+  if (asChild) {
+    return (
+      <Slot ref={ref} className={clsx("seed-box", className)} style={style} {...nativeProps} />
+    );
+  }
 
   return <Comp ref={ref} className={clsx("seed-box", className)} style={style} {...nativeProps} />;
 });

package/src/components/Icon/Icon.tsx

@@ -106,7 +106,7 @@ export const IconRequired = ({
 export interface IconProps {
   svg: React.ReactNode;
 
-  size?: Dimension | string;
+  size?: Dimension | (string & {});
 
   color?: ScopedColorFg | ScopedColorPalette;
 }

package/src/components/Tabs/Tabs.namespace.ts

@@ -14,3 +14,5 @@ export {
   type TabsCarouselProps as CarouselProps,
   type TabsTriggerProps as TriggerProps,
 } from "./Tabs";
+
+export { tabsCarouselPreventDrag as carouselPreventDrag } from "@seed-design/react-tabs";

package/src/components/Tabs/index.ts

@@ -15,4 +15,6 @@ export {
   type TabsTriggerProps,
 } from "./Tabs";
 
+export { tabsCarouselPreventDrag } from "@seed-design/react-tabs";
+
 export * as Tabs from "./Tabs.namespace";

package/src/components/Text/Text.tsx

@@ -9,7 +9,7 @@ import {
 } from "@seed-design/css/vars";
 import clsx from "clsx";
 import type * as React from "react";
-import { useMemo } from "react";
+import { forwardRef, useMemo } from "react";
 
 function handleColor(color: string | undefined) {
   if (!color) {
@@ -94,46 +94,55 @@ function mapMaxLines(maxLines: number | undefined): "none" | "single" | "multi"
   return "multi";
 }
 
-export const Text = ({
-  as,
-  color,
-  textStyle,
-  fontSize,
-  lineHeight,
-  fontWeight,
-  maxLines,
-  children,
-  className,
-  style,
-  ...otherProps
-}: TextProps) => {
-  const Comp = as || "span";
-  const textClassName = useMemo(
-    () =>
-      text({
-        textStyle,
-        maxLines: mapMaxLines(maxLines),
-      }),
-    [textStyle, maxLines],
-  );
+export const Text = forwardRef<HTMLSpanElement, TextProps>(
+  (
+    {
+      as,
+      color,
+      textStyle,
+      fontSize,
+      lineHeight,
+      fontWeight,
+      maxLines,
+      children,
+      className,
+      style,
+      ...otherProps
+    },
+    ref,
+  ) => {
+    const Comp = as || "span";
+    const textClassName = useMemo(
+      () =>
+        text({
+          textStyle,
+          maxLines: mapMaxLines(maxLines),
+        }),
+      [textStyle, maxLines],
+    );
 
-  return (
-    <Comp
-      className={clsx(textClassName, className)}
-      style={
-        {
-          "--seed-max-lines": maxLines,
-          "--seed-text-color": handleColor(color),
-          "--seed-font-size": handleFontSize(fontSize),
-          "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
-          "--seed-font-weight": handleFontWeight(fontWeight),
-          "--seed-text-align": otherProps.align,
-          ...style,
-        } as React.CSSProperties
-      }
-      {...otherProps}
-    >
-      {children}
-    </Comp>
-  );
-};
+    return (
+      <Comp
+        // @ts-ignore: We might need overloading for ref types, not a big deal for now.
+        ref={ref}
+        className={clsx(textClassName, className)}
+        style={
+          {
+            "--seed-max-lines": maxLines,
+            "--seed-text-color": handleColor(color),
+            "--seed-font-size": handleFontSize(fontSize),
+            "--seed-line-height": handleLineHeight(lineHeight ?? fontSize),
+            "--seed-font-weight": handleFontWeight(fontWeight),
+            "--seed-text-align": otherProps.align,
+            ...style,
+          } as React.CSSProperties
+        }
+        {...otherProps}
+      >
+        {children}
+      </Comp>
+    );
+  },
+);
+
+Text.displayName = "Text";