@nxgt/material 3.103.0 → 3.105.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (139) hide show
  1. package/CHANGELOG.md +50 -0
  2. package/README.md +5 -3
  3. package/dist/{alert-dialog-NFyAiSqc.js → alert-dialog-CK_47jfm.js} +1 -1
  4. package/dist/{async-slice-D35bX79S.js → async-slice-1ZNMiwyJ.js} +1 -1
  5. package/dist/{button-Be7GZzF9.js → button-YfEMZbRO.js} +1 -1
  6. package/dist/{calculator-BGy1Q7rn.js → calculator-BmYZId4c.js} +11 -11
  7. package/dist/calculator-field.js +6 -6
  8. package/dist/{calculator-segment-uixk6lBg.js → calculator-segment-DJ08DJ-n.js} +1 -1
  9. package/dist/calculator.js +1 -1
  10. package/dist/charts.js +819 -764
  11. package/dist/{chip-3rWebZEM.js → chip-DPj6e-3v.js} +2 -2
  12. package/dist/{code-editor-BqSVMfy-.js → code-editor-CZg3nLZO.js} +4 -4
  13. package/dist/code-editor.js +4 -4
  14. package/dist/{code-language-items-Cf2LJVg2.js → code-language-items-Nq1iOGId.js} +2 -2
  15. package/dist/components/ui/display/chip/chip-soft.css +27 -2
  16. package/dist/components/ui/primitives/collapsible/collapsible.css +9 -0
  17. package/dist/{components-D2liJ9Yu.js → components-Cn14BksP.js} +16922 -16630
  18. package/dist/components.js +38 -38
  19. package/dist/{conversion-variant-clFZ6ZMJ.js → conversion-variant-C-LPx5ek.js} +4 -4
  20. package/dist/{currency-field-CBFEVNM1.js → currency-field-DnsRIA80.js} +4 -4
  21. package/dist/{dialog-CrIIINTk.js → dialog-BKBsDGFc.js} +3 -3
  22. package/dist/dnd.js +1 -1
  23. package/dist/{dropdown-menu-BnfLWu8n.js → dropdown-menu-QMDbRidH.js} +1 -1
  24. package/dist/editor.js +8 -8
  25. package/dist/{empty-state-CuUaCPY7.js → empty-state-BLIJ6znY.js} +1 -1
  26. package/dist/{financial-variant-BY_VCUuk.js → financial-variant-Ws0Jp01H.js} +5 -5
  27. package/dist/{hooks-hHoZbL-4.js → hooks-C3vkQmzh.js} +2 -2
  28. package/dist/hooks.js +2 -2
  29. package/dist/{hover-card-Do2-uzlF.js → hover-card-Df649U6I.js} +1 -1
  30. package/dist/i18n.js +3 -3
  31. package/dist/{icon-badge-CHaVNEmb.js → icon-badge-Cma1qOOJ.js} +1 -1
  32. package/dist/{icon-button-BIAubLeJ.js → icon-button-CpKxV264.js} +1 -1
  33. package/dist/keypad.js +3 -3
  34. package/dist/lib/components/ui/actions/index.d.ts +1 -0
  35. package/dist/lib/components/ui/actions/product-tile/index.d.ts +1 -0
  36. package/dist/lib/components/ui/actions/product-tile/product-tile-link.d.ts +16 -0
  37. package/dist/lib/components/ui/actions/product-tile/product-tile.d.ts +41 -0
  38. package/dist/lib/components/ui/collections/data-table/data-table-density.d.ts +1 -1
  39. package/dist/lib/components/ui/collections/data-table/partials/data-table-scroll-region.d.ts +4 -1
  40. package/dist/lib/components/ui/collections/data-table/partials/layouts/data-table-list-bar.d.ts +6 -3
  41. package/dist/lib/components/ui/collections/data-table/partials/layouts/list-bar-in-row.d.ts +2 -1
  42. package/dist/lib/components/ui/collections/data-table/types.d.ts +11 -8
  43. package/dist/lib/components/ui/collections/data-table/virtual-option.d.ts +9 -3
  44. package/dist/lib/components/ui/collections/filter/use-filter-field-config.d.ts +2 -0
  45. package/dist/lib/components/ui/collections/server-table/partials/server-table-passed-through.d.ts +1 -0
  46. package/dist/lib/components/ui/collections/server-table/types.d.ts +1 -1
  47. package/dist/lib/components/ui/display/chip/chip.variants.d.ts +5 -4
  48. package/dist/lib/components/ui/fields/contacts/placeholders.d.ts +1 -1
  49. package/dist/lib/components/ui/fields/index.d.ts +1 -0
  50. package/dist/lib/components/ui/fields/quantity-field/types.d.ts +1 -1
  51. package/dist/lib/components/ui/fields/quantity-stepper/index.d.ts +2 -0
  52. package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper-model.d.ts +9 -0
  53. package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper-value.d.ts +15 -0
  54. package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper.d.ts +9 -0
  55. package/dist/lib/components/ui/fields/quantity-stepper/quantity-stepper.types.d.ts +35 -0
  56. package/dist/lib/components/ui/fields/quantity-stepper/use-quantity-stepper.d.ts +28 -0
  57. package/dist/lib/components/ui/layout/app-shell/app-sidebar-entries.d.ts +3 -1
  58. package/dist/lib/components/ui/layout/app-shell/app-sidebar-group.d.ts +8 -3
  59. package/dist/lib/components/ui/layout/app-shell/app-sidebar.d.ts +3 -1
  60. package/dist/lib/components/ui/layout/app-shell/types.d.ts +15 -0
  61. package/dist/lib/components/ui/layout/pane-layout/pane-layout-phone-frames.d.ts +20 -0
  62. package/dist/lib/components/ui/layout/pane-layout/pane-layout.d.ts +8 -3
  63. package/dist/lib/components/ui/layout/pane-layout/partials/pane-layout-classes.d.ts +2 -2
  64. package/dist/lib/components/ui/layout/pane-layout/partials/pane-layout-context.d.ts +9 -0
  65. package/dist/lib/components/ui/layout/pane-layout/partials/use-pane-layout-state.d.ts +7 -2
  66. package/dist/lib/components/ui/layout/panel-card/panel-card.d.ts +3 -1
  67. package/dist/lib/components/ui/primitives/collapsible/collapsible.d.ts +9 -1
  68. package/dist/lib/components/ui/primitives/tabs/partials/tabs-list.d.ts +6 -1
  69. package/dist/lib/components/ui/primitives/tabs/tabs-classes.d.ts +1 -0
  70. package/dist/lib/components/ui/selection/chip-group-field/chip-group-field.d.ts +8 -0
  71. package/dist/lib/components/ui/selection/chip-group-field/chip-group-field.types.d.ts +6 -0
  72. package/dist/lib/components/ui/selection/chip-group-field/partials/chip-group-reasons.d.ts +10 -0
  73. package/dist/lib/components/ui/selection/chip-group-field/partials/use-chip-rail.d.ts +12 -0
  74. package/dist/lib/components/ui/selection/choice-group/choice-group-root.d.ts +5 -2
  75. package/dist/lib/components/ui/widgets/native-charts/core/label-placement.d.ts +25 -0
  76. package/dist/lib/components/ui/widgets/native-charts/core/reference-geometry.d.ts +3 -2
  77. package/dist/lib/i18n/resources/en/en.d.ts +3 -0
  78. package/dist/lib/i18n/resources/en/material.json.d.ts +4 -1
  79. package/dist/lib/i18n/resources/fr/fr.d.ts +3 -0
  80. package/dist/lib/i18n/resources/fr/material.json.d.ts +4 -1
  81. package/dist/lib/i18n/resources/resources.d.ts +6 -0
  82. package/dist/lib/i18n/translator.d.ts +1 -1
  83. package/dist/lib/print/output/csv.d.ts +37 -0
  84. package/dist/lib/print/output/index.d.ts +1 -0
  85. package/dist/lib.js +1 -1
  86. package/dist/main.js +54 -54
  87. package/dist/map.js +8 -8
  88. package/dist/material.css +1 -1
  89. package/dist/pdf-reader.js +1 -1
  90. package/dist/{percent-field-DU8eIMD3.js → percent-field-sAq7BaxN.js} +2 -2
  91. package/dist/{picker-surface-XmA--JVI.js → picker-surface--6E-nvpU.js} +4 -4
  92. package/dist/{popover-D8iHiAbl.js → popover-bEB8I_-w.js} +1 -1
  93. package/dist/{pos-types-BEAY27Rm.js → pos-types-Cpdc4E33.js} +1 -1
  94. package/dist/{pos-variant-ClGI92Lt.js → pos-variant-ClMGu59I.js} +5 -5
  95. package/dist/print.js +146 -127
  96. package/dist/{programmer-variant-Boq2O8hB.js → programmer-variant-ChzgyA7x.js} +2 -2
  97. package/dist/{public-DOrXKmcL.js → public-BY8N5NDT.js} +9 -9
  98. package/dist/{rich-code-block-Djj2XE_u.js → rich-code-block-D2GiWuqD.js} +5 -5
  99. package/dist/{scientific-variant-BzF_aMQP.js → scientific-variant-31_93gcZ.js} +2 -2
  100. package/dist/{sortable-provider-DCZjsIIH.js → sortable-provider-DGiVn72t.js} +2 -2
  101. package/dist/{spinner-Cg0y_E_K.js → spinner-CEVomQ5K.js} +1 -1
  102. package/dist/{tabs-DpessV5s.js → tabs-B8MXBbPW.js} +14 -14
  103. package/dist/{text-field-Dxk9lAKM.js → text-field-DN88qD0Q.js} +1 -1
  104. package/dist/theme-picker.js +2 -2
  105. package/dist/{theme-toggle-B6Jl5Kfn.js → theme-toggle-C7pnu1Xh.js} +1 -1
  106. package/dist/{toolbar-items-Cs1XrZsH.js → toolbar-items-BDfoh8QB.js} +4 -4
  107. package/dist/{translate-material-Du0j0t97.js → translate-material-s_lxIV43.js} +1 -1
  108. package/dist/{translator-BVs4n0Fz.js → translator-Cgql9srO.js} +4 -2
  109. package/dist/{use-calculator-keyboard-BZ1CA4Ut.js → use-calculator-keyboard-DysnFK8m.js} +1 -1
  110. package/dist/{use-chat-composer-B4m3OEm1.js → use-chat-composer-xCcp9fVc.js} +2050 -1996
  111. package/dist/{use-heading-spy-CO3_AtY9.js → use-heading-spy-FIZlf9qj.js} +4 -4
  112. package/dist/{use-material-translation-uNc1FyC8.js → use-material-translation-xNzbSVgS.js} +1 -1
  113. package/dist/{use-return-focus-AfLRrUm-.js → use-return-focus-CW9KkDkp.js} +1 -1
  114. package/docs/README.md +1 -1
  115. package/docs/components/README.md +1 -0
  116. package/docs/components/buttons-and-actions.md +47 -0
  117. package/docs/components/data-display.md +2 -2
  118. package/docs/components/data-table-filter-and-lists.md +19 -6
  119. package/docs/components/form-fields.md +60 -7
  120. package/docs/components/navigation-and-layout.md +21 -3
  121. package/docs/components/primitives.md +44 -2
  122. package/docs/components/selection-and-choice.md +56 -1
  123. package/docs/guides/app-shell.md +22 -2
  124. package/docs/guides/cards-and-tiles.md +10 -0
  125. package/docs/guides/csp.md +4 -3
  126. package/docs/guides/data-grid.md +5 -4
  127. package/docs/guides/field-look-refined.md +2 -2
  128. package/docs/guides/keypad.md +9 -1
  129. package/docs/guides/printing.md +51 -1
  130. package/docs/previews/buttons-actions-producttile.webp +0 -0
  131. package/docs/previews/form-fields-quantitystepper.webp +0 -0
  132. package/docs/previews/navigation-layout-panelcard.webp +0 -0
  133. package/docs/roadmap.md +10 -10
  134. package/docs/troubleshooting.md +5 -4
  135. package/lib/components/ui/display/chip/chip-soft.css +27 -2
  136. package/lib/components/ui/primitives/collapsible/collapsible.css +9 -0
  137. package/lib/components/ui/widgets/calculator/calculator-keys.css +3 -0
  138. package/lib/components/ui/widgets/calculator/calculator.css +38 -7
  139. package/package.json +1 -1
@@ -19,6 +19,7 @@ export * from './percent-field/index.js';
19
19
  export * from './phone-field/index.js';
20
20
  export * from './postal-address/index.js';
21
21
  export * from './quantity-field/index.js';
22
+ export * from './quantity-stepper/index.js';
22
23
  export * from './rating-field/index.js';
23
24
  export * from './repeatable-group/index.js';
24
25
  export * from './search-field/index.js';
@@ -31,7 +31,7 @@ export type QuantityFieldProps = {
31
31
  max?: number;
32
32
  step?: number;
33
33
  hideSteppers?: boolean;
34
- /** The units offered. */
34
+ /** The units offered. Without `units` and `allowCustomUnit` the unit chip is not drawn: a plain count. */
35
35
  units?: QuantityUnit[];
36
36
  /** The unit is typed; `units` become suggestions. Without it the unit is picked from `units`. */
37
37
  allowCustomUnit?: boolean;
@@ -0,0 +1,2 @@
1
+ export { QuantityStepper } from './quantity-stepper.js';
2
+ export type { QuantityStepperProps, QuantityStepperSize, } from './quantity-stepper.types.js';
@@ -0,0 +1,9 @@
1
+ export type StepperLimits = {
2
+ min: number;
3
+ max?: number;
4
+ step: number;
5
+ };
6
+ /** The value a key asks for, or `null` when the key is not the stepper's. */
7
+ export declare function valueForKey(key: string, value: number, { min, max, step }: StepperLimits): number | null;
8
+ /** What was typed, clamped; `null` (keep the old value) when it is not a number. */
9
+ export declare function valueForText(text: string, { min, max }: StepperLimits): number | null;
@@ -0,0 +1,15 @@
1
+ import { StepperLimits } from './quantity-stepper-model.js';
2
+ type Props = {
3
+ value: number;
4
+ limits: StepperLimits;
5
+ name: string;
6
+ editable?: boolean;
7
+ disabled?: boolean;
8
+ onValue: (value: number) => void;
9
+ };
10
+ /**
11
+ * The value: a spinbutton (arrow keys, Page and Home/End). A `<span>` to read,
12
+ * or a text input with `editable`, whose text is committed on Enter or blur.
13
+ */
14
+ export declare function QuantityStepperValue({ value, limits, name, editable, disabled, onValue, }: Props): import("react").JSX.Element;
15
+ export {};
@@ -0,0 +1,9 @@
1
+ import { QuantityStepperProps } from './quantity-stepper.types.js';
2
+ /**
3
+ * An inline −/value/+ control for a cart or ticket line: no label, no field
4
+ * box. A named `group` holding a minus button, the value (a `spinbutton`, with
5
+ * the arrow keys; typed with `editable`) and a plus button, each button 44px
6
+ * under a coarse pointer. With `onRemove`, the minus button becomes a remove
7
+ * (trash) button at `min`. Fits a `ListTile`'s `content` or `trailing`.
8
+ */
9
+ export declare function QuantityStepper({ 'aria-label': ariaLabel, value: controlled, defaultValue, onValueChange, min, max, step, size, editable, onRemove, disabled, className, ...props }: QuantityStepperProps): import("react").JSX.Element;
@@ -0,0 +1,35 @@
1
+ import { ComponentProps } from 'react';
2
+ export type QuantityStepperSize = 'sm' | 'md';
3
+ export type QuantityStepperProps = Omit<ComponentProps<'div'>, 'children' | 'defaultValue' | 'onChange' | 'role' | 'aria-label'> & {
4
+ /**
5
+ * What the control counts, as a sentence: "Quantity of Orange juice". It
6
+ * names the group and the value, and the buttons are named after it
7
+ * ("Decrease Quantity of Orange juice"). Required: a stepper in a list
8
+ * row has no visible label.
9
+ */
10
+ 'aria-label': string;
11
+ /** The controlled value. */
12
+ value?: number;
13
+ /** The first value when uncontrolled; `min` (or 0) when unset. */
14
+ defaultValue?: number;
15
+ /** Called with the new value, always within `min` and `max`. */
16
+ onValueChange?: (value: number) => void;
17
+ /** The lowest value. Default 0. */
18
+ min?: number;
19
+ /** The highest value. Default none. */
20
+ max?: number;
21
+ /** What a button press adds or removes. Default 1. */
22
+ step?: number;
23
+ /** `sm` 32px buttons, `md` 36px buttons (default). Both are 44px under a coarse pointer. */
24
+ size?: QuantityStepperSize;
25
+ /** The value can be typed: it is a text input (committed on Enter or blur, Escape cancels). Default false. */
26
+ editable?: boolean;
27
+ /**
28
+ * Turns the minus button into a remove (trash) button while the value is
29
+ * at `min`: it calls `onRemove` instead of stepping. Without it the minus
30
+ * button is disabled at `min`.
31
+ */
32
+ onRemove?: () => void;
33
+ /** Disables every control. */
34
+ disabled?: boolean;
35
+ };
@@ -0,0 +1,28 @@
1
+ type Options = {
2
+ label: string;
3
+ value?: number;
4
+ defaultValue?: number;
5
+ onValueChange?: (value: number) => void;
6
+ min: number;
7
+ max?: number;
8
+ step: number;
9
+ onRemove?: () => void;
10
+ };
11
+ /** The stepper's value (controlled or not), its limits, its button names and what each button does. */
12
+ export declare function useQuantityStepper({ label, value: controlled, defaultValue, onValueChange, min, max, step, onRemove, }: Options): {
13
+ value: number;
14
+ set: (next: number) => void;
15
+ limits: {
16
+ min: number;
17
+ max: number | undefined;
18
+ step: number;
19
+ };
20
+ atMin: boolean;
21
+ atMax: boolean;
22
+ removing: boolean;
23
+ decreaseLabel: string;
24
+ increaseLabel: string;
25
+ decrease: () => void;
26
+ increase: () => void;
27
+ };
28
+ export {};
@@ -5,7 +5,7 @@ import { AppShellLinkComponent, MenuItem } from './types.js';
5
5
  * Expanded (the sidebar open, the phone's menu sheet), an entry's `children`
6
6
  * are nested under it, indented.
7
7
  */
8
- export declare function AppSidebarEntries({ items, activeUrl, linkComponent, expanded, sheet, }: {
8
+ export declare function AppSidebarEntries({ items, activeUrl, linkComponent, expanded, sheet, persistPrefix, }: {
9
9
  items: MenuItem[];
10
10
  /** The `url` of the one current entry, a child included. */
11
11
  activeUrl?: string;
@@ -13,4 +13,6 @@ export declare function AppSidebarEntries({ items, activeUrl, linkComponent, exp
13
13
  expanded?: boolean;
14
14
  /** The phone's menu sheet: a `childrenIn: 'sidebar'` entry lists no children. */
15
15
  sheet?: boolean;
16
+ /** `navigation.persistKey`, for the groups marked `persistKey: true`. */
17
+ persistPrefix?: string;
16
18
  }): import("react").JSX.Element[];
@@ -1,12 +1,17 @@
1
1
  import { AppShellLinkComponent, MenuItem } from './types.js';
2
+ export declare const GROUP_STORAGE_PREFIX = "nxgt-sidebar-group:";
2
3
  /**
3
4
  * An entry of the expanded sidebar whose `children` fold (`defaultExpanded`
4
5
  * set): the entry's row with a chevron button after it, then the children
5
- * nested, hidden (out of the tab order too) while folded. The state is local, and a folded group opens at first when its current page is a child:
6
- * the server render and the first client render both follow `defaultExpanded`.
6
+ * nested, hidden (out of the tab order too) while folded. A folded group opens at first when its current page is a child. The
7
+ * server render and the first client render both follow `defaultExpanded`;
8
+ * with a `persistKey` the saved choice is read after hydration, otherwise the state is local.
9
+ * `badgeWhen: 'collapsed'` draws the entry's badge only while folded.
7
10
  */
8
- export declare function AppSidebarGroup({ item, activeUrl, linkComponent, }: {
11
+ export declare function AppSidebarGroup({ item, activeUrl, linkComponent, persistPrefix, }: {
9
12
  item: MenuItem;
10
13
  activeUrl?: string;
11
14
  linkComponent: AppShellLinkComponent;
15
+ /** `navigation.persistKey`: what a `persistKey: true` entry derives its key from. */
16
+ persistPrefix?: string;
12
17
  }): import("react").JSX.Element;
@@ -37,6 +37,8 @@ export type AppSidebarProps = {
37
37
  align?: 'start' | 'center';
38
38
  /** Set by the header's menu sheet: an entry marked `childrenIn: 'sidebar'` shows no children. */
39
39
  sheet?: boolean;
40
+ /** `navigation.persistKey`, set by the layout: what a group with `persistKey: true` derives its key from. */
41
+ groupPersistPrefix?: string;
40
42
  } & SidebarProps;
41
43
  /**
42
44
  * The application sidebar: a navigation entry per {@link MenuItem}, with the
@@ -47,4 +49,4 @@ export type AppSidebarProps = {
47
49
  * {@link findActiveMenuItem} for why that cannot be decided one entry at a
48
50
  * time once a menu is mounted anywhere but `/`.
49
51
  */
50
- export declare function AppSidebar({ items, brand, logo, name, context, linkComponent: ownLink, align, sheet, className, withToggleIcon, expanded, onExpandedChange, ...props }: AppSidebarProps): import("react").JSX.Element;
52
+ export declare function AppSidebar({ items, brand, logo, name, context, linkComponent: ownLink, align, sheet, groupPersistPrefix, className, withToggleIcon, expanded, onExpandedChange, ...props }: AppSidebarProps): import("react").JSX.Element;
@@ -73,6 +73,21 @@ export type MenuItem = {
73
73
  * sheet and the other presets ignore it. Ignored without `children` and with `display: 'icon'`.
74
74
  */
75
75
  defaultExpanded?: boolean;
76
+ /**
77
+ * Remembers the folded or open state of a collapsible group (`defaultExpanded`
78
+ * set, with `children`) in this browser. A string is the storage key; `true`
79
+ * derives it from `navigation.persistKey` and this entry's `url` (it saves nothing without
80
+ * that key). The saved choice is read after hydration, so a server render and
81
+ * the first client render both follow `defaultExpanded` (or the current child).
82
+ * Unset: the state is local and resets on reload. Ignored without `defaultExpanded`.
83
+ */
84
+ persistKey?: string | true;
85
+ /**
86
+ * When a collapsible group's own `badge` shows. `'always'` (the default):
87
+ * folded or open. `'collapsed'`: only while the group is folded, so the
88
+ * children's own badges are not signalled twice. Ignored without `defaultExpanded` and `children`.
89
+ */
90
+ badgeWhen?: 'always' | 'collapsed';
76
91
  /** The section this entry belongs to, already translated: the drawer draws one section per group. */
77
92
  group?: string;
78
93
  /** Whether a bottom navigation bar shows this entry (the others go under "More"): the bar and the floating toolbar. */
@@ -0,0 +1,20 @@
1
+ import { PaneLayoutBreakpoint, PaneLayoutDefaultOpen, PaneLayoutPhone } from './pane-layout.js';
2
+ /** Shared frames for the phone-mode stories: container-sized, same content. */
3
+ declare const WIDTHS: {
4
+ readonly 390: "w-[390px]";
5
+ readonly 840: "w-[840px]";
6
+ readonly 1440: "w-[1440px]";
7
+ readonly fill: "w-full";
8
+ };
9
+ export declare function Frame({ width, phone, dark, breakpoint, defaultOpen, }: {
10
+ width: keyof typeof WIDTHS;
11
+ phone?: PaneLayoutPhone;
12
+ dark?: boolean;
13
+ breakpoint?: PaneLayoutBreakpoint;
14
+ defaultOpen?: PaneLayoutDefaultOpen;
15
+ }): import("react").JSX.Element;
16
+ export declare function Frames({ phone, dark, }: {
17
+ phone?: PaneLayoutPhone;
18
+ dark?: boolean;
19
+ }): import("react").JSX.Element;
20
+ export {};
@@ -1,17 +1,22 @@
1
1
  import { ComponentProps } from 'react';
2
2
  import { PaneLayoutContent } from './partials/pane-layout-content.js';
3
- import { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './partials/pane-layout-context.js';
3
+ import { PaneLayoutBreakpoint, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './partials/pane-layout-context.js';
4
4
  import { PaneLayoutPane } from './partials/pane-layout-pane.js';
5
5
  import { PaneLayoutTrigger } from './partials/pane-layout-trigger.js';
6
6
  export { PaneLayoutContent, type PaneLayoutContentProps, } from './partials/pane-layout-content.js';
7
- export type { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, } from './partials/pane-layout-context.js';
7
+ export type { PaneLayoutBreakpoint, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, } from './partials/pane-layout-context.js';
8
8
  export { usePaneLayout } from './partials/pane-layout-context.js';
9
9
  export { PaneLayoutPane, type PaneLayoutPaneProps, } from './partials/pane-layout-pane.js';
10
10
  export { PaneLayoutTrigger, type PaneLayoutTriggerProps, } from './partials/pane-layout-trigger.js';
11
11
  export interface PaneLayoutProps extends ComponentProps<'div'> {
12
12
  open?: boolean;
13
13
  onOpenChange?: (open: boolean) => void;
14
- defaultOpen?: boolean;
14
+ /**
15
+ * Whether the pane starts open: a boolean for every viewport, `'desktop'`
16
+ * (open wide, shut on a phone) or `{ desktop, phone }`. The phone value
17
+ * applies from the first client render, with no sheet flash.
18
+ */
19
+ defaultOpen?: PaneLayoutDefaultOpen;
15
20
  paneSide?: PaneSide;
16
21
  /**
17
22
  * How the pane shows below 768px: `sheet` (side sheet), `bottom` (bottom
@@ -1,7 +1,7 @@
1
1
  import { PaneLayoutBreakpoint, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
2
2
  /** The flex direction of the row that holds the pane and the content. */
3
- export declare function paneRowClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneSide: PaneSide): string;
3
+ export declare function paneRowClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint): string;
4
4
  /** The inline pane's size, and when it gives way to a sheet or a stack. */
5
- export declare function inlinePaneClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneWidth: PaneLayoutPaneWidth): string;
5
+ export declare function inlinePaneClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneWidth: PaneLayoutPaneWidth, paneSide: PaneSide): string;
6
6
  /** The edge the pane shares with the content. */
7
7
  export declare function paneBorderClass(phone: PaneLayoutPhone | undefined, breakpoint: PaneLayoutBreakpoint, paneSide: PaneSide): "border-t md:border-t-0 md:border-r" | "border-t md:border-t-0 md:border-l" | "border-t @3xl:border-t-0 @3xl:border-r" | "border-t @3xl:border-t-0 @3xl:border-l" | "border-l" | "border-r";
@@ -10,6 +10,15 @@ export type PaneLayoutPhone = 'sheet' | 'bottom' | 'stack';
10
10
  export type PaneLayoutBreakpoint = 'viewport' | 'container';
11
11
  /** Width of the inline pane: `sm` 16rem, `md` 20rem (default), `lg` 24rem. */
12
12
  export type PaneLayoutPaneWidth = 'sm' | 'md' | 'lg';
13
+ /**
14
+ * Whether the pane starts open. A boolean applies to every viewport; `'desktop'`
15
+ * is open on a wide screen and shut on a phone; an object sets each side
16
+ * (a missing key is shut).
17
+ */
18
+ export type PaneLayoutDefaultOpen = boolean | 'desktop' | {
19
+ desktop?: boolean;
20
+ phone?: boolean;
21
+ };
13
22
  export interface PaneLayoutContextProps {
14
23
  open: boolean;
15
24
  setOpen: (open: boolean | ((prevOpen: boolean) => boolean)) => void;
@@ -1,10 +1,15 @@
1
1
  import { RefObject } from 'react';
2
- import { PaneLayoutBreakpoint, PaneLayoutContextProps, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
2
+ import { PaneLayoutBreakpoint, PaneLayoutContextProps, PaneLayoutDefaultOpen, PaneLayoutPaneWidth, PaneLayoutPhone, PaneSide } from './pane-layout-context.js';
3
3
  export declare const PHONE_MAX = 768;
4
+ /** The default open state for a wide screen and for a phone. */
5
+ export declare function resolveDefaultOpen(d: PaneLayoutDefaultOpen): {
6
+ desktop: boolean;
7
+ phone: boolean;
8
+ };
4
9
  interface Options {
5
10
  open?: boolean;
6
11
  onOpenChange?: (open: boolean) => void;
7
- defaultOpen: boolean;
12
+ defaultOpen: PaneLayoutDefaultOpen;
8
13
  paneSide: PaneSide;
9
14
  phone?: PaneLayoutPhone;
10
15
  breakpoint: PaneLayoutBreakpoint;
@@ -16,6 +16,8 @@ export type PanelCardProps = Omit<ComponentProps<'div'>, 'title'> & {
16
16
  /**
17
17
  * A titled card for the side of a page (an `ActivityContent` aside) or its
18
18
  * sections: a heading, an optional description and header actions over the
19
- * content. The card is a named region, labelled by its heading.
19
+ * content. The card is a named region, labelled by its heading. The title is
20
+ * set in the card-title step (`title-sm` emphasized), one step below an
21
+ * `ActivityContent` page title, whatever its heading level.
20
22
  */
21
23
  export declare function PanelCard({ title, description, headingLevel, actions, className, children, ...props }: PanelCardProps): import("react").JSX.Element;
@@ -9,8 +9,16 @@ type CollapsibleTriggerProps = ComponentProps<typeof CollapsiblePrimitive.Collap
9
9
  * look and brings its own icon.
10
10
  */
11
11
  variant?: 'tonal' | 'text';
12
+ /**
13
+ * With `variant="text"`, drops the inline padding so the label starts at
14
+ * the section's left edge, and takes the font of its parent, so the
15
+ * trigger can sit inside a heading (`Typography as="h3"`) and line up
16
+ * with the headings around it. The chevron, its rotation, the hover and
17
+ * the focus ring stay. Ignored on the other variants.
18
+ */
19
+ flush?: boolean;
12
20
  };
13
- declare function CollapsibleTrigger({ className, children, variant, asChild, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
21
+ declare function CollapsibleTrigger({ className, children, variant, flush, asChild, ...props }: CollapsibleTriggerProps): import("react").JSX.Element;
14
22
  /**
15
23
  * Springs open to its height and folds away (collapsible.css); reduced
16
24
  * motion shows and hides it at once.
@@ -8,7 +8,12 @@ import { TabsScrollButtonsMode } from '../tabs-overflow-classes.js';
8
8
  * `scrollButtons="none"` the buttons are left out and the list stays a plain
9
9
  * touch-scrollable row with a soft fade on each side that hides tabs.
10
10
  */
11
- export declare function TabsList({ scrollButtons, className, children, ref, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
11
+ export declare function TabsList({ scrollButtons, fullWidth, className, children, ref, ...props }: ComponentProps<typeof TabsPrimitive.List> & {
12
12
  /** `auto` (default): scroll buttons while tabs are hidden; `none`: no buttons. */
13
13
  scrollButtons?: TabsScrollButtonsMode;
14
+ /**
15
+ * `segmented` only: the list fills its container and its tabs share the
16
+ * width in equal parts. Ignored by `underline`, which already stretches.
17
+ */
18
+ fullWidth?: boolean;
14
19
  }): import("react").JSX.Element;
@@ -18,6 +18,7 @@ export type TabsLook = 'underline' | 'segmented';
18
18
  export declare function tabsLook(variant: TabsVariant | undefined): TabsLook;
19
19
  export declare const TABS_ROOT: Record<TabsLook, string>;
20
20
  export declare const TABS_LIST: Record<TabsLook, string>;
21
+ export declare const TABS_LIST_FULL = "w-full [&>[role=tab]]:flex-1 [&>[role=tab]]:basis-0";
21
22
  export declare const TABS_TRIGGER: Record<TabsLook, string>;
22
23
  export declare const TABS_INDICATOR: Record<TabsLook, string>;
23
24
  /** The label beside a trigger's icon. */
@@ -16,6 +16,14 @@ type ChipGroupFieldBase = ChoiceGroupBase & ChoiceSelection & {
16
16
  * the accessible description.
17
17
  */
18
18
  showDisabledReason?: boolean;
19
+ /**
20
+ * `'wrap'` (default) lets the chips flow onto several lines. `'scroll'`
21
+ * keeps them on one line that scrolls sideways (touch, trackpad, the
22
+ * wheel; a focused chip scrolls into view), with a fade at each
23
+ * edge that hides more chips. The page never scrolls sideways. Ignored
24
+ * with `columns` or `groups`, which lay the chips out in a grid.
25
+ */
26
+ overflow?: 'wrap' | 'scroll';
19
27
  };
20
28
  export type ChipGroupFieldProps = ChipGroupFieldBase & {
21
29
  /** The chips, in one flow. Give `options` or `groups`. */
@@ -1,3 +1,4 @@
1
+ import { Tone } from '../../tones.js';
1
2
  import { ChoiceOption } from '../choice-group/choice-group.types.js';
2
3
  export type ChipGroupOption = ChoiceOption & {
3
4
  label: string;
@@ -5,6 +6,11 @@ export type ChipGroupOption = ChoiceOption & {
5
6
  description?: string;
6
7
  /** Shown after the label and added to its accessible name. */
7
8
  count?: number;
9
+ /**
10
+ * The chip's tone, as `Badge`'s: unselected a soft tint with the tone's text,
11
+ * selected the filled tone (the check still marks the choice). Neutral without one.
12
+ */
13
+ tone?: Tone;
8
14
  };
9
15
  /** A titled run of options, such as "Morning" or "Afternoon". */
10
16
  export type ChipGroupSection = {
@@ -0,0 +1,10 @@
1
+ type Reason = {
2
+ id: string;
3
+ text: string;
4
+ label: string;
5
+ };
6
+ /** The disabled options' reasons, printed below the whole chip row ("Label: reason"). */
7
+ export declare function ChipGroupReasons({ reasons }: {
8
+ reasons: Reason[];
9
+ }): import("react").JSX.Element | null;
10
+ export {};
@@ -0,0 +1,12 @@
1
+ import { RefObject } from 'react';
2
+ /**
3
+ * The single scrolling line of `ChipGroupField overflow="scroll"`: the ref and
4
+ * attributes of the chips' box, and its classes. `data-fade` says which edge
5
+ * hides more chips (`start`, `end` or `both`), read off the scroll offset.
6
+ * With `enabled` false nothing is attached and the chips wrap.
7
+ */
8
+ export declare function useChipRail(enabled: boolean): {
9
+ ref: RefObject<HTMLDivElement | null> | undefined;
10
+ props: Record<string, string | undefined> | undefined;
11
+ className: string | undefined;
12
+ };
@@ -1,4 +1,4 @@
1
- import { ComponentProps, ReactNode } from 'react';
1
+ import { ComponentProps, ReactNode, Ref } from 'react';
2
2
  import { useChoiceGroup } from './use-choice-group.js';
3
3
  export type ChoiceGroupRootProps = {
4
4
  /** What the root reads of the group: not its items, so any element type fits. */
@@ -11,10 +11,13 @@ export type ChoiceGroupRootProps = {
11
11
  inlineReasons?: boolean;
12
12
  /** Printed after the items, outside their flow: the visible reasons the items point to. */
13
13
  reasonsBelow?: ReactNode;
14
+ /** Ref and extra attributes of the box that holds the items (a scrolling rail reads its edges). */
15
+ contentRef?: Ref<HTMLDivElement>;
16
+ contentProps?: ComponentProps<'div'> & Record<`data-${string}`, string | undefined>;
14
17
  children: ReactNode;
15
18
  } & Omit<ComponentProps<'div'>, 'children' | 'role' | 'id' | 'onKeyDown'>;
16
19
  /**
17
20
  * A choice group's root: label, items, help or "not valid" hint, the hidden
18
21
  * reasons items point to, and a polite live region for the count.
19
22
  */
20
- export declare function ChoiceGroupRoot({ group, name, slot, className, contentClassName, inlineReasons, reasonsBelow, children, ref: _ref, ...props }: ChoiceGroupRootProps): import("react").JSX.Element;
23
+ export declare function ChoiceGroupRoot({ group, name, slot, className, contentClassName, inlineReasons, reasonsBelow, contentRef, contentProps, children, ref: _ref, ...props }: ChoiceGroupRootProps): import("react").JSX.Element;
@@ -0,0 +1,25 @@
1
+ /** A point of a series on the plot, in pixels. */
2
+ export type PlotPoint = {
3
+ x: number;
4
+ y: number;
5
+ };
6
+ /**
7
+ * Where a threshold's label goes: the first of end-above, end-below, start-above
8
+ * and start-below whose text box stays inside the plot and meets no series
9
+ * segment nor marker within its x-range. When none is free, the label stays at
10
+ * the end, clamped inside the plot (`thresholdLabelBaseline`). `edge` is the x
11
+ * of the label's end side (its right edge), `startEdge` of its start side (its
12
+ * left edge); `width` is the text's width. The label box spans `edge - width`
13
+ * to `edge` at the end side, `startEdge` to `startEdge + width` at the start.
14
+ */
15
+ export declare function placeThresholdLabel(input: {
16
+ lineY: number;
17
+ floor: number;
18
+ edge: number;
19
+ startEdge: number;
20
+ width: number;
21
+ series: readonly (readonly (PlotPoint | null)[])[];
22
+ }): {
23
+ side: 'end' | 'start';
24
+ baseline: number;
25
+ };
@@ -57,9 +57,10 @@ export declare function markersBetween(ys: readonly (number | null)[], x: (index
57
57
  * of the plot. `pointYs` are the y of the series' points under the label's
58
58
  * width: when one would sit on the label above the line and none would
59
59
  * under it, the label goes to the other side, so it never covers a point or
60
- * its marker.
60
+ * its marker. `floor` is the plot's height: the label stays inside the plot,
61
+ * so a side with no room is left for the other, or the baseline is clamped.
61
62
  */
62
- export declare function thresholdLabelBaseline(lineY: number, pointYs?: readonly number[]): number;
63
+ export declare function thresholdLabelBaseline(lineY: number, pointYs?: readonly number[], floor?: number): number;
63
64
  /** How many of `values` lie outside `band` (a missing value is not counted, nor one in a row where a stepped band has no range), and how many there are. */
64
65
  export declare function outsideBand(values: readonly (number | null | undefined)[], band: Pick<RefBand, 'from' | 'to' | 'ranges'>): {
65
66
  outside: number;
@@ -1374,6 +1374,9 @@ export declare const en: {
1374
1374
  "unit-named": string;
1375
1375
  "use-typed": string;
1376
1376
  };
1377
+ "quantity-stepper": {
1378
+ remove: string;
1379
+ };
1377
1380
  "markdown-textarea-field": {
1378
1381
  write: string;
1379
1382
  preview: string;
@@ -1364,6 +1364,9 @@ declare const _default: {
1364
1364
  "unit-named": "{label} unit",
1365
1365
  "use-typed": "Use “{unit}”"
1366
1366
  },
1367
+ "quantity-stepper": {
1368
+ "remove": "Remove {label}"
1369
+ },
1367
1370
  "markdown-textarea-field": {
1368
1371
  "write": "Write",
1369
1372
  "preview": "Preview",
@@ -3205,7 +3208,7 @@ declare const _default: {
3205
3208
  "modulo": "Modulo",
3206
3209
  "separator": "Argument separator",
3207
3210
  "answer": "Previous answer",
3208
- "double-zero": "Double zero",
3211
+ "double-zero": "00, double zero",
3209
3212
  "quantity": "Enter a quantity",
3210
3213
  "discount": "Enter a discount",
3211
3214
  "add-line": "Add to ticket",
@@ -1374,6 +1374,9 @@ export declare const fr: {
1374
1374
  "unit-named": string;
1375
1375
  "use-typed": string;
1376
1376
  };
1377
+ "quantity-stepper": {
1378
+ remove: string;
1379
+ };
1377
1380
  "markdown-textarea-field": {
1378
1381
  write: string;
1379
1382
  preview: string;
@@ -1364,6 +1364,9 @@ declare const _default: {
1364
1364
  "unit-named": "Unité de {label}",
1365
1365
  "use-typed": "Utiliser « {unit} »"
1366
1366
  },
1367
+ "quantity-stepper": {
1368
+ "remove": "Retirer {label}"
1369
+ },
1367
1370
  "markdown-textarea-field": {
1368
1371
  "write": "Écrire",
1369
1372
  "preview": "Aperçu",
@@ -3205,7 +3208,7 @@ declare const _default: {
3205
3208
  "modulo": "Modulo",
3206
3209
  "separator": "Séparateur d’arguments",
3207
3210
  "answer": "Dernier résultat",
3208
- "double-zero": "Double zéro",
3211
+ "double-zero": "00, double zéro",
3209
3212
  "quantity": "Saisir une quantité",
3210
3213
  "discount": "Saisir une remise",
3211
3214
  "add-line": "Ajouter au ticket",
@@ -1372,6 +1372,9 @@ export declare const resources: {
1372
1372
  "unit-named": string;
1373
1373
  "use-typed": string;
1374
1374
  };
1375
+ "quantity-stepper": {
1376
+ remove: string;
1377
+ };
1375
1378
  "markdown-textarea-field": {
1376
1379
  write: string;
1377
1380
  preview: string;
@@ -4997,6 +5000,9 @@ export declare const resources: {
4997
5000
  "unit-named": string;
4998
5001
  "use-typed": string;
4999
5002
  };
5003
+ "quantity-stepper": {
5004
+ remove: string;
5005
+ };
5000
5006
  "markdown-textarea-field": {
5001
5007
  write: string;
5002
5008
  preview: string;