soongle-ui 0.1.0

package/README.md

@@ -0,0 +1,41 @@
+# soongle-ui
+
+A design system library for React.js and Next.js with TailwindCSS.
+
+## Installation
+
+```bash
+npm install soongle-ui
+```
+
+## Usage
+
+### 1. Import Styles
+
+Import the CSS file in your root layout or entry file (e.g., `_app.tsx`, `layout.tsx`, or `src/index.tsx`):
+
+```tsx
+import 'soongle-ui/styles.css';
+```
+
+### 2. Use Components
+
+```tsx
+import { Button } from 'soongle-ui';
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary">Click me</Button>
+      <Button variant="outline">Outline</Button>
+    </div>
+  );
+}
+```
+
+## Features
+
+- Built with React and Tailwind CSS
+- Fully typed with TypeScript
+- Supports Light/Dark modes (if applicable)
+- Tree-shakable exports

package/dist/index.d.mts

@@ -0,0 +1,133 @@
+import * as React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success' | 'warning' | 'error';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+}
+
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const colors: {
+    readonly primary: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+        readonly 950: "#172554";
+    };
+    readonly secondary: {
+        readonly 50: "#f8fafc";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+        readonly 950: "#020617";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+        readonly 950: "#052e16";
+    };
+    readonly warning: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+        readonly 950: "#451a03";
+    };
+    readonly error: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+        readonly 950: "#450a0a";
+    };
+    readonly neutral: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a3a3a3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0a0a0a";
+    };
+};
+
+declare const spacing: {
+    readonly xs: "0.5rem";
+    readonly sm: "0.75rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+    readonly '3xl': "4rem";
+    readonly '4xl': "6rem";
+};
+
+declare const typography: {
+    readonly fontSizes: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+    };
+    readonly fontWeights: {
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+    };
+    readonly lineHeights: {
+        readonly tight: "1.25";
+        readonly normal: "1.5";
+        readonly relaxed: "1.75";
+        readonly loose: "2";
+    };
+};
+
+export { Button, type ButtonProps, colors, spacing, typography };

package/dist/index.d.ts

@@ -0,0 +1,133 @@
+import * as React from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'success' | 'warning' | 'error';
+type ButtonSize = 'sm' | 'md' | 'lg';
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    children: React.ReactNode;
+}
+
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const colors: {
+    readonly primary: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+        readonly 950: "#172554";
+    };
+    readonly secondary: {
+        readonly 50: "#f8fafc";
+        readonly 100: "#f1f5f9";
+        readonly 200: "#e2e8f0";
+        readonly 300: "#cbd5e1";
+        readonly 400: "#94a3b8";
+        readonly 500: "#64748b";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1e293b";
+        readonly 900: "#0f172a";
+        readonly 950: "#020617";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+        readonly 950: "#052e16";
+    };
+    readonly warning: {
+        readonly 50: "#fffbeb";
+        readonly 100: "#fef3c7";
+        readonly 200: "#fde68a";
+        readonly 300: "#fcd34d";
+        readonly 400: "#fbbf24";
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+        readonly 700: "#b45309";
+        readonly 800: "#92400e";
+        readonly 900: "#78350f";
+        readonly 950: "#451a03";
+    };
+    readonly error: {
+        readonly 50: "#fef2f2";
+        readonly 100: "#fee2e2";
+        readonly 200: "#fecaca";
+        readonly 300: "#fca5a5";
+        readonly 400: "#f87171";
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+        readonly 700: "#b91c1c";
+        readonly 800: "#991b1b";
+        readonly 900: "#7f1d1d";
+        readonly 950: "#450a0a";
+    };
+    readonly neutral: {
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a3a3a3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0a0a0a";
+    };
+};
+
+declare const spacing: {
+    readonly xs: "0.5rem";
+    readonly sm: "0.75rem";
+    readonly md: "1rem";
+    readonly lg: "1.5rem";
+    readonly xl: "2rem";
+    readonly '2xl': "3rem";
+    readonly '3xl': "4rem";
+    readonly '4xl': "6rem";
+};
+
+declare const typography: {
+    readonly fontSizes: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+    };
+    readonly fontWeights: {
+        readonly light: "300";
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+    };
+    readonly lineHeights: {
+        readonly tight: "1.25";
+        readonly normal: "1.5";
+        readonly relaxed: "1.75";
+        readonly loose: "2";
+    };
+};
+
+export { Button, type ButtonProps, colors, spacing, typography };

package/dist/index.js

@@ -0,0 +1,218 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  colors: () => colors,
+  spacing: () => spacing,
+  typography: () => typography
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Button/Button.tsx
+var React = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var baseStyles = "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";
+var variantStyles = {
+  primary: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500",
+  secondary: "bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary-500",
+  outline: "border-2 border-primary-600 text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500",
+  ghost: "text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500",
+  success: "bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500",
+  warning: "bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus-visible:ring-warning-500",
+  error: "bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500"
+};
+var sizeStyles = {
+  sm: "h-9 px-3 text-sm",
+  md: "h-10 px-4 text-base",
+  lg: "h-11 px-6 text-lg"
+};
+var Button = React.forwardRef(
+  ({ className = "", variant = "primary", size = "md", children, ...props }, ref) => {
+    const computedClassName = [
+      baseStyles,
+      variantStyles[variant],
+      sizeStyles[size],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, className: computedClassName, ...props, children });
+  }
+);
+Button.displayName = "Button";
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  secondary: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  },
+  success: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  warning: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  error: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a"
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  xs: "0.5rem",
+  // 8px
+  sm: "0.75rem",
+  // 12px
+  md: "1rem",
+  // 16px
+  lg: "1.5rem",
+  // 24px
+  xl: "2rem",
+  // 32px
+  "2xl": "3rem",
+  // 48px
+  "3xl": "4rem",
+  // 64px
+  "4xl": "6rem"
+  // 96px
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontSizes: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem",
+    // 36px
+    "5xl": "3rem"
+    // 48px
+  },
+  fontWeights: {
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800"
+  },
+  lineHeights: {
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75",
+    loose: "2"
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  colors,
+  spacing,
+  typography
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/components/Button/Button.tsx","../src/tokens/colors.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["// Export components\r\nexport * from './components';\r\n\r\n// Export design tokens\r\nexport * from './tokens';\r\n\r\n","import * as React from 'react';\r\nimport { ButtonProps, ButtonSize, ButtonVariant } from './types';\r\n\r\nconst baseStyles =\r\n  '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';\r\n\r\nconst variantStyles: Record<ButtonVariant, string> = {\r\n  primary:\r\n    'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500',\r\n  secondary:\r\n    'bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary-500',\r\n  outline:\r\n    'border-2 border-primary-600 text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500',\r\n  ghost:\r\n    'text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500',\r\n  success:\r\n    'bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500',\r\n  warning:\r\n    'bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus-visible:ring-warning-500',\r\n  error:\r\n    'bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500',\r\n};\r\n\r\nconst sizeStyles: Record<ButtonSize, string> = {\r\n  sm: 'h-9 px-3 text-sm',\r\n  md: 'h-10 px-4 text-base',\r\n  lg: 'h-11 px-6 text-lg',\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    { className = '', variant = 'primary', size = 'md', children, ...props },\r\n    ref\r\n  ) => {\r\n    const computedClassName = [\r\n      baseStyles,\r\n      variantStyles[variant],\r\n      sizeStyles[size],\r\n      className,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <button ref={ref} className={computedClassName} {...props}>\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n","export const colors = {\r\n  primary: {\r\n    50: '#eff6ff',\r\n    100: '#dbeafe',\r\n    200: '#bfdbfe',\r\n    300: '#93c5fd',\r\n    400: '#60a5fa',\r\n    500: '#3b82f6',\r\n    600: '#2563eb',\r\n    700: '#1d4ed8',\r\n    800: '#1e40af',\r\n    900: '#1e3a8a',\r\n    950: '#172554',\r\n  },\r\n  secondary: {\r\n    50: '#f8fafc',\r\n    100: '#f1f5f9',\r\n    200: '#e2e8f0',\r\n    300: '#cbd5e1',\r\n    400: '#94a3b8',\r\n    500: '#64748b',\r\n    600: '#475569',\r\n    700: '#334155',\r\n    800: '#1e293b',\r\n    900: '#0f172a',\r\n    950: '#020617',\r\n  },\r\n  success: {\r\n    50: '#f0fdf4',\r\n    100: '#dcfce7',\r\n    200: '#bbf7d0',\r\n    300: '#86efac',\r\n    400: '#4ade80',\r\n    500: '#22c55e',\r\n    600: '#16a34a',\r\n    700: '#15803d',\r\n    800: '#166534',\r\n    900: '#14532d',\r\n    950: '#052e16',\r\n  },\r\n  warning: {\r\n    50: '#fffbeb',\r\n    100: '#fef3c7',\r\n    200: '#fde68a',\r\n    300: '#fcd34d',\r\n    400: '#fbbf24',\r\n    500: '#f59e0b',\r\n    600: '#d97706',\r\n    700: '#b45309',\r\n    800: '#92400e',\r\n    900: '#78350f',\r\n    950: '#451a03',\r\n  },\r\n  error: {\r\n    50: '#fef2f2',\r\n    100: '#fee2e2',\r\n    200: '#fecaca',\r\n    300: '#fca5a5',\r\n    400: '#f87171',\r\n    500: '#ef4444',\r\n    600: '#dc2626',\r\n    700: '#b91c1c',\r\n    800: '#991b1b',\r\n    900: '#7f1d1d',\r\n    950: '#450a0a',\r\n  },\r\n  neutral: {\r\n    50: '#fafafa',\r\n    100: '#f5f5f5',\r\n    200: '#e5e5e5',\r\n    300: '#d4d4d4',\r\n    400: '#a3a3a3',\r\n    500: '#737373',\r\n    600: '#525252',\r\n    700: '#404040',\r\n    800: '#262626',\r\n    900: '#171717',\r\n    950: '#0a0a0a',\r\n  },\r\n} as const;\r\n","export const spacing = {\r\n  xs: '0.5rem',    // 8px\r\n  sm: '0.75rem',   // 12px\r\n  md: '1rem',      // 16px\r\n  lg: '1.5rem',    // 24px\r\n  xl: '2rem',      // 32px\r\n  '2xl': '3rem',   // 48px\r\n  '3xl': '4rem',   // 64px\r\n  '4xl': '6rem',   // 96px\r\n} as const;\r\n","export const typography = {\r\n  fontSizes: {\r\n    xs: '0.75rem',     // 12px\r\n    sm: '0.875rem',    // 14px\r\n    base: '1rem',      // 16px\r\n    lg: '1.125rem',    // 18px\r\n    xl: '1.25rem',     // 20px\r\n    '2xl': '1.5rem',   // 24px\r\n    '3xl': '1.875rem', // 30px\r\n    '4xl': '2.25rem',  // 36px\r\n    '5xl': '3rem',     // 48px\r\n  },\r\n  fontWeights: {\r\n    light: '300',\r\n    normal: '400',\r\n    medium: '500',\r\n    semibold: '600',\r\n    bold: '700',\r\n    extrabold: '800',\r\n  },\r\n  lineHeights: {\r\n    tight: '1.25',\r\n    normal: '1.5',\r\n    relaxed: '1.75',\r\n    loose: '2',\r\n  },\r\n} as const;\r\n"],"mappings":"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","names":[]}

package/dist/index.mjs

@@ -0,0 +1,179 @@
+"use client";
+
+// src/components/Button/Button.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var baseStyles = "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";
+var variantStyles = {
+  primary: "bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500",
+  secondary: "bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary-500",
+  outline: "border-2 border-primary-600 text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500",
+  ghost: "text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500",
+  success: "bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500",
+  warning: "bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus-visible:ring-warning-500",
+  error: "bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500"
+};
+var sizeStyles = {
+  sm: "h-9 px-3 text-sm",
+  md: "h-10 px-4 text-base",
+  lg: "h-11 px-6 text-lg"
+};
+var Button = React.forwardRef(
+  ({ className = "", variant = "primary", size = "md", children, ...props }, ref) => {
+    const computedClassName = [
+      baseStyles,
+      variantStyles[variant],
+      sizeStyles[size],
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("button", { ref, className: computedClassName, ...props, children });
+  }
+);
+Button.displayName = "Button";
+
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  secondary: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  },
+  success: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  warning: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  error: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a"
+  }
+};
+
+// src/tokens/spacing.ts
+var spacing = {
+  xs: "0.5rem",
+  // 8px
+  sm: "0.75rem",
+  // 12px
+  md: "1rem",
+  // 16px
+  lg: "1.5rem",
+  // 24px
+  xl: "2rem",
+  // 32px
+  "2xl": "3rem",
+  // 48px
+  "3xl": "4rem",
+  // 64px
+  "4xl": "6rem"
+  // 96px
+};
+
+// src/tokens/typography.ts
+var typography = {
+  fontSizes: {
+    xs: "0.75rem",
+    // 12px
+    sm: "0.875rem",
+    // 14px
+    base: "1rem",
+    // 16px
+    lg: "1.125rem",
+    // 18px
+    xl: "1.25rem",
+    // 20px
+    "2xl": "1.5rem",
+    // 24px
+    "3xl": "1.875rem",
+    // 30px
+    "4xl": "2.25rem",
+    // 36px
+    "5xl": "3rem"
+    // 48px
+  },
+  fontWeights: {
+    light: "300",
+    normal: "400",
+    medium: "500",
+    semibold: "600",
+    bold: "700",
+    extrabold: "800"
+  },
+  lineHeights: {
+    tight: "1.25",
+    normal: "1.5",
+    relaxed: "1.75",
+    loose: "2"
+  }
+};
+export {
+  Button,
+  colors,
+  spacing,
+  typography
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Button/Button.tsx","../src/tokens/colors.ts","../src/tokens/spacing.ts","../src/tokens/typography.ts"],"sourcesContent":["import * as React from 'react';\r\nimport { ButtonProps, ButtonSize, ButtonVariant } from './types';\r\n\r\nconst baseStyles =\r\n  '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';\r\n\r\nconst variantStyles: Record<ButtonVariant, string> = {\r\n  primary:\r\n    'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-800 focus-visible:ring-primary-500',\r\n  secondary:\r\n    'bg-secondary-600 text-white hover:bg-secondary-700 active:bg-secondary-800 focus-visible:ring-secondary-500',\r\n  outline:\r\n    'border-2 border-primary-600 text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500',\r\n  ghost:\r\n    'text-primary-600 hover:bg-primary-50 active:bg-primary-100 focus-visible:ring-primary-500',\r\n  success:\r\n    'bg-success-600 text-white hover:bg-success-700 active:bg-success-800 focus-visible:ring-success-500',\r\n  warning:\r\n    'bg-warning-600 text-white hover:bg-warning-700 active:bg-warning-800 focus-visible:ring-warning-500',\r\n  error:\r\n    'bg-error-600 text-white hover:bg-error-700 active:bg-error-800 focus-visible:ring-error-500',\r\n};\r\n\r\nconst sizeStyles: Record<ButtonSize, string> = {\r\n  sm: 'h-9 px-3 text-sm',\r\n  md: 'h-10 px-4 text-base',\r\n  lg: 'h-11 px-6 text-lg',\r\n};\r\n\r\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\r\n  (\r\n    { className = '', variant = 'primary', size = 'md', children, ...props },\r\n    ref\r\n  ) => {\r\n    const computedClassName = [\r\n      baseStyles,\r\n      variantStyles[variant],\r\n      sizeStyles[size],\r\n      className,\r\n    ]\r\n      .filter(Boolean)\r\n      .join(' ');\r\n\r\n    return (\r\n      <button ref={ref} className={computedClassName} {...props}>\r\n        {children}\r\n      </button>\r\n    );\r\n  }\r\n);\r\n\r\nButton.displayName = 'Button';\r\n","export const colors = {\r\n  primary: {\r\n    50: '#eff6ff',\r\n    100: '#dbeafe',\r\n    200: '#bfdbfe',\r\n    300: '#93c5fd',\r\n    400: '#60a5fa',\r\n    500: '#3b82f6',\r\n    600: '#2563eb',\r\n    700: '#1d4ed8',\r\n    800: '#1e40af',\r\n    900: '#1e3a8a',\r\n    950: '#172554',\r\n  },\r\n  secondary: {\r\n    50: '#f8fafc',\r\n    100: '#f1f5f9',\r\n    200: '#e2e8f0',\r\n    300: '#cbd5e1',\r\n    400: '#94a3b8',\r\n    500: '#64748b',\r\n    600: '#475569',\r\n    700: '#334155',\r\n    800: '#1e293b',\r\n    900: '#0f172a',\r\n    950: '#020617',\r\n  },\r\n  success: {\r\n    50: '#f0fdf4',\r\n    100: '#dcfce7',\r\n    200: '#bbf7d0',\r\n    300: '#86efac',\r\n    400: '#4ade80',\r\n    500: '#22c55e',\r\n    600: '#16a34a',\r\n    700: '#15803d',\r\n    800: '#166534',\r\n    900: '#14532d',\r\n    950: '#052e16',\r\n  },\r\n  warning: {\r\n    50: '#fffbeb',\r\n    100: '#fef3c7',\r\n    200: '#fde68a',\r\n    300: '#fcd34d',\r\n    400: '#fbbf24',\r\n    500: '#f59e0b',\r\n    600: '#d97706',\r\n    700: '#b45309',\r\n    800: '#92400e',\r\n    900: '#78350f',\r\n    950: '#451a03',\r\n  },\r\n  error: {\r\n    50: '#fef2f2',\r\n    100: '#fee2e2',\r\n    200: '#fecaca',\r\n    300: '#fca5a5',\r\n    400: '#f87171',\r\n    500: '#ef4444',\r\n    600: '#dc2626',\r\n    700: '#b91c1c',\r\n    800: '#991b1b',\r\n    900: '#7f1d1d',\r\n    950: '#450a0a',\r\n  },\r\n  neutral: {\r\n    50: '#fafafa',\r\n    100: '#f5f5f5',\r\n    200: '#e5e5e5',\r\n    300: '#d4d4d4',\r\n    400: '#a3a3a3',\r\n    500: '#737373',\r\n    600: '#525252',\r\n    700: '#404040',\r\n    800: '#262626',\r\n    900: '#171717',\r\n    950: '#0a0a0a',\r\n  },\r\n} as const;\r\n","export const spacing = {\r\n  xs: '0.5rem',    // 8px\r\n  sm: '0.75rem',   // 12px\r\n  md: '1rem',      // 16px\r\n  lg: '1.5rem',    // 24px\r\n  xl: '2rem',      // 32px\r\n  '2xl': '3rem',   // 48px\r\n  '3xl': '4rem',   // 64px\r\n  '4xl': '6rem',   // 96px\r\n} as const;\r\n","export const typography = {\r\n  fontSizes: {\r\n    xs: '0.75rem',     // 12px\r\n    sm: '0.875rem',    // 14px\r\n    base: '1rem',      // 16px\r\n    lg: '1.125rem',    // 18px\r\n    xl: '1.25rem',     // 20px\r\n    '2xl': '1.5rem',   // 24px\r\n    '3xl': '1.875rem', // 30px\r\n    '4xl': '2.25rem',  // 36px\r\n    '5xl': '3rem',     // 48px\r\n  },\r\n  fontWeights: {\r\n    light: '300',\r\n    normal: '400',\r\n    medium: '500',\r\n    semibold: '600',\r\n    bold: '700',\r\n    extrabold: '800',\r\n  },\r\n  lineHeights: {\r\n    tight: '1.25',\r\n    normal: '1.5',\r\n    relaxed: '1.75',\r\n    loose: '2',\r\n  },\r\n} as const;\r\n"],"mappings":"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","names":[]}

package/dist/styles.css

@@ -0,0 +1,507 @@
+/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+@layer properties;
+@layer theme, base, components, utilities;
+@layer theme {
+  :root, :host {
+    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+      "Courier New", monospace;
+    --color-white: #fff;
+    --spacing: 0.25rem;
+    --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);
+    --font-weight-medium: 500;
+    --radius-md: 0.375rem;
+    --default-transition-duration: 150ms;
+    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    --default-font-family: var(--font-sans);
+    --default-mono-font-family: var(--font-mono);
+    --color-primary-50: #eff6ff;
+    --color-primary-100: #dbeafe;
+    --color-primary-500: #3b82f6;
+    --color-primary-600: #2563eb;
+    --color-primary-700: #1d4ed8;
+    --color-primary-800: #1e40af;
+    --color-secondary-500: #64748b;
+    --color-secondary-600: #475569;
+    --color-secondary-700: #334155;
+    --color-secondary-800: #1e293b;
+    --color-success-500: #22c55e;
+    --color-success-600: #16a34a;
+    --color-success-700: #15803d;
+    --color-success-800: #166534;
+    --color-warning-500: #f59e0b;
+    --color-warning-600: #d97706;
+    --color-warning-700: #b45309;
+    --color-warning-800: #92400e;
+    --color-error-500: #ef4444;
+    --color-error-600: #dc2626;
+    --color-error-700: #b91c1c;
+    --color-error-800: #991b1b;
+  }
+}
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  ::-webkit-calendar-picker-indicator {
+    line-height: 1;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities {
+  .inline-flex {
+    display: inline-flex;
+  }
+  .h-9 {
+    height: calc(var(--spacing) * 9);
+  }
+  .h-10 {
+    height: calc(var(--spacing) * 10);
+  }
+  .h-11 {
+    height: calc(var(--spacing) * 11);
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .rounded-md {
+    border-radius: var(--radius-md);
+  }
+  .border-2 {
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+  }
+  .border-primary-600 {
+    border-color: var(--color-primary-600);
+  }
+  .bg-error-600 {
+    background-color: var(--color-error-600);
+  }
+  .bg-primary-600 {
+    background-color: var(--color-primary-600);
+  }
+  .bg-secondary-600 {
+    background-color: var(--color-secondary-600);
+  }
+  .bg-success-600 {
+    background-color: var(--color-success-600);
+  }
+  .bg-warning-600 {
+    background-color: var(--color-warning-600);
+  }
+  .px-3 {
+    padding-inline: calc(var(--spacing) * 3);
+  }
+  .px-4 {
+    padding-inline: calc(var(--spacing) * 4);
+  }
+  .px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .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));
+  }
+  .font-medium {
+    --tw-font-weight: var(--font-weight-medium);
+    font-weight: var(--font-weight-medium);
+  }
+  .text-primary-600 {
+    color: var(--color-primary-600);
+  }
+  .text-white {
+    color: var(--color-white);
+  }
+  .outline {
+    outline-style: var(--tw-outline-style);
+    outline-width: 1px;
+  }
+  .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-error-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-error-700);
+      }
+    }
+  }
+  .hover\:bg-primary-50 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-50);
+      }
+    }
+  }
+  .hover\:bg-primary-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-primary-700);
+      }
+    }
+  }
+  .hover\:bg-secondary-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-secondary-700);
+      }
+    }
+  }
+  .hover\:bg-success-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-success-700);
+      }
+    }
+  }
+  .hover\:bg-warning-700 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-warning-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);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+    }
+  }
+  .focus-visible\:ring-error-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-error-500);
+    }
+  }
+  .focus-visible\:ring-primary-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-primary-500);
+    }
+  }
+  .focus-visible\:ring-secondary-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-secondary-500);
+    }
+  }
+  .focus-visible\:ring-success-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-success-500);
+    }
+  }
+  .focus-visible\:ring-warning-500 {
+    &:focus-visible {
+      --tw-ring-color: var(--color-warning-500);
+    }
+  }
+  .focus-visible\:ring-offset-2 {
+    &:focus-visible {
+      --tw-ring-offset-width: 2px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    }
+  }
+  .focus-visible\:outline-none {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
+  .active\:bg-error-800 {
+    &:active {
+      background-color: var(--color-error-800);
+    }
+  }
+  .active\:bg-primary-100 {
+    &:active {
+      background-color: var(--color-primary-100);
+    }
+  }
+  .active\:bg-primary-800 {
+    &:active {
+      background-color: var(--color-primary-800);
+    }
+  }
+  .active\:bg-secondary-800 {
+    &:active {
+      background-color: var(--color-secondary-800);
+    }
+  }
+  .active\:bg-success-800 {
+    &:active {
+      background-color: var(--color-success-800);
+    }
+  }
+  .active\:bg-warning-800 {
+    &:active {
+      background-color: var(--color-warning-800);
+    }
+  }
+  .disabled\:pointer-events-none {
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+  .disabled\:opacity-50 {
+    &:disabled {
+      opacity: 50%;
+    }
+  }
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-inset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-shadow-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-shadow-alpha {
+  syntax: "<percentage>";
+  inherits: false;
+  initial-value: 100%;
+}
+@property --tw-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-inset-ring-color {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-inset-ring-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@property --tw-ring-inset {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-ring-offset-width {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 0px;
+}
+@property --tw-ring-offset-color {
+  syntax: "*";
+  inherits: false;
+  initial-value: #fff;
+}
+@property --tw-ring-offset-shadow {
+  syntax: "*";
+  inherits: false;
+  initial-value: 0 0 #0000;
+}
+@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-border-style: solid;
+      --tw-font-weight: initial;
+      --tw-outline-style: solid;
+      --tw-shadow: 0 0 #0000;
+      --tw-shadow-color: initial;
+      --tw-shadow-alpha: 100%;
+      --tw-inset-shadow: 0 0 #0000;
+      --tw-inset-shadow-color: initial;
+      --tw-inset-shadow-alpha: 100%;
+      --tw-ring-color: initial;
+      --tw-ring-shadow: 0 0 #0000;
+      --tw-inset-ring-color: initial;
+      --tw-inset-ring-shadow: 0 0 #0000;
+      --tw-ring-inset: initial;
+      --tw-ring-offset-width: 0px;
+      --tw-ring-offset-color: #fff;
+      --tw-ring-offset-shadow: 0 0 #0000;
+    }
+  }
+}

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "soongle-ui",
+  "version": "0.1.0",
+  "description": "A design system library for React.js and Next.js with TailwindCSS v4",
+  "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"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.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"
+  }
+}