@blakesteve/roster 4.0.0 → 4.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +76 -1
- package/dist/Table-BaJ8qfrV.js +4949 -0
- package/dist/Table-Cqm_mtRS.cjs +566 -0
- package/dist/components/atoms/Eyebrow/Eyebrow.d.ts +29 -0
- package/dist/components/atoms/Eyebrow/eyebrow-variants.d.ts +13 -0
- package/dist/components/atoms/InlineCode/InlineCode.d.ts +9 -0
- package/dist/components/atoms/InlineCode/inline-code-variants.d.ts +10 -0
- package/dist/components/atoms/LabeledDivider/LabeledDivider.d.ts +19 -0
- package/dist/components/atoms/Stat/Stat.d.ts +21 -0
- package/dist/components/atoms/Stat/stat-variants.d.ts +9 -0
- package/dist/components/atoms/ThemeToggle/ThemeToggle.d.ts +31 -0
- package/dist/components/molecules/Breadcrumbs/Breadcrumbs.d.ts +42 -3
- package/dist/components/molecules/DescriptionList/DescriptionList.d.ts +24 -0
- package/dist/components/molecules/DescriptionList/description-list-variants.d.ts +10 -0
- package/dist/components/molecules/Pullquote/Pullquote.d.ts +22 -0
- package/dist/components/molecules/Pullquote/pullquote-variants.d.ts +11 -0
- package/dist/data-table.cjs.js +1 -1
- package/dist/data-table.es.js +6 -5
- package/dist/hooks/useKeySequence.d.ts +39 -0
- package/dist/index.d.ts +13 -0
- package/dist/preflight.cjs.js +1 -1
- package/dist/preflight.es.js +1 -1
- package/dist/roster.cjs.js +2 -2
- package/dist/roster.css +1 -1
- package/dist/roster.es.js +2863 -2528
- package/dist/tokens.cjs.js +1 -1
- package/dist/tokens.es.js +1 -1
- package/dist/utils-D2U2F80P.cjs +1 -0
- package/dist/utils-DtaLkIY8.js +2776 -0
- package/dist/utils.cjs.js +1 -0
- package/dist/utils.d.ts +14 -0
- package/dist/utils.es.js +4 -0
- package/package.json +6 -1
- package/dist/Table-CG6Z6c1A.js +0 -7711
- package/dist/Table-CPAcmkIV.cjs +0 -566
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { eyebrowVariants } from './eyebrow-variants';
|
|
4
|
+
type EyebrowOwnProps<E extends React.ElementType> = VariantProps<typeof eyebrowVariants> & {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* Element to render. Defaults to `span` so it stays inline and carries no
|
|
8
|
+
* heading semantics: an eyebrow labels a section, it is not the heading.
|
|
9
|
+
*
|
|
10
|
+
* Props follow the element. `as="a"` accepts `href`, `target`, and `rel`;
|
|
11
|
+
* `as="label"` accepts `htmlFor`. An eyebrow that renders a link should not
|
|
12
|
+
* have to be wrapped in one to get an href.
|
|
13
|
+
*/
|
|
14
|
+
as?: E;
|
|
15
|
+
};
|
|
16
|
+
export type EyebrowProps<E extends React.ElementType = "span"> = EyebrowOwnProps<E> & Omit<React.ComponentPropsWithRef<E>, keyof EyebrowOwnProps<E>>;
|
|
17
|
+
/**
|
|
18
|
+
* Written as a plain generic function rather than through `forwardRef`: that
|
|
19
|
+
* helper's return type is not generic, so the element type collapses the
|
|
20
|
+
* moment it passes through and `as="a"` stops admitting `href` — the exact bug
|
|
21
|
+
* this signature exists to fix. React 19 passes `ref` as an ordinary prop, so
|
|
22
|
+
* the wrapper buys nothing here anyway; `ref` rides along in `...props` and
|
|
23
|
+
* lands on whatever element `as` selected.
|
|
24
|
+
*/
|
|
25
|
+
declare function Eyebrow<E extends React.ElementType = "span">({ as, className, size, tone, weight, children, ...props }: EyebrowProps<E>): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
declare namespace Eyebrow {
|
|
27
|
+
var displayName: string;
|
|
28
|
+
}
|
|
29
|
+
export { Eyebrow };
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* The small uppercase label that sits above a heading, beside a rule, or as a
|
|
3
|
+
* column head. Extracted from blakeb.dev, where it was hand-rolled as a CSS
|
|
4
|
+
* class and used 26 times before anyone noticed it was a component.
|
|
5
|
+
*
|
|
6
|
+
* Monospace on purpose: at this size, tracked-out uppercase reads as chrome
|
|
7
|
+
* rather than prose, which is the whole job.
|
|
8
|
+
*/
|
|
9
|
+
export declare const eyebrowVariants: (props?: ({
|
|
10
|
+
size?: "xs" | "sm" | "md" | null | undefined;
|
|
11
|
+
tone?: "primary" | "strong" | "default" | "faint" | null | undefined;
|
|
12
|
+
weight?: "medium" | "normal" | "semibold" | null | undefined;
|
|
13
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { inlineCodeVariants } from './inline-code-variants';
|
|
4
|
+
export interface InlineCodeProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof inlineCodeVariants> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
/** Inline `<code>` for identifiers in running prose. Not for code blocks. */
|
|
8
|
+
declare const InlineCode: React.ForwardRefExoticComponent<InlineCodeProps & React.RefAttributes<HTMLElement>>;
|
|
9
|
+
export { InlineCode };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Inline `<code>` for identifiers in running prose.
|
|
3
|
+
*
|
|
4
|
+
* Sized at 0.8125rem rather than 1em on purpose: a monospace face at the same
|
|
5
|
+
* nominal size as the surrounding text always reads a notch too large.
|
|
6
|
+
*/
|
|
7
|
+
export declare const inlineCodeVariants: (props?: ({
|
|
8
|
+
colorScheme?: "primary" | "neutral" | "current" | null | undefined;
|
|
9
|
+
surface?: "none" | "soft" | null | undefined;
|
|
10
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
export interface LabeledDividerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
|
|
3
|
+
/** Sits before the rule. */
|
|
4
|
+
label: React.ReactNode;
|
|
5
|
+
/** Sits after the rule. Use for a count, a total, a date. */
|
|
6
|
+
trailing?: React.ReactNode;
|
|
7
|
+
/** Puts the label on the right instead, with the rule leading. */
|
|
8
|
+
align?: "start" | "end";
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* A horizontal rule that carries a label, and optionally something on the far
|
|
12
|
+
* side of it. Reads as a section marker rather than a heading, so it suits
|
|
13
|
+
* lists whose contents already have their own headings.
|
|
14
|
+
*
|
|
15
|
+
* `role="presentation"` because the rule is decoration; the label is real text
|
|
16
|
+
* and stays in the accessibility tree on its own.
|
|
17
|
+
*/
|
|
18
|
+
declare const LabeledDivider: React.ForwardRefExoticComponent<LabeledDividerProps & React.RefAttributes<HTMLDivElement>>;
|
|
19
|
+
export { LabeledDivider };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { statValueVariants } from './stat-variants';
|
|
4
|
+
export interface StatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, VariantProps<typeof statValueVariants> {
|
|
5
|
+
/** The figure itself. A string, so you control formatting and units. */
|
|
6
|
+
value: React.ReactNode;
|
|
7
|
+
/** What the figure counts. */
|
|
8
|
+
label: React.ReactNode;
|
|
9
|
+
/**
|
|
10
|
+
* Where the number came from: "live", "GitHub API", "at build time". Small
|
|
11
|
+
* and quiet by design, but worth having — a figure whose provenance is
|
|
12
|
+
* stated reads very differently from one that is merely asserted.
|
|
13
|
+
*/
|
|
14
|
+
source?: React.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Renders as a `<div>` wrapping a definition pair, so a row of Stats can sit
|
|
18
|
+
* inside a `<dl>` and stay semantically honest.
|
|
19
|
+
*/
|
|
20
|
+
declare const Stat: React.ForwardRefExoticComponent<StatProps & React.RefAttributes<HTMLDivElement>>;
|
|
21
|
+
export { Stat };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A single figure with its label. Distinct from Badge and Pill: those carry a
|
|
3
|
+
* word, a Stat carries a magnitude and is meant to be scanned in a row of
|
|
4
|
+
* siblings. Digits are tabular so a row of them lines up on the decimal.
|
|
5
|
+
*/
|
|
6
|
+
export declare const statValueVariants: (props?: ({
|
|
7
|
+
size?: "sm" | "md" | "lg" | null | undefined;
|
|
8
|
+
colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "current" | null | undefined;
|
|
9
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { ButtonProps } from '../Button/Button';
|
|
3
|
+
export interface ThemeToggleProps extends Omit<ButtonProps, "onClick" | "children" | "aria-label"> {
|
|
4
|
+
/** localStorage key. Match it to your blocking script. */
|
|
5
|
+
storageKey?: string;
|
|
6
|
+
/** Fires after the theme changes, with the new mode. */
|
|
7
|
+
onThemeChange?: (mode: "light" | "dark") => void;
|
|
8
|
+
/** Renders the current mode beside the icon. */
|
|
9
|
+
showLabel?: boolean;
|
|
10
|
+
/**
|
|
11
|
+
* Visible text when the page is light, if `showLabel` is set. Names the
|
|
12
|
+
* CURRENT state, not the destination — the accessible label does the
|
|
13
|
+
* opposite, because a button's name should say what pressing it does.
|
|
14
|
+
*
|
|
15
|
+
* Both take nodes, so a product with its own vocabulary for the two states
|
|
16
|
+
* ("Press sheet" / "Blueline", "Day" / "Night") can say so.
|
|
17
|
+
*/
|
|
18
|
+
lightLabel?: React.ReactNode;
|
|
19
|
+
/** Visible text when the page is dark, if `showLabel` is set. */
|
|
20
|
+
darkLabel?: React.ReactNode;
|
|
21
|
+
/** Icon shown when the page is light. Defaults to a moon. */
|
|
22
|
+
lightIcon?: React.ReactNode;
|
|
23
|
+
/** Icon shown when the page is dark. Defaults to a sun. */
|
|
24
|
+
darkIcon?: React.ReactNode;
|
|
25
|
+
/** Accessible label offering to switch to dark. */
|
|
26
|
+
toDarkLabel?: string;
|
|
27
|
+
/** Accessible label offering to switch back to light. */
|
|
28
|
+
toLightLabel?: string;
|
|
29
|
+
}
|
|
30
|
+
declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLButtonElement>>;
|
|
31
|
+
export { ThemeToggle };
|
|
@@ -1,14 +1,53 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { VariantProps } from 'class-variance-authority';
|
|
3
3
|
import { breadcrumbVariants } from './breadcrumb-variants';
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
/**
|
|
5
|
+
* The shape a crumb's link component is called with. `next/link`, React
|
|
6
|
+
* Router's `Link`, and a plain `<a>` all satisfy it as-is.
|
|
7
|
+
*/
|
|
8
|
+
export type BreadcrumbLinkProps = {
|
|
6
9
|
href: string;
|
|
10
|
+
className?: string;
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
"aria-label"?: string;
|
|
13
|
+
};
|
|
14
|
+
export type BreadcrumbItem = {
|
|
15
|
+
/** Takes a node, so a crumb can carry an icon or its own styling. */
|
|
16
|
+
label: React.ReactNode;
|
|
17
|
+
/**
|
|
18
|
+
* Omit to render the crumb as plain text. The last crumb is treated as the
|
|
19
|
+
* current page regardless, since that is what a breadcrumb trail means.
|
|
20
|
+
*/
|
|
21
|
+
href?: string;
|
|
22
|
+
/** Applied to this crumb only. */
|
|
23
|
+
className?: string;
|
|
7
24
|
};
|
|
8
25
|
export interface BreadcrumbsProps extends React.HTMLAttributes<HTMLElement>, VariantProps<typeof breadcrumbVariants> {
|
|
9
26
|
items: BreadcrumbItem[];
|
|
10
27
|
separator?: React.ReactNode;
|
|
11
28
|
showHomeIcon?: boolean;
|
|
29
|
+
/** Where the home icon points. */
|
|
30
|
+
homeHref?: string;
|
|
31
|
+
/**
|
|
32
|
+
* Renders every crumb that has an `href`. Defaults to Roster's `Link`, which
|
|
33
|
+
* is a plain `<a>` — fine for a static site, wrong inside a router, where an
|
|
34
|
+
* `<a>` turns each hop into a full page load. Pass `next/link` or your
|
|
35
|
+
* router's equivalent and navigation stays client-side.
|
|
36
|
+
*
|
|
37
|
+
* ```tsx
|
|
38
|
+
* import NextLink from "next/link";
|
|
39
|
+
* <Breadcrumbs linkComponent={NextLink} items={items} />
|
|
40
|
+
* ```
|
|
41
|
+
*
|
|
42
|
+
* **Pass it from a client component.** This is a function prop, and functions
|
|
43
|
+
* cannot cross the React Server Component boundary — handing `NextLink` to
|
|
44
|
+
* Breadcrumbs from a server component fails the render with "Functions cannot
|
|
45
|
+
* be passed directly to Client Components". Bind it in a small `"use client"`
|
|
46
|
+
* wrapper and the pages that use that wrapper stay server-rendered.
|
|
47
|
+
*/
|
|
48
|
+
linkComponent?: React.ComponentType<BreadcrumbLinkProps>;
|
|
49
|
+
/** Applied to the current (last) crumb, for a per-page accent. */
|
|
50
|
+
currentClassName?: string;
|
|
12
51
|
}
|
|
13
|
-
declare const Breadcrumbs: ({ items, separator, showHomeIcon, variant, className, ...props }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
declare const Breadcrumbs: ({ items, separator, showHomeIcon, homeHref, linkComponent, currentClassName, variant, className, ...props }: BreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
|
|
14
53
|
export { Breadcrumbs };
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { descriptionListVariants } from './description-list-variants';
|
|
4
|
+
export type DescriptionListItem = {
|
|
5
|
+
term: React.ReactNode;
|
|
6
|
+
description: React.ReactNode;
|
|
7
|
+
};
|
|
8
|
+
export interface DescriptionListProps extends Omit<React.HTMLAttributes<HTMLDListElement>, "children">, VariantProps<typeof descriptionListVariants> {
|
|
9
|
+
items: DescriptionListItem[];
|
|
10
|
+
/** Adds a hairline under every row but the last. */
|
|
11
|
+
dividers?: boolean;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* Label and value pairs: a spec sheet, a metadata panel, a props table.
|
|
15
|
+
*
|
|
16
|
+
* Renders a real `<dl>` with `<dt>`/`<dd>`, which matters more than it looks —
|
|
17
|
+
* screen readers announce the pairing, so "Framework, Next.js 16" arrives as
|
|
18
|
+
* one fact rather than two loose strings.
|
|
19
|
+
*
|
|
20
|
+
* The `contents` display on each row wrapper is what lets a grid layout treat
|
|
21
|
+
* the dt and dd as direct grid children while keeping them grouped in markup.
|
|
22
|
+
*/
|
|
23
|
+
declare const DescriptionList: React.ForwardRefExoticComponent<DescriptionListProps & React.RefAttributes<HTMLDListElement>>;
|
|
24
|
+
export { DescriptionList };
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Label and value pairs: a spec sheet, a metadata panel, a case study sidebar.
|
|
3
|
+
*
|
|
4
|
+
* `sm` is the default because this component's usual home is a sidebar panel,
|
|
5
|
+
* where the list is reference material rather than reading material.
|
|
6
|
+
*/
|
|
7
|
+
export declare const descriptionListVariants: (props?: ({
|
|
8
|
+
layout?: "split" | "inline" | "stacked" | null | undefined;
|
|
9
|
+
size?: "sm" | "md" | null | undefined;
|
|
10
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { VariantProps } from 'class-variance-authority';
|
|
3
|
+
import { pullquoteVariants } from './pullquote-variants';
|
|
4
|
+
export interface PullquoteProps extends Omit<React.HTMLAttributes<HTMLElement>, "cite">, VariantProps<typeof pullquoteVariants> {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
/**
|
|
7
|
+
* Attribution, rendered beneath the quote. Works as a source ("Why it took a
|
|
8
|
+
* while to spot") as well as a speaker.
|
|
9
|
+
*/
|
|
10
|
+
cite?: React.ReactNode;
|
|
11
|
+
/** URL for the quote's source, passed to the underlying blockquote. */
|
|
12
|
+
citeUrl?: string;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* A line lifted out of running prose and given room.
|
|
16
|
+
*
|
|
17
|
+
* Uses `<figure>` + `<blockquote>` + `<figcaption>` rather than a styled div:
|
|
18
|
+
* that is the pairing the HTML spec has for quote-with-attribution, and it
|
|
19
|
+
* keeps the citation associated with the quote for assistive tech.
|
|
20
|
+
*/
|
|
21
|
+
declare const Pullquote: React.ForwardRefExoticComponent<PullquoteProps & React.RefAttributes<HTMLElement>>;
|
|
22
|
+
export { Pullquote };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A line lifted out of running prose and given room.
|
|
3
|
+
*
|
|
4
|
+
* The scheme colors the rule only; the quote text stays at full contrast in
|
|
5
|
+
* every case. A pullquote is body copy that has been promoted, and tinting it
|
|
6
|
+
* would demote it again.
|
|
7
|
+
*/
|
|
8
|
+
export declare const pullquoteVariants: (props?: ({
|
|
9
|
+
variant?: "rule" | "plain" | "centered" | null | undefined;
|
|
10
|
+
colorScheme?: "primary" | "amber" | "success" | "error" | "neutral" | "current" | null | undefined;
|
|
11
|
+
} & import('class-variance-authority/types').ClassProp) | undefined) => string;
|
package/dist/data-table.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Table-
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Table-Cqm_mtRS.cjs"),p=require("react"),n=require("@tanstack/react-table"),a=require("./utils-D2U2F80P.cjs"),R=n.tableFeatures({rowSortingFeature:n.rowSortingFeature,rowPaginationFeature:n.rowPaginationFeature,sortedRowModel:n.createSortedRowModel(),paginatedRowModel:n.createPaginatedRowModel(),sortFns:n.sortFns});function f({columns:r,data:i,className:l,tableClassName:x,paginationClassName:c,variant:u="default",size:g="md",hoverable:m=!1}){const[d,j]=p.useState([]),t=n.useTable({features:R,data:i,columns:r,onSortingChange:j,state:{sorting:d},initialState:{pagination:{pageIndex:0,pageSize:10}}});return e.jsxRuntimeExports.jsxs("div",{className:a.cn("flex flex-col gap-4",l),children:[e.jsxRuntimeExports.jsxs(e.Table,{variant:u,size:g,hoverable:m,className:x,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:a.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:r.length,className:"h-24 text-center text-gray-500 dark:text-gray-400 italic",children:"No results found."})})})]}),e.jsxRuntimeExports.jsxs("div",{className:a.cn("flex flex-col sm:flex-row items-center justify-between gap-4 px-2",c),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=f;
|
package/dist/data-table.es.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
2
|
+
import { j as e, T as C, a as S, b as o, c as P, F as s, f as w, d as y, e as v, g as c, B as l, h as N, i as R, k as T, l as k } from "./Table-BaJ8qfrV.js";
|
|
3
3
|
import { useState as F } from "react";
|
|
4
4
|
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";
|
|
5
|
+
import { c as i } from "./utils-DtaLkIY8.js";
|
|
5
6
|
const B = I({
|
|
6
7
|
rowSortingFeature: z,
|
|
7
8
|
rowPaginationFeature: M,
|
|
@@ -11,7 +12,7 @@ const B = I({
|
|
|
11
12
|
// consumer data, so auto sort detection has to be able to reach any of them.
|
|
12
13
|
sortFns: A
|
|
13
14
|
});
|
|
14
|
-
function
|
|
15
|
+
function J({
|
|
15
16
|
columns: r,
|
|
16
17
|
data: d,
|
|
17
18
|
className: x,
|
|
@@ -58,11 +59,11 @@ function E({
|
|
|
58
59
|
t.column.columnDef.header,
|
|
59
60
|
t.getContext()
|
|
60
61
|
),
|
|
61
|
-
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:
|
|
62
|
+
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: w }) : t.column.getIsSorted() === "desc" ? /* @__PURE__ */ e.jsx(s, { icon: y }) : null })
|
|
62
63
|
]
|
|
63
64
|
}
|
|
64
65
|
) }, t.id)) }, n.id)) }),
|
|
65
|
-
/* @__PURE__ */ e.jsx(
|
|
66
|
+
/* @__PURE__ */ e.jsx(v, { children: a.getRowModel().rows?.length ? (
|
|
66
67
|
// No data-state on the row: row selection is not one of the
|
|
67
68
|
// registered features, and v8's getIsSelected() was always false
|
|
68
69
|
// here, so React omitted the attribute anyway.
|
|
@@ -151,5 +152,5 @@ function E({
|
|
|
151
152
|
] });
|
|
152
153
|
}
|
|
153
154
|
export {
|
|
154
|
-
|
|
155
|
+
J as DataTable
|
|
155
156
|
};
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
export interface UseKeySequenceOptions {
|
|
2
|
+
/**
|
|
3
|
+
* Milliseconds allowed between keys before progress resets. Without this a
|
|
4
|
+
* sequence can be completed across an arbitrarily long span, which is rarely
|
|
5
|
+
* what anyone means. Set to 0 to disable the timeout entirely.
|
|
6
|
+
*/
|
|
7
|
+
timeout?: number;
|
|
8
|
+
/** Match keys case-insensitively. On by default: users hold shift by accident. */
|
|
9
|
+
ignoreCase?: boolean;
|
|
10
|
+
/** Calls preventDefault on keys that advance the sequence. */
|
|
11
|
+
preventDefault?: boolean;
|
|
12
|
+
/** Turns the listener off without unmounting the component. */
|
|
13
|
+
enabled?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Ignore keystrokes typed into inputs, textareas, and contenteditable.
|
|
16
|
+
* On by default: a shortcut that fires while someone is filling in a form is
|
|
17
|
+
* a bug, not a feature.
|
|
18
|
+
*/
|
|
19
|
+
ignoreWhenTyping?: boolean;
|
|
20
|
+
}
|
|
21
|
+
/** The Konami code, for the one time in your life you need it. */
|
|
22
|
+
export declare const KONAMI_CODE: readonly ["ArrowUp", "ArrowUp", "ArrowDown", "ArrowDown", "ArrowLeft", "ArrowRight", "ArrowLeft", "ArrowRight", "b", "a", "Enter"];
|
|
23
|
+
/**
|
|
24
|
+
* Fires `onMatch` when a sequence of `KeyboardEvent.key` values is typed in
|
|
25
|
+
* order.
|
|
26
|
+
*
|
|
27
|
+
* Useful for keyboard navigation chords (`g` then `i`), debug shortcuts, and
|
|
28
|
+
* easter eggs. Call it more than once to register more than one sequence.
|
|
29
|
+
*
|
|
30
|
+
* ```tsx
|
|
31
|
+
* useKeySequence(["g", "i"], () => router.push("/inbox"));
|
|
32
|
+
* useKeySequence(KONAMI_CODE, () => setPartyMode(true));
|
|
33
|
+
* ```
|
|
34
|
+
*
|
|
35
|
+
* A wrong key resets progress, except when that key is itself the start of the
|
|
36
|
+
* sequence, which begins a fresh attempt rather than costing one. That is what
|
|
37
|
+
* makes a doubled first key ("g g i") still work.
|
|
38
|
+
*/
|
|
39
|
+
export declare function useKeySequence(sequence: readonly string[], onMatch: () => void, options?: UseKeySequenceOptions): void;
|
package/dist/index.d.ts
CHANGED
|
@@ -17,6 +17,14 @@ export * from './components/atoms/Link/link-variants';
|
|
|
17
17
|
export * from './components/atoms/PasswordInput/PasswordInput';
|
|
18
18
|
export * from './components/atoms/Pill/Pill';
|
|
19
19
|
export * from './components/atoms/Pill/pill-variants';
|
|
20
|
+
export * from './components/atoms/Eyebrow/Eyebrow';
|
|
21
|
+
export * from './components/atoms/Eyebrow/eyebrow-variants';
|
|
22
|
+
export * from './components/atoms/InlineCode/InlineCode';
|
|
23
|
+
export * from './components/atoms/InlineCode/inline-code-variants';
|
|
24
|
+
export * from './components/atoms/LabeledDivider/LabeledDivider';
|
|
25
|
+
export * from './components/atoms/Stat/Stat';
|
|
26
|
+
export * from './components/atoms/Stat/stat-variants';
|
|
27
|
+
export * from './components/atoms/ThemeToggle/ThemeToggle';
|
|
20
28
|
export * from './components/atoms/Select/Select';
|
|
21
29
|
export * from './components/atoms/Select/select-variants';
|
|
22
30
|
export * from './components/atoms/Spinner/Spinner';
|
|
@@ -32,6 +40,10 @@ export * from './components/atoms/SegmentBar/SegmentBar';
|
|
|
32
40
|
export * from './components/molecules/Alert/Alert';
|
|
33
41
|
export * from './components/molecules/Alert/alert-variants';
|
|
34
42
|
export * from './components/molecules/Accordion/Accordion';
|
|
43
|
+
export * from './components/molecules/DescriptionList/DescriptionList';
|
|
44
|
+
export * from './components/molecules/DescriptionList/description-list-variants';
|
|
45
|
+
export * from './components/molecules/Pullquote/Pullquote';
|
|
46
|
+
export * from './components/molecules/Pullquote/pullquote-variants';
|
|
35
47
|
export * from './components/molecules/Breadcrumbs/Breadcrumbs';
|
|
36
48
|
export * from './components/molecules/Breadcrumbs/breadcrumb-variants';
|
|
37
49
|
export * from './components/molecules/CallToAction/CallToAction';
|
|
@@ -51,4 +63,5 @@ export * from './components/organisms/Navbar/navbar-variants';
|
|
|
51
63
|
export * from './components/organisms/Table/Table';
|
|
52
64
|
export * from './components/organisms/Table/table-variants';
|
|
53
65
|
export * from './hooks/useCountdown';
|
|
66
|
+
export * from './hooks/useKeySequence';
|
|
54
67
|
export * from './lib/utils';
|
package/dist/preflight.cjs.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use
|
|
1
|
+
"use strict";
|
package/dist/preflight.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
|