@nphuonha/ui-kit 0.2.0 → 0.3.0

package/README.md

@@ -1,14 +1,28 @@
 # @nphuonha/ui-kit
 
-Solid, clean, flat, modern React UI kit. **Base UI** for behavior/a11y + owned tokens/styles + a consistent prop-driven API. Accent is vibrant by default and **customizable by color generation** (M3 Expressive-inspired, not M3 Expressive).
+Solid, clean, flat, modern React UI kit. **Base UI** for behavior/a11y + owned tokens/styles + a consistent prop-driven API. Accent is vibrant by default and customizable by color generation.
 
-> Status: MVP rewrite (single suite). Breaking changes from previous `warm-editorial`/`celebration` suites.
+> **v0.3.0** adds `BottomNav`, `DesktopNav` and `activeIcon` support for selected navigation items.
 
-## Install / use (workspace or package)
+- **Docs:** https://ui.nphuonha.id.vn
+- **Agent guide:** https://ui.nphuonha.id.vn/docs/agents
+- **llms.txt:** https://ui.nphuonha.id.vn/llms.txt
+
+## Install
+
+```bash
+npm install @nphuonha/ui-kit
+```
+
+Peer dependencies: React 19, React DOM 19, Tailwind CSS 4.
+
+The published package ships compiled ESM + `.d.ts`, so it works with Next.js, Vite, Remix and other bundlers. No `transpilePackages` step is required.
+
+## Usage
 
 ```tsx
 import "@nphuonha/ui-kit/styles.css";
-import { Button, Card, CardContent, Input, Toaster, accentStyle } from "@nphuonha/ui-kit";
+import { Button, Card, CardContent, Input, Toaster } from "@nphuonha/ui-kit";
 
 export function App() {
   return (
@@ -26,25 +40,26 @@ export function App() {
 ```
 
 - Scope tokens/overlays with `data-ui="kit"` (add to `<html>` for portalled overlays).
-- Dark mode: add `class="dark"` (and/or `data-ui="kit"` dark variant as supported by your setup).
-- Change accent at runtime: `style={accentStyle("#0d9488", "light")}` or `generateAccentVars(color, mode)` to override `--primary*`/`--ring`.
+- Dark mode: add the `dark` class to the same element.
+- Change the accent at runtime:
 
-### Framework setup
+```tsx
+import { accentStyle } from "@nphuonha/ui-kit";
 
-The published package ships compiled ESM + `.d.ts`, so it works with Next.js, Vite, Remix and other bundlers. **No `transpilePackages` is required for the published package.**
+<div data-ui="kit" style={accentStyle("#0d9488", "light")}>
+  <App />
+</div>
+```
 
-If you are consuming the TypeScript source from this monorepo instead, add:
+Or generate variables directly:
 
 ```ts
-// next.config.ts
-const nextConfig = {
-  transpilePackages: ["@nphuonha/ui-kit"],
-};
+import { generateAccentVars } from "@nphuonha/ui-kit";
 
-export default nextConfig;
+const vars = generateAccentVars("#0d9488", "dark");
 ```
 
-The published stylesheet scans its own components with `@source "./components"` inside `dist`. If your Tailwind setup ignores `@source` directives from dependencies, add this to your app CSS as a fallback:
+Tailwind v4: the package stylesheet imports Tailwind. If your setup ignores `@source` from dependencies, add:
 
 ```css
 @source "../node_modules/@nphuonha/ui-kit/dist/components";
@@ -62,19 +77,9 @@ import { Input } from "@nphuonha/ui-kit/input";
 
 Variants live in server-safe `*-variants.ts` files and can be used from server components.
 
-## Structure
-
-```
-src/components/ui/button/
-  button.tsx           # "use client" behavior/render
-  button-variants.ts   # cva, server-safe
-  button.test.tsx      # colocated test
-  index.ts             # explicit exports
-```
-
 ## Icons
 
-The kit uses **Phosphor** as its default internal icon set (check, minus, chevron, close, spinner). User-facing icons stay icon-agnostic — pass any icon component that accepts `size` and `className`:
+The kit uses **Phosphor** for its internal affordances (check, minus, chevron, close, spinner). User-facing icons are pack-agnostic — pass any component that accepts `size` and `className`:
 
 ```tsx
 <Button startIcon={Plus}>New item</Button>
@@ -82,7 +87,7 @@ The kit uses **Phosphor** as its default internal icon set (check, minus, chevro
 <Alert icon={Info} title="Heads up">...</Alert>
 ```
 
-Swap the internal set at any time with `IconProvider`:
+Swap the internal set with `IconProvider`:
 
 ```tsx
 import { IconProvider } from "@nphuonha/ui-kit";
@@ -97,41 +102,14 @@ import { Check, ChevronUpDown, Loader, Minus, X } from "your-icon-pack";
 
 `Toaster` also accepts an `icons` prop for `success`, `info`, `warning`, `error`, `loading` and `close`.
 
-The docs site uses Phosphor too. Swapping to another pack only affects the kit's internal affordances; icons you pass to `Button`, `IconButton` and `Alert` are always yours.
-
-## MVP components
+## Components
 
-`Button`, `IconButton`, `Input`, `Textarea`, `Field`/`Label`, `Checkbox`, `RadioGroup`, `Switch`, `Select`, `Dialog`, `Sheet`, `Popover`, `Tooltip`, `Tabs`, `Card` (+Header/Title/Description/Content/Footer), `Badge`, `Alert`, `Separator`, `Spinner`, `Toaster`/`toast`.
+`Button`, `IconButton`, `Input`, `Textarea`, `Field`/`Label`, `Checkbox`, `RadioGroup`, `Switch`, `Select`, `Dialog`, `Sheet`, `Popover`, `Tooltip`, `Tabs`, `BottomNav`, `DesktopNav`, `Card` (+Header/Title/Description/Content/Footer), `Badge`, `Alert`, `Separator`, `Spinner`, `Toaster`/`toast`.
 
-## Scripts
+`BottomNav` and `DesktopNav` items accept an optional `activeIcon` to swap to a filled or alternate icon when selected.
 
-```bash
-npm run build -w @nphuonha/ui-kit      # emit dist (ESM + .d.ts + CSS)
-npm run typecheck -w @nphuonha/ui-kit
-npm run test -w @nphuonha/ui-kit
-```
-
-## Publishing
-
-The package builds to `dist` as ESM + `.d.ts` with `npm run build`. `prepack` builds automatically before `npm pack`/`npm publish`; `prepublishOnly` runs typecheck + tests.
-
-```bash
-npm login
-npm publish -w @nphuonha/ui-kit
-```
-
-Or from the repo root:
-
-```bash
-npm run publish:kit
-```
-
-Bump the version with:
-
-```bash
-npm version patch -w @nphuonha/ui-kit
-```
+Live previews, code and API reference: https://ui.nphuonha.id.vn
 
-The published package is compiled and works with Vite, Remix, Next.js and plain bundler-based JS apps. The repository's docs app consumes the TypeScript source via a local path alias for fast iteration.
+## License
 
-See `CONVENTIONS.md` for design/API rules.
+MIT

package/dist/components/ui/bottom-nav/bottom-nav.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { type IconComponent } from "../../../lib/utils.js";
+export interface BottomNavItem {
+    value: string;
+    label: React.ReactNode;
+    icon: IconComponent;
+    activeIcon?: IconComponent;
+    href?: string;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface BottomNavProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "onChange"> {
+    items: BottomNavItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Pin the bar to the bottom of the viewport. */
+    fixed?: boolean;
+}
+export declare const BottomNav: React.ForwardRefExoticComponent<BottomNavProps & React.RefAttributes<HTMLElement>>;

package/dist/components/ui/bottom-nav/bottom-nav.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const BottomNav = React.forwardRef(({ items, value, defaultValue, onValueChange, fixed = false, className, "aria-label": ariaLabel = "Bottom navigation", ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const activeValue = value ?? uncontrolledValue;
+    const select = (next) => {
+        if (value === undefined)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    };
+    return (_jsx("nav", { ref: ref, "aria-label": ariaLabel, className: cn("surface-curved relative rounded-[24px] bg-card p-1.5 shadow-[var(--shadow-raised)]", fixed
+            ? "fixed inset-x-3 bottom-[calc(env(safe-area-inset-bottom)+0.75rem)] z-40 mx-auto max-w-md"
+            : "w-full", className), ...props, children: _jsx("div", { className: "flex items-stretch gap-1", children: items.map((item) => {
+                const active = item.value === activeValue;
+                const Icon = (active && item.activeIcon) || item.icon;
+                const content = (_jsxs(_Fragment, { children: [_jsxs("span", { className: cn("relative flex h-7 min-w-12 items-center justify-center rounded-pill px-2.5 transition-[background-color,color,box-shadow] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)]", active
+                                ? "bg-primary text-primary-foreground shadow-[var(--shadow-raised)]"
+                                : "text-muted-foreground group-hover:bg-surface group-hover:text-foreground"), children: [_jsx(Icon, { size: 18 }), item.badge != null ? (_jsx("span", { className: cn("absolute -right-1 -top-1 inline-flex min-w-4 items-center justify-center rounded-pill px-1 text-[9px] font-semibold leading-4", active
+                                        ? "bg-card text-foreground shadow-sm"
+                                        : "bg-primary text-primary-foreground"), children: item.badge })) : null] }), _jsx("span", { className: cn("max-w-full truncate text-[10px] font-medium leading-none tracking-[-0.01em]", active ? "font-semibold text-foreground" : "text-muted-foreground"), children: item.label })] }));
+                const itemClassName = cn("group relative flex min-w-0 flex-1 flex-col items-center justify-center gap-1 rounded-[18px] px-1 py-1.5 outline-none transition-colors duration-[var(--duration-ui)]", "focus-visible:ring-2 focus-visible:ring-ring/40", item.disabled && "pointer-events-none opacity-45");
+                if (item.href) {
+                    return (_jsx("a", { href: item.href, "aria-current": active ? "page" : undefined, "aria-disabled": item.disabled || undefined, tabIndex: item.disabled ? -1 : undefined, className: itemClassName, onClick: (event) => {
+                            if (item.disabled) {
+                                event.preventDefault();
+                                return;
+                            }
+                            select(item.value);
+                        }, children: content }, item.value));
+                }
+                return (_jsx("button", { type: "button", disabled: item.disabled, "aria-current": active ? "page" : undefined, className: itemClassName, onClick: () => select(item.value), children: content }, item.value));
+            }) }) }));
+});
+BottomNav.displayName = "BottomNav";

package/dist/components/ui/bottom-nav/index.d.ts

@@ -0,0 +1 @@
+export { BottomNav, type BottomNavItem, type BottomNavProps } from "./bottom-nav.js";

package/dist/components/ui/bottom-nav/index.js

@@ -0,0 +1 @@
+export { BottomNav } from "./bottom-nav.js";

package/dist/components/ui/desktop-nav/desktop-nav.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { type IconComponent } from "../../../lib/utils.js";
+export interface DesktopNavItem {
+    value: string;
+    label: React.ReactNode;
+    icon?: IconComponent;
+    activeIcon?: IconComponent;
+    href?: string;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface DesktopNavProps extends Omit<React.ComponentPropsWithoutRef<"nav">, "onChange"> {
+    items: DesktopNavItem[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+}
+export declare const DesktopNav: React.ForwardRefExoticComponent<DesktopNavProps & React.RefAttributes<HTMLElement>>;

package/dist/components/ui/desktop-nav/desktop-nav.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "../../../lib/utils.js";
+export const DesktopNav = React.forwardRef(({ items, value, defaultValue, onValueChange, className, "aria-label": ariaLabel = "Desktop navigation", ...props }, ref) => {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const activeValue = value ?? uncontrolledValue;
+    const select = (next) => {
+        if (value === undefined)
+            setUncontrolledValue(next);
+        onValueChange?.(next);
+    };
+    return (_jsx("nav", { ref: ref, "aria-label": ariaLabel, className: cn(
+        // Keep `relative`: surface-curved-soft paints an absolute ::before rim,
+        // which otherwise anchors to the nearest positioned ancestor.
+        "surface-curved-soft relative scrollbar-none inline-flex max-w-full items-center gap-0.5 overflow-x-auto rounded-pill bg-surface p-1", className), ...props, children: items.map((item) => {
+            const active = item.value === activeValue;
+            const Icon = (active && item.activeIcon) || item.icon;
+            const content = (_jsxs(_Fragment, { children: [Icon ? _jsx(Icon, { size: 15, className: "shrink-0" }) : null, _jsx("span", { className: "whitespace-nowrap", children: item.label }), item.badge != null ? (_jsx("span", { className: cn("ml-0.5 inline-flex min-w-4 items-center justify-center rounded-pill px-1 text-[10px] font-semibold leading-4", active
+                            ? "bg-primary-soft text-primary-soft-foreground"
+                            : "bg-surface-hover text-muted-foreground"), children: item.badge })) : null] }));
+            const itemClassName = cn("relative inline-flex h-9 shrink-0 items-center justify-center gap-2 rounded-pill px-3.5 text-sm font-medium outline-none transition-[background-color,color,box-shadow] duration-[var(--duration-ui)]", "focus-visible:ring-2 focus-visible:ring-ring/40", active
+                ? "surface-curved bg-card text-foreground shadow-sm"
+                : "text-muted-foreground hover:bg-card/60 hover:text-foreground", item.disabled && "pointer-events-none opacity-45");
+            if (item.href) {
+                return (_jsx("a", { href: item.href, "aria-current": active ? "page" : undefined, "aria-disabled": item.disabled || undefined, tabIndex: item.disabled ? -1 : undefined, className: itemClassName, onClick: (event) => {
+                        if (item.disabled) {
+                            event.preventDefault();
+                            return;
+                        }
+                        select(item.value);
+                    }, children: content }, item.value));
+            }
+            return (_jsx("button", { type: "button", disabled: item.disabled, "aria-current": active ? "page" : undefined, className: itemClassName, onClick: () => select(item.value), children: content }, item.value));
+        }) }));
+});
+DesktopNav.displayName = "DesktopNav";

package/dist/components/ui/desktop-nav/index.d.ts

@@ -0,0 +1 @@
+export { DesktopNav, type DesktopNavItem, type DesktopNavProps } from "./desktop-nav.js";

package/dist/components/ui/desktop-nav/index.js

@@ -0,0 +1 @@
+export { DesktopNav } from "./desktop-nav.js";

package/dist/components/ui/popover/popover.js

@@ -3,5 +3,5 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
 import { cn } from "../../../lib/utils.js";
 export function Popover({ trigger, children, title, description, side = "bottom", align = "center", open, defaultOpen, onOpenChange, className, }) {
-    return (_jsxs(PopoverPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(PopoverPrimitive.Trigger, { render: trigger }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { side: side, align: align, sideOffset: 8, children: _jsxs(PopoverPrimitive.Popup, { className: cn("surface-curved relative z-50 w-72 rounded-overlay bg-popover p-4 text-popover-foreground shadow-[var(--shadow-overlay)] outline-none", "origin-[var(--transform-origin)] transition-[opacity,transform] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)]", "data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]", className), children: [title ? _jsx(PopoverPrimitive.Title, { className: "text-sm font-semibold leading-none", children: title }) : null, description ? _jsx(PopoverPrimitive.Description, { className: "mt-1 text-sm text-muted-foreground", children: description }) : null, _jsx("div", { className: cn((title || description) && "mt-3"), children: children })] }) }) })] }));
+    return (_jsxs(PopoverPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(PopoverPrimitive.Trigger, { render: trigger }), _jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Positioner, { side: side, align: align, sideOffset: 8, className: "z-50", children: _jsxs(PopoverPrimitive.Popup, { className: cn("surface-curved relative z-50 w-72 rounded-overlay bg-popover p-4 text-popover-foreground shadow-[var(--shadow-overlay)] outline-none", "origin-[var(--transform-origin)] transition-[opacity,transform] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)]", "data-[starting-style]:opacity-0 data-[starting-style]:scale-[0.97] data-[ending-style]:opacity-0 data-[ending-style]:scale-[0.97]", className), children: [title ? _jsx(PopoverPrimitive.Title, { className: "text-sm font-semibold leading-none", children: title }) : null, description ? _jsx(PopoverPrimitive.Description, { className: "mt-1 text-sm text-muted-foreground", children: description }) : null, _jsx("div", { className: cn((title || description) && "mt-3"), children: children })] }) }) })] }));
 }

package/dist/components/ui/sheet/sheet.js

@@ -11,5 +11,5 @@ const sideStyles = {
 };
 export function Sheet({ open, defaultOpen, onOpenChange, trigger, title, description, children, footer, side = "right", className, showClose = true, }) {
     const CloseIcon = useKitIcon("close");
-    return (_jsxs(DialogPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [trigger ? _jsx(DialogPrimitive.Trigger, { render: trigger }) : null, _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { className: "fixed inset-0 z-50 bg-overlay backdrop-blur-[2px] transition-opacity duration-[var(--duration-ui-slow)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsxs(DialogPrimitive.Popup, { className: cn("surface-curved fixed z-50 flex flex-col gap-5 bg-popover p-6 text-popover-foreground shadow-[var(--shadow-overlay)] outline-none", "transition-transform duration-[var(--duration-ui-slow)] ease-[var(--ease-out-ui)]", sideStyles[side], className), children: [(title || description || showClose) && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "grid gap-1", children: [title ? _jsx(DialogPrimitive.Title, { className: "text-lg font-semibold tracking-[-0.02em] leading-tight", children: title }) : null, description ? _jsx(DialogPrimitive.Description, { className: "text-sm leading-relaxed text-muted-foreground", children: description }) : null] }), showClose ? (_jsx(DialogPrimitive.Close, { render: _jsx(IconButton, { "aria-label": "Close", variant: "ghost", size: "icon-sm", className: "-mr-2 -mt-2 shrink-0", children: _jsx(CloseIcon, { size: 16 }) }) })) : null] })), _jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: children }), footer ? _jsx("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: footer }) : null] })] })] }));
+    return (_jsxs(DialogPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [trigger ? _jsx(DialogPrimitive.Trigger, { render: trigger }) : null, _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Backdrop, { className: "fixed inset-0 z-50 bg-overlay backdrop-blur-[2px] transition-opacity duration-[var(--duration-ui-slow)] data-[starting-style]:opacity-0 data-[ending-style]:opacity-0" }), _jsxs(DialogPrimitive.Popup, { className: cn("surface-curved fixed z-50 flex flex-col gap-5 bg-popover p-6 text-popover-foreground shadow-[var(--shadow-overlay)] outline-none", "transition-transform duration-[var(--duration-ui-slow)] ease-[var(--ease-out-ui)]", sideStyles[side], className), children: [(title || description || showClose) && (_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "grid gap-1", children: [title ? _jsx(DialogPrimitive.Title, { className: "text-lg font-semibold tracking-[-0.02em] leading-tight", children: title }) : null, description ? _jsx(DialogPrimitive.Description, { className: "text-sm leading-relaxed text-muted-foreground", children: description }) : null] }), showClose ? (_jsx(DialogPrimitive.Close, { render: _jsx(IconButton, { "aria-label": "Close", variant: "ghost", size: "icon-sm", className: "-mr-2 -mt-2 shrink-0", children: _jsx(CloseIcon, { size: 16 }) }) })) : null] })), _jsx("div", { className: "-m-1 min-h-0 flex-1 overflow-auto p-1", children: children }), footer ? _jsx("div", { className: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", children: footer }) : null] })] })] }));
 }

package/dist/components/ui/tooltip/tooltip.js

@@ -5,5 +5,5 @@ import { cn } from "../../../lib/utils.js";
 export function Tooltip({ content, children, side = "top", align = "center", delay = 300, open, defaultOpen, onOpenChange, }) {
     if (content == null || content === "")
         return children;
-    return (_jsx(TooltipPrimitive.Provider, { delay: delay, children: _jsxs(TooltipPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(TooltipPrimitive.Trigger, { render: children }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { side: side, align: align, sideOffset: 6, children: _jsx(TooltipPrimitive.Popup, { role: "tooltip", className: cn("z-50 max-w-xs rounded-[10px] bg-foreground px-2.5 py-1.5 text-xs font-medium text-background shadow-[var(--shadow-overlay)]", "origin-[var(--transform-origin)] transition-[opacity,transform] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)]", "data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95"), children: content }) }) })] }) }));
+    return (_jsx(TooltipPrimitive.Provider, { delay: delay, children: _jsxs(TooltipPrimitive.Root, { open: open, defaultOpen: defaultOpen, onOpenChange: onOpenChange, children: [_jsx(TooltipPrimitive.Trigger, { render: children }), _jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { side: side, align: align, sideOffset: 6, className: "z-50", children: _jsx(TooltipPrimitive.Popup, { role: "tooltip", className: cn("z-50 max-w-xs rounded-[10px] bg-foreground px-2.5 py-1.5 text-xs font-medium text-background shadow-[var(--shadow-overlay)]", "origin-[var(--transform-origin)] transition-[opacity,transform] duration-[var(--duration-ui)] ease-[var(--ease-out-ui)]", "data-[starting-style]:opacity-0 data-[starting-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:scale-95"), children: content }) }) })] }) }));
 }

package/dist/index.d.ts

@@ -6,9 +6,11 @@ export { IconProvider, useKitIcon } from "./components/ui/_shared/icon-provider.
 export type { IconProviderProps, KitIcon, KitIconName, } from "./components/ui/_shared/icon-provider.js";
 export * from "./components/ui/alert/index.js";
 export * from "./components/ui/badge/index.js";
+export * from "./components/ui/bottom-nav/index.js";
 export * from "./components/ui/button/index.js";
 export * from "./components/ui/card/index.js";
 export * from "./components/ui/checkbox/index.js";
+export * from "./components/ui/desktop-nav/index.js";
 export * from "./components/ui/dialog/index.js";
 export * from "./components/ui/field/index.js";
 export * from "./components/ui/icon-button/index.js";

package/dist/index.js

@@ -8,9 +8,11 @@ export { generateAccentVars, accentStyle } from "./lib/color.js";
 export { IconProvider, useKitIcon } from "./components/ui/_shared/icon-provider.js";
 export * from "./components/ui/alert/index.js";
 export * from "./components/ui/badge/index.js";
+export * from "./components/ui/bottom-nav/index.js";
 export * from "./components/ui/button/index.js";
 export * from "./components/ui/card/index.js";
 export * from "./components/ui/checkbox/index.js";
+export * from "./components/ui/desktop-nav/index.js";
 export * from "./components/ui/dialog/index.js";
 export * from "./components/ui/field/index.js";
 export * from "./components/ui/icon-button/index.js";

package/package.json

@@ -1,9 +1,18 @@
 {
   "name": "@nphuonha/ui-kit",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Solid, clean, flat, modern React UI kit (Base UI + Tailwind v4).",
   "license": "MIT",
   "author": "nphuonha",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nphuonha2101/ui-kit.git",
+    "directory": "packages/ui-kit"
+  },
+  "homepage": "https://ui.nphuonha.id.vn",
+  "bugs": {
+    "url": "https://github.com/nphuonha2101/ui-kit/issues"
+  },
   "type": "module",
   "keywords": [
     "react",
@@ -38,6 +47,11 @@
       "import": "./dist/components/ui/badge/index.js",
       "default": "./dist/components/ui/badge/index.js"
     },
+    "./bottom-nav": {
+      "types": "./dist/components/ui/bottom-nav/index.d.ts",
+      "import": "./dist/components/ui/bottom-nav/index.js",
+      "default": "./dist/components/ui/bottom-nav/index.js"
+    },
     "./button": {
       "types": "./dist/components/ui/button/index.d.ts",
       "import": "./dist/components/ui/button/index.js",
@@ -53,6 +67,11 @@
       "import": "./dist/components/ui/checkbox/index.js",
       "default": "./dist/components/ui/checkbox/index.js"
     },
+    "./desktop-nav": {
+      "types": "./dist/components/ui/desktop-nav/index.d.ts",
+      "import": "./dist/components/ui/desktop-nav/index.js",
+      "default": "./dist/components/ui/desktop-nav/index.js"
+    },
     "./dialog": {
       "types": "./dist/components/ui/dialog/index.d.ts",
       "import": "./dist/components/ui/dialog/index.js",