sherick-ui 2.1.1 → 2.3.0

package/dist/types/dev.d.cts

@@ -17,13 +17,13 @@ declare const elevation: {
 };
 declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
-    readonly control: "rounded-[1.25rem]";
+    readonly control: "rounded-[1rem]";
     readonly mark: "rounded-[0.625rem]";
-    readonly row: "rounded-[0.875rem]";
-    readonly prominent: "rounded-[1.5rem]";
-    readonly surface: "rounded-[1.75rem]";
-    readonly sheet: "rounded-[1.25rem]";
-    readonly expressive: "rounded-[2rem]";
+    readonly row: "rounded-[0.75rem]";
+    readonly prominent: "rounded-[1.25rem]";
+    readonly surface: "rounded-[1.5rem]";
+    readonly sheet: "rounded-[1rem]";
+    readonly expressive: "rounded-[1.75rem]";
     readonly pill: "rounded-full";
     readonly circle: "rounded-full";
 };
@@ -62,9 +62,11 @@ declare const state: {
         readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
     };
 };
+declare const stateLayerQuietComposite: string;
 declare const stateLayer: {
     readonly quiet: string;
     readonly tonal: string;
+    readonly tonalNeutral: string;
     readonly filled: string;
     readonly track: string;
     readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
@@ -84,13 +86,31 @@ declare const material: {
 };
 declare const mediaCanvas = "bg-sherick-media";
 declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
+declare const type: {
+    readonly control: {
+        readonly compact: "text-sm";
+        readonly normal: "text-[0.9375rem] leading-[1.375rem]";
+        readonly prominent: "text-lg";
+    };
+    readonly supporting: "text-[0.8125rem] leading-5";
+    readonly caption: "text-xs leading-4";
+    readonly title: "text-[0.9375rem] leading-[1.375rem] font-semibold";
+    readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
+    readonly numeric: "tabular-nums";
+};
 declare const density: {
-    readonly compact: "min-h-10 text-sm";
-    readonly normal: "min-h-12 text-[0.95rem]";
-    readonly prominent: "min-h-14 text-lg";
+    readonly compact: string;
+    readonly normal: string;
+    readonly prominent: string;
     readonly target: "min-h-11 min-w-11";
     readonly part: "min-h-11 min-w-9";
 };
+declare const iconSlot: {
+    readonly caption: "inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5";
+    readonly compact: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4";
+    readonly normal: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
+    readonly prominent: "inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6";
+};
 declare const stacking: {
     readonly float: "z-50";
     readonly notification: "z-[60]";
@@ -167,6 +187,8 @@ declare const tone: {
         success: string;
     };
 };
+declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
+declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
 declare const selectable: {
     readonly surface: string;
     readonly markSurface: string;
@@ -185,29 +207,23 @@ declare const recipeAlphas: {
             readonly hover: number;
             readonly press: number;
         };
+        readonly tonalNeutral: {
+            readonly hover: number;
+            readonly press: number;
+        };
         readonly filled: {
             readonly hover: number;
             readonly press: number;
         };
     };
     readonly tint: {
-        readonly soft: {
-            readonly primary: number;
-            readonly danger: number;
-            readonly warning: number;
-            readonly success: number;
-        };
-        readonly selected: {
-            readonly primary: number;
-            readonly danger: number;
-            readonly warning: number;
-            readonly success: number;
-        };
+        readonly neutralSoft: number;
         readonly neutralRest: number;
     };
     readonly field: {
         readonly quiet: number;
         readonly card: number;
+        readonly groove: number;
         readonly control: number;
         readonly hover: number;
         readonly engaged: number;
@@ -217,21 +233,19 @@ declare const recipeAlphas: {
     };
 };
 declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
+declare const fieldMessage: {
+    readonly description: string;
+    readonly error: string;
+};
 
 type MotionIntent = "feedback" | "tactile" | "arrive" | "orient" | "relocate" | "direct" | "disclose" | "presence" | "activity";
 /** Non-spatial feedback: hover, focus, field tone, a highlighted row, a filled surface.
  *  It never translates, scales or resizes; reduced motion simply drops the interpolation
  *  and the state still arrives. */
 declare const motionFeedback = "transition-[background-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
-/** A control answers a press immediately and settles on its release.
- *
- *  The recipe owns the *amplitude* of that answer as well as its timing, because how far a
- *  press travels is the system's physical character rather than a component's anatomy: a
- *  control whose outline is what the user sees compresses 4%, which is about two pixels at the
- *  size of the ink it moves. A control whose visible ink is far smaller than the target it is
- *  aimed at takes `motionInkPress` on that ink instead, so the target itself never moves. The
- *  interpolation and the compression are neutralised together under reduced motion. */
-declare const motionTactile = "transition-[background-color,color,box-shadow,transform,opacity] duration-release ease-release active:duration-press active:ease-press motion-safe:[&:not([data-disabled],:disabled,:has(>[role=combobox][data-disabled]))]:active:scale-[0.96] motion-reduce:transition-none";
+declare const motionTactile: string;
+declare const motionTactileWide: string;
+declare const motionTactileField: string;
 /** The spatial half of a compact press, applied to the *mark* rather than to the control.
  *
  *  A control whose visible ink is much smaller than the target it is aimed at — a dialog's close
@@ -241,7 +255,7 @@ declare const motionTactile = "transition-[background-color,color,box-shadow,tra
  *  release lands), so the mark takes the twelve percent and the target keeps its geometry. The
  *  target still owns the focus ring and the state layer, and still carries the tone and depth
  *  response, so the boundary a press happens inside never moves. */
-declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-press group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
+declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-tactile group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
 /** A meaningful subordinate part arrives. Spring is reserved for this intent: a mark is
  *  made by overshooting the position it lands in. It leaves without the overshoot, and
  *  reduced motion lands it in one step — which takes a *state-specific* override, because the
@@ -258,6 +272,9 @@ declare const motionOrient = "transition-transform duration-release ease-release
  *  settle together, and an interrupted move retargets from wherever it currently is
  *  because it is a transition and not a keyframe. */
 declare const motionRelocate = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-release ease-glide motion-reduce:transition-none";
+/** The same travel across a whole track — a tab indicator — on the longer travel timing, so a
+ *  movement of hundreds of pixels is followed rather than skipped. */
+declare const motionRelocateLong = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-travel ease-glide motion-reduce:transition-none";
 /** Direct manipulation: the pointer owns the geometry, so a positional transition would be
  *  lag. While the primitive reports a drag, position and size are removed from the
  *  transition list and only tone and engagement geometry remain; a keyboard or programmatic
@@ -282,7 +299,7 @@ declare const motionPresenceTooltip: string;
 declare const motionPresenceModal: string;
 /** The plane behind a surface that owns the viewport. Opacity only: a blur or a filter is
  *  never animated, so the plane can never animate the page behind it. */
-declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
+declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
 /** Continuous activity is a distinct intent, not an exception to interaction motion: it
  *  reports work rather than answering an event, and it has no entrance of its own. */
 declare const motionActivitySpin = "animate-spin motion-reduce:animate-none";
@@ -297,8 +314,12 @@ declare const motionActivityPulse = "animate-pulse motion-reduce:animate-none";
 declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir=rtl]_&]:[--sui-indeterminate-direction:-1] motion-reduce:animate-none";
 /** The state layer is a composited overlay, so its own opacity is the only thing that
  *  moves. Shared here because four interaction states across the library ride it. */
-declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-press active:before:ease-press group-active:before:duration-press group-active:before:ease-press motion-reduce:before:transition-none";
-declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none";
+/** A row in a collection moves its highlight rather than fading it: a highlight is where the reader
+ *  is, and arrowing through a list with a soft fade on every row leaves a smear of half-lit rows.
+ *  The row's layer therefore changes in one step, for the pointer and the keyboard alike. */
+declare const motionRowLayer = "before:transition-none";
+declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-tactile active:before:ease-press group-active:before:duration-tactile group-active:before:ease-press motion-reduce:before:transition-none";
+declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit motion-reduce:transition-none";
 declare const motionPresenceSheet: string;
 declare const motionPresenceToast: string;
 
@@ -309,5 +330,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, shape, stacking, state, stateLayer, text, tone };
+export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };

package/dist/types/dev.d.ts

@@ -17,13 +17,13 @@ declare const elevation: {
 };
 declare const recessedTop = "shadow-sherick-recessed-top";
 declare const shape: {
-    readonly control: "rounded-[1.25rem]";
+    readonly control: "rounded-[1rem]";
     readonly mark: "rounded-[0.625rem]";
-    readonly row: "rounded-[0.875rem]";
-    readonly prominent: "rounded-[1.5rem]";
-    readonly surface: "rounded-[1.75rem]";
-    readonly sheet: "rounded-[1.25rem]";
-    readonly expressive: "rounded-[2rem]";
+    readonly row: "rounded-[0.75rem]";
+    readonly prominent: "rounded-[1.25rem]";
+    readonly surface: "rounded-[1.5rem]";
+    readonly sheet: "rounded-[1rem]";
+    readonly expressive: "rounded-[1.75rem]";
     readonly pill: "rounded-full";
     readonly circle: "rounded-full";
 };
@@ -62,9 +62,11 @@ declare const state: {
         readonly invalidFocusWithin: "[&&]:data-[invalid]:focus-within:bg-sherick-danger/[0.13]";
     };
 };
+declare const stateLayerQuietComposite: string;
 declare const stateLayer: {
     readonly quiet: string;
     readonly tonal: string;
+    readonly tonalNeutral: string;
     readonly filled: string;
     readonly track: string;
     readonly activeRow: "data-[highlighted]:before:opacity-[0.05]";
@@ -84,13 +86,31 @@ declare const material: {
 };
 declare const mediaCanvas = "bg-sherick-media";
 declare const matteInset = "bg-sherick-surface-high/[0.35] text-sherick-ink";
+declare const type: {
+    readonly control: {
+        readonly compact: "text-sm";
+        readonly normal: "text-[0.9375rem] leading-[1.375rem]";
+        readonly prominent: "text-lg";
+    };
+    readonly supporting: "text-[0.8125rem] leading-5";
+    readonly caption: "text-xs leading-4";
+    readonly title: "text-[0.9375rem] leading-[1.375rem] font-semibold";
+    readonly heading: "text-xl leading-7 font-semibold tracking-[-0.02em]";
+    readonly numeric: "tabular-nums";
+};
 declare const density: {
-    readonly compact: "min-h-10 text-sm";
-    readonly normal: "min-h-12 text-[0.95rem]";
-    readonly prominent: "min-h-14 text-lg";
+    readonly compact: string;
+    readonly normal: string;
+    readonly prominent: string;
     readonly target: "min-h-11 min-w-11";
     readonly part: "min-h-11 min-w-9";
 };
+declare const iconSlot: {
+    readonly caption: "inline-flex size-3.5 shrink-0 items-center justify-center [&>svg]:size-3.5";
+    readonly compact: "inline-flex size-4 shrink-0 items-center justify-center [&>svg]:size-4";
+    readonly normal: "inline-flex size-5 shrink-0 items-center justify-center [&>svg]:size-5";
+    readonly prominent: "inline-flex size-6 shrink-0 items-center justify-center [&>svg]:size-6";
+};
 declare const stacking: {
     readonly float: "z-50";
     readonly notification: "z-[60]";
@@ -167,6 +187,8 @@ declare const tone: {
         success: string;
     };
 };
+declare const currentDestination = "bg-sherick-primary-soft text-sherick-ink font-medium";
+declare const selectableRowSurface = "has-[[data-checked]]:bg-sherick-primary-selected has-[[data-checked]]:text-sherick-ink has-[[data-checked]]:shadow-sherick-control";
 declare const selectable: {
     readonly surface: string;
     readonly markSurface: string;
@@ -185,29 +207,23 @@ declare const recipeAlphas: {
             readonly hover: number;
             readonly press: number;
         };
+        readonly tonalNeutral: {
+            readonly hover: number;
+            readonly press: number;
+        };
         readonly filled: {
             readonly hover: number;
             readonly press: number;
         };
     };
     readonly tint: {
-        readonly soft: {
-            readonly primary: number;
-            readonly danger: number;
-            readonly warning: number;
-            readonly success: number;
-        };
-        readonly selected: {
-            readonly primary: number;
-            readonly danger: number;
-            readonly warning: number;
-            readonly success: number;
-        };
+        readonly neutralSoft: number;
         readonly neutralRest: number;
     };
     readonly field: {
         readonly quiet: number;
         readonly card: number;
+        readonly groove: number;
         readonly control: number;
         readonly hover: number;
         readonly engaged: number;
@@ -217,21 +233,19 @@ declare const recipeAlphas: {
     };
 };
 declare const fieldLayout = "flex min-w-0 w-full flex-col [overflow-wrap:anywhere]";
+declare const fieldMessage: {
+    readonly description: string;
+    readonly error: string;
+};
 
 type MotionIntent = "feedback" | "tactile" | "arrive" | "orient" | "relocate" | "direct" | "disclose" | "presence" | "activity";
 /** Non-spatial feedback: hover, focus, field tone, a highlighted row, a filled surface.
  *  It never translates, scales or resizes; reduced motion simply drops the interpolation
  *  and the state still arrives. */
 declare const motionFeedback = "transition-[background-color,color,box-shadow,opacity] duration-press ease-press motion-reduce:transition-none";
-/** A control answers a press immediately and settles on its release.
- *
- *  The recipe owns the *amplitude* of that answer as well as its timing, because how far a
- *  press travels is the system's physical character rather than a component's anatomy: a
- *  control whose outline is what the user sees compresses 4%, which is about two pixels at the
- *  size of the ink it moves. A control whose visible ink is far smaller than the target it is
- *  aimed at takes `motionInkPress` on that ink instead, so the target itself never moves. The
- *  interpolation and the compression are neutralised together under reduced motion. */
-declare const motionTactile = "transition-[background-color,color,box-shadow,transform,opacity] duration-release ease-release active:duration-press active:ease-press motion-safe:[&:not([data-disabled],:disabled,:has(>[role=combobox][data-disabled]))]:active:scale-[0.96] motion-reduce:transition-none";
+declare const motionTactile: string;
+declare const motionTactileWide: string;
+declare const motionTactileField: string;
 /** The spatial half of a compact press, applied to the *mark* rather than to the control.
  *
  *  A control whose visible ink is much smaller than the target it is aimed at — a dialog's close
@@ -241,7 +255,7 @@ declare const motionTactile = "transition-[background-color,color,box-shadow,tra
  *  release lands), so the mark takes the twelve percent and the target keeps its geometry. The
  *  target still owns the focus ring and the state layer, and still carries the tone and depth
  *  response, so the boundary a press happens inside never moves. */
-declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-press group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
+declare const motionInkPress = "transition-transform duration-release ease-release group-active:duration-tactile group-active:ease-press group-active:scale-[0.88] motion-reduce:transition-none motion-reduce:group-active:scale-100";
 /** A meaningful subordinate part arrives. Spring is reserved for this intent: a mark is
  *  made by overshooting the position it lands in. It leaves without the overshoot, and
  *  reduced motion lands it in one step — which takes a *state-specific* override, because the
@@ -258,6 +272,9 @@ declare const motionOrient = "transition-transform duration-release ease-release
  *  settle together, and an interrupted move retargets from wherever it currently is
  *  because it is a transition and not a keyframe. */
 declare const motionRelocate = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-release ease-glide motion-reduce:transition-none";
+/** The same travel across a whole track — a tab indicator — on the longer travel timing, so a
+ *  movement of hundreds of pixels is followed rather than skipped. */
+declare const motionRelocateLong = "transition-[left,inset-inline-start,top,width,height,transform,background-color,color,box-shadow,opacity] duration-travel ease-glide motion-reduce:transition-none";
 /** Direct manipulation: the pointer owns the geometry, so a positional transition would be
  *  lag. While the primitive reports a drag, position and size are removed from the
  *  transition list and only tone and engagement geometry remain; a keyboard or programmatic
@@ -282,7 +299,7 @@ declare const motionPresenceTooltip: string;
 declare const motionPresenceModal: string;
 /** The plane behind a surface that owns the viewport. Opacity only: a blur or a filter is
  *  never animated, so the plane can never animate the page behind it. */
-declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
+declare const motionPresenceScrim = "transition-opacity duration-overlay ease-release data-[starting-style]:opacity-0 data-[ending-style]:opacity-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit";
 /** Continuous activity is a distinct intent, not an exception to interaction motion: it
  *  reports work rather than answering an event, and it has no entrance of its own. */
 declare const motionActivitySpin = "animate-spin motion-reduce:animate-none";
@@ -297,8 +314,12 @@ declare const motionActivityPulse = "animate-pulse motion-reduce:animate-none";
 declare const motionActivityIndeterminate = "animate-sherick-indeterminate [[dir=rtl]_&]:[--sui-indeterminate-direction:-1] motion-reduce:animate-none";
 /** The state layer is a composited overlay, so its own opacity is the only thing that
  *  moves. Shared here because four interaction states across the library ride it. */
-declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-press active:before:ease-press group-active:before:duration-press group-active:before:ease-press motion-reduce:before:transition-none";
-declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 motion-reduce:transition-none";
+/** A row in a collection moves its highlight rather than fading it: a highlight is where the reader
+ *  is, and arrowing through a list with a soft fade on every row leaves a smear of half-lit rows.
+ *  The row's layer therefore changes in one step, for the pointer and the keyboard alike. */
+declare const motionRowLayer = "before:transition-none";
+declare const motionStateLayer = "before:transition-opacity before:duration-release before:ease-release active:before:duration-tactile active:before:ease-press group-active:before:duration-tactile group-active:before:ease-press motion-reduce:before:transition-none";
+declare const motionDisclose = "transition-[height] duration-release ease-release data-[starting-style]:h-0 data-[ending-style]:h-0 data-[ending-style]:duration-overlay-exit data-[ending-style]:ease-exit motion-reduce:transition-none";
 declare const motionPresenceSheet: string;
 declare const motionPresenceToast: string;
 
@@ -309,5 +330,5 @@ declare const motionPresenceToast: string;
  */
 declare const cn: (...inputs: ClassValue[]) => string;
 
-export { cn, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionStateLayer, motionTactile, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, shape, stacking, state, stateLayer, text, tone };
+export { cn, currentDestination, density, detail, disclosure, edge, edgeTone, elevation, fieldLayout, fieldMessage, focusRing, focusRingDrag, focusRingHeld, focusRingInset, focusRingWithin, groupFocusRing, hitArea, iconSlot, list, material, matteInset, mediaCanvas, motionActivityIndeterminate, motionActivityPulse, motionActivitySpin, motionArrive, motionDirect, motionDisclose, motionFeedback, motionInkPress, motionOrient, motionPresenceAnchored, motionPresenceModal, motionPresenceScrim, motionPresenceSheet, motionPresenceToast, motionPresenceTooltip, motionRelocate, motionRelocateLong, motionRowLayer, motionStateLayer, motionTactile, motionTactileField, motionTactileWide, overlay, parentFocusRingInset, recessedTop, recipeAlphas, selectable, selectableRowSurface, shape, stacking, state, stateLayer, stateLayerQuietComposite, text, tone, type };
 export type { MotionIntent };

package/dist/types/index.d.cts

@@ -1140,6 +1140,8 @@ interface RadioGroupOption {
 }
 interface RadioGroupProps extends Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> {
     options: RadioGroupOption[];
+    /** Gives each choice its own selectable surface. The default keeps the compact, unfilled rows. */
+    appearance?: "default" | "surface";
     /** The group's own label. Naming the group is the group's job, not a field's: an
      *  enclosing `Field` names one control, while every option here is its own control. */
     label?: ReactNode;
@@ -1346,11 +1348,21 @@ type ToggleGroupComponent = ForwardRefExoticComponent<ToggleGroupProps & RefAttr
 declare const ToggleGroup: ToggleGroupComponent;
 
 interface TableProps {
-    headers: string[];
+    headers: Array<string | TableColumn>;
     rows: ReactNode[][];
+    /** Classes for the outer scrollable surface. */
     className?: string;
+    /** Classes for the native table element. */
+    tableClassName?: string;
 }
-declare const Table: ({ headers, rows, className, }: TableProps) => React__default.JSX.Element;
+interface TableColumn {
+    /** Stable identity for this column, shared by its header and body cells. */
+    id: string;
+    label: string;
+    /** Classes applied to this column's header and body cells. */
+    className?: string;
+}
+declare const Table: ({ headers, rows, className, tableClassName, }: TableProps) => React__default.JSX.Element;
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: ReactNode;
@@ -1642,4 +1654,4 @@ interface DirectionProviderProps {
 declare const DirectionProvider: ({ direction, children }: DirectionProviderProps) => React__default.JSX.Element;
 
 export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
-export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };
+export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };

package/dist/types/index.d.ts

@@ -1140,6 +1140,8 @@ interface RadioGroupOption {
 }
 interface RadioGroupProps extends Omit<ComponentProps<"div">, "onChange" | "defaultValue" | "children"> {
     options: RadioGroupOption[];
+    /** Gives each choice its own selectable surface. The default keeps the compact, unfilled rows. */
+    appearance?: "default" | "surface";
     /** The group's own label. Naming the group is the group's job, not a field's: an
      *  enclosing `Field` names one control, while every option here is its own control. */
     label?: ReactNode;
@@ -1346,11 +1348,21 @@ type ToggleGroupComponent = ForwardRefExoticComponent<ToggleGroupProps & RefAttr
 declare const ToggleGroup: ToggleGroupComponent;
 
 interface TableProps {
-    headers: string[];
+    headers: Array<string | TableColumn>;
     rows: ReactNode[][];
+    /** Classes for the outer scrollable surface. */
     className?: string;
+    /** Classes for the native table element. */
+    tableClassName?: string;
 }
-declare const Table: ({ headers, rows, className, }: TableProps) => React__default.JSX.Element;
+interface TableColumn {
+    /** Stable identity for this column, shared by its header and body cells. */
+    id: string;
+    label: string;
+    /** Classes applied to this column's header and body cells. */
+    className?: string;
+}
+declare const Table: ({ headers, rows, className, tableClassName, }: TableProps) => React__default.JSX.Element;
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: ReactNode;
@@ -1642,4 +1654,4 @@ interface DirectionProviderProps {
 declare const DirectionProvider: ({ direction, children }: DirectionProviderProps) => React__default.JSX.Element;
 
 export { Accordion, Alert, AlertDialog, Avatar, Badge, Breadcrumb, Button, Calendar, Card, Checkbox, Chip, ChipGroup, Collapsible, Combobox, Command, CommandPalette, DatePicker, DateRangePicker, Dialog, DirectionProvider, Divider, Drawer, Field, FileUpload, IconButton, Input, Media, Menu, NavGroup, NavItem, NumberField, Pagination, Popover, Progress, RadioGroup, Search, SegmentedControl, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, Textarea, ToastProvider, ToastViewport, ToggleGroup, Tooltip, TreeView, createToastManager, useToast };
-export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };
+export type { AccordionHeadingLevel, AccordionItemProps, AccordionPanelProps, AccordionProps, AccordionTriggerProps, AlertDialogProps, AlertProps, AvatarProps, BadgeProps, BreadcrumbItem, BreadcrumbProps, ButtonAppearance, ButtonProps, ButtonSize, CalendarDate, CalendarLabels, CalendarProps, CardProps, CheckboxProps, ChipGroupProps, ChipProps, CollapsiblePanelProps, CollapsibleProps, CollapsibleTriggerProps, ComboboxOption, ComboboxProps, CommandItem, CommandPaletteProps, CommandProps, DatePickerProps, DateRange, DateRangePickerProps, DialogContentProps, DialogDescriptionProps, DialogFooterProps, DialogHeaderProps, DialogProps, DirectionProviderProps, DividerProps, DividerWeight, DrawerContentProps, DrawerDescriptionProps, DrawerFooterProps, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerTriggerProps, FieldProps, FileRejection, FileUploadProps, IconButtonAppearance, IconButtonProps, InputProps, MediaImageProps, MediaVideoProps, MenuContentProps, MenuItemProps, MenuProps, MenuSeparatorProps, MenuTriggerProps, NavGroupHeadingLevel, NavGroupItem, NavGroupProps, NavItemProps, NumberFieldProps, OverlayAlign, OverlaySide, PaginationProps, PopoverContentProps, PopoverProps, PopoverTriggerProps, ProgressProps, RadioGroupOption, RadioGroupProps, SearchProps, SegmentedControlOption, SegmentedControlProps, SelectOption, SelectProps, SkeletonProps, SliderProps, SpinnerProps, StepperItem, StepperProps, SwitchProps, Tab, TableColumn, TableProps, TabsProps, TextareaProps, ToastActionOptions, ToastManager, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProviderProps, ToastType, ToastUpdateOptions, ToastViewportProps, ToggleGroupItemProps, ToggleGroupProps, TooltipProps, TreeViewItem, TreeViewProps, Variant };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sherick-ui",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "A reusable React component library inspired by Material 3 Expressive.",
   "repository": {
     "type": "git",