@ataraui/ataraui-react 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,104 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const colors: {
+    readonly primary: {
+        readonly 50: "#FFF4EE";
+        readonly 100: "#FFE0CC";
+        readonly 200: "#FFBF99";
+        readonly 300: "#F08050";
+        readonly 400: "#D4602A";
+        readonly 500: "#C2440A";
+        readonly 600: "#A03808";
+        readonly 700: "#8F2F06";
+        readonly 800: "#5C1C03";
+        readonly 900: "#2E0D01";
+    };
+    readonly neutral: {
+        readonly 50: "#f9f7f5";
+        readonly 100: "#f0ece7";
+        readonly 200: "#ddd6cc";
+        readonly 300: "#c5bab0";
+        readonly 400: "#a89b8e";
+        readonly 500: "#8a7d72";
+        readonly 600: "#6f6358";
+        readonly 700: "#564d45";
+        readonly 800: "#3c3630";
+        readonly 900: "#252019";
+    };
+    readonly danger: {
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+    };
+    readonly success: {
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+    };
+    readonly warning: {
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+    };
+};
+declare const radius: {
+    readonly none: "0";
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly '2xl': "1rem";
+    readonly full: "9999px";
+};
+declare const fontSize: {
+    readonly xs: readonly ["0.75rem", {
+        readonly lineHeight: "1rem";
+    }];
+    readonly sm: readonly ["0.875rem", {
+        readonly lineHeight: "1.25rem";
+    }];
+    readonly base: readonly ["1rem", {
+        readonly lineHeight: "1.5rem";
+    }];
+    readonly lg: readonly ["1.125rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+    readonly xl: readonly ["1.25rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+};
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    isLoading?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const inputVariants: (props?: ({
+    state?: "default" | "error" | null | undefined;
+    inputSize?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "secondary" | "outline" | "destructive" | "default" | "success" | "warning" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: {
+    ({ className, variant, size, ...props }: BadgeProps): React.JSX.Element;
+    displayName: string;
+};
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Input, type InputProps, badgeVariants, buttonVariants, cn, colors, fontSize, inputVariants, radius };

package/dist/index.d.ts

@@ -0,0 +1,104 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const colors: {
+    readonly primary: {
+        readonly 50: "#FFF4EE";
+        readonly 100: "#FFE0CC";
+        readonly 200: "#FFBF99";
+        readonly 300: "#F08050";
+        readonly 400: "#D4602A";
+        readonly 500: "#C2440A";
+        readonly 600: "#A03808";
+        readonly 700: "#8F2F06";
+        readonly 800: "#5C1C03";
+        readonly 900: "#2E0D01";
+    };
+    readonly neutral: {
+        readonly 50: "#f9f7f5";
+        readonly 100: "#f0ece7";
+        readonly 200: "#ddd6cc";
+        readonly 300: "#c5bab0";
+        readonly 400: "#a89b8e";
+        readonly 500: "#8a7d72";
+        readonly 600: "#6f6358";
+        readonly 700: "#564d45";
+        readonly 800: "#3c3630";
+        readonly 900: "#252019";
+    };
+    readonly danger: {
+        readonly 500: "#ef4444";
+        readonly 600: "#dc2626";
+    };
+    readonly success: {
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+    };
+    readonly warning: {
+        readonly 500: "#f59e0b";
+        readonly 600: "#d97706";
+    };
+};
+declare const radius: {
+    readonly none: "0";
+    readonly sm: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly '2xl': "1rem";
+    readonly full: "9999px";
+};
+declare const fontSize: {
+    readonly xs: readonly ["0.75rem", {
+        readonly lineHeight: "1rem";
+    }];
+    readonly sm: readonly ["0.875rem", {
+        readonly lineHeight: "1.25rem";
+    }];
+    readonly base: readonly ["1rem", {
+        readonly lineHeight: "1.5rem";
+    }];
+    readonly lg: readonly ["1.125rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+    readonly xl: readonly ["1.25rem", {
+        readonly lineHeight: "1.75rem";
+    }];
+};
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    isLoading?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+declare const inputVariants: (props?: ({
+    state?: "default" | "error" | null | undefined;
+    inputSize?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, VariantProps<typeof inputVariants> {
+    label?: string;
+    error?: string;
+    hint?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "secondary" | "outline" | "destructive" | "default" | "success" | "warning" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
+}
+declare const Badge: {
+    ({ className, variant, size, ...props }: BadgeProps): React.JSX.Element;
+    displayName: string;
+};
+
+export { Badge, type BadgeProps, Button, type ButtonProps, Input, type InputProps, badgeVariants, buttonVariants, cn, colors, fontSize, inputVariants, radius };

package/dist/index.js

@@ -0,0 +1,193 @@
+'use strict';
+
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+
+// src/tokens/index.ts
+var colors = {
+  primary: {
+    50: "#FFF4EE",
+    100: "#FFE0CC",
+    200: "#FFBF99",
+    300: "#F08050",
+    400: "#D4602A",
+    500: "#C2440A",
+    600: "#A03808",
+    700: "#8F2F06",
+    800: "#5C1C03",
+    900: "#2E0D01"
+  },
+  neutral: {
+    50: "#f9f7f5",
+    100: "#f0ece7",
+    200: "#ddd6cc",
+    300: "#c5bab0",
+    400: "#a89b8e",
+    500: "#8a7d72",
+    600: "#6f6358",
+    700: "#564d45",
+    800: "#3c3630",
+    900: "#252019"
+  },
+  danger: {
+    500: "#ef4444",
+    600: "#dc2626"
+  },
+  success: {
+    500: "#22c55e",
+    600: "#16a34a"
+  },
+  warning: {
+    500: "#f59e0b",
+    600: "#d97706"
+  }
+};
+var radius = {
+  none: "0",
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "2xl": "1rem",
+  full: "9999px"
+};
+var fontSize = {
+  xs: ["0.75rem", { lineHeight: "1rem" }],
+  sm: ["0.875rem", { lineHeight: "1.25rem" }],
+  base: ["1rem", { lineHeight: "1.5rem" }],
+  lg: ["1.125rem", { lineHeight: "1.75rem" }],
+  xl: ["1.25rem", { lineHeight: "1.75rem" }]
+};
+var buttonVariants = classVarianceAuthority.cva(
+  "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-(--color-primary-500) text-white hover:bg-(--color-primary-600) focus-visible:ring-(--color-primary-500)",
+        secondary: "bg-(--color-neutral-100) text-(--color-neutral-900) hover:bg-(--color-neutral-200)",
+        outline: "border border-(--color-primary-500) text-(--color-primary-500) bg-transparent hover:bg-(--color-primary-50)",
+        ghost: "text-(--color-neutral-700) hover:bg-(--color-neutral-100)",
+        destructive: "bg-(--color-danger-500) text-white hover:bg-(--color-danger-600)"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm rounded-(--radius-md) gap-1.5",
+        md: "h-10 px-4 text-sm rounded-(--radius-md) gap-2",
+        lg: "h-12 px-6 text-base rounded-(--radius-lg) gap-2",
+        icon: "h-10 w-10 rounded-(--radius-md)"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = React__default.default.forwardRef(
+  ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ref,
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: disabled || isLoading,
+      ...props,
+      children: [
+        isLoading && /* @__PURE__ */ jsxRuntime.jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ jsxRuntime.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v8z" })
+        ] }),
+        children
+      ]
+    }
+  )
+);
+Button.displayName = "Button";
+var inputVariants = classVarianceAuthority.cva(
+  "w-full px-3 py-2 text-sm bg-white border rounded-(--radius-md) transition-colors placeholder:text-(--color-neutral-400) focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)",
+  {
+    variants: {
+      state: {
+        default: "border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20",
+        error: "border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20"
+      },
+      inputSize: {
+        sm: "h-8  text-xs",
+        md: "h-10 text-sm",
+        lg: "h-12 text-base"
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      inputSize: "md"
+    }
+  }
+);
+var Input = React__default.default.forwardRef(
+  ({ className, label, error, hint, id, inputSize, ...props }, ref) => {
+    const inputId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+      label && /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-(--color-neutral-700)", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ref,
+          id: inputId,
+          className: cn(inputVariants({ state: error ? "error" : "default", inputSize }), className),
+          ...props
+        }
+      ),
+      hint && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-(--color-neutral-500)", children: hint }),
+      error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-(--color-danger-500)", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var badgeVariants = classVarianceAuthority.cva(
+  "inline-flex items-center rounded-full font-medium",
+  {
+    variants: {
+      variant: {
+        default: "bg-(--color-primary-500) text-white",
+        secondary: "bg-(--color-neutral-100) text-(--color-neutral-700)",
+        outline: "border border-(--color-primary-500) text-(--color-primary-500)",
+        success: "bg-(--color-success-500)/10 text-(--color-success-600)",
+        warning: "bg-(--color-warning-500)/10 text-(--color-warning-600)",
+        destructive: "bg-(--color-danger-500)/10 text-(--color-danger-600)"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Badge = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(badgeVariants({ variant, size }), className), ...props });
+Badge.displayName = "Badge";
+
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Input = Input;
+exports.badgeVariants = badgeVariants;
+exports.buttonVariants = buttonVariants;
+exports.cn = cn;
+exports.colors = colors;
+exports.fontSize = fontSize;
+exports.inputVariants = inputVariants;
+exports.radius = radius;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts","../src/tokens/index.ts","../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/components/Badge/Badge.tsx"],"names":["twMerge","clsx","cva","React","jsxs","jsx"],"mappings":"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","file":"index.js","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}","export const colors = {\n  primary: {\n    50:  '#FFF4EE',\n    100: '#FFE0CC',\n    200: '#FFBF99',\n    300: '#F08050',\n    400: '#D4602A',\n    500: '#C2440A',\n    600: '#A03808',\n    700: '#8F2F06',\n    800: '#5C1C03',\n    900: '#2E0D01',\n  },\n  neutral: {\n    50:  '#f9f7f5',\n    100: '#f0ece7',\n    200: '#ddd6cc',\n    300: '#c5bab0',\n    400: '#a89b8e',\n    500: '#8a7d72',\n    600: '#6f6358',\n    700: '#564d45',\n    800: '#3c3630',\n    900: '#252019',\n  },\n  danger: {\n    500: '#ef4444',\n    600: '#dc2626',\n  },\n  success: {\n    500: '#22c55e',\n    600: '#16a34a',\n  },\n  warning: {\n    500: '#f59e0b',\n    600: '#d97706',\n  },\n} as const\n\nexport const radius = {\n  none: '0',\n  sm:   '0.25rem',\n  md:   '0.375rem',\n  lg:   '0.5rem',\n  xl:   '0.75rem',\n  '2xl':'1rem',\n  full: '9999px',\n} as const\n\nexport const fontSize = {\n  xs:   ['0.75rem',  { lineHeight: '1rem' }],\n  sm:   ['0.875rem', { lineHeight: '1.25rem' }],\n  base: ['1rem',     { lineHeight: '1.5rem' }],\n  lg:   ['1.125rem', { lineHeight: '1.75rem' }],\n  xl:   ['1.25rem',  { lineHeight: '1.75rem' }],\n} as const","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        primary:     'bg-(--color-primary-500) text-white hover:bg-(--color-primary-600) focus-visible:ring-(--color-primary-500)',\n        secondary:   'bg-(--color-neutral-100) text-(--color-neutral-900) hover:bg-(--color-neutral-200)',\n        outline:     'border border-(--color-primary-500) text-(--color-primary-500) bg-transparent hover:bg-(--color-primary-50)',\n        ghost:       'text-(--color-neutral-700) hover:bg-(--color-neutral-100)',\n        destructive: 'bg-(--color-danger-500) text-white hover:bg-(--color-danger-600)',\n      },\n      size: {\n        sm:   'h-8 px-3 text-sm rounded-(--radius-md) gap-1.5',\n        md:   'h-10 px-4 text-sm rounded-(--radius-md) gap-2',\n        lg:   'h-12 px-6 text-base rounded-(--radius-lg) gap-2',\n        icon: 'h-10 w-10 rounded-(--radius-md)',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  isLoading?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled || isLoading}\n      {...props}\n    >\n      {isLoading && (\n        <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n          <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n        </svg>\n      )}\n      {children}\n    </button>\n  )\n)\nButton.displayName = 'Button'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const inputVariants = cva(\n  'w-full px-3 py-2 text-sm bg-white border rounded-(--radius-md) transition-colors placeholder:text-(--color-neutral-400) focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)',\n  {\n    variants: {\n      state: {\n        default: 'border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20',\n        error:   'border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20',\n      },\n      inputSize: {\n        sm: 'h-8  text-xs',\n        md: 'h-10 text-sm',\n        lg: 'h-12 text-base',\n      },\n    },\n    defaultVariants: {\n      state: 'default',\n      inputSize: 'md',\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  label?: string\n  error?: string\n  hint?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, label, error, hint, id, inputSize, ...props }, ref) => {\n    const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, '-')\n    return (\n      <div className=\"flex flex-col gap-1.5 w-full\">\n        {label && (\n          <label htmlFor={inputId} className=\"text-sm font-medium text-(--color-neutral-700)\">\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          className={cn(inputVariants({ state: error ? 'error' : 'default', inputSize }), className)}\n          {...props}\n        />\n        {hint && !error && <p className=\"text-xs text-(--color-neutral-500)\">{hint}</p>}\n        {error && <p className=\"text-xs text-(--color-danger-500)\">{error}</p>}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full font-medium',\n  {\n    variants: {\n      variant: {\n        default:     'bg-(--color-primary-500) text-white',\n        secondary:   'bg-(--color-neutral-100) text-(--color-neutral-700)',\n        outline:     'border border-(--color-primary-500) text-(--color-primary-500)',\n        success:     'bg-(--color-success-500)/10 text-(--color-success-600)',\n        warning:     'bg-(--color-warning-500)/10 text-(--color-warning-600)',\n        destructive: 'bg-(--color-danger-500)/10 text-(--color-danger-600)',\n      },\n      size: {\n        sm: 'px-2 py-0.5 text-xs',\n        md: 'px-2.5 py-0.5 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nexport const Badge = ({ className, variant, size, ...props }: BadgeProps) => (\n  <span className={cn(badgeVariants({ variant, size }), className)} {...props} />\n)\nBadge.displayName = 'Badge'"]}

package/dist/index.mjs

@@ -0,0 +1,178 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/utils/cn.ts
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/tokens/index.ts
+var colors = {
+  primary: {
+    50: "#FFF4EE",
+    100: "#FFE0CC",
+    200: "#FFBF99",
+    300: "#F08050",
+    400: "#D4602A",
+    500: "#C2440A",
+    600: "#A03808",
+    700: "#8F2F06",
+    800: "#5C1C03",
+    900: "#2E0D01"
+  },
+  neutral: {
+    50: "#f9f7f5",
+    100: "#f0ece7",
+    200: "#ddd6cc",
+    300: "#c5bab0",
+    400: "#a89b8e",
+    500: "#8a7d72",
+    600: "#6f6358",
+    700: "#564d45",
+    800: "#3c3630",
+    900: "#252019"
+  },
+  danger: {
+    500: "#ef4444",
+    600: "#dc2626"
+  },
+  success: {
+    500: "#22c55e",
+    600: "#16a34a"
+  },
+  warning: {
+    500: "#f59e0b",
+    600: "#d97706"
+  }
+};
+var radius = {
+  none: "0",
+  sm: "0.25rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  "2xl": "1rem",
+  full: "9999px"
+};
+var fontSize = {
+  xs: ["0.75rem", { lineHeight: "1rem" }],
+  sm: ["0.875rem", { lineHeight: "1.25rem" }],
+  base: ["1rem", { lineHeight: "1.5rem" }],
+  lg: ["1.125rem", { lineHeight: "1.75rem" }],
+  xl: ["1.25rem", { lineHeight: "1.75rem" }]
+};
+var buttonVariants = cva(
+  "inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary: "bg-(--color-primary-500) text-white hover:bg-(--color-primary-600) focus-visible:ring-(--color-primary-500)",
+        secondary: "bg-(--color-neutral-100) text-(--color-neutral-900) hover:bg-(--color-neutral-200)",
+        outline: "border border-(--color-primary-500) text-(--color-primary-500) bg-transparent hover:bg-(--color-primary-50)",
+        ghost: "text-(--color-neutral-700) hover:bg-(--color-neutral-100)",
+        destructive: "bg-(--color-danger-500) text-white hover:bg-(--color-danger-600)"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm rounded-(--radius-md) gap-1.5",
+        md: "h-10 px-4 text-sm rounded-(--radius-md) gap-2",
+        lg: "h-12 px-6 text-base rounded-(--radius-lg) gap-2",
+        icon: "h-10 w-10 rounded-(--radius-md)"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+var Button = React.forwardRef(
+  ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      className: cn(buttonVariants({ variant, size }), className),
+      disabled: disabled || isLoading,
+      ...props,
+      children: [
+        isLoading && /* @__PURE__ */ jsxs("svg", { className: "animate-spin h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
+          /* @__PURE__ */ jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
+          /* @__PURE__ */ jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8v8z" })
+        ] }),
+        children
+      ]
+    }
+  )
+);
+Button.displayName = "Button";
+var inputVariants = cva(
+  "w-full px-3 py-2 text-sm bg-white border rounded-(--radius-md) transition-colors placeholder:text-(--color-neutral-400) focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)",
+  {
+    variants: {
+      state: {
+        default: "border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20",
+        error: "border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20"
+      },
+      inputSize: {
+        sm: "h-8  text-xs",
+        md: "h-10 text-sm",
+        lg: "h-12 text-base"
+      }
+    },
+    defaultVariants: {
+      state: "default",
+      inputSize: "md"
+    }
+  }
+);
+var Input = React.forwardRef(
+  ({ className, label, error, hint, id, inputSize, ...props }, ref) => {
+    const inputId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
+    return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "text-sm font-medium text-(--color-neutral-700)", children: label }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: inputId,
+          className: cn(inputVariants({ state: error ? "error" : "default", inputSize }), className),
+          ...props
+        }
+      ),
+      hint && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-neutral-500)", children: hint }),
+      error && /* @__PURE__ */ jsx("p", { className: "text-xs text-(--color-danger-500)", children: error })
+    ] });
+  }
+);
+Input.displayName = "Input";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full font-medium",
+  {
+    variants: {
+      variant: {
+        default: "bg-(--color-primary-500) text-white",
+        secondary: "bg-(--color-neutral-100) text-(--color-neutral-700)",
+        outline: "border border-(--color-primary-500) text-(--color-primary-500)",
+        success: "bg-(--color-success-500)/10 text-(--color-success-600)",
+        warning: "bg-(--color-warning-500)/10 text-(--color-warning-600)",
+        destructive: "bg-(--color-danger-500)/10 text-(--color-danger-600)"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-xs",
+        md: "px-2.5 py-0.5 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var Badge = ({ className, variant, size, ...props }) => /* @__PURE__ */ jsx("span", { className: cn(badgeVariants({ variant, size }), className), ...props });
+Badge.displayName = "Badge";
+
+export { Badge, Button, Input, badgeVariants, buttonVariants, cn, colors, fontSize, inputVariants, radius };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/cn.ts","../src/tokens/index.ts","../src/components/Button/Button.tsx","../src/components/Input/Input.tsx","../src/components/Badge/Badge.tsx"],"names":["cva","React","jsxs","jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}","export const colors = {\n  primary: {\n    50:  '#FFF4EE',\n    100: '#FFE0CC',\n    200: '#FFBF99',\n    300: '#F08050',\n    400: '#D4602A',\n    500: '#C2440A',\n    600: '#A03808',\n    700: '#8F2F06',\n    800: '#5C1C03',\n    900: '#2E0D01',\n  },\n  neutral: {\n    50:  '#f9f7f5',\n    100: '#f0ece7',\n    200: '#ddd6cc',\n    300: '#c5bab0',\n    400: '#a89b8e',\n    500: '#8a7d72',\n    600: '#6f6358',\n    700: '#564d45',\n    800: '#3c3630',\n    900: '#252019',\n  },\n  danger: {\n    500: '#ef4444',\n    600: '#dc2626',\n  },\n  success: {\n    500: '#22c55e',\n    600: '#16a34a',\n  },\n  warning: {\n    500: '#f59e0b',\n    600: '#d97706',\n  },\n} as const\n\nexport const radius = {\n  none: '0',\n  sm:   '0.25rem',\n  md:   '0.375rem',\n  lg:   '0.5rem',\n  xl:   '0.75rem',\n  '2xl':'1rem',\n  full: '9999px',\n} as const\n\nexport const fontSize = {\n  xs:   ['0.75rem',  { lineHeight: '1rem' }],\n  sm:   ['0.875rem', { lineHeight: '1.25rem' }],\n  base: ['1rem',     { lineHeight: '1.5rem' }],\n  lg:   ['1.125rem', { lineHeight: '1.75rem' }],\n  xl:   ['1.25rem',  { lineHeight: '1.75rem' }],\n} as const","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const buttonVariants = cva(\n  'inline-flex items-center justify-center font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',\n  {\n    variants: {\n      variant: {\n        primary:     'bg-(--color-primary-500) text-white hover:bg-(--color-primary-600) focus-visible:ring-(--color-primary-500)',\n        secondary:   'bg-(--color-neutral-100) text-(--color-neutral-900) hover:bg-(--color-neutral-200)',\n        outline:     'border border-(--color-primary-500) text-(--color-primary-500) bg-transparent hover:bg-(--color-primary-50)',\n        ghost:       'text-(--color-neutral-700) hover:bg-(--color-neutral-100)',\n        destructive: 'bg-(--color-danger-500) text-white hover:bg-(--color-danger-600)',\n      },\n      size: {\n        sm:   'h-8 px-3 text-sm rounded-(--radius-md) gap-1.5',\n        md:   'h-10 px-4 text-sm rounded-(--radius-md) gap-2',\n        lg:   'h-12 px-6 text-base rounded-(--radius-lg) gap-2',\n        icon: 'h-10 w-10 rounded-(--radius-md)',\n      },\n    },\n    defaultVariants: {\n      variant: 'primary',\n      size: 'md',\n    },\n  }\n)\n\nexport interface ButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  isLoading?: boolean\n}\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  ({ className, variant, size, isLoading, children, disabled, ...props }, ref) => (\n    <button\n      ref={ref}\n      className={cn(buttonVariants({ variant, size }), className)}\n      disabled={disabled || isLoading}\n      {...props}\n    >\n      {isLoading && (\n        <svg className=\"animate-spin h-4 w-4\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\">\n          <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"4\" />\n          <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n        </svg>\n      )}\n      {children}\n    </button>\n  )\n)\nButton.displayName = 'Button'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const inputVariants = cva(\n  'w-full px-3 py-2 text-sm bg-white border rounded-(--radius-md) transition-colors placeholder:text-(--color-neutral-400) focus:outline-none focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-(--color-neutral-50)',\n  {\n    variants: {\n      state: {\n        default: 'border-(--color-neutral-300) text-(--color-neutral-900) focus:border-(--color-primary-500) focus:ring-(--color-primary-500)/20',\n        error:   'border-(--color-danger-500) text-(--color-neutral-900) focus:border-(--color-danger-500) focus:ring-(--color-danger-500)/20',\n      },\n      inputSize: {\n        sm: 'h-8  text-xs',\n        md: 'h-10 text-sm',\n        lg: 'h-12 text-base',\n      },\n    },\n    defaultVariants: {\n      state: 'default',\n      inputSize: 'md',\n    },\n  }\n)\n\nexport interface InputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>,\n    VariantProps<typeof inputVariants> {\n  label?: string\n  error?: string\n  hint?: string\n}\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, label, error, hint, id, inputSize, ...props }, ref) => {\n    const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, '-')\n    return (\n      <div className=\"flex flex-col gap-1.5 w-full\">\n        {label && (\n          <label htmlFor={inputId} className=\"text-sm font-medium text-(--color-neutral-700)\">\n            {label}\n          </label>\n        )}\n        <input\n          ref={ref}\n          id={inputId}\n          className={cn(inputVariants({ state: error ? 'error' : 'default', inputSize }), className)}\n          {...props}\n        />\n        {hint && !error && <p className=\"text-xs text-(--color-neutral-500)\">{hint}</p>}\n        {error && <p className=\"text-xs text-(--color-danger-500)\">{error}</p>}\n      </div>\n    )\n  }\n)\nInput.displayName = 'Input'","import React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../utils/cn'\n\nexport const badgeVariants = cva(\n  'inline-flex items-center rounded-full font-medium',\n  {\n    variants: {\n      variant: {\n        default:     'bg-(--color-primary-500) text-white',\n        secondary:   'bg-(--color-neutral-100) text-(--color-neutral-700)',\n        outline:     'border border-(--color-primary-500) text-(--color-primary-500)',\n        success:     'bg-(--color-success-500)/10 text-(--color-success-600)',\n        warning:     'bg-(--color-warning-500)/10 text-(--color-warning-600)',\n        destructive: 'bg-(--color-danger-500)/10 text-(--color-danger-600)',\n      },\n      size: {\n        sm: 'px-2 py-0.5 text-xs',\n        md: 'px-2.5 py-0.5 text-sm',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'md',\n    },\n  }\n)\n\nexport interface BadgeProps\n  extends React.HTMLAttributes<HTMLSpanElement>,\n    VariantProps<typeof badgeVariants> {}\n\nexport const Badge = ({ className, variant, size, ...props }: BadgeProps) => (\n  <span className={cn(badgeVariants({ variant, size }), className)} {...props} />\n)\nBadge.displayName = 'Badge'"]}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@ataraui/ataraui-react",
+  "version": "0.1.1",
+  "description": "AtaraUI — A calm, composable component library for React",
+  "author": "AtaraUI",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist",
+    "atara.css"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.0",
+    "@types/react-dom": "^18.3.0",
+    "react": "^18.3.0",
+    "react-dom": "^18.3.0",
+    "tailwindcss": "^4.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.4.0"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ataraui/ataraui-react.git"
+  }
+}