@kuzenbo/core 0.0.1 → 0.0.3

package/dist/ui/number-field.js

@@ -0,0 +1,159 @@
+import { a as useComponentSize } from "../size-provider-18EvJgDT.js";
+import { t as mergeBaseUIClassName } from "../merge-base-ui-class-name-HKsgjcXj.js";
+import { createContext, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+import { tv } from "tailwind-variants";
+import { Add01Icon, ArrowHorizontalIcon, MinusSignIcon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+import { NumberField as NumberField$1 } from "@base-ui/react/number-field";
+
+//#region src/ui/number-field/number-field-context.tsx
+const NumberFieldContext = createContext({ size: "md" });
+
+//#endregion
+//#region src/ui/number-field/number-field-decrement.tsx
+const numberFieldDecrementVariants = tv({
+	base: "flex cursor-pointer items-center justify-center border border-input bg-muted text-foreground transition-colors select-none hover:border-ring/70 disabled:pointer-events-none disabled:opacity-50",
+	variants: { size: {
+		xs: "size-6 rounded-l-[min(var(--radius-md),8px)]",
+		sm: "size-8 rounded-l-[min(var(--radius-md),10px)]",
+		md: "size-9 rounded-l-md",
+		lg: "size-10 rounded-l-md",
+		xl: "size-11 rounded-l-md"
+	} },
+	defaultVariants: { size: "md" }
+});
+const getNumberFieldStepperIconSize$1 = (size) => {
+	if (size === "xs") return 12;
+	if (size === "lg") return 15;
+	if (size === "xl") return 16;
+	return 14;
+};
+const NumberFieldDecrement = ({ className, children, size, ...props }) => {
+	const { size: contextSize } = useContext(NumberFieldContext);
+	const resolvedSize = size ?? contextSize ?? "md";
+	return /* @__PURE__ */ jsx(NumberField$1.Decrement, {
+		className: mergeBaseUIClassName(numberFieldDecrementVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		"data-slot": "number-field-decrement",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(HugeiconsIcon, {
+			size: getNumberFieldStepperIconSize$1(resolvedSize),
+			icon: MinusSignIcon
+		})
+	});
+};
+
+//#endregion
+//#region src/ui/number-field/number-field-group.tsx
+const NumberFieldGroup = ({ className, ...props }) => /* @__PURE__ */ jsx(NumberField$1.Group, {
+	className: mergeBaseUIClassName("flex rounded-md text-foreground shadow-xs transition-shadow focus-within:ring-[3px] focus-within:ring-ring/30", className),
+	"data-slot": "number-field-group",
+	...props
+});
+
+//#endregion
+//#region src/ui/number-field/number-field-increment.tsx
+const numberFieldIncrementVariants = tv({
+	base: "flex cursor-pointer items-center justify-center border border-input bg-muted text-foreground transition-colors select-none hover:border-ring/70 disabled:pointer-events-none disabled:opacity-50",
+	variants: { size: {
+		xs: "size-6 rounded-r-[min(var(--radius-md),8px)]",
+		sm: "size-8 rounded-r-[min(var(--radius-md),10px)]",
+		md: "size-9 rounded-r-md",
+		lg: "size-10 rounded-r-md",
+		xl: "size-11 rounded-r-md"
+	} },
+	defaultVariants: { size: "md" }
+});
+const getNumberFieldStepperIconSize = (size) => {
+	if (size === "xs") return 12;
+	if (size === "lg") return 15;
+	if (size === "xl") return 16;
+	return 14;
+};
+const NumberFieldIncrement = ({ className, children, size, ...props }) => {
+	const { size: contextSize } = useContext(NumberFieldContext);
+	const resolvedSize = size ?? contextSize ?? "md";
+	return /* @__PURE__ */ jsx(NumberField$1.Increment, {
+		className: mergeBaseUIClassName(numberFieldIncrementVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		"data-slot": "number-field-increment",
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(HugeiconsIcon, {
+			size: getNumberFieldStepperIconSize(resolvedSize),
+			icon: Add01Icon
+		})
+	});
+};
+
+//#endregion
+//#region src/ui/number-field/number-field-input.tsx
+const numberFieldInputVariants = tv({
+	base: "w-20 border-y border-input bg-background text-center tabular-nums text-foreground transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+	variants: { size: {
+		xs: "h-6 text-xs",
+		sm: "h-8 text-sm",
+		md: "h-9 text-sm",
+		lg: "h-10 text-sm",
+		xl: "h-11 text-base"
+	} },
+	defaultVariants: { size: "md" }
+});
+const NumberFieldInput = ({ className, htmlSize, size, ...props }) => {
+	const { size: contextSize } = useContext(NumberFieldContext);
+	const resolvedSize = size ?? contextSize ?? "md";
+	return /* @__PURE__ */ jsx(NumberField$1.Input, {
+		className: mergeBaseUIClassName(numberFieldInputVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		"data-slot": "number-field-input",
+		size: htmlSize,
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/number-field/number-field-scrub-area.tsx
+const NumberFieldScrubArea = ({ className, children, ...props }) => /* @__PURE__ */ jsx(NumberField$1.ScrubArea, {
+	className: mergeBaseUIClassName("cursor-ew-resize", className),
+	"data-slot": "number-field-scrub-area",
+	...props,
+	children
+});
+
+//#endregion
+//#region src/ui/number-field/number-field-scrub-area-cursor.tsx
+const NumberFieldScrubAreaCursor = ({ className, children, ...props }) => /* @__PURE__ */ jsx(NumberField$1.ScrubAreaCursor, {
+	className: mergeBaseUIClassName("drop-shadow-sm filter", className),
+	"data-slot": "number-field-scrub-area-cursor",
+	...props,
+	children: children ?? /* @__PURE__ */ jsx(HugeiconsIcon, {
+		className: "size-4.5",
+		icon: ArrowHorizontalIcon
+	})
+});
+
+//#endregion
+//#region src/ui/number-field/number-field.tsx
+const NumberField = ({ className, children, size: providedSize, ...props }) => {
+	const size = useComponentSize(providedSize);
+	return /* @__PURE__ */ jsx(NumberFieldContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx(NumberField$1.Root, {
+			className: mergeBaseUIClassName("flex flex-col items-start gap-1", className),
+			"data-size": size,
+			"data-slot": "number-field",
+			...props,
+			children
+		})
+	});
+};
+NumberField.Decrement = NumberFieldDecrement;
+NumberField.Group = NumberFieldGroup;
+NumberField.Increment = NumberFieldIncrement;
+NumberField.Input = NumberFieldInput;
+NumberField.ScrubArea = NumberFieldScrubArea;
+NumberField.ScrubAreaCursor = NumberFieldScrubAreaCursor;
+
+//#endregion
+export { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput, NumberFieldScrubArea, NumberFieldScrubAreaCursor };
+//# sourceMappingURL=number-field.js.map

package/dist/ui/number-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field.js","names":["getNumberFieldStepperIconSize","BaseNumberField","BaseNumberField","BaseNumberField","BaseNumberField","BaseNumberField","BaseNumberField","BaseNumberField"],"sources":["../../src/ui/number-field/number-field-context.tsx","../../src/ui/number-field/number-field-decrement.tsx","../../src/ui/number-field/number-field-group.tsx","../../src/ui/number-field/number-field-increment.tsx","../../src/ui/number-field/number-field-input.tsx","../../src/ui/number-field/number-field-scrub-area.tsx","../../src/ui/number-field/number-field-scrub-area-cursor.tsx","../../src/ui/number-field/number-field.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext } from \"react\";\n\nimport type { InputSize } from \"../input/input\";\n\nexport interface NumberFieldContextValue {\n  size?: InputSize;\n}\n\nconst NumberFieldContext = createContext<NumberFieldContextValue>({\n  size: \"md\",\n});\n\nexport { NumberFieldContext };\n","import type { ComponentProps } from \"react\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { MinusSignIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useContext } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { NumberFieldContext } from \"./number-field-context\";\n\nexport type NumberFieldDecrementProps = ComponentProps<\n  typeof BaseNumberField.Decrement\n> &\n  VariantProps<typeof numberFieldDecrementVariants>;\n\nconst numberFieldDecrementVariants = tv({\n  base: \"flex cursor-pointer items-center justify-center border border-input bg-muted text-foreground transition-colors select-none hover:border-ring/70 disabled:pointer-events-none disabled:opacity-50\",\n  variants: {\n    size: {\n      xs: \"size-6 rounded-l-[min(var(--radius-md),8px)]\",\n      sm: \"size-8 rounded-l-[min(var(--radius-md),10px)]\",\n      md: \"size-9 rounded-l-md\",\n      lg: \"size-10 rounded-l-md\",\n      xl: \"size-11 rounded-l-md\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst getNumberFieldStepperIconSize = (size: InputSize) => {\n  if (size === \"xs\") {\n    return 12;\n  }\n\n  if (size === \"lg\") {\n    return 15;\n  }\n\n  if (size === \"xl\") {\n    return 16;\n  }\n\n  return 14;\n};\n\nexport const NumberFieldDecrement = ({\n  className,\n  children,\n  size,\n  ...props\n}: NumberFieldDecrementProps) => {\n  const { size: contextSize } = useContext(NumberFieldContext);\n  const resolvedSize = size ?? contextSize ?? \"md\";\n\n  return (\n    <BaseNumberField.Decrement\n      className={mergeBaseUIClassName(\n        numberFieldDecrementVariants({ size: resolvedSize }),\n        className\n      )}\n      data-size={resolvedSize}\n      data-slot=\"number-field-decrement\"\n      {...props}\n    >\n      {children ?? (\n        <HugeiconsIcon\n          size={getNumberFieldStepperIconSize(resolvedSize)}\n          icon={MinusSignIcon}\n        />\n      )}\n    </BaseNumberField.Decrement>\n  );\n};\n","import type { ComponentProps } from \"react\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\n\nexport type NumberFieldGroupProps = ComponentProps<\n  typeof BaseNumberField.Group\n>;\n\nexport const NumberFieldGroup = ({\n  className,\n  ...props\n}: NumberFieldGroupProps) => (\n  <BaseNumberField.Group\n    className={mergeBaseUIClassName(\n      \"flex rounded-md text-foreground shadow-xs transition-shadow focus-within:ring-[3px] focus-within:ring-ring/30\",\n      className\n    )}\n    data-slot=\"number-field-group\"\n    {...props}\n  />\n);\n","import type { ComponentProps } from \"react\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { Add01Icon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useContext } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { NumberFieldContext } from \"./number-field-context\";\n\nexport type NumberFieldIncrementProps = ComponentProps<\n  typeof BaseNumberField.Increment\n> &\n  VariantProps<typeof numberFieldIncrementVariants>;\n\nconst numberFieldIncrementVariants = tv({\n  base: \"flex cursor-pointer items-center justify-center border border-input bg-muted text-foreground transition-colors select-none hover:border-ring/70 disabled:pointer-events-none disabled:opacity-50\",\n  variants: {\n    size: {\n      xs: \"size-6 rounded-r-[min(var(--radius-md),8px)]\",\n      sm: \"size-8 rounded-r-[min(var(--radius-md),10px)]\",\n      md: \"size-9 rounded-r-md\",\n      lg: \"size-10 rounded-r-md\",\n      xl: \"size-11 rounded-r-md\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nconst getNumberFieldStepperIconSize = (size: InputSize) => {\n  if (size === \"xs\") {\n    return 12;\n  }\n\n  if (size === \"lg\") {\n    return 15;\n  }\n\n  if (size === \"xl\") {\n    return 16;\n  }\n\n  return 14;\n};\n\nexport const NumberFieldIncrement = ({\n  className,\n  children,\n  size,\n  ...props\n}: NumberFieldIncrementProps) => {\n  const { size: contextSize } = useContext(NumberFieldContext);\n  const resolvedSize = size ?? contextSize ?? \"md\";\n\n  return (\n    <BaseNumberField.Increment\n      className={mergeBaseUIClassName(\n        numberFieldIncrementVariants({ size: resolvedSize }),\n        className\n      )}\n      data-size={resolvedSize}\n      data-slot=\"number-field-increment\"\n      {...props}\n    >\n      {children ?? (\n        <HugeiconsIcon\n          size={getNumberFieldStepperIconSize(resolvedSize)}\n          icon={Add01Icon}\n        />\n      )}\n    </BaseNumberField.Increment>\n  );\n};\n","import type { ComponentProps } from \"react\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { useContext } from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { NumberFieldContext } from \"./number-field-context\";\n\nconst numberFieldInputVariants = tv({\n  base: \"w-20 border-y border-input bg-background text-center tabular-nums text-foreground transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50\",\n  variants: {\n    size: {\n      xs: \"h-6 text-xs\",\n      sm: \"h-8 text-sm\",\n      md: \"h-9 text-sm\",\n      lg: \"h-10 text-sm\",\n      xl: \"h-11 text-base\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\ntype NativeNumberFieldInputProps = ComponentProps<typeof BaseNumberField.Input>;\ntype NativeNumberFieldInputSize = NativeNumberFieldInputProps[\"size\"];\n\nexport type NumberFieldInputProps = Omit<NativeNumberFieldInputProps, \"size\"> &\n  VariantProps<typeof numberFieldInputVariants> & {\n    htmlSize?: NativeNumberFieldInputSize;\n  };\n\nexport const NumberFieldInput = ({\n  className,\n  htmlSize,\n  size,\n  ...props\n}: NumberFieldInputProps) => {\n  const { size: contextSize } = useContext(NumberFieldContext);\n  const resolvedSize = size ?? contextSize ?? \"md\";\n\n  return (\n    <BaseNumberField.Input\n      className={mergeBaseUIClassName(\n        numberFieldInputVariants({ size: resolvedSize }),\n        className\n      )}\n      data-size={resolvedSize}\n      data-slot=\"number-field-input\"\n      size={htmlSize}\n      {...props}\n    />\n  );\n};\n","import type { ComponentProps } from \"react\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\n\nexport type NumberFieldScrubAreaProps = ComponentProps<\n  typeof BaseNumberField.ScrubArea\n>;\n\nexport const NumberFieldScrubArea = ({\n  className,\n  children,\n  ...props\n}: NumberFieldScrubAreaProps) => (\n  <BaseNumberField.ScrubArea\n    className={mergeBaseUIClassName(\"cursor-ew-resize\", className)}\n    data-slot=\"number-field-scrub-area\"\n    {...props}\n  >\n    {children}\n  </BaseNumberField.ScrubArea>\n);\n","import type { ComponentProps } from \"react\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\nimport { ArrowHorizontalIcon } from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\n\nexport type NumberFieldScrubAreaCursorProps = ComponentProps<\n  typeof BaseNumberField.ScrubAreaCursor\n>;\n\nexport const NumberFieldScrubAreaCursor = ({\n  className,\n  children,\n  ...props\n}: NumberFieldScrubAreaCursorProps) => (\n  <BaseNumberField.ScrubAreaCursor\n    className={mergeBaseUIClassName(\"drop-shadow-sm filter\", className)}\n    data-slot=\"number-field-scrub-area-cursor\"\n    {...props}\n  >\n    {children ?? (\n      <HugeiconsIcon className=\"size-4.5\" icon={ArrowHorizontalIcon} />\n    )}\n  </BaseNumberField.ScrubAreaCursor>\n);\n","import type { ComponentProps } from \"react\";\n\nimport { NumberField as BaseNumberField } from \"@base-ui/react/number-field\";\n\nimport type { InputSize } from \"../input/input\";\n\nimport { mergeBaseUIClassName } from \"../../utils/merge-base-ui-class-name\";\nimport { useComponentSize } from \"../shared/size/size-provider\";\nimport { NumberFieldContext } from \"./number-field-context\";\nimport { NumberFieldDecrement } from \"./number-field-decrement\";\nimport { NumberFieldGroup } from \"./number-field-group\";\nimport { NumberFieldIncrement } from \"./number-field-increment\";\nimport { NumberFieldInput } from \"./number-field-input\";\nimport { NumberFieldScrubArea } from \"./number-field-scrub-area\";\nimport { NumberFieldScrubAreaCursor } from \"./number-field-scrub-area-cursor\";\n\nexport type NumberFieldProps = ComponentProps<typeof BaseNumberField.Root> & {\n  size?: InputSize;\n};\n\nconst NumberField = ({\n  className,\n  children,\n  size: providedSize,\n  ...props\n}: NumberFieldProps) => {\n  const size = useComponentSize(providedSize);\n\n  return (\n    <NumberFieldContext.Provider value={{ size }}>\n      <BaseNumberField.Root\n        className={mergeBaseUIClassName(\n          \"flex flex-col items-start gap-1\",\n          className\n        )}\n        data-size={size}\n        data-slot=\"number-field\"\n        {...props}\n      >\n        {children}\n      </BaseNumberField.Root>\n    </NumberFieldContext.Provider>\n  );\n};\n\nNumberField.Decrement = NumberFieldDecrement;\nNumberField.Group = NumberFieldGroup;\nNumberField.Increment = NumberFieldIncrement;\nNumberField.Input = NumberFieldInput;\nNumberField.ScrubArea = NumberFieldScrubArea;\nNumberField.ScrubAreaCursor = NumberFieldScrubAreaCursor;\n\nexport type { NumberFieldDecrementProps } from \"./number-field-decrement\";\nexport type { NumberFieldGroupProps } from \"./number-field-group\";\nexport type { NumberFieldIncrementProps } from \"./number-field-increment\";\nexport type { NumberFieldInputProps } from \"./number-field-input\";\nexport type { NumberFieldScrubAreaProps } from \"./number-field-scrub-area\";\nexport type { NumberFieldScrubAreaCursorProps } from \"./number-field-scrub-area-cursor\";\n\nexport {\n  NumberField,\n  NumberFieldDecrement,\n  NumberFieldGroup,\n  NumberFieldIncrement,\n  NumberFieldInput,\n  NumberFieldScrubArea,\n  NumberFieldScrubAreaCursor,\n};\n"],"mappings":"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"}

package/dist/ui/pagination.d.ts

@@ -0,0 +1,268 @@
+import { t as UISize } from "../size-system-wzOLSuax.js";
+import { ComponentProps } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as tailwind_variants0 from "tailwind-variants";
+import { VariantProps } from "tailwind-variants";
+
+//#region src/ui/pagination/pagination-content.d.ts
+declare const paginationContentVariants: tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "flex items-center", {
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, "flex items-center", unknown, unknown, undefined>>;
+type PaginationContentVariantProps = Omit<VariantProps<typeof paginationContentVariants>, "size"> & {
+  size?: UISize;
+};
+type PaginationContentProps = ComponentProps<"ul"> & PaginationContentVariantProps;
+declare const PaginationContent: ({
+  className,
+  size,
+  ...props
+}: PaginationContentProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/pagination/pagination-ellipsis.d.ts
+declare const paginationEllipsisVariants: tailwind_variants0.TVReturnType<{
+  size: {
+    xs: {
+      icon: string;
+      root: string;
+    };
+    sm: {
+      icon: string;
+      root: string;
+    };
+    md: {
+      icon: string;
+      root: string;
+    };
+    lg: {
+      icon: string;
+      root: string;
+    };
+    xl: {
+      icon: string;
+      root: string;
+    };
+  };
+}, {
+  icon: string;
+  root: string;
+}, undefined, {
+  size: {
+    xs: {
+      icon: string;
+      root: string;
+    };
+    sm: {
+      icon: string;
+      root: string;
+    };
+    md: {
+      icon: string;
+      root: string;
+    };
+    lg: {
+      icon: string;
+      root: string;
+    };
+    xl: {
+      icon: string;
+      root: string;
+    };
+  };
+}, {
+  icon: string;
+  root: string;
+}, tailwind_variants0.TVReturnType<{
+  size: {
+    xs: {
+      icon: string;
+      root: string;
+    };
+    sm: {
+      icon: string;
+      root: string;
+    };
+    md: {
+      icon: string;
+      root: string;
+    };
+    lg: {
+      icon: string;
+      root: string;
+    };
+    xl: {
+      icon: string;
+      root: string;
+    };
+  };
+}, {
+  icon: string;
+  root: string;
+}, undefined, unknown, unknown, undefined>>;
+type PaginationEllipsisVariantProps = Omit<VariantProps<typeof paginationEllipsisVariants>, "size"> & {
+  size?: UISize;
+};
+type PaginationEllipsisProps = ComponentProps<"span"> & PaginationEllipsisVariantProps;
+declare const PaginationEllipsis: ({
+  className,
+  size,
+  ...props
+}: PaginationEllipsisProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/pagination/pagination-item.d.ts
+type PaginationItemProps = ComponentProps<"li">;
+declare const PaginationItem: ({
+  ...props
+}: PaginationItemProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/pagination/pagination-link.d.ts
+type PaginationLinkProps = {
+  kind?: "default" | "icon";
+  isActive?: boolean;
+  size?: UISize;
+} & ComponentProps<"a">;
+declare const PaginationLink: ({
+  kind,
+  className,
+  isActive,
+  size,
+  ...props
+}: PaginationLinkProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/pagination/pagination-next.d.ts
+declare const paginationNextVariants: tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, undefined, {
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, undefined, unknown, unknown, undefined>>;
+type PaginationNextVariantProps = Omit<VariantProps<typeof paginationNextVariants>, "size"> & {
+  size?: UISize;
+};
+type PaginationNextProps = Omit<ComponentProps<typeof PaginationLink>, "size"> & PaginationNextVariantProps;
+declare const PaginationNext: ({
+  className,
+  size,
+  ...props
+}: PaginationNextProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/pagination/pagination-previous.d.ts
+declare const paginationPreviousVariants: tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, undefined, {
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, tailwind_variants0.TVReturnType<{
+  size: {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+  };
+}, undefined, undefined, unknown, unknown, undefined>>;
+type PaginationPreviousVariantProps = Omit<VariantProps<typeof paginationPreviousVariants>, "size"> & {
+  size?: UISize;
+};
+type PaginationPreviousProps = Omit<ComponentProps<typeof PaginationLink>, "size"> & PaginationPreviousVariantProps;
+declare const PaginationPrevious: ({
+  className,
+  size,
+  ...props
+}: PaginationPreviousProps) => react_jsx_runtime0.JSX.Element;
+//#endregion
+//#region src/ui/pagination/pagination.d.ts
+type PaginationProps = ComponentProps<"nav"> & {
+  size?: UISize;
+};
+declare const Pagination: {
+  ({
+    className,
+    size: providedSize,
+    ...props
+  }: PaginationProps): react_jsx_runtime0.JSX.Element;
+  Content: ({
+    className,
+    size,
+    ...props
+  }: PaginationContentProps) => react_jsx_runtime0.JSX.Element;
+  Ellipsis: ({
+    className,
+    size,
+    ...props
+  }: PaginationEllipsisProps) => react_jsx_runtime0.JSX.Element;
+  Item: ({
+    ...props
+  }: PaginationItemProps) => react_jsx_runtime0.JSX.Element;
+  Link: ({
+    kind,
+    className,
+    isActive,
+    size,
+    ...props
+  }: PaginationLinkProps) => react_jsx_runtime0.JSX.Element;
+  Next: ({
+    className,
+    size,
+    ...props
+  }: PaginationNextProps) => react_jsx_runtime0.JSX.Element;
+  Previous: ({
+    className,
+    size,
+    ...props
+  }: PaginationPreviousProps) => react_jsx_runtime0.JSX.Element;
+};
+//#endregion
+export { Pagination, PaginationContent, type PaginationContentProps, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, PaginationProps };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/ui/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","names":[],"sources":["../../src/ui/pagination/pagination-content.tsx","../../src/ui/pagination/pagination-ellipsis.tsx","../../src/ui/pagination/pagination-item.tsx","../../src/ui/pagination/pagination-link.tsx","../../src/ui/pagination/pagination-next.tsx","../../src/ui/pagination/pagination-previous.tsx","../../src/ui/pagination/pagination.tsx"],"mappings":";;;;;;;cAQM,yBAAA,EAcJ,kBAAA,CAd6B,YAAA;;;;;;;;;;;;;;;;cAc7B,kBAAA,CAAA,YAAA;;;;;;;;;KAEG,6BAAA,GAAgC,IAAA,CACnC,YAAA,QAAoB,yBAAA;EAGpB,IAAA,GAAO,MAAA;AAAA;AAAA,KAGG,sBAAA,GAAyB,cAAA,SACnC,6BAAA;AAAA,cAEI,iBAAA;EAAqB,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAIxB,sBAAA,KAAsB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cC5BnB,0BAAA,EAgCJ,kBAAA,CAhC8B,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgC9B,kBAAA,CAAA,YAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;KAEG,8BAAA,GAAiC,IAAA,CACpC,YAAA,QAAoB,0BAAA;EAGpB,IAAA,GAAO,MAAA;AAAA;AAAA,KAGG,uBAAA,GAA0B,cAAA,WACpC,8BAAA;AAAA,cAEI,kBAAA;EAAsB,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAIzB,uBAAA,KAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCzDd,mBAAA,GAAsB,cAAA;AAAA,cAE5B,cAAA;EAAA,GAAkB;AAAA,GAAc,mBAAA,KAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KCMpD,mBAAA;EACH,IAAA;EACA,QAAA;EACA,IAAA,GAAO,MAAA;AAAA,IACL,cAAA;AAAA,cAoBE,cAAA;EAAkB,IAAA;EAAA,SAAA;EAAA,QAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAMrB,mBAAA,KAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cC5BhB,sBAAA,EAaJ,kBAAA,CAb0B,YAAA;;;;;;;;;;;;;;;;cAa1B,kBAAA,CAAA,YAAA;;;;;;;;;KAEG,0BAAA,GAA6B,IAAA,CAChC,YAAA,QAAoB,sBAAA;EAGpB,IAAA,GAAO,MAAA;AAAA;AAAA,KAGG,mBAAA,GAAsB,IAAA,CAChC,cAAA,QAAsB,cAAA,aAGtB,0BAAA;AAAA,cAEI,cAAA;EAAkB,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAA+B,mBAAA,KAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;cC5BpE,0BAAA,EAaJ,kBAAA,CAb8B,YAAA;;;;;;;;;;;;;;;;cAa9B,kBAAA,CAAA,YAAA;;;;;;;;;KAEG,8BAAA,GAAiC,IAAA,CACpC,YAAA,QAAoB,0BAAA;EAGpB,IAAA,GAAO,MAAA;AAAA;AAAA,KAGG,uBAAA,GAA0B,IAAA,CACpC,cAAA,QAAsB,cAAA,aAGtB,8BAAA;AAAA,cAEI,kBAAA;EAAsB,SAAA;EAAA,IAAA;EAAA,GAAA;AAAA,GAIzB,uBAAA,KAAuB,kBAAA,CAAA,GAAA,CAAA,OAAA;;;KC7Bd,eAAA,GAAkB,cAAA;EAC5B,IAAA,GAAO,MAAA;AAAA;AAAA,cAGH,UAAA;EAAA;;;;KAIH,eAAA,GAAe,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/ui/pagination.js

@@ -0,0 +1,217 @@
+import { a as useComponentSize } from "../size-provider-18EvJgDT.js";
+import { t as createSizeContext } from "../size-context-BjRwqlSg.js";
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn, tv } from "tailwind-variants";
+import { ArrowLeft01Icon, ArrowRight01Icon, MoreHorizontalCircle01Icon } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon } from "@hugeicons/react";
+
+//#region src/ui/pagination/pagination-size-context.ts
+const { SizeContext: PaginationSizeContext, useResolvedSize: useResolvedPaginationSize } = createSizeContext();
+
+//#endregion
+//#region src/ui/pagination/pagination-content.tsx
+const paginationContentVariants = tv({
+	base: "flex items-center",
+	variants: { size: {
+		xs: "gap-0.5",
+		sm: "gap-0.5",
+		md: "gap-0.5",
+		lg: "gap-1",
+		xl: "gap-1"
+	} },
+	defaultVariants: { size: "md" }
+});
+const PaginationContent = ({ className, size, ...props }) => {
+	const resolvedSize = useResolvedPaginationSize(size);
+	return /* @__PURE__ */ jsx("ul", {
+		className: cn(paginationContentVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		"data-slot": "pagination-content",
+		...props
+	});
+};
+
+//#endregion
+//#region src/ui/pagination/pagination-ellipsis.tsx
+const paginationEllipsisVariants = tv({
+	slots: {
+		icon: "",
+		root: "flex items-center justify-center"
+	},
+	variants: { size: {
+		xs: {
+			icon: "size-3",
+			root: "size-6"
+		},
+		sm: {
+			icon: "size-3.5",
+			root: "size-7"
+		},
+		md: {
+			icon: "size-4",
+			root: "size-8"
+		},
+		lg: {
+			icon: "size-4",
+			root: "size-9"
+		},
+		xl: {
+			icon: "size-5",
+			root: "size-10"
+		}
+	} },
+	defaultVariants: { size: "md" }
+});
+const PaginationEllipsis = ({ className, size, ...props }) => {
+	const resolvedSize = useResolvedPaginationSize(size);
+	const { icon, root } = paginationEllipsisVariants({ size: resolvedSize });
+	return /* @__PURE__ */ jsxs("span", {
+		"aria-hidden": true,
+		className: cn(root(), className),
+		"data-size": resolvedSize,
+		"data-slot": "pagination-ellipsis",
+		...props,
+		children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+			className: icon(),
+			icon: MoreHorizontalCircle01Icon,
+			strokeWidth: 2
+		}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "More pages"
+		})]
+	});
+};
+
+//#endregion
+//#region src/ui/pagination/pagination-item.tsx
+const PaginationItem = ({ ...props }) => /* @__PURE__ */ jsx("li", {
+	"data-slot": "pagination-item",
+	...props
+});
+
+//#endregion
+//#region src/ui/pagination/pagination-link.tsx
+const PAGINATION_ICON_BUTTON_SIZE_BY_SIZE = {
+	xs: "icon-xs",
+	sm: "icon-sm",
+	md: "icon",
+	lg: "icon-lg",
+	xl: "icon-xl"
+};
+const PAGINATION_TEXT_BUTTON_SIZE_BY_SIZE = {
+	xs: "xs",
+	sm: "sm",
+	md: "md",
+	lg: "lg",
+	xl: "xl"
+};
+const PaginationLink = ({ kind = "icon", className, isActive, size, ...props }) => {
+	const resolvedSize = useResolvedPaginationSize(size);
+	const buttonSize = kind === "icon" ? PAGINATION_ICON_BUTTON_SIZE_BY_SIZE[resolvedSize] : PAGINATION_TEXT_BUTTON_SIZE_BY_SIZE[resolvedSize];
+	return /* @__PURE__ */ jsx(Button, {
+		className: cn(className),
+		"data-size": resolvedSize,
+		nativeButton: false,
+		render: /* @__PURE__ */ jsx("a", {
+			"aria-current": isActive ? "page" : void 0,
+			"aria-label": "pagination link",
+			"data-active": isActive,
+			"data-size": resolvedSize,
+			"data-slot": "pagination-link",
+			...props
+		}),
+		size: buttonSize,
+		variant: isActive ? "outline" : "ghost"
+	});
+};
+
+//#endregion
+//#region src/ui/pagination/pagination-next.tsx
+const paginationNextVariants = tv({
+	variants: { size: {
+		xs: "pr-1!",
+		sm: "pr-1!",
+		md: "pr-1.5!",
+		lg: "pr-2!",
+		xl: "pr-2.5!"
+	} },
+	defaultVariants: { size: "md" }
+});
+const PaginationNext = ({ className, size, ...props }) => {
+	const resolvedSize = useResolvedPaginationSize(size);
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to next page",
+		className: cn(paginationNextVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		kind: "default",
+		size: resolvedSize,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: "Next"
+		}), /* @__PURE__ */ jsx(HugeiconsIcon, {
+			"data-icon": "inline-end",
+			icon: ArrowRight01Icon,
+			strokeWidth: 2
+		})]
+	});
+};
+
+//#endregion
+//#region src/ui/pagination/pagination-previous.tsx
+const paginationPreviousVariants = tv({
+	variants: { size: {
+		xs: "pl-1!",
+		sm: "pl-1!",
+		md: "pl-1.5!",
+		lg: "pl-2!",
+		xl: "pl-2.5!"
+	} },
+	defaultVariants: { size: "md" }
+});
+const PaginationPrevious = ({ className, size, ...props }) => {
+	const resolvedSize = useResolvedPaginationSize(size);
+	return /* @__PURE__ */ jsxs(PaginationLink, {
+		"aria-label": "Go to previous page",
+		className: cn(paginationPreviousVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize,
+		kind: "default",
+		size: resolvedSize,
+		...props,
+		children: [/* @__PURE__ */ jsx(HugeiconsIcon, {
+			"data-icon": "inline-start",
+			icon: ArrowLeft01Icon,
+			strokeWidth: 2
+		}), /* @__PURE__ */ jsx("span", {
+			className: "hidden sm:block",
+			children: "Previous"
+		})]
+	});
+};
+
+//#endregion
+//#region src/ui/pagination/pagination.tsx
+const Pagination = ({ className, size: providedSize, ...props }) => {
+	const size = useComponentSize(providedSize);
+	return /* @__PURE__ */ jsx(PaginationSizeContext.Provider, {
+		value: { size },
+		children: /* @__PURE__ */ jsx("nav", {
+			"aria-label": "pagination",
+			className: cn("mx-auto flex w-full justify-center", className),
+			"data-size": size,
+			"data-slot": "pagination",
+			...props
+		})
+	});
+};
+Pagination.Content = PaginationContent;
+Pagination.Ellipsis = PaginationEllipsis;
+Pagination.Item = PaginationItem;
+Pagination.Link = PaginationLink;
+Pagination.Next = PaginationNext;
+Pagination.Previous = PaginationPrevious;
+
+//#endregion
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious };
+//# sourceMappingURL=pagination.js.map