@scalewing/react 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @scalewing/react
 
+## 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/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,18 @@ type SegmentedLabel = {
     'aria-label'?: never;
     'aria-labelledby': string;
 };
+/**
+ * `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';
 export type SegmentedControlProps = SegmentedLabel & {
     items: readonly SegmentedItem[];
     onChange: (id: string) => void;
     value: string;
+    variant?: SegmentedControlVariant;
 };
 export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/SegmentedControl.js

@@ -1,7 +1,7 @@
 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({ items, onChange, value, variant = 'compact', ...labelProps }, ref) {
     function onKeyDown(event) {
         if (event.key !== 'ArrowRight' && event.key !== 'ArrowLeft') {
             return;
@@ -17,7 +17,7 @@ export const SegmentedControl = forwardRef(function SegmentedControl({ items, on
             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, className: cx('sw-segmented', variant === 'filled' && 'sw-segmented-filled'), 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: () => {
                     if (!selected) {

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,30 @@ 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-table-wrap {
   overflow: auto;
   width: 100%;
@@ -177,6 +202,7 @@ export function dataClassCatalog() {
         'sw-segmented',
         'sw-segmented-item',
         'sw-segmented-item-selected',
+        'sw-segmented-filled',
         '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

@@ -14,8 +14,7 @@ export { BarChart, type BarChartItem, type BarChartProps, } from './components/B
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { Box, type BoxElement, type BoxProps } from './components/Box.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 +22,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

@@ -13,7 +13,7 @@ export { BarChart, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
 export { Box } from './components/Box.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;
@@ -1098,6 +1100,30 @@ 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-table-wrap {
   overflow: auto;
   width: 100%;
@@ -1389,6 +1415,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 +2012,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.2.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",