infinity-ui-elements 1.0.1

package/README.md

@@ -0,0 +1,311 @@
+# infinity-ui-elements
+
+A React TypeScript component library with Tailwind CSS design system for Infinity products.
+
+## Features
+
+- 🎨 **Design System**: Consistent styling with custom Tailwind CSS tokens
+- 📦 **Tree-shakable**: ESM + CJS builds with Rollup
+- 📚 **Storybook**: Isolated development and documentation
+- 🔧 **TypeScript**: Full type safety and IntelliSense support
+- ⚡ **Hot Reload**: Fast development with Vite-powered Storybook
+
+## Installation
+
+```bash
+yarn add infinity-ui-elements
+```
+
+## Usage
+
+### Basic Usage
+
+```tsx
+import { Button } from 'infinity-ui-elements';
+
+function App() {
+  return (
+    <div>
+      <Button variant="primary" onClick={() => console.log('Clicked!')}>
+        Click me
+      </Button>
+      <Button variant="secondary">
+        Secondary Button
+      </Button>
+    </div>
+  );
+}
+```
+
+### Tailwind CSS Setup
+
+To use the design system in your project, you need to extend your Tailwind configuration:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/infinity-ui-elements/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--color-primary)',
+        secondary: 'var(--color-secondary)',
+        success: 'var(--color-success)',
+        danger: 'var(--color-danger)',
+        warning: 'var(--color-warning)',
+        info: 'var(--color-info)',
+        light: 'var(--color-light)',
+        dark: 'var(--color-dark)',
+      },
+      spacing: {
+        18: 'var(--spacing-18)',
+        88: 'var(--spacing-88)',
+      },
+    },
+  },
+  plugins: [],
+};
+```
+
+**Important**: Make sure to import the design system's CSS file in your application:
+
+```tsx
+// In your main App.tsx or index.tsx
+import 'infinity-ui-elements/dist/index.css';
+```
+
+## Development
+
+### Prerequisites
+
+- Node.js 18+
+- Yarn 4.5.2 (managed via Corepack)
+
+### Setup
+
+```bash
+# Install dependencies
+yarn install
+
+# Start Storybook for development
+yarn storybook
+
+# Build the library
+yarn build
+
+# Type checking
+yarn type-check
+```
+
+### Project Structure
+
+```
+src/
+├── components/
+│   └── Button/
+│       ├── Button.tsx          # Component implementation
+│       ├── Button.stories.tsx  # Storybook stories
+│       └── index.ts           # Component exports
+├── index.css                  # Tailwind CSS + CSS variables
+└── index.ts                   # Main barrel export
+```
+
+## Components
+
+### Button
+
+A versatile button component with multiple variants.
+
+#### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `variant` | `'primary' \| 'secondary'` | `'primary'` | Button style variant |
+| `children` | `React.ReactNode` | - | Button content |
+| `onClick` | `() => void` | - | Click handler |
+| `disabled` | `boolean` | `false` | Disabled state |
+| `className` | `string` | `''` | Additional CSS classes |
+
+#### Examples
+
+```tsx
+// Primary button
+<Button variant="primary" onClick={handleClick}>
+  Save Changes
+</Button>
+
+// Secondary button
+<Button variant="secondary">
+  Cancel
+</Button>
+
+// Disabled button
+<Button disabled>
+  Processing...
+</Button>
+```
+
+## Publishing
+
+### Automated Publishing Commands
+
+The package includes automated scripts for versioning and publishing:
+
+```bash
+# For bug fixes (1.0.0 -> 1.0.1)
+yarn publish:patch
+
+# For new features (1.0.0 -> 1.1.0)
+yarn publish:minor
+
+# For breaking changes (1.0.0 -> 2.0.0)
+yarn publish:major
+```
+
+### Manual Publishing Steps
+
+If you prefer manual control:
+
+```bash
+# 1. Login to npm (if not already logged in)
+npm login
+
+# 2. Update version and build
+yarn version:patch    # or version:minor, version:major
+
+# 3. Publish to npm
+npm publish
+```
+
+### What Happens During Publishing
+
+1. **Version Update**: Updates `package.json` version
+2. **CSS Build**: Generates `dist/index.css` from Tailwind
+3. **JS Build**: Creates `dist/index.js` and `dist/index.esm.js`
+4. **Type Definitions**: Generates TypeScript declarations
+5. **Publish**: Uploads to npm registry
+
+### Pre-publish Hook
+
+The `prepublishOnly` script ensures the package is always built before publishing, so you never publish outdated code.
+
+### Internal Registry Setup
+
+If using a private registry:
+
+```bash
+# Configure npm registry
+npm config set registry https://your-internal-registry.com
+
+# Then use normal publish commands
+yarn publish:patch
+```
+
+### Consumer Setup
+
+After publishing, consumers can install and use the library:
+
+```bash
+# Install the package
+yarn add infinity-ui-elements
+
+# Import components
+import { Button } from 'infinity-ui-elements';
+
+# Import CSS (required for styling)
+import 'infinity-ui-elements/dist/index.css';
+```
+
+### Tailwind CSS Setup for Consumers
+
+Consumers need to extend their Tailwind configuration to use the CSS variables:
+
+```js
+// tailwind.config.js
+module.exports = {
+  content: [
+    './src/**/*.{js,ts,jsx,tsx}',
+    './node_modules/infinity-ui-elements/dist/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        primary: 'var(--color-primary)',
+        secondary: 'var(--color-secondary)',
+        success: 'var(--color-success)',
+        danger: 'var(--color-danger)',
+        warning: 'var(--color-warning)',
+        info: 'var(--color-info)',
+        light: 'var(--color-light)',
+        dark: 'var(--color-dark)',
+      },
+    },
+  },
+  plugins: [],
+};
+```
+
+**Important**: Make sure to import the design system's CSS file in your application:
+
+```tsx
+// In your main App.tsx or index.tsx
+import 'infinity-ui-elements/dist/index.css';
+```
+
+## Design Tokens
+
+The design system uses CSS custom properties (variables) defined in the CSS file:
+
+**Colors:**
+- `--color-primary`: #007bff (Blue)
+- `--color-secondary`: #6c757d (Gray)
+- `--color-success`: #28a745 (Green)
+- `--color-danger`: #dc3545 (Red)
+- `--color-warning`: #ffc107 (Yellow)
+- `--color-info`: #17a2b8 (Cyan)
+- `--color-light`: #f8f9fa (Light Gray)
+- `--color-dark`: #343a40 (Dark Gray)
+
+**Spacing:**
+- `--spacing-18`: 4.5rem
+- `--spacing-88`: 22rem
+
+These variables are automatically mapped to Tailwind classes (e.g., `bg-primary`, `text-secondary`) and can be customized by overriding the CSS variables in your application.
+
+## Contributing
+
+1. **Add new components**:
+   - Create component folder in `src/components/`
+   - Implement component with TypeScript
+   - Add Storybook stories
+   - Export from main index
+
+2. **Component guidelines**:
+   - Use Tailwind CSS for styling
+   - Follow TypeScript strict mode
+   - Include proper prop types
+   - Add Storybook stories with controls
+   - Export from barrel files
+
+3. **Example component structure**:
+   ```
+   src/components/Input/
+   ├── Input.tsx
+   ├── Input.stories.tsx
+   └── index.ts
+   ```
+
+## Scripts
+
+- `yarn build` - Build the library for production
+- `yarn storybook` - Start Storybook development server
+- `yarn build-storybook` - Build static Storybook
+- `yarn type-check` - Run TypeScript type checking
+- `yarn clean` - Remove build artifacts
+
+## License
+
+MIT

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

@@ -0,0 +1,11 @@
+import React from "react";
+interface ButtonProps {
+    variant?: "primary" | "secondary";
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+export declare const Button: React.FC<ButtonProps>;
+export {};
+//# 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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,UAAU,WAAW;IACnB,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwBxC,CAAC"}

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

@@ -0,0 +1,10 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./Button";
+declare const meta: Meta<typeof Button>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Disabled: Story;
+export declare const AllVariants: Story;
+//# sourceMappingURL=Button.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Button/Button.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAoB7B,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAKvB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAMtB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { Button } from "./Button";
+//# 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"}

package/dist/index.css

@@ -0,0 +1,2 @@
+/*! tailwindcss v4.1.15 | MIT License | https://tailwindcss.com */
+@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-font-weight:initial;--tw-duration:initial;--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}}}@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-blue-600:oklch(54.6% .245 262.881);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-600:oklch(44.6% .03 256.802);--color-white:#fff;--spacing:.25rem;--font-weight-semibold:600;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;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;-webkit-text-decoration: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{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.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{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}: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)){::placeholder{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{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-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]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.static{position:static}.flex{display:flex}.gap-4{gap:calc(var(--spacing)*4)}.rounded{border-radius:.25rem}.bg-primary{background-color:var(--color-primary)}.bg-secondary{background-color:var(--color-secondary)}.px-4{padding-inline:calc(var(--spacing)*4)}.py-2{padding-block:calc(var(--spacing)*2)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-secondary{color:var(--color-secondary)}.text-white{color:var(--color-white)}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}@media (hover:hover){.hover\:bg-blue-600:hover{background-color:var(--color-blue-600)}.hover\:bg-gray-600:hover{background-color:var(--color-gray-600)}}.focus\:ring-2:focus{--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\:ring-primary:focus{--tw-ring-color:var(--color-primary)}.focus\:ring-secondary:focus{--tw-ring-color:var(--color-secondary)}.focus\:ring-offset-2:focus{--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\:outline-none:focus{--tw-outline-style:none;outline-style:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-400:disabled{background-color:var(--color-gray-400)}}:root{--color-primary:#007bff;--color-secondary:#6c757d;--color-success:#28a745;--color-danger:#dc3545;--color-warning:#ffc107;--color-info:#17a2b8;--color-light:#f8f9fa;--color-dark:#343a40;--spacing-18:4.5rem;--spacing-88:22rem}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@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:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./components/Button";
+//# 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":"AACA,cAAc,qBAAqB,CAAC"}

package/dist/index.esm.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+
+const Button = ({ variant = "primary", children, onClick, disabled = false, className = "", }) => {
+    const baseClasses = "px-4 py-2 rounded font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
+    const variantClasses = {
+        primary: "bg-primary text-white hover:bg-blue-600 focus:ring-primary disabled:bg-gray-400 disabled:cursor-not-allowed",
+        secondary: "bg-secondary text-white hover:bg-gray-600 focus:ring-secondary disabled:bg-gray-400 disabled:cursor-not-allowed",
+    };
+    const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;
+    return (jsx("button", { className: combinedClasses, onClick: onClick, disabled: disabled, children: children }));
+};
+
+export { Button };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/components/Button/Button.tsx"],"sourcesContent":["import React from \"react\";\n\ninterface ButtonProps {\n  variant?: \"primary\" | \"secondary\";\n  children: React.ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = \"primary\",\n  children,\n  onClick,\n  disabled = false,\n  className = \"\",\n}) => {\n  const baseClasses =\n    \"px-4 py-2 rounded font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\";\n\n  const variantClasses = {\n    primary:\n      \"bg-primary text-white hover:bg-blue-600 focus:ring-primary disabled:bg-gray-400 disabled:cursor-not-allowed\",\n    secondary:\n      \"bg-secondary text-white hover:bg-gray-600 focus:ring-secondary disabled:bg-gray-400 disabled:cursor-not-allowed\",\n  };\n\n  const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;\n\n  return (\n    <button className={combinedClasses} onClick={onClick} disabled={disabled}>\n      {children}\n    </button>\n  );\n};\n"],"names":["_jsx"],"mappings":";;MAUa,MAAM,GAA0B,CAAC,EAC5C,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,GACf,KAAI;IACH,MAAM,WAAW,GACf,oHAAoH;AAEtH,IAAA,MAAM,cAAc,GAAG;AACrB,QAAA,OAAO,EACL,6GAA6G;AAC/G,QAAA,SAAS,EACP,iHAAiH;KACpH;AAED,IAAA,MAAM,eAAe,GAAG,CAAA,EAAG,WAAW,CAAA,CAAA,EAAI,cAAc,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE;AAEhF,IAAA,QACEA,GAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,YACrE,QAAQ,EAAA,CACF;AAEb;;;;"}

package/dist/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+
+const Button = ({ variant = "primary", children, onClick, disabled = false, className = "", }) => {
+    const baseClasses = "px-4 py-2 rounded font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
+    const variantClasses = {
+        primary: "bg-primary text-white hover:bg-blue-600 focus:ring-primary disabled:bg-gray-400 disabled:cursor-not-allowed",
+        secondary: "bg-secondary text-white hover:bg-gray-600 focus:ring-secondary disabled:bg-gray-400 disabled:cursor-not-allowed",
+    };
+    const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;
+    return (jsxRuntime.jsx("button", { className: combinedClasses, onClick: onClick, disabled: disabled, children: children }));
+};
+
+exports.Button = Button;
+//# 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 React from \"react\";\n\ninterface ButtonProps {\n  variant?: \"primary\" | \"secondary\";\n  children: React.ReactNode;\n  onClick?: () => void;\n  disabled?: boolean;\n  className?: string;\n}\n\nexport const Button: React.FC<ButtonProps> = ({\n  variant = \"primary\",\n  children,\n  onClick,\n  disabled = false,\n  className = \"\",\n}) => {\n  const baseClasses =\n    \"px-4 py-2 rounded font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2\";\n\n  const variantClasses = {\n    primary:\n      \"bg-primary text-white hover:bg-blue-600 focus:ring-primary disabled:bg-gray-400 disabled:cursor-not-allowed\",\n    secondary:\n      \"bg-secondary text-white hover:bg-gray-600 focus:ring-secondary disabled:bg-gray-400 disabled:cursor-not-allowed\",\n  };\n\n  const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;\n\n  return (\n    <button className={combinedClasses} onClick={onClick} disabled={disabled}>\n      {children}\n    </button>\n  );\n};\n"],"names":["_jsx"],"mappings":";;;;MAUa,MAAM,GAA0B,CAAC,EAC5C,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,SAAS,GAAG,EAAE,GACf,KAAI;IACH,MAAM,WAAW,GACf,oHAAoH;AAEtH,IAAA,MAAM,cAAc,GAAG;AACrB,QAAA,OAAO,EACL,6GAA6G;AAC/G,QAAA,SAAS,EACP,iHAAiH;KACpH;AAED,IAAA,MAAM,eAAe,GAAG,CAAA,EAAG,WAAW,CAAA,CAAA,EAAI,cAAc,CAAC,OAAO,CAAC,CAAA,CAAA,EAAI,SAAS,CAAA,CAAE;AAEhF,IAAA,QACEA,cAAA,CAAA,QAAA,EAAA,EAAQ,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,YACrE,QAAQ,EAAA,CACF;AAEb;;;;"}

package/package.json

@@ -0,0 +1,71 @@
+{
+  "name": "infinity-ui-elements",
+  "version": "1.0.1",
+  "description": "A React TypeScript component library with Tailwind CSS design system",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "yarn build:css && rollup -c",
+    "build:css": "tailwindcss -i src/index.css -o dist/index.css --minify",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "type-check": "tsc --noEmit",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "yarn build",
+    "version:patch": "yarn version patch && yarn build",
+    "version:minor": "yarn version minor && yarn build",
+    "version:major": "yarn version major && yarn build",
+    "publish:patch": "yarn version:patch && npm publish",
+    "publish:minor": "yarn version:minor && npm publish",
+    "publish:major": "yarn version:major && npm publish"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "tailwind",
+    "design-system",
+    "components",
+    "ui",
+    "ui-elements",
+    "infinityapp"
+  ],
+  "author": "Himanshu Barmola",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.3.1",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/react": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@storybook/test": "^8.6.14",
+    "@tailwindcss/cli": "^4.1.15",
+    "@tailwindcss/postcss": "^4.0.0",
+    "@types/react": "^18.3.26",
+    "@types/react-dom": "^18.3.7",
+    "autoprefixer": "^10.4.21",
+    "postcss": "^8.5.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.52.5",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^8.6.14",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^5.4.21"
+  },
+  "packageManager": "yarn@4.5.2"
+}

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+import { Button } from "./Button";
+
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: { type: "select" },
+      options: ["primary", "secondary"],
+    },
+    disabled: {
+      control: { type: "boolean" },
+    },
+    children: {
+      control: { type: "text" },
+    },
+  },
+  args: { onClick: fn() },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    variant: "primary",
+    children: "Primary Button",
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    variant: "secondary",
+    children: "Secondary Button",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    variant: "primary",
+    children: "Disabled Button",
+    disabled: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Button variant="primary">Primary</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="primary" disabled>
+        Disabled
+      </Button>
+    </div>
+  ),
+};

package/src/components/Button/Button.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+interface ButtonProps {
+  variant?: "primary" | "secondary";
+  children: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = "primary",
+  children,
+  onClick,
+  disabled = false,
+  className = "",
+}) => {
+  const baseClasses =
+    "px-4 py-2 rounded font-semibold transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2";
+
+  const variantClasses = {
+    primary:
+      "bg-primary text-white hover:bg-blue-600 focus:ring-primary disabled:bg-gray-400 disabled:cursor-not-allowed",
+    secondary:
+      "bg-secondary text-white hover:bg-gray-600 focus:ring-secondary disabled:bg-gray-400 disabled:cursor-not-allowed",
+  };
+
+  const combinedClasses = `${baseClasses} ${variantClasses[variant]} ${className}`;
+
+  return (
+    <button className={combinedClasses} onClick={onClick} disabled={disabled}>
+      {children}
+    </button>
+  );
+};

package/src/components/Button/index.ts

@@ -0,0 +1 @@
+export { Button } from "./Button";

package/src/index.css

@@ -0,0 +1,54 @@
+@import "tailwindcss";
+
+:root {
+  /* Design System Colors */
+  --color-primary: #007bff;
+  --color-secondary: #6c757d;
+  --color-success: #28a745;
+  --color-danger: #dc3545;
+  --color-warning: #ffc107;
+  --color-info: #17a2b8;
+  --color-light: #f8f9fa;
+  --color-dark: #343a40;
+  
+  /* Design System Spacing */
+  --spacing-18: 4.5rem;
+  --spacing-88: 22rem;
+}
+
+/* Map CSS variables to Tailwind utilities */
+@utility bg-primary { background-color: var(--color-primary); }
+@utility bg-secondary { background-color: var(--color-secondary); }
+@utility bg-success { background-color: var(--color-success); }
+@utility bg-danger { background-color: var(--color-danger); }
+@utility bg-warning { background-color: var(--color-warning); }
+@utility bg-info { background-color: var(--color-info); }
+@utility bg-light { background-color: var(--color-light); }
+@utility bg-dark { background-color: var(--color-dark); }
+
+@utility text-primary { color: var(--color-primary); }
+@utility text-secondary { color: var(--color-secondary); }
+@utility text-success { color: var(--color-success); }
+@utility text-danger { color: var(--color-danger); }
+@utility text-warning { color: var(--color-warning); }
+@utility text-info { color: var(--color-info); }
+@utility text-light { color: var(--color-light); }
+@utility text-dark { color: var(--color-dark); }
+
+@utility border-primary { border-color: var(--color-primary); }
+@utility border-secondary { border-color: var(--color-secondary); }
+@utility border-success { border-color: var(--color-success); }
+@utility border-danger { border-color: var(--color-danger); }
+@utility border-warning { border-color: var(--color-warning); }
+@utility border-info { border-color: var(--color-info); }
+@utility border-light { border-color: var(--color-light); }
+@utility border-dark { border-color: var(--color-dark); }
+
+@utility ring-primary { --tw-ring-color: var(--color-primary); }
+@utility ring-secondary { --tw-ring-color: var(--color-secondary); }
+@utility ring-success { --tw-ring-color: var(--color-success); }
+@utility ring-danger { --tw-ring-color: var(--color-danger); }
+@utility ring-warning { --tw-ring-color: var(--color-warning); }
+@utility ring-info { --tw-ring-color: var(--color-info); }
+@utility ring-light { --tw-ring-color: var(--color-light); }
+@utility ring-dark { --tw-ring-color: var(--color-dark); }

package/src/index.ts

@@ -0,0 +1,2 @@
+// Export all components
+export * from "./components/Button";