@farm-junction/design-library 0.1.0

package/README.md

@@ -0,0 +1,101 @@
+# @farm-junction/design-library
+
+Farm Junction React design system — design tokens, components, Storybook docs, and a Tailwind 4 preset for consuming apps.
+
+## Stack
+
+- React 19 + TypeScript 5
+- Tailwind CSS 4 (`@theme` tokens)
+- Storybook 8 (Vite)
+- Vite library build (ESM + types + CSS)
+
+## Scripts
+
+| Command | Description |
+|---------|-------------|
+| `npm run dev` | Start Storybook on port 6006 |
+| `npm run build` | Typecheck and build `dist/` |
+| `npm run build-storybook` | Static Storybook build |
+| `npm run lint` | ESLint |
+
+## Development
+
+```bash
+npm install
+npm run dev
+```
+
+Open [http://localhost:6006](http://localhost:6006) to browse components and token swatches.
+
+## Package exports
+
+| Import path | Description |
+|-------------|-------------|
+| `@farm-junction/design-library` | React components, `cn`, `tokens` |
+| `@farm-junction/design-library/styles.css` | Compiled component styles |
+| `@farm-junction/design-library/tailwind-preset` | Tailwind 4 theme + base for app integration |
+
+## Usage in a Next.js app
+
+### 1. Install
+
+Local development (from this repo):
+
+```bash
+npm install ../design-library
+```
+
+Or publish to your registry and install as usual.
+
+### 2. Import compiled styles
+
+In your root layout (e.g. `app/layout.tsx`):
+
+```tsx
+import "@farm-junction/design-library/styles.css";
+```
+
+### 3. Extend Tailwind 4 in your app CSS
+
+In `app/globals.css` (or your main CSS entry):
+
+```css
+@import "tailwindcss";
+@import "@farm-junction/design-library/tailwind-preset";
+@source "../node_modules/@farm-junction/design-library/dist";
+```
+
+Adjust the `@source` path if your app lives in a monorepo or uses a different `node_modules` layout.
+
+### 4. Use components
+
+```tsx
+import { Button } from "@farm-junction/design-library";
+
+export default function Page() {
+  return <Button variant="primary">Get started</Button>;
+}
+```
+
+## Project structure
+
+```
+src/
+├── tokens/          # @theme CSS + TS token mirror
+├── styles/          # Tailwind entry (dev + build)
+├── components/      # React components + stories
+├── lib/utils.ts     # cn() helper
+├── tailwind-preset.css
+└── index.ts         # Public API
+```
+
+## Adding a component
+
+1. Create `src/components/MyComponent/MyComponent.tsx`
+2. Add `MyComponent.stories.tsx` for Storybook
+3. Export from `src/components/index.ts` and `src/index.ts`
+4. Use Tailwind utilities that reference `@theme` tokens (e.g. `bg-primary`)
+
+## License
+
+Private — Farm Junction internal use.

package/dist/index.d.ts

@@ -0,0 +1,51 @@
+import { ButtonHTMLAttributes } from 'react';
+import { ClassValue } from 'clsx';
+import { ForwardRefExoticComponent } from 'react';
+import { RefAttributes } from 'react';
+
+export declare const Button: ForwardRefExoticComponent<ButtonProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+}
+
+export declare type ButtonSize = "sm" | "md" | "lg";
+
+export declare type ButtonVariant = "primary" | "secondary" | "ghost";
+
+export declare function cn(...inputs: ClassValue[]): string;
+
+export declare type Tokens = typeof tokens;
+
+export declare const tokens: {
+    readonly colors: {
+        readonly brand: {
+            readonly 50: "#eff6ff";
+            readonly 100: "#dbeafe";
+            readonly 500: "#2563eb";
+            readonly 600: "#1d4ed8";
+            readonly 700: "#1e40af";
+        };
+        readonly primary: "#1d4ed8";
+        readonly primaryHover: "#1e40af";
+        readonly onPrimary: "#ffffff";
+        readonly secondary: "#f1f5f9";
+        readonly onSecondary: "#0f172a";
+        readonly surface: "#ffffff";
+        readonly onSurface: "#0f172a";
+        readonly danger: "#dc2626";
+        readonly onDanger: "#ffffff";
+        readonly border: "#e2e8f0";
+    };
+    readonly radius: {
+        readonly sm: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+    };
+    readonly fontFamily: {
+        readonly sans: "\"Mulish\", ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"";
+    };
+};
+
+export { }