@bi-digital/react 0.2.13 → 0.2.14

package/dist/usePagination-afWMXp7h.js

@@ -0,0 +1,97 @@
+import { useMemo } from "react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+
+//#region src/utilities/hooks/usePagination/usePagination.tsx
+const range = (start, end) => {
+	const length = end - start + 1;
+	return Array.from({ length }, (_, i) => start + i);
+};
+/**
+* Hook to help manage pagination state of a Pagination component.
+*
+* @example
+* const { pages, nextButtonProps, prevButtonProps } = usePagination({
+*   page,
+*   count: 10,
+*   showPages: 7,
+*   boundaryCount: 1,
+*   siblingCount: 1,
+* })
+*
+* <Pagination>
+*   <PaginationItem>
+*     <PaginationButton {...prevButtonProps}>Previous</PaginationButton>
+*   </PaginationItem>
+*   {pages.map(({ page, itemKey, buttonProps }) => (
+*     <PaginationItem key={itemKey}>
+*       {typeof page === 'number' && (
+*         <PaginationButton {...buttonProps} aria-label={`Page ${page}`}>
+*           {page}
+*         </PaginationButton>
+*       )}
+*     </PaginationItem>
+*   ))}
+*   <PaginationItem>
+*     <PaginationButton {...nextButtonProps}>Next</PaginationButton>
+*   </PaginationItem>
+* </Pagination>
+**/
+const usePagination = ({ count, page: pageProp, defaultPage, boundaryCount = 1, siblingCount = 1, disabled = false, onPageChange }) => {
+	const [page, setPage] = useControllableState({
+		prop: pageProp,
+		onChange: onPageChange,
+		defaultProp: defaultPage ?? 1,
+		caller: "Pagination"
+	});
+	return useMemo(() => {
+		const startPages = range(1, Math.min(boundaryCount, count));
+		const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);
+		const siblingsStart = Math.max(Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1), boundaryCount + 2);
+		const siblingsEnd = Math.min(Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2), count - boundaryCount - 1);
+		const itemList = [
+			...startPages,
+			...siblingsStart > boundaryCount + 2 ? ["ellipsis"] : boundaryCount + 1 < count - boundaryCount ? [boundaryCount + 1] : [],
+			...range(siblingsStart, siblingsEnd),
+			...siblingsEnd < count - boundaryCount - 1 ? ["ellipsis"] : count - boundaryCount > boundaryCount ? [count - boundaryCount] : [],
+			...endPages
+		];
+		const hasNext = page < count;
+		const hasPrev = page !== 1;
+		return {
+			pages: itemList.map((item, index) => ({
+				page: item,
+				key: typeof item === "number" ? `page-${item}` : `ellipsis-${index}`,
+				buttonProps: typeof item === "number" ? {
+					"aria-current": item === page ? "page" : void 0,
+					onClick: () => setPage(item),
+					variant: "text"
+				} : null
+			})),
+			prevButtonProps: {
+				disabled: disabled || !hasPrev,
+				"aria-disabled": disabled || !hasPrev,
+				onClick: () => setPage(page - 1),
+				variant: "text"
+			},
+			nextButtonProps: {
+				disabled: disabled || !hasNext,
+				"aria-disabled": disabled || !hasNext,
+				onClick: () => setPage(page + 1),
+				variant: "text"
+			},
+			hasPrev,
+			hasNext
+		};
+	}, [
+		boundaryCount,
+		count,
+		disabled,
+		page,
+		setPage,
+		siblingCount
+	]);
+};
+
+//#endregion
+export { usePagination };
+//# sourceMappingURL=usePagination-afWMXp7h.js.map

package/dist/usePagination-afWMXp7h.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination-afWMXp7h.js","names":["start: number","end: number","itemList: (number | 'ellipsis')[]"],"sources":["../src/utilities/hooks/usePagination/usePagination.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport type { PaginationButtonProps } from '../../../components';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\n\nconst range = (start: number, end: number) => {\n  const length = end - start + 1;\n  return Array.from({ length }, (_, i) => start + i);\n};\n\nexport type UsePaginationProps = {\n  /**\n   * The number of pages\n   */\n  count: number;\n  /*\n   * The current page. The numbering starts from `1`, if controlled\n   * @default 1\n   */\n  page?: number;\n  /*\n   * The current page. The numbering starts from `1`, if uncontrolled\n   * @default 1\n   */\n  defaultPage?: number;\n  /**\n   * Number of always visible pages at the beginning and end.\n   * @default 1\n   */\n  boundaryCount?: number;\n  /**\n   * Number of always visible pages before and after the current page.\n   * @default 1\n   */\n  siblingCount?: number;\n  /**\n   * If `true`, the component is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /** Callback when the page changes */\n  onPageChange?: (page: number) => void;\n};\n\n/**\n * Hook to help manage pagination state of a Pagination component.\n *\n * @example\n * const { pages, nextButtonProps, prevButtonProps } = usePagination({\n *   page,\n *   count: 10,\n *   showPages: 7,\n *   boundaryCount: 1,\n *   siblingCount: 1,\n * })\n *\n * <Pagination>\n *   <PaginationItem>\n *     <PaginationButton {...prevButtonProps}>Previous</PaginationButton>\n *   </PaginationItem>\n *   {pages.map(({ page, itemKey, buttonProps }) => (\n *     <PaginationItem key={itemKey}>\n *       {typeof page === 'number' && (\n *         <PaginationButton {...buttonProps} aria-label={`Page ${page}`}>\n *           {page}\n *         </PaginationButton>\n *       )}\n *     </PaginationItem>\n *   ))}\n *   <PaginationItem>\n *     <PaginationButton {...nextButtonProps}>Next</PaginationButton>\n *   </PaginationItem>\n * </Pagination>\n **/\nexport const usePagination = ({\n  count,\n  page: pageProp,\n  defaultPage,\n  boundaryCount = 1,\n  siblingCount = 1,\n  disabled = false,\n  onPageChange,\n}: UsePaginationProps) => {\n  const [page, setPage] = useControllableState({\n    prop: pageProp,\n    onChange: onPageChange,\n    defaultProp: defaultPage ?? 1,\n    caller: 'Pagination',\n  });\n\n  return useMemo(() => {\n    const startPages = range(1, Math.min(boundaryCount, count));\n    const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n\n    const siblingsStart = Math.max(\n      Math.min(\n        // Natural start\n        page - siblingCount,\n        // Lower boundary when page is high\n        count - boundaryCount - siblingCount * 2 - 1,\n      ),\n      // Greater than startPages\n      boundaryCount + 2,\n    );\n\n    const siblingsEnd = Math.min(\n      Math.max(\n        // Natural end\n        page + siblingCount,\n        // Upper boundary when page is low\n        boundaryCount + siblingCount * 2 + 2,\n      ),\n      // Less than endPages\n      count - boundaryCount - 1,\n    );\n\n    // Basic list of items to render, for example: itemList = ['previous', 1, 'ellipsis', 4, 5, 6, 'ellipsis', 10, 'next']\n    const itemList: (number | 'ellipsis')[] = [\n      ...startPages,\n\n      // Start ellipsis\n      ...(siblingsStart > boundaryCount + 2\n        ? (['ellipsis'] as const)\n        : boundaryCount + 1 < count - boundaryCount\n          ? [boundaryCount + 1]\n          : []),\n\n      // Sibling pages\n      ...range(siblingsStart, siblingsEnd),\n\n      // End ellipsis\n      ...(siblingsEnd < count - boundaryCount - 1\n        ? (['ellipsis'] as const)\n        : count - boundaryCount > boundaryCount\n          ? [count - boundaryCount]\n          : []),\n\n      ...endPages,\n    ];\n\n    const hasNext = page < count;\n    const hasPrev = page !== 1;\n\n    return {\n      /** Items and pages to be displayed */\n      pages: itemList.map((item, index) => ({\n        /** Page number, \"ellipsis\" for ellipsis items */\n        page: item,\n        /** Unique key for the item */\n        key: typeof item === 'number' ? `page-${item}` : `ellipsis-${index}`,\n        /** Properties to spread on PaginationButton */\n        buttonProps: (typeof item === 'number'\n          ? {\n              'aria-current': item === page ? 'page' : undefined,\n              onClick: () => setPage(item),\n              variant: 'text',\n            }\n          : null) satisfies PaginationButtonProps | null,\n      })),\n      /** Properties to spread on PaginationButton used for previous navigation */\n      prevButtonProps: {\n        disabled: disabled || !hasPrev,\n        'aria-disabled': disabled || !hasPrev, // Using aria-disabled to support all HTML elements if asChild is used\n        onClick: () => setPage(page - 1),\n        variant: 'text',\n      } as PaginationButtonProps,\n      /** Properties to spread on PaginationButton used for next naviagation */\n      nextButtonProps: {\n        disabled: disabled || !hasNext,\n        'aria-disabled': disabled || !hasNext, // Using aria-disabled to support all HTML elements if asChild is used\n        onClick: () => setPage(page + 1),\n        variant: 'text',\n      } as PaginationButtonProps,\n      /** If previous page action should be shown */\n      hasPrev,\n      /** If next page action should be shown */\n      hasNext,\n    };\n  }, [boundaryCount, count, disabled, page, setPage, siblingCount]);\n};\n"],"mappings":";;;;AAIA,MAAM,QAAQ,CAACA,OAAeC,QAAgB;CAC5C,MAAM,SAAS,MAAM,QAAQ;AAC7B,QAAO,MAAM,KAAK,EAAE,OAAQ,GAAE,CAAC,GAAG,MAAM,QAAQ,EAAE;AACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkED,MAAa,gBAAgB,CAAC,EAC5B,OACA,MAAM,UACN,aACA,gBAAgB,GAChB,eAAe,GACf,WAAW,OACX,cACmB,KAAK;CACxB,MAAM,CAAC,MAAM,QAAQ,GAAG,qBAAqB;EAC3C,MAAM;EACN,UAAU;EACV,aAAa,eAAe;EAC5B,QAAQ;CACT,EAAC;AAEF,QAAO,QAAQ,MAAM;EACnB,MAAM,aAAa,MAAM,GAAG,KAAK,IAAI,eAAe,MAAM,CAAC;EAC3D,MAAM,WAAW,MAAM,KAAK,IAAI,QAAQ,gBAAgB,GAAG,gBAAgB,EAAE,EAAE,MAAM;EAErF,MAAM,gBAAgB,KAAK,IACzB,KAAK,IAEH,OAAO,cAEP,QAAQ,gBAAgB,eAAe,IAAI,EAC5C,EAED,gBAAgB,EACjB;EAED,MAAM,cAAc,KAAK,IACvB,KAAK,IAEH,OAAO,cAEP,gBAAgB,eAAe,IAAI,EACpC,EAED,QAAQ,gBAAgB,EACzB;EAGD,MAAMC,WAAoC;GACxC,GAAG;GAGH,GAAI,gBAAgB,gBAAgB,IAC/B,CAAC,UAAW,IACb,gBAAgB,IAAI,QAAQ,gBAC1B,CAAC,gBAAgB,CAAE,IACnB,CAAE;GAGR,GAAG,MAAM,eAAe,YAAY;GAGpC,GAAI,cAAc,QAAQ,gBAAgB,IACrC,CAAC,UAAW,IACb,QAAQ,gBAAgB,gBACtB,CAAC,QAAQ,aAAc,IACvB,CAAE;GAER,GAAG;EACJ;EAED,MAAM,UAAU,OAAO;EACvB,MAAM,UAAU,SAAS;AAEzB,SAAO;GAEL,OAAO,SAAS,IAAI,CAAC,MAAM,WAAW;IAEpC,MAAM;IAEN,YAAY,SAAS,YAAY,OAAO,KAAK,KAAK,WAAW,MAAM;IAEnE,oBAAqB,SAAS,WAC1B;KACE,gBAAgB,SAAS,OAAO;KAChC,SAAS,MAAM,QAAQ,KAAK;KAC5B,SAAS;IACV,IACD;GACL,GAAE;GAEH,iBAAiB;IACf,UAAU,aAAa;IACvB,iBAAiB,aAAa;IAC9B,SAAS,MAAM,QAAQ,OAAO,EAAE;IAChC,SAAS;GACV;GAED,iBAAiB;IACf,UAAU,aAAa;IACvB,iBAAiB,aAAa;IAC9B,SAAS,MAAM,QAAQ,OAAO,EAAE;IAChC,SAAS;GACV;GAED;GAEA;EACD;CACF,GAAE;EAAC;EAAe;EAAO;EAAU;EAAM;EAAS;CAAa,EAAC;AAClE"}

package/dist/utilities/hooks/index.d.ts

@@ -1,2 +1,14 @@
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
-import 'react';
+import { useIsomorphicLayoutEffect } from "../../useIsomorphicLayoutEffect-BJo3l8ol.js";
+import { useMergeRefs } from "../../useMergeRefs-CGbb4u_J.js";
+import "../../types-CaBoIvtz.js";
+import { UsePaginationProps, usePagination } from "../../alert-footer-CWTF8lZr.js";
+import "../../dialog-trigger-context-BXtYdvEK.js";
+import "../../drawer-trigger-context-CZyGAmYc.js";
+import "../../popover-trigger-context-C9JBxqVG.js";
+import "../../dropdown-item-h8WklvJi.js";
+import "../../dropdown-list-B8pfs0Vc.js";
+import "../../dropdown-trigger-context-5mGr6ped.js";
+import "../../footer-links-BbIh-yGy.js";
+import "../../pagination-item-D2-tdnvJ.js";
+import "../../types-DUx4Pkhy.js";
+export { UsePaginationProps, useIsomorphicLayoutEffect, useMergeRefs, usePagination };

package/dist/utilities/hooks/index.js

@@ -1,8 +1,6 @@
-import "../../chunk-DZDPC6SE.js";
-import {
-  useIsomorphicLayoutEffect
-} from "../../chunk-VPE7VEBG.js";
-export {
-  useIsomorphicLayoutEffect
-};
-//# sourceMappingURL=index.js.map
+import { useIsomorphicLayoutEffect } from "../../useIsomorphicLayoutEffect-DCaf_yI4.js";
+import { useMergeRefs } from "../../useMergeRefs-Cz-t7gpp.js";
+import { usePagination } from "../../usePagination-afWMXp7h.js";
+import "../../hooks-CQ4fud3K.js";
+
+export { useIsomorphicLayoutEffect, useMergeRefs, usePagination };

package/dist/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -1,5 +1,2 @@
-import { useLayoutEffect } from 'react';
-
-declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
-
-export { useIsomorphicLayoutEffect };
+import { useIsomorphicLayoutEffect } from "../../../useIsomorphicLayoutEffect-BJo3l8ol.js";
+export { useIsomorphicLayoutEffect };

package/dist/utilities/hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -1,7 +1,3 @@
-import {
-  useIsomorphicLayoutEffect
-} from "../../../chunk-VPE7VEBG.js";
-export {
-  useIsomorphicLayoutEffect
-};
-//# sourceMappingURL=useIsomorphicLayoutEffect.js.map
+import { useIsomorphicLayoutEffect } from "../../../useIsomorphicLayoutEffect-DCaf_yI4.js";
+
+export { useIsomorphicLayoutEffect };

package/dist/utilities/hooks/useMergeRefs/useMergeRefs.d.ts

@@ -0,0 +1,2 @@
+import { useMergeRefs } from "../../../useMergeRefs-CGbb4u_J.js";
+export { useMergeRefs };

package/dist/utilities/hooks/useMergeRefs/useMergeRefs.js

@@ -0,0 +1,3 @@
+import { useMergeRefs } from "../../../useMergeRefs-Cz-t7gpp.js";
+
+export { useMergeRefs };

package/dist/utilities/hooks/usePagination/usePagination.d.ts

@@ -0,0 +1,14 @@
+import "../../../useIsomorphicLayoutEffect-BJo3l8ol.js";
+import "../../../useMergeRefs-CGbb4u_J.js";
+import "../../../types-CaBoIvtz.js";
+import { UsePaginationProps, usePagination } from "../../../alert-footer-CWTF8lZr.js";
+import "../../../dialog-trigger-context-BXtYdvEK.js";
+import "../../../drawer-trigger-context-CZyGAmYc.js";
+import "../../../popover-trigger-context-C9JBxqVG.js";
+import "../../../dropdown-item-h8WklvJi.js";
+import "../../../dropdown-list-B8pfs0Vc.js";
+import "../../../dropdown-trigger-context-5mGr6ped.js";
+import "../../../footer-links-BbIh-yGy.js";
+import "../../../pagination-item-D2-tdnvJ.js";
+import "../../../types-DUx4Pkhy.js";
+export { UsePaginationProps, usePagination };

package/dist/utilities/hooks/usePagination/usePagination.js

@@ -0,0 +1,3 @@
+import { usePagination } from "../../../usePagination-afWMXp7h.js";
+
+export { usePagination };

package/dist/utilities/index.d.ts

@@ -1,3 +1,14 @@
-export { useIsomorphicLayoutEffect } from './hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js';
-export { MergeRight } from './types.js';
-import 'react';
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect-BJo3l8ol.js";
+import "../useMergeRefs-CGbb4u_J.js";
+import "../types-CaBoIvtz.js";
+import { UsePaginationProps, usePagination } from "../alert-footer-CWTF8lZr.js";
+import "../dialog-trigger-context-BXtYdvEK.js";
+import "../drawer-trigger-context-CZyGAmYc.js";
+import "../popover-trigger-context-C9JBxqVG.js";
+import "../dropdown-item-h8WklvJi.js";
+import "../dropdown-list-B8pfs0Vc.js";
+import "../dropdown-trigger-context-5mGr6ped.js";
+import "../footer-links-BbIh-yGy.js";
+import "../pagination-item-D2-tdnvJ.js";
+import { MergeRight } from "../types-DUx4Pkhy.js";
+export { MergeRight, UsePaginationProps, useIsomorphicLayoutEffect, usePagination };

package/dist/utilities/index.js

@@ -1,9 +1,7 @@
-import "../chunk-TUJK53CY.js";
-import "../chunk-DZDPC6SE.js";
-import {
-  useIsomorphicLayoutEffect
-} from "../chunk-VPE7VEBG.js";
-export {
-  useIsomorphicLayoutEffect
-};
-//# sourceMappingURL=index.js.map
+import { useIsomorphicLayoutEffect } from "../useIsomorphicLayoutEffect-DCaf_yI4.js";
+import "../useMergeRefs-Cz-t7gpp.js";
+import { usePagination } from "../usePagination-afWMXp7h.js";
+import "../hooks-CQ4fud3K.js";
+import "../utilities-CQ6hoSQa.js";
+
+export { useIsomorphicLayoutEffect, usePagination };

package/dist/utilities/types.d.ts

@@ -1,7 +1,2 @@
-/**
- * Create a new type with the properties of the first type merged with the properties of the second type.
- * If a key exists in both types, the property from the *second* type will be used.
- */
-type MergeRight<T1, T2> = Omit<T1, keyof T2> & T2;
-
-export type { MergeRight };
+import { MergeRight } from "../types-DUx4Pkhy.js";
+export { MergeRight };

package/dist/utilities/types.js

@@ -1 +0,0 @@
-//# sourceMappingURL=types.js.map

package/dist/validation-message-C1f_XsoD.js

@@ -0,0 +1,19 @@
+import clsx from "clsx/lite";
+import { Slot } from "@radix-ui/react-slot";
+import { BiIconError } from "@bi-digital/icons-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/validation-message/validation-message.tsx
+const ValidationMessage = ({ children, className, icon, asChild, ref,...props }) => {
+	const Component = asChild ? Slot : "p";
+	return /* @__PURE__ */ jsxs(Component, {
+		className: clsx("bi-validation-message", className),
+		ref,
+		...props,
+		children: [icon || /* @__PURE__ */ jsx(BiIconError, {}), children]
+	});
+};
+
+//#endregion
+export { ValidationMessage };
+//# sourceMappingURL=validation-message-C1f_XsoD.js.map

package/dist/validation-message-C1f_XsoD.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation-message-C1f_XsoD.js","names":[],"sources":["../src/components/validation-message/validation-message.tsx"],"sourcesContent":["import { Slot } from '@radix-ui/react-slot';\nimport clsx from 'clsx/lite';\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport type { AsChildProps } from '../../types';\nimport type { MergeRight } from '../../utilities';\nimport { BiIconError } from '@bi-digital/icons-react';\n\nexport type ValidationMessageProps = MergeRight<\n  AsChildProps & HTMLAttributes<HTMLParagraphElement>,\n  {\n    /** Override the default warning icon. Must be a BiIcon to work correctly. */\n    icon?: ReactNode;\n    ref?: Ref<HTMLParagraphElement>;\n  }\n>;\n\nexport const ValidationMessage = ({ children, className, icon, asChild, ref, ...props }: ValidationMessageProps) => {\n  const Component = asChild ? Slot : 'p';\n\n  return (\n    <Component className={clsx('bi-validation-message', className)} ref={ref} {...props}>\n      {icon || <BiIconError />}\n      {children}\n    </Component>\n  );\n};\n"],"mappings":";;;;;;AAgBA,MAAa,oBAAoB,CAAC,EAAE,UAAU,WAAW,MAAM,SAAS,IAAK,GAAG,OAA+B,KAAK;CAClH,MAAM,YAAY,UAAU,OAAO;AAEnC,wBACE,KAAC;EAAU,WAAW,KAAK,yBAAyB,UAAU;EAAO;EAAK,GAAI;aAC3E,wBAAQ,IAAC,gBAAc,EACvB;GACS;AAEf"}

package/dist/vanilla/dropdown/index.d.ts

@@ -0,0 +1,2 @@
+import { InitDropdownOptions, initDropdown } from "../../index-no8iFicj.js";
+export { InitDropdownOptions, initDropdown };

package/dist/vanilla/dropdown/index.js

@@ -0,0 +1,4 @@
+import "../../popover-C4ia-MZ5.js";
+import { initDropdown } from "../../dropdown-B0sjzw91.js";
+
+export { initDropdown };

package/dist/vanilla/index.d.ts

@@ -0,0 +1,3 @@
+import { InitDropdownOptions, initDropdown } from "../index-no8iFicj.js";
+import { InitPopoverOptions, initPopover } from "../index-DRx9hLAb.js";
+export { InitDropdownOptions, InitPopoverOptions, initDropdown, initPopover };

package/dist/vanilla/index.js

@@ -0,0 +1,4 @@
+import { initPopover } from "../popover-C4ia-MZ5.js";
+import { initDropdown } from "../dropdown-B0sjzw91.js";
+
+export { initDropdown, initPopover };

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

@@ -0,0 +1,2 @@
+import { InitPopoverOptions, initPopover } from "../../index-DRx9hLAb.js";
+export { InitPopoverOptions, initPopover };

package/dist/vanilla/popover/index.js

@@ -0,0 +1,3 @@
+import { initPopover } from "../../popover-C4ia-MZ5.js";
+
+export { initPopover };

package/dist/vite-env.d.ts

@@ -0,0 +1 @@
+export { };

package/package.json

@@ -1,13 +1,22 @@
 {
   "name": "@bi-digital/react",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "type": "module",
   "description": "React components from BI Digital",
   "author": "BI Digital",
   "license": "ISC",
   "module": "./dist/main.js",
-  "exports": "./dist/main.js",
   "types": "./dist/main.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "import": "./dist/main.js"
+    },
+    "./vanilla": {
+      "types": "./dist/vanilla/index.d.ts",
+      "import": "./dist/vanilla/index.js"
+    }
+  },
   "files": [
     "dist"
   ],
@@ -15,7 +24,11 @@
     "access": "public"
   },
   "dependencies": {
+    "@floating-ui/dom": "^1.6.13",
+    "@oddbird/popover-polyfill": "^0.6.0",
     "@radix-ui/react-slot": "^1.2.2",
+    "@radix-ui/react-tabs": "^1.1.12",
+    "@radix-ui/react-use-controllable-state": "^1.2.2",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
@@ -26,24 +39,26 @@
     "@types/node": "^22.14.1",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
-    "@vitest/coverage-v8": "3.1.3",
-    "@vitest/expect": "^3.1.3",
+    "@vitest/coverage-v8": "^3.2.1",
+    "@vitest/expect": "^3.2.1",
     "jsdom": "^26.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "tsconfck": "^3.1.5",
-    "tsup": "^8.4.0",
+    "tsconfck": "^3.1.6",
+    "tsdown": "^0.12.7",
     "typescript": "^5.7.2",
-    "vitest": "3.1.3"
+    "vitest": "^3.2.1",
+    "@bi-digital/icons-react": "0.2.14"
   },
   "peerDependencies": {
     "react": "^19",
     "react-dom": "^19",
-    "@bi-digital/css": "0.2.13"
+    "@bi-digital/css": "0.2.14",
+    "@bi-digital/icons-react": "0.2.14"
   },
   "scripts": {
-    "build": "tsup",
-    "dev": "tsup --watch",
+    "build": "tsdown",
+    "dev": "tsdown --watch",
     "lint": "eslint .",
     "test": "vitest run"
   }

package/dist/chunk-2C3XKBNM.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-2C3XKBNM.js.map

package/dist/chunk-2C3XKBNM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-2PYB72CX.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-2PYB72CX.js.map

package/dist/chunk-2PYB72CX.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-3XRBNC3R.js

@@ -1,32 +0,0 @@
-// src/components/form/label/label.tsx
-import clsx from "clsx";
-import { jsx } from "react/jsx-runtime";
-var Label = ({
-  children,
-  labelFontStyle,
-  htmlFor,
-  required,
-  disabled,
-  dark,
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    "label",
-    {
-      ...props,
-      className: clsx("bi-label", className),
-      "data-dark": dark,
-      "data-required": required,
-      "data-font-style": labelFontStyle,
-      "aria-disabled": disabled,
-      htmlFor,
-      children
-    }
-  );
-};
-
-export {
-  Label
-};
-//# sourceMappingURL=chunk-3XRBNC3R.js.map

package/dist/chunk-3XRBNC3R.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/label/label.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { ComponentProps } from 'react';\n\nexport type LabelProps = ComponentProps<'label'> & {\n  /** The font style of the label. */\n  labelFontStyle?: 'regular' | 'bold';\n  htmlFor?: string;\n  required?: boolean;\n  disabled?: boolean;\n  /** Is the component displayed on a dark background. */\n  dark?: boolean;\n  /**\n   * The type of label. `label` is used for labeling specific elements. `legend` is a broad label used for a group of objects.\n   * @default 'label'\n   */\n  type?: 'label' | 'legend';\n};\n\n/**\n * Accessible label component that can be used to display a label and help text for form fields.\n */\nexport const Label = ({\n  children,\n  labelFontStyle,\n  htmlFor,\n  required,\n  disabled,\n  dark,\n  className,\n  ...props\n}: LabelProps) => {\n  return (\n    <label\n      {...props}\n      className={clsx('bi-label', className)}\n      data-dark={dark}\n      data-required={required}\n      data-font-style={labelFontStyle}\n      aria-disabled={disabled}\n      htmlFor={htmlFor}\n    >\n      {children}\n    </label>\n  );\n};\n"],"mappings":";AAAA,OAAO,UAAU;AAgCb;AAXG,IAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,WAAW,KAAK,YAAY,SAAS;AAAA,MACrC,aAAW;AAAA,MACX,iBAAe;AAAA,MACf,mBAAiB;AAAA,MACjB,iBAAe;AAAA,MACf;AAAA,MAEC;AAAA;AAAA,EACH;AAEJ;","names":[]}

package/dist/chunk-4WOE4T43.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-4WOE4T43.js.map

package/dist/chunk-4WOE4T43.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-BBMVGCDE.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-BBMVGCDE.js.map

package/dist/chunk-BBMVGCDE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-DT6EO53O.js

@@ -1,46 +0,0 @@
-import {
-  InputGroup
-} from "./chunk-SX22Q2HZ.js";
-
-// src/components/form/input/input.tsx
-import { jsx } from "react/jsx-runtime";
-var Input = ({
-  dark = false,
-  className,
-  errorMessage,
-  labelProps,
-  label,
-  id,
-  style,
-  stretch,
-  disabled,
-  readOnly,
-  startAdornment,
-  endAdornment,
-  ref,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsx(
-    InputGroup,
-    {
-      className,
-      disabled,
-      dark,
-      stretch,
-      errorMessage,
-      id,
-      label,
-      labelProps,
-      readOnly,
-      style,
-      startAdornment,
-      endAdornment,
-      children: /* @__PURE__ */ jsx("input", { ...props, className: "bi-input", disabled, readOnly, ref })
-    }
-  );
-};
-
-export {
-  Input
-};
-//# sourceMappingURL=chunk-DT6EO53O.js.map

package/dist/chunk-DT6EO53O.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/form/input/input.tsx"],"sourcesContent":["import type { InputHTMLAttributes, Ref } from 'react';\nimport { InputGroup } from '../input-group';\nimport type { InputGroupProps } from '../input-group';\n\nexport type InputProps = Omit<InputGroupProps & InputHTMLAttributes<HTMLInputElement>, 'children'> & {\n  ref?: Ref<HTMLInputElement>;\n};\n\nexport const Input = ({\n  dark = false,\n  className,\n  errorMessage,\n  labelProps,\n  label,\n  id,\n  style,\n  stretch,\n  disabled,\n  readOnly,\n  startAdornment,\n  endAdornment,\n  ref,\n  ...props\n}: InputProps) => {\n  return (\n    <InputGroup\n      className={className}\n      disabled={disabled}\n      dark={dark}\n      stretch={stretch}\n      errorMessage={errorMessage}\n      id={id}\n      label={label}\n      labelProps={labelProps}\n      readOnly={readOnly}\n      style={style}\n      startAdornment={startAdornment}\n      endAdornment={endAdornment}\n    >\n      <input {...props} className='bi-input' disabled={disabled} readOnly={readOnly} ref={ref} />\n    </InputGroup>\n  );\n};\n"],"mappings":";;;;;AAuCM;AA/BC,IAAM,QAAQ,CAAC;AAAA,EACpB,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAkB;AAChB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEA,8BAAC,WAAO,GAAG,OAAO,WAAU,YAAW,UAAoB,UAAoB,KAAU;AAAA;AAAA,EAC3F;AAEJ;","names":[]}

package/dist/chunk-DZDPC6SE.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-DZDPC6SE.js.map

package/dist/chunk-DZDPC6SE.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-IT2O6DB2.js

@@ -1,53 +0,0 @@
-import {
-  Spinner
-} from "./chunk-RONRQXS6.js";
-
-// src/components/button/button.tsx
-import clsx from "clsx/lite";
-import { Slot, Slottable } from "@radix-ui/react-slot";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Button = ({
-  asChild,
-  variant = "filled",
-  size = "medium",
-  stretch,
-  dark,
-  submitting,
-  icon,
-  children,
-  className,
-  startIcon,
-  endIcon,
-  active,
-  ref,
-  ...props
-}) => {
-  const Component = asChild ? Slot : "button";
-  return /* @__PURE__ */ jsxs(
-    Component,
-    {
-      "aria-busy": Boolean(submitting) || void 0,
-      "aria-disabled": Boolean(submitting) || void 0,
-      className: clsx("bi-button", className),
-      "data-variant": variant,
-      "data-size": size,
-      "data-stretch": stretch || void 0,
-      "data-dark": dark || void 0,
-      "data-icon": icon || void 0,
-      "data-active": active || void 0,
-      ref,
-      type: asChild ? void 0 : "button",
-      ...props,
-      children: [
-        !icon && (submitting ? /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true", className: "bi-button--start-icon" }) : startIcon && /* @__PURE__ */ jsx("span", { className: "bi-button--start-icon", children: startIcon })),
-        /* @__PURE__ */ jsx(Slottable, { children: icon && submitting ? /* @__PURE__ */ jsx(Spinner, { "aria-hidden": "true" }) : children }),
-        !icon && endIcon && /* @__PURE__ */ jsx("span", { className: "bi-button--end-icon", children: endIcon })
-      ]
-    }
-  );
-};
-
-export {
-  Button
-};
-//# sourceMappingURL=chunk-IT2O6DB2.js.map

package/dist/chunk-IT2O6DB2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/button/button.tsx"],"sourcesContent":["import clsx from 'clsx/lite';\nimport type { ButtonHTMLAttributes, ReactNode, Ref } from 'react';\nimport { Slot, Slottable } from '@radix-ui/react-slot';\nimport { Spinner } from '../spinner';\nimport { MergeRight } from '../../utilities';\n\nexport type ButtonProps = MergeRight<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  {\n    /**\n     * The button size.\n     * @default 'medium'\n     */\n    size?: 'small' | 'medium' | 'large';\n    /**\n     * The button variant.\n     * @default 'filled'\n     */\n    variant?: 'filled' | 'outlined' | 'text' | 'flat';\n    /**\n     * Stretch the button to the full width.\n     * @default false\n     */\n    stretch?: boolean;\n    /**\n     * Is the component displayed on a dark background.\n     * @default false\n     */\n    dark?: boolean;\n    /**\n     * Display a loading animation with the Spinner-component.\n     * Replaces the `startIcon` if used\n     * @default false\n     */\n    submitting?: boolean;\n    /**\n     * Display as icon-button, only use when showing an icon as the label.\n     * Not compatible with the icon-slots or `stretch`.\n     * Always provide a descriptive aria-label for accessibility when set to true.\n     * @default false\n     */\n    icon?: boolean;\n    /** Set an icon before the button label, no effect if `icon=true` */\n    startIcon?: ReactNode;\n    /** Set an icon after the button label, no effect if `icon=true` */\n    endIcon?: ReactNode;\n    /** Make the button active by showing an active state. */\n    active?: boolean;\n    ref?: Ref<HTMLButtonElement>;\n    /**\n     * Change the default rendered element for the one passed as a child, merging their props and behavior.\n     * @default false\n     */\n    asChild?: boolean;\n    /**\n     * Specify the type of button. Unset when `asChild` is true\n     * @default 'button'\n     */\n    type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];\n  }\n>;\n\nexport const Button = ({\n  asChild,\n  variant = 'filled',\n  size = 'medium',\n  stretch,\n  dark,\n  submitting,\n  icon,\n  children,\n  className,\n  startIcon,\n  endIcon,\n  active,\n  ref,\n  ...props\n}: ButtonProps) => {\n  const Component = asChild ? Slot : 'button';\n\n  return (\n    <Component\n      aria-busy={Boolean(submitting) || undefined}\n      aria-disabled={Boolean(submitting) || undefined}\n      className={clsx('bi-button', className)}\n      data-variant={variant}\n      data-size={size}\n      data-stretch={stretch || undefined}\n      data-dark={dark || undefined}\n      data-icon={icon || undefined}\n      data-active={active || undefined}\n      ref={ref}\n      /* don't set type when we use `asChild` */\n      type={asChild ? undefined : 'button'}\n      /* if consumers set type, our default does not set anything, as `rest` contains this */\n      {...props}\n    >\n      {!icon &&\n        (submitting ? (\n          <Spinner aria-hidden='true' className='bi-button--start-icon' />\n        ) : (\n          startIcon && <span className='bi-button--start-icon'>{startIcon}</span>\n        ))}\n      <Slottable>{icon && submitting ? <Spinner aria-hidden='true' /> : children}</Slottable>\n      {!icon && endIcon && <span className='bi-button--end-icon'>{endIcon}</span>}\n    </Component>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,UAAU;AAEjB,SAAS,MAAM,iBAAiB;AA+E5B,SAkBM,KAlBN;AAnBG,IAAM,SAAS,CAAC;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,EACV,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,QAAM,YAAY,UAAU,OAAO;AAEnC,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAW,QAAQ,UAAU,KAAK;AAAA,MAClC,iBAAe,QAAQ,UAAU,KAAK;AAAA,MACtC,WAAW,KAAK,aAAa,SAAS;AAAA,MACtC,gBAAc;AAAA,MACd,aAAW;AAAA,MACX,gBAAc,WAAW;AAAA,MACzB,aAAW,QAAQ;AAAA,MACnB,aAAW,QAAQ;AAAA,MACnB,eAAa,UAAU;AAAA,MACvB;AAAA,MAEA,MAAM,UAAU,SAAY;AAAA,MAE3B,GAAG;AAAA,MAEH;AAAA,SAAC,SACC,aACC,oBAAC,WAAQ,eAAY,QAAO,WAAU,yBAAwB,IAE9D,aAAa,oBAAC,UAAK,WAAU,yBAAyB,qBAAU;AAAA,QAEpE,oBAAC,aAAW,kBAAQ,aAAa,oBAAC,WAAQ,eAAY,QAAO,IAAK,UAAS;AAAA,QAC1E,CAAC,QAAQ,WAAW,oBAAC,UAAK,WAAU,uBAAuB,mBAAQ;AAAA;AAAA;AAAA,EACtE;AAEJ;","names":[]}

package/dist/chunk-LLNHMZB2.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-LLNHMZB2.js.map

package/dist/chunk-LLNHMZB2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-MXDZGWL4.js

@@ -1,33 +0,0 @@
-import {
-  Logo
-} from "./chunk-NLZRLXFN.js";
-
-// src/components/navbar/navbar.tsx
-import clsx from "clsx";
-import { jsx, jsxs } from "react/jsx-runtime";
-var Navbar = ({
-  dark = false,
-  fixed = false,
-  menuAreaLabel,
-  homeAriaLabel,
-  skipLink,
-  homeHref,
-  logo,
-  children,
-  className,
-  ref,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs("nav", { ...props, className: clsx("bi-navbar", className), "data-fixed": fixed, "data-dark": dark, ref, children: [
-    skipLink && /* @__PURE__ */ jsx("a", { className: "bi-navbar__skip-link", href: skipLink.href, children: skipLink.label }),
-    /* @__PURE__ */ jsxs("header", { className: "bi-navbar__header", "aria-label": menuAreaLabel, children: [
-      /* @__PURE__ */ jsx("a", { "aria-label": homeAriaLabel, href: homeHref, children: logo || /* @__PURE__ */ jsx(Logo, { dark }) }),
-      children
-    ] })
-  ] });
-};
-
-export {
-  Navbar
-};
-//# sourceMappingURL=chunk-MXDZGWL4.js.map

package/dist/chunk-MXDZGWL4.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/navbar/navbar.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport type { HTMLAttributes, ReactNode, Ref } from 'react';\nimport { Logo } from '../logo';\nimport { MergeRight } from '../../utilities';\n\nexport type NavbarProps = MergeRight<\n  HTMLAttributes<HTMLDivElement>,\n  {\n    /**\n     * Determines if the navbar should be dark or light.\n     * @default false\n     */\n    dark?: boolean;\n    /**\n     * Skip link.\n     */\n    skipLink?: { label: string; href: string };\n    /**\n     * Text for menu area label.\n     */\n    menuAreaLabel: string;\n    /**\n     * Determines if the navbar should be fixed.\n     * @default false\n     */\n    fixed?: boolean;\n    /**\n     * Aria label for the home link.\n     */\n    homeAriaLabel: string;\n    /**\n     * Href for the home link.\n     */\n    homeHref: string;\n    /**\n     * Override the default logo\n     */\n    logo?: ReactNode;\n    ref?: Ref<HTMLElement>;\n  }\n>;\n\nexport const Navbar = ({\n  dark = false,\n  fixed = false,\n  menuAreaLabel,\n  homeAriaLabel,\n  skipLink,\n  homeHref,\n  logo,\n  children,\n  className,\n  ref,\n  ...props\n}: NavbarProps) => {\n  return (\n    <nav {...props} className={clsx('bi-navbar', className)} data-fixed={fixed} data-dark={dark} ref={ref}>\n      {skipLink && (\n        <a className='bi-navbar__skip-link' href={skipLink.href}>\n          {skipLink.label}\n        </a>\n      )}\n      <header className='bi-navbar__header' aria-label={menuAreaLabel}>\n        <a aria-label={homeAriaLabel} href={homeHref}>\n          {logo || <Logo dark={dark} />}\n        </a>\n        {children}\n      </header>\n    </nav>\n  );\n};\n"],"mappings":";;;;;AAAA,OAAO,UAAU;AA0DT,cAIF,YAJE;AAhBD,IAAM,SAAS,CAAC;AAAA,EACrB,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAmB;AACjB,SACE,qBAAC,SAAK,GAAG,OAAO,WAAW,KAAK,aAAa,SAAS,GAAG,cAAY,OAAO,aAAW,MAAM,KAC1F;AAAA,gBACC,oBAAC,OAAE,WAAU,wBAAuB,MAAM,SAAS,MAChD,mBAAS,OACZ;AAAA,IAEF,qBAAC,YAAO,WAAU,qBAAoB,cAAY,eAChD;AAAA,0BAAC,OAAE,cAAY,eAAe,MAAM,UACjC,kBAAQ,oBAAC,QAAK,MAAY,GAC7B;AAAA,MACC;AAAA,OACH;AAAA,KACF;AAEJ;","names":[]}