shapes-ui 0.3.0 → 0.4.1

package/.github/workflows/release.yml

@@ -1,46 +1,46 @@
 name: Release
 
 on:
-    push:
-        branches:
-            - main
+  push:
+    branches:
+      - main
 
 concurrency: ${{ github.workflow }}-${{ github.ref }}
 
 jobs:
-    release:
-        name: Release
-        runs-on: ubuntu-latest
-        permissions:
-            contents: write
-            pull-requests: write
-            id-token: write
-        steps:
-            - name: Checkout Repo
-              uses: actions/checkout@v4
-              with:
-                  fetch-depth: 0
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
 
-            - name: Setup Node.js 24
-              uses: actions/setup-node@v4
-              with:
-                  node-version: 24
-                  registry-url: "https://registry.npmjs.org"
+      - name: Setup Node.js 24
+        uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          registry-url: "https://registry.npmjs.org"
 
-            - name: Install pnpm
-              uses: pnpm/action-setup@v3
-              with:
-                  version: 9
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
 
-            - name: Install Dependencies
-              run: pnpm install
+      - name: Install Dependencies
+        run: pnpm install
 
-            - name: Create Release Pull Request or Publish to npm
-              id: changesets
-              uses: changesets/action@v1
-              with:
-                  publish: pnpm release
-                  commit: "chore: version packages"
-                  title: "chore: version packages"
-              env:
-                  GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      - name: Create Release Pull Request or Publish to npm
+        id: changesets
+        uses: changesets/action@v1
+        with:
+          publish: pnpm release
+          commit: "chore: version packages"
+          title: "chore: version packages"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/CHANGELOG.md

@@ -1,5 +1,119 @@
 # shapes-ui
 
+## 0.4.1
+
+### Patch Changes
+
+- 803ab28: Updated menu component stylings and examples
+
+## 0.4.0
+
+### Minor Changes
+
+- 0125286: ## Added tabs component
+
+  ## "shapes-ui": minor
+
+  Added tabs component
+
+- 6c3b1e7: ## Added toggle component
+
+  ## "shapes-ui": minor
+
+  Added toggle component
+
+- 258921a: Added popover component
+- 8c31990: ## Added select component
+
+  ## "shapes-ui": minor
+
+  Added select component
+
+- ae0e06c: Added switch component
+- a64d5fc: ## Added meter component
+
+  ## "shapes-ui": minor
+
+  Added meter component
+
+- ea2fa8d: ## Added menu component
+
+  ## "shapes-ui": minor
+
+  Added menu component
+
+- 1b12754: Ådded form component
+- 8b9b200: ## Added preview card component
+
+  ## "shapes-ui": minor
+
+  Added preview card component
+
+- 9c9ffec: Added number-field component
+- ba419d2: Added navigation-menu component
+- c6c8075: Added menubar component
+- cbc4e67: Added drawer component
+- 62cb1a0: added meter component
+- 43eba89: Added combobox component
+- af7d67e: ## Added radio component
+
+  ## "shapes-ui": minor
+
+  Added radio component
+
+- 20eb988: ## Added toolbar component
+
+  ## "shapes-ui": minor
+
+  Added toolbar component
+
+- 65cf7c2: Added autocomplete component
+- 14c5d2f: ## Added toast component
+
+  ## "shapes-ui": minor
+
+  Added toast component
+
+- 1c5217c: ## Added menubar component
+
+  ## "shapes-ui": minor
+
+  Added menubar component
+
+- 3dc2d69: ## Added progress component
+
+  ## "shapes-ui": minor
+
+  Added progress component
+
+- 41b2289: Added context menu component
+- c4ebe16: Added autocomplete component
+- cbc4e67: Added Drawer component
+- 92070ea: Added avatar component
+- 49d55ab: Added scroll area component
+- c2a8f2c: ## Added tooltip component
+
+  ## "shapes-ui": minor
+
+  Added tooltip component
+
+- baf0a06: Added menu component
+- ff33653: ## Added slider component
+
+  ## "shapes-ui": minor
+
+  Added slider component
+
+- c309349: ## Added scroll area component
+
+  ## "shapes-ui": minor
+
+  Added scroll area component
+
+### Patch Changes
+
+- 4b63949: UJpdated the cli script and examples etc.
+
 ## 0.3.0
 
 ### Minor Changes

package/content/components/autocomplete.mdx

@@ -0,0 +1,17 @@
+---
+title: Autocomplete
+slug: autocomplete
+description: Input field with autocomplete functionality and dropdown list of filtered options.
+---
+
+<RenderPreview name="autocomplete-demo" />
+
+## Installation
+
+<InstallationBlock name="autocomplete" />
+
+## Examples
+
+### Demo
+
+<RenderPreview name="autocomplete-demo" />

package/content/components/avatar.mdx

@@ -0,0 +1,17 @@
+---
+title: Avatar
+slug: avatar
+description: Profile image component with fallback for missing images or initials.
+---
+
+<RenderPreview name="avatar-demo" />
+
+## Installation
+
+<InstallationBlock name="avatar" />
+
+## Examples
+
+### Demo
+
+<RenderPreview name="avatar-demo" />

package/content/components/combobox.mdx

@@ -0,0 +1,11 @@
+---
+title: Combobox
+slug: combobox
+description: A searchable input with a list of predefined options.
+---
+
+<RenderPreview name="combobox-demo" />
+
+# Installation
+
+<InstallationBlock name="combobox" />

package/content/components/context-menu.mdx

@@ -0,0 +1,11 @@
+---
+title: Context Menu
+slug: context-menu
+description: Displays a context menu that appears at the pointer on right click or long press.
+---
+
+<RenderPreview name="context-menu-demo" />
+
+# Installation
+
+<InstallationBlock name="context-menu" />

package/content/components/dialog.mdx

@@ -1,6 +1,6 @@
 ---
 title: Dialog
-slug: dialog 
+slug: dialog
 description: Modal overlay for confirmations and forms.
 ---
 
@@ -8,4 +8,4 @@ description: Modal overlay for confirmations and forms.
 
 ## Installation
 
-<InstallationBlock name="dialog" />
+<InstallationBlock name="dialog" />

package/content/components/drawer.mdx

@@ -0,0 +1,33 @@
+---
+title: Drawer
+slug: drawer
+description: A slide-out panel from the edge of the screen.
+---
+
+<RenderPreview name="drawer-demo" />
+
+## Installation
+
+<InstallationBlock name="drawer" />
+
+## Examples
+
+### Default
+
+<RenderPreview name="drawer-demo" />
+
+### Indent background
+
+<RenderPreview name="drawer-indent" />
+
+### Positions
+
+<RenderPreview name="drawer-positions" />
+
+### Snap points
+
+<RenderPreview name="drawer-snap-points" />
+
+### Controlled
+
+<RenderPreview name="drawer-controlled" />

package/content/components/form.mdx

@@ -0,0 +1,17 @@
+---
+title: Form
+slug: form
+description: Form wrapper component with consolidated error handling and field validation support.
+---
+
+<RenderPreview name="form-demo" />
+
+## Installation
+
+<InstallationBlock name="form" />
+
+## Examples
+
+### Demo
+
+<RenderPreview name="form-demo" />

package/content/components/menu.mdx

@@ -0,0 +1,44 @@
+---
+title: Menu
+slug: menu
+description: Dropdown menu component with support for items, groups, separators, and submenus.
+---
+
+<RenderPreview name="menu-demo" />
+
+## Installation
+
+<InstallationBlock name="menu" />
+
+## Examples
+
+### Sides and alignments
+
+Side and alignment of the menu can be configured using the `side` and `align` props on the `MenuPopup` component.
+
+<RenderPreview name="menu-align" />
+
+### Groups
+
+Use `MenuGroup` and `MenuLabel` to visually group related menu items (for example — account actions vs. file actions).
+
+<RenderPreview name="menu-group" />
+
+### Submenus
+
+Nest `MenuSub` with `MenuSubTrigger` to create hierarchical menus and "open recent"‑style lists.
+
+<RenderPreview name="menu-submenu" />
+
+### Checkbox & radio items
+
+Use `MenuCheckboxItem` for independent toggles and `MenuRadioGroup`/`MenuRadioItem` for exclusive selections inside a menu.
+
+<RenderPreview name="menu-checkbox" />
+<RenderPreview name="menu-radio" />
+
+### Advanced
+
+A combined example showing groups, a submenu, checkbox items and radio items together.
+
+<RenderPreview name="menu-advanced" />

package/content/components/menubar.mdx

@@ -0,0 +1,17 @@
+---
+title: Menubar
+slug: menubar
+description: Menu bar providing commands and options for your application with dropdown menus.
+---
+
+<RenderPreview name="menubar-demo" />
+
+## Installation
+
+<InstallationBlock name="menubar" />
+
+## Examples
+
+### Demo
+
+<RenderPreview name="menubar-demo" />

package/content/components/meter.mdx

@@ -0,0 +1,17 @@
+---
+title: Meter
+slug: meter
+description: Meter component that provides a graphical display of a numeric value within a range.
+---
+
+<RenderPreview name="meter-demo" />
+
+## Installation
+
+<InstallationBlock name="meter" />
+
+## Examples
+
+### Demo
+
+<RenderPreview name="meter-demo" />

package/content/components/navigation-menu.mdx

@@ -0,0 +1,5 @@
+---
+title: Navigation Menu
+slug: navigation-menu
+description: Navigation menu component for displaying a collection of links and dropdown menus.
+---

package/content/components/number-field.mdx

@@ -0,0 +1,5 @@
+---
+title: Number Field
+slug: number-field
+description: An input field component specifically designed for numeric input, with built-in validation and formatting options
+---

package/content/components/popover.mdx

@@ -0,0 +1,5 @@
+---
+title: Popover
+slug: popover
+description: Popover component that displays content anchored to a trigger element.
+---

package/content/components/preview-card.mdx

@@ -0,0 +1,5 @@
+---
+title: Preview Card
+slug: preview-card
+description: Component that displays a preview of linked content when hovered.
+---

package/content/components/progress.mdx

@@ -0,0 +1,5 @@
+---
+title: Progress
+slug: progress
+description: Progress bar component for displaying the status of a task.
+---

package/content/components/radio.mdx

@@ -0,0 +1,5 @@
+---
+title: Radio
+slug: radio
+description: Radio button component for selecting a single option from a group.
+---

package/content/components/scroll-area.mdx

@@ -0,0 +1,11 @@
+---
+title: Scroll Area
+slug: scroll-area
+description: A scroll area component that provides a customizable and accessible way to display scrollable content.
+---
+
+<RenderPreview name="scroll-area-demo" />
+
+## Installation
+
+<InstallationBlock name="scroll-area" />

package/content/components/select.mdx

@@ -0,0 +1,5 @@
+---
+title: Select
+slug: select
+description: Select component for choosing a predefined value in a dropdown menu.
+---

package/content/components/slider.mdx

@@ -0,0 +1,5 @@
+---
+title: Slider
+slug: slider
+description: Slider component for selecting a value or range of values.
+---

package/content/components/switch.mdx

@@ -0,0 +1,5 @@
+---
+title: Switch
+slug: switch
+description: Switch component that indicates whether a setting is on or off.
+---

package/content/components/tabs.mdx

@@ -0,0 +1,5 @@
+---
+title: Tabs
+slug: tabs
+description: Tabs component for toggling between related panels on the same page.
+---

package/content/components/toast.mdx

@@ -0,0 +1,5 @@
+---
+title: Toast
+slug: toast
+description: A brief message that appears temporarily to inform users of an action or event.
+---

package/content/components/toggle.mdx

@@ -0,0 +1,11 @@
+---
+title: Toggle
+slug: toggle
+description: A button that can be toggled between two states.
+---
+
+<RenderPreview example="toggle-demo" />
+
+## Installation
+
+<InstallationBlock component="toggle" />

package/content/components/toolbar.mdx

@@ -0,0 +1,5 @@
+---
+title: Toolbar
+slug: toolbar
+description: A collection of buttons and controls organized in a horizontal bar.
+---

package/dist/cli.js

@@ -13835,6 +13835,12 @@ function getMissingDeps(pkg, deps) {
   if (!pkg) return deps;
   return deps.filter((dep) => !pkg.dependencies?.[dep] && !pkg.devDependencies?.[dep]);
 }
+async function isViteProject() {
+  const viteConfigTs = path.join(process.cwd(), "vite.config.ts");
+  const viteConfigJs = path.join(process.cwd(), "vite.config.js");
+  const viteConfigMjs = path.join(process.cwd(), "vite.config.mjs");
+  return await fs2.pathExists(viteConfigTs) || await fs2.pathExists(viteConfigJs) || await fs2.pathExists(viteConfigMjs);
+}
 
 // src/commands/add.ts
 import path2 from "path";
@@ -13959,7 +13965,10 @@ async function addCommand(components, config2) {
 import path3 from "path";
 import { confirm, intro, note as note2, outro, select, text, spinner as spinner2 } from "@clack/prompts";
 import { execa as execa2 } from "execa";
+import figlet from "figlet";
 import fs4 from "fs-extra";
+import gradient from "gradient-string";
+import pc from "picocolors";
 var BASE_DEPS = [
   "@base-ui/react",
   "class-variance-authority",
@@ -13968,15 +13977,14 @@ var BASE_DEPS = [
   "tailwind-merge",
   "tw-animate-css"
 ];
-var TAILWIND_DEV_DEPS = ["tailwindcss", "@tailwindcss/vite"];
 async function installDeps(deps, dev = false) {
   if (!deps.length) return;
   const spin = spinner2();
-  const label = dev ? "Installing Tailwind v4" : "Installing base dependencies";
+  const label = dev ? "Installing dev dependencies" : "Installing dependencies";
   spin.start(label);
   const [command, ...args] = await getInstallCommand(deps, dev);
   await execa2(command, args);
-  spin.stop("Dependencies installed");
+  spin.stop(pc.green("Dependencies installed"));
 }
 async function ensureTailwindStyles(cssPath) {
   const template = '@import "tailwindcss";\n';
@@ -13992,15 +14000,21 @@ ${template}`);
   }
   await fs4.writeFile(absPath, template);
 }
+function renderTitle() {
+  const text2 = figlet.textSync("Shapes UI", { font: "Standard" });
+  console.log(gradient.pastel.multiline(text2));
+}
 async function initCommand() {
-  intro("Shapes UI");
+  console.clear();
+  renderTitle();
+  intro(pc.bgCyan(pc.black(" Welcome to Shapes UI ")));
   const configPath = path3.join(process.cwd(), "shapes.json");
   if (await fs4.pathExists(configPath)) {
     const overwrite = exitIfCancelled(
       await confirm({ message: "shapes.json already exists. Overwrite it?" })
     );
     if (!overwrite) {
-      outro("Init cancelled.");
+      outro(pc.yellow("Init cancelled."));
       return;
     }
   }
@@ -14021,6 +14035,7 @@ async function initCommand() {
   );
   const pkg = await readPackageJson();
   const hasTailwindV4 = isTailwindV4Installed(pkg);
+  const isVite = await isViteProject();
   const hasExistingCss = exitIfCancelled(
     await confirm({ message: "Do you already have a CSS file?" })
   );
@@ -14031,7 +14046,11 @@ async function initCommand() {
     })
   ) : "src/styles/globals.css";
   if (!hasTailwindV4) {
-    await installDeps(TAILWIND_DEV_DEPS, true);
+    const tailwindDeps = ["tailwindcss"];
+    if (isVite) {
+      tailwindDeps.push("@tailwindcss/vite");
+    }
+    await installDeps(tailwindDeps, true);
   }
   const missingBaseDeps = getMissingDeps(pkg, BASE_DEPS);
   await installDeps(missingBaseDeps, false);
@@ -14043,15 +14062,17 @@ async function initCommand() {
     paths: { ui: uiPath, lib: "./src/lib" }
   };
   await fs4.writeJSON("shapes.json", config2, { spaces: 2 });
-  note2("Created shapes.json");
+  note2("Created shapes.json", "Configuration");
   const addNow = exitIfCancelled(await confirm({ message: "Add components now?" }));
   if (addNow) {
     const selected = await pickComponents();
-    for (const name of selected) {
-      await installComponent(name, config2);
+    if (selected.length > 0) {
+      for (const name of selected) {
+        await installComponent(name, config2);
+      }
     }
   }
-  outro("Shapes UI is ready.");
+  outro(pc.green("Shapes UI is ready."));
 }
 
 // src/commands/cli.ts