@adam-milo/ui 1.0.5

package/LICENSE

@@ -0,0 +1,23 @@
+MIT License
+
+Copyright (c) 2025 Adam Milo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+

package/README.md

@@ -0,0 +1,461 @@
+# @adam-milo/ui
+
+> A modern, accessible, and fully-typed React component library built with TypeScript and TailwindCSS.
+
+[![npm version](https://badge.fury.io/js/%40adam-milo%2Fui.svg)](https://www.npmjs.com/package/@adam-milo/ui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+---
+
+## 🎨 Features
+
+- **React 18** with TypeScript for type-safe development
+- **Modern CSS** with native nesting and logical properties for RTL support
+- **TailwindCSS** integration with comprehensive design tokens
+- **Radix UI** primitives for accessible components
+- **Fully Typed** with comprehensive TypeScript definitions
+- **Tested** with Vitest and React Testing Library
+- **Documented** with Storybook
+- **Accessible** - WCAG compliant components
+- **RTL Ready** - Built-in right-to-left language support
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @adam-milo/ui
+# or
+yarn add @adam-milo/ui
+# or
+pnpm add @adam-milo/ui
+```
+
+### Peer Dependencies
+
+Make sure you have React 18+ installed:
+
+```bash
+npm install react react-dom
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Import Styles
+
+Import the styles in your app's entry point:
+
+```tsx
+// App.tsx or index.tsx
+import '@adam-milo/ui/styles.css';
+```
+
+### 2. Use Components
+
+```tsx
+import { Button, Input, Card } from '@adam-milo/ui';
+
+function App() {
+  return (
+    <Card>
+      <h2>Welcome</h2>
+      <Input label="Name" placeholder="Enter your name" />
+      <Button variant="primary-workspace">Submit</Button>
+    </Card>
+  );
+}
+```
+
+### 3. With TypeScript
+
+Full TypeScript support out of the box:
+
+```tsx
+import { Button, type ButtonProps } from '@adam-milo/ui';
+
+const MyButton: React.FC<{ customProp: string }> = ({ customProp }) => {
+  const buttonProps: ButtonProps = {
+    variant: 'primary-workspace',
+    fullWidth: true,
+    onClick: () => console.log(customProp),
+  };
+
+  return <Button {...buttonProps}>Click me</Button>;
+};
+```
+
+---
+
+## 📚 Components
+
+### Core Components
+
+#### Button
+
+Multiple variants with full accessibility support:
+
+```tsx
+import { Button } from '@adam-milo/ui';
+
+// Variants
+<Button variant="primary-workspace">Primary Workspace</Button>
+<Button variant="primary-builder">Primary Builder</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="ghost">Ghost</Button>
+
+// With icons
+<Button
+  variant="primary-workspace"
+  iconLeft={<Icon name="plus" />}
+>
+  Add Item
+</Button>
+
+// Full width
+<Button variant="primary-workspace" fullWidth>
+  Submit
+</Button>
+
+// Disabled state
+<Button variant="primary-workspace" disabled>
+  Loading...
+</Button>
+```
+
+#### Icon
+
+SVG icon wrapper component:
+
+```tsx
+import { Icon } from '@adam-milo/ui';
+
+<Icon name="check" size="md" />;
+```
+
+### Form Components
+
+#### Input
+
+Text input with label and validation:
+
+```tsx
+import { Input } from '@adam-milo/ui';
+
+<Input label="Email" type="email" placeholder="you@example.com" required />;
+```
+
+### Layout Components
+
+#### Stack
+
+Flexbox-based spacing utility:
+
+```tsx
+import { Stack } from '@adam-milo/ui';
+
+<Stack direction="vertical" spacing={4}>
+  <Button>Button 1</Button>
+  <Button>Button 2</Button>
+</Stack>;
+```
+
+#### Card
+
+Content container with elevation:
+
+```tsx
+import { Card } from '@adam-milo/ui';
+
+<Card>
+  <h3>Card Title</h3>
+  <p>Card content goes here</p>
+</Card>;
+```
+
+### Data Display
+
+#### DataTable
+
+Semantic table component:
+
+```tsx
+import { DataTable } from '@adam-milo/ui';
+
+<DataTable headers={['Name', 'Email', 'Status']} rows={data} />;
+```
+
+### Feedback Components
+
+#### Alert
+
+Contextual feedback messages:
+
+```tsx
+import { Alert } from '@adam-milo/ui';
+
+<Alert variant="success">Operation completed!</Alert>
+<Alert variant="error">Something went wrong</Alert>
+<Alert variant="warning">Please review your input</Alert>
+<Alert variant="info">New updates available</Alert>
+```
+
+### Navigation Components
+
+#### Tabs
+
+Accessible tabbed interface:
+
+```tsx
+import { Tabs } from '@adam-milo/ui';
+
+<Tabs defaultValue="tab1">
+  <Tabs.List>
+    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
+    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
+  </Tabs.List>
+  <Tabs.Content value="tab1">Content 1</Tabs.Content>
+  <Tabs.Content value="tab2">Content 2</Tabs.Content>
+</Tabs>;
+```
+
+### Overlay Components
+
+#### Dialog
+
+Accessible modal dialog:
+
+```tsx
+import { Dialog } from '@adam-milo/ui';
+
+<Dialog>
+  <Dialog.Trigger asChild>
+    <Button>Open Dialog</Button>
+  </Dialog.Trigger>
+  <Dialog.Content>
+    <Dialog.Title>Dialog Title</Dialog.Title>
+    <Dialog.Description>Dialog content goes here</Dialog.Description>
+  </Dialog.Content>
+</Dialog>;
+```
+
+---
+
+## 🎨 Design Tokens
+
+### CSS Variables
+
+All design tokens are available as CSS custom properties:
+
+```css
+/* Colors */
+--color-text: #191a39;
+--color-action: #272643;
+--color-popup: #ed6726;
+--color-card: #ffffff;
+
+/* Spacing */
+--spacing-1: 0.25rem; /* 4px */
+--spacing-2: 0.5rem; /* 8px */
+--spacing-4: 1rem; /* 16px */
+
+/* Typography */
+--font-size-8: 1rem; /* 16px */
+--font-size-6: 1.25rem; /* 20px */
+
+/* Border Radius */
+--radius-default: 0.25rem; /* 4px */
+--radius-lg: 0.75rem; /* 12px */
+```
+
+### Using Design Tokens
+
+```tsx
+// In your components
+const CustomComponent = styled.div`
+  color: var(--color-text);
+  padding: var(--spacing-4);
+  border-radius: var(--radius-default);
+`;
+```
+
+---
+
+## ♿ Accessibility
+
+All components follow WCAG 2.1 Level AA guidelines:
+
+- ✅ Semantic HTML structure
+- ✅ ARIA attributes where needed
+- ✅ Keyboard navigation support
+- ✅ Focus management
+- ✅ Screen reader friendly
+- ✅ Color contrast compliance
+- ✅ Focus-visible indicators
+
+---
+
+## 🌍 RTL Support
+
+Components automatically support right-to-left languages:
+
+```tsx
+// Set direction on your root element
+<html dir="rtl">
+  <body>
+    <App />
+  </body>
+</html>
+```
+
+All components use logical CSS properties that automatically adapt to text direction.
+
+---
+
+## 🧪 Testing
+
+### Unit Tests
+
+Run tests with Vitest:
+
+```bash
+npm run test
+```
+
+Watch mode:
+
+```bash
+npm run test:watch
+```
+
+### E2E Tests
+
+Cypress tests are available in the main repository.
+
+---
+
+## 📖 Documentation
+
+### Storybook
+
+View interactive component documentation:
+
+```bash
+# Clone the repository
+git clone https://github.com/adam-milo/adam-milo-design-system.git
+cd adam-milo-design-system
+
+# Install dependencies
+npm install
+
+# Run Storybook
+npm run storybook
+```
+
+Visit `http://localhost:6006` to explore all components.
+
+---
+
+## 🛠️ Development
+
+### Project Structure
+
+```
+packages/ui/
+├── src/
+│   ├── components/
+│   │   ├── core/           # Button, Icon
+│   │   ├── forms/          # Input, Checkbox, Select
+│   │   ├── navigation/     # Tabs, Breadcrumb
+│   │   ├── feedback/       # Alert, Toast
+│   │   ├── data-display/   # Card, DataTable
+│   │   ├── overlays/       # Dialog, Modal
+│   │   └── layout/         # Stack, Grid
+│   ├── lib/                # Utilities
+│   ├── index.ts            # Main exports
+│   └── styles.css          # Global styles
+├── dist/                   # Build output
+├── package.json
+├── vite.config.ts
+└── README.md
+```
+
+### Component Naming
+
+Each component follows this structure:
+
+```
+ComponentName/
+├── ComponentName.component.tsx  # Implementation
+├── ComponentName.css           # Styles (if needed)
+├── ComponentName.stories.tsx   # Storybook stories
+└── ComponentName.spec.tsx      # Tests
+```
+
+---
+
+## 📋 Requirements
+
+- **Node.js**: >= 18.0.0
+- **npm**: >= 9.0.0
+- **React**: >= 18.2.0
+- **TypeScript**: >= 5.0.0
+
+---
+
+## 🤝 Contributing
+
+We welcome contributions! Please see [CONTRIBUTING.md](../../CONTRIBUTING.md) for guidelines.
+
+### Quick Contribution Guide
+
+1. Fork the repository
+2. Create a feature branch: `git checkout -b feature/my-feature`
+3. Make your changes
+4. Run tests: `npm test`
+5. Commit: `git commit -m "feat: add new feature"`
+6. Push: `git push origin feature/my-feature`
+7. Open a Pull Request
+
+---
+
+## 📄 License
+
+MIT © Adam Milo
+
+See [LICENSE](./LICENSE) for details.
+
+---
+
+## 🔗 Links
+
+- [GitHub Repository](https://github.com/adam-milo/adam-milo-design-system)
+- [npm Package](https://www.npmjs.com/package/@adam-milo/ui)
+- [Issue Tracker](https://github.com/adam-milo/adam-milo-design-system/issues)
+- [Changelog](https://github.com/adam-milo/adam-milo-design-system/releases)
+
+---
+
+## 💬 Support
+
+- 📧 Email: support@adam-milo.com
+- 🐛 Issues: [GitHub Issues](https://github.com/adam-milo/adam-milo-design-system/issues)
+- 💬 Discussions: [GitHub Discussions](https://github.com/adam-milo/adam-milo-design-system/discussions)
+
+---
+
+## 🙏 Acknowledgments
+
+Built with:
+
+- [React](https://react.dev/)
+- [TypeScript](https://www.typescriptlang.org/)
+- [TailwindCSS](https://tailwindcss.com/)
+- [Radix UI](https://www.radix-ui.com/)
+- [Vite](https://vitejs.dev/)
+- [Storybook](https://storybook.js.org/)
+
+---
+
+Made with ❤️ by the Adam Milo team

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./index2.cjs"),i=require("./index3.cjs"),t=require("./index4.cjs"),l=require("./index5.cjs"),o=require("./index6.cjs"),c=require("./index7.cjs"),e=require("./index8.cjs"),g=require("./index9.cjs"),a=require("./index10.cjs"),r=require("@adam-milo/icons");exports.Button=n.Button;exports.Input=i.Input;exports.Tabs=t.Tabs;exports.TabsContent=t.TabsContent;exports.TabsList=t.TabsList;exports.TabsTrigger=t.TabsTrigger;exports.Alert=l.Alert;exports.Card=o.Card;exports.CardContent=o.CardContent;exports.CardDescription=o.CardDescription;exports.CardFooter=o.CardFooter;exports.CardHeader=o.CardHeader;exports.CardTitle=o.CardTitle;exports.DataTable=c.DataTable;exports.Dialog=e.Dialog;exports.DialogClose=e.DialogClose;exports.DialogContent=e.DialogContent;exports.DialogDescription=e.DialogDescription;exports.DialogFooter=e.DialogFooter;exports.DialogHeader=e.DialogHeader;exports.DialogOverlay=e.DialogOverlay;exports.DialogPortal=e.DialogPortal;exports.DialogTitle=e.DialogTitle;exports.DialogTrigger=e.DialogTrigger;exports.Stack=g.Stack;exports.cn=a.cn;exports.generateId=a.generateId;Object.defineProperty(exports,"Icon",{enumerable:!0,get:()=>r.Icon});Object.defineProperty(exports,"availableIcons",{enumerable:!0,get:()=>r.availableIcons});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export * from './src/index'

package/dist/index.js

@@ -0,0 +1,41 @@
+import { Button as e } from "./index2.js";
+import { Input as t } from "./index3.js";
+import { Tabs as l, TabsContent as g, TabsList as n, TabsTrigger as p } from "./index4.js";
+import { Alert as f } from "./index5.js";
+import { Card as x, CardContent as C, CardDescription as d, CardFooter as s, CardHeader as T, CardTitle as b } from "./index6.js";
+import { DataTable as I } from "./index7.js";
+import { Dialog as v, DialogClose as F, DialogContent as H, DialogDescription as k, DialogFooter as y, DialogHeader as A, DialogOverlay as B, DialogPortal as L, DialogTitle as O, DialogTrigger as P } from "./index8.js";
+import { Stack as h } from "./index9.js";
+import { cn as q, generateId as w } from "./index10.js";
+import { Icon as E, availableIcons as G } from "@adam-milo/icons";
+export {
+  f as Alert,
+  e as Button,
+  x as Card,
+  C as CardContent,
+  d as CardDescription,
+  s as CardFooter,
+  T as CardHeader,
+  b as CardTitle,
+  I as DataTable,
+  v as Dialog,
+  F as DialogClose,
+  H as DialogContent,
+  k as DialogDescription,
+  y as DialogFooter,
+  A as DialogHeader,
+  B as DialogOverlay,
+  L as DialogPortal,
+  O as DialogTitle,
+  P as DialogTrigger,
+  E as Icon,
+  t as Input,
+  h as Stack,
+  l as Tabs,
+  g as TabsContent,
+  n as TabsList,
+  p as TabsTrigger,
+  G as availableIcons,
+  q as cn,
+  w as generateId
+};

package/dist/index10.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function t(...e){return e.filter(Boolean).join(" ")}let n=0;function r(e="id"){return n+=1,`${e}-${n}`}exports.cn=t;exports.generateId=r;

package/dist/index10.js

@@ -0,0 +1,11 @@
+function t(...n) {
+  return n.filter(Boolean).join(" ");
+}
+let e = 0;
+function r(n = "id") {
+  return e += 1, `${n}-${e}`;
+}
+export {
+  t as cn,
+  r as generateId
+};

package/dist/index2.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),m=require("react"),y=require("./index10.cjs");;/* empty css          */const n=m.forwardRef(({variant:t="primary-workspace",fullWidth:r=!1,icon:e,className:a,children:c,disabled:o,"data-testid":u,"data-cy":d,...i},l)=>{const b=y.cn("btn",`btn--${t}`,r&&"btn--full-width",a);return s.jsxs("button",{ref:l,disabled:o,className:b,"data-testid":u||`button-${t}`,"data-cy":d||`button-${t}`,...i,children:[e&&s.jsx("span",{className:"btn__icon",children:e}),c]})});n.displayName="Button";exports.Button=n;

package/dist/index2.js

@@ -0,0 +1,38 @@
+import { jsxs as l, jsx as p } from "react/jsx-runtime";
+import { forwardRef as b } from "react";
+import { cn as f } from "./index10.js";
+/* empty css        */
+const u = b(
+  ({
+    variant: t = "primary-workspace",
+    fullWidth: o = !1,
+    icon: s,
+    className: a,
+    children: r,
+    disabled: n,
+    "data-testid": e,
+    "data-cy": c,
+    ...d
+  }, m) => {
+    const i = f("btn", `btn--${t}`, o && "btn--full-width", a);
+    return /* @__PURE__ */ l(
+      "button",
+      {
+        ref: m,
+        disabled: n,
+        className: i,
+        "data-testid": e || `button-${t}`,
+        "data-cy": c || `button-${t}`,
+        ...d,
+        children: [
+          s && /* @__PURE__ */ p("span", { className: "btn__icon", children: s }),
+          r
+        ]
+      }
+    );
+  }
+);
+u.displayName = "Button";
+export {
+  u as Button
+};

package/dist/index3.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),p=require("react"),u=require("./index10.cjs");;/* empty css          */const o=p.forwardRef(({label:s,error:a,helperText:r,fullWidth:n=!1,className:y,id:$,"data-cy":h,"data-testid":m,...f},I)=>{const b=p.useId(),d=$||b,l=`${d}-error`,c=`${d}-helper`,t=h||"input",e=m||"input";return i.jsxs("div",{className:u.cn("input-wrapper",n&&"input-wrapper--full-width"),"data-cy":`${t}-wrapper`,"data-testid":`${e}-wrapper`,children:[s&&i.jsx("label",{htmlFor:d,className:"input__label","data-cy":`${t}-label`,"data-testid":`${e}-label`,children:s}),i.jsx("input",{ref:I,id:d,className:u.cn("input",a&&"input--error",n&&"input--full-width",y),"aria-invalid":a?"true":"false","aria-describedby":a?l:r?c:void 0,"data-cy":t,"data-testid":e,...f}),a&&i.jsx("span",{id:l,className:"input__error",role:"alert","data-cy":`${t}-error`,"data-testid":`${e}-error`,children:a}),r&&!a&&i.jsx("span",{id:c,className:"input__helper","data-cy":`${t}-helper`,"data-testid":`${e}-helper`,children:r})]})});o.displayName="Input";exports.Input=o;

package/dist/index3.js

@@ -0,0 +1,82 @@
+import { jsxs as w, jsx as i } from "react/jsx-runtime";
+import { forwardRef as I, useId as N } from "react";
+import { cn as c } from "./index10.js";
+/* empty css        */
+const _ = I(
+  ({
+    label: s,
+    error: a,
+    helperText: r,
+    fullWidth: n = !1,
+    className: o,
+    id: u,
+    "data-cy": m,
+    "data-testid": f,
+    ...$
+  }, h) => {
+    const y = N(), d = u || y, p = `${d}-error`, l = `${d}-helper`, t = m || "input", e = f || "input";
+    return /* @__PURE__ */ w(
+      "div",
+      {
+        className: c("input-wrapper", n && "input-wrapper--full-width"),
+        "data-cy": `${t}-wrapper`,
+        "data-testid": `${e}-wrapper`,
+        children: [
+          s && /* @__PURE__ */ i(
+            "label",
+            {
+              htmlFor: d,
+              className: "input__label",
+              "data-cy": `${t}-label`,
+              "data-testid": `${e}-label`,
+              children: s
+            }
+          ),
+          /* @__PURE__ */ i(
+            "input",
+            {
+              ref: h,
+              id: d,
+              className: c(
+                "input",
+                a && "input--error",
+                n && "input--full-width",
+                o
+              ),
+              "aria-invalid": a ? "true" : "false",
+              "aria-describedby": a ? p : r ? l : void 0,
+              "data-cy": t,
+              "data-testid": e,
+              ...$
+            }
+          ),
+          a && /* @__PURE__ */ i(
+            "span",
+            {
+              id: p,
+              className: "input__error",
+              role: "alert",
+              "data-cy": `${t}-error`,
+              "data-testid": `${e}-error`,
+              children: a
+            }
+          ),
+          r && !a && /* @__PURE__ */ i(
+            "span",
+            {
+              id: l,
+              className: "input__helper",
+              "data-cy": `${t}-helper`,
+              "data-testid": `${e}-helper`,
+              children: r
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+_.displayName = "Input";
+export {
+  _ as Input
+};

package/dist/index4.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),b=require("react"),T=require("@radix-ui/react-tabs"),g=require("./index10.cjs");;/* empty css          */function m(a){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(a){for(const e in a)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(a,e);Object.defineProperty(t,e,s.get?s:{enumerable:!0,get:()=>a[e]})}}return t.default=a,Object.freeze(t)}const n=m(T),u=n.Root,f=b.forwardRef(({className:a,"data-cy":t,"data-testid":e,...s},r)=>{const i=t||"tabs-list",c=e||"tabs-list";return d.jsx(n.List,{ref:r,className:g.cn("tabs-list",a),"data-cy":i,"data-testid":c,...s})});f.displayName=n.List.displayName;const l=b.forwardRef(({className:a,value:t,"data-cy":e,"data-testid":s,...r},i)=>{const c=e||(t?`tabs-trigger-${t}`:"tabs-trigger"),o=s||(t?`tabs-trigger-${t}`:"tabs-trigger");return d.jsx(n.Trigger,{ref:i,className:g.cn("tabs-trigger",a),value:t,"data-cy":c,"data-testid":o,...r})});l.displayName=n.Trigger.displayName;const y=b.forwardRef(({className:a,value:t,"data-cy":e,"data-testid":s,...r},i)=>{const c=e||(t?`tabs-content-${t}`:"tabs-content"),o=s||(t?`tabs-content-${t}`:"tabs-content");return d.jsx(n.Content,{ref:i,className:g.cn("tabs-content",a),value:t,"data-cy":c,"data-testid":o,...r})});y.displayName=n.Content.displayName;exports.Tabs=u;exports.TabsContent=y;exports.TabsList=f;exports.TabsTrigger=l;