@vkzstudio/muza-ui 1.0.3 → 1.0.4

package/README.md

@@ -1,168 +1,168 @@
-# Muza UI
-
-A modern React component library built with Vite, shadcn/ui, and Tailwind CSS 4.
-
-## Prerequisites
-
-- Node.js 22 or higher
-- npm or yarn
-
-## Quick Start
-
-1. **Clone and install dependencies:**
-
-   ```bash
-   npm install
-   ```
-
-2. **Start development server:**
-   ```bash
-   npm run dev
-   ```
-   This starts Storybook at [http://localhost:6006](http://localhost:6006)
-
-## Development
-
-### Node.js Version Management
-
-This project requires Node.js 22+. If you're using nvm:
-
-```bash
-nvm use
-```
-
-### Available Scripts
-
-| Script                             | Description                                     |
-| ---------------------------------- | ----------------------------------------------- |
-| `npm run dev`                      | Start Storybook development server on port 6006 |
-| `npm run build`                    | Build the component library for production      |
-| `npm run build-storybook`          | Build Storybook for deployment                  |
-| `npm run typecheck`                | Run TypeScript type checking                    |
-| `npm run lint`                     | Run ESLint                                      |
-| `npm run lint:fix`                 | Run ESLint with auto-fix                        |
-| `npm run add-component <name>`     | Add shadcn/ui component (macOS/Linux)           |
-| `npm run add-component:win <name>` | Add shadcn/ui component (Windows)               |
-| `npm run format`                   | Run prettier                                    |
-
-### Project Structure
-
-```
-src/
-├── components/          # React components
-│   ├── Button/         # Example component
-│   │   ├── Button.tsx
-│   │   ├── Button.stories.tsx
-│   │   └── index.ts
-│   └── index.ts        # Component exports
-├── utils/              # Utility functions
-│   ├── cn.ts          # Class name utility
-│   └── index.ts       # Utility exports
-├── globals.css        # Global Tailwind styles
-└── index.ts          # Main library export
-```
-
-### Adding Components
-
-For automated component installation using shadcn/ui, see: **[Component Installation Guide](docs/components.md)**
-
-#### Manual Component Creation
-
-1. **Create component directory:**
-
-   ```bash
-   mkdir src/components/YourComponent
-   ```
-
-2. **Create component files:**
-   - `YourComponent.tsx` - Main component
-   - `YourComponent.stories.tsx` - Storybook stories
-   - `index.ts` - Export file
-
-3. **Export from main index:**
-   Add to `src/components/index.ts`:
-   ```typescript
-   export * from './YourComponent'
-   ```
-
-### Storybook Development
-
-Components are showcased and developed using Storybook:
-
-- **View components:** `npm run dev` → [http://localhost:6006](http://localhost:6006)
-- **Create stories:** Follow the pattern in `Button.stories.tsx`
-- **Auto-docs:** Stories are automatically documented
-
-## Build Process
-
-### Library Build
-
-```bash
-npm run build
-```
-
-This creates:
-
-- `dist/index.js` - ES module bundle
-- `dist/index.d.ts` - TypeScript declarations
-- `dist/muza-ui.css` - Compiled CSS with all design tokens
-- `dist/components/` - Individual component modules
-- `dist/styles/` - Design system token files
-
-### Storybook Build
-
-```bash
-npm run build-storybook
-```
-
-Creates `storybook-static/` directory for deployment.
-
-## Technologies
-
-- **React 18** - UI framework
-- **Vite** - Build tool and dev server
-- **TypeScript** - Type safety
-- **Tailwind CSS 4** - Utility-first CSS framework
-- **shadcn/ui** - Component patterns and utilities
-- **Storybook** - Component development and documentation
-- **class-variance-authority** - Component variant management
-
-## Library Usage
-
-Install the package:
-
-```bash
-npm install @vkzstudio/muza-ui
-```
-
-**Important:** This library requires Tailwind CSS 4 to be configured in your project.
-
-```typescript
-import { Button } from '@vkzstudio/muza-ui'
-import '@vkzstudio/muza-ui/styles'
-
-function App() {
-  return <Button variant="primary">Click me</Button>
-}
-```
-
-## Styling
-
-- Uses Tailwind CSS 4 with CSS variables
-- Follows shadcn/ui design system patterns
-- Custom utility function `cn()` for class merging
-- Dark mode support built-in
-
-## Quality Assurance
-
-- **TypeScript** - Static type checking
-- **ESLint** - Code linting
-- **Prettier** - Code formating
-- **Storybook** - Visual testing and documentation
-
-## Contributing
-
-1. Create components following the established patterns
-2. Include comprehensive Storybook stories
-3. Run type checking and linting before committing
-4. Test components in Storybook
+# Muza UI
+
+A modern React component library built with Vite, shadcn/ui, and Tailwind CSS 4.
+
+## Prerequisites
+
+- Node.js 22 or higher
+- npm or yarn
+
+## Quick Start
+
+1. **Clone and install dependencies:**
+
+   ```bash
+   npm install
+   ```
+
+2. **Start development server:**
+   ```bash
+   npm run dev
+   ```
+   This starts Storybook at [http://localhost:6006](http://localhost:6006)
+
+## Development
+
+### Node.js Version Management
+
+This project requires Node.js 22+. If you're using nvm:
+
+```bash
+nvm use
+```
+
+### Available Scripts
+
+| Script                             | Description                                     |
+| ---------------------------------- | ----------------------------------------------- |
+| `npm run dev`                      | Start Storybook development server on port 6006 |
+| `npm run build`                    | Build the component library for production      |
+| `npm run build-storybook`          | Build Storybook for deployment                  |
+| `npm run typecheck`                | Run TypeScript type checking                    |
+| `npm run lint`                     | Run ESLint                                      |
+| `npm run lint:fix`                 | Run ESLint with auto-fix                        |
+| `npm run add-component <name>`     | Add shadcn/ui component (macOS/Linux)           |
+| `npm run add-component:win <name>` | Add shadcn/ui component (Windows)               |
+| `npm run format`                   | Run prettier                                    |
+
+### Project Structure
+
+```
+src/
+├── components/          # React components
+│   ├── Button/         # Example component
+│   │   ├── Button.tsx
+│   │   ├── Button.stories.tsx
+│   │   └── index.ts
+│   └── index.ts        # Component exports
+├── utils/              # Utility functions
+│   ├── cn.ts          # Class name utility
+│   └── index.ts       # Utility exports
+├── globals.css        # Global Tailwind styles
+└── index.ts          # Main library export
+```
+
+### Adding Components
+
+For automated component installation using shadcn/ui, see: **[Component Installation Guide](docs/components.md)**
+
+#### Manual Component Creation
+
+1. **Create component directory:**
+
+   ```bash
+   mkdir src/components/YourComponent
+   ```
+
+2. **Create component files:**
+   - `YourComponent.tsx` - Main component
+   - `YourComponent.stories.tsx` - Storybook stories
+   - `index.ts` - Export file
+
+3. **Export from main index:**
+   Add to `src/components/index.ts`:
+   ```typescript
+   export * from './YourComponent'
+   ```
+
+### Storybook Development
+
+Components are showcased and developed using Storybook:
+
+- **View components:** `npm run dev` → [http://localhost:6006](http://localhost:6006)
+- **Create stories:** Follow the pattern in `Button.stories.tsx`
+- **Auto-docs:** Stories are automatically documented
+
+## Build Process
+
+### Library Build
+
+```bash
+npm run build
+```
+
+This creates:
+
+- `dist/index.js` - ES module bundle
+- `dist/index.d.ts` - TypeScript declarations
+- `dist/muza-ui.css` - Compiled CSS with all design tokens
+- `dist/components/` - Individual component modules
+- `dist/styles/` - Design system token files
+
+### Storybook Build
+
+```bash
+npm run build-storybook
+```
+
+Creates `storybook-static/` directory for deployment.
+
+## Technologies
+
+- **React 18** - UI framework
+- **Vite** - Build tool and dev server
+- **TypeScript** - Type safety
+- **Tailwind CSS 4** - Utility-first CSS framework
+- **shadcn/ui** - Component patterns and utilities
+- **Storybook** - Component development and documentation
+- **class-variance-authority** - Component variant management
+
+## Library Usage
+
+Install the package:
+
+```bash
+npm install @vkzstudio/muza-ui
+```
+
+**Important:** This library requires Tailwind CSS 4 to be configured in your project.
+
+```typescript
+import { Button } from '@vkzstudio/muza-ui'
+import '@vkzstudio/muza-ui/styles'
+
+function App() {
+  return <Button variant="primary">Click me</Button>
+}
+```
+
+## Styling
+
+- Uses Tailwind CSS 4 with CSS variables
+- Follows shadcn/ui design system patterns
+- Custom utility function `cn()` for class merging
+- Dark mode support built-in
+
+## Quality Assurance
+
+- **TypeScript** - Static type checking
+- **ESLint** - Code linting
+- **Prettier** - Code formating
+- **Storybook** - Visual testing and documentation
+
+## Contributing
+
+1. Create components following the established patterns
+2. Include comprehensive Storybook stories
+3. Run type checking and linting before committing
+4. Test components in Storybook

package/dist/components/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAmC,MAAM,OAAO,CAAA;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,OAAO,EAEL,KAAK,iBAAiB,EAGvB,MAAM,aAAa,CAAA;AAKpB,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,sBAAsB,CAAA;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA;IAC1C,cAAc,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;KAAE,EAAE,CAAA;IACnE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,MAAM,CAAA;QACtB,cAAc,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,eAAe,EAAE,MAAM,CAAA;KACxB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAA;IACrC,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CACN,iBAAiB,EACf,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,YAAY,GACZ,mBAAmB,GACnB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,CACvB,GACC,CAAC,KAAK,GAAG,MAAM,CAAC,CAAA;AAElB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAA;CAC5C,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,UAAU,8GAqLtB,CAAA"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAAmC,MAAM,OAAO,CAAA;AACvE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,OAAO,EAEL,KAAK,iBAAiB,EAGvB,MAAM,aAAa,CAAA;AAKpB,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,sBAAsB,CAAA;AAEjE,MAAM,MAAM,eAAe,GAAG;IAC5B,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA;IAC1C,cAAc,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;KAAE,EAAE,CAAA;IACnE,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;QACnB,cAAc,EAAE,MAAM,CAAA;QACtB,cAAc,EAAE,MAAM,CAAA;QACtB,KAAK,EAAE,MAAM,CAAA;QACb,eAAe,EAAE,MAAM,CAAA;KACxB,CAAC,CAAA;IACF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAA;IACrC,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CACN,iBAAiB,EACf,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,YAAY,GACZ,mBAAmB,GACnB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,CACvB,GACC,CAAC,KAAK,GAAG,MAAM,CAAC,CAAA;AAElB,KAAK,KAAK,GAAG;IACX,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC7B,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAA;CAC5C,CAAA;AAED,KAAK,MAAM,GAAG;IACZ,IAAI,EAAE,QAAQ,CAAA;IACd,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACxB,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC/B,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAA;IAC/B,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,UAAU,8GAmLtB,CAAA"}

package/dist/components/DatePicker/DatePicker.js

@@ -1,51 +1,51 @@
-import { jsx as e, jsxs as W } from "react/jsx-runtime";
-import { forwardRef as X, useState as S, useEffect as Z } from "react";
-import { useIsDesktop as _ } from "../../hooks/use-is-desktop.js";
-import { useIsMobile as $ } from "../../hooks/use-is-mobile.js";
-import { Popover as g, PopoverTrigger as w, PopoverContent as T } from "../Popover/Popover.js";
+import { jsx as e, jsxs as U } from "react/jsx-runtime";
+import { forwardRef as W, useState as l, useEffect as X } from "react";
+import { useIsDesktop as Z } from "../../hooks/use-is-desktop.js";
+import { useIsMobile as _ } from "../../hooks/use-is-mobile.js";
+import { Popover as $, PopoverTrigger as w, PopoverContent as T } from "../Popover/Popover.js";
 import { getDateRange as a } from "./utils/getDateRange.js";
-import { typographyVariants as V } from "../Typography/Typography.js";
-import { Input as s } from "../Input/Input.js";
+import { typographyVariants as s } from "../Typography/Typography.js";
+import { Input as V } from "../Input/Input.js";
 import { formatDate as O } from "../Calendar/utils/formatDate.js";
 import { formatDateRange as h } from "../Calendar/utils/formatDateRange.js";
 import { Calendar as R } from "../Calendar/Calendar.js";
-import { cn as u } from "../../utils/cn.js";
+import { cn as b } from "../../utils/cn.js";
 import { CalendarBold as C } from "@solar-icons/react-perf";
-const N = X(
+const N = W(
   ({
     alignCalendar: j,
     mode: v,
     allowedPresets: x,
     dateFormatter: z,
-    value: f,
+    value: n,
     defaultValue: p,
     open: d,
     onOpenChange: r,
-    onChange: m,
+    onChange: f,
     classNames: t,
     error: B,
-    disabled: l,
+    disabled: S,
     hint: A,
     label: E,
     placeholder: P,
     avoidCollisions: Y = !0,
-    side: q = "bottom",
+    side: g = "bottom",
     renderCustomTrigger: I,
     shouldResetToDefaultValue: c,
-    required: G,
+    required: q,
     ...M
-  }, H) => {
-    const F = _(), J = $(), [K, y] = S(!1), L = typeof d == "boolean" ? d : K, [b, D] = S(
-      f ?? p
-    ), [o, n] = S(f ?? p);
-    Z(() => {
-      f !== void 0 && (D(f), n(f));
-    }, [f]);
-    const Q = x == null ? void 0 : x.map((i) => /* @__PURE__ */ e(
+  }, G) => {
+    const F = Z(), H = _(), [J, y] = l(!1), K = typeof d == "boolean" ? d : J, [u, k] = l(
+      n ?? p
+    ), [o, m] = l(n ?? p);
+    X(() => {
+      k(n), m(n);
+    }, [n]);
+    const L = x == null ? void 0 : x.map((i) => /* @__PURE__ */ e(
       "button",
       {
-        className: u(
-          V({
+        className: b(
+          s({
             variant: "cta",
             weight: "medium",
             size: "sm",
@@ -58,17 +58,17 @@ const N = X(
           t == null ? void 0 : t.leftPanelButton
         ),
         onClick: () => {
-          const U = a(i.type);
-          n(U);
+          const Q = a(i.type);
+          m(Q);
         },
         children: i.name
       },
       i.type
-    )), k = z ?? (v === "single" ? O : h);
-    return /* @__PURE__ */ W(
-      g,
+    )), D = z ?? (v === "single" ? O : h);
+    return /* @__PURE__ */ U(
+      $,
       {
-        open: L,
+        open: K,
         onOpenChange: (i) => {
           d === void 0 && y(i), r == null || r(i);
         },
@@ -76,27 +76,27 @@ const N = X(
           /* @__PURE__ */ e(
             w,
             {
-              className: u(
-                "group cursor-pointer rounded-full text-left focus-visible-default",
+              className: b(
+                "group cursor-pointer rounded-full text-left outline-0",
                 t == null ? void 0 : t.popoverTrigger
               ),
-              disabled: l,
+              disabled: S,
               children: I ? I() : /* @__PURE__ */ e(
-                s,
+                V,
                 {
-                  ref: H,
-                  value: b ? k(b) : "",
+                  ref: G,
+                  value: u ? D(u) : "",
                   placeholder: P,
                   error: B,
-                  disabled: l,
+                  disabled: S,
                   label: E,
                   hint: A,
                   tabIndex: -1,
-                  required: G,
-                  className: u(
+                  required: q,
+                  className: b(
                     "pointer-events-none",
                     t == null ? void 0 : t.input,
-                    "group-hover:border-comp-input-stroke-hover"
+                    "group-hover:border-comp-input-stroke-hover group-focus-visible:border-comp-input-stroke-focused"
                   ),
                   suffix: /* @__PURE__ */ e(C, { className: "size-icon-medium text-icon-dark-secondary-def" })
                 }
@@ -106,9 +106,9 @@ const N = X(
           /* @__PURE__ */ e(
             T,
             {
-              className: u("flex w-auto p-0", t == null ? void 0 : t.popoverContent),
+              className: b("flex w-auto p-0", t == null ? void 0 : t.popoverContent),
               align: j,
-              side: q,
+              side: g,
               avoidCollisions: Y,
               onOpenAutoFocus: (i) => i.preventDefault(),
               children: v === "single" ? /* @__PURE__ */ e(
@@ -117,15 +117,15 @@ const N = X(
                   ...M,
                   mode: "single",
                   selected: o,
-                  onReset: () => n(
-                    c ? p : b
+                  onReset: () => m(
+                    c ? p : u
                   ),
-                  onSelect: n,
+                  onSelect: m,
                   onConfirm: () => {
-                    (o !== void 0 || c) && (D(o), m == null || m(o)), d === void 0 && y(!1), r == null || r(!1);
+                    (o !== void 0 || c) && (k(o), f == null || f(o)), d === void 0 && y(!1), r == null || r(!1);
                   },
                   numberOfMonths: F ? 2 : 1,
-                  dateFormatter: k
+                  dateFormatter: D
                 }
               ) : /* @__PURE__ */ e(
                 R,
@@ -133,16 +133,16 @@ const N = X(
                   ...M,
                   mode: "range",
                   selected: o,
-                  onReset: () => n(
-                    c ? p : b
+                  onReset: () => m(
+                    c ? p : u
                   ),
-                  onSelect: n,
+                  onSelect: m,
                   onConfirm: () => {
-                    (o !== void 0 || c) && (D(o), m == null || m(o)), d === void 0 && y(!1), r == null || r(!1);
+                    (o !== void 0 || c) && (k(o), f == null || f(o)), d === void 0 && y(!1), r == null || r(!1);
                   },
                   numberOfMonths: F ? 2 : 1,
-                  leftPanelChildren: v === "range" && !J && Q,
-                  dateRangeFormatter: k
+                  leftPanelChildren: v === "range" && !H && L,
+                  dateRangeFormatter: D
                 }
               )
             }

package/dist/components/Lightbox/LightboxOverrides.css

@@ -1,5 +1,5 @@
-.pswp__button {
-  &:focus-visible {
-    outline: 1px solid var(--brand-primary);
-  }
-}
+.pswp__button {
+  &:focus-visible {
+    outline: 1px solid var(--brand-primary);
+  }
+}