@intlayer/design-system 9.4.3 → 9.5.0

package/dist/esm/components/Table/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { forwardRef, type HTMLAttributes } from 'react';\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  /** Enables hover states and cursor changes for interactive rows */\n  isInteractive?: boolean;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  ({ className, isInteractive, ...props }, ref) => (\n    <table\n      ref={ref}\n      className={cn(\n        'w-full table-auto border-separate border-spacing-0 overflow-hidden rounded-2xl text-left text-sm',\n        '[&_thead_tr:first-child_th:first-child]:rounded-tl-2xl',\n        '[&_thead_tr:first-child_th:last-child]:rounded-tr-2xl',\n        '[&_tbody_tr:last-child_td:first-child]:rounded-bl-2xl',\n        '[&_tbody_tr:last-child_td:last-child]:rounded-br-2xl',\n        'supports-[corner-shape:squircle]:rounded-3xl',\n        'supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:first-child]:rounded-tl-3xl',\n        'supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:last-child]:rounded-tr-3xl',\n        'supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:first-child]:rounded-bl-3xl',\n        'supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:last-child]:rounded-br-3xl',\n        isInteractive &&\n          '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr:hover]:dark:bg-neutral-dark/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,YAClB,EAAE,WAAW,eAAe,GAAG,SAAS,QACvC,oBAAC,SAAD;CACO;CACL,WAAW,GACT,oGACA,0DACA,yDACA,yDACA,wDACA,gDACA,2FACA,0FACA,0FACA,yFACA,iBACE,0IACF,SACF;CACA,GAAI;AACL,EAEL"}
+{"version":3,"file":"Table.mjs","names":[],"sources":["../../../../src/components/Table/Table.tsx"],"sourcesContent":["import { cn } from '@utils/cn';\nimport { forwardRef, type HTMLAttributes } from 'react';\n\nexport interface TableProps extends HTMLAttributes<HTMLTableElement> {\n  /** Enables hover states and cursor changes for interactive rows */\n  isInteractive?: boolean;\n}\n\nexport const Table = forwardRef<HTMLTableElement, TableProps>(\n  ({ className, isInteractive, ...props }, ref) => (\n    <table\n      ref={ref}\n      className={cn(\n        'w-full table-auto border-separate border-spacing-0 overflow-hidden rounded-2xl text-left text-sm',\n        '[&_thead_tr:first-child_th:first-child]:rounded-tl-2xl',\n        '[&_thead_tr:first-child_th:last-child]:rounded-tr-2xl',\n        '[&_tbody_tr:last-child_td:first-child]:rounded-bl-2xl',\n        '[&_tbody_tr:last-child_td:last-child]:rounded-br-2xl',\n        'supports-[corner-shape:squircle]:rounded-3xl',\n        'supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:first-child]:rounded-tl-3xl',\n        'supports-[corner-shape:squircle]:[&_thead_tr:first-child_th:last-child]:rounded-tr-3xl',\n        'supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:first-child]:rounded-bl-3xl',\n        'supports-[corner-shape:squircle]:[&_tbody_tr:last-child_td:last-child]:rounded-br-3xl',\n        isInteractive &&\n          '[&_tbody_tr:hover]:bg-neutral/40 [&_tbody_tr]:cursor-pointer [&_tbody_tr]:transition-colors',\n        className\n      )}\n      {...props}\n    />\n  )\n);\n"],"mappings":";;;;;AAQA,MAAa,QAAQ,YAClB,EAAE,WAAW,eAAe,GAAG,SAAS,QACvC,oBAAC,SAAD;CACO;CACL,WAAW,GACT,oGACA,0DACA,yDACA,yDACA,wDACA,gDACA,2FACA,0FACA,0FACA,yFACA,iBACE,+FACF,SACF;CACA,GAAI;AACL,EAEL"}

package/dist/esm/components/Tag/index.mjs

@@ -15,7 +15,6 @@ const containerVariants = cva("w-fit backdrop-blur", {
 			full: "rounded-full"
 		},
 		color: {
-			primary: "border-primary bg-primary/10 text-primary",
 			success: "border-success bg-success/10 text-success",
 			error: "border-error bg-error/10 text-error",
 			warning: "border-warning bg-warning/10 text-warning",

package/dist/esm/components/Tag/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color=\"success\" border=\"with\">\n *   Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color=\"warning\" size=\"lg\">\n *   Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize=\"none\">Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize=\"full\">Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize=\"md\">Rounded Tag</Tag>\n * ```\n */\nexport type TagRoundedSize =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full';\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">Pending</Tag>\n *\n * // Category tags\n * <Tag color=\"neutral\">Category</Tag>\n * <Tag color=\"text\">General</Tag>\n * ```\n */\nexport type TagColor =\n  | 'primary'\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'neutral'\n  | 'text'\n  | 'blue'\n  | 'yellow'\n  | 'green'\n  | 'red'\n  | 'orange'\n  | 'purple'\n  | 'pink'\n  | 'brown'\n  | 'gray'\n  | 'black'\n  | 'white';\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size=\"xs\">Small detail</Tag>\n * <Tag size=\"sm\">Minor category</Tag>\n * <Tag size=\"md\">Standard tag</Tag>\n * <Tag size=\"lg\">Important label</Tag>\n * <Tag size=\"xl\">Hero tag</Tag>\n * ```\n */\nexport type TagSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border=\"none\">Borderless</Tag>\n * <Tag border=\"with\">With Border</Tag>\n * ```\n */\nexport type TagBorder = 'none' | 'with';\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background=\"none\">No Background</Tag>\n * <Tag background=\"with\">With Background</Tag>\n * ```\n */\nexport type TagBackground = 'none' | 'with';\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      [`${'xxl'}`]: 'rounded-2xl',\n      [`${'xxxl'}`]: 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    color: {\n      primary: 'border-primary bg-primary/10 text-primary',\n      success: 'border-success bg-success/10 text-success',\n      error: 'border-error bg-error/10 text-error',\n      warning: 'border-warning bg-warning/10 text-warning',\n      neutral: '/10 border-neutral bg-neutral/10 text-neutral',\n      text: 'border-text bg-text/10 text-foreground',\n      black: 'border-black bg-black/10 text-black',\n      white: 'border-white bg-white/10 text-white',\n    },\n    size: {\n      xs: 'border-[1.2px] px-2 py-0.5 text-xs',\n      sm: 'border-[1.3px] px-2 py-0.5 text-sm',\n      md: 'border-2 px-2 py-1 text-base',\n      lg: 'border-2 px-3 py-2 text-lg',\n      xl: 'border-2 px-3 py-2 text-xl',\n    },\n    border: {\n      none: 'border-none',\n      with: 'border-[1.3px] border-text',\n    },\n    background: {\n      none: 'bg-none',\n      with: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: 'full',\n    border: 'none',\n    color: 'text',\n    size: 'md',\n  },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color=\"neutral\" border=\"with\">\n *   Technology\n * </Tag>\n * <Tag color=\"text\" border=\"with\">\n *   Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n *   <Tag size=\"xs\" color=\"neutral\">Minor</Tag>\n *   <Tag size=\"sm\" color=\"text\">Standard</Tag>\n *   <Tag size=\"lg\" color=\"success\">Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n *   <Tag roundedSize=\"none\">Sharp</Tag>\n *   <Tag roundedSize=\"md\">Rounded</Tag>\n *   <Tag roundedSize=\"full\">Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n *   color=\"warning\"\n *   size=\"lg\"\n *   border=\"with\"\n *   roundedSize=\"lg\"\n *   className=\"font-bold uppercase tracking-wide\"\n * >\n *   Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n *   color=\"success\"\n *   onClick={() => console.log('Tag clicked')}\n *   className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n *   Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAiLA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;IACH,QAAa;IACb,SAAc;GACf,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,OAAO;GACP,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,YAAY;GACV,MAAM;GACN,MAAM;EACR;CACF;CAEA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,OAAO;EACP,MAAM;CACR;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../../src/components/Tag/index.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport type { FC, HTMLAttributes, PropsWithChildren } from 'react';\n\n/**\n * Properties for the Tag component extending HTML div attributes and variant options\n *\n * @interface TagProps\n * @extends {PropsWithChildren<VariantProps<typeof containerVariants>>}\n * @extends {HTMLAttributes<HTMLDivElement>}\n *\n * @property {ReactNode} children - The content to display inside the tag\n * @property {TagColor} [color] - Color theme variant of the tag\n * @property {TagRoundedSize} [roundedSize] - Border radius size of the tag\n * @property {TagSize} [size] - Size variant affecting padding and font size\n * @property {TagBorder} [border] - Whether to show a border around the tag\n * @property {TagBackground} [background] - Background visibility option\n * @property [className] - Additional CSS classes for custom styling\n *\n * @example\n * ```tsx\n * // Basic tag\n * <Tag>Default Tag</Tag>\n *\n * // Success tag with border\n * <Tag color=\"success\" border=\"with\">\n *   Success Status\n * </Tag>\n *\n * // Large warning tag\n * <Tag color=\"warning\" size=\"lg\">\n *   Important Warning\n * </Tag>\n * ```\n */\ntype TagProps = PropsWithChildren<VariantProps<typeof containerVariants>> &\n  HTMLAttributes<HTMLDivElement>;\n\n/**\n * Enumeration for tag border radius sizes\n *\n * Controls the roundedness of tag corners, from sharp edges to fully rounded pills.\n *\n * @enum TagRoundedSize\n * @property NONE - 'none' - No border radius (sharp corners)\n * @property SM - 'sm' - Small border radius (2px)\n * @property MD - 'md' - Medium border radius (6px)\n * @property LG - 'lg' - Large border radius (8px)\n * @property XL - 'xl' - Extra large border radius (12px)\n * @property XXL - '2xl' - 2x large border radius (16px)\n * @property XXXL - '3xl' - 3x large border radius (24px)\n * @property FULL - 'full' - Fully rounded (50% border radius, pill shape)\n *\n * @example\n * ```tsx\n * // Sharp corners\n * <Tag roundedSize=\"none\">Sharp Tag</Tag>\n *\n * // Pill-shaped tag\n * <Tag roundedSize=\"full\">Pill Tag</Tag>\n *\n * // Medium rounded corners\n * <Tag roundedSize=\"md\">Rounded Tag</Tag>\n * ```\n */\nexport type TagRoundedSize =\n  | 'none'\n  | 'sm'\n  | 'md'\n  | 'lg'\n  | 'xl'\n  | '2xl'\n  | '3xl'\n  | 'full';\n\n/**\n * Enumeration for tag color themes\n *\n * Provides semantic color options for different tag purposes and meanings.\n * Each color includes background, border, and text color variations.\n *\n * @enum TagColor\n * @property SUCCESS - 'success' - Green theme for positive states, success messages, or completed items\n * @property ERROR - 'error' - Red theme for error states, warnings, or failed operations\n * @property WARNING - 'warning' - Yellow/orange theme for caution, pending states, or important notices\n * @property NEUTRAL - 'neutral' - Gray theme for neutral information or secondary content\n * @property TEXT - 'text' - Default text color theme for general purpose tags\n *\n * @example\n * ```tsx\n * // Status indicators\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">Pending</Tag>\n *\n * // Category tags\n * <Tag color=\"neutral\">Category</Tag>\n * <Tag color=\"text\">General</Tag>\n * ```\n */\nexport type TagColor =\n  | 'success'\n  | 'error'\n  | 'warning'\n  | 'neutral'\n  | 'text'\n  | 'blue'\n  | 'yellow'\n  | 'green'\n  | 'red'\n  | 'orange'\n  | 'purple'\n  | 'pink'\n  | 'brown'\n  | 'gray'\n  | 'black'\n  | 'white';\n\n/**\n * Enumeration for tag size variants\n *\n * Controls the overall size of tags including padding, font size, and border thickness.\n * Sizes are designed to maintain visual hierarchy and readability.\n *\n * @enum TagSize\n * @property XS - 'xs' - Extra small (0.5rem padding, text-xs, 1.2px border)\n * @property SM - 'sm' - Small (0.5rem padding, text-sm, 1.5px border)\n * @property MD - 'md' - Medium (1rem padding, text-base, 2px border) - Default size\n * @property LG - 'lg' - Large (2rem padding, text-lg, 2px border)\n * @property XL - 'xl' - Extra large (4rem padding, text-xl, 2px border)\n *\n * @example\n * ```tsx\n * // Different sizes for hierarchy\n * <Tag size=\"xs\">Small detail</Tag>\n * <Tag size=\"sm\">Minor category</Tag>\n * <Tag size=\"md\">Standard tag</Tag>\n * <Tag size=\"lg\">Important label</Tag>\n * <Tag size=\"xl\">Hero tag</Tag>\n * ```\n */\nexport type TagSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\n/**\n * Enumeration for tag border visibility\n *\n * Controls whether a border is displayed around the tag.\n *\n * @enum TagBorder\n * @property NONE - 'none' - No border (default)\n * @property WITH - 'with' - Show border with 1.5px thickness\n *\n * @example\n * ```tsx\n * <Tag border=\"none\">Borderless</Tag>\n * <Tag border=\"with\">With Border</Tag>\n * ```\n */\nexport type TagBorder = 'none' | 'with';\n\n/**\n * Enumeration for tag background visibility\n *\n * Controls the background styling of the tag.\n *\n * @enum TagBackground\n * @property NONE - 'none' - No background styling\n * @property WITH - 'with' - Apply background styling\n *\n * @example\n * ```tsx\n * <Tag background=\"none\">No Background</Tag>\n * <Tag background=\"with\">With Background</Tag>\n * ```\n */\nexport type TagBackground = 'none' | 'with';\n\nconst containerVariants = cva('w-fit backdrop-blur', {\n  variants: {\n    roundedSize: {\n      none: 'rounded-none',\n      sm: 'rounded-sm',\n      md: 'rounded-md',\n      lg: 'rounded-lg',\n      xl: 'rounded-xl',\n      [`${'xxl'}`]: 'rounded-2xl',\n      [`${'xxxl'}`]: 'rounded-3xl',\n      full: 'rounded-full',\n    },\n    color: {\n      success: 'border-success bg-success/10 text-success',\n      error: 'border-error bg-error/10 text-error',\n      warning: 'border-warning bg-warning/10 text-warning',\n      neutral: '/10 border-neutral bg-neutral/10 text-neutral',\n      text: 'border-text bg-text/10 text-foreground',\n      black: 'border-black bg-black/10 text-black',\n      white: 'border-white bg-white/10 text-white',\n    },\n    size: {\n      xs: 'border-[1.2px] px-2 py-0.5 text-xs',\n      sm: 'border-[1.3px] px-2 py-0.5 text-sm',\n      md: 'border-2 px-2 py-1 text-base',\n      lg: 'border-2 px-3 py-2 text-lg',\n      xl: 'border-2 px-3 py-2 text-xl',\n    },\n    border: {\n      none: 'border-none',\n      with: 'border-[1.3px] border-text',\n    },\n    background: {\n      none: 'bg-none',\n      with: '',\n    },\n  },\n\n  defaultVariants: {\n    roundedSize: 'full',\n    border: 'none',\n    color: 'text',\n    size: 'md',\n  },\n});\n\n/**\n * Tag component for displaying labels, categories, status indicators, and badges\n *\n * The Tag component is a versatile labeling element that supports multiple visual variants\n * for different use cases. It provides semantic color options, flexible sizing, and\n * customizable styling options for borders and backgrounds.\n *\n * ## Features\n * - **Semantic Colors**: Success, error, warning, neutral, and text color themes\n * - **Flexible Sizing**: Five size variants from extra small to extra large\n * - **Border Radius Options**: Eight rounding options from none to fully rounded\n * - **Border Control**: Optional borders for enhanced visual separation\n * - **Background Control**: Configurable background styling\n * - **Accessibility**: Proper HTML semantics and keyboard navigation support\n *\n * ## Use Cases\n * - **Status Indicators**: Show completion, error, or pending states\n * - **Category Labels**: Organize and categorize content\n * - **Badges**: Display counts, notifications, or achievements\n * - **Keywords**: Tag content with relevant keywords or topics\n * - **Metadata**: Show additional information like dates, authors, or types\n *\n * ## Design Principles\n * - Maintains readability across all size and color combinations\n * - Uses backdrop blur effect for subtle transparency\n * - Follows consistent spacing and typography scales\n * - Provides sufficient color contrast for accessibility\n *\n * @param {TagProps} props - The properties for the Tag component\n * @returns {JSX.Element} The rendered tag element\n *\n * @example\n * ```tsx\n * // Basic status tags\n * <Tag color=\"success\">Completed</Tag>\n * <Tag color=\"error\">Failed</Tag>\n * <Tag color=\"warning\">In Progress</Tag>\n *\n * // Category tags with borders\n * <Tag color=\"neutral\" border=\"with\">\n *   Technology\n * </Tag>\n * <Tag color=\"text\" border=\"with\">\n *   Design\n * </Tag>\n *\n * // Size variations for hierarchy\n * <div className=\"flex items-center gap-2\">\n *   <Tag size=\"xs\" color=\"neutral\">Minor</Tag>\n *   <Tag size=\"sm\" color=\"text\">Standard</Tag>\n *   <Tag size=\"lg\" color=\"success\">Important</Tag>\n * </div>\n *\n * // Rounded variations\n * <div className=\"flex gap-2\">\n *   <Tag roundedSize=\"none\">Sharp</Tag>\n *   <Tag roundedSize=\"md\">Rounded</Tag>\n *   <Tag roundedSize=\"full\">Pill</Tag>\n * </div>\n *\n * // Custom styled tag\n * <Tag\n *   color=\"warning\"\n *   size=\"lg\"\n *   border=\"with\"\n *   roundedSize=\"lg\"\n *   className=\"font-bold uppercase tracking-wide\"\n * >\n *   Custom Style\n * </Tag>\n *\n * // Interactive tags with click handlers\n * <Tag\n *   color=\"success\"\n *   onClick={() => console.log('Tag clicked')}\n *   className=\"cursor-pointer hover:opacity-80 transition-opacity\"\n * >\n *   Clickable Tag\n * </Tag>\n * ```\n *\n * @see {@link TagColor} - Available color theme options\n * @see {@link TagSize} - Available size variants\n * @see {@link TagRoundedSize} - Available border radius options\n * @see {@link TagBorder} - Border visibility options\n * @see {@link TagBackground} - Background styling options\n */\nexport const Tag: FC<TagProps> = ({\n  children,\n  color,\n  roundedSize,\n  size,\n  border,\n  background,\n  className,\n  ...props\n}) => {\n  return (\n    <div\n      className={containerVariants({\n        color,\n        roundedSize,\n        size,\n        border,\n        background,\n        className,\n      })}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"mappings":";;;;AAgLA,MAAM,oBAAoB,IAAI,uBAAuB;CACnD,UAAU;EACR,aAAa;GACX,MAAM;GACN,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;IACH,QAAa;IACb,SAAc;GACf,MAAM;EACR;EACA,OAAO;GACL,SAAS;GACT,OAAO;GACP,SAAS;GACT,SAAS;GACT,MAAM;GACN,OAAO;GACP,OAAO;EACT;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EACA,QAAQ;GACN,MAAM;GACN,MAAM;EACR;EACA,YAAY;GACV,MAAM;GACN,MAAM;EACR;CACF;CAEA,iBAAiB;EACf,aAAa;EACb,QAAQ;EACR,OAAO;EACP,MAAM;CACR;AACF,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyFD,MAAa,OAAqB,EAChC,UACA,OACA,aACA,MACA,QACA,YACA,WACA,GAAG,YACC;CACJ,OACE,oBAAC,OAAD;EACE,WAAW,kBAAkB;GAC3B;GACA;GACA;GACA;GACA;GACA;EACF,CAAC;EACD,GAAI;EAEH;CACE;AAET"}

package/dist/esm/hooks/index.mjs

@@ -6,6 +6,7 @@ import { useGetElementOrWindow } from "./useGetElementOrWindow.mjs";
 import { useHorizontalSwipe } from "./useHorizontalSwipe.mjs";
 import { useIsMounted } from "./useIsMounted.mjs";
 import { useKeyboardDetector } from "./useKeyboardDetector.mjs";
+import { NO_HIGHLIGHTED_INDEX, useListKeyboardNavigation } from "./useListKeyboardNavigation.mjs";
 import { useScreenWidth } from "./useScreenWidth.mjs";
 import { useScrollBlockage } from "./useScrollBlockage/index.mjs";
 import { useScrollDetection } from "./useScrollDetection.mjs";
@@ -13,4 +14,4 @@ import { useScrollY } from "./useScrollY.mjs";
 import { useSearch } from "./useSearch.mjs";
 import { useStickToBottom } from "./useStickToBottom.mjs";
 
-export { calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsMounted, useItemSelector, useKeyboardDetector, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useStickToBottom };
+export { NO_HIGHLIGHTED_INDEX, calculateIsMobile, checkIsIOS, checkIsIphoneOrSafariDevice, checkIsMac, checkIsMobileScreen, checkIsMobileUserAgent, getBreakpointFromSize, useDevice, useGetElementById, useGetElementOrWindow, useHorizontalSwipe, useIsMounted, useItemSelector, useKeyboardDetector, useListKeyboardNavigation, usePersistedStore, useScreenWidth, useScrollBlockage, useScrollDetection, useScrollY, useSearch, useStickToBottom };

package/dist/esm/hooks/useDevice.mjs

@@ -1,19 +1,18 @@
 'use client';
 
-import { useEffect, useState } from "react";
+import { useCallback, useSyncExternalStore } from "react";
 
 //#region src/hooks/useDevice.ts
-const getBreakpointFromSize = (breakpoint) => {
-	switch (breakpoint) {
-		case "xs": return 480;
-		case "sm": return 640;
-		case "md": return 768;
-		case "lg": return 1024;
-		case "xl": return 1280;
-		case "2xl": return 1536;
-		default: return breakpoint;
-	}
+/** Tailwind's breakpoints, in pixels. */
+const BREAKPOINT_WIDTHS = {
+	xs: 480,
+	sm: 640,
+	md: 768,
+	lg: 1024,
+	xl: 1280,
+	"2xl": 1536
 };
+const getBreakpointFromSize = (breakpoint) => typeof breakpoint === "number" ? breakpoint : BREAKPOINT_WIDTHS[breakpoint] ?? BREAKPOINT_WIDTHS.md;
 const checkIsMobileUserAgent = () => {
 	if (typeof window === "undefined") return;
 	const userAgent = window.navigator?.userAgent;
@@ -55,33 +54,102 @@ const calculateIsMobile = (breakpoint = "md") => {
 		isMac: checkIsMac()
 	};
 };
-const useDevice = (breakpoint = "md") => {
-	const [result, setResult] = useState({
-		isMobileScreen: void 0,
-		isMobileUserAgent: void 0,
-		isMobile: void 0,
-		isIOS: void 0,
-		isMac: void 0
+/**
+* Snapshot served while rendering on the server and while hydrating, where no
+* viewport exists. Frozen and shared so every consumer reads the very same
+* reference — `useSyncExternalStore` compares snapshots by identity.
+*/
+const SERVER_SNAPSHOT = Object.freeze({
+	isMobileScreen: void 0,
+	isMobileUserAgent: void 0,
+	isMobile: void 0,
+	isIOS: void 0,
+	isMac: void 0
+});
+/** The user agent never changes within a document, so parse it once. */
+let userAgentFlags;
+const getUserAgentFlags = () => {
+	userAgentFlags ??= {
+		isMobileUserAgent: checkIsMobileUserAgent(),
+		isIOS: checkIsIOS(),
+		isMac: checkIsMac()
+	};
+	return userAgentFlags;
+};
+/**
+* One store per breakpoint, shared by every component asking for it.
+*
+* A page mounts this hook from a dozen components; giving each its own
+* `MediaQueryList`, state and effect made the browser evaluate the same query a
+* dozen times and React commit a dozen separate post-hydration renders. Reading
+* from a single store collapses those into one subscription and one commit.
+*/
+const breakpointStores = /* @__PURE__ */ new Map();
+const createBreakpointStore = (breakpointValue) => {
+	const mediaQuery = window.matchMedia(`(max-width: ${breakpointValue}px)`);
+	const listeners = /* @__PURE__ */ new Set();
+	const buildSnapshot = (isMobileScreen) => ({
+		...getUserAgentFlags(),
+		isMobileScreen,
+		isMobile: isMobileScreen
 	});
-	useEffect(() => {
-		const breakpointValue = getBreakpointFromSize(breakpoint);
-		const mobileScreenQuery = window.matchMedia(`(max-width: ${breakpointValue}px)`);
-		const isMobileUserAgent = checkIsMobileUserAgent();
-		const isIOS = checkIsIOS();
-		const isMac = checkIsMac();
-		const applyMatches = (isMobileScreen) => setResult({
-			isMobileScreen,
-			isMobileUserAgent,
-			isMobile: isMobileScreen,
-			isIOS,
-			isMac
-		});
-		applyMatches(mobileScreenQuery.matches);
-		const handleChange = (event) => applyMatches(event.matches);
-		mobileScreenQuery.addEventListener("change", handleChange);
-		return () => mobileScreenQuery.removeEventListener("change", handleChange);
-	}, [breakpoint]);
-	return result;
+	let snapshot = buildSnapshot(mediaQuery.matches);
+	/**
+	* Replaces the snapshot only when the viewport actually crossed the
+	* breakpoint. `useSyncExternalStore` compares snapshots by identity, so
+	* rebuilding an equal object would schedule a render for nothing.
+	*
+	* @returns Whether the snapshot changed.
+	*/
+	const refreshSnapshot = (isMobileScreen) => {
+		if (snapshot.isMobileScreen === isMobileScreen) return false;
+		snapshot = buildSnapshot(isMobileScreen);
+		return true;
+	};
+	const handleChange = (event) => {
+		if (!refreshSnapshot(event.matches)) return;
+		for (const listener of listeners) listener();
+	};
+	return {
+		subscribe: (onStoreChange) => {
+			if (listeners.size === 0) {
+				refreshSnapshot(mediaQuery.matches);
+				mediaQuery.addEventListener("change", handleChange);
+			}
+			listeners.add(onStoreChange);
+			return () => {
+				listeners.delete(onStoreChange);
+				if (listeners.size === 0) mediaQuery.removeEventListener("change", handleChange);
+			};
+		},
+		getSnapshot: () => snapshot
+	};
+};
+const getBreakpointStore = (breakpointValue) => {
+	const existingStore = breakpointStores.get(breakpointValue);
+	if (existingStore) return existingStore;
+	const store = createBreakpointStore(breakpointValue);
+	breakpointStores.set(breakpointValue, store);
+	return store;
+};
+const getServerSnapshot = () => SERVER_SNAPSHOT;
+/**
+* Reports whether the current device is mobile, and which platform it runs.
+*
+* Server renders — including the prerendered HTML both apps ship — resolve to
+* `undefined`, then settle to the real values in a single commit once the
+* browser takes over.
+*
+* @example
+* ```tsx
+* const { isMobile } = useDevice('lg');
+* ```
+*/
+const useDevice = (breakpoint = "md") => {
+	const breakpointValue = getBreakpointFromSize(breakpoint);
+	const subscribe = useCallback((onStoreChange) => getBreakpointStore(breakpointValue).subscribe(onStoreChange), [breakpointValue]);
+	const getSnapshot = useCallback(() => getBreakpointStore(breakpointValue).getSnapshot(), [breakpointValue]);
+	return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 };
 
 //#endregion

package/dist/esm/hooks/useDevice.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"useDevice.mjs","names":[],"sources":["../../../src/hooks/useDevice.ts"],"sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\nexport type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\nexport const getBreakpointFromSize = (breakpoint: SizeType | number) => {\n  switch (breakpoint) {\n    case 'xs':\n      return 480;\n    case 'sm':\n      return 640;\n    case 'md':\n      return 768;\n    case 'lg':\n      return 1024;\n    case 'xl':\n      return 1280;\n    case '2xl':\n      return 1536;\n    default:\n      return breakpoint;\n  }\n};\n\nexport const checkIsMobileUserAgent = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  return /android|bb\\d+|meego|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(?:hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(?:ob|in)i|palm(?: os)?|phone|p(?:ixi|re)\\/|plucker|pocket|psp|series(?:4|6)0|symbian|treo|up\\.(?:browser|link)|vodafone|wap|windows ce|windows phone|xda|xiino|zte-/i.test(\n    userAgent\n  );\n};\n\nexport const checkIsIphoneOrSafariDevice = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  /* 1 . is it Safari?  (Chrome & co. also contain “Safari/…”, so exclude them) */\n  const isSafari =\n    /Safari\\/\\d/i.test(userAgent) && // has “Safari/xxx”\n    !/Chrome|CriOS|FxiOS|Edg|OPR/i.test(userAgent); // …but not the other browsers\n\n  /* 2. is it an Apple device? (macOS or iOS/iPadOS) */\n  const isAppleDevice = /Macintosh|iP(?:hone|ad|od)/.test(userAgent);\n\n  return isSafari && isAppleDevice; // true for mac-Safari & iOS-Safari\n};\n\nexport const checkIsIOS = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  // Check for iOS devices: iPhone, iPad, iPod\n  return /iP(?:hone|ad|od)/.test(userAgent);\n};\n\nexport const checkIsMac = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  // Check for macOS/Mac devices\n  return /Macintosh|MacIntel|Mac OS X/.test(userAgent);\n};\n\nexport const checkIsMobileScreen = (\n  breakpoint: number\n): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  return (window?.innerWidth ?? 0) <= breakpoint;\n};\n\ntype UseDeviceState = {\n  isMobileScreen: boolean | undefined;\n  isMobileUserAgent: boolean | undefined;\n  isMobile: boolean | undefined;\n  isIOS: boolean | undefined;\n  isMac: boolean | undefined;\n};\n\nexport const calculateIsMobile = (breakpoint: SizeType | number = 'md') => {\n  const breakpointValue = getBreakpointFromSize(breakpoint);\n\n  const isMobileUserAgent = checkIsMobileUserAgent();\n  const isMobileScreen = checkIsMobileScreen(breakpointValue);\n  const isMobile = isMobileScreen ?? isMobileUserAgent;\n  const isIOS = checkIsIOS();\n  const isMac = checkIsMac();\n\n  return {\n    isMobileScreen, // Is the screen width within a mobile breakpoint.\n    isMobileUserAgent, // Is the user agent indicative of a mobile device.\n    isMobile, // Combines both checks to determine if the device is mobile.\n    isIOS, // Is the device running iOS (iPhone, iPad, iPod).\n    isMac, // Is the device a Mac computer (macOS).\n  };\n};\n\nexport const useDevice = (breakpoint: SizeType | number = 'md') => {\n  const [result, setResult] = useState<UseDeviceState>({\n    isMobileScreen: undefined,\n    isMobileUserAgent: undefined,\n    isMobile: undefined,\n    isIOS: undefined,\n    isMac: undefined,\n  });\n\n  useEffect(() => {\n    const breakpointValue = getBreakpointFromSize(breakpoint);\n    const mobileScreenQuery = window.matchMedia(\n      `(max-width: ${breakpointValue}px)`\n    );\n\n    const isMobileUserAgent = checkIsMobileUserAgent();\n    const isIOS = checkIsIOS();\n    const isMac = checkIsMac();\n\n    const applyMatches = (isMobileScreen: boolean) =>\n      setResult({\n        isMobileScreen,\n        isMobileUserAgent,\n        isMobile: isMobileScreen,\n        isIOS,\n        isMac,\n      });\n\n    applyMatches(mobileScreenQuery.matches);\n\n    const handleChange = (event: MediaQueryListEvent) =>\n      applyMatches(event.matches);\n\n    mobileScreenQuery.addEventListener('change', handleChange);\n\n    return () => mobileScreenQuery.removeEventListener('change', handleChange);\n  }, [breakpoint]);\n\n  return result;\n};\n"],"mappings":";;;;;AAMA,MAAa,yBAAyB,eAAkC;CACtE,QAAQ,YAAR;EACE,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,MACH,OAAO;EACT,KAAK,OACH,OAAO;EACT,SACE,OAAO;CACX;AACF;AAEA,MAAa,+BAAoD;CAC/D,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAEtC,OAAO,mVAAmV,KACxV,SACF;AACF;AAEA,MAAa,oCAAyD;CACpE,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAGpC,MAAM,WACJ,cAAc,KAAK,SAAS,KAC5B,CAAC,8BAA8B,KAAK,SAAS;CAG/C,MAAM,gBAAgB,6BAA6B,KAAK,SAAS;CAEjE,OAAO,YAAY;AACrB;AAEA,MAAa,mBAAwC;CACnD,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAGtC,OAAO,mBAAmB,KAAK,SAAS;AAC1C;AAEA,MAAa,mBAAwC;CACnD,IAAI,OAAO,WAAW,aAAa;CAEnC,MAAM,YAAY,OAAO,WAAW;CAEpC,IAAI,OAAO,cAAc,aAAa;CAGtC,OAAO,8BAA8B,KAAK,SAAS;AACrD;AAEA,MAAa,uBACX,eACwB;CACxB,IAAI,OAAO,WAAW,aAAa;CAEnC,QAAQ,QAAQ,cAAc,MAAM;AACtC;AAUA,MAAa,qBAAqB,aAAgC,SAAS;CACzE,MAAM,kBAAkB,sBAAsB,UAAU;CAExD,MAAM,oBAAoB,uBAAuB;CACjD,MAAM,iBAAiB,oBAAoB,eAAe;CAK1D,OAAO;EACL;EACA;EACA,UAPe,kBAAkB;EAQjC,OAPY,WAOR;EACJ,OAPY,WAOR;CACN;AACF;AAEA,MAAa,aAAa,aAAgC,SAAS;CACjE,MAAM,CAAC,QAAQ,aAAa,SAAyB;EACnD,gBAAgB;EAChB,mBAAmB;EACnB,UAAU;EACV,OAAO;EACP,OAAO;CACT,CAAC;CAED,gBAAgB;EACd,MAAM,kBAAkB,sBAAsB,UAAU;EACxD,MAAM,oBAAoB,OAAO,WAC/B,eAAe,gBAAgB,IACjC;EAEA,MAAM,oBAAoB,uBAAuB;EACjD,MAAM,QAAQ,WAAW;EACzB,MAAM,QAAQ,WAAW;EAEzB,MAAM,gBAAgB,mBACpB,UAAU;GACR;GACA;GACA,UAAU;GACV;GACA;EACF,CAAC;EAEH,aAAa,kBAAkB,OAAO;EAEtC,MAAM,gBAAgB,UACpB,aAAa,MAAM,OAAO;EAE5B,kBAAkB,iBAAiB,UAAU,YAAY;EAEzD,aAAa,kBAAkB,oBAAoB,UAAU,YAAY;CAC3E,GAAG,CAAC,UAAU,CAAC;CAEf,OAAO;AACT"}
+{"version":3,"file":"useDevice.mjs","names":[],"sources":["../../../src/hooks/useDevice.ts"],"sourcesContent":["'use client';\n\nimport { useCallback, useSyncExternalStore } from 'react';\n\nexport type SizeType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n\n/** Tailwind's breakpoints, in pixels. */\nconst BREAKPOINT_WIDTHS: Readonly<Record<SizeType, number>> = {\n  xs: 480,\n  sm: 640,\n  md: 768,\n  lg: 1024,\n  xl: 1280,\n  '2xl': 1536,\n};\n\nexport const getBreakpointFromSize = (breakpoint: SizeType | number): number =>\n  typeof breakpoint === 'number'\n    ? breakpoint\n    : (BREAKPOINT_WIDTHS[breakpoint] ?? BREAKPOINT_WIDTHS.md);\n\nexport const checkIsMobileUserAgent = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  return /android|bb\\d+|meego|avantgo|bada\\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(?:hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(?:ob|in)i|palm(?: os)?|phone|p(?:ixi|re)\\/|plucker|pocket|psp|series(?:4|6)0|symbian|treo|up\\.(?:browser|link)|vodafone|wap|windows ce|windows phone|xda|xiino|zte-/i.test(\n    userAgent\n  );\n};\n\nexport const checkIsIphoneOrSafariDevice = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  /* 1 . is it Safari?  (Chrome & co. also contain “Safari/…”, so exclude them) */\n  const isSafari =\n    /Safari\\/\\d/i.test(userAgent) && // has “Safari/xxx”\n    !/Chrome|CriOS|FxiOS|Edg|OPR/i.test(userAgent); // …but not the other browsers\n\n  /* 2. is it an Apple device? (macOS or iOS/iPadOS) */\n  const isAppleDevice = /Macintosh|iP(?:hone|ad|od)/.test(userAgent);\n\n  return isSafari && isAppleDevice; // true for mac-Safari & iOS-Safari\n};\n\nexport const checkIsIOS = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  // Check for iOS devices: iPhone, iPad, iPod\n  return /iP(?:hone|ad|od)/.test(userAgent);\n};\n\nexport const checkIsMac = (): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  const userAgent = window.navigator?.userAgent;\n\n  if (typeof userAgent === 'undefined') return;\n\n  // Check for macOS/Mac devices\n  return /Macintosh|MacIntel|Mac OS X/.test(userAgent);\n};\n\nexport const checkIsMobileScreen = (\n  breakpoint: number\n): boolean | undefined => {\n  if (typeof window === 'undefined') return;\n\n  return (window?.innerWidth ?? 0) <= breakpoint;\n};\n\nexport type DeviceState = {\n  /** Is the screen width within a mobile breakpoint. */\n  isMobileScreen: boolean | undefined;\n  /** Is the user agent indicative of a mobile device. */\n  isMobileUserAgent: boolean | undefined;\n  /** Combines both checks to determine if the device is mobile. */\n  isMobile: boolean | undefined;\n  /** Is the device running iOS (iPhone, iPad, iPod). */\n  isIOS: boolean | undefined;\n  /** Is the device a Mac computer (macOS). */\n  isMac: boolean | undefined;\n};\n\nexport const calculateIsMobile = (\n  breakpoint: SizeType | number = 'md'\n): DeviceState => {\n  const breakpointValue = getBreakpointFromSize(breakpoint);\n\n  const isMobileUserAgent = checkIsMobileUserAgent();\n  const isMobileScreen = checkIsMobileScreen(breakpointValue);\n  const isMobile = isMobileScreen ?? isMobileUserAgent;\n  const isIOS = checkIsIOS();\n  const isMac = checkIsMac();\n\n  return { isMobileScreen, isMobileUserAgent, isMobile, isIOS, isMac };\n};\n\n/**\n * Snapshot served while rendering on the server and while hydrating, where no\n * viewport exists. Frozen and shared so every consumer reads the very same\n * reference — `useSyncExternalStore` compares snapshots by identity.\n */\nconst SERVER_SNAPSHOT: DeviceState = Object.freeze({\n  isMobileScreen: undefined,\n  isMobileUserAgent: undefined,\n  isMobile: undefined,\n  isIOS: undefined,\n  isMac: undefined,\n});\n\ntype UserAgentFlags = Pick<\n  DeviceState,\n  'isMobileUserAgent' | 'isIOS' | 'isMac'\n>;\n\n/** The user agent never changes within a document, so parse it once. */\nlet userAgentFlags: UserAgentFlags | undefined;\n\nconst getUserAgentFlags = (): UserAgentFlags => {\n  userAgentFlags ??= {\n    isMobileUserAgent: checkIsMobileUserAgent(),\n    isIOS: checkIsIOS(),\n    isMac: checkIsMac(),\n  };\n\n  return userAgentFlags;\n};\n\ntype BreakpointStore = {\n  subscribe: (onStoreChange: () => void) => () => void;\n  getSnapshot: () => DeviceState;\n};\n\n/**\n * One store per breakpoint, shared by every component asking for it.\n *\n * A page mounts this hook from a dozen components; giving each its own\n * `MediaQueryList`, state and effect made the browser evaluate the same query a\n * dozen times and React commit a dozen separate post-hydration renders. Reading\n * from a single store collapses those into one subscription and one commit.\n */\nconst breakpointStores = new Map<number, BreakpointStore>();\n\nconst createBreakpointStore = (breakpointValue: number): BreakpointStore => {\n  const mediaQuery = window.matchMedia(`(max-width: ${breakpointValue}px)`);\n  const listeners = new Set<() => void>();\n\n  const buildSnapshot = (isMobileScreen: boolean): DeviceState => ({\n    ...getUserAgentFlags(),\n    isMobileScreen,\n    isMobile: isMobileScreen,\n  });\n\n  let snapshot = buildSnapshot(mediaQuery.matches);\n\n  /**\n   * Replaces the snapshot only when the viewport actually crossed the\n   * breakpoint. `useSyncExternalStore` compares snapshots by identity, so\n   * rebuilding an equal object would schedule a render for nothing.\n   *\n   * @returns Whether the snapshot changed.\n   */\n  const refreshSnapshot = (isMobileScreen: boolean): boolean => {\n    if (snapshot.isMobileScreen === isMobileScreen) return false;\n\n    snapshot = buildSnapshot(isMobileScreen);\n\n    return true;\n  };\n\n  const handleChange = (event: MediaQueryListEvent) => {\n    if (!refreshSnapshot(event.matches)) return;\n\n    for (const listener of listeners) listener();\n  };\n\n  return {\n    subscribe: (onStoreChange) => {\n      if (listeners.size === 0) {\n        // The viewport may have moved while nothing was listening; React reads\n        // the snapshot again right after subscribing, so refreshing it here is\n        // what keeps a remounted consumer from rendering a stale width.\n        refreshSnapshot(mediaQuery.matches);\n        mediaQuery.addEventListener('change', handleChange);\n      }\n\n      listeners.add(onStoreChange);\n\n      return () => {\n        listeners.delete(onStoreChange);\n\n        if (listeners.size === 0) {\n          mediaQuery.removeEventListener('change', handleChange);\n        }\n      };\n    },\n    getSnapshot: () => snapshot,\n  };\n};\n\nconst getBreakpointStore = (breakpointValue: number): BreakpointStore => {\n  const existingStore = breakpointStores.get(breakpointValue);\n\n  if (existingStore) return existingStore;\n\n  const store = createBreakpointStore(breakpointValue);\n\n  breakpointStores.set(breakpointValue, store);\n\n  return store;\n};\n\nconst getServerSnapshot = (): DeviceState => SERVER_SNAPSHOT;\n\n/**\n * Reports whether the current device is mobile, and which platform it runs.\n *\n * Server renders — including the prerendered HTML both apps ship — resolve to\n * `undefined`, then settle to the real values in a single commit once the\n * browser takes over.\n *\n * @example\n * ```tsx\n * const { isMobile } = useDevice('lg');\n * ```\n */\nexport const useDevice = (\n  breakpoint: SizeType | number = 'md'\n): DeviceState => {\n  const breakpointValue = getBreakpointFromSize(breakpoint);\n\n  const subscribe = useCallback(\n    (onStoreChange: () => void) =>\n      getBreakpointStore(breakpointValue).subscribe(onStoreChange),\n    [breakpointValue]\n  );\n\n  const getSnapshot = useCallback(\n    () => getBreakpointStore(breakpointValue).getSnapshot(),\n    [breakpointValue]\n  );\n\n  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);\n};\n"],"mappings":"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"}

package/dist/esm/hooks/useListKeyboardNavigation.mjs

@@ -0,0 +1,73 @@
+'use client';
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+//#region src/hooks/useListKeyboardNavigation.ts
+/** No row is highlighted until the user presses an arrow key. */
+const NO_HIGHLIGHTED_INDEX = -1;
+/**
+* Clicks the row itself when it is actionable, otherwise the first link or
+* button inside it.
+*/
+const clickRowAction = (element) => {
+	(element.matches("a, button") ? element : element.querySelector("a, button"))?.click();
+};
+/**
+* Arrow-key navigation over a list whose focus stays elsewhere — typically a
+* search input filtering the list below it, where moving the DOM focus onto
+* each row would stop the user from typing.
+*
+* The caller renders the highlight itself from `highlightedIndex`, registers
+* each row through `setItemElement`, and forwards key events of the focused
+* element to `handleKeyDown`.
+*/
+const useListKeyboardNavigation = ({ itemCount, onActivate }) => {
+	const [highlightedIndex, setHighlightedIndex] = useState(-1);
+	/** Row elements, indexed as the rendered list is. */
+	const itemElementsRef = useRef([]);
+	const resetHighlight = useCallback(() => setHighlightedIndex(-1), []);
+	/** Stores a row element so the key handler can reach it later. */
+	const setItemElement = useCallback((index, element) => {
+		itemElementsRef.current[index] = element;
+	}, []);
+	const handleKeyDown = useCallback((event) => {
+		if (itemCount === 0) return;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			const step = event.key === "ArrowDown" ? 1 : -1;
+			setHighlightedIndex((currentIndex) => {
+				if (currentIndex === -1) return step === 1 ? 0 : itemCount - 1;
+				return (currentIndex + step + itemCount) % itemCount;
+			});
+			return;
+		}
+		if (event.key === "Enter") {
+			const highlightedElement = itemElementsRef.current[highlightedIndex];
+			if (!highlightedElement) return;
+			event.preventDefault();
+			if (onActivate) {
+				onActivate(highlightedIndex, highlightedElement);
+				return;
+			}
+			clickRowAction(highlightedElement);
+		}
+	}, [
+		itemCount,
+		highlightedIndex,
+		onActivate
+	]);
+	useEffect(() => {
+		if (highlightedIndex === -1) return;
+		itemElementsRef.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
+	}, [highlightedIndex]);
+	return {
+		highlightedIndex,
+		resetHighlight,
+		setItemElement,
+		handleKeyDown
+	};
+};
+
+//#endregion
+export { NO_HIGHLIGHTED_INDEX, useListKeyboardNavigation };
+//# sourceMappingURL=useListKeyboardNavigation.mjs.map

package/dist/esm/hooks/useListKeyboardNavigation.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useListKeyboardNavigation.mjs","names":[],"sources":["../../../src/hooks/useListKeyboardNavigation.ts"],"sourcesContent":["'use client';\n\nimport {\n  type KeyboardEvent,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react';\n\n/** No row is highlighted until the user presses an arrow key. */\nexport const NO_HIGHLIGHTED_INDEX = -1;\n\nexport type UseListKeyboardNavigationProps<TElement extends HTMLElement> = {\n  /** Number of navigable rows. The highlight wraps around it. */\n  itemCount: number;\n  /**\n   * Activation of the highlighted row on `Enter`. Defaults to clicking the\n   * first link or button the row contains, which reuses whatever navigation\n   * that element already implements.\n   */\n  onActivate?: (index: number, element: TElement) => void;\n};\n\n/**\n * Clicks the row itself when it is actionable, otherwise the first link or\n * button inside it.\n */\nconst clickRowAction = (element: HTMLElement) => {\n  const actionElement = element.matches('a, button')\n    ? element\n    : element.querySelector<HTMLElement>('a, button');\n\n  actionElement?.click();\n};\n\n/**\n * Arrow-key navigation over a list whose focus stays elsewhere — typically a\n * search input filtering the list below it, where moving the DOM focus onto\n * each row would stop the user from typing.\n *\n * The caller renders the highlight itself from `highlightedIndex`, registers\n * each row through `setItemElement`, and forwards key events of the focused\n * element to `handleKeyDown`.\n */\nexport const useListKeyboardNavigation = <TElement extends HTMLElement>({\n  itemCount,\n  onActivate,\n}: UseListKeyboardNavigationProps<TElement>) => {\n  const [highlightedIndex, setHighlightedIndex] =\n    useState<number>(NO_HIGHLIGHTED_INDEX);\n\n  /** Row elements, indexed as the rendered list is. */\n  const itemElementsRef = useRef<(TElement | null)[]>([]);\n\n  const resetHighlight = useCallback(\n    () => setHighlightedIndex(NO_HIGHLIGHTED_INDEX),\n    []\n  );\n\n  /** Stores a row element so the key handler can reach it later. */\n  const setItemElement = useCallback(\n    (index: number, element: TElement | null) => {\n      itemElementsRef.current[index] = element;\n    },\n    []\n  );\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (itemCount === 0) return;\n\n      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n        event.preventDefault();\n\n        const step = event.key === 'ArrowDown' ? 1 : -1;\n\n        setHighlightedIndex((currentIndex) => {\n          if (currentIndex === NO_HIGHLIGHTED_INDEX) {\n            return step === 1 ? 0 : itemCount - 1;\n          }\n\n          return (currentIndex + step + itemCount) % itemCount;\n        });\n\n        return;\n      }\n\n      if (event.key === 'Enter') {\n        const highlightedElement = itemElementsRef.current[highlightedIndex];\n\n        if (!highlightedElement) return;\n\n        event.preventDefault();\n\n        if (onActivate) {\n          onActivate(highlightedIndex, highlightedElement);\n          return;\n        }\n\n        clickRowAction(highlightedElement);\n      }\n    },\n    [itemCount, highlightedIndex, onActivate]\n  );\n\n  // Keeps the highlighted row inside the scrollable list.\n  useEffect(() => {\n    if (highlightedIndex === NO_HIGHLIGHTED_INDEX) return;\n\n    itemElementsRef.current[highlightedIndex]?.scrollIntoView({\n      block: 'nearest',\n    });\n  }, [highlightedIndex]);\n\n  return {\n    highlightedIndex,\n    resetHighlight,\n    setItemElement,\n    handleKeyDown,\n  };\n};\n"],"mappings":";;;;;;AAWA,MAAa,uBAAuB;;;;;AAiBpC,MAAM,kBAAkB,YAAyB;CAK/C,CAJsB,QAAQ,QAAQ,WAAW,IAC7C,UACA,QAAQ,cAA2B,WAAW,EAErC,EAAE,MAAM;AACvB;;;;;;;;;;AAWA,MAAa,6BAA2D,EACtE,WACA,iBAC8C;CAC9C,MAAM,CAAC,kBAAkB,uBACvB,WAAqC;;CAGvC,MAAM,kBAAkB,OAA4B,CAAC,CAAC;CAEtD,MAAM,iBAAiB,kBACf,sBAAwC,GAC9C,CAAC,CACH;;CAGA,MAAM,iBAAiB,aACpB,OAAe,YAA6B;EAC3C,gBAAgB,QAAQ,SAAS;CACnC,GACA,CAAC,CACH;CAEA,MAAM,gBAAgB,aACnB,UAAsC;EACrC,IAAI,cAAc,GAAG;EAErB,IAAI,MAAM,QAAQ,eAAe,MAAM,QAAQ,WAAW;GACxD,MAAM,eAAe;GAErB,MAAM,OAAO,MAAM,QAAQ,cAAc,IAAI;GAE7C,qBAAqB,iBAAiB;IACpC,IAAI,qBACF,OAAO,SAAS,IAAI,IAAI,YAAY;IAGtC,QAAQ,eAAe,OAAO,aAAa;GAC7C,CAAC;GAED;EACF;EAEA,IAAI,MAAM,QAAQ,SAAS;GACzB,MAAM,qBAAqB,gBAAgB,QAAQ;GAEnD,IAAI,CAAC,oBAAoB;GAEzB,MAAM,eAAe;GAErB,IAAI,YAAY;IACd,WAAW,kBAAkB,kBAAkB;IAC/C;GACF;GAEA,eAAe,kBAAkB;EACnC;CACF,GACA;EAAC;EAAW;EAAkB;CAAU,CAC1C;CAGA,gBAAgB;EACd,IAAI,yBAA2C;EAE/C,gBAAgB,QAAQ,iBAAiB,EAAE,eAAe,EACxD,OAAO,UACT,CAAC;CACH,GAAG,CAAC,gBAAgB,CAAC;CAErB,OAAO;EACL;EACA;EACA;EACA;CACF;AACF"}