@zentauri-ui/zentauri-components 2.1.6 → 2.1.8

package/dist/chunk-IHDM7AHY.mjs

@@ -0,0 +1,233 @@
+import { useClickOutside } from './chunk-VXDEPZKH.mjs';
+import { zuiDropdownTriggerBase, zuiDropdownTriggerSizes, zuiDropdownTriggerVariants, zuiDropdownContentBase, zuiDropdownSpacing, zuiDropdownPlacements, zuiDropdownItemBase, zuiDropdownItemVariants } from './chunk-QX6PPTWL.mjs';
+import { cn } from './chunk-4D54YOL6.mjs';
+import { createContext, useId, useState, useRef, useEffect, useContext } from 'react';
+import { FiCheck } from 'react-icons/fi';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var triggerVariants = cva(zuiDropdownTriggerBase, {
+  variants: {
+    variant: zuiDropdownTriggerVariants,
+    size: zuiDropdownTriggerSizes
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md"
+  }
+});
+var contentVariants = cva(zuiDropdownContentBase, {
+  variants: {
+    placement: zuiDropdownPlacements,
+    spacing: zuiDropdownSpacing
+  },
+  defaultVariants: {
+    placement: "bottom",
+    spacing: "default"
+  }
+});
+var itemVariants = cva(zuiDropdownItemBase, {
+  variants: {
+    variant: zuiDropdownItemVariants
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var DropdownContext = createContext(null);
+var useDropdown = () => {
+  const ctx = useContext(DropdownContext);
+  if (!ctx) throw new Error("Use inside Dropdown");
+  return ctx;
+};
+var Dropdown = ({
+  children,
+  className,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  multiSelect = false,
+  ...props
+}) => {
+  const menuId = `${useId()}-menu`;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const [selectedValues, setSelectedValues] = useState([]);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = (val) => {
+    if (controlledOpen !== void 0) {
+      onOpenChange?.(val);
+    } else {
+      setUncontrolledOpen(val);
+    }
+  };
+  const toggle = () => setOpen(!open);
+  const toggleSelect = (value) => {
+    if (!multiSelect) {
+      setSelectedValues([value]);
+      setOpen(false);
+      return;
+    }
+    setSelectedValues(
+      (prev) => prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value]
+    );
+  };
+  return /* @__PURE__ */ jsx(
+    DropdownContext.Provider,
+    {
+      value: {
+        open,
+        setOpen,
+        toggle,
+        selectedValues,
+        toggleSelect,
+        multiSelect,
+        menuId
+      },
+      children: /* @__PURE__ */ jsx("div", { className: cn("relative inline-block", className), ...props, children })
+    }
+  );
+};
+var DropdownTrigger = ({
+  children,
+  className,
+  variant,
+  size,
+  onClick,
+  ...props
+}) => {
+  const { toggle, open, menuId } = useDropdown();
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-expanded": open,
+      "aria-haspopup": "menu",
+      "aria-controls": menuId,
+      className: cn(triggerVariants({ variant, size }), className),
+      ...props,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          toggle();
+        }
+      },
+      children
+    }
+  );
+};
+var DropdownContent = ({
+  children,
+  className,
+  placement = "bottom",
+  spacing = "default",
+  divider,
+  ...props
+}) => {
+  const { open, setOpen, menuId } = useDropdown();
+  const ref = useRef(null);
+  useClickOutside({ ref, setOpen });
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    ref.current?.querySelector('[role="menuitem"]')?.focus();
+  }, [open]);
+  if (!open) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      id: menuId,
+      role: "menu",
+      className: cn(
+        contentVariants({ placement, spacing }),
+        className,
+        divider && "divide-y divide-current"
+      ),
+      ...props,
+      children
+    }
+  );
+};
+var DropdownItem = ({
+  children,
+  value,
+  className,
+  variant,
+  onClick,
+  onKeyDown,
+  onSelect,
+  leftIcon,
+  rightIcon,
+  ...props
+}) => {
+  const { toggleSelect, selectedValues } = useDropdown();
+  const isSelected = value !== void 0 && selectedValues.includes(value);
+  const handleClick = () => {
+    if (value !== void 0) toggleSelect(value);
+    onSelect?.();
+  };
+  const focusSiblingItem = (event, direction) => {
+    const menu = event.currentTarget.closest('[role="menu"]');
+    const items = Array.from(
+      menu?.querySelectorAll('[role="menuitem"]') ?? []
+    );
+    const currentIndex = items.indexOf(event.currentTarget);
+    if (currentIndex === -1 || items.length === 0) {
+      return;
+    }
+    const nextIndex = direction === "first" ? 0 : direction === "last" ? items.length - 1 : (currentIndex + (direction === "next" ? 1 : -1) + items.length) % items.length;
+    items[nextIndex]?.focus();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "menuitem",
+      tabIndex: -1,
+      onClick: (event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) {
+          handleClick();
+        }
+      },
+      onKeyDown: (e) => {
+        onKeyDown?.(e);
+        if (e.defaultPrevented) {
+          return;
+        }
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        } else if (e.key === "ArrowDown") {
+          e.preventDefault();
+          focusSiblingItem(e, "next");
+        } else if (e.key === "ArrowUp") {
+          e.preventDefault();
+          focusSiblingItem(e, "previous");
+        } else if (e.key === "Home") {
+          e.preventDefault();
+          focusSiblingItem(e, "first");
+        } else if (e.key === "End") {
+          e.preventDefault();
+          focusSiblingItem(e, "last");
+        }
+      },
+      className: cn(itemVariants({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          leftIcon,
+          children
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          isSelected && /* @__PURE__ */ jsx(FiCheck, {}),
+          rightIcon
+        ] })
+      ]
+    }
+  );
+};
+
+export { Dropdown, DropdownContent, DropdownItem, DropdownTrigger, contentVariants, itemVariants, triggerVariants };
+//# sourceMappingURL=chunk-IHDM7AHY.mjs.map
+//# sourceMappingURL=chunk-IHDM7AHY.mjs.map

package/dist/chunk-IHDM7AHY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/dropdown/variants.ts","../src/ui/dropdown/dropdown.tsx"],"names":[],"mappings":"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","file":"chunk-IHDM7AHY.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiDropdownContentBase,\n  zuiDropdownItemBase,\n  zuiDropdownItemVariants,\n  zuiDropdownPlacements,\n  zuiDropdownSpacing,\n  zuiDropdownTriggerBase,\n  zuiDropdownTriggerSizes,\n  zuiDropdownTriggerVariants,\n} from \"../../design-system/dropdown\";\n\nexport const triggerVariants = cva(zuiDropdownTriggerBase, {\n  variants: {\n    variant: zuiDropdownTriggerVariants,\n    size: zuiDropdownTriggerSizes,\n  },\n  defaultVariants: {\n    variant: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const contentVariants = cva(zuiDropdownContentBase, {\n  variants: {\n    placement: zuiDropdownPlacements,\n    spacing: zuiDropdownSpacing,\n  },\n  defaultVariants: {\n    placement: \"bottom\",\n    spacing: \"default\",\n  },\n});\n\nexport const itemVariants = cva(zuiDropdownItemBase, {\n  variants: {\n    variant: zuiDropdownItemVariants,\n  },\n  defaultVariants: {\n    variant: \"default\",\n  },\n});\n","\"use client\";\n\nimport {\n  createContext,\n  useContext,\n  useState,\n  useRef,\n  useEffect,\n  useId,\n  type KeyboardEvent,\n} from \"react\";\nimport { FiCheck } from \"react-icons/fi\";\nimport { cn } from \"../../lib/utils\";\nimport type {\n  DropdownContextType,\n  DropdownProps,\n  DropdownTriggerProps,\n  DropdownContentProps,\n  DropdownItemProps,\n} from \"./types\";\nimport { triggerVariants, contentVariants, itemVariants } from \"./variants\";\nimport { useClickOutside } from \"../../hooks/useClickOutside\";\n\n/* =========================\n   Context\n========================= */\nconst DropdownContext = createContext<DropdownContextType | null>(null);\n\nconst useDropdown = () => {\n  const ctx = useContext(DropdownContext);\n  if (!ctx) throw new Error(\"Use inside Dropdown\");\n  return ctx;\n};\n\n/* =========================\n   Root\n========================= */\nexport const Dropdown = ({\n  children,\n  className,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  multiSelect = false,\n  ...props\n}: DropdownProps) => {\n  const menuId = `${useId()}-menu`;\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);\n  const [selectedValues, setSelectedValues] = useState<string[]>([]);\n\n  const open = controlledOpen ?? uncontrolledOpen;\n\n  const setOpen = (val: boolean) => {\n    if (controlledOpen !== undefined) {\n      onOpenChange?.(val);\n    } else {\n      setUncontrolledOpen(val);\n    }\n  };\n\n  const toggle = () => setOpen(!open);\n\n  const toggleSelect = (value: string) => {\n    if (!multiSelect) {\n      setSelectedValues([value]);\n      setOpen(false);\n      return;\n    }\n\n    setSelectedValues((prev) =>\n      prev.includes(value) ? prev.filter((v) => v !== value) : [...prev, value],\n    );\n  };\n\n  return (\n    <DropdownContext.Provider\n      value={{\n        open,\n        setOpen,\n        toggle,\n        selectedValues,\n        toggleSelect,\n        multiSelect,\n        menuId,\n      }}\n    >\n      <div className={cn(\"relative inline-block\", className)} {...props}>\n        {children}\n      </div>\n    </DropdownContext.Provider>\n  );\n};\n\n/* =========================\n   Trigger\n========================= */\nexport const DropdownTrigger = ({\n  children,\n  className,\n  variant,\n  size,\n  onClick,\n  ...props\n}: DropdownTriggerProps) => {\n  const { toggle, open, menuId } = useDropdown();\n\n  return (\n    <button\n      type=\"button\"\n      aria-expanded={open}\n      aria-haspopup=\"menu\"\n      aria-controls={menuId}\n      className={cn(triggerVariants({ variant, size }), className)}\n      {...props}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) {\n          toggle();\n        }\n      }}\n    >\n      {children}\n    </button>\n  );\n};\n\n/* =========================\n   Content\n========================= */\nexport const DropdownContent = ({\n  children,\n  className,\n  placement = \"bottom\",\n  spacing = \"default\",\n  divider,\n  ...props\n}: DropdownContentProps) => {\n  const { open, setOpen, menuId } = useDropdown();\n  const ref = useRef<HTMLDivElement>(null);\n\n  // click outside\n  useClickOutside({ ref, setOpen });\n\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n\n    ref.current?.querySelector<HTMLElement>('[role=\"menuitem\"]')?.focus();\n  }, [open]);\n\n  if (!open) return null;\n\n  return (\n    <div\n      ref={ref}\n      id={menuId}\n      role=\"menu\"\n      className={cn(\n        contentVariants({ placement, spacing }),\n        className,\n        divider && \"divide-y divide-current\",\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n\n/* =========================\n   Item\n========================= */\nexport const DropdownItem = ({\n  children,\n  value,\n  className,\n  variant,\n  onClick,\n  onKeyDown,\n  onSelect,\n  leftIcon,\n  rightIcon,\n  ...props\n}: DropdownItemProps) => {\n  const { toggleSelect, selectedValues } = useDropdown();\n  const isSelected = value !== undefined && selectedValues.includes(value);\n\n  const handleClick = () => {\n    if (value !== undefined) toggleSelect(value);\n    onSelect?.();\n  };\n\n  const focusSiblingItem = (\n    event: KeyboardEvent<HTMLDivElement>,\n    direction: \"next\" | \"previous\" | \"first\" | \"last\",\n  ) => {\n    const menu = event.currentTarget.closest('[role=\"menu\"]');\n    const items = Array.from(\n      menu?.querySelectorAll<HTMLElement>('[role=\"menuitem\"]') ?? [],\n    );\n    const currentIndex = items.indexOf(event.currentTarget);\n\n    if (currentIndex === -1 || items.length === 0) {\n      return;\n    }\n\n    const nextIndex =\n      direction === \"first\"\n        ? 0\n        : direction === \"last\"\n          ? items.length - 1\n          : (currentIndex + (direction === \"next\" ? 1 : -1) + items.length) %\n            items.length;\n\n    items[nextIndex]?.focus();\n  };\n\n  return (\n    <div\n      role=\"menuitem\"\n      tabIndex={-1}\n      onClick={(event) => {\n        onClick?.(event);\n        if (!event.defaultPrevented) {\n          handleClick();\n        }\n      }}\n      onKeyDown={(e) => {\n        onKeyDown?.(e);\n        if (e.defaultPrevented) {\n          return;\n        }\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          handleClick();\n        } else if (e.key === \"ArrowDown\") {\n          e.preventDefault();\n          focusSiblingItem(e, \"next\");\n        } else if (e.key === \"ArrowUp\") {\n          e.preventDefault();\n          focusSiblingItem(e, \"previous\");\n        } else if (e.key === \"Home\") {\n          e.preventDefault();\n          focusSiblingItem(e, \"first\");\n        } else if (e.key === \"End\") {\n          e.preventDefault();\n          focusSiblingItem(e, \"last\");\n        }\n      }}\n      className={cn(itemVariants({ variant }), className)}\n      {...props}\n    >\n      <div className=\"flex items-center gap-2\">\n        {leftIcon}\n        {children}\n      </div>\n\n      <div className=\"flex items-center gap-2\">\n        {isSelected && <FiCheck />}\n        {rightIcon}\n      </div>\n    </div>\n  );\n};\n"]}

package/dist/chunk-L5QORCUO.js

@@ -0,0 +1,225 @@
+'use strict';
+
+var chunk2VUMVDR3_js = require('./chunk-2VUMVDR3.js');
+var chunk6OVDBAMI_js = require('./chunk-6OVDBAMI.js');
+var chunkDPNTQ4AK_js = require('./chunk-DPNTQ4AK.js');
+var chunkZS5756ZC_js = require('./chunk-ZS5756ZC.js');
+var react = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+var paginationListVariants = classVarianceAuthority.cva(chunkDPNTQ4AK_js.zuiPaginationListBase, {
+  variants: {
+    appearance: chunkDPNTQ4AK_js.zuiPaginationListAppearances,
+    size: chunkDPNTQ4AK_js.zuiPaginationListSizes
+  },
+  defaultVariants: {
+    appearance: "default",
+    size: "md"
+  }
+});
+var paginationEllipsisVariants = classVarianceAuthority.cva(chunkDPNTQ4AK_js.zuiPaginationEllipsisBase, {
+  variants: {
+    size: chunkDPNTQ4AK_js.zuiPaginationEllipsisSizes
+  },
+  defaultVariants: { size: "md" }
+});
+var defaultPrevLabel = "Previous page";
+var defaultNextLabel = "Next page";
+var defaultEllipsisLabel = "More pages";
+var Pagination = ({
+  className,
+  appearance = "default",
+  size = "md",
+  pageCount,
+  page,
+  defaultPage = 1,
+  onPageChange,
+  siblingCount = 1,
+  boundaryCount = 1,
+  showPrevNext = true,
+  prevLabel = defaultPrevLabel,
+  nextLabel = defaultNextLabel,
+  ellipsisLabel = defaultEllipsisLabel,
+  getPageHref,
+  "aria-label": ariaLabel = "Pagination",
+  ref,
+  ...rest
+}) => {
+  const id = react.useId();
+  const listId = `${id}-list`;
+  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } = chunk2VUMVDR3_js.usePagination({
+    pageCount,
+    page,
+    defaultPage,
+    siblingCount,
+    boundaryCount,
+    onPageChange
+  });
+  const handleKeyDown = react.useCallback(
+    (event) => {
+      if (pageCount <= 0) {
+        return;
+      }
+      if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+        event.preventDefault();
+        if (canGoNext) {
+          setPage(currentPage + 1);
+        }
+      } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+        event.preventDefault();
+        if (canGoPrev) {
+          setPage(currentPage - 1);
+        }
+      } else if (event.key === "Home") {
+        event.preventDefault();
+        setPage(1);
+      } else if (event.key === "End") {
+        event.preventDefault();
+        setPage(pageCount);
+      }
+    },
+    [canGoNext, canGoPrev, currentPage, pageCount, setPage]
+  );
+  if (pageCount <= 0) {
+    return null;
+  }
+  const inactiveTriggerClass = chunkZS5756ZC_js.cn(
+    chunk6OVDBAMI_js.buttonVariants({ appearance: "ghost", size }),
+    "bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10"
+  );
+  const currentTriggerClass = chunk6OVDBAMI_js.buttonVariants({ appearance, size });
+  const triggerFocusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950";
+  const renderPageControl = (pageNumber) => {
+    const isCurrent = pageNumber === currentPage;
+    const href = getPageHref?.(pageNumber);
+    const shared = chunkZS5756ZC_js.cn(
+      isCurrent ? currentTriggerClass : inactiveTriggerClass,
+      "min-w-[2.25ch] shrink-0",
+      triggerFocusRing
+    );
+    if (href) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          "data-slot": "pagination-trigger",
+          href,
+          "aria-label": `Page ${pageNumber}`,
+          "aria-current": isCurrent ? "page" : void 0,
+          className: shared,
+          children: pageNumber
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "data-slot": "pagination-trigger",
+        "aria-label": `Page ${pageNumber}`,
+        "aria-current": isCurrent ? "page" : void 0,
+        className: shared,
+        onClick: () => {
+          if (!isCurrent) {
+            setPage(pageNumber);
+          }
+        },
+        children: pageNumber
+      }
+    );
+  };
+  const prevHref = getPageHref?.(chunkZS5756ZC_js.clampPage(currentPage - 1, pageCount));
+  const nextHref = getPageHref?.(chunkZS5756ZC_js.clampPage(currentPage + 1, pageCount));
+  const navTriggerClass = chunkZS5756ZC_js.cn(
+    chunk6OVDBAMI_js.buttonVariants({ appearance: "outline", size }),
+    "shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "nav",
+    {
+      ref,
+      "data-slot": "pagination",
+      "aria-label": ariaLabel,
+      className: chunkZS5756ZC_js.cn("w-full", className),
+      onKeyDown: handleKeyDown,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        showPrevNext ? getPageHref && prevHref && canGoPrev ? /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            "data-slot": "pagination-prev",
+            "aria-label": prevLabel,
+            href: prevHref,
+            className: navTriggerClass,
+            children: "Prev"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "pagination-prev",
+            "aria-label": prevLabel,
+            disabled: !canGoPrev,
+            className: navTriggerClass,
+            onClick: goPrev,
+            children: "Prev"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "ul",
+          {
+            id: listId,
+            "data-slot": "pagination-list",
+            className: paginationListVariants({ appearance, size }),
+            children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+              "li",
+              {
+                "data-slot": "pagination-item",
+                className: "inline-flex items-center",
+                children: item.type === "ellipsis" ? /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-slot": "pagination-ellipsis",
+                    className: paginationEllipsisVariants({ size }),
+                    role: "img",
+                    "aria-label": ellipsisLabel,
+                    children: "\u2026"
+                  }
+                ) : renderPageControl(item.value)
+              },
+              item.type === "page" ? `page-${item.value}` : item.key
+            ))
+          }
+        ),
+        showPrevNext ? getPageHref && nextHref && canGoNext ? /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            "data-slot": "pagination-next",
+            "aria-label": nextLabel,
+            href: nextHref,
+            className: navTriggerClass,
+            children: "Next"
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "data-slot": "pagination-next",
+            "aria-label": nextLabel,
+            disabled: !canGoNext,
+            className: navTriggerClass,
+            onClick: goNext,
+            children: "Next"
+          }
+        ) : null
+      ] })
+    }
+  );
+};
+Pagination.displayName = "Pagination";
+
+exports.Pagination = Pagination;
+exports.paginationEllipsisVariants = paginationEllipsisVariants;
+exports.paginationListVariants = paginationListVariants;
+//# sourceMappingURL=chunk-L5QORCUO.js.map
+//# sourceMappingURL=chunk-L5QORCUO.js.map

package/dist/chunk-L5QORCUO.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/ui/pagination/variants.ts","../src/ui/pagination/pagination.tsx"],"names":["cva","zuiPaginationListBase","zuiPaginationListAppearances","zuiPaginationListSizes","zuiPaginationEllipsisBase","zuiPaginationEllipsisSizes","useId","usePagination","useCallback","cn","buttonVariants","jsx","clampPage","jsxs"],"mappings":"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","file":"chunk-L5QORCUO.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiPaginationEllipsisBase,\n  zuiPaginationEllipsisSizes,\n  zuiPaginationListAppearances,\n  zuiPaginationListBase,\n  zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n  variants: {\n    appearance: zuiPaginationListAppearances,\n    size: zuiPaginationListSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n  variants: {\n    size: zuiPaginationEllipsisSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n  className,\n  appearance = \"default\",\n  size = \"md\",\n  pageCount,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showPrevNext = true,\n  prevLabel = defaultPrevLabel,\n  nextLabel = defaultNextLabel,\n  ellipsisLabel = defaultEllipsisLabel,\n  getPageHref,\n  \"aria-label\": ariaLabel = \"Pagination\",\n  ref,\n  ...rest\n}: PaginationProps) => {\n  const id = useId();\n  const listId = `${id}-list`;\n\n  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n    usePagination({\n      pageCount,\n      page,\n      defaultPage,\n      siblingCount,\n      boundaryCount,\n      onPageChange,\n    });\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (pageCount <= 0) {\n        return;\n      }\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        event.preventDefault();\n        if (canGoNext) {\n          setPage(currentPage + 1);\n        }\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        if (canGoPrev) {\n          setPage(currentPage - 1);\n        }\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        setPage(1);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        setPage(pageCount);\n      }\n    },\n    [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n  );\n\n  if (pageCount <= 0) {\n    return null;\n  }\n\n  const inactiveTriggerClass = cn(\n    buttonVariants({ appearance: \"ghost\", size }),\n    \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n  );\n\n  const currentTriggerClass = buttonVariants({ appearance, size });\n\n  const triggerFocusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n  const renderPageControl = (pageNumber: number) => {\n    const isCurrent = pageNumber === currentPage;\n    const href = getPageHref?.(pageNumber);\n    const shared = cn(\n      isCurrent ? currentTriggerClass : inactiveTriggerClass,\n      \"min-w-[2.25ch] shrink-0\",\n      triggerFocusRing,\n    );\n\n    if (href) {\n      return (\n        <a\n          data-slot=\"pagination-trigger\"\n          href={href}\n          aria-label={`Page ${pageNumber}`}\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={shared}\n        >\n          {pageNumber}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"pagination-trigger\"\n        aria-label={`Page ${pageNumber}`}\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={shared}\n        onClick={() => {\n          if (!isCurrent) {\n            setPage(pageNumber);\n          }\n        }}\n      >\n        {pageNumber}\n      </button>\n    );\n  };\n\n  const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n  const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n  const navTriggerClass = cn(\n    buttonVariants({ appearance: \"outline\", size }),\n    \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  );\n\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"pagination\"\n      aria-label={ariaLabel}\n      className={cn(\"w-full\", className)}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {showPrevNext ? (\n          getPageHref && prevHref && canGoPrev ? (\n            <a\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              href={prevHref}\n              className={navTriggerClass}\n            >\n              Prev\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              disabled={!canGoPrev}\n              className={navTriggerClass}\n              onClick={goPrev}\n            >\n              Prev\n            </button>\n          )\n        ) : null}\n\n        <ul\n          id={listId}\n          data-slot=\"pagination-list\"\n          className={paginationListVariants({ appearance, size })}\n        >\n          {items.map((item) => (\n            <li\n              key={item.type === \"page\" ? `page-${item.value}` : item.key}\n              data-slot=\"pagination-item\"\n              className=\"inline-flex items-center\"\n            >\n              {item.type === \"ellipsis\" ? (\n                <span\n                  data-slot=\"pagination-ellipsis\"\n                  className={paginationEllipsisVariants({ size })}\n                  role=\"img\"\n                  aria-label={ellipsisLabel}\n                >\n                  …\n                </span>\n              ) : (\n                renderPageControl(item.value)\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {showPrevNext ? (\n          getPageHref && nextHref && canGoNext ? (\n            <a\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              href={nextHref}\n              className={navTriggerClass}\n            >\n              Next\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              disabled={!canGoNext}\n              className={navTriggerClass}\n              onClick={goNext}\n            >\n              Next\n            </button>\n          )\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nPagination.displayName = \"Pagination\";\n"]}

package/dist/chunk-LHBJD57K.mjs

@@ -0,0 +1,143 @@
+import { inputVariants } from './chunk-O22T5X4G.mjs';
+import { cn } from './chunk-4D54YOL6.mjs';
+import { useId } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function mergeDescribedByIds(user, ...generated) {
+  const ids = [
+    ...(user ?? "").split(/\s+/).filter(Boolean),
+    ...generated.filter((id) => Boolean(id))
+  ];
+  const unique = [...new Set(ids)];
+  return unique.length > 0 ? unique.join(" ") : void 0;
+}
+var InputBase = (props) => {
+  const generatedId = useId();
+  if (props.as === "textarea") {
+    const {
+      className: className2,
+      appearance: appearance2,
+      size: size2,
+      ring: ring2 = true,
+      ref: ref2,
+      "aria-invalid": ariaInvalidProp2,
+      errorMessage: errorMessage2,
+      hint: hint2,
+      label: label2,
+      id: id2,
+      as: as2,
+      "aria-describedby": ariaDescribedByUser2,
+      ...rest2
+    } = props;
+    const controlId2 = id2 ?? generatedId;
+    const errorId2 = `${controlId2}-error`;
+    const hintId2 = `${controlId2}-hint`;
+    const ariaInvalid2 = ariaInvalidProp2 !== void 0 ? ariaInvalidProp2 : appearance2 === "error" ? true : void 0;
+    const describedBy2 = mergeDescribedByIds(
+      ariaDescribedByUser2,
+      hint2 !== void 0 ? hintId2 : void 0,
+      errorMessage2 && appearance2 === "error" ? errorId2 : void 0
+    );
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      label2 !== void 0 && /* @__PURE__ */ jsx(
+        "label",
+        {
+          htmlFor: controlId2,
+          className: "mb-1 block text-sm font-medium text-slate-200",
+          children: label2
+        }
+      ),
+      hint2 !== void 0 && /* @__PURE__ */ jsx("p", { id: hintId2, className: "mb-1 text-xs text-slate-400", children: hint2 }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: ref2,
+          id: controlId2,
+          "data-slot": "input",
+          className: cn(
+            inputVariants({ appearance: appearance2, size: size2, ring: ring2, as: as2 }),
+            className2
+          ),
+          "aria-invalid": ariaInvalid2,
+          "aria-describedby": describedBy2,
+          ...rest2
+        }
+      ),
+      errorMessage2 && appearance2 === "error" && /* @__PURE__ */ jsx(
+        "p",
+        {
+          id: errorId2,
+          className: "mt-2 pl-4 text-sm text-rose-500 wrap-break-word",
+          children: errorMessage2
+        }
+      )
+    ] });
+  }
+  const {
+    className,
+    appearance,
+    size,
+    ring = true,
+    ref,
+    "aria-invalid": ariaInvalidProp,
+    errorMessage,
+    hint,
+    label,
+    id,
+    as,
+    "aria-describedby": ariaDescribedByUser,
+    ...rest
+  } = props;
+  const controlId = id ?? generatedId;
+  const errorId = `${controlId}-error`;
+  const hintId = `${controlId}-hint`;
+  const ariaInvalid = ariaInvalidProp !== void 0 ? ariaInvalidProp : appearance === "error" ? true : void 0;
+  const describedBy = mergeDescribedByIds(
+    ariaDescribedByUser,
+    hint !== void 0 ? hintId : void 0,
+    errorMessage && appearance === "error" ? errorId : void 0
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    label !== void 0 && /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: controlId,
+        className: "mb-1 block text-sm font-medium text-slate-200",
+        children: label
+      }
+    ),
+    hint !== void 0 && /* @__PURE__ */ jsx("p", { id: hintId, className: "mb-1 text-xs text-slate-400", children: hint }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id: controlId,
+        "data-slot": "input",
+        className: cn(
+          inputVariants({ appearance, size, ring, as: as ?? "input" }),
+          className
+        ),
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": describedBy,
+        ...rest
+      }
+    ),
+    errorMessage && appearance === "error" && /* @__PURE__ */ jsx(
+      "p",
+      {
+        id: errorId,
+        className: "mt-2 pl-4 text-sm text-rose-500 wrap-break-word",
+        children: errorMessage
+      }
+    )
+  ] });
+};
+InputBase.displayName = "Input";
+var Input = (props) => {
+  return /* @__PURE__ */ jsx(InputBase, { ...props });
+};
+Input.displayName = "Input";
+
+export { Input };
+//# sourceMappingURL=chunk-LHBJD57K.mjs.map
+//# sourceMappingURL=chunk-LHBJD57K.mjs.map