@choco-vanille/ui 1.0.0 → 1.1.0

package/README.md

@@ -1,7 +1,9 @@
-# @my-org/ui-kit
+# @choco-vanille/ui
 
-A React 19 UI kit built with **Vite 8** (library mode), **Vanilla Extract**
-(zero-runtime, typed CSS-in-TS) and **Radix UI** primitives. Components are
+> **⚠️ Personal project notice:** This library is primarily built for personal use. It is published publicly as a convenience, but comes with no guarantees of stability, long-term maintenance, or backward compatibility. Use it at your own risk.
+
+A React 19 UI kit built with **Vite** (library mode), **Vanilla Extract**
+(zero-runtime, typed CSS-in-TS) and **Base UI** primitives. Components are
 previewed with **Storybook**.
 
 ## Features
@@ -9,40 +11,62 @@ previewed with **Storybook**.
 - ⚛️ React 19 + TypeScript, ships ESM + CJS + type declarations
 - 🎨 Vanilla Extract design system — a fully typed token theme
   (colors, spacing, radius, font sizes/weights, shadows, z-index)
-- 🧩 Radix-based components styled with Vanilla Extract `recipe()` (the typed
+- 🧩 Base UI components styled with Vanilla Extract `recipe()` (the typed
   replacement for `cva`), composed with `clsx`
 - 📚 Storybook for interactive component docs
 - ✅ ESLint flat config (typescript-eslint, react-hooks, jsx-a11y, storybook) + Prettier
 
-## Install (in a consuming app)
+## Installation
 
 ```bash
-yarn add @my-org/ui-kit react react-dom
+# npm
+npm install @choco-vanille/ui react react-dom
+
+# yarn
+yarn add @choco-vanille/ui react react-dom
+
+# pnpm
+pnpm add @choco-vanille/ui react react-dom
 ```
 
 Import the stylesheet once (e.g. in your root layout/entry):
 
 ```ts
-import '@my-org/ui-kit/styles.css';
+import '@choco-vanille/ui/styles.css';
 ```
 
 Then use components:
 
 ```tsx
-import { Text } from '@my-org/ui-kit';
+import { Text } from '@choco-vanille/ui';
 
 export function Example() {
   return (
     <>
       <Text variant="h1">Hello world</Text>
       <Text variant="muted">A typographic primitive.</Text>
-      <Text variant="code">@my-org/ui-kit</Text>
+      <Text variant="code">@choco-vanille/ui</Text>
     </>
   );
 }
 ```
 
-### Theming
+## Components
+
+| Category | Components |
+|---|---|
+| **Foundation** | `Icon`, `Typography` |
+| **Layout** | `Box`, `Flex`, `Grid`, `Image`, `Separator`, `Form`, `Fieldset`, `Legend` |
+| **Actions** | `Button`, `IconButton`, `ToggleButton`, `ToggleIconButton`, `ToggleButtonGroup` |
+| **Forms** | `Autocomplete`, `Calendar`, `Checkbox`, `DatePicker`, `RadioGroup`, `Select`, `Switch`, `TextArea`, `TextField` |
+| **Data Display** | `Avatar`, `AvatarGroup`, `Badge`, `Table` |
+| **Surfaces** | `Accordion`, `Card`, `Collapsible` |
+| **Navigation** | `Tabs`, `Link` |
+| **Overlay** | `Tooltip`, `DropdownMenu`, `Popover`, `HoverCard`, `Dialog`, `Drawer` |
+| **Feedback** | `Skeleton`, `Callout`, `Toast`, `Progress` |
+| **Theme** | `ThemeProvider`, `useTheme` |
+
+## Theming
 
 The design system is the single source of truth for tokens, organised by
 category under `src/theme/tokens/` (`colors.ts`, `spacing.ts`, `radii.ts`,
@@ -65,7 +89,7 @@ Tokens are available two ways:
 
 ```ts
 import { style } from '@vanilla-extract/css';
-import { vars } from '@my-org/ui-kit';
+import { vars } from '@choco-vanille/ui';
 
 export const card = style({
   backgroundColor: vars.color.card,
@@ -90,45 +114,7 @@ human-readable name derived from its path (`--color-primary`, `--space-md`,
 Both stay in sync automatically — overriding a CSS variable also updates every
 component that references it through `vars`.
 
-## Components
-
-### `Text`
-
-Polymorphic typography primitive.
-
-| Prop       | Type                                                                                          | Default | Description                                  |
-| ---------- | --------------------------------------------------------------------------------------------- | ------- | -------------------------------------------- |
-| `variant`  | `h1 \| h2 \| h3 \| h4 \| p \| lead \| large \| small \| muted \| blockquote \| code`          | `p`     | Visual style + default semantic HTML element |
-| `weight`   | `normal \| medium \| semibold \| bold`                                                        | —       | Font weight override                         |
-| `align`    | `left \| center \| right`                                                                     | —       | Text alignment                               |
-| `truncate` | `boolean`                                                                                      | —       | Truncate overflow with ellipsis              |
-| `as`       | `React.ElementType`                                                                           | —       | Override the rendered element                |
-
-## Scripts
-
-| Command                | Description                                  |
-| ---------------------- | -------------------------------------------- |
-| `yarn dev`             | Build the library in watch mode              |
-| `yarn build`           | Type-check and build (ESM, CJS, d.ts, CSS)   |
-| `yarn storybook`       | Run Storybook dev server on port 6006        |
-| `yarn build-storybook` | Build the static Storybook site              |
-| `yarn lint`            | Run ESLint                                   |
-| `yarn typecheck`       | Type-check without emitting                  |
-| `yarn format`          | Format with Prettier                         |
-
-## Publishing
-
-`yarn build` produces `dist/`. The `prepublishOnly` hook runs the build
-automatically, and `files` limits the published package to `dist/`.
-
-```bash
-yarn publish --access public
-```
+## License
 
-## Adding more components
+[MIT](./LICENSE)
 
-Place new components under `src/components/<group>/<name>/` (e.g. `actions/`,
-`foundation/`), re-export them from `src/index.ts`, and add a `*.stories.tsx`
-file next to each component. Define styles in a colocated `*.styles.css.ts`
-file using Vanilla Extract `recipe()` / `style()` and the design tokens
-(`vars`), then compose class names with the `mergeClassNames()` helper.

package/package.json

@@ -1,9 +1,24 @@
 {
   "name": "@choco-vanille/ui",
-  "version": "1.0.0",
-  "description": "A React 19 UI kit built with Radix primitives and a Vanilla Extract design system.",
+  "version": "1.1.0",
+  "description": "A React 19 UI kit built with Vanilla Extract and Base UI primitives.",
   "type": "module",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/LilianMrzt/choco-vanille-ui.git"
+  },
+  "homepage": "https://github.com/LilianMrzt/choco-vanille-ui#readme",
+  "bugs": {
+    "url": "https://github.com/LilianMrzt/choco-vanille-ui/issues"
+  },
+  "keywords": [
+    "react",
+    "ui-kit",
+    "vanilla-extract",
+    "base-ui",
+    "storybook"
+  ],
   "sideEffects": [
     "**/*.css"
   ],