@blakesteve/roster 4.10.0 → 4.12.0

package/dist/components/molecules/RadioGroup/radio-group-variants.d.ts

@@ -0,0 +1,99 @@
+/**
+ * The radio control itself.
+ *
+ * Deliberately the same shape as `checkboxVariants`: the same three sizes, the
+ * same eight color schemes, the same `--roster-control-border` hairline when
+ * unchecked and the same `-ink` token on the mark. A radio and a checkbox on
+ * one form should differ in what they mean, not in how heavy their edges look.
+ *
+ * Two things differ. `rounded-full`, and the mark is a dot rather than a
+ * glyph — it reads `currentColor`, so the `-ink` token that guarantees
+ * contrast on each fill does the work here too. There is also no `soft`
+ * variant: `Checkbox` carries eight more compound rows for one, and
+ * `CheckboxGroup` surfaces only `colorScheme` to its consumers, so this
+ * follows the group rather than the atom.
+ *
+ * The 44x44 target is built in rather than left to the consumer. Same
+ * pseudo-element technique as `Checkbox`, for the same reason and with the
+ * same two consequences: `before:` generates no layout box, so the circle
+ * keeps its exact dimensions, and the target overhangs the box on all four
+ * sides, which means an `overflow: hidden` ancestor clips it and a tightly
+ * spaced column overlaps it. The size is stated as `size-11` rather than as a
+ * negative inset per size, because `inset` on an absolutely positioned
+ * pseudo-element resolves against the PADDING box: an inset measured from each
+ * circle's outer width lands 2px short at every size, once for each 1px of
+ * border, and looks correct in the source while measuring 42.
+ */
+export declare const radioVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    checked?: boolean | null | undefined;
+    colorScheme?: "primary" | "orange" | "teal" | "purple" | "amber" | "success" | "error" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The dot inside the circle.
+ *
+ * `bg-current` rather than a color of its own, so it inherits the `-ink` token
+ * the control resolved for whichever fill it is sitting on. Sized to roughly
+ * 40% of the circle at every size — 6/16, 8/20, 10/24 — which is where a radio
+ * reads as a radio rather than as a filled dot or a faint speck.
+ */
+export declare const radioDotVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * One option.
+ *
+ * The rule the spacing rests on: **an option's box contains its own target.** A
+ * 44px target that can not reach past the option it belongs to can not reach
+ * into the one beside it either, at any gap, including zero. That is what lets
+ * the gaps be small.
+ *
+ * One layout covers every case, and the arithmetic is why. The radio is
+ * `self-start`, so it sits on the label's first line, and it needs no nudge to
+ * land there: the type scale and the size scale agree at every step — 16px
+ * line-height against a 16px circle at `sm`, 20 against 20 at `md`, 24 against
+ * 24 at `lg` — so the top of the circle and the top of the first line are the
+ * same edge. The padding is then whatever closes the gap to 44,
+ * `(44 - line-height) / 2`, which puts the radio's center at exactly 22px from
+ * the row's top at every size. The target spans the row and nothing else.
+ *
+ * That single rule holds for a one-line option, an option whose label wraps,
+ * and an option with a description, which is why there is no longer a branch
+ * for the last of those. Two earlier versions had one and both were wrong in a
+ * case they did not cover: a symmetric padding let a described row's target
+ * overhang its own top edge by 2 to 6px, and centering a plain row floated the
+ * radio into the middle of a two-line label — correct for one line, visibly
+ * wrong for two, on text a consumer supplies and can not control the width of.
+ *
+ * `horizontal` applies the same rule across instead of down, where the binding
+ * constraint is width rather than height: two radios less than 44px apart
+ * overlap however tall their boxes are. `min-w-11` guarantees it even for a
+ * one-character label.
+ */
+export declare const radioOptionVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/**
+ * The options' container.
+ *
+ * `vertical` is the default because a radio group holds one answer, and options
+ * read as alternatives to each other when they are stacked. `horizontal` is for
+ * the short scannable set, two or three one-word answers that would otherwise
+ * spend three rows of a wide form, and it wraps rather than overflowing:
+ * a row of options that runs off the side of a phone is worse than the column
+ * it replaced.
+ *
+ * There is no `columns` prop. `CheckboxGroup` has one because it is the
+ * long-list control and a filter list of twenty wants the width; a radio group
+ * with that many options wants a `Select`.
+ *
+ * The gaps are small, and can be, because each option already contains its own
+ * target and its own padding. Across, they are larger than down: a horizontal
+ * gap separates two whole options rather than two stacked rows, and at the
+ * vertical scale two options sat 0 to 4px apart and read as one control.
+ */
+export declare const radioGroupOptionsVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/data-table.cjs.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Table-CoQRmik0.cjs"),p=require("react"),r=require("@tanstack/react-table"),o=require("./utils-C7BfXGiM.cjs"),R=r.tableFeatures({rowSortingFeature:r.rowSortingFeature,rowPaginationFeature:r.rowPaginationFeature,sortedRowModel:r.createSortedRowModel(),paginatedRowModel:r.createPaginatedRowModel(),sortFns:r.sortFns});function f({columns:a,data:i,className:l,tableClassName:x,paginationClassName:c,variant:u="default",size:g="md",hoverable:m=!1}){const[d,j]=p.useState([]),t=r.useTable({features:R,data:i,columns:a,onSortingChange:j,state:{sorting:d},initialState:{pagination:{pageIndex:0,pageSize:10}}});return e.jsxRuntimeExports.jsxs("div",{className:o.cn("rst:font-ui rst:flex rst:flex-col rst: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(n=>e.jsxRuntimeExports.jsx(e.TableRow,{children:n.headers.map(s=>e.jsxRuntimeExports.jsx(e.TableHead,{children:s.isPlaceholder?null:e.jsxRuntimeExports.jsxs("div",{className:o.cn("rst:flex rst:items-center rst:gap-2 rst:transition-opacity",s.column.getCanSort()&&"rst:cursor-pointer rst:select-none rst:opacity-80 rst:hover:opacity-100"),onClick:s.column.getToggleSortingHandler(),children:[r.flexRender(s.column.columnDef.header,s.getContext()),s.column.getCanSort()&&e.jsxRuntimeExports.jsx("span",{className:"rst:w-4 rst:flex rst:justify-center rst: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))},n.id))}),e.jsxRuntimeExports.jsx(e.TableBody,{children:t.getRowModel().rows?.length?t.getRowModel().rows.map(n=>e.jsxRuntimeExports.jsx(e.TableRow,{children:n.getAllCells().map(s=>e.jsxRuntimeExports.jsx(e.TableCell,{children:r.flexRender(s.column.columnDef.cell,s.getContext())},s.id))},n.id)):e.jsxRuntimeExports.jsx(e.TableRow,{children:e.jsxRuntimeExports.jsx(e.TableCell,{colSpan:a.length,className:"rst:h-24 rst:text-center rst:text-gray-500 rst:dark:text-gray-400 rst:italic",children:"No results found."})})})]}),e.jsxRuntimeExports.jsxs("div",{className:o.cn("rst:flex rst:flex-col rst:sm:flex-row rst:items-center rst:justify-between rst:gap-4 rst:px-2",c),children:[e.jsxRuntimeExports.jsxs("div",{className:"rst:text-sm rst:font-medium rst:text-gray-500 rst:dark:text-gray-400",children:["Page"," ",e.jsxRuntimeExports.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:t.state.pagination.pageIndex+1})," ","of"," ",e.jsxRuntimeExports.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:t.getPageCount()})]}),e.jsxRuntimeExports.jsxs("div",{className:"rst:flex rst:items-center rst: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;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./Table-pfb9MJtO.cjs"),p=require("react"),r=require("@tanstack/react-table"),o=require("./utils-B4q42wBM.cjs"),R=r.tableFeatures({rowSortingFeature:r.rowSortingFeature,rowPaginationFeature:r.rowPaginationFeature,sortedRowModel:r.createSortedRowModel(),paginatedRowModel:r.createPaginatedRowModel(),sortFns:r.sortFns});function f({columns:a,data:i,className:l,tableClassName:x,paginationClassName:c,variant:u="default",size:g="md",hoverable:m=!1}){const[d,j]=p.useState([]),t=r.useTable({features:R,data:i,columns:a,onSortingChange:j,state:{sorting:d},initialState:{pagination:{pageIndex:0,pageSize:10}}});return e.jsxRuntimeExports.jsxs("div",{className:o.cn("rst:font-ui rst:flex rst:flex-col rst: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(n=>e.jsxRuntimeExports.jsx(e.TableRow,{children:n.headers.map(s=>e.jsxRuntimeExports.jsx(e.TableHead,{children:s.isPlaceholder?null:e.jsxRuntimeExports.jsxs("div",{className:o.cn("rst:flex rst:items-center rst:gap-2 rst:transition-opacity",s.column.getCanSort()&&"rst:cursor-pointer rst:select-none rst:opacity-80 rst:hover:opacity-100"),onClick:s.column.getToggleSortingHandler(),children:[r.flexRender(s.column.columnDef.header,s.getContext()),s.column.getCanSort()&&e.jsxRuntimeExports.jsx("span",{className:"rst:w-4 rst:flex rst:justify-center rst: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))},n.id))}),e.jsxRuntimeExports.jsx(e.TableBody,{children:t.getRowModel().rows?.length?t.getRowModel().rows.map(n=>e.jsxRuntimeExports.jsx(e.TableRow,{children:n.getAllCells().map(s=>e.jsxRuntimeExports.jsx(e.TableCell,{children:r.flexRender(s.column.columnDef.cell,s.getContext())},s.id))},n.id)):e.jsxRuntimeExports.jsx(e.TableRow,{children:e.jsxRuntimeExports.jsx(e.TableCell,{colSpan:a.length,className:"rst:h-24 rst:text-center rst:text-gray-500 rst:dark:text-gray-400 rst:italic",children:"No results found."})})})]}),e.jsxRuntimeExports.jsxs("div",{className:o.cn("rst:flex rst:flex-col rst:sm:flex-row rst:items-center rst:justify-between rst:gap-4 rst:px-2",c),children:[e.jsxRuntimeExports.jsxs("div",{className:"rst:text-sm rst:font-medium rst:text-gray-500 rst:dark:text-gray-400",children:["Page"," ",e.jsxRuntimeExports.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:t.state.pagination.pageIndex+1})," ","of"," ",e.jsxRuntimeExports.jsx("strong",{className:"rst:text-gray-900 rst:dark:text-gray-100",children:t.getPageCount()})]}),e.jsxRuntimeExports.jsxs("div",{className:"rst:flex rst:items-center rst: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

@@ -1,8 +1,8 @@
 "use client";
-import { j as e, T as C, a as S, b as l, c as P, F as a, f as w, d as y, e as v, g as c, B as n, h as N, i as R, k as T, l as k } from "./Table-C1JbdA7q.js";
+import { j as e, T as C, a as S, b as l, c as P, F as a, f as w, d as y, e as v, g as c, B as n, h as N, i as R, k as T, l as k } from "./Table-D-C0ivz2.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";
-import { c as o } from "./utils-hNxf9HpA.js";
+import { c as o } from "./utils-koxKGlVV.js";
 const B = I({
   rowSortingFeature: z,
   rowPaginationFeature: M,

package/dist/index.d.ts

@@ -54,6 +54,8 @@ export * from './components/molecules/Pullquote/Pullquote';
 export * from './components/molecules/Pullquote/pullquote-variants';
 export * from './components/molecules/CheckboxGroup/CheckboxGroup';
 export * from './components/molecules/CheckboxGroup/checkbox-group-variants';
+export * from './components/molecules/RadioGroup/RadioGroup';
+export * from './components/molecules/RadioGroup/radio-group-variants';
 export * from './components/molecules/Breadcrumbs/Breadcrumbs';
 export * from './components/molecules/Breadcrumbs/breadcrumb-variants';
 export * from './components/molecules/CallToAction/CallToAction';

package/dist/meta.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.10.0",
-  "tests": 1322,
-  "testFiles": 106
+  "version": "4.12.0",
+  "tests": 1420,
+  "testFiles": 111
 }