@scalewing/react 0.7.0 → 1.0.0

package/dist/css/css-palettes.js

@@ -0,0 +1,52 @@
+import { colorsForPalette, createTheme, paletteHasStylesheet, palettesWithStylesheets, semanticColorKeys, } from '@scalewing/tokens';
+function paletteCustomProperties(id, scheme) {
+    const overlay = colorsForPalette(id, scheme);
+    const theme = createTheme({ colorScheme: scheme, palette: id });
+    const lines = [];
+    for (const key of semanticColorKeys) {
+        if (overlay[key]) {
+            lines.push(`  --sw-color-${key}: ${theme.colors[key]};`);
+        }
+    }
+    lines.push(`  --sw-glass-blur: ${theme.glass.blur}px;`);
+    lines.push(`  --sw-glass-saturate: ${theme.glass.saturate};`);
+    lines.push(`  --sw-glass-fill: ${theme.glass.fill};`);
+    lines.push(`  --sw-glass-border: ${theme.glass.border};`);
+    lines.push(`  --sw-glass-specular: ${theme.glass.specular};`);
+    return lines.join('\n');
+}
+export function cssPaletteAttributes() {
+    return palettesWithStylesheets()
+        .map((palette) => {
+        const light = paletteCustomProperties(palette.id, 'light');
+        const dark = paletteCustomProperties(palette.id, 'dark');
+        return `[data-theme='light'][data-palette='${palette.id}'] {
+${light}
+}
+
+[data-theme='dark'][data-palette='${palette.id}'] {
+${dark}
+}`;
+    })
+        .join('\n\n');
+}
+export function generatePaletteStylesheet(id) {
+    if (!paletteHasStylesheet(id)) {
+        throw new Error(`Palette ${id} is the default and has no overlay stylesheet`);
+    }
+    const light = paletteCustomProperties(id, 'light');
+    const dark = paletteCustomProperties(id, 'dark');
+    return `/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+${light}
+}
+
+[data-theme='dark'] {
+${dark}
+}
+`;
+}
+export function paletteStylesheetIds() {
+    return palettesWithStylesheets().map((palette) => palette.id);
+}

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

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

package/dist/css/css-progress.js

@@ -0,0 +1,77 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+export function cssProgressClasses() {
+    return `.sw-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  max-width: 100%;
+  min-width: 0;
+  width: 100%;
+}
+
+.sw-progress-accent { --sw-progress-color: var(--sw-color-accent); }
+.sw-progress-success { --sw-progress-color: var(--sw-color-success); }
+.sw-progress-danger { --sw-progress-color: var(--sw-color-danger); }
+
+.sw-progress-heading {
+  align-items: baseline;
+  display: flex;
+  gap: var(--sw-space-2);
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.sw-progress-label {
+  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-progress-count {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-progress-bar {
+  appearance: none;
+  background: var(--sw-color-border);
+  border: 0;
+  border-radius: var(--sw-radius-pill);
+  display: block;
+  height: var(--sw-space-2);
+  overflow: hidden;
+  width: 100%;
+}
+
+.sw-progress-bar::-webkit-progress-bar { background: var(--sw-color-border); }
+.sw-progress-bar::-webkit-progress-value { background: var(--sw-progress-color); }
+.sw-progress-bar::-moz-progress-bar { background: var(--sw-progress-color); }
+
+@media (forced-colors: active) {
+  .sw-progress-bar { background: CanvasText; forced-color-adjust: auto; }
+  .sw-progress-bar::-webkit-progress-bar { background: Canvas; }
+  .sw-progress-bar::-webkit-progress-value { background: Highlight; }
+  .sw-progress-bar::-moz-progress-bar { background: Highlight; }
+}`;
+}
+export function progressClassCatalog() {
+    return [
+        'sw-progress',
+        'sw-progress-accent',
+        'sw-progress-success',
+        'sw-progress-danger',
+        'sw-progress-heading',
+        'sw-progress-label',
+        'sw-progress-count',
+        'sw-progress-bar',
+    ];
+}

package/dist/css/css-radio-group.d.ts

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

package/dist/css/css-radio-group.js

@@ -0,0 +1,148 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+export function cssRadioGroupClasses() {
+    return `.sw-radio-group {
+  border: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+  margin: 0;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0;
+}
+
+.sw-radio-group-legend {
+  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;
+  padding: 0;
+}
+
+.sw-radio-group-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+}
+
+.sw-radio-group-option {
+  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-radio-group-control {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--sw-space-5);
+  height: var(--sw-space-5);
+  position: relative;
+}
+
+.sw-radio-group-input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.sw-radio-group-mark {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  height: var(--sw-space-5);
+  pointer-events: none;
+  position: relative;
+  width: var(--sw-space-5);
+}
+
+.sw-radio-group-mark::after {
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-pill);
+  content: '';
+  display: none;
+  height: var(--sw-space-2);
+  inset-block-start: calc((var(--sw-space-5) - var(--sw-space-2)) / 2);
+  inset-inline-start: calc((var(--sw-space-5) - var(--sw-space-2)) / 2);
+  position: absolute;
+  width: var(--sw-space-2);
+}
+
+.sw-radio-group-input:checked + .sw-radio-group-mark {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-radio-group-input:checked + .sw-radio-group-mark::after { display: block; }
+
+.sw-radio-group-input:focus-visible + .sw-radio-group-mark {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-radio-group:has(.sw-radio-group-error) .sw-radio-group-mark {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-radio-group-option:has(.sw-radio-group-input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-radio-group-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-radio-group-description,
+.sw-radio-group-error {
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-radio-group-description { color: var(--sw-color-muted); }
+.sw-radio-group-error { color: var(--sw-color-danger); }
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-radio-group-mark { background: var(--sw-color-surface); }
+  .sw-radio-group-input:checked + .sw-radio-group-mark { background: var(--sw-color-accent); }
+}
+
+@media (forced-colors: active) {
+  .sw-radio-group-mark { background: Canvas; border-color: CanvasText; }
+  .sw-radio-group-input:checked + .sw-radio-group-mark { background: Highlight; border-color: Highlight; }
+  .sw-radio-group-input:checked + .sw-radio-group-mark::after { background: HighlightText; }
+  .sw-radio-group:has(.sw-radio-group-error) .sw-radio-group-mark { border-color: CanvasText; }
+}`;
+}
+export function radioGroupClassCatalog() {
+    return [
+        'sw-radio-group',
+        'sw-radio-group-legend',
+        'sw-radio-group-options',
+        'sw-radio-group-option',
+        'sw-radio-group-control',
+        'sw-radio-group-input',
+        'sw-radio-group-mark',
+        'sw-radio-group-text',
+        'sw-radio-group-description',
+        'sw-radio-group-error',
+    ];
+}

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

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

package/dist/css/css-responsive.js

@@ -0,0 +1,12 @@
+import { breakpointQuery, breakpoints, hideClass, } from './breakpoints.js';
+const directions = ['from', 'below'];
+export function cssResponsiveClasses() {
+    return breakpoints
+        .flatMap((breakpoint) => directions.map((direction) => `@media ${breakpointQuery(direction, breakpoint)} {
+  .${hideClass(direction, breakpoint)} { display: none; }
+}`))
+        .join('\n\n');
+}
+export function responsiveClassCatalog() {
+    return breakpoints.flatMap((breakpoint) => directions.map((direction) => hideClass(direction, breakpoint)));
+}

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

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

package/dist/css/css-select.js

@@ -0,0 +1,134 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+const label = typographyVariants.label;
+const chevronImage = `background-image:
+    linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
+    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%);
+  background-repeat: no-repeat;
+  background-size: var(--sw-space-1) var(--sw-space-1),
+    var(--sw-space-1) var(--sw-space-1);`;
+export function cssSelectClasses() {
+    return `.sw-select {
+  max-width: 100%;
+  width: max-content;
+}
+
+.sw-select-control {
+  position: relative;
+}
+
+.sw-select-trigger {
+  appearance: none;
+  -webkit-appearance: none;
+  background-color: var(--sw-glass-fill);
+  ${chevronImage}
+  background-position:
+    calc(100% - var(--sw-space-4)) calc(50% - 1px),
+    calc(100% - calc(var(--sw-space-4) - var(--sw-space-1))) calc(50% - 1px);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  font-size: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  padding-block: 0;
+  padding-inline: var(--sw-control-md-padding-inline);
+  padding-inline-end: calc(
+    var(--sw-control-md-padding-inline) + var(--sw-space-5)
+  );
+  text-align: start;
+  white-space: nowrap;
+}
+
+.sw-select-trigger:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+.sw-select-trigger:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-select-xs .sw-select-trigger {
+  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);
+  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);
+  padding-inline-end: calc(
+    var(--sw-control-xs-padding-inline) + var(--sw-space-5)
+  );
+}
+
+.sw-select-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);
+  inset-inline-start: 0;
+  margin: var(--sw-space-1) 0 0;
+  max-height: var(--sw-select-max);
+  max-width: var(--sw-dialog-max);
+  min-width: 100%;
+  overflow: auto;
+  padding: var(--sw-space-1);
+  position: absolute;
+  width: max-content;
+  z-index: 3;
+}
+
+.sw-select-option {
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-select-option[aria-selected='true'] {
+  font-weight: ${label.fontWeight};
+}
+
+.sw-select-option[data-active='true'] {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-select-xs .sw-select-option {
+  font-size: ${caption.fontSize}px;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-select-action {
+  border-top: 1px solid var(--sw-color-border);
+  color: var(--sw-color-accent);
+  margin-top: var(--sw-space-1);
+}`;
+}
+export function selectClassCatalog() {
+    return [
+        'sw-select',
+        'sw-select-xs',
+        'sw-select-control',
+        'sw-select-trigger',
+        'sw-select-list',
+        'sw-select-option',
+        'sw-select-action',
+    ];
+}

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

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

package/dist/css/css-separator.js

@@ -0,0 +1,26 @@
+export function cssSeparatorClasses() {
+    return `.sw-separator {
+  background: var(--sw-color-border);
+  border: 0;
+  flex: none;
+  margin: 0;
+}
+
+.sw-separator-horizontal {
+  height: 1px;
+  width: 100%;
+}
+
+.sw-separator-vertical {
+  align-self: stretch;
+  min-height: var(--sw-space-4);
+  width: 1px;
+}
+
+@media (forced-colors: active) {
+  .sw-separator { background: CanvasText; }
+}`;
+}
+export function separatorClassCatalog() {
+    return ['sw-separator', 'sw-separator-horizontal', 'sw-separator-vertical'];
+}

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

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

package/dist/css/css-spinner.js

@@ -0,0 +1,45 @@
+export function cssSpinnerClasses() {
+    return `.sw-spinner {
+  align-items: center;
+  display: inline-flex;
+  flex: none;
+  justify-content: center;
+  vertical-align: middle;
+}
+
+.sw-spinner-sm { --sw-spinner-size: var(--sw-space-4); }
+.sw-spinner-md { --sw-spinner-size: var(--sw-space-6); }
+.sw-spinner-lg { --sw-spinner-size: var(--sw-space-8); }
+
+.sw-spinner-icon {
+  animation: sw-spinner-rotate var(--sw-motion-travel) var(--sw-motion-travel-easing) infinite;
+  border: var(--sw-focus-ring-width) solid var(--sw-color-border);
+  border-block-start-color: var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: block;
+  height: var(--sw-spinner-size);
+  width: var(--sw-spinner-size);
+}
+
+@keyframes sw-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-spinner-icon { animation: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-spinner-icon { border-color: CanvasText; border-block-start-color: Highlight; }
+}`;
+}
+export function spinnerClassCatalog() {
+    return [
+        'sw-spinner',
+        'sw-spinner-sm',
+        'sw-spinner-md',
+        'sw-spinner-lg',
+        'sw-spinner-icon',
+    ];
+}

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

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

package/dist/css/css-split.js

@@ -0,0 +1,67 @@
+export function cssSplitClasses() {
+    return `.sw-split {
+  align-items: stretch;
+  align-self: start;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: row;
+  min-width: 0;
+}
+
+.sw-split-pane {
+  box-sizing: border-box;
+  max-width: var(--sw-split-max);
+  min-width: 0;
+  overflow: auto;
+  width: var(--sw-split-size);
+}
+
+.sw-split[data-collapsed] .sw-split-pane {
+  display: none;
+}
+
+.sw-split-handle {
+  align-items: flex-start;
+  background: transparent;
+  border: 0;
+  box-sizing: border-box;
+  cursor: col-resize;
+  display: flex;
+  flex: none;
+  justify-content: center;
+  margin: 0;
+  min-height: var(--sw-control-md-min-height);
+  min-width: var(--sw-control-xs-min-height);
+  padding: var(--sw-space-5) 0 0;
+  touch-action: none;
+  user-select: none;
+}
+
+.sw-split-handle:hover,
+.sw-split-handle:focus-visible {
+  background: color-mix(in srgb, var(--sw-color-muted) 16%, transparent);
+}
+
+.sw-split-handle:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-split[data-collapsed] .sw-split-handle {
+  cursor: e-resize;
+}
+
+.sw-split-grip {
+  border-inline-end: var(--sw-focus-ring-width) solid var(--sw-color-muted);
+  border-inline-start: var(--sw-focus-ring-width) solid var(--sw-color-muted);
+  box-sizing: border-box;
+  display: block;
+  height: var(--sw-space-6);
+  position: sticky;
+  top: var(--sw-space-5);
+  width: var(--sw-space-2);
+}`;
+}
+export function splitClassCatalog() {
+    return ['sw-split', 'sw-split-pane', 'sw-split-handle', 'sw-split-grip'];
+}

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

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