@scalewing/react 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @scalewing/react
 
+## 1.3.0
+
+### Minor Changes
+
+- 3ce39ea: Add `ButtonGroup`, the action row of a form or dialog: buttons on one line from the `md` breakpoint up, aligned `start`, `end` (default) or `between`; below `md` they stack full width in source order (generated `sw-button-group` and `sw-button-group-*`).
+- 3e20a6e: Add `SegmentedControl` `disabled`: the group reports `aria-disabled`, every segment is a disabled button, arrow keys and clicks are ignored, and the track fades to `--sw-disabled-opacity` (generated `sw-segmented-disabled`). The recorded choice stays visible, for an identity that can no longer change; a disabled control may omit `onChange`.
+
+## 1.2.0
+
+### Minor Changes
+
+- 829dbdb: Add `Dialog` `size` (`'md' | 'lg'`): `lg` widens the modal to `--sw-dialog-max-lg` (56rem) so a row of six fields or a data grid fits without folding. The default stays `md` (32rem); phones keep the viewport gutter for both.
+- 28b53e0: `Grid` accepts `columns={6}` and `columnsBelow={{ md: 6 }}` (generated `sw-grid-cols-6` and `sw-grid-cols-below-md-6`) so a six-denomination entry row keeps one row on desktop. Five and seven still throw.
+- 9363116: Add `SegmentedControl` `variant` (`'compact' | 'filled'`): `filled` gives every segment the same width and an accent-filled selection (generated `sw-segmented-filled`); it takes the full width in a Stack and its labels' width in an Inline. The default `compact` look is unchanged.
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/components/ButtonGroup.d.ts

@@ -0,0 +1,14 @@
+import { type BoxProps } from './Box.js';
+export type ButtonGroupJustify = 'start' | 'end' | 'between';
+export type ButtonGroupProps = BoxProps & {
+    /** Where the row sits from the `md` breakpoint up; below it every button stacks full width in source order. */
+    justify?: ButtonGroupJustify;
+};
+/**
+ * The action row of a form or dialog: buttons on one line, wrapping when
+ * they must, aligned to the end by default. On a phone the same buttons
+ * stack full width so each one is a whole-row target, in source order
+ * (put the primary action last, as the row already does). It is a `group`,
+ * so an `aria-label` names the row for assistive tech.
+ */
+export declare function ButtonGroup({ className, justify, ...rest }: ButtonGroupProps): import("react").JSX.Element;

package/dist/components/ButtonGroup.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cx } from '../class-names.js';
+import { Box } from './Box.js';
+/**
+ * The action row of a form or dialog: buttons on one line, wrapping when
+ * they must, aligned to the end by default. On a phone the same buttons
+ * stack full width so each one is a whole-row target, in source order
+ * (put the primary action last, as the row already does). It is a `group`,
+ * so an `aria-label` names the row for assistive tech.
+ */
+export function ButtonGroup({ className, justify = 'end', ...rest }) {
+    return (_jsx(Box, { className: cx('sw-button-group', `sw-button-group-${justify}`, className), role: "group", ...rest }));
+}

package/dist/components/Dialog.d.ts

@@ -1,8 +1,14 @@
 import { type DialogHTMLAttributes, type ReactNode } from 'react';
+/**
+ * `md` is the reading width (32rem) for a message or a short form; `lg`
+ * (56rem) holds a row of six fields or a data grid without folding it.
+ */
+export type DialogSize = 'md' | 'lg';
 export type DialogProps = Omit<DialogHTMLAttributes<HTMLDialogElement>, 'onClose' | 'open' | 'title' | 'children'> & {
     open: boolean;
     onClose: () => void;
+    size?: DialogSize;
     title: string;
     children: ReactNode;
 };
-export declare function Dialog({ children, className, onClose, open, title, ...rest }: DialogProps): import("react").JSX.Element;
+export declare function Dialog({ children, className, onClose, open, size, title, ...rest }: DialogProps): import("react").JSX.Element;

package/dist/components/Dialog.js

@@ -5,7 +5,7 @@ import { cx } from '../class-names.js';
 import { spacingClassNames } from '../spacing-classes.js';
 import { Stack } from './Stack.js';
 import { Text } from './Text.js';
-export function Dialog({ children, className, onClose, open, title, ...rest }) {
+export function Dialog({ children, className, onClose, open, size = 'md', title, ...rest }) {
     const nodeRef = useRef(null);
     const titleId = useId();
     useEffect(() => {
@@ -23,7 +23,7 @@ export function Dialog({ children, className, onClose, open, title, ...rest }) {
             node.close();
         }
     }, [open]);
-    return (_jsx("dialog", { ...rest, ref: nodeRef, "aria-labelledby": titleId, className: cx('sw-dialog', ...spacingClassNames({ padding: 5 }), className), onClose: onClose, onPointerDown: (event) => {
+    return (_jsx("dialog", { ...rest, ref: nodeRef, "aria-labelledby": titleId, className: cx('sw-dialog', size === 'lg' && 'sw-dialog-lg', ...spacingClassNames({ padding: 5 }), className), onClose: onClose, onPointerDown: (event) => {
             const rect = event.currentTarget.getBoundingClientRect();
             const inside = event.clientX >= rect.left &&
                 event.clientX <= rect.right &&

package/dist/components/SegmentedControl.d.ts

@@ -10,10 +10,29 @@ type SegmentedLabel = {
     'aria-label'?: never;
     'aria-labelledby': string;
 };
-export type SegmentedControlProps = SegmentedLabel & {
-    items: readonly SegmentedItem[];
+/**
+ * `compact` is the quiet chip track for a section switch; `filled` gives every
+ * segment the same width and paints the selected one in the accent, for a
+ * choice that decides what a form does. It sizes to its container: the full
+ * width in a Stack, the width of its widest label in an Inline.
+ */
+export type SegmentedControlVariant = 'compact' | 'filled';
+/**
+ * A disabled control can never report a change, so it needs no `onChange`;
+ * a live one must have it.
+ */
+type SegmentedChange = {
+    disabled?: false;
     onChange: (id: string) => void;
+} | {
+    /** Keeps the current choice visible but inert, for an identity that can no longer change. */
+    disabled: true;
+    onChange?: (id: string) => void;
+};
+export type SegmentedControlProps = SegmentedLabel & SegmentedChange & {
+    items: readonly SegmentedItem[];
     value: string;
+    variant?: SegmentedControlVariant;
 };
 export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/SegmentedControl.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
 import { cx } from '../class-names.js';
-export const SegmentedControl = forwardRef(function SegmentedControl({ items, onChange, value, ...labelProps }, ref) {
+export const SegmentedControl = forwardRef(function SegmentedControl({ disabled = false, items, onChange, value, variant = 'compact', ...labelProps }, ref) {
     function onKeyDown(event) {
-        if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
+        if (disabled || (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft')) {
             return;
         }
         const index = items.findIndex((item) => item.id === value);
@@ -14,14 +14,14 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ items, on
         const delta = event.key === 'ArrowRight' ? 1 : -1;
         const next = items[(index + delta + items.length) % items.length];
         if (next) {
-            onChange(next.id);
+            onChange?.(next.id);
         }
     }
-    return (_jsx("div", { ref: ref, className: "sw-segmented", onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
+    return (_jsx("div", { ref: ref, "aria-disabled": disabled || undefined, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled', disabled && 'sw-segmented-disabled'), onKeyDown: onKeyDown, role: "radiogroup", ...labelProps, children: items.map((item) => {
             const selected = item.id === value;
-            return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), onClick: () => {
+            return (_jsx("button", { "aria-checked": selected, className: cx('sw-segmented-item', selected && 'sw-segmented-item-selected'), disabled: disabled, onClick: () => {
                     if (!selected) {
-                        onChange(item.id);
+                        onChange?.(item.id);
                     }
                 }, role: "radio", type: "button", children: item.label }, item.id));
         }) }));

package/dist/css/css-button.d.ts

@@ -4,4 +4,5 @@ export declare function buttonClassNames(options: {
     variant: ButtonVariant;
 }): string[];
 export declare function cssButtonClasses(): string;
+export declare const buttonGroupJustifies: readonly ["start", "end", "between"];
 export declare function buttonClassCatalog(): string[];

package/dist/css/css-button.js

@@ -1,4 +1,5 @@
 import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
 const label = typographyVariants.label;
 export function buttonClassNames(options) {
     return [
@@ -57,12 +58,32 @@ export function cssButtonClasses() {
 }
 
 ${variantRules()}
-${sizeRules()}`;
+${sizeRules()}
+${groupRules()}`;
+}
+export const buttonGroupJustifies = ['start', 'end', 'between'];
+/** The action row: one line from md up, full-width stacked buttons below it. */
+function groupRules() {
+    const justify = {
+        start: 'flex-start',
+        end: 'flex-end',
+        between: 'space-between',
+    };
+    return [
+        `.sw-button-group { align-items: center; display: flex; flex-wrap: wrap; gap: var(--sw-space-2); min-width: 0; }`,
+        ...buttonGroupJustifies.map((name) => `.sw-button-group-${name} { justify-content: ${justify[name]}; }`),
+        `@media ${breakpointQuery('below', 'md')} {
+  .sw-button-group { align-items: stretch; flex-direction: column; }
+  .sw-button-group > * { width: 100%; }
+}`,
+    ].join('\n');
 }
 export function buttonClassCatalog() {
     return [
         'sw-button',
         ...buttonVariants.map((variant) => `sw-button-${variant}`),
         ...buttonSizes.map((size) => `sw-button-${size}`),
+        'sw-button-group',
+        ...buttonGroupJustifies.map((name) => `sw-button-group-${name}`),
     ];
 }

package/dist/css/css-data.js

@@ -3,6 +3,7 @@ export const badgeTones = ['neutral', 'accent', 'success', 'danger'];
 export const badgeSizes = ['sm', 'md'];
 const caption = typographyVariants.caption;
 const data = typographyVariants.data;
+const body = typographyVariants.body;
 export function badgeClassNames(tone, size = 'md') {
     return ['sw-badge', `sw-badge-${tone}`, `sw-badge-${size}`];
 }
@@ -89,6 +90,38 @@ export function cssDataClasses() {
   color: var(--sw-color-text);
 }
 
+.sw-segmented-filled {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+}
+
+.sw-segmented-filled .sw-segmented-item {
+  align-items: center;
+  color: var(--sw-color-text);
+  display: inline-flex;
+  font-size: ${body.fontSize}px;
+  justify-content: center;
+  letter-spacing: ${body.letterSpacing}px;
+  line-height: ${body.lineHeight}px;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-control-md-padding-inline);
+}
+
+.sw-segmented-filled .sw-segmented-item-selected {
+  background: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
+.sw-segmented-disabled {
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-segmented-item:disabled {
+  cursor: not-allowed;
+}
+
 .sw-table-wrap {
   overflow: auto;
   width: 100%;
@@ -177,6 +210,8 @@ export function dataClassCatalog() {
         'sw-segmented',
         'sw-segmented-item',
         'sw-segmented-item-selected',
+        'sw-segmented-filled',
+        'sw-segmented-disabled',
         'sw-table-wrap',
         'sw-table',
         'sw-table-end',

package/dist/css/css-dialog.js

@@ -15,6 +15,10 @@ export function cssDialogClasses() {
   width: calc(100% - var(--sw-space-8));
 }
 
+.sw-dialog-lg {
+  max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
+}
+
 .sw-dialog::backdrop {
   background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
 }
@@ -25,5 +29,5 @@ export function cssDialogClasses() {
 }`;
 }
 export function dialogClassCatalog() {
-    return ['sw-dialog'];
+    return ['sw-dialog', 'sw-dialog-lg'];
 }

package/dist/css/css-grid.d.ts

@@ -1,5 +1,5 @@
 import { type Breakpoint } from './breakpoints.js';
-export declare const gridColumnCounts: readonly [1, 2, 3, 4];
+export declare const gridColumnCounts: readonly [1, 2, 3, 4, 6];
 export type GridColumns = (typeof gridColumnCounts)[number];
 export declare function gridColumnsClass(columns: GridColumns): string;
 export declare function gridColumnsBelowClass(breakpoint: Breakpoint, columns: GridColumns): string;

package/dist/css/css-grid.js

@@ -1,5 +1,5 @@
 import { breakpointQuery, breakpoints, } from './breakpoints.js';
-export const gridColumnCounts = [1, 2, 3, 4];
+export const gridColumnCounts = [1, 2, 3, 4, 6];
 export function gridColumnsClass(columns) {
     return `sw-grid-cols-${columns}`;
 }

package/dist/css/css-variables.js

@@ -36,6 +36,7 @@ ${control}
   --sw-focus-ring-offset: ${focusRing.offset}px;
   --sw-container-max: 72rem;
   --sw-dialog-max: 32rem;
+  --sw-dialog-max-lg: 56rem;
   --sw-select-max: 16rem;
   --sw-split-min: ${splitScale.min}rem;
   --sw-split-size: ${splitScale.size}rem;

package/dist/index.d.ts

@@ -13,9 +13,9 @@ export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, bad
 export { BarChart, type BarChartItem, type BarChartProps, } from './components/BarChart.js';
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { Box, type BoxElement, type BoxProps } from './components/Box.js';
+export { ButtonGroup, type ButtonGroupJustify, type ButtonGroupProps, } from './components/ButtonGroup.js';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Dialog } from './components/Dialog.js';
-export type { DialogProps } from './components/Dialog.js';
+export { Dialog, type DialogProps, type DialogSize, } from './components/Dialog.js';
 export { Toast } from './components/Toast.js';
 export type { ToastProps } from './components/Toast.js';
 export { Field, type FieldProps, type FieldSize } from './components/Field.js';
@@ -23,7 +23,7 @@ export { Inline, type InlineProps } from './components/Inline.js';
 export { Split } from './components/Split.js';
 export type { SplitProps } from './components/Split.js';
 export { Nav, type NavProps } from './components/Nav.js';
-export { SegmentedControl, type SegmentedControlProps, type SegmentedItem, } from './components/SegmentedControl.js';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedControlVariant, type SegmentedItem, } from './components/SegmentedControl.js';
 export { Select } from './components/Select.js';
 export type { SelectAction, SelectOption, SelectProps, } from './components/Select.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';

package/dist/index.js

@@ -12,8 +12,9 @@ export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
 export { Box } from './components/Box.js';
+export { ButtonGroup, } from './components/ButtonGroup.js';
 export { Card } from './components/Card.js';
-export { Dialog } from './components/Dialog.js';
+export { Dialog, } from './components/Dialog.js';
 export { Toast } from './components/Toast.js';
 export { Field } from './components/Field.js';
 export { Inline } from './components/Inline.js';

package/dist/styles.css

@@ -39,6 +39,7 @@
   --sw-focus-ring-offset: 2px;
   --sw-container-max: 72rem;
   --sw-dialog-max: 32rem;
+  --sw-dialog-max-lg: 56rem;
   --sw-select-max: 16rem;
   --sw-split-min: 14rem;
   --sw-split-size: 22rem;
@@ -94,6 +95,7 @@
   --sw-focus-ring-offset: 2px;
   --sw-container-max: 72rem;
   --sw-dialog-max: 32rem;
+  --sw-dialog-max-lg: 56rem;
   --sw-select-max: 16rem;
   --sw-split-min: 14rem;
   --sw-split-size: 22rem;
@@ -774,6 +776,14 @@ body {
 .sw-button-xs { min-height: 28px; padding-inline: 10px; }
 .sw-button-sm { min-height: 32px; padding-inline: 12px; }
 .sw-button-md { min-height: 44px; padding-inline: 16px; }
+.sw-button-group { align-items: center; display: flex; flex-wrap: wrap; gap: var(--sw-space-2); min-width: 0; }
+.sw-button-group-start { justify-content: flex-start; }
+.sw-button-group-end { justify-content: flex-end; }
+.sw-button-group-between { justify-content: space-between; }
+@media not all and (min-width: 48rem) {
+  .sw-button-group { align-items: stretch; flex-direction: column; }
+  .sw-button-group > * { width: 100%; }
+}
 
 .sw-checkbox {
   display: flex;
@@ -1098,6 +1108,38 @@ body {
   color: var(--sw-color-text);
 }
 
+.sw-segmented-filled {
+  display: grid;
+  grid-auto-columns: minmax(0, 1fr);
+  grid-auto-flow: column;
+}
+
+.sw-segmented-filled .sw-segmented-item {
+  align-items: center;
+  color: var(--sw-color-text);
+  display: inline-flex;
+  font-size: 17px;
+  justify-content: center;
+  letter-spacing: -0.2px;
+  line-height: 25px;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-control-md-padding-inline);
+}
+
+.sw-segmented-filled .sw-segmented-item-selected {
+  background: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
+.sw-segmented-disabled {
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-segmented-item:disabled {
+  cursor: not-allowed;
+}
+
 .sw-table-wrap {
   overflow: auto;
   width: 100%;
@@ -1389,6 +1431,10 @@ body {
   width: calc(100% - var(--sw-space-8));
 }
 
+.sw-dialog-lg {
+  max-width: min(var(--sw-dialog-max-lg), calc(100vw - var(--sw-space-8)));
+}
+
 .sw-dialog::backdrop {
   background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
 }
@@ -1982,11 +2028,13 @@ body {
 .sw-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .sw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .sw-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.sw-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 @media not all and (min-width: 48rem) {
 .sw-grid-cols-below-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
 .sw-grid-cols-below-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .sw-grid-cols-below-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .sw-grid-cols-below-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.sw-grid-cols-below-md-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
 }
 .sw-denomination-grid {
   color: var(--sw-color-text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",