soongle-ui 0.1.2 → 0.1.3

package/dist/index.d.mts

@@ -1,9 +1,18 @@
 import * as React from 'react';
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    children: React.ReactNode;
+interface ButtonProps$1 extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
+    size?: "sm" | "md" | "lg";
+    className?: string;
 }
+declare const Button: React.ForwardRefExoticComponent<ButtonProps$1 & React.RefAttributes<HTMLButtonElement>>;
 
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
 
 export { Button, type ButtonProps };

package/dist/index.d.ts

@@ -1,9 +1,18 @@
 import * as React from 'react';
 
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    children: React.ReactNode;
+interface ButtonProps$1 extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
+    size?: "sm" | "md" | "lg";
+    className?: string;
 }
+declare const Button: React.ForwardRefExoticComponent<ButtonProps$1 & React.RefAttributes<HTMLButtonElement>>;
 
-declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children?: React.ReactNode;
+    variant?: "default" | "primary" | "secondary" | "danger" | "ghost";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
 
 export { Button, type ButtonProps };

package/dist/index.js

@@ -36,17 +36,104 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Button/Button.tsx
+var React2 = __toESM(require("react"));
+
+// src/components/Text/Text.tsx
 var React = __toESM(require("react"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var Button = React.forwardRef(
-  ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl"
+};
+var weightClasses = {
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var colorClasses = {
+  default: "text-gray-900",
+  muted: "text-gray-500",
+  primary: "text-blue-600",
+  secondary: "text-green-600",
+  danger: "text-red-600",
+  success: "text-emerald-600"
+};
+var alignClasses = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+var Text = React.forwardRef(
+  ({
+    children,
+    as: Component = "p",
+    size = "base",
+    weight = "normal",
+    color = "default",
+    align = "left",
+    className = "",
+    ...props
+  }, ref) => {
+    const classes = [
+      sizeClasses[size],
+      weightClasses[weight],
+      colorClasses[color],
+      alignClasses[align],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref, className: classes, ...props, children });
+  }
+);
+Text.displayName = "Text";
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var variantClasses = {
+  default: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+  primary: "bg-blue-600 text-white hover:bg-blue-700",
+  secondary: "bg-green-600 text-white hover:bg-green-700",
+  danger: "bg-red-600 text-white hover:bg-red-700",
+  ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
+};
+var sizeClasses2 = {
+  sm: "px-3 py-1.5",
+  md: "px-4 py-2",
+  lg: "px-6 py-3"
+};
+var textSizeMap = {
+  sm: "sm",
+  md: "base",
+  lg: "lg"
+};
+var Button = React2.forwardRef(
+  ({ className = "", children, variant = "default", size = "md", ...props }, ref) => {
+    const variantClass = variantClasses[variant];
+    const sizeClass = sizeClasses2[size];
+    const textSize = textSizeMap[size];
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       "button",
       {
         ref,
-        className: `cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`,
+        className: `cursor-pointer inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${sizeClass} ${className}`,
         ...props,
-        children
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          Text,
+          {
+            as: "span",
+            size: textSize,
+            weight: "medium",
+            className: "leading-none",
+            children
+          }
+        )
       }
     );
   }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n","import * as React from 'react';\r\nimport { ButtonProps } from './types';\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ className = '', children, ...props }, ref) => {\r\n    return (\r\n      <button \r\n        ref={ref} \r\n        className={`cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,YAAuB;AAMjB;AAHC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,YAAY,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,0OAA0O,SAAS;AAAA,QAC7P,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/components/Text/Text.tsx"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n","import * as React from \"react\";\r\nimport { Text } from \"../Text/Text\";\r\n\r\nexport interface ButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  children?: React.ReactNode;\r\n  variant?: \"default\" | \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  className?: string;\r\n}\r\n\r\nconst variantClasses = {\r\n  default: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n  primary: \"bg-blue-600 text-white hover:bg-blue-700\",\r\n  secondary: \"bg-green-600 text-white hover:bg-green-700\",\r\n  danger: \"bg-red-600 text-white hover:bg-red-700\",\r\n  ghost: \"bg-transparent text-gray-700 hover:bg-gray-100\",\r\n};\r\n\r\nconst sizeClasses = {\r\n  sm: \"px-3 py-1.5\",\r\n  md: \"px-4 py-2\",\r\n  lg: \"px-6 py-3\",\r\n};\r\n\r\nconst textSizeMap = {\r\n  sm: \"sm\" as const,\r\n  md: \"base\" as const,\r\n  lg: \"lg\" as const,\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    { className = \"\", children, variant = \"default\", size = \"md\", ...props },\r\n    ref\r\n  ) => {\r\n    const variantClass = variantClasses[variant];\r\n    const sizeClass = sizeClasses[size];\r\n    const textSize = textSizeMap[size];\r\n\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        className={`cursor-pointer inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${sizeClass} ${className}`}\r\n        {...props}\r\n      >\r\n        <Text\r\n          as=\"span\"\r\n          size={textSize}\r\n          weight=\"medium\"\r\n          className=\"leading-none\"\r\n        >\r\n          {children}\r\n        </Text>\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface TextProps {\r\n  children?: React.ReactNode;\r\n  as?: \"p\" | \"span\" | \"div\" | \"label\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\r\n  weight?: \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\";\r\n  color?: \"default\" | \"muted\" | \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n  align?: \"left\" | \"center\" | \"right\";\r\n  className?: string;\r\n}\r\n\r\nconst sizeClasses = {\r\n  xs: \"text-xs\",\r\n  sm: \"text-sm\",\r\n  base: \"text-base\",\r\n  lg: \"text-lg\",\r\n  xl: \"text-xl\",\r\n  \"2xl\": \"text-2xl\",\r\n  \"3xl\": \"text-3xl\",\r\n  \"4xl\": \"text-4xl\",\r\n};\r\n\r\nconst weightClasses = {\r\n  light: \"font-light\",\r\n  normal: \"font-normal\",\r\n  medium: \"font-medium\",\r\n  semibold: \"font-semibold\",\r\n  bold: \"font-bold\",\r\n};\r\n\r\nconst colorClasses = {\r\n  default: \"text-gray-900\",\r\n  muted: \"text-gray-500\",\r\n  primary: \"text-blue-600\",\r\n  secondary: \"text-green-600\",\r\n  danger: \"text-red-600\",\r\n  success: \"text-emerald-600\",\r\n};\r\n\r\nconst alignClasses = {\r\n  left: \"text-left\",\r\n  center: \"text-center\",\r\n  right: \"text-right\",\r\n};\r\n\r\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\r\n  (\r\n    {\r\n      children,\r\n      as: Component = \"p\",\r\n      size = \"base\",\r\n      weight = \"normal\",\r\n      color = \"default\",\r\n      align = \"left\",\r\n      className = \"\",\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const classes = [\r\n      sizeClasses[size],\r\n      weightClasses[weight],\r\n      colorClasses[color],\r\n      alignClasses[align],\r\n      className,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(\" \");\r\n\r\n    return (\r\n      <Component ref={ref as any} className={classes} {...props}>\r\n        {children}\r\n      </Component>\r\n    );\r\n  }\r\n);\r\n\r\nText.displayName = \"Text\";\r\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AAuEjB;AA3DN,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEA,IAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,IAAM,eAAe;AAAA,EACnB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,IAAM,OAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU;AAAA,MACd,YAAY,IAAI;AAAA,MAChB,cAAc,MAAM;AAAA,MACpB,aAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,MAClB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,4CAAC,aAAU,KAAiB,WAAW,SAAU,GAAG,OACjD,UACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;;;ADhCX,IAAAC,sBAAA;AAnCR,IAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAMC,eAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,SAAe;AAAA,EAC1B,CACE,EAAE,YAAY,IAAI,UAAU,UAAU,WAAW,OAAO,MAAM,GAAG,MAAM,GACvE,QACG;AACH,UAAM,eAAe,eAAe,OAAO;AAC3C,UAAM,YAAYA,aAAY,IAAI;AAClC,UAAM,WAAW,YAAY,IAAI;AAEjC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,gOAAgO,YAAY,IAAI,SAAS,IAAI,SAAS;AAAA,QAChR,GAAG;AAAA,QAEJ;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":["React","import_jsx_runtime","sizeClasses"]}

package/dist/index.mjs

@@ -1,17 +1,104 @@
 "use client";
 
 // src/components/Button/Button.tsx
+import * as React2 from "react";
+
+// src/components/Text/Text.tsx
 import * as React from "react";
 import { jsx } from "react/jsx-runtime";
-var Button = React.forwardRef(
-  ({ className = "", children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(
+var sizeClasses = {
+  xs: "text-xs",
+  sm: "text-sm",
+  base: "text-base",
+  lg: "text-lg",
+  xl: "text-xl",
+  "2xl": "text-2xl",
+  "3xl": "text-3xl",
+  "4xl": "text-4xl"
+};
+var weightClasses = {
+  light: "font-light",
+  normal: "font-normal",
+  medium: "font-medium",
+  semibold: "font-semibold",
+  bold: "font-bold"
+};
+var colorClasses = {
+  default: "text-gray-900",
+  muted: "text-gray-500",
+  primary: "text-blue-600",
+  secondary: "text-green-600",
+  danger: "text-red-600",
+  success: "text-emerald-600"
+};
+var alignClasses = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+var Text = React.forwardRef(
+  ({
+    children,
+    as: Component = "p",
+    size = "base",
+    weight = "normal",
+    color = "default",
+    align = "left",
+    className = "",
+    ...props
+  }, ref) => {
+    const classes = [
+      sizeClasses[size],
+      weightClasses[weight],
+      colorClasses[color],
+      alignClasses[align],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(Component, { ref, className: classes, ...props, children });
+  }
+);
+Text.displayName = "Text";
+
+// src/components/Button/Button.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var variantClasses = {
+  default: "bg-gray-200 text-gray-900 hover:bg-gray-300",
+  primary: "bg-blue-600 text-white hover:bg-blue-700",
+  secondary: "bg-green-600 text-white hover:bg-green-700",
+  danger: "bg-red-600 text-white hover:bg-red-700",
+  ghost: "bg-transparent text-gray-700 hover:bg-gray-100"
+};
+var sizeClasses2 = {
+  sm: "px-3 py-1.5",
+  md: "px-4 py-2",
+  lg: "px-6 py-3"
+};
+var textSizeMap = {
+  sm: "sm",
+  md: "base",
+  lg: "lg"
+};
+var Button = React2.forwardRef(
+  ({ className = "", children, variant = "default", size = "md", ...props }, ref) => {
+    const variantClass = variantClasses[variant];
+    const sizeClass = sizeClasses2[size];
+    const textSize = textSizeMap[size];
+    return /* @__PURE__ */ jsx2(
       "button",
       {
         ref,
-        className: `cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`,
+        className: `cursor-pointer inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${sizeClass} ${className}`,
         ...props,
-        children
+        children: /* @__PURE__ */ jsx2(
+          Text,
+          {
+            as: "span",
+            size: textSize,
+            weight: "medium",
+            className: "leading-none",
+            children
+          }
+        )
       }
     );
   }

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { ButtonProps } from './types';\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  ({ className = '', children, ...props }, ref) => {\r\n    return (\r\n      <button \r\n        ref={ref} \r\n        className={`cursor-pointer inline-flex items-center justify-center rounded-md px-4 py-2 font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${className}`}\r\n        {...props}\r\n      >\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n"],"mappings":";;;AAAA,YAAY,WAAW;AAMjB;AAHC,IAAM,SAAe;AAAA,EAC1B,CAAC,EAAE,YAAY,IAAI,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,0OAA0O,SAAS;AAAA,QAC7P,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":[]}
+{"version":3,"sources":["../src/components/Button/Button.tsx","../src/components/Text/Text.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { Text } from \"../Text/Text\";\r\n\r\nexport interface ButtonProps\r\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\r\n  children?: React.ReactNode;\r\n  variant?: \"default\" | \"primary\" | \"secondary\" | \"danger\" | \"ghost\";\r\n  size?: \"sm\" | \"md\" | \"lg\";\r\n  className?: string;\r\n}\r\n\r\nconst variantClasses = {\r\n  default: \"bg-gray-200 text-gray-900 hover:bg-gray-300\",\r\n  primary: \"bg-blue-600 text-white hover:bg-blue-700\",\r\n  secondary: \"bg-green-600 text-white hover:bg-green-700\",\r\n  danger: \"bg-red-600 text-white hover:bg-red-700\",\r\n  ghost: \"bg-transparent text-gray-700 hover:bg-gray-100\",\r\n};\r\n\r\nconst sizeClasses = {\r\n  sm: \"px-3 py-1.5\",\r\n  md: \"px-4 py-2\",\r\n  lg: \"px-6 py-3\",\r\n};\r\n\r\nconst textSizeMap = {\r\n  sm: \"sm\" as const,\r\n  md: \"base\" as const,\r\n  lg: \"lg\" as const,\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    { className = \"\", children, variant = \"default\", size = \"md\", ...props },\r\n    ref\r\n  ) => {\r\n    const variantClass = variantClasses[variant];\r\n    const sizeClass = sizeClasses[size];\r\n    const textSize = textSizeMap[size];\r\n\r\n    return (\r\n      <button\r\n        ref={ref}\r\n        className={`cursor-pointer inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 ${variantClass} ${sizeClass} ${className}`}\r\n        {...props}\r\n      >\r\n        <Text\r\n          as=\"span\"\r\n          size={textSize}\r\n          weight=\"medium\"\r\n          className=\"leading-none\"\r\n        >\r\n          {children}\r\n        </Text>\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = \"Button\";\r\n","import * as React from \"react\";\r\n\r\nexport interface TextProps {\r\n  children?: React.ReactNode;\r\n  as?: \"p\" | \"span\" | \"div\" | \"label\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\r\n  size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\r\n  weight?: \"light\" | \"normal\" | \"medium\" | \"semibold\" | \"bold\";\r\n  color?: \"default\" | \"muted\" | \"primary\" | \"secondary\" | \"danger\" | \"success\";\r\n  align?: \"left\" | \"center\" | \"right\";\r\n  className?: string;\r\n}\r\n\r\nconst sizeClasses = {\r\n  xs: \"text-xs\",\r\n  sm: \"text-sm\",\r\n  base: \"text-base\",\r\n  lg: \"text-lg\",\r\n  xl: \"text-xl\",\r\n  \"2xl\": \"text-2xl\",\r\n  \"3xl\": \"text-3xl\",\r\n  \"4xl\": \"text-4xl\",\r\n};\r\n\r\nconst weightClasses = {\r\n  light: \"font-light\",\r\n  normal: \"font-normal\",\r\n  medium: \"font-medium\",\r\n  semibold: \"font-semibold\",\r\n  bold: \"font-bold\",\r\n};\r\n\r\nconst colorClasses = {\r\n  default: \"text-gray-900\",\r\n  muted: \"text-gray-500\",\r\n  primary: \"text-blue-600\",\r\n  secondary: \"text-green-600\",\r\n  danger: \"text-red-600\",\r\n  success: \"text-emerald-600\",\r\n};\r\n\r\nconst alignClasses = {\r\n  left: \"text-left\",\r\n  center: \"text-center\",\r\n  right: \"text-right\",\r\n};\r\n\r\nexport const Text = React.forwardRef<HTMLElement, TextProps>(\r\n  (\r\n    {\r\n      children,\r\n      as: Component = \"p\",\r\n      size = \"base\",\r\n      weight = \"normal\",\r\n      color = \"default\",\r\n      align = \"left\",\r\n      className = \"\",\r\n      ...props\r\n    },\r\n    ref\r\n  ) => {\r\n    const classes = [\r\n      sizeClasses[size],\r\n      weightClasses[weight],\r\n      colorClasses[color],\r\n      alignClasses[align],\r\n      className,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(\" \");\r\n\r\n    return (\r\n      <Component ref={ref as any} className={classes} {...props}>\r\n        {children}\r\n      </Component>\r\n    );\r\n  }\r\n);\r\n\r\nText.displayName = \"Text\";\r\n"],"mappings":";;;AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AAuEjB;AA3DN,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,MAAM;AAAA,EACN,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,OAAO;AAAA,EACP,OAAO;AAAA,EACP,OAAO;AACT;AAEA,IAAM,gBAAgB;AAAA,EACpB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,MAAM;AACR;AAEA,IAAM,eAAe;AAAA,EACnB,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,SAAS;AACX;AAEA,IAAM,eAAe;AAAA,EACnB,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,IAAM,OAAa;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA,IAAI,YAAY;AAAA,IAChB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,UAAU;AAAA,MACd,YAAY,IAAI;AAAA,MAChB,cAAc,MAAM;AAAA,MACpB,aAAa,KAAK;AAAA,MAClB,aAAa,KAAK;AAAA,MAClB;AAAA,IACF,EACG,OAAO,OAAO,EACd,KAAK,GAAG;AAEX,WACE,oBAAC,aAAU,KAAiB,WAAW,SAAU,GAAG,OACjD,UACH;AAAA,EAEJ;AACF;AAEA,KAAK,cAAc;;;ADhCX,gBAAAC,YAAA;AAnCR,IAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAMC,eAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,IAAM,cAAc;AAAA,EAClB,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEO,IAAM,SAAe;AAAA,EAC1B,CACE,EAAE,YAAY,IAAI,UAAU,UAAU,WAAW,OAAO,MAAM,GAAG,MAAM,GACvE,QACG;AACH,UAAM,eAAe,eAAe,OAAO;AAC3C,UAAM,YAAYA,aAAY,IAAI;AAClC,UAAM,WAAW,YAAY,IAAI;AAEjC,WACE,gBAAAD;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,gOAAgO,YAAY,IAAI,SAAS,IAAI,SAAS;AAAA,QAChR,GAAG;AAAA,QAEJ,0BAAAA;AAAA,UAAC;AAAA;AAAA,YACC,IAAG;AAAA,YACH,MAAM;AAAA,YACN,QAAO;AAAA,YACP,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;","names":["React","jsx","sizeClasses"]}

package/dist/styles.css

@@ -7,8 +7,42 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
+    --color-red-600: oklch(57.7% 0.245 27.325);
+    --color-red-700: oklch(50.5% 0.213 27.518);
+    --color-green-600: oklch(62.7% 0.194 149.214);
+    --color-green-700: oklch(52.7% 0.154 150.069);
+    --color-emerald-600: oklch(59.6% 0.145 163.225);
+    --color-blue-600: oklch(54.6% 0.245 262.881);
+    --color-blue-700: oklch(48.8% 0.243 264.376);
+    --color-gray-100: oklch(96.7% 0.003 264.542);
+    --color-gray-200: oklch(92.8% 0.006 264.531);
+    --color-gray-300: oklch(87.2% 0.01 258.338);
+    --color-gray-500: oklch(55.1% 0.027 264.364);
+    --color-gray-700: oklch(37.3% 0.034 259.733);
+    --color-gray-900: oklch(21% 0.034 264.665);
+    --color-white: #fff;
     --spacing: 0.25rem;
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+    --text-3xl: 1.875rem;
+    --text-3xl--line-height: calc(2.25 / 1.875);
+    --text-4xl: 2.25rem;
+    --text-4xl--line-height: calc(2.5 / 2.25);
+    --font-weight-light: 300;
+    --font-weight-normal: 400;
     --font-weight-medium: 500;
+    --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --radius-md: 0.375rem;
     --default-transition-duration: 150ms;
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@@ -165,36 +199,195 @@
   }
 }
 @layer utilities {
+  .flex {
+    display: flex;
+  }
   .inline-flex {
     display: inline-flex;
   }
   .cursor-pointer {
     cursor: pointer;
   }
+  .flex-col {
+    flex-direction: column;
+  }
   .items-center {
     align-items: center;
   }
   .justify-center {
     justify-content: center;
   }
+  .gap-2 {
+    gap: calc(var(--spacing) * 2);
+  }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .rounded-md {
     border-radius: var(--radius-md);
   }
+  .bg-blue-600 {
+    background-color: var(--color-blue-600);
+  }
+  .bg-gray-200 {
+    background-color: var(--color-gray-200);
+  }
+  .bg-green-600 {
+    background-color: var(--color-green-600);
+  }
+  .bg-red-600 {
+    background-color: var(--color-red-600);
+  }
+  .bg-transparent {
+    background-color: transparent;
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
   .px-4 {
     padding-inline: calc(var(--spacing) * 4);
   }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
+  .py-3 {
+    padding-block: calc(var(--spacing) * 3);
+  }
+  .text-center {
+    text-align: center;
+  }
+  .text-left {
+    text-align: left;
+  }
+  .text-right {
+    text-align: right;
+  }
+  .text-2xl {
+    font-size: var(--text-2xl);
+    line-height: var(--tw-leading, var(--text-2xl--line-height));
+  }
+  .text-3xl {
+    font-size: var(--text-3xl);
+    line-height: var(--tw-leading, var(--text-3xl--line-height));
+  }
+  .text-4xl {
+    font-size: var(--text-4xl);
+    line-height: var(--tw-leading, var(--text-4xl--line-height));
+  }
+  .text-base {
+    font-size: var(--text-base);
+    line-height: var(--tw-leading, var(--text-base--line-height));
+  }
+  .text-lg {
+    font-size: var(--text-lg);
+    line-height: var(--tw-leading, var(--text-lg--line-height));
+  }
+  .text-sm {
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
+  .text-xl {
+    font-size: var(--text-xl);
+    line-height: var(--tw-leading, var(--text-xl--line-height));
+  }
+  .text-xs {
+    font-size: var(--text-xs);
+    line-height: var(--tw-leading, var(--text-xs--line-height));
+  }
+  .leading-none {
+    --tw-leading: 1;
+    line-height: 1;
+  }
+  .font-bold {
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+  }
+  .font-light {
+    --tw-font-weight: var(--font-weight-light);
+    font-weight: var(--font-weight-light);
+  }
   .font-medium {
     --tw-font-weight: var(--font-weight-medium);
     font-weight: var(--font-weight-medium);
   }
+  .font-normal {
+    --tw-font-weight: var(--font-weight-normal);
+    font-weight: var(--font-weight-normal);
+  }
+  .font-semibold {
+    --tw-font-weight: var(--font-weight-semibold);
+    font-weight: var(--font-weight-semibold);
+  }
+  .text-blue-600 {
+    color: var(--color-blue-600);
+  }
+  .text-emerald-600 {
+    color: var(--color-emerald-600);
+  }
+  .text-gray-500 {
+    color: var(--color-gray-500);
+  }
+  .text-gray-700 {
+    color: var(--color-gray-700);
+  }
+  .text-gray-900 {
+    color: var(--color-gray-900);
+  }
+  .text-green-600 {
+    color: var(--color-green-600);
+  }
+  .text-red-600 {
+    color: var(--color-red-600);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
   .transition-colors {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .hover\:bg-blue-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-blue-700);
+      }
+    }
+  }
+  .hover\:bg-gray-100 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-100);
+      }
+    }
+  }
+  .hover\:bg-gray-300 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-gray-300);
+      }
+    }
+  }
+  .hover\:bg-green-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-green-700);
+      }
+    }
+  }
+  .hover\:bg-red-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-red-700);
+      }
+    }
+  }
   .focus-visible\:ring-2 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -224,6 +417,10 @@
     }
   }
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-font-weight {
   syntax: "*";
   inherits: false;
@@ -296,6 +493,7 @@
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {
+      --tw-leading: initial;
       --tw-font-weight: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;

package/package.json

@@ -1,51 +1,58 @@
-{
-  "name": "soongle-ui",
-  "version": "0.1.2",
-  "description": "A design system library for React.js and Next.js with TailwindCSS v4 by Soongle",
-  "publishConfig": {
-    "access": "public"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.ts",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js"
-    },
-    "./styles.css": "./dist/styles.css"
-  },
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup && npm run build:css",
-    "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css",
-    "dev": "tsup --watch",
-    "type-check": "tsc --noEmit"
-  },
-  "keywords": [
-    "design-system",
-    "react",
-    "nextjs",
-    "tailwindcss",
-    "ui-library"
-  ],
-  "author": "",
-  "license": "MIT",
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
-  },
-  "devDependencies": {
-    "@tailwindcss/cli": "^4.1.18",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tailwindcss": "^4.0.0",
-    "tsup": "^8.0.1",
-    "typescript": "^5.3.3"
-  }
-}
+{
+  "name": "soongle-ui",
+  "version": "0.1.3",
+  "description": "A design system library for React.js and Next.js with TailwindCSS v4 by Soongle",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && npm run build:css",
+    "build:css": "npx @tailwindcss/cli -i ./src/styles.css -o ./dist/styles.css",
+    "dev": "tsup --watch",
+    "type-check": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "design-system",
+    "react",
+    "nextjs",
+    "tailwindcss",
+    "ui-library"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@storybook/react-vite": "^10.1.11",
+    "@tailwindcss/cli": "^4.1.18",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^5.1.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "storybook": "^10.1.11",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.3",
+    "vite": "^7.3.0"
+  }
+}