@teja-app/ui 0.0.1

package/README.md

@@ -0,0 +1,169 @@
+# @teja-app/ui
+
+Shared UI component library for Teja applications.
+
+## Installation
+
+```bash
+bun add @teja-app/ui
+```
+
+## Setup
+
+### 1. Configure Tailwind
+
+```ts
+// tailwind.config.js
+import tejaPreset from '@teja-app/ui/tailwind';
+
+export default {
+  presets: [tejaPreset],
+  content: [
+    "./src/**/*.{js,ts,jsx,tsx}",
+    "./node_modules/@teja-app/ui/dist/**/*.{js,mjs}",
+  ],
+  theme: {
+    extend: {
+      // App-specific overrides
+    },
+  },
+};
+```
+
+### 2. Use Components
+
+```tsx
+import { Button, Input, Modal } from '@teja-app/ui';
+import { cn } from '@teja-app/ui/utils';
+
+function App() {
+  return (
+    <Button variant="primary" size="md">
+      Click me
+    </Button>
+  );
+}
+```
+
+## Component Design Philosophy
+
+All components follow these principles:
+
+### 1. Modularity
+
+Each component is self-contained with its own styles, types, and logic. No hidden dependencies between components. Import individually or as a bundle.
+
+```tsx
+// Individual import
+import { Button } from '@teja-app/ui';
+
+// Bundle import
+import { Button, Input, Modal } from '@teja-app/ui';
+```
+
+### 2. Extensibility
+
+All components accept standard HTML attributes via spread props, support `className` for style overrides, and use `forwardRef` for DOM access.
+
+```tsx
+<Button
+  className="my-custom-class"
+  data-testid="submit-btn"
+  aria-label="Submit form"
+  {...otherProps}
+>
+  Submit
+</Button>
+```
+
+### 3. Loose Coupling
+
+Components use composition over inheritance. No hard-coded values - everything is configurable via props or Tailwind classes.
+
+```tsx
+// Compose with children
+<Button>
+  <Icon name="save" />
+  Save
+</Button>
+
+// Override with className
+<Button className="bg-purple-500 hover:bg-purple-600">
+  Custom Color
+</Button>
+```
+
+### 4. Composition Patterns
+
+```tsx
+// Slot pattern for complex components
+<Modal>
+  <Modal.Header>Title</Modal.Header>
+  <Modal.Body>Content</Modal.Body>
+  <Modal.Footer>
+    <Button variant="ghost">Cancel</Button>
+    <Button variant="primary">Save</Button>
+  </Modal.Footer>
+</Modal>
+
+// Polymorphic components
+<Button as="a" href="/link">
+  Link Button
+</Button>
+```
+
+## Customization
+
+### Tailwind Preset Override
+
+Each app can extend the preset and override specific tokens:
+
+```ts
+// tailwind.config.js
+import tejaPreset from '@teja-app/ui/tailwind';
+
+export default {
+  presets: [tejaPreset],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          primary: '#0ea5e9', // Override for portal
+        },
+      },
+    },
+  },
+};
+```
+
+### Design Tokens
+
+Access individual tokens for custom configurations:
+
+```ts
+import { colors, fontFamily, spacing } from '@teja-app/ui/tailwind';
+```
+
+## API Reference
+
+### Button
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'primary' \| 'secondary' \| 'ghost' \| 'danger'` | `'primary'` | Visual style |
+| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
+| `loading` | `boolean` | `false` | Show loading spinner |
+| `disabled` | `boolean` | `false` | Disable button |
+| `className` | `string` | - | Additional CSS classes |
+
+### Input
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `error` | `string` | - | Error message |
+| `label` | `string` | - | Input label |
+| `className` | `string` | - | Additional CSS classes |
+
+## Contributing
+
+See [CONTRIBUTING.md](./CONTRIBUTING.md) for guidelines on adding new components.

package/dist/components/Button/Button.d.ts

@@ -0,0 +1,13 @@
+import type { ButtonProps } from './Button.types';
+/**
+ * Button component with multiple variants, sizes, and loading state.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="md">Click me</Button>
+ * <Button variant="danger" loading>Deleting...</Button>
+ * <Button icon={<SaveIcon />} iconPosition="left">Save</Button>
+ * ```
+ */
+export declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAA6B,MAAM,gBAAgB,CAAC;AAmB7E;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,2GAwElB,CAAC"}

package/dist/components/Button/Button.types.d.ts

@@ -0,0 +1,18 @@
+import type { ButtonHTMLAttributes, ReactNode } from 'react';
+export type ButtonVariant = 'primary' | 'secondary' | 'ghost' | 'danger';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** The visual style variant */
+    variant?: ButtonVariant;
+    /** The size of the button */
+    size?: ButtonSize;
+    /** Shows a loading spinner when true */
+    loading?: boolean;
+    /** Icon element to display */
+    icon?: ReactNode;
+    /** Position of the icon */
+    iconPosition?: 'left' | 'right';
+    /** Makes the button full width */
+    fullWidth?: boolean;
+}
+//# sourceMappingURL=Button.types.d.ts.map

package/dist/components/Button/Button.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.types.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAE7D,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,OAAO,GAAG,QAAQ,CAAC;AACzE,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE5C,MAAM,WAAW,WAAY,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC1E,+BAA+B;IAC/B,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,6BAA6B;IAC7B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,wCAAwC;IACxC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,2BAA2B;IAC3B,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB"}

package/dist/components/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Component exports for @teja-app/ui
+ */
+export * from './Button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,UAAU,CAAC"}

package/dist/hooks/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=index.cjs.map

package/dist/hooks/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/hooks/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Hook exports for @teja-app/ui
+ *
+ * Usage:
+ * ```ts
+ * import { useDisclosure } from '@teja-app/ui/hooks';
+ * ```
+ */
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/hooks/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAGH,OAAO,EAAE,CAAC"}

package/dist/hooks/index.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=index.js.map

package/dist/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/index.cjs

@@ -0,0 +1,96 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const utils_index = require("./utils/index.cjs");
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const variantStyles = {
+  primary: "bg-brand-primary text-white border border-brand-primary hover:bg-brand-primary-hover focus:ring-brand-primary/20",
+  secondary: "bg-white text-neutral-900 border border-neutral-300 hover:bg-neutral-50 hover:border-neutral-400 focus:ring-neutral-500/20",
+  ghost: "text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100 focus:ring-neutral-500/20",
+  danger: "bg-error text-white border border-error hover:bg-error/90 focus:ring-error/20"
+};
+const sizeStyles = {
+  sm: "px-3 py-1.5 text-sm h-8",
+  md: "px-4 py-2 text-base h-10",
+  lg: "px-6 py-3 text-lg h-12"
+};
+const Button = react.forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading = false,
+    disabled = false,
+    icon,
+    iconPosition = "left",
+    fullWidth = false,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        ref,
+        className: utils_index.cn(
+          // Base styles
+          "inline-flex items-center justify-center gap-2 font-medium rounded-md",
+          "transition-colors duration-normal",
+          "focus:outline-none focus:ring-2 focus:ring-offset-2",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          // Variant styles
+          variantStyles[variant],
+          // Size styles
+          sizeStyles[size],
+          // Width styles
+          fullWidth && "w-full",
+          // Custom className (allows override)
+          className
+        ),
+        disabled: disabled || loading,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: "animate-spin h-5 w-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              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",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                    fill: "currentColor"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Loading..." })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          icon && iconPosition === "left" && icon,
+          children,
+          icon && iconPosition === "right" && icon
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+exports.cn = utils_index.cn;
+exports.Button = Button;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '@/utils';\nimport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary:\n    'bg-brand-primary text-white border border-brand-primary hover:bg-brand-primary-hover focus:ring-brand-primary/20',\n  secondary:\n    'bg-white text-neutral-900 border border-neutral-300 hover:bg-neutral-50 hover:border-neutral-400 focus:ring-neutral-500/20',\n  ghost:\n    'text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100 focus:ring-neutral-500/20',\n  danger:\n    'bg-error text-white border border-error hover:bg-error/90 focus:ring-error/20',\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  sm: 'px-3 py-1.5 text-sm h-8',\n  md: 'px-4 py-2 text-base h-10',\n  lg: 'px-6 py-3 text-lg h-12',\n};\n\n/**\n * Button component with multiple variants, sizes, and loading state.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"md\">Click me</Button>\n * <Button variant=\"danger\" loading>Deleting...</Button>\n * <Button icon={<SaveIcon />} iconPosition=\"left\">Save</Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'md',\n      loading = false,\n      disabled = false,\n      icon,\n      iconPosition = 'left',\n      fullWidth = false,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          // Base styles\n          'inline-flex items-center justify-center gap-2 font-medium rounded-md',\n          'transition-colors duration-normal',\n          'focus:outline-none focus:ring-2 focus:ring-offset-2',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          // Variant styles\n          variantStyles[variant],\n          // Size styles\n          sizeStyles[size],\n          // Width styles\n          fullWidth && 'w-full',\n          // Custom className (allows override)\n          className\n        )}\n        disabled={disabled || loading}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <svg\n              className=\"animate-spin h-5 w-5\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <circle\n                className=\"opacity-25\"\n                cx=\"12\"\n                cy=\"12\"\n                r=\"10\"\n                stroke=\"currentColor\"\n                strokeWidth=\"4\"\n              />\n              <path\n                className=\"opacity-75\"\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            <span>Loading...</span>\n          </>\n        ) : (\n          <>\n            {icon && iconPosition === 'left' && icon}\n            {children}\n            {icon && iconPosition === 'right' && icon}\n          </>\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":["forwardRef","jsx","cn","jsxs","Fragment"],"mappings":";;;;;AAIA,MAAM,gBAA+C;AAAA,EACnD,SACE;AAAA,EACF,WACE;AAAA,EACF,OACE;AAAA,EACF,QACE;AACJ;AAEA,MAAM,aAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,SAASA,MAAAA;AAAAA,EACpB,CACE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,IACf,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,YAAAA;AAAAA;AAAAA,UAET;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA,cAAc,OAAO;AAAA;AAAA,UAErB,WAAW,IAAI;AAAA;AAAA,UAEf,aAAa;AAAA;AAAA,UAEb;AAAA,QAAA;AAAA,QAEF,UAAU,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH,oBACCC,2BAAAA,KAAAC,WAAAA,UAAA,EACE,UAAA;AAAA,UAAAD,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,eAAY;AAAA,cAEZ,UAAA;AAAA,gBAAAF,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,IAAG;AAAA,oBACH,IAAG;AAAA,oBACH,GAAE;AAAA,oBACF,QAAO;AAAA,oBACP,aAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEdA,2BAAAA;AAAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,GAAE;AAAA,oBACF,MAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACP;AAAA,YAAA;AAAA,UAAA;AAAA,UAEFA,2BAAAA,IAAC,UAAK,UAAA,aAAA,CAAU;AAAA,QAAA,EAAA,CAClB,IAEAE,2BAAAA,KAAAC,WAAAA,UAAA,EACG,UAAA;AAAA,UAAA,QAAQ,iBAAiB,UAAU;AAAA,UACnC;AAAA,UACA,QAAQ,iBAAiB,WAAW;AAAA,QAAA,EAAA,CACvC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,OAAO,cAAc;;;"}

package/dist/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @teja-app/ui - Shared UI component library for Teja applications
+ *
+ * @example
+ * ```tsx
+ * import { Button, Input, Modal } from '@teja-app/ui';
+ * import tejaPreset from '@teja-app/ui/tailwind';
+ * import { cn } from '@teja-app/ui/utils';
+ * ```
+ */
+export * from './components';
+export { cn } from './utils';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,cAAc,cAAc,CAAC;AAG7B,OAAO,EAAE,EAAE,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1,96 @@
+import { cn } from "./utils/index.js";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef } from "react";
+const variantStyles = {
+  primary: "bg-brand-primary text-white border border-brand-primary hover:bg-brand-primary-hover focus:ring-brand-primary/20",
+  secondary: "bg-white text-neutral-900 border border-neutral-300 hover:bg-neutral-50 hover:border-neutral-400 focus:ring-neutral-500/20",
+  ghost: "text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100 focus:ring-neutral-500/20",
+  danger: "bg-error text-white border border-error hover:bg-error/90 focus:ring-error/20"
+};
+const sizeStyles = {
+  sm: "px-3 py-1.5 text-sm h-8",
+  md: "px-4 py-2 text-base h-10",
+  lg: "px-6 py-3 text-lg h-12"
+};
+const Button = forwardRef(
+  ({
+    variant = "primary",
+    size = "md",
+    loading = false,
+    disabled = false,
+    icon,
+    iconPosition = "left",
+    fullWidth = false,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        className: cn(
+          // Base styles
+          "inline-flex items-center justify-center gap-2 font-medium rounded-md",
+          "transition-colors duration-normal",
+          "focus:outline-none focus:ring-2 focus:ring-offset-2",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          // Variant styles
+          variantStyles[variant],
+          // Size styles
+          sizeStyles[size],
+          // Width styles
+          fullWidth && "w-full",
+          // Custom className (allows override)
+          className
+        ),
+        disabled: disabled || loading,
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "animate-spin h-5 w-5",
+              fill: "none",
+              viewBox: "0 0 24 24",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "opacity-25",
+                    cx: "12",
+                    cy: "12",
+                    r: "10",
+                    stroke: "currentColor",
+                    strokeWidth: "4"
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "path",
+                  {
+                    className: "opacity-75",
+                    d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z",
+                    fill: "currentColor"
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { children: "Loading..." })
+        ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon && iconPosition === "left" && icon,
+          children,
+          icon && iconPosition === "right" && icon
+        ] })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+export {
+  Button,
+  cn
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { cn } from '@/utils';\nimport type { ButtonProps, ButtonVariant, ButtonSize } from './Button.types';\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary:\n    'bg-brand-primary text-white border border-brand-primary hover:bg-brand-primary-hover focus:ring-brand-primary/20',\n  secondary:\n    'bg-white text-neutral-900 border border-neutral-300 hover:bg-neutral-50 hover:border-neutral-400 focus:ring-neutral-500/20',\n  ghost:\n    'text-neutral-700 hover:text-neutral-900 hover:bg-neutral-100 focus:ring-neutral-500/20',\n  danger:\n    'bg-error text-white border border-error hover:bg-error/90 focus:ring-error/20',\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  sm: 'px-3 py-1.5 text-sm h-8',\n  md: 'px-4 py-2 text-base h-10',\n  lg: 'px-6 py-3 text-lg h-12',\n};\n\n/**\n * Button component with multiple variants, sizes, and loading state.\n *\n * @example\n * ```tsx\n * <Button variant=\"primary\" size=\"md\">Click me</Button>\n * <Button variant=\"danger\" loading>Deleting...</Button>\n * <Button icon={<SaveIcon />} iconPosition=\"left\">Save</Button>\n * ```\n */\nexport const Button = forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      variant = 'primary',\n      size = 'md',\n      loading = false,\n      disabled = false,\n      icon,\n      iconPosition = 'left',\n      fullWidth = false,\n      children,\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <button\n        ref={ref}\n        className={cn(\n          // Base styles\n          'inline-flex items-center justify-center gap-2 font-medium rounded-md',\n          'transition-colors duration-normal',\n          'focus:outline-none focus:ring-2 focus:ring-offset-2',\n          'disabled:opacity-50 disabled:cursor-not-allowed',\n          // Variant styles\n          variantStyles[variant],\n          // Size styles\n          sizeStyles[size],\n          // Width styles\n          fullWidth && 'w-full',\n          // Custom className (allows override)\n          className\n        )}\n        disabled={disabled || loading}\n        {...props}\n      >\n        {loading ? (\n          <>\n            <svg\n              className=\"animate-spin h-5 w-5\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n              aria-hidden=\"true\"\n            >\n              <circle\n                className=\"opacity-25\"\n                cx=\"12\"\n                cy=\"12\"\n                r=\"10\"\n                stroke=\"currentColor\"\n                strokeWidth=\"4\"\n              />\n              <path\n                className=\"opacity-75\"\n                d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"\n                fill=\"currentColor\"\n              />\n            </svg>\n            <span>Loading...</span>\n          </>\n        ) : (\n          <>\n            {icon && iconPosition === 'left' && icon}\n            {children}\n            {icon && iconPosition === 'right' && icon}\n          </>\n        )}\n      </button>\n    );\n  }\n);\n\nButton.displayName = 'Button';\n"],"names":[],"mappings":";;;AAIA,MAAM,gBAA+C;AAAA,EACnD,SACE;AAAA,EACF,WACE;AAAA,EACF,OACE;AAAA,EACF,QACE;AACJ;AAEA,MAAM,aAAyC;AAAA,EAC7C,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAYO,MAAM,SAAS;AAAA,EACpB,CACE;AAAA,IACE,UAAU;AAAA,IACV,OAAO;AAAA,IACP,UAAU;AAAA,IACV,WAAW;AAAA,IACX;AAAA,IACA,eAAe;AAAA,IACf,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA;AAAA,UAET;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA;AAAA,UAEA,cAAc,OAAO;AAAA;AAAA,UAErB,WAAW,IAAI;AAAA;AAAA,UAEf,aAAa;AAAA;AAAA,UAEb;AAAA,QAAA;AAAA,QAEF,UAAU,YAAY;AAAA,QACrB,GAAG;AAAA,QAEH,oBACC,qBAAA,UAAA,EACE,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,OAAM;AAAA,cACN,eAAY;AAAA,cAEZ,UAAA;AAAA,gBAAA;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,IAAG;AAAA,oBACH,IAAG;AAAA,oBACH,GAAE;AAAA,oBACF,QAAO;AAAA,oBACP,aAAY;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAEd;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAU;AAAA,oBACV,GAAE;AAAA,oBACF,MAAK;AAAA,kBAAA;AAAA,gBAAA;AAAA,cACP;AAAA,YAAA;AAAA,UAAA;AAAA,UAEF,oBAAC,UAAK,UAAA,aAAA,CAAU;AAAA,QAAA,EAAA,CAClB,IAEA,qBAAA,UAAA,EACG,UAAA;AAAA,UAAA,QAAQ,iBAAiB,UAAU;AAAA,UACnC;AAAA,UACA,QAAQ,iBAAiB,WAAW;AAAA,QAAA,EAAA,CACvC;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,OAAO,cAAc;"}

package/dist/tailwind/colors.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Design token colors for the Teja UI component library.
+ * Based on /business/ux/Patterns/Design-Tokens.md
+ */
+export declare const colors: {
+    readonly brand: {
+        readonly primary: "#2563EB";
+        readonly 'primary-hover': "#1D4ED8";
+        readonly secondary: "#64748B";
+    };
+    readonly success: {
+        readonly DEFAULT: "#16A34A";
+        readonly light: "#DCFCE7";
+    };
+    readonly warning: {
+        readonly DEFAULT: "#CA8A04";
+        readonly light: "#FEF9C3";
+    };
+    readonly error: {
+        readonly DEFAULT: "#DC2626";
+        readonly light: "#FEE2E2";
+    };
+    readonly info: {
+        readonly DEFAULT: "#2563EB";
+        readonly light: "#DBEAFE";
+    };
+    readonly neutral: {
+        readonly 50: "#F8FAFC";
+        readonly 100: "#F1F5F9";
+        readonly 200: "#E2E8F0";
+        readonly 300: "#CBD5E1";
+        readonly 500: "#64748B";
+        readonly 700: "#334155";
+        readonly 900: "#0F172A";
+    };
+    readonly status: {
+        readonly scheduled: "#3B82F6";
+        readonly completed: "#16A34A";
+        readonly cancelled: "#6B7280";
+        readonly 'no-show': "#EF4444";
+        readonly draft: "#F59E0B";
+        readonly signed: "#16A34A";
+    };
+};
+export type Colors = typeof colors;
+//# sourceMappingURL=colors.d.ts.map

package/dist/tailwind/colors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../../src/tailwind/colors.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8CT,CAAC;AAEX,MAAM,MAAM,MAAM,GAAG,OAAO,MAAM,CAAC"}