@scalewing/react 0.6.1 → 1.0.0

package/dist/components/Spinner.d.ts

@@ -0,0 +1,11 @@
+export type SpinnerSize = 'sm' | 'md' | 'lg';
+export type SpinnerProps = {
+    label: string;
+    size?: SpinnerSize;
+    decorative?: false;
+} | {
+    label?: never;
+    size?: SpinnerSize;
+    decorative: true;
+};
+export declare function Spinner({ label, size, decorative, }: SpinnerProps): import("react").JSX.Element;

package/dist/components/Spinner.js

@@ -0,0 +1,10 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function Spinner({ label, size = 'md', decorative = false, }) {
+    const className = `sw-spinner sw-spinner-${size}`;
+    if (decorative)
+        return (_jsx("span", { "aria-hidden": "true", className: className, children: _jsx("span", { className: "sw-spinner-icon" }) }));
+    if (!label?.trim())
+        throw new RangeError('label must not be empty');
+    return (_jsxs("span", { className: className, role: "status", children: [_jsx("span", { "aria-hidden": "true", className: "sw-spinner-icon" }), _jsx("span", { className: "sw-sr-only", children: label })] }));
+}

package/dist/components/Stack.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { spacingClass } from '@scalewing/tokens';
+import { spacingClass } from '../css/spacing-classes.js';
 import { cx } from '../class-names.js';
 import { Box } from './Box.js';
 export function Stack({ align = 'stretch', className, gap = 0, justify = 'start', ...rest }) {

package/dist/components/Switch.d.ts

@@ -0,0 +1,8 @@
+export type SwitchProps = {
+    label: string;
+    checked: boolean;
+    onCheckedChange: (checked: boolean) => void;
+    disabled?: boolean;
+    description?: string;
+};
+export declare function Switch({ label, checked, onCheckedChange, disabled, description, }: SwitchProps): import("react").JSX.Element;

package/dist/components/Switch.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+export function Switch({ label, checked, onCheckedChange, disabled = false, description, }) {
+    const labelId = useId();
+    const descriptionId = useId();
+    return (_jsxs("label", { className: "sw-switch", children: [_jsxs("span", { className: "sw-switch-control", children: [_jsx("input", { "aria-checked": checked, "aria-describedby": description ? descriptionId : undefined, "aria-labelledby": labelId, checked: checked, className: "sw-switch-input", disabled: disabled, onChange: (event) => {
+                            if (!disabled)
+                                onCheckedChange(event.currentTarget.checked);
+                        }, role: "switch", type: "checkbox" }), _jsx("span", { "aria-hidden": "true", className: "sw-switch-track", children: _jsx("span", { className: "sw-switch-thumb" }) })] }), _jsxs("span", { className: "sw-switch-copy", children: [_jsx("span", { className: "sw-switch-label", id: labelId, children: label }), description ? (_jsx("span", { className: "sw-switch-description", id: descriptionId, children: description })) : null] })] }));
+}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,8 @@
+import { type ReactElement } from 'react';
+export type TooltipProps = {
+    content: string;
+    trigger: ReactElement<{
+        'aria-describedby'?: string;
+    }>;
+};
+export declare function Tooltip({ content, trigger }: TooltipProps): import("react").JSX.Element;

package/dist/components/Tooltip.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, useEffect, useId, useRef, useState, } from 'react';
+export function Tooltip({ content, trigger }) {
+    if (!content.trim())
+        throw new RangeError('content must not be empty');
+    const [open, setOpen] = useState(false);
+    const id = useId();
+    const wrapperRef = useRef(null);
+    const describedBy = [trigger.props['aria-describedby'], id]
+        .filter(Boolean)
+        .join(' ');
+    useEffect(() => {
+        if (!open)
+            return;
+        function dismissOutside(event) {
+            if (event.target instanceof Node &&
+                !wrapperRef.current?.contains(event.target))
+                setOpen(false);
+        }
+        document.addEventListener('pointerdown', dismissOutside);
+        return () => document.removeEventListener('pointerdown', dismissOutside);
+    }, [open]);
+    return (_jsxs("span", { className: "sw-tooltip-anchor", onBlurCapture: (event) => {
+            if (!event.currentTarget.contains(event.relatedTarget))
+                setOpen(false);
+        }, onFocusCapture: () => setOpen(true), onKeyDownCapture: (event) => {
+            if (event.key === 'Escape')
+                setOpen(false);
+        }, onPointerEnter: (event) => {
+            if (event.pointerType === 'mouse' || event.pointerType === 'pen')
+                setOpen(true);
+        }, onPointerLeave: (event) => {
+            if (event.pointerType === 'mouse' || event.pointerType === 'pen')
+                setOpen(false);
+        }, onPointerDownCapture: (event) => {
+            if (event.pointerType === 'touch')
+                setOpen((current) => !current);
+        }, ref: wrapperRef, children: [cloneElement(trigger, { 'aria-describedby': describedBy }), _jsx("span", { className: "sw-tooltip", hidden: !open, id: id, role: "tooltip", children: content })] }));
+}

package/dist/css/breakpoints.d.ts

@@ -0,0 +1,8 @@
+export declare const breakpointScale: {
+    readonly md: 48;
+};
+export type Breakpoint = keyof typeof breakpointScale;
+export declare const breakpoints: Breakpoint[];
+export type HideDirection = 'from' | 'below';
+export declare function hideClass(direction: HideDirection, breakpoint: Breakpoint): string;
+export declare function breakpointQuery(direction: HideDirection, breakpoint: Breakpoint): string;

package/dist/css/breakpoints.js

@@ -0,0 +1,11 @@
+export const breakpointScale = {
+    md: 48,
+};
+export const breakpoints = Object.keys(breakpointScale);
+export function hideClass(direction, breakpoint) {
+    return `sw-hide-${direction}-${breakpoint}`;
+}
+export function breakpointQuery(direction, breakpoint) {
+    const minWidth = `(min-width: ${breakpointScale[breakpoint]}rem)`;
+    return direction === 'from' ? minWidth : `not all and ${minWidth}`;
+}

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

@@ -0,0 +1,2 @@
+export declare function cssAccordionClasses(): string;
+export declare function accordionClassCatalog(): string[];

package/dist/css/css-accordion.js

@@ -0,0 +1,33 @@
+export function cssAccordionClasses() {
+    return `.sw-accordion {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  color: var(--sw-color-text);
+}
+
+.sw-accordion-summary {
+  cursor: pointer;
+  display: list-item;
+  min-height: var(--sw-control-md-min-height);
+}
+
+.sw-accordion-summary::-webkit-details-marker {
+  color: var(--sw-color-muted);
+}
+
+.sw-accordion-summary::marker {
+  color: var(--sw-color-muted);
+}
+
+.sw-accordion-summary:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}`;
+}
+export function accordionClassCatalog() {
+    return ['sw-accordion', 'sw-accordion-summary'];
+}

package/dist/css/css-action-menu.d.ts

@@ -0,0 +1,2 @@
+export declare function cssActionMenuClasses(): string;
+export declare function actionMenuClassCatalog(): string[];

package/dist/css/css-action-menu.js

@@ -0,0 +1,95 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+export function cssActionMenuClasses() {
+    return `.sw-action-menu {
+  display: inline-flex;
+  position: relative;
+}
+
+.sw-action-menu-trigger {
+  appearance: none;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  color: var(--sw-color-text);
+  cursor: pointer;
+  font: inherit;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-action-menu-trigger:focus-visible,
+.sw-action-menu-item:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-action-menu-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.sw-action-menu-list {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm), inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  margin: 0;
+  max-height: var(--sw-select-max);
+  max-width: calc(100vw - var(--sw-space-2));
+  min-width: max-content;
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: fixed;
+  z-index: 10;
+}
+
+.sw-action-menu-list[hidden] {
+  display: none;
+}
+
+.sw-action-menu-item {
+  align-items: center;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  gap: var(--sw-space-2);
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+  text-align: start;
+  width: 100%;
+}
+
+.sw-action-menu-item:hover,
+.sw-action-menu-item:focus-visible {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-action-menu-item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.sw-action-menu-item-danger {
+  color: var(--sw-color-danger);
+}`;
+}
+export function actionMenuClassCatalog() {
+    return [
+        'sw-action-menu',
+        'sw-action-menu-trigger',
+        'sw-action-menu-list',
+        'sw-action-menu-item',
+        'sw-action-menu-item-danger',
+    ];
+}

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

@@ -0,0 +1,7 @@
+import { type ButtonSize, type ButtonVariant } from '@scalewing/tokens';
+export declare function buttonClassNames(options: {
+    size: ButtonSize;
+    variant: ButtonVariant;
+}): string[];
+export declare function cssButtonClasses(): string;
+export declare function buttonClassCatalog(): string[];

package/dist/css/css-button.js

@@ -0,0 +1,68 @@
+import { buttonSizes, buttonVariants, controlScale, typographyVariants, } from '@scalewing/tokens';
+const label = typographyVariants.label;
+export function buttonClassNames(options) {
+    return [
+        'sw-button',
+        `sw-button-${options.variant}`,
+        `sw-button-${options.size}`,
+    ];
+}
+function variantRules() {
+    return [
+        `.sw-button-primary { background: var(--sw-color-accent); border-color: transparent; color: var(--sw-color-onAccent); }`,
+        `.sw-button-secondary { background: var(--sw-color-surface); border-color: var(--sw-color-border); color: var(--sw-color-text); }`,
+        `.sw-button-ghost { background: transparent; border-color: transparent; color: var(--sw-color-accent); }`,
+        `.sw-button-danger { background: var(--sw-color-danger); border-color: transparent; color: var(--sw-color-onDanger); }`,
+    ].join('\n');
+}
+function sizeRules() {
+    return buttonSizes
+        .map((size) => {
+        const control = controlScale[size];
+        return `.sw-button-${size} { min-height: ${control.minHeight}px; padding-inline: ${control.paddingInline}px; }`;
+    })
+        .join('\n');
+}
+export function cssButtonClasses() {
+    return `.sw-button {
+  appearance: none;
+  align-items: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  justify-content: center;
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  margin: 0;
+}
+
+.sw-button:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-button:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-button[aria-pressed='false'] {
+  opacity: var(--sw-quiet-opacity);
+}
+
+${variantRules()}
+${sizeRules()}`;
+}
+export function buttonClassCatalog() {
+    return [
+        'sw-button',
+        ...buttonVariants.map((variant) => `sw-button-${variant}`),
+        ...buttonSizes.map((size) => `sw-button-${size}`),
+    ];
+}

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

@@ -0,0 +1,2 @@
+export declare function cssChartClasses(): string;
+export declare function chartClassCatalog(): string[];

package/dist/css/css-chart.js

@@ -0,0 +1,98 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+const data = typographyVariants.data;
+export function cssChartClasses() {
+    return `.sw-bar-chart {
+  display: grid;
+  gap: var(--sw-space-2);
+}
+
+.sw-bar-chart-plot {
+  display: grid;
+  gap: var(--sw-space-2);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-bar-chart-row,
+.sw-bar-chart-axis {
+  align-items: center;
+  display: grid;
+  gap: var(--sw-space-3);
+  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(var(--sw-space-8), max-content);
+}
+
+.sw-bar-chart-label {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: 400;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-bar-chart-track {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  height: var(--sw-space-3);
+  min-width: 0;
+  overflow: hidden;
+}
+
+.sw-bar-chart-fill {
+  background: var(--sw-color-accent);
+  border-radius: inherit;
+  display: block;
+  height: 100%;
+  width: calc(var(--sw-bar-fill, 0) * 100%);
+}
+
+.sw-bar-chart-fill-negative {
+  background: var(--sw-color-danger);
+}
+
+.sw-bar-chart-value {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: ${data.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: ${data.fontWeight};
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+  text-align: end;
+}
+
+.sw-bar-chart-axis {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: 400;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-bar-chart-axis-track {
+  display: flex;
+  justify-content: space-between;
+}`;
+}
+export function chartClassCatalog() {
+    return [
+        'sw-bar-chart',
+        'sw-bar-chart-plot',
+        'sw-bar-chart-row',
+        'sw-bar-chart-axis',
+        'sw-bar-chart-label',
+        'sw-bar-chart-track',
+        'sw-bar-chart-fill',
+        'sw-bar-chart-fill-negative',
+        'sw-bar-chart-value',
+        'sw-bar-chart-axis-track',
+    ];
+}

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

@@ -0,0 +1,2 @@
+export declare function cssCheckboxClasses(): string;
+export declare function checkboxClassCatalog(): string[];

package/dist/css/css-checkbox.js

@@ -0,0 +1,127 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+export function cssCheckboxClasses() {
+    return `.sw-checkbox {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  max-width: 100%;
+}
+
+.sw-checkbox-label {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-height: var(--sw-control-md-min-height);
+  width: max-content;
+}
+
+.sw-checkbox-control {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--sw-space-5);
+  height: var(--sw-space-5);
+  position: relative;
+}
+
+.sw-checkbox-input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.sw-checkbox-mark {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  pointer-events: none;
+  position: relative;
+  width: var(--sw-space-5);
+}
+
+.sw-checkbox-mark::after {
+  border-bottom: 2px solid var(--sw-color-surface);
+  border-right: 2px solid var(--sw-color-surface);
+  content: '';
+  display: none;
+  height: var(--sw-space-2);
+  inset-block-start: var(--sw-space-1);
+  inset-inline-start: var(--sw-space-2);
+  position: absolute;
+  transform: rotate(45deg);
+  width: var(--sw-space-1);
+}
+
+.sw-checkbox-input:checked + .sw-checkbox-mark {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-checkbox-input:checked + .sw-checkbox-mark::after { display: block; }
+
+.sw-checkbox-input:focus-visible + .sw-checkbox-mark {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-checkbox-input[aria-invalid='true'] + .sw-checkbox-mark {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-checkbox-label:has(.sw-checkbox-input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-checkbox-text {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  line-height: ${label.lineHeight}px;
+  min-width: 0;
+}
+
+.sw-checkbox-description,
+.sw-checkbox-error {
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-checkbox-description { color: var(--sw-color-muted); }
+.sw-checkbox-error { color: var(--sw-color-danger); }
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-checkbox-mark { background: var(--sw-color-surface); }
+  .sw-checkbox-input:checked + .sw-checkbox-mark { background: var(--sw-color-accent); }
+}
+
+@media (forced-colors: active) {
+  .sw-checkbox-mark { background: Canvas; border-color: CanvasText; }
+  .sw-checkbox-input:checked + .sw-checkbox-mark { background: Highlight; border-color: Highlight; }
+  .sw-checkbox-input:checked + .sw-checkbox-mark::after { border-color: HighlightText; }
+  .sw-checkbox-input[aria-invalid='true'] + .sw-checkbox-mark { border-color: CanvasText; }
+}`;
+}
+export function checkboxClassCatalog() {
+    return [
+        'sw-checkbox',
+        'sw-checkbox-label',
+        'sw-checkbox-control',
+        'sw-checkbox-input',
+        'sw-checkbox-mark',
+        'sw-checkbox-text',
+        'sw-checkbox-description',
+        'sw-checkbox-error',
+    ];
+}

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

@@ -0,0 +1,2 @@
+export declare function cssChromeClasses(): string;
+export declare function chromeClassCatalog(): string[];

package/dist/css/css-chrome.js

@@ -0,0 +1,59 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+export function cssChromeClasses() {
+    return `.sw-app-header {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-lg);
+  box-shadow: inset 0 1px 0 var(--sw-glass-specular);
+  backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+  -webkit-backdrop-filter: blur(var(--sw-glass-blur)) saturate(var(--sw-glass-saturate));
+}
+
+.sw-app-header-sticky {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.sw-nav {
+  align-items: center;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-3);
+}
+
+.sw-nav a {
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+}
+
+.sw-nav a[aria-current='page'] {
+  color: var(--sw-color-text);
+}
+
+.sw-field-xs :is(select, input, textarea) {
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-field-xs select {
+  background-position:
+    calc(100% - var(--sw-space-3)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-space-3) - var(--sw-space-1))) calc(50% - 1px);
+  height: calc(var(--sw-control-xs-min-height) - 1px - 1px);
+  min-height: 0;
+  padding-inline-end: calc(
+    var(--sw-control-xs-padding-inline) + var(--sw-space-5)
+  );
+}`;
+}
+export function chromeClassCatalog() {
+    return ['sw-app-header', 'sw-app-header-sticky', 'sw-nav', 'sw-field-xs'];
+}

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

@@ -0,0 +1 @@
+export declare function cssComponentClasses(): string;