@blakesteve/roster 2.9.5 → 4.0.0

package/dist/components/atoms/Button/Button.d.ts

@@ -5,6 +5,16 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     isLoading?: boolean;
     startIcon?: React.ReactNode;
     endIcon?: React.ReactNode;
+    /**
+     * Which surface the button sits on.
+     *
+     * Roster's dark styling keys off an ancestor carrying `.dark`, so a button
+     * placed on a hard-coded dark panel that never carries that class (a
+     * campfire overlay, a lantern-night backdrop) falls back to the LIGHT
+     * styles and flashes a near-white hover. Pass `surface="dark"` to force the
+     * dark treatment regardless of the app's theme.
+     */
+    surface?: "auto" | "dark";
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 export { Button };

package/dist/components/atoms/PasswordInput/PasswordInput.d.ts

@@ -0,0 +1,30 @@
+import { default as React } from 'react';
+import { InputProps } from '../Input/Input';
+export interface PasswordInputProps extends Omit<InputProps, "type" | "endIcon"> {
+    /**
+     * Whether to render the reveal toggle at all. Turn it off where policy
+     * forbids showing the value on screen.
+     */
+    revealable?: boolean;
+    /** Starts revealed. Uncontrolled; pair with `onRevealChange` to observe. */
+    defaultRevealed?: boolean;
+    /** Controls the reveal state. Pass with `onRevealChange` for a controlled field. */
+    revealed?: boolean;
+    /** Fires whenever the reveal state changes, controlled or not. */
+    onRevealChange?: (revealed: boolean) => void;
+    /** Accessible label for the toggle while the value is hidden. */
+    showLabel?: string;
+    /** Accessible label for the toggle while the value is visible. */
+    hideLabel?: string;
+}
+/**
+ * A password field with a reveal toggle: the pattern every sign-in form needs
+ * and nobody should rewrite.
+ *
+ * Wraps `Input`, so labels, helper and error text, and every variant behave
+ * exactly as they do everywhere else. The toggle is a real button: keyboard
+ * reachable, `type="button"` so it never submits the form, and disabled
+ * alongside the field.
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<HTMLInputElement>>;
+export { PasswordInput };

package/dist/components/atoms/Pill/Pill.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { pillVariants } from './pill-variants';
+export interface PillProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof pillVariants> {
+    children: React.ReactNode;
+    /** Leading status dot, in the pill's color scheme. */
+    dot?: boolean;
+    /**
+     * Animates the dot for genuinely live state: "Live now", "12 watching".
+     * Requires `dot`. Honors `prefers-reduced-motion`, in which case the dot
+     * still renders, it just stops moving.
+     */
+    pulse?: boolean;
+    /** Leading icon or avatar. Ignored when `dot` is set. */
+    leadingIcon?: React.ReactNode;
+}
+/**
+ * Inline chrome for a short phrase: social proof, live state, an applied
+ * filter. See pill-variants.ts for how this differs from Badge.
+ */
+declare const Pill: React.ForwardRefExoticComponent<PillProps & React.RefAttributes<HTMLSpanElement>>;
+export { Pill };

package/dist/components/atoms/Pill/pill-variants.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Pill vs Badge.
+ *
+ * Badge is a compact label attached to something else: a count on an avatar,
+ * a status on a table row. It is sized to sit in a corner.
+ *
+ * Pill is standalone inline chrome carrying a short phrase: social proof
+ * ("3 friends voted"), live state ("Live now"), or a filter that reads as a
+ * sentence fragment. It is always fully rounded, has roomier horizontal
+ * padding so words breathe, and can lead with a status dot.
+ */
+export declare const pillVariants: (props?: ({
+    colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "info" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The leading status dot. On solid pills it borrows the text color so it
+ * stays legible against the filled background; elsewhere it takes the scheme.
+ */
+export declare const pillDotVariants: (props?: ({
+    colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "info" | null | undefined;
+    variant?: "soft" | "solid" | "outline" | null | undefined;
+    size?: "sm" | "md" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/molecules/Alert/Alert.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import { alertVariants } from './alert-variants';
+export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof alertVariants> {
+    /** Optional bolded first line above the message. */
+    title?: React.ReactNode;
+    /** The message itself. */
+    children: React.ReactNode;
+    /** Replaces the icon chosen for the color scheme. Pass `null` for none. */
+    icon?: React.ReactNode;
+    /** Renders a dismiss button when provided. */
+    onDismiss?: () => void;
+    /** Accessible label for the dismiss button. */
+    dismissLabel?: string;
+}
+/**
+ * Inline notice strip for feedback in the flow of a page: "this action
+ * failed", "changes saved". For a full zero-data panel reach for EmptyState or
+ * ErrorState instead.
+ *
+ * Errors announce themselves assertively; every other scheme is polite, so a
+ * success note does not interrupt whatever a screen reader is currently saying.
+ */
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+export { Alert };

package/dist/components/molecules/Alert/alert-variants.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Inline notice strip. Deliberately lighter than ErrorState, which is a full
+ * empty-state panel. Alert is for "this action failed" feedback sitting in
+ * the flow of a page or a form.
+ *
+ * The left stripe carries the color weight so the fill can stay quiet enough
+ * to sit inside a form without shouting.
+ */
+export declare const alertVariants: (props?: ({
+    colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/organisms/DataTable/DataTable.d.ts

@@ -1,7 +1,41 @@
-import { ColumnDef } from '@tanstack/react-table';
+import { ColumnDef, RowData } from '@tanstack/react-table';
 import { TableProps } from '../Table/Table';
-export interface DataTableProps<TData, TValue> {
-    columns: ColumnDef<TData, TValue>[];
+/**
+ * The feature set DataTable registers: sorting and pagination, plus the row
+ * models each one needs. v9 requires features to be declared up front, and it
+ * types column definitions against them, so consumers need this type to write
+ * their columns:
+ *
+ * ```ts
+ * const columns: ColumnDef<RosterTableFeatures, Person>[] = [...]
+ * // or
+ * const helper = createColumnHelper<RosterTableFeatures, Person>()
+ * ```
+ *
+ * Built statically at module scope, as v9 requires.
+ */
+declare const dataTableFeatures: {
+    rowSortingFeature: import('@tanstack/table-core').TableFeature;
+    rowPaginationFeature: import('@tanstack/table-core').TableFeature;
+    sortedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+    paginatedRowModel: (table: import('@tanstack/table-core').Table<any, any>) => () => import('@tanstack/table-core').RowModel<any, any>;
+    sortFns: {
+        alphanumeric: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        alphanumericCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        basic: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        datetime: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        text: import('@tanstack/table-core').CreatedSortFn<any, any>;
+        textCaseSensitive: import('@tanstack/table-core').CreatedSortFn<any, any>;
+    };
+};
+export type RosterTableFeatures = typeof dataTableFeatures;
+/**
+ * `TValue` is gone from v8's `DataTableProps<TData, TValue>`: a columns array
+ * is heterogeneous, so v9 types each entry's value as `unknown` and recovers
+ * the real type per column through `createColumnHelper`.
+ */
+export interface DataTableProps<TData extends RowData> {
+    columns: ColumnDef<RosterTableFeatures, TData>[];
     data: TData[];
     className?: string;
     tableClassName?: string;
@@ -10,4 +44,5 @@ export interface DataTableProps<TData, TValue> {
     size?: TableProps["size"];
     hoverable?: boolean;
 }
-export declare function DataTable<TData, TValue>({ columns, data, className, tableClassName, paginationClassName, variant, size, hoverable, }: DataTableProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export declare function DataTable<TData extends RowData>({ columns, data, className, tableClassName, paginationClassName, variant, size, hoverable, }: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/organisms/Navbar/Navbar.d.ts

@@ -1,16 +1,35 @@
 import { default as React } from 'react';
 import { VariantProps } from 'class-variance-authority';
 import { navbarVariants } from './navbar-variants';
+/**
+ * Content for a consumer-supplied slot. Pass a plain node, or a function that
+ * receives `close` so anything inside the slot can dismiss the mobile panel —
+ * needed when the slot holds a link, since the nav has no way to know a click
+ * on arbitrary content was a navigation.
+ */
+export type NavbarSlot = React.ReactNode | ((props: {
+    close: () => void;
+}) => React.ReactNode);
 export interface NavItem {
     label: string;
     path: string;
-    /** Optional badge rendered inline after the link label — any ReactNode.
+    /** Optional badge rendered inline after the link label. Any ReactNode.
      *  Use for "New" labels, notification counts, or status indicators.
      *  Appears in both the desktop nav and the mobile slide-out panel. */
     badge?: React.ReactNode;
 }
 export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof navbarVariants> {
     logoSrc: string;
+    /**
+     * Size of the logo image. Accepts any CSS length (`"2.75rem"`, `44`).
+     * Defaults to `2rem`, the previous hard-coded `h-8 w-8`.
+     */
+    logoSize?: string | number;
+    /**
+     * Classes applied to the logo image. Replaces the default rounding, so a
+     * circular mark can pass `"rounded-full"` and a square one `""`.
+     */
+    logoClassName?: string;
     brandName: string;
     items: NavItem[];
     activePath?: string;
@@ -25,17 +44,34 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantP
     onLogout?: () => void;
     onInboxClick?: () => void;
     onThemeToggle?: () => void;
-    themeMode?: "light" | "dark";
+    /**
+     * Which palette the nav paints itself with.
+     *
+     * `"auto"` follows the nearest ancestor carrying the `.dark` class, matching
+     * how the rest of Roster handles dark mode. Use it in class-based dark apps
+     * so the nav does not need wiring into your theme state. Omit the prop
+     * entirely and the mode is inferred from `variant`, as before.
+     */
+    themeMode?: "light" | "dark" | "auto";
     notificationVariant?: "primary" | "error" | "amber" | "success" | "neutral" | "orange" | "teal" | "purple";
+    /**
+     * Fill style of the notification count badge. Defaults to `"solid"`, which
+     * is what the nav rendered before this was configurable. Use `"soft"` or
+     * `"outline"` where a solid dot competes with a busy or colored nav surface.
+     */
+    notificationFill?: "soft" | "light" | "solid" | "outline";
     /**
      * Custom content rendered in the right-side action area. When provided it
      * replaces the built-in user menu / "Log In" button on desktop and the user
      * section in the mobile panel, giving you full control over auth UI.
+     *
+     * Pass a function to receive `close` and dismiss the mobile panel from
+     * inside the slot: `actions={({ close }) => <Link onClick={close} … />}`.
      */
-    actions?: React.ReactNode;
+    actions?: NavbarSlot;
     /**
      * Replaces the default brand name `<span>` with arbitrary markup. Use this
-     * when you need mixed weights, colours, or other rich styling that a plain
+     * when you need mixed weights, colors, or other rich styling that a plain
      * string cannot express (e.g. bold "GAME" + thin "VERDICT").
      * The logo image is always rendered; this only affects the text element.
      */
@@ -44,10 +80,13 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantP
      * Extra content rendered between the nav link list and the user menu / Log In
      * button on desktop, and above the nav links in the mobile slide-out panel.
      * Use this for persistent nav-level controls like a search toggle that should
-     * coexist with the built-in user menu. Does not replace the user menu —
+     * coexist with the built-in user menu. Does not replace the user menu;
      * see `actions` for full replacement.
+     *
+     * Pass a function to receive `close` and dismiss the mobile panel from
+     * inside the slot: `navActions={({ close }) => <Link onClick={close} … />}`.
      */
-    navActions?: React.ReactNode;
+    navActions?: NavbarSlot;
     /**
      * Auth-gated navigation items appended to the built-in user avatar dropdown
      * on desktop and to the nav section of the mobile slide-out panel. Only
@@ -55,5 +94,5 @@ export interface NavbarProps extends React.HTMLAttributes<HTMLElement>, VariantP
      */
     userMenuItems?: NavItem[];
 }
-declare const Navbar: ({ logoSrc, brandName, items, activePath, routerElement, user, onLogin, onLogout, onInboxClick, onThemeToggle, actions, brandElement, navActions, userMenuItems, className, variant, position, themeMode, notificationVariant, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
+declare const Navbar: ({ logoSrc, logoSize, logoClassName, brandName, items, activePath, routerElement, user, onLogin, onLogout, onInboxClick, onThemeToggle, actions, brandElement, navActions, userMenuItems, className, variant, position, themeMode, notificationVariant, notificationFill, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
 export { Navbar };

package/dist/data-table.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Table-CPAcmkIV.cjs"),j=require("react"),n=require("@tanstack/react-table"),p=n.tableFeatures({rowSortingFeature:n.rowSortingFeature,rowPaginationFeature:n.rowPaginationFeature,sortedRowModel:n.createSortedRowModel(),paginatedRowModel:n.createPaginatedRowModel(),sortFns:n.sortFns});function R({columns:a,data:r,className:i,tableClassName:l,paginationClassName:x,variant:c="default",size:u="md",hoverable:g=!1}){const[m,d]=j.useState([]),t=n.useTable({features:p,data:r,columns:a,onSortingChange:d,state:{sorting:m},initialState:{pagination:{pageIndex:0,pageSize:10}}});return e.jsxRuntimeExports.jsxs("div",{className:e.cn("flex flex-col gap-4",i),children:[e.jsxRuntimeExports.jsxs(e.Table,{variant:c,size:u,hoverable:g,className:l,children:[e.jsxRuntimeExports.jsx(e.TableHeader,{children:t.getHeaderGroups().map(o=>e.jsxRuntimeExports.jsx(e.TableRow,{children:o.headers.map(s=>e.jsxRuntimeExports.jsx(e.TableHead,{children:s.isPlaceholder?null:e.jsxRuntimeExports.jsxs("div",{className:e.cn("flex items-center gap-2 transition-opacity",s.column.getCanSort()&&"cursor-pointer select-none opacity-80 hover:opacity-100"),onClick:s.column.getToggleSortingHandler(),children:[n.flexRender(s.column.columnDef.header,s.getContext()),s.column.getCanSort()&&e.jsxRuntimeExports.jsx("span",{className:"w-4 flex justify-center text-primary-500",children:s.column.getIsSorted()==="asc"?e.jsxRuntimeExports.jsx(e.FontAwesomeIcon,{icon:e.faCaretUp}):s.column.getIsSorted()==="desc"?e.jsxRuntimeExports.jsx(e.FontAwesomeIcon,{icon:e.faCaretDown}):null})]})},s.id))},o.id))}),e.jsxRuntimeExports.jsx(e.TableBody,{children:t.getRowModel().rows?.length?t.getRowModel().rows.map(o=>e.jsxRuntimeExports.jsx(e.TableRow,{children:o.getAllCells().map(s=>e.jsxRuntimeExports.jsx(e.TableCell,{children:n.flexRender(s.column.columnDef.cell,s.getContext())},s.id))},o.id)):e.jsxRuntimeExports.jsx(e.TableRow,{children:e.jsxRuntimeExports.jsx(e.TableCell,{colSpan:a.length,className:"h-24 text-center text-gray-500 dark:text-gray-400 italic",children:"No results found."})})})]}),e.jsxRuntimeExports.jsxs("div",{className:e.cn("flex flex-col sm:flex-row items-center justify-between gap-4 px-2",x),children:[e.jsxRuntimeExports.jsxs("div",{className:"text-sm font-medium text-gray-500 dark:text-gray-400",children:["Page"," ",e.jsxRuntimeExports.jsx("strong",{className:"text-gray-900 dark:text-gray-100",children:t.state.pagination.pageIndex+1})," ","of"," ",e.jsxRuntimeExports.jsx("strong",{className:"text-gray-900 dark:text-gray-100",children:t.getPageCount()})]}),e.jsxRuntimeExports.jsxs("div",{className:"flex items-center space-x-2",children:[e.jsxRuntimeExports.jsx(e.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.setPageIndex(0),disabled:!t.getCanPreviousPage(),"aria-label":"Go to first page",children:e.jsxRuntimeExports.jsx(e.FontAwesomeIcon,{icon:e.faAnglesLeft})}),e.jsxRuntimeExports.jsx(e.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.previousPage(),disabled:!t.getCanPreviousPage(),"aria-label":"Go to previous page",children:e.jsxRuntimeExports.jsx(e.FontAwesomeIcon,{icon:e.faAngleLeft})}),e.jsxRuntimeExports.jsx(e.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.nextPage(),disabled:!t.getCanNextPage(),"aria-label":"Go to next page",children:e.jsxRuntimeExports.jsx(e.FontAwesomeIcon,{icon:e.faAngleRight})}),e.jsxRuntimeExports.jsx(e.Button,{variant:"outline",colorScheme:"neutral",size:"sm",onClick:()=>t.setPageIndex(t.getPageCount()-1),disabled:!t.getCanNextPage(),"aria-label":"Go to last page",children:e.jsxRuntimeExports.jsx(e.FontAwesomeIcon,{icon:e.faAnglesRight})})]})]})]})}exports.DataTable=R;

package/dist/data-table.d.ts

@@ -0,0 +1,21 @@
+/**
+ * DataTable lives behind its own entry point: `@blakesteve/roster/data-table`.
+ *
+ * It is the only component that needs TanStack Table, which Roster declares as
+ * an optional peer dependency. A static re-export from the main entry would
+ * make that peer mandatory in practice — a consumer's bundler resolves imports
+ * before it tree-shakes, so `import { Button } from "@blakesteve/roster"` would
+ * fail with "Cannot resolve '@tanstack/react-table'" in an app that has no
+ * tables at all. Splitting the entry keeps the cost with the component.
+ *
+ * Consumers of DataTable install the peer themselves:
+ *
+ * ```bash
+ * npm install @tanstack/react-table
+ * ```
+ *
+ * ```tsx
+ * import { DataTable, type RosterTableFeatures } from "@blakesteve/roster/data-table";
+ * ```
+ */
+export * from './components/organisms/DataTable/DataTable';

package/dist/data-table.es.js

@@ -0,0 +1,155 @@
+"use client";
+import { q as e, T as C, a0 as S, a1 as o, _ as P, F as s, a9 as v, aa as w, v as i, U as y, X as c, N as l, ab as N, ac as R, ad as T, ae as k } from "./Table-CG6Z6c1A.js";
+import { useState as F } from "react";
+import { tableFeatures as I, sortFns as A, rowPaginationFeature as M, rowSortingFeature as z, createPaginatedRowModel as D, createSortedRowModel as G, useTable as H, flexRender as g } from "@tanstack/react-table";
+const B = I({
+  rowSortingFeature: z,
+  rowPaginationFeature: M,
+  sortedRowModel: G(),
+  paginatedRowModel: D(),
+  // The whole built-in registry, not a subset: DataTable is generic over
+  // consumer data, so auto sort detection has to be able to reach any of them.
+  sortFns: A
+});
+function E({
+  columns: r,
+  data: d,
+  className: x,
+  tableClassName: m,
+  paginationClassName: u,
+  variant: p = "default",
+  size: f = "md",
+  hoverable: j = !1
+}) {
+  const [h, b] = F([]), a = H({
+    features: B,
+    data: d,
+    columns: r,
+    onSortingChange: b,
+    state: {
+      sorting: h
+    },
+    initialState: {
+      pagination: {
+        pageIndex: 0,
+        pageSize: 10
+      }
+    }
+  });
+  return /* @__PURE__ */ e.jsxs("div", { className: i("flex flex-col gap-4", x), children: [
+    /* @__PURE__ */ e.jsxs(
+      C,
+      {
+        variant: p,
+        size: f,
+        hoverable: j,
+        className: m,
+        children: [
+          /* @__PURE__ */ e.jsx(S, { children: a.getHeaderGroups().map((n) => /* @__PURE__ */ e.jsx(o, { children: n.headers.map((t) => /* @__PURE__ */ e.jsx(P, { children: t.isPlaceholder ? null : /* @__PURE__ */ e.jsxs(
+            "div",
+            {
+              className: i(
+                "flex items-center gap-2 transition-opacity",
+                t.column.getCanSort() && "cursor-pointer select-none opacity-80 hover:opacity-100"
+              ),
+              onClick: t.column.getToggleSortingHandler(),
+              children: [
+                g(
+                  t.column.columnDef.header,
+                  t.getContext()
+                ),
+                t.column.getCanSort() && /* @__PURE__ */ e.jsx("span", { className: "w-4 flex justify-center text-primary-500", children: t.column.getIsSorted() === "asc" ? /* @__PURE__ */ e.jsx(s, { icon: v }) : t.column.getIsSorted() === "desc" ? /* @__PURE__ */ e.jsx(s, { icon: w }) : null })
+              ]
+            }
+          ) }, t.id)) }, n.id)) }),
+          /* @__PURE__ */ e.jsx(y, { children: a.getRowModel().rows?.length ? (
+            // No data-state on the row: row selection is not one of the
+            // registered features, and v8's getIsSelected() was always false
+            // here, so React omitted the attribute anyway.
+            a.getRowModel().rows.map((n) => /* @__PURE__ */ e.jsx(o, { children: n.getAllCells().map((t) => /* @__PURE__ */ e.jsx(c, { children: g(t.column.columnDef.cell, t.getContext()) }, t.id)) }, n.id))
+          ) : /* @__PURE__ */ e.jsx(o, { children: /* @__PURE__ */ e.jsx(
+            c,
+            {
+              colSpan: r.length,
+              className: "h-24 text-center text-gray-500 dark:text-gray-400 italic",
+              children: "No results found."
+            }
+          ) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ e.jsxs(
+      "div",
+      {
+        className: i(
+          "flex flex-col sm:flex-row items-center justify-between gap-4 px-2",
+          u
+        ),
+        children: [
+          /* @__PURE__ */ e.jsxs("div", { className: "text-sm font-medium text-gray-500 dark:text-gray-400", children: [
+            "Page",
+            " ",
+            /* @__PURE__ */ e.jsx("strong", { className: "text-gray-900 dark:text-gray-100", children: a.state.pagination.pageIndex + 1 }),
+            " ",
+            "of",
+            " ",
+            /* @__PURE__ */ e.jsx("strong", { className: "text-gray-900 dark:text-gray-100", children: a.getPageCount() })
+          ] }),
+          /* @__PURE__ */ e.jsxs("div", { className: "flex items-center space-x-2", children: [
+            /* @__PURE__ */ e.jsx(
+              l,
+              {
+                variant: "outline",
+                colorScheme: "neutral",
+                size: "sm",
+                onClick: () => a.setPageIndex(0),
+                disabled: !a.getCanPreviousPage(),
+                "aria-label": "Go to first page",
+                children: /* @__PURE__ */ e.jsx(s, { icon: N })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              l,
+              {
+                variant: "outline",
+                colorScheme: "neutral",
+                size: "sm",
+                onClick: () => a.previousPage(),
+                disabled: !a.getCanPreviousPage(),
+                "aria-label": "Go to previous page",
+                children: /* @__PURE__ */ e.jsx(s, { icon: R })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              l,
+              {
+                variant: "outline",
+                colorScheme: "neutral",
+                size: "sm",
+                onClick: () => a.nextPage(),
+                disabled: !a.getCanNextPage(),
+                "aria-label": "Go to next page",
+                children: /* @__PURE__ */ e.jsx(s, { icon: T })
+              }
+            ),
+            /* @__PURE__ */ e.jsx(
+              l,
+              {
+                variant: "outline",
+                colorScheme: "neutral",
+                size: "sm",
+                onClick: () => a.setPageIndex(a.getPageCount() - 1),
+                disabled: !a.getCanNextPage(),
+                "aria-label": "Go to last page",
+                children: /* @__PURE__ */ e.jsx(s, { icon: k })
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  E as DataTable
+};

package/dist/index.d.ts

@@ -14,6 +14,9 @@ export * from './components/atoms/Input/Input';
 export * from './components/atoms/Input/input-variants';
 export * from './components/atoms/Link/Link';
 export * from './components/atoms/Link/link-variants';
+export * from './components/atoms/PasswordInput/PasswordInput';
+export * from './components/atoms/Pill/Pill';
+export * from './components/atoms/Pill/pill-variants';
 export * from './components/atoms/Select/Select';
 export * from './components/atoms/Select/select-variants';
 export * from './components/atoms/Spinner/Spinner';
@@ -26,6 +29,8 @@ export * from './components/atoms/LiquidTabs/LiquidTabs';
 export * from './components/atoms/Tooltip/Tooltip';
 export * from './components/atoms/CollapsibleSection/CollapsibleSection';
 export * from './components/atoms/SegmentBar/SegmentBar';
+export * from './components/molecules/Alert/Alert';
+export * from './components/molecules/Alert/alert-variants';
 export * from './components/molecules/Accordion/Accordion';
 export * from './components/molecules/Breadcrumbs/Breadcrumbs';
 export * from './components/molecules/Breadcrumbs/breadcrumb-variants';
@@ -45,6 +50,5 @@ export * from './components/organisms/Navbar/Navbar';
 export * from './components/organisms/Navbar/navbar-variants';
 export * from './components/organisms/Table/Table';
 export * from './components/organisms/Table/table-variants';
-export * from './components/organisms/DataTable/DataTable';
 export * from './hooks/useCountdown';
 export * from './lib/utils';

package/dist/preflight.cjs.js

@@ -0,0 +1 @@
+"use client";"use strict";

package/dist/preflight.css

@@ -0,0 +1 @@
+@layer roster-preflight{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-feature-settings:normal;font-variation-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::-moz-placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer theme,base,components,roster,utilities;

package/dist/preflight.es.js

@@ -0,0 +1 @@
+"use client";