@seed-design/react 0.0.31 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seed-design/react",
-  "version": "0.0.31",
+  "version": "0.0.32",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",

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/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";