@docubook/ui-react 2.0.0-beta.0 → 2.0.0-beta.3

package/dist/index.d.ts

@@ -1,15 +1,23 @@
-export { cn } from './cn.js';
-export { Input, InputColor, InputGroup, InputGroupProps, InputProps, InputSize } from './input.js';
-export { FnKey, FnKeyIcons, Kbd, KbdProps, KbdSize } from './kbd.js';
-export { Toggle, ToggleColor, ToggleGroup, ToggleGroupItem, ToggleGroupProps, ToggleProps, ToggleSize } from './toggle.js';
-export { Dropdown, DropdownItem, DropdownItemProps, DropdownLink, DropdownProps } from './dropdown.js';
-export { Modal, ModalProps, useModal } from './modal.js';
-export { Drawer, DrawerContent, DrawerProps, DrawerSidePanel, DrawerSidePanelProps, DrawerTrigger, DrawerTriggerProps, useDrawerState } from './drawer.js';
-export { Accordion, AccordionItem, AccordionProps, Collapse, CollapseProps } from './collapse.js';
-export { ThemeControllerToggle, ThemeControllerToggleProps } from './theme-controller.js';
-export { Logo, LogoProps, NavMenu, NavMenuItem, NavMenuLink, NavMenuProps, Navbar, NavbarProps } from './navbar.js';
-export { Breadcrumb, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbList, BreadcrumbPage, BreadcrumbProps } from './breadcrumbs.js';
-export { PaginationDocs, PaginationDocsProps } from './pagination.js';
-import 'clsx';
-import 'react';
-import './types-BZI5Cv8-.js';
+export { cn } from "./utils/cn";
+export { Input, InputGroup } from "./base/input";
+export type { InputProps, InputGroupProps, InputColor, InputSize } from "./base/input";
+export { Kbd, FnKey } from "./base/kbd";
+export type { KbdProps, KbdSize, FnKeyIcons } from "./base/kbd";
+export { Toggle, ToggleGroup } from "./base/toggle";
+export type { ToggleProps, ToggleGroupProps, ToggleGroupItem, ToggleColor, ToggleSize, } from "./base/toggle";
+export { Dropdown, DropdownItem, DropdownLink } from "./base/dropdown";
+export type { DropdownProps, DropdownItemProps } from "./base/dropdown";
+export { Modal, useModal } from "./base/modal";
+export type { ModalProps } from "./base/modal";
+export { Drawer, DrawerTrigger, DrawerSidePanel, DrawerContent, useDrawerState, } from "./base/drawer";
+export type { DrawerProps, DrawerTriggerProps, DrawerSidePanelProps } from "./base/drawer";
+export { Collapse, Accordion } from "./base/collapse";
+export type { CollapseProps, AccordionProps, AccordionItem } from "./base/collapse";
+export { ThemeControllerToggle } from "./base/theme-controller";
+export type { ThemeControllerToggleProps } from "./base/theme-controller";
+export { Navbar, Logo, NavMenu, NavMenuLink } from "./base/navbar";
+export type { NavbarProps, LogoProps, NavMenuItem, NavMenuProps } from "./base/navbar";
+export { Breadcrumb, BreadcrumbItem, BreadcrumbPage, BreadcrumbList } from "./base/breadcrumbs";
+export type { BreadcrumbProps, BreadcrumbItemProps } from "./base/breadcrumbs";
+export { PaginationDocs } from "./base/pagination";
+export type { PaginationDocsProps } from "./base/pagination";

package/dist/index.js

@@ -1,84 +1,13 @@
-import {
-  Modal,
-  useModal
-} from "./chunk-5UVG5YY5.js";
-import {
-  Logo,
-  NavMenu,
-  NavMenuLink,
-  Navbar
-} from "./chunk-RXFYKKNI.js";
-import {
-  PaginationDocs
-} from "./chunk-WY6GLRTT.js";
-import {
-  ThemeControllerToggle
-} from "./chunk-PFRBA5BH.js";
-import {
-  Toggle,
-  ToggleGroup
-} from "./chunk-ND7BTYGG.js";
-import {
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage
-} from "./chunk-OGI5BHGM.js";
-import {
-  Accordion,
-  Collapse
-} from "./chunk-FQQILPIP.js";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerSidePanel,
-  DrawerTrigger,
-  useDrawerState
-} from "./chunk-OTJGG73E.js";
-import {
-  Dropdown,
-  DropdownItem,
-  DropdownLink
-} from "./chunk-CNOJNKZ2.js";
-import {
-  Input,
-  InputGroup
-} from "./chunk-SX6DOGUE.js";
-import {
-  FnKey,
-  Kbd
-} from "./chunk-QOGH6NKS.js";
-import {
-  cn
-} from "./chunk-GRADTONK.js";
-export {
-  Accordion,
-  Breadcrumb,
-  BreadcrumbItem,
-  BreadcrumbList,
-  BreadcrumbPage,
-  Collapse,
-  Drawer,
-  DrawerContent,
-  DrawerSidePanel,
-  DrawerTrigger,
-  Dropdown,
-  DropdownItem,
-  DropdownLink,
-  FnKey,
-  Input,
-  InputGroup,
-  Kbd,
-  Logo,
-  Modal,
-  NavMenu,
-  NavMenuLink,
-  Navbar,
-  PaginationDocs,
-  ThemeControllerToggle,
-  Toggle,
-  ToggleGroup,
-  cn,
-  useDrawerState,
-  useModal
-};
+import { cn as e } from "./cn.js";
+import { Input as t, InputGroup as n } from "./input.js";
+import { FnKey as r, Kbd as i } from "./kbd.js";
+import { Toggle as a, ToggleGroup as o } from "./toggle.js";
+import { Dropdown as s, DropdownItem as c, DropdownLink as l } from "./dropdown.js";
+import { Modal as u, useModal as d } from "./modal.js";
+import { Drawer as f, DrawerContent as p, DrawerSidePanel as m, DrawerTrigger as h, useDrawerState as g } from "./drawer.js";
+import { Accordion as _, Collapse as v } from "./collapse.js";
+import { ThemeControllerToggle as y } from "./theme-controller.js";
+import { Logo as b, NavMenu as x, NavMenuLink as S, Navbar as C } from "./navbar.js";
+import { Breadcrumb as w, BreadcrumbItem as T, BreadcrumbList as E, BreadcrumbPage as D } from "./breadcrumbs.js";
+import { PaginationDocs as O } from "./pagination.js";
+export { _ as Accordion, w as Breadcrumb, T as BreadcrumbItem, E as BreadcrumbList, D as BreadcrumbPage, v as Collapse, f as Drawer, p as DrawerContent, m as DrawerSidePanel, h as DrawerTrigger, s as Dropdown, c as DropdownItem, l as DropdownLink, r as FnKey, t as Input, n as InputGroup, i as Kbd, b as Logo, u as Modal, x as NavMenu, S as NavMenuLink, C as Navbar, O as PaginationDocs, y as ThemeControllerToggle, a as Toggle, o as ToggleGroup, e as cn, g as useDrawerState, d as useModal };

package/dist/input.js

@@ -1,10 +1,22 @@
 "use client";
-import {
-  Input,
-  InputGroup
-} from "./chunk-SX6DOGUE.js";
-import "./chunk-GRADTONK.js";
-export {
-  Input,
-  InputGroup
-};
+import { cn as e } from "./cn.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/base/input.tsx
+var r = t(({ className: t, color: r, inputSize: i, ghost: a, ...o }, s) => /* @__PURE__ */ n("input", {
+	ref: s,
+	className: e("input", a && "input-ghost", r && `input-${r}`, i && `input-${i}`, t),
+	...o
+}));
+r.displayName = "Input";
+var i = t(({ children: t, className: r, ...i }, a) => /* @__PURE__ */ n("label", {
+	ref: a,
+	className: e("input", r),
+	...i,
+	children: t
+}));
+i.displayName = "InputGroup";
+//#endregion
+export { r as Input, i as InputGroup };
+
+//# sourceMappingURL=input.js.map

package/dist/input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","names":[],"sources":["../src/base/input.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport type { Color, Size } from \"../utils/types\";\n\ntype InputColor = Color;\ntype InputSize = Size | \"xl\";\n\ninterface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {\n  color?: InputColor;\n  inputSize?: InputSize;\n  ghost?: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(\n  ({ className, color, inputSize, ghost, ...props }, ref) => (\n    <input\n      ref={ref}\n      className={cn(\n        \"input\",\n        ghost && \"input-ghost\",\n        color && `input-${color}`,\n        inputSize && `input-${inputSize}`,\n        className\n      )}\n      {...props}\n    />\n  )\n);\nInput.displayName = \"Input\";\n\ninterface InputGroupProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  children: React.ReactNode;\n}\n\nexport const InputGroup = forwardRef<HTMLLabelElement, InputGroupProps>(\n  ({ children, className, ...props }, ref) => (\n    <label ref={ref} className={cn(\"input\", className)} {...props}>\n      {children}\n    </label>\n  )\n);\nInputGroup.displayName = \"InputGroup\";\n\nexport type { InputProps, InputGroupProps, InputColor, InputSize };\n"],"mappings":";;;;;AAcA,IAAa,IAAQ,GAClB,EAAE,cAAW,UAAO,cAAW,UAAO,GAAG,KAAS,MACjD,kBAAC,SAAD;CACO;CACL,WAAW,EACT,SACA,KAAS,eACT,KAAS,SAAS,KAClB,KAAa,SAAS,KACtB,CACF;CACA,GAAI;AACL,CAAA,CAEL;AACA,EAAM,cAAc;AAMpB,IAAa,IAAa,GACvB,EAAE,aAAU,cAAW,GAAG,KAAS,MAClC,kBAAC,SAAD;CAAY;CAAK,WAAW,EAAG,SAAS,CAAS;CAAG,GAAI;CACrD;AACI,CAAA,CAEX;AACA,EAAW,cAAc"}

package/dist/kbd.js

@@ -1,10 +1,76 @@
 "use client";
-import {
-  FnKey,
-  Kbd
-} from "./chunk-QOGH6NKS.js";
-import "./chunk-GRADTONK.js";
-export {
-  FnKey,
-  Kbd
+import { cn as e } from "./cn.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/base/kbd.tsx
+var r = t(({ children: t, className: r, size: i, ...a }, o) => /* @__PURE__ */ n("kbd", {
+	ref: o,
+	className: e("kbd", i && `kbd-${i}`, r),
+	...a,
+	children: t
+}));
+r.displayName = "Kbd";
+var i = {}, a = 12;
+function o({ icon: e, entity: t }) {
+	return e ? /* @__PURE__ */ n(e, { size: a }) : /* @__PURE__ */ n("span", {
+		style: { fontSize: a },
+		children: t
+	});
+}
+var s = {
+	configure(e) {
+		i = e;
+	},
+	Cmd: () => /* @__PURE__ */ n(o, {
+		icon: i.Command,
+		entity: "⌘"
+	}),
+	Option: () => /* @__PURE__ */ n(o, {
+		icon: i.Option,
+		entity: "⌥"
+	}),
+	Ctrl: () => /* @__PURE__ */ n(o, {
+		icon: i.ChevronUp,
+		entity: "⌃"
+	}),
+	Shift: () => /* @__PURE__ */ n(o, {
+		icon: i.ArrowBigUp,
+		entity: "⇧"
+	}),
+	Esc: () => /* @__PURE__ */ n(o, {
+		icon: i.CircleArrowOutUpLeft,
+		entity: "⎋"
+	}),
+	Space: () => /* @__PURE__ */ n(o, {
+		icon: i.Space,
+		entity: "␣"
+	}),
+	Delete: () => /* @__PURE__ */ n(o, {
+		icon: i.Delete,
+		entity: "⌫"
+	}),
+	Tab: () => /* @__PURE__ */ n(o, {
+		icon: i.ArrowRightToLine,
+		entity: "⇥"
+	}),
+	Up: () => /* @__PURE__ */ n(o, {
+		icon: i.ChevronUp,
+		entity: "↑"
+	}),
+	Down: () => /* @__PURE__ */ n(o, {
+		icon: i.ChevronDown,
+		entity: "↓"
+	}),
+	Left: () => /* @__PURE__ */ n(o, {
+		icon: i.ChevronLeft,
+		entity: "←"
+	}),
+	Right: () => /* @__PURE__ */ n(o, {
+		icon: i.ChevronRight,
+		entity: "→"
+	})
 };
+//#endregion
+export { s as FnKey, r as Kbd };
+
+//# sourceMappingURL=kbd.js.map

package/dist/kbd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.js","names":[],"sources":["../src/base/kbd.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport type { Size } from \"../utils/types\";\n\ntype KbdSize = Size | \"xl\";\n\ninterface KbdProps extends React.HTMLAttributes<HTMLElement> {\n  children: React.ReactNode;\n  size?: KbdSize;\n}\n\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(\n  ({ children, className, size, ...props }, ref) => (\n    <kbd ref={ref} className={cn(\"kbd\", size && `kbd-${size}`, className)} {...props}>\n      {children}\n    </kbd>\n  )\n);\nKbd.displayName = \"Kbd\";\n\nexport type { KbdProps, KbdSize };\n\ntype IconComponent = React.ComponentType<{ size?: number }>;\n\nexport interface FnKeyIcons {\n  Command?: IconComponent;\n  Option?: IconComponent;\n  ArrowBigUp?: IconComponent;\n  CircleArrowOutUpLeft?: IconComponent;\n  Space?: IconComponent;\n  Delete?: IconComponent;\n  ArrowRightToLine?: IconComponent;\n  ChevronUp?: IconComponent;\n  ChevronDown?: IconComponent;\n  ChevronLeft?: IconComponent;\n  ChevronRight?: IconComponent;\n}\n\nlet _icons: FnKeyIcons = {};\n\nconst iconSize = 12;\n\nfunction Key({ icon: Icon, entity }: { icon?: IconComponent; entity: string }): React.ReactElement {\n  if (Icon) return <Icon size={iconSize} />;\n  return <span style={{ fontSize: iconSize }}>{entity}</span>;\n}\n\nexport const FnKey = {\n  configure(icons: FnKeyIcons): void {\n    _icons = icons;\n  },\n  Cmd: () => <Key icon={_icons.Command} entity=\"⌘\" />,\n  Option: () => <Key icon={_icons.Option} entity=\"⌥\" />,\n  Ctrl: () => <Key icon={_icons.ChevronUp} entity=\"⌃\" />,\n  Shift: () => <Key icon={_icons.ArrowBigUp} entity=\"⇧\" />,\n  Esc: () => <Key icon={_icons.CircleArrowOutUpLeft} entity=\"⎋\" />,\n  Space: () => <Key icon={_icons.Space} entity=\"␣\" />,\n  Delete: () => <Key icon={_icons.Delete} entity=\"⌫\" />,\n  Tab: () => <Key icon={_icons.ArrowRightToLine} entity=\"⇥\" />,\n  Up: () => <Key icon={_icons.ChevronUp} entity=\"↑\" />,\n  Down: () => <Key icon={_icons.ChevronDown} entity=\"↓\" />,\n  Left: () => <Key icon={_icons.ChevronLeft} entity=\"←\" />,\n  Right: () => <Key icon={_icons.ChevronRight} entity=\"→\" />,\n};\n"],"mappings":";;;;;AAYA,IAAa,IAAM,GAChB,EAAE,aAAU,cAAW,SAAM,GAAG,KAAS,MACxC,kBAAC,OAAD;CAAU;CAAK,WAAW,EAAG,OAAO,KAAQ,OAAO,KAAQ,CAAS;CAAG,GAAI;CACxE;AACE,CAAA,CAET;AACA,EAAI,cAAc;AAoBlB,IAAI,IAAqB,CAAC,GAEpB,IAAW;AAEjB,SAAS,EAAI,EAAE,MAAM,GAAM,aAAwE;CAEjG,OADI,IAAa,kBAAC,GAAD,EAAM,MAAM,EAAW,CAAA,IACjC,kBAAC,QAAD;EAAM,OAAO,EAAE,UAAU,EAAS;EAAI,UAAA;CAAa,CAAA;AAC5D;AAEA,IAAa,IAAQ;CACnB,UAAU,GAAyB;EACjC,IAAS;CACX;CACA,WAAW,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAS,QAAO;CAAK,CAAA;CAClD,cAAc,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAQ,QAAO;CAAK,CAAA;CACpD,YAAY,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAW,QAAO;CAAK,CAAA;CACrD,aAAa,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAY,QAAO;CAAK,CAAA;CACvD,WAAW,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAsB,QAAO;CAAK,CAAA;CAC/D,aAAa,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAO,QAAO;CAAK,CAAA;CAClD,cAAc,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAQ,QAAO;CAAK,CAAA;CACpD,WAAW,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAkB,QAAO;CAAK,CAAA;CAC3D,UAAU,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAW,QAAO;CAAK,CAAA;CACnD,YAAY,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAa,QAAO;CAAK,CAAA;CACvD,YAAY,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAa,QAAO;CAAK,CAAA;CACvD,aAAa,kBAAC,GAAD;EAAK,MAAM,EAAO;EAAc,QAAO;CAAK,CAAA;AAC3D"}

package/dist/modal.js

@@ -1,10 +1,35 @@
 "use client";
-import {
-  Modal,
-  useModal
-} from "./chunk-5UVG5YY5.js";
-import "./chunk-GRADTONK.js";
-export {
-  Modal,
-  useModal
-};
+import { cn as e } from "./cn.js";
+import { forwardRef as t, useCallback as n, useRef as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/base/modal.tsx
+var o = t(({ children: t, className: n, closeOnBackdrop: r = !0, placement: o, boxClassName: s, ...c }, l) => /* @__PURE__ */ a("dialog", {
+	ref: l,
+	className: e("modal", o && `modal-${o}`, n),
+	...c,
+	children: [/* @__PURE__ */ i("div", {
+		className: e("modal-box", s),
+		children: t
+	}), r && /* @__PURE__ */ i("form", {
+		method: "dialog",
+		className: "modal-backdrop",
+		children: /* @__PURE__ */ i("button", { children: "esc" })
+	})]
+}));
+o.displayName = "Modal";
+function s() {
+	let e = r(null);
+	return {
+		ref: e,
+		open: n(() => {
+			e.current?.showModal(), setTimeout(() => {
+				e.current?.querySelector("input, [autofocus]")?.focus();
+			}, 0);
+		}, []),
+		close: n(() => e.current?.close(), [])
+	};
+}
+//#endregion
+export { o as Modal, s as useModal };
+
+//# sourceMappingURL=modal.js.map

package/dist/modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.js","names":[],"sources":["../src/base/modal.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useRef, useCallback } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport type { Placement } from \"../utils/types\";\n\ninterface ModalProps extends React.DialogHTMLAttributes<HTMLDialogElement> {\n  children: React.ReactNode;\n  closeOnBackdrop?: boolean;\n  placement?: Placement;\n  boxClassName?: string;\n}\n\nexport const Modal = forwardRef<HTMLDialogElement, ModalProps>(\n  ({ children, className, closeOnBackdrop = true, placement, boxClassName, ...props }, ref) => (\n    <dialog\n      ref={ref}\n      className={cn(\"modal\", placement && `modal-${placement}`, className)}\n      {...props}\n    >\n      <div className={cn(\"modal-box\", boxClassName)}>{children}</div>\n      {closeOnBackdrop && (\n        <form method=\"dialog\" className=\"modal-backdrop\">\n          <button>esc</button>\n        </form>\n      )}\n    </dialog>\n  )\n);\nModal.displayName = \"Modal\";\n\nexport function useModal() {\n  const ref = useRef<HTMLDialogElement>(null);\n  const open = useCallback(() => {\n    ref.current?.showModal();\n    setTimeout(() => {\n      ref.current?.querySelector<HTMLElement>(\"input, [autofocus]\")?.focus();\n    }, 0);\n  }, []);\n  const close = useCallback(() => ref.current?.close(), []);\n  return { ref, open, close };\n}\n\nexport type { ModalProps };\n"],"mappings":";;;;;AAaA,IAAa,IAAQ,GAClB,EAAE,aAAU,cAAW,qBAAkB,IAAM,cAAW,iBAAc,GAAG,KAAS,MACnF,kBAAC,UAAD;CACO;CACL,WAAW,EAAG,SAAS,KAAa,SAAS,KAAa,CAAS;CACnE,GAAI;CAHN,UAAA,CAKE,kBAAC,OAAD;EAAK,WAAW,EAAG,aAAa,CAAY;EAAI;CAAc,CAAA,GAC7D,KACC,kBAAC,QAAD;EAAM,QAAO;EAAS,WAAU;EAC9B,UAAA,kBAAC,UAAD,EAAA,UAAQ,MAAW,CAAA;CACf,CAAA,CAEF;AAEZ,CAAA,CAAA;AACA,EAAM,cAAc;AAEpB,SAAgB,IAAW;CACzB,IAAM,IAAM,EAA0B,IAAI;CAQ1C,OAAO;EAAE;EAAK,MAPD,QAAkB;GAE7B,AADA,EAAI,SAAS,UAAU,GACvB,iBAAiB;IACf,EAAI,SAAS,cAA2B,oBAAoB,CAAC,EAAE,MAAM;GACvE,GAAG,CAAC;EACN,GAAG,CAAC,CAEU;EAAM,OADN,QAAkB,EAAI,SAAS,MAAM,GAAG,CAAC,CACnC;CAAM;AAC5B"}

package/dist/navbar.js

@@ -1,13 +1,53 @@
-import {
-  Logo,
-  NavMenu,
-  NavMenuLink,
-  Navbar
-} from "./chunk-RXFYKKNI.js";
-import "./chunk-GRADTONK.js";
-export {
-  Logo,
-  NavMenu,
-  NavMenuLink,
-  Navbar
-};
+import { cn as e } from "./cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/base/navbar.tsx
+function r({ id: n, children: r, className: i, style: a }) {
+	return /* @__PURE__ */ t("nav", {
+		id: n,
+		className: e("navbar", i),
+		style: a,
+		children: r
+	});
+}
+function i({ src: r, alt: i, text: a, href: o = "/", className: s }) {
+	return /* @__PURE__ */ n("a", {
+		href: o,
+		className: e("flex items-center gap-2", s),
+		children: [r ? /* @__PURE__ */ t("img", {
+			src: r,
+			alt: i || a || "Logo",
+			className: "h-8 w-8"
+		}) : null, a && /* @__PURE__ */ t("span", {
+			className: "text-xl font-bold",
+			children: a
+		})]
+	});
+}
+function a({ items: n, activePath: r, className: i }) {
+	return /* @__PURE__ */ t("ul", {
+		className: e("menu menu-horizontal gap-1", i),
+		children: n.map((n) => {
+			let i = r ? n.href === "/" ? r === "/" : r === n.href || r.startsWith(n.href + "/") : !1;
+			return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t("a", {
+				href: n.href,
+				className: e(i && "active"),
+				target: n.isExternal ? "_blank" : void 0,
+				rel: n.isExternal ? "noopener noreferrer" : void 0,
+				children: n.title
+			}) }, n.href);
+		})
+	});
+}
+function o({ item: n, isActive: r, className: i }) {
+	return /* @__PURE__ */ t("a", {
+		href: n.href,
+		className: e(r && "active", i),
+		target: n.isExternal ? "_blank" : void 0,
+		rel: n.isExternal ? "noopener noreferrer" : void 0,
+		children: n.title
+	});
+}
+//#endregion
+export { i as Logo, a as NavMenu, o as NavMenuLink, r as Navbar };
+
+//# sourceMappingURL=navbar.js.map

package/dist/navbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navbar.js","names":[],"sources":["../src/base/navbar.tsx"],"sourcesContent":["import type { ReactNode, CSSProperties } from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport interface NavbarProps {\n  id?: string;\n  children?: ReactNode;\n  className?: string;\n  style?: CSSProperties;\n}\nexport interface LogoProps {\n  src?: string;\n  alt?: string;\n  text?: string;\n  href?: string;\n  className?: string;\n}\nexport interface NavMenuItem {\n  title: string;\n  href: string;\n  isExternal?: boolean;\n}\nexport interface NavMenuProps {\n  items: NavMenuItem[];\n  activePath?: string;\n  className?: string;\n}\n\nexport function Navbar({ id, children, className, style }: NavbarProps) {\n  return (\n    <nav id={id} className={cn(\"navbar\", className)} style={style}>\n      {children}\n    </nav>\n  );\n}\n\nexport function Logo({ src, alt, text, href = \"/\", className }: LogoProps) {\n  return (\n    <a href={href} className={cn(\"flex items-center gap-2\", className)}>\n      {src ? <img src={src} alt={alt || text || \"Logo\"} className=\"h-8 w-8\" /> : null}\n      {text && <span className=\"text-xl font-bold\">{text}</span>}\n    </a>\n  );\n}\n\nexport function NavMenu({ items, activePath, className }: NavMenuProps) {\n  return (\n    <ul className={cn(\"menu menu-horizontal gap-1\", className)}>\n      {items.map((item) => {\n        const isActive = activePath\n          ? item.href === \"/\"\n            ? activePath === \"/\"\n            : activePath === item.href || activePath.startsWith(item.href + \"/\")\n          : false;\n        return (\n          <li key={item.href}>\n            <a\n              href={item.href}\n              className={cn(isActive && \"active\")}\n              target={item.isExternal ? \"_blank\" : undefined}\n              rel={item.isExternal ? \"noopener noreferrer\" : undefined}\n            >\n              {item.title}\n            </a>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n\nexport function NavMenuLink({\n  item,\n  isActive,\n  className,\n}: {\n  item: NavMenuItem;\n  isActive?: boolean;\n  className?: string;\n}) {\n  return (\n    <a\n      href={item.href}\n      className={cn(isActive && \"active\", className)}\n      target={item.isExternal ? \"_blank\" : undefined}\n      rel={item.isExternal ? \"noopener noreferrer\" : undefined}\n    >\n      {item.title}\n    </a>\n  );\n}\n"],"mappings":";;;AA2BA,SAAgB,EAAO,EAAE,OAAI,aAAU,cAAW,YAAsB;CACtE,OACE,kBAAC,OAAD;EAAS;EAAI,WAAW,EAAG,UAAU,CAAS;EAAU;EACrD;CACE,CAAA;AAET;AAEA,SAAgB,EAAK,EAAE,QAAK,QAAK,SAAM,UAAO,KAAK,gBAAwB;CACzE,OACE,kBAAC,KAAD;EAAS;EAAM,WAAW,EAAG,2BAA2B,CAAS;EAAjE,UAAA,CACG,IAAM,kBAAC,OAAD;GAAU;GAAK,KAAK,KAAO,KAAQ;GAAQ,WAAU;EAAW,CAAA,IAAI,MAC1E,KAAQ,kBAAC,QAAD;GAAM,WAAU;GAAqB,UAAA;EAAW,CAAA,CACxD;;AAEP;AAEA,SAAgB,EAAQ,EAAE,UAAO,eAAY,gBAA2B;CACtE,OACE,kBAAC,MAAD;EAAI,WAAW,EAAG,8BAA8B,CAAS;EACtD,UAAA,EAAM,KAAK,MAAS;GACnB,IAAM,IAAW,IACb,EAAK,SAAS,MACZ,MAAe,MACf,MAAe,EAAK,QAAQ,EAAW,WAAW,EAAK,OAAO,GAAG,IACnE;GACJ,OACE,kBAAC,MAAD,EAAA,UACE,kBAAC,KAAD;IACE,MAAM,EAAK;IACX,WAAW,EAAG,KAAY,QAAQ;IAClC,QAAQ,EAAK,aAAa,WAAW,KAAA;IACrC,KAAK,EAAK,aAAa,wBAAwB,KAAA;IAE9C,UAAA,EAAK;GACL,CAAA,EACD,GATK,EAAK,IASV;EAER,CAAC;CACC,CAAA;AAER;AAEA,SAAgB,EAAY,EAC1B,SACA,aACA,gBAKC;CACD,OACE,kBAAC,KAAD;EACE,MAAM,EAAK;EACX,WAAW,EAAG,KAAY,UAAU,CAAS;EAC7C,QAAQ,EAAK,aAAa,WAAW,KAAA;EACrC,KAAK,EAAK,aAAa,wBAAwB,KAAA;EAE9C,UAAA,EAAK;CACL,CAAA;AAEP"}

package/dist/pagination.js

@@ -1,7 +1,60 @@
-import {
-  PaginationDocs
-} from "./chunk-WY6GLRTT.js";
-import "./chunk-GRADTONK.js";
-export {
-  PaginationDocs
-};
+import { cn as e } from "./cn.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/base/pagination.tsx
+function r({ prev: r, next: i, className: a, prevIcon: o, nextIcon: s, linkClassName: c }) {
+	return /* @__PURE__ */ n("nav", {
+		id: "pagination",
+		"aria-label": "Pagination",
+		className: e("bg-base-200/50 flex w-full gap-1 rounded-2xl p-1", a),
+		children: [r && /* @__PURE__ */ n("a", {
+			href: r.href,
+			rel: "prev",
+			"data-component-part": "pagination-prev",
+			className: e("group text-muted-foreground hover:bg-base-200/60 hover:text-base-content flex items-center justify-start gap-1.5 rounded-xl px-3 py-3 text-sm no-underline transition-colors", i && "w-[calc(30%-2px)]", c),
+			children: [o && /* @__PURE__ */ t("span", {
+				className: "flex shrink-0 items-center",
+				children: o
+			}), /* @__PURE__ */ t("span", {
+				"data-component-part": "pagination-label",
+				children: "Previous"
+			})]
+		}), i && /* @__PURE__ */ t("a", {
+			href: i.href,
+			rel: "next",
+			"data-component-part": "pagination-next",
+			className: e("group min-w-0 rounded-xl no-underline", r ? "w-[calc(70%-2px)]" : "w-full sm:ml-auto sm:w-1/2", c),
+			children: /* @__PURE__ */ n("div", {
+				className: "bg-primary/15 hover:bg-primary/20 hover:ring-primary/30 flex h-16 flex-1 items-center justify-end rounded-xl transition-shadow hover:ring-1",
+				children: [
+					/* @__PURE__ */ n("div", {
+						className: "flex min-w-0 flex-col items-end justify-center px-5",
+						children: [/* @__PURE__ */ t("div", {
+							"data-component-part": "pagination-title",
+							className: "text-primary w-full truncate text-right text-sm font-semibold",
+							children: i.title
+						}), i.description && /* @__PURE__ */ t("span", {
+							"data-component-part": "pagination-description",
+							className: "text-primary/75 hidden w-full max-w-72 truncate text-right text-xs sm:block",
+							children: i.description
+						})]
+					}),
+					/* @__PURE__ */ t("div", { className: "bg-primary/20 h-8 w-px" }),
+					/* @__PURE__ */ n("div", {
+						className: "text-primary/75 flex items-center gap-1.5 pr-3 pl-5 text-sm",
+						children: [/* @__PURE__ */ t("span", {
+							"data-component-part": "pagination-label",
+							children: "Next"
+						}), s && /* @__PURE__ */ t("span", {
+							className: "flex shrink-0 items-center",
+							children: s
+						})]
+					})
+				]
+			})
+		})]
+	});
+}
+//#endregion
+export { r as PaginationDocs };
+
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../src/base/pagination.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\nimport type { ReactNode } from \"react\";\n\nexport interface PaginationDocsProps {\n  prev?: { href: string; title: string };\n  next?: { href: string; title: string; description?: string };\n  className?: string;\n  prevIcon?: ReactNode;\n  nextIcon?: ReactNode;\n  linkClassName?: string;\n}\n\nexport function PaginationDocs({\n  prev,\n  next,\n  className,\n  prevIcon,\n  nextIcon,\n  linkClassName,\n}: PaginationDocsProps) {\n  return (\n    <nav\n      id=\"pagination\"\n      aria-label=\"Pagination\"\n      className={cn(\"bg-base-200/50 flex w-full gap-1 rounded-2xl p-1\", className)}\n    >\n      {prev && (\n        <a\n          href={prev.href}\n          rel=\"prev\"\n          data-component-part=\"pagination-prev\"\n          className={cn(\n            \"group text-muted-foreground hover:bg-base-200/60 hover:text-base-content flex items-center justify-start gap-1.5 rounded-xl px-3 py-3 text-sm no-underline transition-colors\",\n            // 30/70 split with next; calc subtracts half the gap so the two\n            // cards plus gap-1 fill the pill exactly. No min-w-0: the card\n            // floors at its content width, so a narrow screen never crushes\n            // the icon/text into the next card.\n            next && \"w-[calc(30%-2px)]\",\n            linkClassName\n          )}\n        >\n          {prevIcon && <span className=\"flex shrink-0 items-center\">{prevIcon}</span>}\n          <span data-component-part=\"pagination-label\">Previous</span>\n        </a>\n      )}\n      {next && (\n        <a\n          href={next.href}\n          rel=\"next\"\n          data-component-part=\"pagination-next\"\n          className={cn(\n            \"group min-w-0 rounded-xl no-underline\",\n            // Next-only (e.g. docs index): full width on mobile, half the\n            // container above 640px — pushed right like a forward button.\n            // With prev: calc-based 70% (minus half the gap) so the pair\n            // always fills the pill without overlapping.\n            prev ? \"w-[calc(70%-2px)]\" : \"w-full sm:ml-auto sm:w-1/2\",\n            linkClassName\n          )}\n        >\n          <div className=\"bg-primary/15 hover:bg-primary/20 hover:ring-primary/30 flex h-16 flex-1 items-center justify-end rounded-xl transition-shadow hover:ring-1\">\n            <div className=\"flex min-w-0 flex-col items-end justify-center px-5\">\n              <div\n                data-component-part=\"pagination-title\"\n                className=\"text-primary w-full truncate text-right text-sm font-semibold\"\n              >\n                {next.title}\n              </div>\n              {next.description && (\n                <span\n                  data-component-part=\"pagination-description\"\n                  className=\"text-primary/75 hidden w-full max-w-72 truncate text-right text-xs sm:block\"\n                >\n                  {next.description}\n                </span>\n              )}\n            </div>\n            <div className=\"bg-primary/20 h-8 w-px\" />\n            <div className=\"text-primary/75 flex items-center gap-1.5 pr-3 pl-5 text-sm\">\n              <span data-component-part=\"pagination-label\">Next</span>\n              {nextIcon && <span className=\"flex shrink-0 items-center\">{nextIcon}</span>}\n            </div>\n          </div>\n        </a>\n      )}\n    </nav>\n  );\n}\n"],"mappings":";;;AAYA,SAAgB,EAAe,EAC7B,SACA,SACA,cACA,aACA,aACA,oBACsB;CACtB,OACE,kBAAC,OAAD;EACE,IAAG;EACH,cAAW;EACX,WAAW,EAAG,oDAAoD,CAAS;EAH7E,UAAA,CAKG,KACC,kBAAC,KAAD;GACE,MAAM,EAAK;GACX,KAAI;GACJ,uBAAoB;GACpB,WAAW,EACT,gLAKA,KAAQ,qBACR,CACF;GAZF,UAAA,CAcG,KAAY,kBAAC,QAAD;IAAM,WAAU;IAA8B,UAAA;GAAe,CAAA,GAC1E,kBAAC,QAAD;IAAM,uBAAoB;IAAmB,UAAA;GAAc,CAAA,CAC1D;EAEJ,CAAA,GAAA,KACC,kBAAC,KAAD;GACE,MAAM,EAAK;GACX,KAAI;GACJ,uBAAoB;GACpB,WAAW,EACT,yCAKA,IAAO,sBAAsB,8BAC7B,CACF;GAEA,UAAA,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,OAAD;OACE,uBAAoB;OACpB,WAAU;OAET,UAAA,EAAK;MACH,CAAA,GACJ,EAAK,eACJ,kBAAC,QAAD;OACE,uBAAoB;OACpB,WAAU;OAET,UAAA,EAAK;MACF,CAAA,CAEL;;KACL,kBAAC,OAAD,EAAK,WAAU,yBAA0B,CAAA;KACzC,kBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,kBAAC,QAAD;OAAM,uBAAoB;OAAmB,UAAA;MAAU,CAAA,GACtD,KAAY,kBAAC,QAAD;OAAM,WAAU;OAA8B,UAAA;MAAe,CAAA,CACvE;;IACF;;EACJ,CAAA,CAEF;;AAET"}

package/dist/theme-controller.js

@@ -1,8 +1,51 @@
 "use client";
-import {
-  ThemeControllerToggle
-} from "./chunk-PFRBA5BH.js";
-import "./chunk-GRADTONK.js";
-export {
-  ThemeControllerToggle
-};
+import { cn as e } from "./cn.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/base/theme-controller.tsx
+function o(e) {
+	typeof document < "u" && document.documentElement.classList.toggle("dark", e === "dark");
+}
+function s(e) {
+	let r = n(!1);
+	t(() => {
+		r.current ||= (o(e), !0);
+	}, [e]);
+}
+function c({ defaultTheme: t = "light", lightTheme: n = "light", darkTheme: c = "dark", onThemeChange: l, className: u, label: d, size: f = "md", children: p }) {
+	let [m, h] = r(() => typeof window > "u" ? !1 : (localStorage.getItem("theme") || t) === c);
+	s(m ? c : n);
+	let g = (e) => {
+		let t = e ? c : n;
+		h(e), o(t), localStorage.setItem("theme", t), l?.(t);
+	};
+	if (p) return /* @__PURE__ */ i("div", {
+		className: u,
+		children: p({
+			isDark: m,
+			checked: m,
+			toggle: g
+		})
+	});
+	let _ = /* @__PURE__ */ i("input", {
+		type: "checkbox",
+		className: e("toggle theme-controller", `toggle-${f}`),
+		checked: m,
+		value: c,
+		onChange: (e) => g(e.target.checked)
+	});
+	return d ? /* @__PURE__ */ a("label", {
+		className: e("flex cursor-pointer items-center gap-3", u),
+		children: [_, /* @__PURE__ */ i("span", {
+			className: "text-base-content",
+			children: d
+		})]
+	}) : /* @__PURE__ */ i("div", {
+		className: u,
+		children: _
+	});
+}
+//#endregion
+export { c as ThemeControllerToggle };
+
+//# sourceMappingURL=theme-controller.js.map

package/dist/theme-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-controller.js","names":[],"sources":["../src/base/theme-controller.tsx"],"sourcesContent":["\"use client\";\n\nimport { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport type { Size } from \"../utils/types\";\n\nfunction applyTheme(theme: string) {\n  if (typeof document !== \"undefined\") {\n    document.documentElement.classList.toggle(\"dark\", theme === \"dark\");\n  }\n}\n\nfunction useApplyThemeOnMount(theme: string) {\n  const applied = useRef(false);\n  useEffect(() => {\n    if (!applied.current) {\n      applyTheme(theme);\n      applied.current = true;\n    }\n  }, [theme]);\n}\n\n// --- ThemeControllerToggle ---\n\nexport interface ThemeControllerToggleProps {\n  defaultTheme?: string;\n  lightTheme?: string;\n  darkTheme?: string;\n  onThemeChange?: (theme: string) => void;\n  className?: string;\n  label?: ReactNode;\n  size?: Size;\n  children?: (state: {\n    isDark: boolean;\n    checked: boolean;\n    toggle: (checked: boolean) => void;\n  }) => ReactNode;\n}\n\nexport function ThemeControllerToggle({\n  defaultTheme = \"light\",\n  lightTheme = \"light\",\n  darkTheme = \"dark\",\n  onThemeChange,\n  className,\n  label,\n  size = \"md\",\n  children,\n}: ThemeControllerToggleProps) {\n  const [checked, setChecked] = useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return (localStorage.getItem(\"theme\") || defaultTheme) === darkTheme;\n  });\n  useApplyThemeOnMount(checked ? darkTheme : lightTheme);\n\n  const handleChange = (newChecked: boolean) => {\n    const newTheme = newChecked ? darkTheme : lightTheme;\n    setChecked(newChecked);\n    applyTheme(newTheme);\n    localStorage.setItem(\"theme\", newTheme);\n    onThemeChange?.(newTheme);\n  };\n\n  if (children) {\n    return (\n      <div className={className}>\n        {children({ isDark: checked, checked, toggle: handleChange })}\n      </div>\n    );\n  }\n\n  const toggleEl = (\n    <input\n      type=\"checkbox\"\n      className={cn(\"toggle theme-controller\", `toggle-${size}`)}\n      checked={checked}\n      value={darkTheme}\n      onChange={(e) => handleChange(e.target.checked)}\n    />\n  );\n\n  if (!label) return <div className={className}>{toggleEl}</div>;\n  return (\n    <label className={cn(\"flex cursor-pointer items-center gap-3\", className)}>\n      {toggleEl}\n      <span className=\"text-base-content\">{label}</span>\n    </label>\n  );\n}\n"],"mappings":";;;;;AAMA,SAAS,EAAW,GAAe;CACjC,AAAI,OAAO,WAAa,OACtB,SAAS,gBAAgB,UAAU,OAAO,QAAQ,MAAU,MAAM;AAEtE;AAEA,SAAS,EAAqB,GAAe;CAC3C,IAAM,IAAU,EAAO,EAAK;CAC5B,QAAgB;EACd,AAEE,EAAQ,aADR,EAAW,CAAK,GACE;CAEtB,GAAG,CAAC,CAAK,CAAC;AACZ;AAmBA,SAAgB,EAAsB,EACpC,kBAAe,SACf,gBAAa,SACb,eAAY,QACZ,kBACA,cACA,UACA,UAAO,MACP,eAC6B;CAC7B,IAAM,CAAC,GAAS,KAAc,QACxB,OAAO,SAAW,MAAoB,MAClC,aAAa,QAAQ,OAAO,KAAK,OAAkB,CAC5D;CACD,EAAqB,IAAU,IAAY,CAAU;CAErD,IAAM,KAAgB,MAAwB;EAC5C,IAAM,IAAW,IAAa,IAAY;EAI1C,AAHA,EAAW,CAAU,GACrB,EAAW,CAAQ,GACnB,aAAa,QAAQ,SAAS,CAAQ,GACtC,IAAgB,CAAQ;CAC1B;CAEA,IAAI,GACF,OACE,kBAAC,OAAD;EAAgB;EACb,UAAA,EAAS;GAAE,QAAQ;GAAS;GAAS,QAAQ;EAAa,CAAC;CACzD,CAAA;CAIT,IAAM,IACJ,kBAAC,SAAD;EACE,MAAK;EACL,WAAW,EAAG,2BAA2B,UAAU,GAAM;EAChD;EACT,OAAO;EACP,WAAW,MAAM,EAAa,EAAE,OAAO,OAAO;CAC/C,CAAA;CAIH,OADK,IAEH,kBAAC,SAAD;EAAO,WAAW,EAAG,0CAA0C,CAAS;EAAxE,UAAA,CACG,GACD,kBAAC,QAAD;GAAM,WAAU;GAAqB,UAAA;EAAY,CAAA,CAC5C;MALU,kBAAC,OAAD;EAAgB;EAAY,UAAA;CAAc,CAAA;AAO/D"}

package/dist/toggle.js

@@ -1,10 +1,66 @@
 "use client";
-import {
-  Toggle,
-  ToggleGroup
-} from "./chunk-ND7BTYGG.js";
-import "./chunk-GRADTONK.js";
-export {
-  Toggle,
-  ToggleGroup
-};
+import { cn as e } from "./cn.js";
+import { forwardRef as t, useEffect as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/base/toggle.tsx
+var o = t(function({ color: t = "primary", size: r = "md", label: o, description: s, indeterminate: c = !1, containerClassName: l, labelClassName: u, descriptionClassName: d, className: f, disabled: p, checked: m, defaultChecked: h, onChange: g, ..._ }, v) {
+	n(() => {
+		if (c && v) {
+			let e = v.current;
+			e && (e.indeterminate = !0);
+		}
+	}, [v, c]);
+	let y = /* @__PURE__ */ i("input", {
+		ref: v,
+		type: "checkbox",
+		className: e(`toggle-${t}`, `toggle-${r}`, f),
+		disabled: p,
+		checked: m,
+		defaultChecked: h,
+		onChange: g,
+		"data-indeterminate": c,
+		..._
+	});
+	return o ? /* @__PURE__ */ a("label", {
+		className: e("flex items-start gap-3", p && "cursor-not-allowed opacity-50", l),
+		children: [/* @__PURE__ */ i("div", {
+			className: "flex items-center pt-0.5",
+			children: y
+		}), /* @__PURE__ */ a("div", {
+			className: "flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ i("span", {
+				className: e("text-base-content cursor-pointer", u),
+				children: o
+			}), s && /* @__PURE__ */ i("span", {
+				className: e("text-base-content/60 text-sm", d),
+				children: s
+			})]
+		})]
+	}) : y;
+});
+function s({ items: t, value: n, defaultValue: o = [], onChange: s, color: c = "primary", size: l = "md", controlled: u = !1, className: d }) {
+	let [f, p] = r(o), m = u ? n ?? f : f, h = (e) => {
+		let t = m.includes(e) ? m.filter((t) => t !== e) : [...m, e];
+		u || p(t), s?.(t);
+	};
+	return /* @__PURE__ */ i("div", {
+		className: e("flex flex-col gap-3", d),
+		children: t.map((t) => /* @__PURE__ */ a("label", {
+			className: e("flex items-center gap-3", t.disabled && "cursor-not-allowed opacity-50"),
+			children: [/* @__PURE__ */ i("input", {
+				type: "checkbox",
+				className: e(`toggle-${c}`, `toggle-${l}`),
+				checked: m.includes(t.value),
+				disabled: t.disabled,
+				onChange: () => !t.disabled && h(t.value)
+			}), /* @__PURE__ */ i("span", {
+				className: "text-base-content cursor-pointer",
+				children: t.label
+			})]
+		}, t.value))
+	});
+}
+//#endregion
+export { o as Toggle, s as ToggleGroup };
+
+//# sourceMappingURL=toggle.js.map

package/dist/toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle.js","names":[],"sources":["../src/base/toggle.tsx"],"sourcesContent":["\"use client\";\n\nimport { cn } from \"../utils/cn\";\nimport type { InputHTMLAttributes, ReactNode } from \"react\";\nimport { forwardRef, useState, useEffect } from \"react\";\nimport type { Color, Size } from \"../utils/types\";\n\ntype ToggleColor = Color;\ntype ToggleSize = Size;\n\ninterface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"type\" | \"size\"> {\n  color?: ToggleColor;\n  size?: ToggleSize;\n  label?: ReactNode;\n  description?: ReactNode;\n  indeterminate?: boolean;\n  containerClassName?: string;\n  labelClassName?: string;\n  descriptionClassName?: string;\n}\n\nconst Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(\n  {\n    color = \"primary\",\n    size = \"md\",\n    label,\n    description,\n    indeterminate = false,\n    containerClassName,\n    labelClassName,\n    descriptionClassName,\n    className,\n    disabled,\n    checked,\n    defaultChecked,\n    onChange,\n    ...props\n  },\n  ref\n) {\n  useEffect(() => {\n    if (indeterminate && ref) {\n      const input = (ref as React.RefObject<HTMLInputElement>).current;\n      if (input) input.indeterminate = true;\n    }\n  }, [ref, indeterminate]);\n\n  const toggleEl = (\n    <input\n      ref={ref}\n      type=\"checkbox\"\n      className={cn(`toggle-${color}`, `toggle-${size}`, className)}\n      disabled={disabled}\n      checked={checked}\n      defaultChecked={defaultChecked}\n      onChange={onChange}\n      data-indeterminate={indeterminate}\n      {...props}\n    />\n  );\n\n  if (!label) return toggleEl;\n\n  return (\n    <label\n      className={cn(\n        \"flex items-start gap-3\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        containerClassName\n      )}\n    >\n      <div className=\"flex items-center pt-0.5\">{toggleEl}</div>\n      <div className=\"flex flex-col gap-0.5\">\n        <span className={cn(\"text-base-content cursor-pointer\", labelClassName)}>{label}</span>\n        {description && (\n          <span className={cn(\"text-base-content/60 text-sm\", descriptionClassName)}>\n            {description}\n          </span>\n        )}\n      </div>\n    </label>\n  );\n});\n\ninterface ToggleGroupItem {\n  value: string;\n  label: ReactNode;\n  disabled?: boolean;\n}\n\ninterface ToggleGroupProps {\n  items: ToggleGroupItem[];\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (value: string[]) => void;\n  color?: ToggleColor;\n  size?: ToggleSize;\n  controlled?: boolean;\n  className?: string;\n}\n\nexport function ToggleGroup({\n  items,\n  value,\n  defaultValue = [],\n  onChange,\n  color = \"primary\",\n  size = \"md\",\n  controlled = false,\n  className,\n}: ToggleGroupProps) {\n  const [internalValue, setInternalValue] = useState<string[]>(defaultValue);\n  const selectedValues = controlled ? (value ?? internalValue) : internalValue;\n\n  const toggle = (itemValue: string) => {\n    const next = selectedValues.includes(itemValue)\n      ? selectedValues.filter((v) => v !== itemValue)\n      : [...selectedValues, itemValue];\n    if (!controlled) setInternalValue(next);\n    onChange?.(next);\n  };\n\n  return (\n    <div className={cn(\"flex flex-col gap-3\", className)}>\n      {items.map((item) => (\n        <label\n          key={item.value}\n          className={cn(\n            \"flex items-center gap-3\",\n            item.disabled && \"cursor-not-allowed opacity-50\"\n          )}\n        >\n          <input\n            type=\"checkbox\"\n            className={cn(`toggle-${color}`, `toggle-${size}`)}\n            checked={selectedValues.includes(item.value)}\n            disabled={item.disabled}\n            onChange={() => !item.disabled && toggle(item.value)}\n          />\n          <span className=\"text-base-content cursor-pointer\">{item.label}</span>\n        </label>\n      ))}\n    </div>\n  );\n}\n\nexport { Toggle };\nexport type { ToggleProps, ToggleGroupProps, ToggleGroupItem, ToggleColor, ToggleSize };\n"],"mappings":";;;;;AAqBA,IAAM,IAAS,EAA0C,SACvD,EACE,WAAQ,WACR,UAAO,MACP,UACA,gBACA,mBAAgB,IAChB,uBACA,mBACA,yBACA,cACA,aACA,YACA,mBACA,aACA,GAAG,KAEL,GACA;CACA,QAAgB;EACd,IAAI,KAAiB,GAAK;GACxB,IAAM,IAAS,EAA0C;GACzD,AAAI,MAAO,EAAM,gBAAgB;EACnC;CACF,GAAG,CAAC,GAAK,CAAa,CAAC;CAEvB,IAAM,IACJ,kBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAW,EAAG,UAAU,KAAS,UAAU,KAAQ,CAAS;EAClD;EACD;EACO;EACN;EACV,sBAAoB;EACpB,GAAI;CACL,CAAA;CAKH,OAFK,IAGH,kBAAC,SAAD;EACE,WAAW,EACT,0BACA,KAAY,iCACZ,CACF;EALF,UAAA,CAOE,kBAAC,OAAD;GAAK,WAAU;GAA4B,UAAA;EAAc,CAAA,GACzD,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,QAAD;IAAM,WAAW,EAAG,oCAAoC,CAAc;IAAI,UAAA;GAAY,CAAA,GACrF,KACC,kBAAC,QAAD;IAAM,WAAW,EAAG,gCAAgC,CAAoB;IACrE,UAAA;GACG,CAAA,CAEL;EACA,CAAA,CAAA;MAnBU;AAqBrB,CAAC;AAmBD,SAAgB,EAAY,EAC1B,UACA,UACA,kBAAe,CAAC,GAChB,aACA,WAAQ,WACR,UAAO,MACP,gBAAa,IACb,gBACmB;CACnB,IAAM,CAAC,GAAe,KAAoB,EAAmB,CAAY,GACnE,IAAiB,IAAc,KAAS,IAAiB,GAEzD,KAAU,MAAsB;EACpC,IAAM,IAAO,EAAe,SAAS,CAAS,IAC1C,EAAe,QAAQ,MAAM,MAAM,CAAS,IAC5C,CAAC,GAAG,GAAgB,CAAS;EAEjC,AADK,KAAY,EAAiB,CAAI,GACtC,IAAW,CAAI;CACjB;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,uBAAuB,CAAS;EAChD,UAAA,EAAM,KAAK,MACV,kBAAC,SAAD;GAEE,WAAW,EACT,2BACA,EAAK,YAAY,+BACnB;GALF,UAAA,CAOE,kBAAC,SAAD;IACE,MAAK;IACL,WAAW,EAAG,UAAU,KAAS,UAAU,GAAM;IACjD,SAAS,EAAe,SAAS,EAAK,KAAK;IAC3C,UAAU,EAAK;IACf,gBAAgB,CAAC,EAAK,YAAY,EAAO,EAAK,KAAK;GACpD,CAAA,GACD,kBAAC,QAAD;IAAM,WAAU;IAAoC,UAAA,EAAK;GAAY,CAAA,CAChE;EAdA,GAAA,EAAK,KAcL,CACR;CACE,CAAA;AAET"}

package/dist/utils/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;