@inkubio/ui 0.0.0-alpha.8

package/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@inkubio/ui",
+  "version": "0.0.0-alpha.8",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/inkubio/nettisivut.git",
+    "directory": "packages/ui"
+  },
+  "files": [
+    "dist/**",
+    "lib/global.css"
+  ],
+  "type": "commonjs",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.cts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*"
+      ]
+    }
+  },
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./global.css": "./lib/global.css",
+    "./preset": {
+      "import": {
+        "types": "./dist/preset.d.mts",
+        "default": "./dist/preset.mjs"
+      },
+      "require": {
+        "types": "./dist/preset.d.cts",
+        "default": "./dist/preset.cjs"
+      }
+    },
+    "./*": {
+      "types": "./dist/*",
+      "import": "./dist/*",
+      "require": "./dist/*"
+    }
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@phosphor-icons/react": "^2.1.10",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.577.0",
+    "tailwind-merge": "^3.6.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tsdown": "^0.21.7",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/typography": "^0.5.20",
+    "postcss": "^8",
+    "react": "^19",
+    "react-dom": "^19",
+    "tailwindcss": "^4",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "scripts": {
+    "build": "tsdown lib/index.tsx lib/preset.ts --format esm,cjs --dts",
+    "clean": "rm -rf dist",
+    "dev": "tsdown lib/index.tsx --format esm,cjs --watch --dts --no-clean",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/readme.md

@@ -0,0 +1,136 @@
+# `@inkubio/ui`
+
+Reusable React UI components built with Tailwind CSS and shadcn/ui. Designed to drop into any React + Tailwind project.
+
+## Install
+
+```sh
+# with pnpm
+pnpm add @inkubio/ui react react-dom
+
+# Tailwind + PostCSS peers (dev)
+pnpm add -D tailwindcss postcss @tailwindcss/postcss tailwindcss-animate @tailwindcss/typography
+```
+
+Required peer dependencies:
+
+- `react`, `react-dom`
+- `tailwindcss`, `postcss`, `@tailwindcss/postcss`
+- `tailwindcss-animate`, `@tailwindcss/typography`
+
+## Tailwind setup
+
+Use the included preset for automatic configuration, or manually configure if you need more control.
+
+### Option 1: Using the preset (recommended)
+
+```js
+// tailwind.config.js
+import { preset } from "@inkubio/ui/preset";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  presets: [preset],
+  content: ["./src/**/*.{ts,tsx,js,jsx}"],
+  // Your customizations automatically extend the preset
+};
+```
+
+### Option 2: Manual configuration
+
+```js
+// tailwind.config.js
+import { plugin as inkubioUI } from "@inkubio/ui";
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./src/**/*.{ts,tsx,js,jsx}",
+    "./node_modules/@inkubio/ui/dist/**/*.{js,cjs,mjs}",
+  ],
+  plugins: [
+    inkubioUI,
+    require("@tailwindcss/typography"),
+    require("tailwindcss-animate"),
+  ],
+};
+```
+
+Notes:
+
+- The preset automatically includes component paths and the custom plugin
+- The plugin adds utilities like `content-alt` and `content-alt-empty`
+- Design tokens: the package ships default CSS variables (colors, shadows, fonts) in its global stylesheet. You only need to define your own `--color-*` / `--box-shadow-*` variables if you want to customize the theme
+
+## Global CSS
+
+Include Tailwind and the package styles in your global CSS file.
+
+```css
+/* src/styles/globals.css */
+@import "tailwindcss";
+
+/* UI package global styles (includes default design tokens) */
+@import "@inkubio/ui/global.css";
+
+/* Optional: override tokens to match your brand */
+:root {
+  /* Example: change primary color */
+  /* --color-primary-500: #2563eb; */
+}
+```
+
+## Usage
+
+```tsx
+import { Button } from "@inkubio/ui";
+
+export default function Example() {
+  return (
+    <div className="p-4">
+      <Button variant="primary">Hello from UI</Button>
+    </div>
+  );
+}
+```
+
+## Components
+
+| Component          | Description                                   | Key Props/Variants                                                                                                                                                                        |
+| ------------------ | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Button**         | Versatile button with multiple style variants | `variant`: default, destructive, outline, secondary, ghost, link, backLink, outlineLink<br/>`size`: default, sm, lg<br/>`asChild`: use with Slot for custom elements                      |
+| **Card**           | Container component with consistent styling   | `asChild`: render as child component                                                                                                                                                      |
+| **Input**          | Form text input                               | Standard HTML input attributes                                                                                                                                                            |
+| **Checkbox**       | Checkbox input                                | Standard HTML input attributes (without type)                                                                                                                                             |
+| **Radio**          | Radio button input                            | Standard HTML input attributes (without type)                                                                                                                                             |
+| **Textarea**       | Multi-line text input                         | Standard HTML textarea attributes                                                                                                                                                         |
+| **Tabs**           | Tabbed interface components                   | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`                                                                                                                                          |
+| **Sheet**          | Slide-out panel/drawer (based on Dialog)      | `side`: top, bottom, left, right<br/>Components: `Sheet`, `SheetTrigger`, `SheetContent`, `SheetHeader`, `SheetTitle`, `SheetDescription`, `SheetFooter`, `SheetClose`                    |
+| **Collapsible**    | Collapsible content container                 | `Collapsible`, `CollapsibleTrigger`, `CollapsibleContent`                                                                                                                                 |
+| **NavigationMenu** | Accessible navigation menu                    | `NavigationMenu`, `NavigationMenuList`, `NavigationMenuItem`, `NavigationMenuTrigger`, `NavigationMenuContent`, `NavigationMenuLink`, `NavigationMenuViewport`, `NavigationMenuIndicator` |
+| **ScrollArea**     | Custom scrollable area                        | `ScrollArea`, `ScrollBar`                                                                                                                                                                 |
+| **Separator**      | Visual divider                                | `orientation`: horizontal, vertical                                                                                                                                                       |
+| **Progress**       | Progress indicator                            | `value`: 0-100                                                                                                                                                                            |
+
+### Icons
+
+The package re-exports icons from Lucide React and Phosphor Icons:
+
+```tsx
+import {
+  ChevronDownIcon,
+  MenuIcon,
+  XIcon,
+  FacebookIcon,
+  GithubIcon,
+  // ... and many more
+} from "@inkubio/ui";
+```
+
+See the full list in the TypeScript definitions.
+
+## Troubleshooting
+
+- Missing styles: ensure `content` includes your app code and `node_modules/@inkubio/ui/dist`.
+- Unknown CSS variables: define the `--color-*` and `--box-shadow-*` tokens in global CSS.
+- Type errors: install `@types/react`/`@types/react-dom` if using TypeScript.