@accelint/design-toolkit 7.0.1 → 8.1.0

package/dist/components/options/styles.module.css

@@ -0,0 +1,397 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .list {
+    @apply rounded-medium bg-surface-overlay shadow-elevation-overlay outline-static overflow-x-clip overflow-y-auto outline;
+    max-height: 200px;
+  }
+
+  .section {
+    @apply mt-s;
+  }
+
+  .header {
+    @apply fg-primary-muted m-xs my-s text-header-xs;
+  }
+
+  .item {
+    @apply fg-primary-bold gap-s p-s text-body-s relative flex cursor-pointer items-center outline outline-transparent;
+
+    &:before {
+      @apply pointer-events-none absolute top-0 left-0 h-full;
+      width: 4px;
+      content: '';
+    }
+
+    @variant hover {
+      @apply fg-a11y-on-accent;
+    }
+
+    @variant focus-visible {
+      @apply fg-a11y-on-accent;
+    }
+
+    @variant color-info {
+      @variant hover {
+        @apply bg-accent-primary-muted;
+      }
+
+      @variant focus-visible {
+        @apply bg-accent-primary-muted;
+      }
+
+      @variant pressed {
+        @apply bg-accent-primary-pressed;
+      }
+
+      @variant selected {
+        @apply bg-accent-primary-muted;
+
+        &:before {
+          @apply bg-(--outline-accent-primary-bold);
+        }
+
+        @variant hover {
+          @apply fg-a11y-on-accent bg-accent-primary-bold;
+        }
+
+        @variant focus-visible {
+          @apply bg-accent-primary-bold;
+        }
+
+        @variant pressed {
+          @apply fg-accent-primary-bold bg-accent-primary-pressed;
+
+          &:before {
+            @apply bg-(--outline-accent-primary-pressed);
+          }
+        }
+      }
+    }
+
+    @variant color-serious {
+      @variant hover {
+        @apply bg-serious-muted;
+      }
+
+      @variant focus-visible {
+        @apply bg-serious-muted;
+      }
+
+      @variant pressed {
+        @apply bg-serious-pressed;
+      }
+
+      @variant selected {
+        @apply bg-serious-muted;
+
+        &:before {
+          @apply bg-(--outline-serious-bold);
+        }
+
+        @variant hover {
+          @apply bg-serious-bold;
+
+          &:before {
+            @apply bg-(--outline-serious-hover);
+          }
+        }
+
+        @variant focus-visible {
+          @apply bg-serious-bold;
+        }
+
+        @variant pressed {
+          @apply fg-serious-bold bg-serious-pressed;
+
+          &:before {
+            @apply bg-(--outline-serious-pressed);
+          }
+        }
+      }
+    }
+
+    @variant color-critical {
+      @variant hover {
+        @apply bg-critical-muted;
+      }
+
+      @variant focus-visible {
+        @apply bg-critical-muted;
+      }
+
+      @variant pressed {
+        @apply bg-critical-pressed;
+      }
+
+      @variant selected {
+        @apply bg-critical-muted;
+
+        &:before {
+          @apply bg-(--outline-critical-bold);
+        }
+
+        @variant hover {
+          @apply bg-critical-bold;
+
+          &:before {
+            @apply bg-(--outline-critical-hover);
+          }
+        }
+
+        @variant focus-visible {
+          @apply bg-critical-bold;
+        }
+
+        @variant pressed {
+          @apply fg-critical-bold bg-critical-pressed;
+
+          &:before {
+            @apply bg-(--outline-critical-pressed);
+          }
+        }
+      }
+    }
+
+    @variant disabled {
+      @apply cursor-not-allowed bg-transparent;
+
+      @variant selected {
+        @apply bg-interactive-disabled;
+
+        &:before {
+          @apply bg-(--outline-interactive);
+        }
+      }
+    }
+
+    @variant group-size-small/options {
+      @apply pt-xs pb-xs;
+    }
+
+    @variant group-size-large/options {
+      @apply pt-s pb-s;
+    }
+  }
+
+  .content {
+    @apply gap-xxs flex min-w-0 flex-auto flex-col;
+  }
+
+  /* TODO: simplify, icon & label have the same colors, move up to item, and there is some overlap with description (only apply overrides for description) */
+  .icon {
+    @variant group-hover/options-item {
+      @apply fg-primary-bold;
+    }
+
+    @variant group-focus-visible/options-item {
+      @apply fg-primary-bold;
+    }
+
+    @variant group-selected/options-item {
+      @apply fg-primary-bold;
+
+      @variant group-hover/options-item {
+        @apply fg-a11y-on-accent;
+      }
+
+      @variant group-focus-visible/options-item {
+        @apply fg-a11y-on-accent;
+      }
+    }
+
+    @variant group-color-info/options-item {
+      @apply fg-primary-bold;
+
+      @variant group-pressed/options-item {
+        @apply fg-accent-primary-bold;
+      }
+
+      @variant group-selected/options-item {
+        @variant group-pressed/options-item {
+          @apply fg-accent-primary-bold;
+        }
+      }
+    }
+
+    @variant group-color-serious/options-item {
+      @apply fg-serious-bold;
+
+      @variant group-pressed/options-item {
+        @apply fg-serious-bold;
+      }
+
+      @variant group-selected/options-item {
+        @variant group-pressed/options-item {
+          @apply fg-serious-bold;
+        }
+      }
+    }
+
+    @variant group-color-critical/options-item {
+      @apply fg-critical-bold;
+
+      @variant group-pressed/options-item {
+        @apply fg-critical-bold;
+      }
+
+      @variant group-selected/options-item {
+        @variant group-pressed/options-item {
+          @apply fg-critical-bold;
+        }
+      }
+    }
+
+    @variant group-disabled/options-item {
+      @apply fg-disabled;
+    }
+  }
+
+  .label {
+    @apply truncate;
+
+    @variant group-hover/options-item {
+      @apply fg-primary-bold;
+    }
+
+    @variant group-focus-visible/options-item {
+      @apply fg-primary-bold;
+    }
+
+    @variant group-selected/options-item {
+      @apply fg-primary-bold;
+
+      @variant group-hover/options-item {
+        @apply fg-a11y-on-accent;
+      }
+
+      @variant group-focus-visible/options-item {
+        @apply fg-a11y-on-accent;
+      }
+    }
+
+    @variant group-color-info/options-item {
+      @apply fg-primary-bold;
+
+      @variant group-pressed/options-item {
+        @apply fg-accent-primary-bold;
+      }
+
+      @variant group-selected/options-item {
+        @variant group-pressed/options-item {
+          @apply fg-accent-primary-bold;
+        }
+      }
+    }
+
+    @variant group-color-serious/options-item {
+      @apply fg-serious-bold;
+
+      @variant group-pressed/options-item {
+        @apply fg-serious-bold;
+      }
+
+      @variant group-selected/options-item {
+        @variant group-pressed/options-item {
+          @apply fg-serious-bold;
+        }
+      }
+    }
+
+    @variant group-color-critical/options-item {
+      @apply fg-critical-bold;
+
+      @variant group-pressed/options-item {
+        @apply fg-critical-bold;
+      }
+
+      @variant group-selected/options-item {
+        @variant group-pressed/options-item {
+          @apply fg-critical-bold;
+        }
+      }
+    }
+
+    @variant group-disabled/options-item {
+      @apply fg-disabled;
+    }
+  }
+
+  .description {
+    @apply fg-primary-muted text-body-xs truncate;
+
+    @variant group-hover/options-item {
+      @apply fg-primary-bold;
+    }
+
+    @variant group-focus-visible/options-item {
+      @apply fg-primary-bold;
+    }
+
+    @variant group-selected/options-item {
+      @variant group-hover/options-item {
+        @apply fg-a11y-on-accent;
+      }
+
+      @variant group-focus-visible/options-item {
+        @apply fg-a11y-on-accent;
+      }
+    }
+
+    @variant group-color-info/options-item {
+      @variant group-pressed/options-item {
+        @apply fg-accent-primary-bold;
+      }
+
+      @variant group-selected/options-item {
+        @variant group-pressed/options-item {
+          @apply fg-accent-primary-bold;
+        }
+      }
+    }
+
+    @variant group-color-serious/options-item {
+      @variant group-pressed/options-item {
+        @apply fg-serious-bold;
+      }
+
+      @variant group-selected/options-item {
+        @apply fg-primary-bold;
+
+        @variant group-pressed/options-item {
+          @apply fg-serious-bold;
+        }
+      }
+    }
+
+    @variant group-color-critical/options-item {
+      @variant group-pressed/options-item {
+        @apply fg-critical-bold;
+      }
+
+      @variant group-selected/options-item {
+        @apply fg-primary-bold;
+
+        @variant group-pressed/options-item {
+          @apply fg-critical-bold;
+        }
+      }
+    }
+
+    @variant group-disabled/options-item {
+      @apply fg-disabled;
+    }
+  }
+}

package/dist/components/options/types.d.ts

@@ -1,5 +1,5 @@
 import { RefAttributes } from 'react';
-import { Key, ListBoxProps, TextProps, ListBoxItemProps, ListBoxSectionProps } from 'react-aria-components';
+import { Key, ListBoxProps, ListBoxItemProps, ListBoxSectionProps } from 'react-aria-components';
 import { IconProps } from '../icon/types.js';
 
 type OptionsDataItem = {
@@ -24,6 +24,5 @@ type OptionsSectionProps<T extends OptionsDataItem> = Omit<ListBoxSectionProps<T
     };
     header?: string;
 };
-type OptionsItemTextProps = TextProps;
 
-export type { OptionsDataItem, OptionsItemProps, OptionsItemTextProps, OptionsProps, OptionsSectionProps };
+export type { OptionsDataItem, OptionsItemProps, OptionsProps, OptionsSectionProps };

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

@@ -0,0 +1,9 @@
+import * as react from 'react';
+import { PaginationContextValue } from './types.js';
+import '../button/types.js';
+import 'react-aria-components';
+import '../../lib/types.js';
+
+declare const PaginationContext: react.Context<PaginationContextValue>;
+
+export { PaginationContext };

package/dist/components/pagination/context.js

@@ -0,0 +1,4 @@
+'use client';
+
+import'client-only';import {noop}from'radashi';import {createContext}from'react';const i=createContext({page:0,total:0,setPage:noop});export{i as PaginationContext};//# sourceMappingURL=context.js.map
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/context.ts"],"names":["PaginationContext","createContext","noop"],"mappings":"uFAmBaA,CAAAA,CAAoBC,aAAAA,CAAsC,CACrE,IAAA,CAAM,CAAA,CACN,MAAO,CAAA,CACP,OAAA,CAASC,IACX,CAAC","file":"context.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { noop } from 'radashi';\nimport { createContext } from 'react';\nimport type { PaginationContextValue } from './types';\n\nexport const PaginationContext = createContext<PaginationContextValue>({\n  page: 0,\n  total: 0,\n  setPage: noop,\n});\n"]}

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

@@ -0,0 +1,25 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PaginationProps } from './types.js';
+import 'react';
+import '../button/types.js';
+import 'react-aria-components';
+import '../../lib/types.js';
+
+/**
+ *
+ * Pagination - A lightweight implementation for page navigation.
+ *
+ * @example
+ * <Pagination currentPage={1} pageCount={5} onChange={handleOnChange} />
+ *
+ * @param currentPage - represents currently selected page number
+ * @param pageCount - total number of pages
+ * @param onChange - (page: number) => void, handler for button press events
+ * @param classNames - group of styling applied to components
+ *    * container - <nav> container for component
+ *    * controls - navigation controls, previous/next
+ *    * pages - buttons for page numbers
+ */
+declare function Pagination({ children, classNames, defaultValue, total, value, isLoading, onChange, ...rest }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+export { Pagination };

package/dist/components/pagination/index.js

@@ -0,0 +1,4 @@
+'use client';
+
+import {jsx,jsxs,Fragment}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useControlledState}from'@react-stately/utils';import {PaginationContext}from'./context.js';import {PaginationNext}from'./next.js';import {PaginationPages}from'./pages.js';import {PaginationPrev}from'./prev.js';import u from'./styles.module.css';function w({children:n,classNames:t,defaultValue:r=1,total:i=0,value:e,isLoading:m,onChange:p,...P}){const[a,g]=useControlledState(e,r,p);return jsx(PaginationContext.Provider,{value:{page:a,total:i,isLoading:m,setPage:g},children:jsx("nav",{...P,className:clsx(u.container,t?.container),"aria-label":`Page ${a} of ${i}`,children:n||jsxs(Fragment,{children:[jsx(PaginationPrev,{className:t?.prev}),jsx(PaginationPages,{className:t?.pages}),jsx(PaginationNext,{className:t?.next})]})})})}export{w as Pagination};//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/index.tsx"],"names":["defaultValue","value","rest","page","setPage","onChange","jsx","PaginationContext","o","l","clsx","styles","classNames","f","total","children","jsxs","Fragment","PaginationPrev","d","c","v"],"mappings":"4XAwCE,SACA,CAAA,CAAA,CAAA,QACA,CAAA,CAAA,CAAA,UAAAA,CAAe,CAAA,CACf,YACA,CAAA,CAAA,CAAA,CAAAC,CAAAA,KACA,CAAA,CAAA,CAAA,CAAA,CAAA,KACA,CAAA,CAAA,CAAA,SACGC,CACL,CAAA,CAAoB,QACXC,CAAMC,CAAO,IAAuBH,CAAAA,CAAOD,CAAAA,CAAcK,KAEhE,CAAA,CAAA,CAAA,CAAA,CACEC,CAAAA,kBAACC,CAAAA,CAAkB,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAASC,GAAA,CAAAC,iBAAO,CAAE,QAAM,CAAA,CAAA,KAAO,cAAW,CAAA,CAAA,CAAA,SAC3D,CAAA,CAAA,CAAA,OAAC,CAAA,CAAA,CAAA,CAAA,QAEC,CAAAD,GAAA,CAAA,KAAWE,CAAAA,CAAKC,GAAO,CAAA,CAAA,SAAWC,CAAYC,IAAA,CAAA,CAAA,CAAA,sBAClC,CAAA,CAAA,YAAmBC,CAAK,CAAA,KAEnC,EAAA,CAAA,CAAA,IAAAC,EACCC,CAAAC,CAAAA,CAAA,CACE,QAAA,CAAA,CAAAX,EAACY,IAAAA,CAAAC,QAAe,CAAA,CAAA,QAAWP,CAAAA,CAAAA,GAAY,0BACtB,CAAA,CAAA,EAAA,IAAA,CAAWA,CAAAA,CAAAA,GAAY,CAAAQ,eAAA,CAAA,CAAA,SACxB,CAAA,CAAA,EAAA,KAAA,CAAWR,CAAAA,CAAAA,GAAY,CAAAS,cAAA,CAAA,CAAA,SAMnD,CAAA,CAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA","file":"index.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useControlledState } from '@react-stately/utils';\nimport { PaginationContext } from './context';\nimport { PaginationNext } from './next';\nimport { PaginationPages } from './pages';\nimport { PaginationPrev } from './prev';\nimport styles from './styles.module.css';\nimport type { PaginationProps } from './types';\n\n/**\n *\n * Pagination - A lightweight implementation for page navigation.\n *\n * @example\n * <Pagination currentPage={1} pageCount={5} onChange={handleOnChange} />\n *\n * @param currentPage - represents currently selected page number\n * @param pageCount - total number of pages\n * @param onChange - (page: number) => void, handler for button press events\n * @param classNames - group of styling applied to components\n *    * container - <nav> container for component\n *    * controls - navigation controls, previous/next\n *    * pages - buttons for page numbers\n */\nexport function Pagination({\n  children,\n  classNames,\n  defaultValue = 1,\n  total = 0,\n  value,\n  isLoading,\n  onChange,\n  ...rest\n}: PaginationProps) {\n  const [page, setPage] = useControlledState(value, defaultValue, onChange);\n\n  return (\n    <PaginationContext.Provider value={{ page, total, isLoading, setPage }}>\n      <nav\n        {...rest}\n        className={clsx(styles.container, classNames?.container)}\n        aria-label={`Page ${page} of ${total}`}\n      >\n        {children || (\n          <>\n            <PaginationPrev className={classNames?.prev} />\n            <PaginationPages className={classNames?.pages} />\n            <PaginationNext className={classNames?.next} />\n          </>\n        )}\n      </nav>\n    </PaginationContext.Provider>\n  );\n}\n"]}

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PaginationNextProps } from './types.js';
+import 'react';
+import '../button/types.js';
+import 'react-aria-components';
+import '../../lib/types.js';
+
+declare function PaginationNext({ className, onPress }: PaginationNextProps): react_jsx_runtime.JSX.Element;
+
+export { PaginationNext };

package/dist/components/pagination/next.js

@@ -0,0 +1,4 @@
+'use client';
+
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import p from'@accelint/icons/chevron-right';import {useContext}from'react';import {composeRenderProps}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {PaginationContext}from'./context.js';import P from'./styles.module.css';import {isNavigationDisabled}from'./utils.js';function I({className:i,onPress:n}){const{page:o,total:r,setPage:e}=useContext(PaginationContext);return jsx(Button,{className:composeRenderProps(i,m=>clsx(P.button,m)),color:"mono-bold",variant:"icon",isDisabled:o>=r||isNavigationDisabled(r,o),onPress:()=>{e(o+1),n?.(o+1);},"aria-label":"Next page",children:jsx(Icon,{children:jsx(p,{})})})}export{I as PaginationNext};//# sourceMappingURL=next.js.map
+//# sourceMappingURL=next.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/next.tsx"],"names":["setPage","PaginationContext","composeRenderProps","className","clsx","t","l","f","a","page","total","onPress","c"],"mappings":"8bA0B4C,YACpC,SAAQ,CAAA,CAAA,CAAA,OAAO,CAAA,CAAA,CAAA,CAAA,CAAAA,KAAuBC,CAAiB,IAE7D,CAAA,CAAA,CAAA,MACG,CACC,CAAA,OAAA,CAAA,CAAWC,CAAAA,CAAmBC,UAAAA,CAAYA,iBAAAA,CAAAA,CACxCC,OAAYC,GAAA,CAAAC,MAAA,CAAQH,CAAS,SAEzB,CAAAI,kBAAA,CAAA,CAAA,CAAA,CAAA,EAAAC,IAAA,CAAA,CAAA,CACN,QAAQ,CAAA,CAAA,CAAA,KACR,CAAA,WAAYC,CAAQC,OAAqCD,CAAI,MAC7D,CAAA,UACUA,CAAAA,CAAO,EAAC,CAChBE,EAAAA,oBAAAA,CAAUF,CAAAA,CAAO,CAAC,CACpB,CAAA,cACW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAEX,CAAA,EAAA,CAAA,CAAA,YACE,CAAA,WAAC,CAAa,QAItB,CAAAJ,GAAA,CAAAO,IAAA,CAAA,CAAA,QAAA,CAAAP,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA","file":"next.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronRight from '@accelint/icons/chevron-right';\nimport { useContext } from 'react';\nimport { composeRenderProps } from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { PaginationContext } from './context';\nimport styles from './styles.module.css';\nimport { isNavigationDisabled } from './utils';\nimport type { PaginationNextProps } from './types';\n\nexport function PaginationNext({ className, onPress }: PaginationNextProps) {\n  const { page, total, setPage } = useContext(PaginationContext);\n\n  return (\n    <Button\n      className={composeRenderProps(className, (className) =>\n        clsx(styles.button, className),\n      )}\n      color='mono-bold'\n      variant='icon'\n      isDisabled={page >= total || isNavigationDisabled(total, page)}\n      onPress={() => {\n        setPage(page + 1);\n        onPress?.(page + 1);\n      }}\n      aria-label='Next page'\n    >\n      <Icon>\n        <ChevronRight />\n      </Icon>\n    </Button>\n  );\n}\n"]}

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PaginationPagesProps } from './types.js';
+import 'react';
+import '../button/types.js';
+import 'react-aria-components';
+import '../../lib/types.js';
+
+declare function PaginationPages({ className, onPress }: PaginationPagesProps): react_jsx_runtime.JSX.Element[] | null;
+
+export { PaginationPages };

package/dist/components/pagination/pages.js

@@ -0,0 +1,4 @@
+'use client';
+
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import {useContext,useMemo}from'react';import {composeRenderProps}from'react-aria-components';import {ToggleButton}from'../button/toggle.js';import {PaginationContext}from'./context.js';import x from'./styles.module.css';import {getPaginationRange,range}from'./utils.js';function $({className:r,onPress:s}){const{page:t,total:n,isLoading:g,setPage:p}=useContext(PaginationContext),{minRange:e,maxRange:a}=useMemo(()=>getPaginationRange(n,t),[n,t]),m=useMemo(()=>range(e,a),[e,a]);return e===0||a===0||g?null:m.map(o=>jsx(ToggleButton,{className:composeRenderProps(r,P=>clsx(x.button,P)),color:"accent",variant:"flat",isSelected:o===t,onPress:()=>{p(o),s?.(o);},"aria-current":o===t?"page":void 0,children:o},`page-${o}`))}export{$ as PaginationPages};//# sourceMappingURL=pages.js.map
+//# sourceMappingURL=pages.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/pages.tsx"],"names":["className","page","total","isLoading","useContext","PaginationContext","f","minRange","useMemo","i","y","pages","range","maxRange","R","number","ToggleButton","B","composeRenderProps","l","c","setPage","onPress"],"mappings":"gYAwBkC,SAAAA,EAAW,CAAA,SAAQ,CAAyB,CAC5E,CAAA,OAAQ,CAAA,CAAA,CAAAC,CAAAA,CAAM,MAAAC,IAAO,CAAA,CAAA,CAAA,KAAAC,CAAAA,CAAW,CAAA,SAAQ,CAAIC,CAAAA,CAAWC,OAC/C,CAAA,CAAA,CAAA,CAAAC,UAAA,CAAAC,iBAAAA,CAAU,CAAA,CAAA,QAAS,CAAA,CAAIC,CAAAA,QACJN,CAAOD,CAAI,CAAA,CACpCQ,OAACP,CAAAA,IACHQ,kBACMC,CAAAA,CAAQH,CAAAA,CAAQ,CAAA,CAAA,CAAA,CAAMI,CAAAA,CAAML,CAAAA,CAAUM,CAAQ,CAAA,CAAGJ,OAACF,KAAmBO,KAG3E,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAIP,CAAAA,CAAAA,CAAAA,CAAa,CAAA,CAAA,OAAkB,CAAKJ,GAC/B,CAAA,EAAA,CAGFQ,GAAM,CAAA,EAAKI,CAAAA,CAAAA,IACfC,CAAA,CAEC,CAAA,GAAA,CAAA,CAAA,EAAAC,GAAA,CAAWC,aAAmBlB,CAAAA,SAChB,CAAAmB,kBAAA,CAAA,CAAA,CAAA,CAAQnB,EACtBoB,IAAA,CACA,QAAM,CAAA,CAAA,CAAA,CAAA,CAAA,KACN,CAAA,QAAQ,CAAA,OACR,CAAA,MAAYL,CAAAA,UACZ,CAAA,CAAS,GAAA,CAAM,CACbM,OACAC,CAAAA,IACF,CACA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EAAA,CAAA,CAAA,cAAgC,CAAS,CAAA,GAAA,CAAA,CAAA,MAExC,CAAA,MAbI,CAAA,QAAc,CAAA,CAcrB,CACD,CACH,CAAA,KAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA","file":"pages.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport { useContext, useMemo } from 'react';\nimport { composeRenderProps } from 'react-aria-components';\nimport { ToggleButton } from '../button/toggle';\nimport { PaginationContext } from './context';\nimport styles from './styles.module.css';\nimport { getPaginationRange, range } from './utils';\nimport type { PaginationPagesProps } from './types';\n\nexport function PaginationPages({ className, onPress }: PaginationPagesProps) {\n  const { page, total, isLoading, setPage } = useContext(PaginationContext);\n  const { minRange, maxRange } = useMemo(\n    () => getPaginationRange(total, page),\n    [total, page],\n  );\n  const pages = useMemo(() => range(minRange, maxRange), [minRange, maxRange]);\n\n  // No display for invalid props.\n  if (minRange === 0 || maxRange === 0 || isLoading) {\n    return null;\n  }\n\n  return pages.map((number) => (\n    <ToggleButton\n      key={`page-${number}`}\n      className={composeRenderProps(className, (className) =>\n        clsx(styles.button, className),\n      )}\n      color='accent'\n      variant='flat'\n      isSelected={number === page}\n      onPress={() => {\n        setPage(number);\n        onPress?.(number);\n      }}\n      aria-current={number === page ? 'page' : undefined}\n    >\n      {number}\n    </ToggleButton>\n  ));\n}\n"]}

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

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PaginationPrevProps } from './types.js';
+import 'react';
+import '../button/types.js';
+import 'react-aria-components';
+import '../../lib/types.js';
+
+declare function PaginationPrev({ className, onPress }: PaginationPrevProps): react_jsx_runtime.JSX.Element;
+
+export { PaginationPrev };

package/dist/components/pagination/prev.js

@@ -0,0 +1,4 @@
+'use client';
+
+import {jsx}from'react/jsx-runtime';import'client-only';import {clsx}from'@accelint/design-foundation/lib/utils';import p from'@accelint/icons/chevron-left';import {useContext}from'react';import {composeRenderProps}from'react-aria-components';import {Button}from'../button/index.js';import {Icon}from'../icon/index.js';import {PaginationContext}from'./context.js';import g from'./styles.module.css';import {isNavigationDisabled}from'./utils.js';function h({className:r,onPress:i}){const{page:o,total:e,setPage:n}=useContext(PaginationContext);return jsx(Button,{className:composeRenderProps(r,m=>clsx(g.button,m)),color:"mono-bold",variant:"icon",isDisabled:o===1||isNavigationDisabled(e,o),onPress:()=>{n(o-1),i?.(o-1);},"aria-label":"Previous page",children:jsx(Icon,{children:jsx(p,{})})})}export{h as PaginationPrev};//# sourceMappingURL=prev.js.map
+//# sourceMappingURL=prev.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/prev.tsx"],"names":["setPage","PaginationContext","composeRenderProps","className","clsx","t","f","P","a","page","total","onPress","Icon","l"],"mappings":"6bA0B4C,YACpC,SAAQ,CAAA,CAAA,CAAA,OAAO,CAAA,CAAA,CAAA,CAAA,CAAAA,KAAuBC,CAAiB,IAE7D,CAAA,CAAA,CAAA,MACG,CACC,CAAA,OAAA,CAAA,CAAWC,CAAAA,CAAmBC,UAAAA,CAAYA,iBAAAA,CAAAA,CACxCC,OAAYC,GAAA,CAAAC,MAAA,CAAQH,CAAS,SAEzB,CAAAI,kBAAA,CAAA,CAAA,CAAA,CAAA,EAAAC,IAAA,CAAA,CAAA,CACN,QAAQ,CAAA,CAAA,CAAA,KACR,CAAA,WAAYC,CAAAA,OAAmCC,CAAOD,MACtD,CAAA,UACET,CAAQS,CAAAA,GAAQ,CAChBE,EAAAA,oBAAAA,CAAUF,CAAAA,CAAO,CAAC,CACpB,CAAA,cACW,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAEX,YAACG,CAAA,eACE,CAAY,QAIrB,CAAAP,GAAA,CAAAQ,IAAA,CAAA,CAAA,QAAA,CAAAR,GAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA","file":"prev.js","sourcesContent":["/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\n'use client';\n\nimport 'client-only';\nimport { clsx } from '@accelint/design-foundation/lib/utils';\nimport ChevronLeft from '@accelint/icons/chevron-left';\nimport { useContext } from 'react';\nimport { composeRenderProps } from 'react-aria-components';\nimport { Button } from '../button';\nimport { Icon } from '../icon';\nimport { PaginationContext } from './context';\nimport styles from './styles.module.css';\nimport { isNavigationDisabled } from './utils';\nimport type { PaginationPrevProps } from './types';\n\nexport function PaginationPrev({ className, onPress }: PaginationPrevProps) {\n  const { page, total, setPage } = useContext(PaginationContext);\n\n  return (\n    <Button\n      className={composeRenderProps(className, (className) =>\n        clsx(styles.button, className),\n      )}\n      color='mono-bold'\n      variant='icon'\n      isDisabled={page === 1 || isNavigationDisabled(total, page)}\n      onPress={() => {\n        setPage(page - 1);\n        onPress?.(page - 1);\n      }}\n      aria-label='Previous page'\n    >\n      <Icon>\n        <ChevronLeft />\n      </Icon>\n    </Button>\n  );\n}\n"]}

package/dist/components/pagination/styles.module.css

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+@reference '../../index.module.css';
+
+@layer components.l1 {
+  .container {
+    @apply gap-s flex flex-row;
+  }
+}
+
+@layer components.l2 {
+  .button {
+    min-width: 32px;
+  }
+}

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

@@ -0,0 +1,35 @@
+import { ComponentPropsWithRef } from 'react';
+import { ButtonProps, ToggleButtonProps } from '../button/types.js';
+import 'react-aria-components';
+import '../../lib/types.js';
+
+type PaginationContextValue = {
+    page: number;
+    total: number;
+    isLoading?: boolean;
+    setPage: (page: number) => void;
+};
+type PaginationProps = Omit<ComponentPropsWithRef<'nav'>, 'className' | 'onChange'> & {
+    classNames?: {
+        container?: string;
+        prev?: ButtonProps['className'];
+        pages?: ToggleButtonProps['className'];
+        next?: ButtonProps['className'];
+    };
+    total: number;
+    defaultValue?: number;
+    value?: number;
+    isLoading?: boolean;
+    onChange?: (page: number) => void;
+};
+type PaginationPagesProps = Pick<ToggleButtonProps, 'className'> & {
+    onPress?: (page: number) => void;
+};
+type PaginationPrevProps = Pick<ButtonProps, 'className'> & {
+    onPress?: (page: number) => void;
+};
+type PaginationNextProps = Pick<ButtonProps, 'className'> & {
+    onPress?: (page: number) => void;
+};
+
+export type { PaginationContextValue, PaginationNextProps, PaginationPagesProps, PaginationPrevProps, PaginationProps };

package/dist/components/pagination/types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"types.js"}

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

@@ -0,0 +1,16 @@
+declare function range(start: number, end: number): number[];
+declare function isNavigationDisabled(pageCount: number, currentPage: number): boolean;
+/**
+ * Return min max range for visible pages. As per our design, we limit
+ * the range of numbers to a spread of 5 maximum, getting the lower and upper bounds.
+ *
+ * @param pageCount - total page count
+ * @param currentPage - current page
+ * @returns - Range of 1 to 5 numbers.
+ */
+declare function getPaginationRange(pageCount: number, currentPage: number): {
+    minRange: number;
+    maxRange: number;
+};
+
+export { getPaginationRange, isNavigationDisabled, range };

package/dist/components/pagination/utils.js

@@ -0,0 +1,2 @@
+function U(E,A){const n=A-E+1;return Array.from({length:n},(R,_)=>_+E)}function F(E,A){return !E||E<1||A<1||E<A}function L(E,A){return !(E&&A)||A>E||E<1||A<1?{minRange:0,maxRange:0}:E<5?{minRange:1,maxRange:E}:A>=3&&A<E-2?{minRange:A-2,maxRange:A+2}:A>E-3?{minRange:E-4,maxRange:E}:{minRange:1,maxRange:5}}export{L as getPaginationRange,F as isNavigationDisabled,U as range};//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/pagination/utils.ts"],"names":["range","start","end","length","_","index","isNavigationDisabled","pageCount","currentPage","getPaginationRange"],"mappings":"AAmBO,SAASA,EAAMC,CAAAA,CAAeC,CAAAA,CAAa,CAChD,MAAMC,CAAAA,CAASD,CAAAA,CAAMD,EAAQ,CAAA,CAC7B,OAAO,KAAA,CAAM,IAAA,CAAK,CAAE,MAAA,CAAAE,CAAO,CAAA,CAAG,CAACC,CAAAA,CAAGC,CAAAA,GAAUA,CAAAA,CAAQJ,CAAK,CAC3D,CAGO,SAASK,CAAAA,CACdC,CAAAA,CACAC,CAAAA,CACS,CACT,OACE,CAACD,CAAAA,EAAaA,CAAAA,CAAY,CAAA,EAAKC,CAAAA,CAAc,CAAA,EAAKD,EAAYC,CAElE,CAUO,SAASC,CAAAA,CAAmBF,CAAAA,CAAmBC,CAAAA,CAAqB,CACzE,OACE,EAAED,GAAaC,CAAAA,CAAAA,EACfA,CAAAA,CAAcD,GACdA,CAAAA,CAAY,CAAA,EACZC,CAAAA,CAAc,CAAA,CAEP,CAAE,QAAA,CAAU,EAAqB,QAAA,CAAU,CAAoB,CAAA,CAIpED,CAAAA,CAAY,CAAA,CACP,CACL,SAAU,CAAA,CACV,QAAA,CAAUA,CACZ,CAAA,CAIEC,CAAAA,EAAe,CAAA,EAAKA,EAAcD,CAAAA,CAAY,CAAA,CACzC,CACL,QAAA,CAAUC,CAAAA,CAAc,CAAA,CACxB,SAAUA,CAAAA,CAAc,CAC1B,CAAA,CAIEA,CAAAA,CAAcD,CAAAA,CAAY,CAAA,CACrB,CACL,QAAA,CAAUA,CAAAA,CAAY,CAAA,CACtB,QAAA,CAAUA,CACZ,CAAA,CAGK,CAAE,QAAA,CAAU,CAAA,CAAmB,QAAA,CAAU,CAAkB,CACpE","file":"utils.js","sourcesContent":["// __private-exports\n/*\n * Copyright 2025 Hypergiant Galactic Systems Inc. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at https://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nconst DEFAULT_EMPTY_RANGE = 0;\nconst DEFAULT_MIN_RANGE = 1;\nconst DEFAULT_MAX_RANGE = 5;\nconst DEFAULT_MID_RANGE = 2;\nconst DEFAULT_UPPER_MID = 4;\n\nexport function range(start: number, end: number) {\n  const length = end - start + 1;\n  return Array.from({ length }, (_, index) => index + start);\n}\n\n// Handles edge cases around the relationship between pageCount and currentPage.`\nexport function isNavigationDisabled(\n  pageCount: number,\n  currentPage: number,\n): boolean {\n  return (\n    !pageCount || pageCount < 1 || currentPage < 1 || pageCount < currentPage\n  );\n}\n\n/**\n * Return min max range for visible pages. As per our design, we limit\n * the range of numbers to a spread of 5 maximum, getting the lower and upper bounds.\n *\n * @param pageCount - total page count\n * @param currentPage - current page\n * @returns - Range of 1 to 5 numbers.\n */\nexport function getPaginationRange(pageCount: number, currentPage: number) {\n  if (\n    !(pageCount && currentPage) ||\n    currentPage > pageCount ||\n    pageCount < 1 ||\n    currentPage < 1\n  ) {\n    return { minRange: DEFAULT_EMPTY_RANGE, maxRange: DEFAULT_EMPTY_RANGE };\n  }\n\n  // Below max display.\n  if (pageCount < DEFAULT_MAX_RANGE) {\n    return {\n      minRange: DEFAULT_MIN_RANGE,\n      maxRange: pageCount,\n    };\n  }\n\n  // Middle.\n  if (currentPage >= 3 && currentPage < pageCount - 2) {\n    return {\n      minRange: currentPage - DEFAULT_MID_RANGE,\n      maxRange: currentPage + DEFAULT_MID_RANGE,\n    };\n  }\n\n  // End of page count.\n  if (currentPage > pageCount - 3) {\n    return {\n      minRange: pageCount - DEFAULT_UPPER_MID,\n      maxRange: pageCount,\n    };\n  }\n\n  return { minRange: DEFAULT_MIN_RANGE, maxRange: DEFAULT_MAX_RANGE };\n}\n"]}