@scalewing/react 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @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

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/SegmentedControl.d.ts

@@ -17,9 +17,20 @@ type SegmentedLabel = {
  * width in a Stack, the width of its widest label in an Inline.
  */
 export type SegmentedControlVariant = 'compact' | 'filled';
-export type SegmentedControlProps = SegmentedLabel & {
-    items: readonly SegmentedItem[];
+/**
+ * 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;
 };

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, variant = 'compact', ...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: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled'), 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

@@ -114,6 +114,14 @@ export function cssDataClasses() {
   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%;
@@ -203,6 +211,7 @@ export function dataClassCatalog() {
         'sw-segmented-item',
         'sw-segmented-item-selected',
         'sw-segmented-filled',
+        'sw-segmented-disabled',
         'sw-table-wrap',
         'sw-table',
         'sw-table-end',

package/dist/index.d.ts

@@ -13,6 +13,7 @@ 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, type DialogProps, type DialogSize, } from './components/Dialog.js';
 export { Toast } from './components/Toast.js';

package/dist/index.js

@@ -12,6 +12,7 @@ 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 { Toast } from './components/Toast.js';

package/dist/styles.css

@@ -776,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;
@@ -1124,6 +1132,14 @@ body {
   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%;

package/package.json

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