@pearpages/pulp-react 0.2.2 → 0.3.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-export { Button, ButtonProps, ButtonSize, ButtonVariant } from './button.js';
+export { Button, ButtonProps, ButtonSize, ButtonTone, ButtonVariant } from './button.js';
 export { TextField, TextFieldProps, TextFieldSize } from './text-field.js';
 export { Card, CardPadding, CardProps, CardVariant } from './card.js';
 export { Tabs, TabsActivation, TabsOrientation, TabsProps } from './tabs.js';
@@ -19,7 +19,7 @@ export { Select, SelectProps, SelectSize } from './select.js';
 export { Spinner, SpinnerProps, SpinnerSize, SpinnerTone } from './spinner.js';
 export { Badge, BadgeProps, BadgeSize, BadgeTone, BadgeVariant } from './badge.js';
 export { Alert, AlertLive, AlertProps, AlertTone } from './alert.js';
-export { ToastContextValue, ToastItem, ToastOptions, ToastPlacement, ToastProvider, ToastProviderProps, useToast } from './toast.js';
+export { ToastContextValue, ToastFunction, ToastItem, ToastOptions, ToastPlacement, ToastProvider, ToastProviderProps, ToastUndoOptions, useToast } from './toast.js';
 export { Progress, ProgressProps, ProgressSize, ProgressTone } from './progress.js';
 export { Skeleton, SkeletonProps, SkeletonShape, SkeletonSize } from './skeleton.js';
 export { Tooltip, TooltipPlacement, TooltipProps } from './tooltip.js';
@@ -36,6 +36,12 @@ export { Slider, SliderOrientation, SliderProps, SliderValue } from './slider.js
 export { Table, TableAlign, TableDensity, TableProps, TableSelectionMode, TableSort, TableSortDirection } from './table.js';
 export { Pagination, PaginationItem, PaginationProps, PaginationSize, paginationRange } from './pagination.js';
 export { Sheet, SheetContentProps, SheetPlacement, SheetProps } from './sheet.js';
+export { Divider, DividerOrientation, DividerProps, DividerSpacing } from './divider.js';
+export { Link, LinkProps, LinkTone, LinkUnderline } from './link.js';
+export { Avatar, AvatarProps } from './avatar.js';
+export { Chip, ChipProps } from './chip.js';
+export { SegmentedControl, SegmentedControlProps } from './segmented-control.js';
+export { EmptyState, EmptyStateProps } from './empty-state.js';
 import 'react';
 import '@pearpages/modals';
 import './ToggleField-C-qKSgHh.js';

package/dist/index.js

@@ -1,50 +1,56 @@
-export { Text } from './chunk-LKWZZIRZ.js';
-export { Tabs } from './chunk-2IYYES7V.js';
-export { Card } from './chunk-LA3YBXCR.js';
-export { TextField } from './chunk-IFIQLIA3.js';
-export { Checkbox } from './chunk-Z6SS4G4V.js';
+"use client";export { Tabs } from './chunk-2IYYES7V.js';
+export { Card } from './chunk-HPQ462R5.js';
+export { TextField } from './chunk-S632WN4W.js';
 export { Inline } from './chunk-VIGD7KHC.js';
-export { Stack } from './chunk-2E2ESMS2.js';
-export { Heading } from './chunk-F3S5BHX2.js';
-export { ToastProvider, useToast } from './chunk-U3N3G2UA.js';
-export { Alert } from './chunk-N4C3NQIN.js';
-export { Badge } from './chunk-737GQSOB.js';
-export { Select } from './chunk-OFKSU77Y.js';
-export { Textarea } from './chunk-5PYLJQJX.js';
-export { Radio, RadioGroup } from './chunk-N6E2E2OY.js';
-export { Switch } from './chunk-DVZ46GQN.js';
-import './chunk-6BIEW4WJ.js';
-export { Field, useField } from './chunk-M5VL22MY.js';
-export { Listbox } from './chunk-WJDDKNE7.js';
-export { Combobox } from './chunk-NOUUOH4R.js';
-export { Menu } from './chunk-2NSQPN7S.js';
+export { Badge } from './chunk-KSLKNWWM.js';
+export { Select } from './chunk-ZEVQQQOA.js';
+export { Textarea } from './chunk-VS2HPJIX.js';
+export { Radio, RadioGroup } from './chunk-2NVC3C7K.js';
+export { Switch } from './chunk-CLE2QGCU.js';
+export { Checkbox } from './chunk-UMK4D234.js';
+import './chunk-Q6SYKNZ5.js';
+export { Field, useField } from './chunk-SXMORGSG.js';
+export { Menu } from './chunk-AZAI4OVR.js';
 export { Accordion } from './chunk-W2UUZ2DC.js';
 import './chunk-I5OZ63W7.js';
-export { Popover } from './chunk-OFFFRIJG.js';
+export { Popover } from './chunk-SDIK6VSC.js';
 import './chunk-NAYFLTK6.js';
-export { Tooltip } from './chunk-XWPXW46D.js';
+export { Tooltip } from './chunk-GWTHITZO.js';
 import './chunk-U6QRAD73.js';
 export { Skeleton } from './chunk-BR2EH4TK.js';
 export { Progress } from './chunk-YK2OOM56.js';
-export { Sheet } from './chunk-TJJBCS3N.js';
-export { Dialog, DialogSystem } from './chunk-55QUKGK2.js';
-export { Pagination, paginationRange } from './chunk-VQN5DQP6.js';
-export { IconButton } from './chunk-MF66ICX6.js';
-export { Button } from './chunk-5TTYVQ6Q.js';
-export { Spinner } from './chunk-ZL5MMRLG.js';
-import './chunk-ZVDN3GRI.js';
+export { ToastProvider, useToast } from './chunk-FFCEY76B.js';
+export { Alert } from './chunk-A7TMFEQ2.js';
+export { Pagination, paginationRange } from './chunk-HKNIEQ2V.js';
+export { IconButton } from './chunk-56RSH7GQ.js';
+export { Button } from './chunk-DE67ECD7.js';
 export { Table } from './chunk-XGWFTFGR.js';
-import './chunk-CZBCGLEM.js';
-export { VisuallyHidden } from './chunk-IB5UUE3S.js';
 export { Slider } from './chunk-YBECKOVP.js';
 export { DatePicker } from './chunk-Y4YVAHD2.js';
 export { Calendar } from './chunk-W6HEBHA7.js';
 import './chunk-JOGIN4SS.js';
-export { Picker } from './chunk-BAPNIZDV.js';
-import './chunk-EDTA65L5.js';
+export { Picker } from './chunk-F2YI5N4L.js';
+export { Listbox } from './chunk-WJDDKNE7.js';
+import './chunk-CZBCGLEM.js';
+export { Combobox } from './chunk-WDIFWMKE.js';
+export { Spinner } from './chunk-ZL5MMRLG.js';
+export { VisuallyHidden } from './chunk-IB5UUE3S.js';
 import './chunk-IRNTXAA7.js';
 import './chunk-DGIXNUNI.js';
+import './chunk-EDTA65L5.js';
 export { Icon } from './chunk-O5LII5XP.js';
+export { EmptyState } from './chunk-5TYCIBLW.js';
+export { Stack } from './chunk-2E2ESMS2.js';
+export { Heading } from './chunk-F3S5BHX2.js';
+export { Text } from './chunk-LKWZZIRZ.js';
+export { SegmentedControl } from './chunk-Y7KC2FDU.js';
+export { Chip } from './chunk-OKA2PLDV.js';
+export { Avatar } from './chunk-QXHSA4QD.js';
+export { Link } from './chunk-HDC2IQV2.js';
+import './chunk-QJG5ILK5.js';
+export { Divider } from './chunk-QID6YYFF.js';
+export { Sheet } from './chunk-7O6FTCZL.js';
+export { Dialog, DialogSystem } from './chunk-55QUKGK2.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/link.css

@@ -0,0 +1,35 @@
+/* src/link/Link.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .Link_link {
+    border-radius: var(--link-radius);
+    color: var(--link-tone-action);
+    font-weight: var(--link-weight);
+    text-decoration-line: underline;
+    text-decoration-thickness: from-font;
+    text-underline-offset: 0.2em;
+    cursor: pointer;
+    transition: color var(--link-duration) var(--motion-easing-standard);
+    &[data-tone=default] {
+      color: var(--link-tone-default);
+    }
+    &[data-tone=muted] {
+      color: var(--link-tone-muted);
+    }
+    &[data-underline=hover] {
+      text-decoration-line: none;
+    }
+    &:hover {
+      color: var(--link-hover);
+      text-decoration-line: underline;
+    }
+    &:focus-visible {
+      outline: var(--link-focus-ring-width) solid var(--link-focus-ring-color);
+      outline-offset: var(--link-focus-ring-offset);
+    }
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+}
+/*# sourceMappingURL=link.css.map */

package/dist/link.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/link/Link.module.css"],"sourcesContent":["/* Every value is a token: --link-* in packages/tokens/tokens/component/link.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .link {\n    border-radius: var(--link-radius);\n    color: var(--link-tone-action);\n    font-weight: var(--link-weight);\n    text-decoration-line: underline;\n    text-decoration-thickness: from-font;\n    text-underline-offset: 0.2em;\n    cursor: pointer;\n    transition: color var(--link-duration) var(--motion-easing-standard);\n\n    &[data-tone=\"default\"] { color: var(--link-tone-default); }\n    &[data-tone=\"muted\"] { color: var(--link-tone-muted); }\n\n    &[data-underline=\"hover\"] { text-decoration-line: none; }\n\n    &:hover {\n      color: var(--link-hover);\n      text-decoration-line: underline;\n    }\n\n    &:focus-visible {\n      outline: var(--link-focus-ring-width) solid var(--link-focus-ring-color);\n      outline-offset: var(--link-focus-ring-offset);\n    }\n\n    @media (prefers-reduced-motion: reduce) {\n      transition: none;\n    }\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,mBAAe,IAAI;AACnB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,0BAAsB;AACtB,+BAA2B;AAC3B,2BAAuB;AACvB,YAAQ;AACR,gBAAY,MAAM,IAAI,iBAAiB,IAAI;AAE3C,KAAC,CAAC;AAAuB,aAAO,IAAI;AAAsB;AAC1D,KAAC,CAAC;AAAqB,aAAO,IAAI;AAAoB;AAEtD,KAAC,CAAC;AAA0B,4BAAsB;AAAM;AAExD,KAAC;AACC,aAAO,IAAI;AACX,4BAAsB;AACxB;AAEA,KAAC;AACC,eAAS,IAAI,yBAAyB,MAAM,IAAI;AAChD,sBAAgB,IAAI;AACtB;AAEA,YAAO,wBAAyB;AAC9B,kBAAY;AACd;AACF;AACF;","names":["link"]}

package/dist/link.d.ts

@@ -0,0 +1,37 @@
+import * as react from 'react';
+import { AnchorHTMLAttributes, Ref, ReactNode } from 'react';
+
+type LinkTone = 'action' | 'default' | 'muted';
+type LinkUnderline = 'always' | 'hover';
+interface LinkProps<E extends HTMLElement = HTMLAnchorElement> extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** `action` is the brand's link colour; `default` and `muted` take the text colours. @default 'action' */
+    tone?: LinkTone;
+    /**
+     * `hover` drops the underline until the pointer is over it. Only for links that
+     * are obviously links from where they sit (a nav, a footer list). @default 'always'
+     */
+    underline?: LinkUnderline;
+    /** Render the single child instead of an `a`: a router's link component. @default false */
+    asChild?: boolean;
+    ref?: Ref<E>;
+    children: ReactNode;
+}
+/**
+ * A text link. Underlined by default, because colour alone must not be what
+ * tells a link from the words around it. With `asChild` the styles and props
+ * land on a router's own link, so client-side navigation keeps working.
+ *
+ * @status experimental
+ * @category Typography
+ * @accessibility A native `a`: focusable and activated with Enter only when it has an `href` (or the `asChild` element provides one). The focus ring comes from the semantic focus tokens. `underline="hover"` removes the only non-colour cue, so it is for lists of links, never for a link inside a sentence (WCAG 1.4.1).
+ * @do Use `asChild` with the router's link: `<Link asChild><NextLink href="/feed">Feed</NextLink></Link>`.
+ * @do Write link text that makes sense out of context; screen readers list links on their own.
+ * @dont Use it for an action that does not navigate; that is a Button (`variant="ghost"`).
+ * @dont Use `underline="hover"` for a link inside running text.
+ */
+declare function Link<E extends HTMLElement = HTMLAnchorElement>({ tone, underline, asChild, className, ref, children, ...rest }: LinkProps<E>): react.JSX.Element;
+declare namespace Link {
+    var displayName: string;
+}
+
+export { Link, type LinkProps, type LinkTone, type LinkUnderline };

package/dist/link.js

@@ -0,0 +1,5 @@
+export { Link } from './chunk-HDC2IQV2.js';
+import './chunk-QJG5ILK5.js';
+import './chunk-MI4QUKQS.js';
+//# sourceMappingURL=link.js.map
+//# sourceMappingURL=link.js.map

package/dist/link.js.map

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

package/dist/listbox.js

@@ -1,4 +1,4 @@
-export { Listbox } from './chunk-WJDDKNE7.js';
+"use client";export { Listbox } from './chunk-WJDDKNE7.js';
 import './chunk-CZBCGLEM.js';
 import './chunk-EDTA65L5.js';
 import './chunk-O5LII5XP.js';

package/dist/menu.js

@@ -1,9 +1,9 @@
-export { Menu } from './chunk-2NSQPN7S.js';
+"use client";export { Menu } from './chunk-AZAI4OVR.js';
 import './chunk-I5OZ63W7.js';
 import './chunk-NAYFLTK6.js';
 import './chunk-U6QRAD73.js';
-import './chunk-ZVDN3GRI.js';
 import './chunk-O5LII5XP.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=menu.js.map
 //# sourceMappingURL=menu.js.map

package/dist/pagination.css

@@ -160,6 +160,24 @@
       }
     }
   }
+  .Button_button[data-tone=danger] {
+    &[data-variant=primary] {
+      background-color: var(--button-danger-bg);
+      color: var(--button-danger-fg);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-hover);
+      }
+      &:active:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-bg-active);
+      }
+    }
+    &:is([data-variant=secondary], [data-variant=ghost]) {
+      color: var(--button-danger-text);
+      &:hover:not(:disabled, [aria-disabled=true]) {
+        background-color: var(--button-danger-quiet-bg-hover);
+      }
+    }
+  }
   .Button_label {
     display: inline-block;
   }

package/dist/pagination.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/pagination/Pagination.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","/* Every value is a token (--pagination-*). The controls are Buttons; this file lays them out. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_size: var(--pagination-ellipsis-size-md);\n    --_font-size: var(--pagination-font-size-md);\n\n    font-family: var(--pagination-font-family);\n\n    &[data-size=\"sm\"] {\n      --_size: var(--pagination-ellipsis-size-sm);\n      --_font-size: var(--pagination-font-size-sm);\n    }\n  }\n\n  .list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--pagination-gap);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .page {\n    min-inline-size: var(--_size);\n    padding-inline: 0;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ellipsis {\n    display: grid;\n    place-items: center;\n    min-inline-size: var(--_size);\n    block-size: var(--_size);\n    color: var(--pagination-ellipsis-fg);\n    font-size: var(--_font-size);\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","root","list","page","ellipsis"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/visually-hidden/VisuallyHidden.module.css","../src/spinner/Spinner.module.css","../src/button/Button.module.css","../src/icon-button/IconButton.module.css","../src/pagination/Pagination.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The clip-path technique: present in the accessibility tree, absent from the layout. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    position: absolute;\n    inline-size: var(--visually-hidden-size);\n    block-size: var(--visually-hidden-size);\n    padding: 0;\n    margin: 0;\n    overflow: hidden;\n    clip-path: inset(50%);\n    white-space: nowrap;\n    border: 0;\n  }\n}\n","/* Every value is a token (--spinner-*). The ring is a border with one coloured side. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .spinner {\n    --_size: var(--spinner-size-md);\n    --_track: var(--spinner-track);\n    --_indicator: var(--spinner-indicator);\n\n    display: inline-flex;\n    flex: none;\n    inline-size: var(--_size);\n    block-size: var(--_size);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { --_size: var(--spinner-size-sm); }\n    &[data-size=\"lg\"] { --_size: var(--spinner-size-lg); }\n    &[data-size=\"inherit\"] { --_size: 1em; }\n\n    &[data-tone=\"inherit\"] {\n      --_track: transparent;\n      --_indicator: currentcolor;\n    }\n  }\n\n  .ring {\n    inline-size: 100%;\n    block-size: 100%;\n    border: var(--spinner-width) solid var(--_track);\n    border-block-start-color: var(--_indicator);\n    border-radius: var(--radius-full);\n    animation: spin var(--spinner-duration) linear infinite;\n  }\n\n  @keyframes spin {\n    to {\n      rotate: 1turn;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ring {\n      animation: none;\n    }\n  }\n}\n","/*\n * Every value is a token. State is expressed through data attributes so the\n * styling hooks survive a change of styling tool, and so tests and agents can\n * read state off the DOM.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--button-gap);\n    min-block-size: var(--button-height-md);\n    padding-block: 0;\n    padding-inline: var(--button-padding-inline-md);\n    border: 1px solid transparent;\n    border-radius: var(--button-radius);\n    font-family: var(--button-font-family);\n    font-size: var(--button-font-size-md);\n    font-weight: var(--button-font-weight);\n    line-height: 1;\n    text-decoration: none;\n    white-space: nowrap;\n    cursor: pointer;\n    -webkit-user-select: none;\n    user-select: none;\n    transition:\n      background-color var(--button-motion-duration) var(--motion-easing-standard),\n      border-color var(--button-motion-duration) var(--motion-easing-standard),\n      color var(--button-motion-duration) var(--motion-easing-standard);\n\n    &:focus-visible {\n      outline: var(--button-focus-ring-width) solid var(--button-focus-ring);\n      outline-offset: var(--button-focus-ring-offset);\n    }\n\n    &:disabled,\n    &[aria-disabled=\"true\"] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-loading] {\n      cursor: progress;\n    }\n\n    &[data-size=\"sm\"] {\n      min-block-size: var(--button-height-sm);\n      padding-inline: var(--button-padding-inline-sm);\n      font-size: var(--button-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      min-block-size: var(--button-height-lg);\n      padding-inline: var(--button-padding-inline-lg);\n      font-size: var(--button-font-size-lg);\n    }\n\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-primary-bg);\n      color: var(--button-primary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-primary-bg-active);\n      }\n    }\n\n    &[data-variant=\"secondary\"] {\n      background-color: var(--button-secondary-bg);\n      border-color: var(--button-secondary-border);\n      color: var(--button-secondary-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-secondary-bg-hover);\n      }\n    }\n\n    &[data-variant=\"ghost\"] {\n      background-color: transparent;\n      color: var(--button-ghost-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-ghost-bg-hover);\n      }\n    }\n  }\n\n  /* tone=\"danger\", after the variants so it wins at equal specificity plus one attribute. */\n  .button[data-tone=\"danger\"] {\n    &[data-variant=\"primary\"] {\n      background-color: var(--button-danger-bg);\n      color: var(--button-danger-fg);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-hover);\n      }\n\n      &:active:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-bg-active);\n      }\n    }\n\n    &:is([data-variant=\"secondary\"], [data-variant=\"ghost\"]) {\n      color: var(--button-danger-text);\n\n      &:hover:not(:disabled, [aria-disabled=\"true\"]) {\n        background-color: var(--button-danger-quiet-bg-hover);\n      }\n    }\n  }\n\n  .label {\n    display: inline-block;\n  }\n}\n","/* Squares a Button. Selectors carry the data attribute so they outrank Button's own size rules. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .iconButton[data-icon-only] {\n    gap: 0;\n    inline-size: var(--icon-button-size-md);\n    padding-inline: 0;\n\n    &[data-size=\"sm\"] { inline-size: var(--icon-button-size-sm); }\n    &[data-size=\"lg\"] { inline-size: var(--icon-button-size-lg); }\n  }\n}\n","/* Every value is a token (--pagination-*). The controls are Buttons; this file lays them out. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_size: var(--pagination-ellipsis-size-md);\n    --_font-size: var(--pagination-font-size-md);\n\n    font-family: var(--pagination-font-family);\n\n    &[data-size=\"sm\"] {\n      --_size: var(--pagination-ellipsis-size-sm);\n      --_font-size: var(--pagination-font-size-sm);\n    }\n  }\n\n  .list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--pagination-gap);\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n\n  .page {\n    min-inline-size: var(--_size);\n    padding-inline: 0;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ellipsis {\n    display: grid;\n    place-items: center;\n    min-inline-size: var(--_size);\n    block-size: var(--_size);\n    color: var(--pagination-ellipsis-fg);\n    font-size: var(--_font-size);\n  }\n}\n"],"mappings":"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","names":["icon","root","spinner","ring","spin","button","label","iconButton","root","list","page","ellipsis"]}

package/dist/pagination.js

@@ -1,10 +1,10 @@
-export { Pagination, paginationRange } from './chunk-VQN5DQP6.js';
-import './chunk-MF66ICX6.js';
-import './chunk-5TTYVQ6Q.js';
+export { Pagination, paginationRange } from './chunk-HKNIEQ2V.js';
+import './chunk-56RSH7GQ.js';
+import './chunk-DE67ECD7.js';
 import './chunk-ZL5MMRLG.js';
-import './chunk-ZVDN3GRI.js';
 import './chunk-IB5UUE3S.js';
 import './chunk-O5LII5XP.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=pagination.js.map
 //# sourceMappingURL=pagination.js.map

package/dist/picker.css

@@ -199,6 +199,9 @@
   .Picker_list {
     box-shadow: var(--picker-popover-shadow);
   }
+  .Picker_popover .Picker_list {
+    background-color: var(--picker-popover-bg);
+  }
   @keyframes Picker_fade {
     from {
       opacity: 0;

package/dist/picker.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/picker/Picker.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .list {\n    display: flex;\n    flex-direction: column;\n    max-block-size: var(--listbox-max-height);\n    padding: var(--listbox-padding);\n    overflow: auto;\n    border: var(--size-hairline) solid var(--listbox-border);\n    border-radius: var(--listbox-radius);\n    background-color: var(--listbox-bg);\n    color: var(--listbox-fg);\n    font-family: var(--listbox-font-family);\n    font-size: var(--listbox-font-size);\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n      outline-offset: var(--listbox-focus-ring-offset);\n    }\n  }\n\n  .check {\n    flex: none;\n    visibility: hidden;\n    color: var(--listbox-item-check);\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--listbox-item-gap);\n    padding-block: var(--listbox-item-padding-block);\n    padding-inline: var(--listbox-item-padding-inline);\n    border-radius: var(--listbox-item-radius);\n    color: var(--listbox-item-fg);\n    cursor: default;\n    outline: none;\n\n    &[data-hovered],\n    &[data-focused] {\n      background-color: var(--listbox-item-bg-focus);\n    }\n\n    &[data-selected] {\n      background-color: var(--listbox-item-bg-selected);\n\n      .check {\n        visibility: visible;\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--listbox-item-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .itemBody {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .itemLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .itemDescription {\n    color: var(--listbox-item-fg-muted);\n    font-size: var(--listbox-item-description-font-size);\n  }\n\n  .empty {\n    padding: var(--listbox-empty-padding);\n    color: var(--listbox-empty-fg);\n  }\n}\n","/*\n * Every value is a token (--picker-*); the options read --listbox-*. The\n * trigger is a button drawn like a text field. The popover is positioned by\n * React Aria; the gap is its own padding and --trigger-width (vendor) sizes it.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--picker-height-md);\n    --_font-size: var(--picker-font-size-md);\n    --_border: var(--picker-border-default);\n\n    font-family: var(--picker-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--picker-height-sm);\n      --_font-size: var(--picker-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--picker-height-lg);\n      --_font-size: var(--picker-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--picker-border-invalid); }\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--picker-gap);\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--picker-padding-inline);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--picker-radius);\n    background-color: var(--picker-bg);\n    color: var(--picker-fg);\n    font-family: inherit;\n    font-size: var(--_font-size);\n    text-align: start;\n    cursor: pointer;\n    transition: border-color var(--picker-motion-duration) var(--motion-easing-standard);\n\n    &[data-focus-visible] {\n      border-color: var(--picker-border-focus);\n      outline: var(--picker-focus-ring-width) solid var(--picker-focus-ring);\n      outline-offset: var(--picker-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focus-visible], [data-disabled]) {\n      border-color: var(--picker-border-hover);\n    }\n  }\n\n  .value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    &[data-placeholder] {\n      color: var(--picker-placeholder);\n    }\n  }\n\n  .chevron {\n    flex: none;\n    color: var(--picker-icon);\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--picker-gap);\n    animation: fade var(--picker-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--picker-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--picker-popover-shadow);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","field","label","required","description","error","list","check","item","itemBody","itemLabel","itemDescription","empty","root","trigger","value","chevron","popover","list","fade"]}
+{"version":3,"sources":["../src/icon/Icon.module.css","../src/internal/AriaField.module.css","../src/listbox/Listbox.module.css","../src/picker/Picker.module.css"],"sourcesContent":["/* Every value is a token (--icon-*). The child SVG fills the box; colour is currentColor. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .icon {\n    display: inline-flex;\n    flex: none;\n    inline-size: 1em;\n    block-size: 1em;\n    font-size: var(--icon-size-md);\n    vertical-align: middle;\n\n    &[data-size=\"sm\"] { font-size: var(--icon-size-sm); }\n    &[data-size=\"lg\"] { font-size: var(--icon-size-lg); }\n    &[data-size=\"inherit\"] { font-size: inherit; }\n\n    & > * {\n      inline-size: 100%;\n      block-size: 100%;\n    }\n  }\n}\n","/* The same --field-* tokens Field reads, on React Aria's label, description and error parts. */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--field-gap);\n    font-family: var(--font-family-body);\n  }\n\n  .label {\n    font-size: var(--field-label-font-size);\n    font-weight: var(--field-label-font-weight);\n    color: var(--field-label-fg);\n  }\n\n  .required {\n    margin-inline-start: var(--field-required-gap);\n    color: var(--field-required-fg);\n  }\n\n  .description {\n    margin: 0;\n    font-size: var(--field-description-font-size);\n    color: var(--field-description-fg);\n  }\n\n  .error {\n    margin: 0;\n    font-size: var(--field-error-font-size);\n    color: var(--field-error-fg);\n  }\n}\n","/*\n * Every value is a token (--listbox-*). React Aria writes the state:\n * data-focused (real or virtual focus), data-selected, data-disabled,\n * data-hovered, data-focus-visible, data-empty. The tick is in the DOM for\n * every option and revealed by data-selected.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .list {\n    display: flex;\n    flex-direction: column;\n    max-block-size: var(--listbox-max-height);\n    padding: var(--listbox-padding);\n    overflow: auto;\n    border: var(--size-hairline) solid var(--listbox-border);\n    border-radius: var(--listbox-radius);\n    background-color: var(--listbox-bg);\n    color: var(--listbox-fg);\n    font-family: var(--listbox-font-family);\n    font-size: var(--listbox-font-size);\n    outline: none;\n\n    &[data-focus-visible] {\n      outline: var(--listbox-focus-ring-width) solid var(--listbox-focus-ring);\n      outline-offset: var(--listbox-focus-ring-offset);\n    }\n  }\n\n  .check {\n    flex: none;\n    visibility: hidden;\n    color: var(--listbox-item-check);\n  }\n\n  .item {\n    display: flex;\n    align-items: center;\n    gap: var(--listbox-item-gap);\n    padding-block: var(--listbox-item-padding-block);\n    padding-inline: var(--listbox-item-padding-inline);\n    border-radius: var(--listbox-item-radius);\n    color: var(--listbox-item-fg);\n    cursor: default;\n    outline: none;\n\n    &[data-hovered],\n    &[data-focused] {\n      background-color: var(--listbox-item-bg-focus);\n    }\n\n    &[data-selected] {\n      background-color: var(--listbox-item-bg-selected);\n\n      .check {\n        visibility: visible;\n      }\n    }\n\n    &[data-disabled] {\n      color: var(--listbox-item-fg-disabled);\n      cursor: not-allowed;\n    }\n  }\n\n  .itemBody {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .itemLabel {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .itemDescription {\n    color: var(--listbox-item-fg-muted);\n    font-size: var(--listbox-item-description-font-size);\n  }\n\n  .empty {\n    padding: var(--listbox-empty-padding);\n    color: var(--listbox-empty-fg);\n  }\n}\n","/*\n * Every value is a token (--picker-*); the options read --listbox-*. The\n * trigger is a button drawn like a text field. The popover is positioned by\n * React Aria; the gap is its own padding and --trigger-width (vendor) sizes it.\n */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--picker-height-md);\n    --_font-size: var(--picker-font-size-md);\n    --_border: var(--picker-border-default);\n\n    font-family: var(--picker-font-family);\n\n    &[data-size=\"sm\"] {\n      --_height: var(--picker-height-sm);\n      --_font-size: var(--picker-font-size-sm);\n    }\n\n    &[data-size=\"lg\"] {\n      --_height: var(--picker-height-lg);\n      --_font-size: var(--picker-font-size-lg);\n    }\n\n    &[data-invalid] { --_border: var(--picker-border-invalid); }\n  }\n\n  .trigger {\n    display: flex;\n    align-items: center;\n    gap: var(--picker-gap);\n    inline-size: 100%;\n    min-block-size: var(--_height);\n    padding-block: 0;\n    padding-inline: var(--picker-padding-inline);\n    border: var(--size-hairline) solid var(--_border);\n    border-radius: var(--picker-radius);\n    background-color: var(--picker-bg);\n    color: var(--picker-fg);\n    font-family: inherit;\n    font-size: var(--_font-size);\n    text-align: start;\n    cursor: pointer;\n    transition: border-color var(--picker-motion-duration) var(--motion-easing-standard);\n\n    &[data-focus-visible] {\n      border-color: var(--picker-border-focus);\n      outline: var(--picker-focus-ring-width) solid var(--picker-focus-ring);\n      outline-offset: var(--picker-focus-ring-offset);\n    }\n\n    &[data-disabled] {\n      cursor: not-allowed;\n      opacity: 0.55;\n    }\n\n    &[data-hovered]:not([data-focus-visible], [data-disabled]) {\n      border-color: var(--picker-border-hover);\n    }\n  }\n\n  .value {\n    flex: 1;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    &[data-placeholder] {\n      color: var(--picker-placeholder);\n    }\n  }\n\n  .chevron {\n    flex: none;\n    color: var(--picker-icon);\n  }\n\n  .popover {\n    inline-size: var(--trigger-width);\n    padding-block-start: var(--picker-gap);\n    animation: fade var(--picker-popover-duration) var(--motion-easing-standard);\n\n    &[data-placement=\"top\"] {\n      padding-block: 0 var(--picker-gap);\n    }\n  }\n\n  .list {\n    box-shadow: var(--picker-popover-shadow);\n  }\n\n  /* The shared list styles paint an inline Listbox's surface; here the list floats. Two classes, so it wins whatever the stylesheet order. */\n  .popover .list {\n    background-color: var(--picker-popover-bg);\n  }\n\n  @keyframes fade {\n    from {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .popover {\n      animation: none;\n    }\n  }\n}\n"],"mappings":"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","names":["icon","field","label","required","description","error","list","check","item","itemBody","itemLabel","itemDescription","empty","root","trigger","value","chevron","popover","list","fade"]}

package/dist/picker.js

@@ -1,7 +1,7 @@
-export { Picker } from './chunk-BAPNIZDV.js';
-import './chunk-EDTA65L5.js';
+"use client";export { Picker } from './chunk-F2YI5N4L.js';
 import './chunk-IRNTXAA7.js';
 import './chunk-DGIXNUNI.js';
+import './chunk-EDTA65L5.js';
 import './chunk-O5LII5XP.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=picker.js.map

package/dist/popover.js

@@ -1,7 +1,7 @@
-export { Popover } from './chunk-OFFFRIJG.js';
+"use client";export { Popover } from './chunk-SDIK6VSC.js';
 import './chunk-NAYFLTK6.js';
 import './chunk-U6QRAD73.js';
-import './chunk-ZVDN3GRI.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=popover.js.map
 //# sourceMappingURL=popover.js.map

package/dist/radio.js

@@ -1,6 +1,6 @@
-export { Radio, RadioGroup } from './chunk-N6E2E2OY.js';
-import './chunk-M5VL22MY.js';
-import './chunk-ZVDN3GRI.js';
+"use client";export { Radio, RadioGroup } from './chunk-2NVC3C7K.js';
+import './chunk-SXMORGSG.js';
+import './chunk-QJG5ILK5.js';
 import './chunk-MI4QUKQS.js';
 //# sourceMappingURL=radio.js.map
 //# sourceMappingURL=radio.js.map

package/dist/segmented-control.css

@@ -0,0 +1,111 @@
+/* src/segmented-control/SegmentedControl.module.css */
+@layer reset, tokens, vendor, base, components, utilities;
+@layer components {
+  .SegmentedControl_root {
+    --_height: var(--segmented-control-height-md);
+    --_padding: var(--segmented-control-padding-x-md);
+    display: inline-flex;
+    box-sizing: border-box;
+    max-inline-size: 100%;
+    color: var(--segmented-control-fg);
+    font-family: var(--font-family-body);
+    font-size: var(--segmented-control-font-size-md);
+    font-weight: var(--segmented-control-weight);
+    line-height: 1;
+    &[data-size=sm] {
+      --_height: var(--segmented-control-height-sm);
+      --_padding: var(--segmented-control-padding-x-sm);
+      font-size: var(--segmented-control-font-size-sm);
+    }
+    &[data-look=segmented] {
+      padding: var(--segmented-control-inset);
+      border: var(--segmented-control-border-width) solid var(--segmented-control-track-border);
+      border-radius: var(--segmented-control-track-radius);
+      background: var(--segmented-control-track-bg);
+    }
+    &[data-look=chips] {
+      flex-wrap: wrap;
+      gap: var(--segmented-control-gap);
+    }
+    &[data-full-width][data-look=segmented] {
+      display: flex;
+    }
+    &[aria-disabled=true] {
+      opacity: 0.55;
+    }
+  }
+  .SegmentedControl_list {
+    display: contents;
+  }
+  .SegmentedControl_option {
+    display: inline-flex;
+    position: relative;
+    min-inline-size: 0;
+    .SegmentedControl_root[data-full-width] & {
+      flex: 1;
+    }
+  }
+  .SegmentedControl_input {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: pointer;
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+  .SegmentedControl_segment {
+    display: inline-flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    gap: var(--segmented-control-gap);
+    box-sizing: border-box;
+    min-block-size: calc(var(--_height) - 2 * var(--segmented-control-inset) - 2 * var(--segmented-control-border-width));
+    padding-block: 0;
+    padding-inline: var(--_padding);
+    border: var(--segmented-control-border-width) solid transparent;
+    border-radius: var(--segmented-control-segment-radius);
+    color: inherit;
+    text-decoration: none;
+    white-space: nowrap;
+    transition: background-color var(--motion-duration-fast) var(--motion-easing-standard), color var(--motion-duration-fast) var(--motion-easing-standard);
+    .SegmentedControl_root[data-look=chips] & {
+      min-block-size: var(--_height);
+      border-color: var(--segmented-control-chip-border);
+      border-radius: var(--segmented-control-chip-radius);
+      background: var(--segmented-control-chip-bg);
+    }
+  }
+  .SegmentedControl_option:hover .SegmentedControl_segment,
+  a.SegmentedControl_segment:hover {
+    color: var(--segmented-control-fg-hover);
+  }
+  .SegmentedControl_option[data-selected] .SegmentedControl_segment {
+    border-color: var(--segmented-control-segment-selected-border);
+    background: var(--segmented-control-segment-selected-bg);
+    box-shadow: var(--segmented-control-segment-selected-shadow);
+    color: var(--segmented-control-segment-selected-fg);
+    .SegmentedControl_root[data-look=chips] & {
+      border-color: var(--segmented-control-chip-selected-border);
+      background: var(--segmented-control-chip-selected-bg);
+      box-shadow: none;
+      color: var(--segmented-control-chip-selected-fg);
+    }
+  }
+  .SegmentedControl_input:focus-visible + .SegmentedControl_segment,
+  a.SegmentedControl_segment:focus-visible {
+    outline: var(--segmented-control-focus-ring-width) solid var(--segmented-control-focus-ring);
+    outline-offset: var(--segmented-control-focus-ring-offset);
+  }
+  .SegmentedControl_input:disabled + .SegmentedControl_segment {
+    opacity: 0.55;
+  }
+  .SegmentedControl_icon {
+    display: inline-flex;
+  }
+}
+/*# sourceMappingURL=segmented-control.css.map */

package/dist/segmented-control.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/segmented-control/SegmentedControl.module.css"],"sourcesContent":["/* Every value is a token: --segmented-control-* in packages/tokens/tokens/component/segmented-control.json */\n\n@layer reset, tokens, vendor, base, components, utilities;\n\n@layer components {\n  .root {\n    --_height: var(--segmented-control-height-md);\n    --_padding: var(--segmented-control-padding-x-md);\n\n    display: inline-flex;\n    box-sizing: border-box;\n    max-inline-size: 100%;\n    color: var(--segmented-control-fg);\n    font-family: var(--font-family-body);\n    font-size: var(--segmented-control-font-size-md);\n    font-weight: var(--segmented-control-weight);\n    line-height: 1;\n\n    &[data-size='sm'] {\n      --_height: var(--segmented-control-height-sm);\n      --_padding: var(--segmented-control-padding-x-sm);\n\n      font-size: var(--segmented-control-font-size-sm);\n    }\n\n    &[data-look='segmented'] {\n      padding: var(--segmented-control-inset);\n      border: var(--segmented-control-border-width) solid var(--segmented-control-track-border);\n      border-radius: var(--segmented-control-track-radius);\n      background: var(--segmented-control-track-bg);\n    }\n\n    &[data-look='chips'] {\n      flex-wrap: wrap;\n      gap: var(--segmented-control-gap);\n    }\n\n    &[data-full-width][data-look='segmented'] {\n      display: flex;\n    }\n\n    &[aria-disabled='true'] {\n      opacity: 0.55;\n    }\n  }\n\n  /* The Nav flavour: the list is the flex row the root is for the radios. */\n  .list {\n    display: contents;\n  }\n\n  .option {\n    display: inline-flex;\n    position: relative;\n    min-inline-size: 0;\n\n    .root[data-full-width] & {\n      flex: 1;\n    }\n  }\n\n  /* Visually hidden, still focusable and still in the form: the segment draws its state. */\n  .input {\n    position: absolute;\n    inset: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    margin: 0;\n    opacity: 0;\n    cursor: pointer;\n\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n\n  .segment {\n    display: inline-flex;\n    flex: 1;\n    align-items: center;\n    justify-content: center;\n    gap: var(--segmented-control-gap);\n    box-sizing: border-box;\n    min-block-size: calc(var(--_height) - 2 * var(--segmented-control-inset) - 2 * var(--segmented-control-border-width));\n    padding-block: 0;\n    padding-inline: var(--_padding);\n    border: var(--segmented-control-border-width) solid transparent;\n    border-radius: var(--segmented-control-segment-radius);\n    color: inherit;\n    text-decoration: none;\n    white-space: nowrap;\n    transition:\n      background-color var(--motion-duration-fast) var(--motion-easing-standard),\n      color var(--motion-duration-fast) var(--motion-easing-standard);\n\n    .root[data-look='chips'] & {\n      min-block-size: var(--_height);\n      border-color: var(--segmented-control-chip-border);\n      border-radius: var(--segmented-control-chip-radius);\n      background: var(--segmented-control-chip-bg);\n    }\n  }\n\n  .option:hover .segment,\n  a.segment:hover {\n    color: var(--segmented-control-fg-hover);\n  }\n\n  .option[data-selected] .segment {\n    border-color: var(--segmented-control-segment-selected-border);\n    background: var(--segmented-control-segment-selected-bg);\n    box-shadow: var(--segmented-control-segment-selected-shadow);\n    color: var(--segmented-control-segment-selected-fg);\n\n    .root[data-look='chips'] & {\n      border-color: var(--segmented-control-chip-selected-border);\n      background: var(--segmented-control-chip-selected-bg);\n      box-shadow: none;\n      color: var(--segmented-control-chip-selected-fg);\n    }\n  }\n\n  .input:focus-visible + .segment,\n  a.segment:focus-visible {\n    outline: var(--segmented-control-focus-ring-width) solid var(--segmented-control-focus-ring);\n    outline-offset: var(--segmented-control-focus-ring-offset);\n  }\n\n  .input:disabled + .segment {\n    opacity: 0.55;\n  }\n\n  .icon {\n    display: inline-flex;\n  }\n}\n"],"mappings":";AAEA;AAEA;AACE,GAACA;AACC,eAAW,IAAI;AACf,gBAAY,IAAI;AAEhB,aAAS;AACT,gBAAY;AACZ,qBAAiB;AACjB,WAAO,IAAI;AACX,iBAAa,IAAI;AACjB,eAAW,IAAI;AACf,iBAAa,IAAI;AACjB,iBAAa;AAEb,KAAC,CAAC;AACA,iBAAW,IAAI;AACf,kBAAY,IAAI;AAEhB,iBAAW,IAAI;AACjB;AAEA,KAAC,CAAC;AACA,eAAS,IAAI;AACb,cAAQ,IAAI,kCAAkC,MAAM,IAAI;AACxD,qBAAe,IAAI;AACnB,kBAAY,IAAI;AAClB;AAEA,KAAC,CAAC;AACA,iBAAW;AACX,WAAK,IAAI;AACX;AAEA,KAAC,CAAC,gBAAgB,CAAC;AACjB,eAAS;AACX;AAEA,KAAC,CAAC;AACA,eAAS;AACX;AACF;AAGA,GAACC;AACC,aAAS;AACX;AAEA,GAACC;AACC,aAAS;AACT,cAAU;AACV,qBAAiB;AAEjB,KAnDDF,qBAmDM,CAAC,iBAAiB;AACrB,YAAM;AACR;AACF;AAGA,GAACG;AACC,cAAU;AACV,WAAO;AACP,iBAAa;AACb,gBAAY;AACZ,YAAQ;AACR,aAAS;AACT,YAAQ;AAER,KAAC;AACC,cAAQ;AACV;AACF;AAEA,GAACC;AACC,aAAS;AACT,UAAM;AACN,iBAAa;AACb,qBAAiB;AACjB,SAAK,IAAI;AACT,gBAAY;AACZ,oBAAgB,KAAK,IAAI,WAAW,EAAE,EAAE,EAAE,IAAI,2BAA2B,EAAE,EAAE,EAAE,IAAI;AACnF,mBAAe;AACf,oBAAgB,IAAI;AACpB,YAAQ,IAAI,kCAAkC,MAAM;AACpD,mBAAe,IAAI;AACnB,WAAO;AACP,qBAAiB;AACjB,iBAAa;AACb,gBACE,iBAAiB,IAAI,wBAAwB,IAAI,yBAAyB,EAC1E,MAAM,IAAI,wBAAwB,IAAI;AAExC,KA1FDJ,qBA0FM,CAAC,iBAAmB;AACvB,sBAAgB,IAAI;AACpB,oBAAc,IAAI;AAClB,qBAAe,IAAI;AACnB,kBAAY,IAAI;AAClB;AACF;AAEA,GApDCE,uBAoDM,OAAO,CA3BbE;AAAA,EA4BD,CAAC,CA5BAA,wBA4BQ;AACP,WAAO,IAAI;AACb;AAEA,GAzDCF,uBAyDM,CAAC,eAAe,CAhCtBE;AAiCC,kBAAc,IAAI;AAClB,gBAAY,IAAI;AAChB,gBAAY,IAAI;AAChB,WAAO,IAAI;AAEX,KA7GDJ,qBA6GM,CAAC,iBAAmB;AACvB,oBAAc,IAAI;AAClB,kBAAY,IAAI;AAChB,kBAAY;AACZ,aAAO,IAAI;AACb;AACF;AAEA,GA5DCG,sBA4DK,eAAe,EAAE,CA9CtBC;AAAA,EA+CD,CAAC,CA/CAA,wBA+CQ;AACP,aAAS,IAAI,sCAAsC,MAAM,IAAI;AAC7D,oBAAgB,IAAI;AACtB;AAEA,GAlECD,sBAkEK,UAAU,EAAE,CApDjBC;AAqDC,aAAS;AACX;AAEA,GAACC;AACC,aAAS;AACX;AACF;","names":["root","list","option","input","segment","icon"]}

package/dist/segmented-control.d.ts

@@ -0,0 +1,90 @@
+import * as react from 'react';
+import { HTMLAttributes, ReactNode, Ref, AnchorHTMLAttributes } from 'react';
+
+type SegmentedControlSize = 'sm' | 'md';
+type SegmentedControlLook = 'segmented' | 'chips';
+interface SegmentedControlOption<T extends string = string> {
+    value: T;
+    label: ReactNode;
+    /** Decorative: hidden from assistive technology, so the label must stand on its own. */
+    icon?: ReactNode;
+    disabled?: boolean;
+}
+interface SegmentedControlProps<T extends string = string> extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
+    /** Names the group for assistive technology. Not rendered; label it visibly with `aria-labelledby` instead when there is a heading. */
+    label?: string;
+    options: ReadonlyArray<SegmentedControlOption<T>>;
+    /** Controlled selected value. */
+    value?: T;
+    /** Initially selected value when uncontrolled. */
+    defaultValue?: T;
+    onValueChange?: (value: T) => void;
+    /** Form field name shared by the radios. Generated when omitted. */
+    name?: string;
+    /** `segmented` is one track with a raised thumb; `chips` is separate pills that wrap. @default 'segmented' */
+    look?: SegmentedControlLook;
+    /** @default 'md' */
+    size?: SegmentedControlSize;
+    /** Segments share the container's width equally. `segmented` look only. @default false */
+    fullWidth?: boolean;
+    disabled?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * One choice out of a few, all visible, switching what is shown in place: a
+ * view mode, a unit, a sort order. Generic over a string union, so `value`
+ * and `onValueChange` are typed by the options. For links that navigate to
+ * another page use `SegmentedControl.Nav`, which looks the same and is a `nav`.
+ *
+ * @status experimental
+ * @category Forms
+ * @accessibility A `radiogroup` of native radio inputs, exactly as RadioGroup: the keyboard is the browser's own (arrows move and select, Tab enters on the checked radio and leaves the group), nothing is re-implemented. Name the group with `label` or `aria-labelledby`. The inputs are visually hidden, not removed, so the focus ring is drawn on the visible segment and the control takes part in a form (`name`). Icons are decorative.
+ * @do Use it for two to five short options that change the view in place.
+ * @do Use `SegmentedControl.Nav` when each option is a URL.
+ * @dont Use it for on/off; that is a Switch. For several at once, toggle Chips.
+ * @dont Use it for a form question with longer labels or a description; that is a RadioGroup.
+ */
+declare function SegmentedControl<T extends string = string>({ label, options, value, defaultValue, onValueChange, name, look, size, fullWidth, disabled, className, ref, ...rest }: SegmentedControlProps<T>): react.JSX.Element;
+declare namespace SegmentedControl {
+    var displayName: string;
+    var Nav: typeof SegmentedControlNav;
+    var NavItem: typeof SegmentedControlNavItem;
+}
+interface SegmentedControlNavProps extends HTMLAttributes<HTMLElement> {
+    /** Names the landmark ("Feed view"). Required: a page with several `nav`s needs them told apart. */
+    label: string;
+    /** @default 'segmented' */
+    look?: SegmentedControlLook;
+    /** @default 'md' */
+    size?: SegmentedControlSize;
+    /** @default false */
+    fullWidth?: boolean;
+    ref?: Ref<HTMLElement>;
+    /** `SegmentedControl.NavItem`s. */
+    children: ReactNode;
+}
+/**
+ * The same look for links that navigate: a labelled `nav` with a list of
+ * links, the current one marked `aria-current="page"`. Not a radiogroup and
+ * not tabs: following a link loads another page, and a screen reader user
+ * should be told so.
+ */
+declare function SegmentedControlNav({ label, look, size, fullWidth, className, ref, children, ...rest }: SegmentedControlNavProps): react.JSX.Element;
+declare namespace SegmentedControlNav {
+    var displayName: string;
+}
+interface SegmentedControlNavItemProps<E extends HTMLElement = HTMLAnchorElement> extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    /** This link is the page being shown: `aria-current="page"` and the selected look. @default false */
+    current?: boolean;
+    /** Render the single child instead of an `a`: a router's link component. @default false */
+    asChild?: boolean;
+    ref?: Ref<E>;
+    children: ReactNode;
+}
+/** One link of a `SegmentedControl.Nav`. With `asChild`, the router's own link takes the styles. */
+declare function SegmentedControlNavItem<E extends HTMLElement = HTMLAnchorElement>({ current, asChild, className, ref, children, ...rest }: SegmentedControlNavItemProps<E>): react.JSX.Element;
+declare namespace SegmentedControlNavItem {
+    var displayName: string;
+}
+
+export { SegmentedControl, type SegmentedControlProps };