jaci-ui 0.1.0

package/dist/components/option-selector/option-selector.d.ts

@@ -0,0 +1,46 @@
+import { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/option-selector/option-selector.d.ts
+interface OptionSelectorOption {
+  /** Stable value submitted by the option. */
+  value: string;
+  /** Optional visible text. Use `children` for a richer option body. */
+  label?: ReactNode;
+  /** Custom content such as an icon, preview or illustration. */
+  children?: ReactNode;
+  /** Disables only this option. */
+  disabled?: boolean;
+  /** Explicit id for the native input and its label. */
+  id?: string;
+}
+type OptionSelectorValue = string | string[];
+interface OptionSelectorProps extends Omit<ComponentPropsWithoutRef<"fieldset">, "children" | "onChange"> {
+  /** Optional icon displayed next to the legend. */
+  icon?: ReactNode;
+  /** Accessible and visible group label. */
+  label?: ReactNode;
+  /** Supporting text announced with the group. */
+  description?: ReactNode;
+  /** Options rendered as custom selectable cards. */
+  options?: OptionSelectorOption[];
+  /** Name used by the native radio/checkbox inputs and form submission. */
+  name?: string;
+  /** Select multiple options with checkboxes instead of one radio option. */
+  multiple?: boolean;
+  /** Controlled selection. A string is used for one option and an array for many. */
+  value?: OptionSelectorValue;
+  /** Initial selection for an uncontrolled selector. */
+  defaultValue?: OptionSelectorValue;
+  /** Called with the next selected value after an option changes. */
+  onValueChange?: (value: OptionSelectorValue) => void;
+  /** Native change event callback kept for compatibility with the legacy API. */
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  /** Layout of the option cards. Defaults to the horizontal legacy layout. */
+  orientation?: "horizontal" | "vertical";
+  /** Responsive number of columns in the option grid. */
+  columns?: 1 | 2 | 3 | 4;
+  children?: ReactNode;
+}
+declare const OptionSelector: import("react").ForwardRefExoticComponent<OptionSelectorProps & import("react").RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+export { OptionSelector, OptionSelectorOption, OptionSelectorProps, OptionSelectorValue };
+//# sourceMappingURL=option-selector.d.ts.map

package/dist/components/option-selector/option-selector.js

@@ -0,0 +1,105 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { optionSelector } from "../../styled-system/recipes/option-selector.js";
+import { forwardRef, useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/option-selector/option-selector.tsx
+function getMultipleValues(value) {
+	if (Array.isArray(value)) return value;
+	return value === void 0 ? [] : [value];
+}
+function getSingleValue(value) {
+	return Array.isArray(value) ? value[0] : value;
+}
+function isSelected(value, selected, multiple) {
+	return multiple ? getMultipleValues(selected).includes(value) : getSingleValue(selected) === value;
+}
+const OptionSelector = forwardRef(function OptionSelector({ children, className, columns = 1, defaultValue, description, disabled = false, icon, id, label, multiple = false, name, onChange, onValueChange, options = [], orientation = "horizontal", value: controlledValue, ...props }, ref) {
+	const generatedId = useId();
+	const baseId = id ?? generatedId;
+	const descriptionId = description ? `${baseId}-description` : void 0;
+	const inputName = name ?? `${baseId}-options`;
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => multiple ? getMultipleValues(defaultValue) : getSingleValue(defaultValue) ?? "");
+	const selectedValue = controlledValue === void 0 ? uncontrolledValue : controlledValue;
+	const styles = optionSelector({
+		orientation,
+		columns: String(columns)
+	});
+	return /* @__PURE__ */ jsxs("fieldset", {
+		...props,
+		ref,
+		"aria-describedby": props["aria-describedby"] ?? descriptionId,
+		className: cx(styles.root, className),
+		"data-disabled": disabled || void 0,
+		"data-jaci-component": "option-selector",
+		"data-slot": "option-selector",
+		disabled,
+		id,
+		children: [
+			label || icon ? /* @__PURE__ */ jsxs("legend", {
+				className: styles.legend,
+				"data-slot": "option-selector-legend",
+				children: [icon ? /* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: styles.icon,
+					"data-slot": "option-selector-icon",
+					children: icon
+				}) : null, /* @__PURE__ */ jsx("span", {
+					className: styles.label,
+					"data-slot": "option-selector-label",
+					children: label
+				})]
+			}) : null,
+			description ? /* @__PURE__ */ jsx("p", {
+				className: styles.description,
+				"data-slot": "option-selector-description",
+				id: descriptionId,
+				children: description
+			}) : null,
+			/* @__PURE__ */ jsxs("div", {
+				className: styles.options,
+				"data-slot": "option-selector-options",
+				children: [options.map((option, index) => {
+					const optionDisabled = disabled || Boolean(option.disabled);
+					const selected = isSelected(option.value, selectedValue, multiple);
+					const optionId = option.id ?? `${baseId}-option-${index}`;
+					return /* @__PURE__ */ jsxs("label", {
+						className: styles.option,
+						"data-disabled": optionDisabled || void 0,
+						"data-selected": selected || void 0,
+						"data-slot": "option-selector-option",
+						htmlFor: optionId,
+						children: [/* @__PURE__ */ jsx("input", {
+							"aria-label": typeof option.label === "string" ? option.label : void 0,
+							checked: selected,
+							className: styles.input,
+							"data-slot": "option-selector-input",
+							disabled: optionDisabled,
+							id: optionId,
+							name: inputName,
+							onChange: (event) => {
+								const nextValue = multiple ? event.currentTarget.checked ? [...getMultipleValues(selectedValue), option.value] : getMultipleValues(selectedValue).filter((current) => current !== option.value) : option.value;
+								setUncontrolledValue(nextValue);
+								onValueChange?.(nextValue);
+								onChange?.(event);
+							},
+							type: multiple ? "checkbox" : "radio",
+							value: option.value
+						}), /* @__PURE__ */ jsxs("span", {
+							className: styles.content,
+							children: [option.children, option.label ? /* @__PURE__ */ jsx("span", {
+								className: styles.optionLabel,
+								"data-slot": "option-selector-option-label",
+								children: option.label
+							}) : null]
+						})]
+					}, option.value);
+				}), children]
+			})
+		]
+	});
+});
+//#endregion
+export { OptionSelector };
+
+//# sourceMappingURL=option-selector.js.map

package/dist/components/option-selector/option-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"option-selector.js","names":[],"sources":["../../../src/components/option-selector/option-selector.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, useState } from \"react\";\nimport type { ChangeEventHandler, ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { optionSelector } from \"../../styled-system/recipes\";\n\nexport interface OptionSelectorOption {\n  /** Stable value submitted by the option. */\n  value: string;\n  /** Optional visible text. Use `children` for a richer option body. */\n  label?: ReactNode;\n  /** Custom content such as an icon, preview or illustration. */\n  children?: ReactNode;\n  /** Disables only this option. */\n  disabled?: boolean;\n  /** Explicit id for the native input and its label. */\n  id?: string;\n}\n\nexport type OptionSelectorValue = string | string[];\n\nexport interface OptionSelectorProps\n  extends Omit<ComponentPropsWithoutRef<\"fieldset\">, \"children\" | \"onChange\"> {\n  /** Optional icon displayed next to the legend. */\n  icon?: ReactNode;\n  /** Accessible and visible group label. */\n  label?: ReactNode;\n  /** Supporting text announced with the group. */\n  description?: ReactNode;\n  /** Options rendered as custom selectable cards. */\n  options?: OptionSelectorOption[];\n  /** Name used by the native radio/checkbox inputs and form submission. */\n  name?: string;\n  /** Select multiple options with checkboxes instead of one radio option. */\n  multiple?: boolean;\n  /** Controlled selection. A string is used for one option and an array for many. */\n  value?: OptionSelectorValue;\n  /** Initial selection for an uncontrolled selector. */\n  defaultValue?: OptionSelectorValue;\n  /** Called with the next selected value after an option changes. */\n  onValueChange?: (value: OptionSelectorValue) => void;\n  /** Native change event callback kept for compatibility with the legacy API. */\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  /** Layout of the option cards. Defaults to the horizontal legacy layout. */\n  orientation?: \"horizontal\" | \"vertical\";\n  /** Responsive number of columns in the option grid. */\n  columns?: 1 | 2 | 3 | 4;\n  children?: ReactNode;\n}\n\nfunction getMultipleValues(value: OptionSelectorValue | undefined) {\n  if (Array.isArray(value)) {\n    return value;\n  }\n\n  return value === undefined ? [] : [value];\n}\n\nfunction getSingleValue(value: OptionSelectorValue | undefined) {\n  return Array.isArray(value) ? value[0] : value;\n}\n\nfunction isSelected(value: string, selected: OptionSelectorValue | undefined, multiple: boolean) {\n  return multiple\n    ? getMultipleValues(selected).includes(value)\n    : getSingleValue(selected) === value;\n}\n\nexport const OptionSelector = forwardRef<HTMLFieldSetElement, OptionSelectorProps>(\n  function OptionSelector(\n    {\n      children,\n      className,\n      columns = 1,\n      defaultValue,\n      description,\n      disabled = false,\n      icon,\n      id,\n      label,\n      multiple = false,\n      name,\n      onChange,\n      onValueChange,\n      options = [],\n      orientation = \"horizontal\",\n      value: controlledValue,\n      ...props\n    },\n    ref,\n  ) {\n    const generatedId = useId();\n    const baseId = id ?? generatedId;\n    const descriptionId = description ? `${baseId}-description` : undefined;\n    const inputName = name ?? `${baseId}-options`;\n    const [uncontrolledValue, setUncontrolledValue] = useState<OptionSelectorValue>(() =>\n      multiple ? getMultipleValues(defaultValue) : (getSingleValue(defaultValue) ?? \"\"),\n    );\n    const selectedValue = controlledValue === undefined ? uncontrolledValue : controlledValue;\n    const styles = optionSelector({\n      orientation,\n      columns: String(columns) as \"1\" | \"2\" | \"3\" | \"4\",\n    });\n\n    return (\n      <fieldset\n        {...props}\n        ref={ref}\n        aria-describedby={props[\"aria-describedby\"] ?? descriptionId}\n        className={cx(styles.root, className)}\n        data-disabled={disabled || undefined}\n        data-jaci-component=\"option-selector\"\n        data-slot=\"option-selector\"\n        disabled={disabled}\n        id={id}\n      >\n        {label || icon ? (\n          <legend className={styles.legend} data-slot=\"option-selector-legend\">\n            {icon ? (\n              <span aria-hidden=\"true\" className={styles.icon} data-slot=\"option-selector-icon\">\n                {icon}\n              </span>\n            ) : null}\n            <span className={styles.label} data-slot=\"option-selector-label\">\n              {label}\n            </span>\n          </legend>\n        ) : null}\n        {description ? (\n          <p\n            className={styles.description}\n            data-slot=\"option-selector-description\"\n            id={descriptionId}\n          >\n            {description}\n          </p>\n        ) : null}\n        <div className={styles.options} data-slot=\"option-selector-options\">\n          {options.map((option, index) => {\n            const optionDisabled = disabled || Boolean(option.disabled);\n            const selected = isSelected(option.value, selectedValue, multiple);\n            const optionId = option.id ?? `${baseId}-option-${index}`;\n\n            return (\n              <label\n                className={styles.option}\n                data-disabled={optionDisabled || undefined}\n                data-selected={selected || undefined}\n                data-slot=\"option-selector-option\"\n                htmlFor={optionId}\n                key={option.value}\n              >\n                <input\n                  aria-label={typeof option.label === \"string\" ? option.label : undefined}\n                  checked={selected}\n                  className={styles.input}\n                  data-slot=\"option-selector-input\"\n                  disabled={optionDisabled}\n                  id={optionId}\n                  name={inputName}\n                  onChange={(event) => {\n                    const nextValue = multiple\n                      ? event.currentTarget.checked\n                        ? [...getMultipleValues(selectedValue), option.value]\n                        : getMultipleValues(selectedValue).filter(\n                            (current) => current !== option.value,\n                          )\n                      : option.value;\n\n                    setUncontrolledValue(nextValue);\n                    onValueChange?.(nextValue);\n                    onChange?.(event);\n                  }}\n                  type={multiple ? \"checkbox\" : \"radio\"}\n                  value={option.value}\n                />\n                <span className={styles.content}>\n                  {option.children}\n                  {option.label ? (\n                    <span className={styles.optionLabel} data-slot=\"option-selector-option-label\">\n                      {option.label}\n                    </span>\n                  ) : null}\n                </span>\n              </label>\n            );\n          })}\n          {children}\n        </div>\n      </fieldset>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/components/pagination/index.d.cts

@@ -0,0 +1,2 @@
+import { Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationRoot, PaginationRootProps } from "./pagination.cjs";
+export { Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationList, type PaginationListProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, PaginationRoot, type PaginationRootProps };

package/dist/components/pagination/index.d.ts

@@ -0,0 +1,2 @@
+import { Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationRoot, PaginationRootProps } from "./pagination.js";
+export { Pagination, PaginationEllipsis, type PaginationEllipsisProps, PaginationItem, type PaginationItemProps, PaginationLink, type PaginationLinkProps, PaginationList, type PaginationListProps, PaginationNext, type PaginationNextProps, PaginationPrevious, type PaginationPreviousProps, PaginationRoot, type PaginationRootProps };

package/dist/components/pagination/pagination.cjs

@@ -0,0 +1,132 @@
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_pagination = require("../../styled-system/recipes/pagination.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/pagination/pagination.tsx
+/** A navigation landmark for moving between pages of a result set. */
+const PaginationRoot = (0, react.forwardRef)(function PaginationRoot({ "aria-label": ariaLabel, className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...props,
+		"aria-label": ariaLabel ?? "Pagination",
+		ref,
+		className: require_cx.cx(require_pagination.pagination().root, className),
+		"data-jaci-component": "pagination",
+		"data-slot": "pagination"
+	});
+});
+/** An unordered list of page controls. */
+const PaginationList = (0, react.forwardRef)(function PaginationList({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		...props,
+		ref,
+		className: require_cx.cx(require_pagination.pagination().list, className),
+		"data-slot": "pagination-list"
+	});
+});
+/** A list item that wraps a page link, direction control, or ellipsis. */
+const PaginationItem = (0, react.forwardRef)(function PaginationItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		...props,
+		ref,
+		className: require_cx.cx(require_pagination.pagination().item, className),
+		"data-slot": "pagination-item"
+	});
+});
+function getAnchorClassName(active, disabled, slot) {
+	const styles = require_pagination.pagination({
+		active,
+		disabled
+	});
+	if (slot === "pagination-previous") return require_cx.cx(styles.link, styles.previous);
+	if (slot === "pagination-next") return require_cx.cx(styles.link, styles.next);
+	return styles.link;
+}
+const PaginationAnchor = (0, react.forwardRef)(function PaginationAnchor({ active = false, "aria-current": ariaCurrent, className, disabled = false, href, onClick, slot, tabIndex, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("a", {
+		...props,
+		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
+		"aria-disabled": disabled || void 0,
+		ref,
+		className: require_cx.cx(getAnchorClassName(active, disabled, slot), className),
+		"data-active": active || void 0,
+		"data-disabled": disabled || void 0,
+		"data-slot": slot,
+		href: disabled ? void 0 : href,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onClick?.(event);
+		},
+		tabIndex: disabled ? -1 : tabIndex
+	});
+});
+/** A link to a numbered page. Set `active` on the current destination. */
+const PaginationLink = (0, react.forwardRef)(function PaginationLink(props, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationAnchor, {
+		...props,
+		ref,
+		slot: "pagination-link"
+	});
+});
+/** A directional link to the preceding page. */
+const PaginationPrevious = (0, react.forwardRef)(function PaginationPrevious({ "aria-label": ariaLabel, children, rel, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationAnchor, {
+		...props,
+		"aria-label": ariaLabel ?? "Go to previous page",
+		ref,
+		rel: rel ?? "prev",
+		slot: "pagination-previous",
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			children: "‹"
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Previous" })] })
+	});
+});
+/** A directional link to the following page. */
+const PaginationNext = (0, react.forwardRef)(function PaginationNext({ "aria-label": ariaLabel, children, rel, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PaginationAnchor, {
+		...props,
+		"aria-label": ariaLabel ?? "Go to next page",
+		ref,
+		rel: rel ?? "next",
+		slot: "pagination-next",
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Next" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			"aria-hidden": "true",
+			children: "›"
+		})] })
+	});
+});
+/** A non-interactive marker for omitted page ranges. */
+const PaginationEllipsis = (0, react.forwardRef)(function PaginationEllipsis({ children = "…", className, ...props }, ref) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		...props,
+		"aria-hidden": "true",
+		ref,
+		className: require_cx.cx(require_pagination.pagination().ellipsis, className),
+		"data-slot": "pagination-ellipsis",
+		children
+	});
+});
+const Pagination = {
+	Root: PaginationRoot,
+	List: PaginationList,
+	Item: PaginationItem,
+	Link: PaginationLink,
+	Previous: PaginationPrevious,
+	Next: PaginationNext,
+	Ellipsis: PaginationEllipsis
+};
+//#endregion
+exports.Pagination = Pagination;
+exports.PaginationEllipsis = PaginationEllipsis;
+exports.PaginationItem = PaginationItem;
+exports.PaginationLink = PaginationLink;
+exports.PaginationList = PaginationList;
+exports.PaginationNext = PaginationNext;
+exports.PaginationPrevious = PaginationPrevious;
+exports.PaginationRoot = PaginationRoot;
+
+//# sourceMappingURL=pagination.cjs.map

package/dist/components/pagination/pagination.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.cjs","names":["cx","pagination"],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { pagination } from \"../../styled-system/recipes\";\n\nexport type PaginationRootProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A navigation landmark for moving between pages of a result set. */\nexport const PaginationRoot = forwardRef<HTMLElement, PaginationRootProps>(function PaginationRoot(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Pagination\"}\n      ref={ref}\n      className={cx(pagination().root, className)}\n      data-jaci-component=\"pagination\"\n      data-slot=\"pagination\"\n    />\n  );\n});\n\nexport type PaginationListProps = ComponentPropsWithoutRef<\"ul\">;\n\n/** An unordered list of page controls. */\nexport const PaginationList = forwardRef<HTMLUListElement, PaginationListProps>(\n  function PaginationList({ className, ...props }, ref) {\n    return (\n      <ul\n        {...props}\n        ref={ref}\n        className={cx(pagination().list, className)}\n        data-slot=\"pagination-list\"\n      />\n    );\n  },\n);\n\nexport type PaginationItemProps = ComponentPropsWithoutRef<\"li\">;\n\n/** A list item that wraps a page link, direction control, or ellipsis. */\nexport const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(\n  function PaginationItem({ className, ...props }, ref) {\n    return (\n      <li\n        {...props}\n        ref={ref}\n        className={cx(pagination().item, className)}\n        data-slot=\"pagination-item\"\n      />\n    );\n  },\n);\n\nexport interface PaginationLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the link as the current page. */\n  active?: boolean;\n  /** Presents a non-navigable control when no destination is available. */\n  disabled?: boolean;\n}\n\ntype PaginationAnchorSlot = \"pagination-link\" | \"pagination-previous\" | \"pagination-next\";\n\ninterface PaginationAnchorProps extends PaginationLinkProps {\n  children?: ReactNode;\n  slot: PaginationAnchorSlot;\n}\n\nfunction getAnchorClassName(active: boolean, disabled: boolean, slot: PaginationAnchorSlot) {\n  const styles = pagination({ active, disabled });\n\n  if (slot === \"pagination-previous\") {\n    return cx(styles.link, styles.previous);\n  }\n\n  if (slot === \"pagination-next\") {\n    return cx(styles.link, styles.next);\n  }\n\n  return styles.link;\n}\n\nconst PaginationAnchor = forwardRef<HTMLAnchorElement, PaginationAnchorProps>(\n  function PaginationAnchor(\n    {\n      active = false,\n      \"aria-current\": ariaCurrent,\n      className,\n      disabled = false,\n      href,\n      onClick,\n      slot,\n      tabIndex,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <a\n        {...props}\n        aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        className={cx(getAnchorClassName(active, disabled, slot), className)}\n        data-active={active || undefined}\n        data-disabled={disabled || undefined}\n        data-slot={slot}\n        href={disabled ? undefined : href}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            event.stopPropagation();\n            return;\n          }\n\n          onClick?.(event);\n        }}\n        tabIndex={disabled ? -1 : tabIndex}\n      />\n    );\n  },\n);\n\n/** A link to a numbered page. Set `active` on the current destination. */\nexport const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  function PaginationLink(props, ref) {\n    return <PaginationAnchor {...props} ref={ref} slot=\"pagination-link\" />;\n  },\n);\n\nexport interface PaginationPreviousProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\n\n/** A directional link to the preceding page. */\nexport const PaginationPrevious = forwardRef<HTMLAnchorElement, PaginationPreviousProps>(\n  function PaginationPrevious({ \"aria-label\": ariaLabel, children, rel, ...props }, ref) {\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to previous page\"}\n        ref={ref}\n        rel={rel ?? \"prev\"}\n        slot=\"pagination-previous\"\n      >\n        {children ?? (\n          <>\n            <span aria-hidden=\"true\">‹</span>\n            <span>Previous</span>\n          </>\n        )}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport interface PaginationNextProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\n\n/** A directional link to the following page. */\nexport const PaginationNext = forwardRef<HTMLAnchorElement, PaginationNextProps>(\n  function PaginationNext({ \"aria-label\": ariaLabel, children, rel, ...props }, ref) {\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to next page\"}\n        ref={ref}\n        rel={rel ?? \"next\"}\n        slot=\"pagination-next\"\n      >\n        {children ?? (\n          <>\n            <span>Next</span>\n            <span aria-hidden=\"true\">›</span>\n          </>\n        )}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport type PaginationEllipsisProps = ComponentPropsWithoutRef<\"span\">;\n\n/** A non-interactive marker for omitted page ranges. */\nexport const PaginationEllipsis = forwardRef<HTMLSpanElement, PaginationEllipsisProps>(\n  function PaginationEllipsis({ children = \"…\", className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(pagination().ellipsis, className)}\n        data-slot=\"pagination-ellipsis\"\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nexport const Pagination = {\n  Root: PaginationRoot,\n  List: PaginationList,\n  Item: PaginationItem,\n  Link: PaginationLink,\n  Previous: PaginationPrevious,\n  Next: PaginationNext,\n  Ellipsis: PaginationEllipsis,\n};\n"],"mappings":"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"}

package/dist/components/pagination/pagination.d.cts

@@ -0,0 +1,44 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/pagination/pagination.d.ts
+type PaginationRootProps = ComponentPropsWithoutRef<"nav">;
+/** A navigation landmark for moving between pages of a result set. */
+declare const PaginationRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type PaginationListProps = ComponentPropsWithoutRef<"ul">;
+/** An unordered list of page controls. */
+declare const PaginationList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+type PaginationItemProps = ComponentPropsWithoutRef<"li">;
+/** A list item that wraps a page link, direction control, or ellipsis. */
+declare const PaginationItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+interface PaginationLinkProps extends ComponentPropsWithoutRef<"a"> {
+  /** Marks the link as the current page. */
+  active?: boolean;
+  /** Presents a non-navigable control when no destination is available. */
+  disabled?: boolean;
+}
+/** A link to a numbered page. Set `active` on the current destination. */
+declare const PaginationLink: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface PaginationPreviousProps extends PaginationLinkProps {
+  children?: ReactNode;
+}
+/** A directional link to the preceding page. */
+declare const PaginationPrevious: import("react").ForwardRefExoticComponent<PaginationPreviousProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface PaginationNextProps extends PaginationLinkProps {
+  children?: ReactNode;
+}
+/** A directional link to the following page. */
+declare const PaginationNext: import("react").ForwardRefExoticComponent<PaginationNextProps & import("react").RefAttributes<HTMLAnchorElement>>;
+type PaginationEllipsisProps = ComponentPropsWithoutRef<"span">;
+/** A non-interactive marker for omitted page ranges. */
+declare const PaginationEllipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Pagination: {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  Link: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Previous: import("react").ForwardRefExoticComponent<PaginationPreviousProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Next: import("react").ForwardRefExoticComponent<PaginationNextProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Ellipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationRoot, PaginationRootProps };
+//# sourceMappingURL=pagination.d.cts.map

package/dist/components/pagination/pagination.d.ts

@@ -0,0 +1,44 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/pagination/pagination.d.ts
+type PaginationRootProps = ComponentPropsWithoutRef<"nav">;
+/** A navigation landmark for moving between pages of a result set. */
+declare const PaginationRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+type PaginationListProps = ComponentPropsWithoutRef<"ul">;
+/** An unordered list of page controls. */
+declare const PaginationList: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+type PaginationItemProps = ComponentPropsWithoutRef<"li">;
+/** A list item that wraps a page link, direction control, or ellipsis. */
+declare const PaginationItem: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+interface PaginationLinkProps extends ComponentPropsWithoutRef<"a"> {
+  /** Marks the link as the current page. */
+  active?: boolean;
+  /** Presents a non-navigable control when no destination is available. */
+  disabled?: boolean;
+}
+/** A link to a numbered page. Set `active` on the current destination. */
+declare const PaginationLink: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface PaginationPreviousProps extends PaginationLinkProps {
+  children?: ReactNode;
+}
+/** A directional link to the preceding page. */
+declare const PaginationPrevious: import("react").ForwardRefExoticComponent<PaginationPreviousProps & import("react").RefAttributes<HTMLAnchorElement>>;
+interface PaginationNextProps extends PaginationLinkProps {
+  children?: ReactNode;
+}
+/** A directional link to the following page. */
+declare const PaginationNext: import("react").ForwardRefExoticComponent<PaginationNextProps & import("react").RefAttributes<HTMLAnchorElement>>;
+type PaginationEllipsisProps = ComponentPropsWithoutRef<"span">;
+/** A non-interactive marker for omitted page ranges. */
+declare const PaginationEllipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+declare const Pagination: {
+  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
+  List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+  Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  Link: import("react").ForwardRefExoticComponent<PaginationLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Previous: import("react").ForwardRefExoticComponent<PaginationPreviousProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Next: import("react").ForwardRefExoticComponent<PaginationNextProps & import("react").RefAttributes<HTMLAnchorElement>>;
+  Ellipsis: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+};
+//#endregion
+export { Pagination, PaginationEllipsis, PaginationEllipsisProps, PaginationItem, PaginationItemProps, PaginationLink, PaginationLinkProps, PaginationList, PaginationListProps, PaginationNext, PaginationNextProps, PaginationPrevious, PaginationPreviousProps, PaginationRoot, PaginationRootProps };
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/pagination/pagination.js

@@ -0,0 +1,125 @@
+import { cx } from "../../styled-system/css/cx.js";
+import { pagination } from "../../styled-system/recipes/pagination.js";
+import { forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pagination/pagination.tsx
+/** A navigation landmark for moving between pages of a result set. */
+const PaginationRoot = forwardRef(function PaginationRoot({ "aria-label": ariaLabel, className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("nav", {
+		...props,
+		"aria-label": ariaLabel ?? "Pagination",
+		ref,
+		className: cx(pagination().root, className),
+		"data-jaci-component": "pagination",
+		"data-slot": "pagination"
+	});
+});
+/** An unordered list of page controls. */
+const PaginationList = forwardRef(function PaginationList({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("ul", {
+		...props,
+		ref,
+		className: cx(pagination().list, className),
+		"data-slot": "pagination-list"
+	});
+});
+/** A list item that wraps a page link, direction control, or ellipsis. */
+const PaginationItem = forwardRef(function PaginationItem({ className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("li", {
+		...props,
+		ref,
+		className: cx(pagination().item, className),
+		"data-slot": "pagination-item"
+	});
+});
+function getAnchorClassName(active, disabled, slot) {
+	const styles = pagination({
+		active,
+		disabled
+	});
+	if (slot === "pagination-previous") return cx(styles.link, styles.previous);
+	if (slot === "pagination-next") return cx(styles.link, styles.next);
+	return styles.link;
+}
+const PaginationAnchor = forwardRef(function PaginationAnchor({ active = false, "aria-current": ariaCurrent, className, disabled = false, href, onClick, slot, tabIndex, ...props }, ref) {
+	return /* @__PURE__ */ jsx("a", {
+		...props,
+		"aria-current": ariaCurrent ?? (active ? "page" : void 0),
+		"aria-disabled": disabled || void 0,
+		ref,
+		className: cx(getAnchorClassName(active, disabled, slot), className),
+		"data-active": active || void 0,
+		"data-disabled": disabled || void 0,
+		"data-slot": slot,
+		href: disabled ? void 0 : href,
+		onClick: (event) => {
+			if (disabled) {
+				event.preventDefault();
+				event.stopPropagation();
+				return;
+			}
+			onClick?.(event);
+		},
+		tabIndex: disabled ? -1 : tabIndex
+	});
+});
+/** A link to a numbered page. Set `active` on the current destination. */
+const PaginationLink = forwardRef(function PaginationLink(props, ref) {
+	return /* @__PURE__ */ jsx(PaginationAnchor, {
+		...props,
+		ref,
+		slot: "pagination-link"
+	});
+});
+/** A directional link to the preceding page. */
+const PaginationPrevious = forwardRef(function PaginationPrevious({ "aria-label": ariaLabel, children, rel, ...props }, ref) {
+	return /* @__PURE__ */ jsx(PaginationAnchor, {
+		...props,
+		"aria-label": ariaLabel ?? "Go to previous page",
+		ref,
+		rel: rel ?? "prev",
+		slot: "pagination-previous",
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: "‹"
+		}), /* @__PURE__ */ jsx("span", { children: "Previous" })] })
+	});
+});
+/** A directional link to the following page. */
+const PaginationNext = forwardRef(function PaginationNext({ "aria-label": ariaLabel, children, rel, ...props }, ref) {
+	return /* @__PURE__ */ jsx(PaginationAnchor, {
+		...props,
+		"aria-label": ariaLabel ?? "Go to next page",
+		ref,
+		rel: rel ?? "next",
+		slot: "pagination-next",
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children: "Next" }), /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			children: "›"
+		})] })
+	});
+});
+/** A non-interactive marker for omitted page ranges. */
+const PaginationEllipsis = forwardRef(function PaginationEllipsis({ children = "…", className, ...props }, ref) {
+	return /* @__PURE__ */ jsx("span", {
+		...props,
+		"aria-hidden": "true",
+		ref,
+		className: cx(pagination().ellipsis, className),
+		"data-slot": "pagination-ellipsis",
+		children
+	});
+});
+const Pagination = {
+	Root: PaginationRoot,
+	List: PaginationList,
+	Item: PaginationItem,
+	Link: PaginationLink,
+	Previous: PaginationPrevious,
+	Next: PaginationNext,
+	Ellipsis: PaginationEllipsis
+};
+//#endregion
+export { Pagination, PaginationEllipsis, PaginationItem, PaginationLink, PaginationList, PaginationNext, PaginationPrevious, PaginationRoot };
+
+//# sourceMappingURL=pagination.js.map

package/dist/components/pagination/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.js","names":[],"sources":["../../../src/components/pagination/pagination.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode } from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { pagination } from \"../../styled-system/recipes\";\n\nexport type PaginationRootProps = ComponentPropsWithoutRef<\"nav\">;\n\n/** A navigation landmark for moving between pages of a result set. */\nexport const PaginationRoot = forwardRef<HTMLElement, PaginationRootProps>(function PaginationRoot(\n  { \"aria-label\": ariaLabel, className, ...props },\n  ref,\n) {\n  return (\n    <nav\n      {...props}\n      aria-label={ariaLabel ?? \"Pagination\"}\n      ref={ref}\n      className={cx(pagination().root, className)}\n      data-jaci-component=\"pagination\"\n      data-slot=\"pagination\"\n    />\n  );\n});\n\nexport type PaginationListProps = ComponentPropsWithoutRef<\"ul\">;\n\n/** An unordered list of page controls. */\nexport const PaginationList = forwardRef<HTMLUListElement, PaginationListProps>(\n  function PaginationList({ className, ...props }, ref) {\n    return (\n      <ul\n        {...props}\n        ref={ref}\n        className={cx(pagination().list, className)}\n        data-slot=\"pagination-list\"\n      />\n    );\n  },\n);\n\nexport type PaginationItemProps = ComponentPropsWithoutRef<\"li\">;\n\n/** A list item that wraps a page link, direction control, or ellipsis. */\nexport const PaginationItem = forwardRef<HTMLLIElement, PaginationItemProps>(\n  function PaginationItem({ className, ...props }, ref) {\n    return (\n      <li\n        {...props}\n        ref={ref}\n        className={cx(pagination().item, className)}\n        data-slot=\"pagination-item\"\n      />\n    );\n  },\n);\n\nexport interface PaginationLinkProps extends ComponentPropsWithoutRef<\"a\"> {\n  /** Marks the link as the current page. */\n  active?: boolean;\n  /** Presents a non-navigable control when no destination is available. */\n  disabled?: boolean;\n}\n\ntype PaginationAnchorSlot = \"pagination-link\" | \"pagination-previous\" | \"pagination-next\";\n\ninterface PaginationAnchorProps extends PaginationLinkProps {\n  children?: ReactNode;\n  slot: PaginationAnchorSlot;\n}\n\nfunction getAnchorClassName(active: boolean, disabled: boolean, slot: PaginationAnchorSlot) {\n  const styles = pagination({ active, disabled });\n\n  if (slot === \"pagination-previous\") {\n    return cx(styles.link, styles.previous);\n  }\n\n  if (slot === \"pagination-next\") {\n    return cx(styles.link, styles.next);\n  }\n\n  return styles.link;\n}\n\nconst PaginationAnchor = forwardRef<HTMLAnchorElement, PaginationAnchorProps>(\n  function PaginationAnchor(\n    {\n      active = false,\n      \"aria-current\": ariaCurrent,\n      className,\n      disabled = false,\n      href,\n      onClick,\n      slot,\n      tabIndex,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <a\n        {...props}\n        aria-current={ariaCurrent ?? (active ? \"page\" : undefined)}\n        aria-disabled={disabled || undefined}\n        ref={ref}\n        className={cx(getAnchorClassName(active, disabled, slot), className)}\n        data-active={active || undefined}\n        data-disabled={disabled || undefined}\n        data-slot={slot}\n        href={disabled ? undefined : href}\n        onClick={(event) => {\n          if (disabled) {\n            event.preventDefault();\n            event.stopPropagation();\n            return;\n          }\n\n          onClick?.(event);\n        }}\n        tabIndex={disabled ? -1 : tabIndex}\n      />\n    );\n  },\n);\n\n/** A link to a numbered page. Set `active` on the current destination. */\nexport const PaginationLink = forwardRef<HTMLAnchorElement, PaginationLinkProps>(\n  function PaginationLink(props, ref) {\n    return <PaginationAnchor {...props} ref={ref} slot=\"pagination-link\" />;\n  },\n);\n\nexport interface PaginationPreviousProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\n\n/** A directional link to the preceding page. */\nexport const PaginationPrevious = forwardRef<HTMLAnchorElement, PaginationPreviousProps>(\n  function PaginationPrevious({ \"aria-label\": ariaLabel, children, rel, ...props }, ref) {\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to previous page\"}\n        ref={ref}\n        rel={rel ?? \"prev\"}\n        slot=\"pagination-previous\"\n      >\n        {children ?? (\n          <>\n            <span aria-hidden=\"true\">‹</span>\n            <span>Previous</span>\n          </>\n        )}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport interface PaginationNextProps extends PaginationLinkProps {\n  children?: ReactNode;\n}\n\n/** A directional link to the following page. */\nexport const PaginationNext = forwardRef<HTMLAnchorElement, PaginationNextProps>(\n  function PaginationNext({ \"aria-label\": ariaLabel, children, rel, ...props }, ref) {\n    return (\n      <PaginationAnchor\n        {...props}\n        aria-label={ariaLabel ?? \"Go to next page\"}\n        ref={ref}\n        rel={rel ?? \"next\"}\n        slot=\"pagination-next\"\n      >\n        {children ?? (\n          <>\n            <span>Next</span>\n            <span aria-hidden=\"true\">›</span>\n          </>\n        )}\n      </PaginationAnchor>\n    );\n  },\n);\n\nexport type PaginationEllipsisProps = ComponentPropsWithoutRef<\"span\">;\n\n/** A non-interactive marker for omitted page ranges. */\nexport const PaginationEllipsis = forwardRef<HTMLSpanElement, PaginationEllipsisProps>(\n  function PaginationEllipsis({ children = \"…\", className, ...props }, ref) {\n    return (\n      <span\n        {...props}\n        aria-hidden=\"true\"\n        ref={ref}\n        className={cx(pagination().ellipsis, className)}\n        data-slot=\"pagination-ellipsis\"\n      >\n        {children}\n      </span>\n    );\n  },\n);\n\nexport const Pagination = {\n  Root: PaginationRoot,\n  List: PaginationList,\n  Item: PaginationItem,\n  Link: PaginationLink,\n  Previous: PaginationPrevious,\n  Next: PaginationNext,\n  Ellipsis: PaginationEllipsis,\n};\n"],"mappings":"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"}

package/dist/components/popover/index.d.cts

@@ -0,0 +1,2 @@
+import { Popover, PopoverArrow, PopoverArrowProps, PopoverClose, PopoverCloseProps, PopoverDescription, PopoverDescriptionProps, PopoverPopup, PopoverPopupProps, PopoverPortal, PopoverPositioner, PopoverPositionerProps, PopoverRoot, PopoverRootProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./popover.cjs";
+export { Popover, PopoverArrow, type PopoverArrowProps, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, PopoverPopup, type PopoverPopupProps, PopoverPortal, PopoverPositioner, type PopoverPositionerProps, PopoverRoot, type PopoverRootProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps };

package/dist/components/popover/index.d.ts

@@ -0,0 +1,2 @@
+import { Popover, PopoverArrow, PopoverArrowProps, PopoverClose, PopoverCloseProps, PopoverDescription, PopoverDescriptionProps, PopoverPopup, PopoverPopupProps, PopoverPortal, PopoverPositioner, PopoverPositionerProps, PopoverRoot, PopoverRootProps, PopoverTitle, PopoverTitleProps, PopoverTrigger, PopoverTriggerProps } from "./popover.js";
+export { Popover, PopoverArrow, type PopoverArrowProps, PopoverClose, type PopoverCloseProps, PopoverDescription, type PopoverDescriptionProps, PopoverPopup, type PopoverPopupProps, PopoverPortal, PopoverPositioner, type PopoverPositionerProps, PopoverRoot, type PopoverRootProps, PopoverTitle, type PopoverTitleProps, PopoverTrigger, type PopoverTriggerProps };