untitledui 0.1.55 → 0.1.56-beta.0

package/README.md

@@ -1,159 +1,138 @@
+[![npm version](https://img.shields.io/npm/v/untitledui.svg)](https://www.npmjs.com/package/untitledui)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
 # Untitled UI CLI
 
-The Untitled UI CLI tool helps you quickly scaffold projects with Untitled UI React and add components and page examples to your existing projects with an interactive interface in seconds.
+The official CLI for [Untitled UI React](https://www.untitledui.com/react) — quickly scaffold projects, add components, and install page examples with an interactive interface.
 
-## Usage
+## Installation
 
-To always use the latest version of the CLI, we recommend using `npx`:
+We recommend using `npx` to always run the latest version:
 
 ```bash
 npx untitledui@latest <command>
 ```
 
-The Untitled UI CLI provides the following commands:
+Or install globally:
 
-If you run a command without providing further arguments, you'll be presented with an interactive interface to continue.
+```bash
+npm install -g untitledui
+```
 
-- `init`: Initialize a new project or adjust an existing one.
-- `add`: Add a component to your project.
-- `example`: Add an example page to the project.
-- `login`: Authenticate with Untitled UI to access PRO components.
+## Quick Start
 
-## Commands
+```bash
+# Create a new project
+npx untitledui@latest init my-app --nextjs
 
-### `init`
+# Add components to an existing project
+npx untitledui@latest add button toggle avatar
 
-The `init` command is used to initialize a new project or adjust an existing one.
+# Add a page example
+npx untitledui@latest example dashboards-01/05
 
-If you run the command without any arguments, you will be guided through an interactive setup process.
+# Authenticate for PRO access
+npx untitledui@latest login
+```
+
+## Commands
 
-**Usage:**
+### `init`
+
+Initialize a new project or configure an existing one with Untitled UI.
 
 ```bash
 npx untitledui@latest init [directory] [options]
 ```
 
-**Arguments:**
-
-- `[directory]`: The directory to initialize the project in.
-
-**Options:**
-
-- `--vite`: Initialize a Vite project.
-- `--nextjs`: Initialize a Next.js project.
-- `-o, --overwrite`: Overwrite existing files.
-- `--colors-list`: Show the colors list.
-- `-c, --color <color-name>`: Specify a color for the project.
-- `-h, --help`: Display the help message.
+| Option | Description |
+|---|---|
+| `--vite` | Initialize a Vite project |
+| `--nextjs` | Initialize a Next.js project |
+| `-o, --overwrite` | Overwrite existing files |
+| `--colors-list` | Show available brand colors |
+| `-c, --color <name>` | Set the brand color |
 
 **Examples:**
 
-- Initialize a new Next.js project in a directory named `my-app`:
-
-    ```bash
-    npx untitledui@latest init my-app --nextjs
-    ```
-
-- Initialize a new Vite project with a specific color:
-
-    ```bash
-    npx untitledui@latest init my-vite-app --vite --color blue
-    ```
+```bash
+npx untitledui@latest init my-app --nextjs
+npx untitledui@latest init my-app --vite --color blue
+```
 
 ### `add`
 
-The `add` command is used to add a component to your project.
-
-If you run the command without any arguments, you will be guided through an interactive process to select components.
-
-**Usage:**
+Add components to your project.
 
 ```bash
 npx untitledui@latest add [components...] [options]
 ```
 
-**Arguments:**
-
-- `[components...]`: The components to add.
-
-**Options:**
-
-- `-a, --all`: Add all available components.
-- `-o, --overwrite`: Overwrite existing files.
-- `-p, --path <path>`: The path to add the component to.
-- `-d, --dir <directory>`: The directory where the project is located.
-- `-t, --type <base|marketing|shared-assets|application|foundations>`: The type of the component to add.
+| Option | Description |
+|---|---|
+| `-a, --all` | Add all available components |
+| `-o, --overwrite` | Overwrite existing files |
+| `-p, --path <path>` | Custom components directory |
+| `-d, --dir <directory>` | Project directory |
+| `-t, --type <type>` | Component type (`base`, `marketing`, `shared-assets`, `application`, `foundations`) |
 
 **Examples:**
 
-- Add a single component:
-
-    ```bash
-    npx untitledui@latest add button
-    ```
-
-- Add multiple components:
-
-    ```bash
-    npx untitledui@latest add button toggle avatar
-    ```
-
-- Add all marketing components:
-
-    ```bash
-    npx untitledui@latest add --all --type marketing
-    ```
+```bash
+npx untitledui@latest add button
+npx untitledui@latest add button toggle avatar
+npx untitledui@latest add --all --type marketing
+```
 
 ### `example`
 
-The `example` command is used to add an example page to the project.
-
-**Usage:**
+Add a page example to your project.
 
 ```bash
 npx untitledui@latest example [example] [options]
 ```
 
-**Arguments:**
-
-- `[example]`: The example to add. This can be a specific example path copied from the [Untitled UI React website](https://www.untitledui.com/react/components) (e.g., `dashboards-01/05`).
-
-**Options:**
-
-- `-o, --overwrite`: Overwrite existing files.
-- `-p, --path <path>`: The path to add the component to.
-- `-e, --example-path <example-path>`: The path to add the example file to.
+| Option | Description |
+|---|---|
+| `-o, --overwrite` | Overwrite existing files |
+| `-p, --path <path>` | Custom components directory |
+| `-e, --example-path <path>` | Custom example file directory |
 
 **Examples:**
 
-- Add application UI examples:
-
-    ```bash
-    npx untitledui@latest example application
-    ```
-
-- Add a specific example by its path:
-
-    ```bash
-    npx untitledui@latest example dashboards-01/05
-    ```
+```bash
+npx untitledui@latest example application
+npx untitledui@latest example dashboards-01/05
+```
 
 ### `login`
 
-The `login` command is used to authenticate with Untitled UI to access PRO components.
-
-**Usage:**
+Authenticate with Untitled UI to access PRO components.
 
 ```bash
 npx untitledui@latest login
 ```
 
-This command will open a browser window for you to authenticate with your Untitled UI account.
+Opens a browser window for authentication. Your credentials are stored locally at `~/.untitledui/config.json`.
 
-## License
+## Configuration
 
-The Untitled UI CLI is licensed under the [MIT License](LICENSE).
+The CLI detects your project setup automatically:
+
+- **Framework**: Next.js (App/Pages Router) and Vite
+- **Package manager**: npm, yarn, pnpm, and bun
+- **TypeScript**: Reads `tsconfig.json` for path aliases
+- **Tailwind CSS**: v4+ with automatic dependency installation
+- **Custom paths**: Supports `components.json` for alias configuration
+
+## Documentation
+
+Full documentation is available at [untitledui.com/react/docs](https://www.untitledui.com/react/docs/introduction).
 
 ## Bug Reports
 
-If you find a bug, please report it on our [issue tracker](https://github.com/untitleduico/react/issues).
+Found a bug? Please report it on our [issue tracker](https://github.com/untitleduico/react/issues).
+
+## License
+
+MIT © [Untitled UI](https://www.untitledui.com/react)

package/config/migrations/7-to-8.ts

@@ -0,0 +1,287 @@
+import type { TransformRule } from "../../helper/upgrade-transforms";
+
+export interface MigrationDefinition {
+    fromVersion: string;
+    toVersion: string;
+    classTransforms: TransformRule[];
+    importTransforms: { from: string; to: string; description: string }[];
+    propTransforms: { from: string; to: string; description: string }[];
+    structuralPatterns: { pattern: string; instruction: string }[];
+    orphanedTokens: string[];
+    dependencyChanges: {
+        update: Record<string, string>;
+        add: Record<string, string>;
+        devUpdate: Record<string, string>;
+        devAdd: Record<string, string>;
+        remove: string[];
+    };
+    configChanges: {
+        tsconfig: { description: string; find: string; replace: string }[];
+    };
+    notes: string[];
+}
+
+export const migration: MigrationDefinition = {
+    fromVersion: "7",
+    toVersion: "8",
+
+    classTransforms: [
+        // Typo fix
+        {
+            pattern: /\bshadow-skeumorphic-xs\b/g,
+            replace: "shadow-skeuomorphic-xs",
+            description: "shadow-skeumorphic-xs → shadow-skeuomorphic-xs (typo fix)",
+        },
+        {
+            pattern: /\bshadow-skeumorphic\b/g,
+            replace: "shadow-skeuomorphic",
+            description: "shadow-skeumorphic → shadow-skeuomorphic (typo fix)",
+        },
+
+        // Utility color renames
+        {
+            pattern: /\butility-gray-blue-/g,
+            replace: "utility-slate-",
+            description: "utility-gray-blue- → utility-slate-",
+        },
+        {
+            pattern: /\butility-blue-light-/g,
+            replace: "utility-sky-",
+            description: "utility-blue-light- → utility-sky-",
+        },
+        {
+            pattern: /\butility-gray-/g,
+            replace: "utility-neutral-",
+            description: "utility-gray- → utility-neutral-",
+        },
+        {
+            pattern: /\butility-error-/g,
+            replace: "utility-red-",
+            description: "utility-error- → utility-red-",
+        },
+        {
+            pattern: /\butility-warning-/g,
+            replace: "utility-yellow-",
+            description: "utility-warning- → utility-yellow-",
+        },
+        {
+            pattern: /\butility-success-/g,
+            replace: "utility-green-",
+            description: "utility-success- → utility-green-",
+        },
+
+        // Tailwind v4 outline rename
+        {
+            pattern: /\boutline-none\b/g,
+            replace: "outline-hidden",
+            description: "outline-none → outline-hidden",
+        },
+
+        // Disabled token removals and replacements
+        {
+            pattern: /\bbg-disabled_subtle\b/g,
+            replace: "opacity-50",
+            description: "bg-disabled_subtle → opacity-50",
+            needsReview: true,
+        },
+        {
+            pattern: /\bbg-disabled\b/g,
+            replace: "opacity-50",
+            description: "bg-disabled → opacity-50",
+            needsReview: true,
+        },
+        {
+            pattern: /\btext-disabled\b/g,
+            replace: "",
+            description: "text-disabled → removed",
+            needsReview: true,
+        },
+        {
+            pattern: /\bring-disabled_subtle\b/g,
+            replace: "",
+            description: "ring-disabled_subtle → removed",
+            needsReview: true,
+        },
+        {
+            pattern: /\bring-disabled\b/g,
+            replace: "",
+            description: "ring-disabled → removed",
+            needsReview: true,
+        },
+        {
+            pattern: /\bborder-disabled_subtle\b/g,
+            replace: "",
+            description: "border-disabled_subtle → removed",
+            needsReview: true,
+        },
+        {
+            pattern: /\bborder-disabled\b/g,
+            replace: "",
+            description: "border-disabled → removed",
+            needsReview: true,
+        },
+        {
+            pattern: /\btext-fg-disabled_subtle\b/g,
+            replace: "",
+            description: "text-fg-disabled_subtle → removed",
+            needsReview: true,
+        },
+        {
+            pattern: /\btext-fg-disabled\b/g,
+            replace: "",
+            description: "text-fg-disabled → removed",
+            needsReview: true,
+        },
+        {
+            pattern: /\btext-placeholder_subtle\b/g,
+            replace: "",
+            description: "text-placeholder_subtle → removed",
+            needsReview: true,
+        },
+
+        // Button icon token replacements (_hover variants MUST come first)
+        {
+            pattern: /\btext-button-primary-icon_hover\b/g,
+            replace: "text-white/70",
+            description: "text-button-primary-icon_hover → text-white/70",
+        },
+        {
+            pattern: /\btext-button-primary-icon\b/g,
+            replace: "text-white/60",
+            description: "text-button-primary-icon → text-white/60",
+        },
+        {
+            pattern: /\btext-button-destructive-primary-icon_hover\b/g,
+            replace: "text-white/70",
+            description: "text-button-destructive-primary-icon_hover → text-white/70",
+        },
+        {
+            pattern: /\btext-button-destructive-primary-icon\b/g,
+            replace: "text-white/60",
+            description: "text-button-destructive-primary-icon → text-white/60",
+        },
+
+        // Misc token renames
+        {
+            pattern: /\bbg-avatar-bg\b/g,
+            replace: "bg-tertiary",
+            description: "bg-avatar-bg → bg-tertiary",
+        },
+        {
+            pattern: /\bring-bg-brand-solid\b/g,
+            replace: "ring-brand-solid",
+            description: "ring-bg-brand-solid → ring-brand-solid",
+        },
+        {
+            pattern: /\bbg-active\b/g,
+            replace: "bg-primary_hover",
+            description: "bg-active → bg-primary_hover",
+            needsReview: true,
+        },
+        {
+            pattern: /\bbg-toggle-button-fg_disabled\b/g,
+            replace: "",
+            description: "bg-toggle-button-fg_disabled → removed",
+            needsReview: true,
+        },
+    ],
+
+    importTransforms: [
+        {
+            from: "pin-input/pin-input",
+            to: "input/pin-input",
+            description: "pin-input moved into input directory",
+        },
+        {
+            from: "nav-item-button",
+            to: "nav-button",
+            description: "nav-item-button renamed to nav-button",
+        },
+    ],
+
+    propTransforms: [
+        {
+            from: "placeholderIcon=",
+            to: "icon=",
+            description: "placeholderIcon prop renamed to icon",
+        },
+        {
+            from: 'color="gray-blue"',
+            to: 'color="slate"',
+            description: 'color="gray-blue" renamed to color="slate"',
+        },
+        {
+            from: 'color="blue-light"',
+            to: 'color="sky"',
+            description: 'color="blue-light" renamed to color="sky"',
+        },
+    ],
+
+    structuralPatterns: [
+        // {
+        //     pattern: "AriaDialogTrigger",
+        //     instruction:
+        //         "Remove AriaDialogTrigger wrapper. Move isOpen and onOpenChange props directly to ModalOverlay. Remove the DialogTrigger import if no longer used.",
+        // },
+    ],
+
+    orphanedTokens: [
+        "bg-disabled_subtle",
+        "text-disabled",
+        "ring-disabled",
+        "border-disabled",
+        "text-fg-disabled",
+        "bg-avatar-bg",
+        "text-button-primary-icon",
+        "text-button-destructive-primary-icon",
+        "bg-toggle-button-fg_disabled",
+        "utility-gray-",
+        "utility-error-",
+        "utility-warning-",
+        "utility-success-",
+        "utility-gray-blue-",
+        "utility-blue-light-",
+        "skeumorphic",
+    ],
+
+    dependencyChanges: {
+        update: {
+            next: "16.2.0",
+            react: "^19.2.4",
+            "react-dom": "^19.2.4",
+            "react-aria-components": "^1.16.0",
+            "react-aria": "^3.47.0",
+            tailwindcss: "^4.2.2",
+            motion: "^12.38.0",
+            recharts: "^3.8.0",
+        },
+        add: {},
+        devUpdate: {
+            storybook: "^10.3.0",
+            vite: "^8.0.0",
+            "@vitejs/plugin-react": "^6.0.1",
+            eslint: "^10.0.3",
+            typescript: "^5.9.3",
+        },
+        devAdd: {
+            "@storybook/test-runner": "^0.24.3",
+        },
+        remove: [],
+    },
+
+    configChanges: {
+        tsconfig: [
+            {
+                description: "Update JSX transform to react-jsx",
+                find: '"jsx": "preserve"',
+                replace: '"jsx": "react-jsx"',
+            },
+        ],
+    },
+
+    notes: [
+        "Default size for Select, ComboBox, and Input changed from 'sm' to 'md'. Review component usage.",
+        "Avatar size 'xxs' removed. Use 'xs' instead.",
+        "Dropdown no longer defaults to selectionMode='single'. Set explicitly if needed.",
+    ],
+};

package/config/styles/globals.css

@@ -60,3 +60,10 @@ input[type="number"] {
 input[type="search"]::-webkit-search-cancel-button {
     -webkit-appearance: none;
 }
+
+/* Hide the default outline on chart elements. */
+.recharts-surface,
+.recharts-surface g,
+.recharts-surface path {
+    outline: none;
+}