@scalewing/react 0.7.0 → 1.1.0

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;

package/dist/css/css-components.js

@@ -0,0 +1,148 @@
+import { compactTypographyVariants, typographyVariants, } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { cssActionMenuClasses } from './css-action-menu.js';
+import { cssAccordionClasses } from './css-accordion.js';
+import { cssButtonClasses } from './css-button.js';
+import { cssChartClasses } from './css-chart.js';
+import { cssCheckboxClasses } from './css-checkbox.js';
+import { cssRadioGroupClasses } from './css-radio-group.js';
+import { cssChromeClasses } from './css-chrome.js';
+import { cssDataClasses } from './css-data.js';
+import { cssDateFieldClasses } from './css-date-field.js';
+import { cssDialogClasses } from './css-dialog.js';
+import { cssSelectClasses } from './css-select.js';
+import { cssSplitClasses } from './css-split.js';
+import { cssSwitchClasses } from './css-switch.js';
+import { cssSpinnerClasses } from './css-spinner.js';
+import { cssProgressClasses } from './css-progress.js';
+import { cssTooltipClasses } from './css-tooltip.js';
+import { cssSeparatorClasses } from './css-separator.js';
+import { cssResponsiveClasses } from './css-responsive.js';
+import { cssFilterChipsClasses } from './css-filter-chips.js';
+import { cssGridClasses } from './css-grid.js';
+import { cssDenominationGridClasses } from './css-denomination-grid.js';
+import { cssFieldClasses } from './css-field.js';
+import { cssToastClasses } from './css-toast.js';
+function textVariantRules() {
+    return Object.entries(typographyVariants)
+        .map(([name, variant]) => {
+        const tabular = 'tabularNums' in variant && variant.tabularNums
+            ? ' font-variant-numeric: tabular-nums;'
+            : '';
+        return `.sw-text-${name} { font-family: var(--sw-font-sans); font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; font-weight: ${variant.fontWeight}; letter-spacing: ${variant.letterSpacing}px;${tabular} }`;
+    })
+        .join('\n');
+}
+function compactTextVariantRules() {
+    const rules = Object.entries(compactTypographyVariants)
+        .map(([name, variant]) => `  .sw-text-${name} { font-size: ${variant.fontSize}px; line-height: ${variant.lineHeight}px; letter-spacing: ${variant.letterSpacing}px; }`)
+        .join('\n');
+    return `@media ${breakpointQuery('below', 'md')} {\n${rules}\n}`;
+}
+export function cssComponentClasses() {
+    return `.sw-card {
+  border-radius: var(--sw-radius-lg);
+  color: var(--sw-color-text);
+}
+
+.sw-card-glass {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  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-card-outlined {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+}
+
+.sw-card-elevated {
+  background: var(--sw-color-surface);
+  border-color: transparent;
+  box-shadow: var(--sw-elevation-sm);
+}
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-card-glass,
+  .sw-app-header,
+  .sw-button-secondary,
+  .sw-badge-neutral,
+  .sw-segmented,
+  .sw-table-sticky thead th,
+  .sw-bar-chart-track,
+  .sw-dialog,
+  .sw-accordion,
+  .sw-select-list,
+  .sw-action-menu-list,
+  .sw-toast {
+    background: var(--sw-color-surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}
+
+.sw-text-align-start { text-align: start; }
+.sw-text-align-center { text-align: center; }
+.sw-text-align-end { text-align: end; }
+
+.sw-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sw-tabular {
+  font-variant-numeric: tabular-nums;
+}
+
+${textVariantRules()}
+
+${compactTextVariantRules()}
+
+${cssButtonClasses()}
+
+${cssCheckboxClasses()}
+
+${cssRadioGroupClasses()}
+
+${cssDataClasses()}
+
+${cssDateFieldClasses()}
+
+${cssChartClasses()}
+
+${cssChromeClasses()}
+
+${cssDialogClasses()}
+
+${cssAccordionClasses()}
+
+${cssSelectClasses()}
+
+${cssActionMenuClasses()}
+
+${cssSwitchClasses()}
+
+${cssSpinnerClasses()}
+
+${cssProgressClasses()}
+
+${cssTooltipClasses()}
+
+${cssSeparatorClasses()}
+
+${cssFilterChipsClasses()}
+
+${cssGridClasses()}
+${cssDenominationGridClasses()}
+
+${cssFieldClasses()}
+
+${cssSplitClasses()}
+
+${cssToastClasses()}
+
+${cssResponsiveClasses()}`;
+}

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

@@ -0,0 +1,7 @@
+export declare const badgeTones: readonly ["neutral", "accent", "success", "danger"];
+export type BadgeTone = (typeof badgeTones)[number];
+export declare const badgeSizes: readonly ["sm", "md"];
+export type BadgeSize = (typeof badgeSizes)[number];
+export declare function badgeClassNames(tone: BadgeTone, size?: BadgeSize): string[];
+export declare function cssDataClasses(): string;
+export declare function dataClassCatalog(): string[];

package/dist/css/css-data.js

@@ -0,0 +1,189 @@
+import { trackInset, typographyVariants } from '@scalewing/tokens';
+export const badgeTones = ['neutral', 'accent', 'success', 'danger'];
+export const badgeSizes = ['sm', 'md'];
+const caption = typographyVariants.caption;
+const data = typographyVariants.data;
+export function badgeClassNames(tone, size = 'md') {
+    return ['sw-badge', `sw-badge-${tone}`, `sw-badge-${size}`];
+}
+export function cssDataClasses() {
+    return `.sw-badge {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-badge-md {
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-badge-sm {
+  padding-inline: var(--sw-space-2);
+}
+
+.sw-badge-neutral {
+  background: var(--sw-glass-fill);
+  border-color: var(--sw-color-border);
+  color: var(--sw-color-text);
+}
+
+.sw-badge-accent {
+  background: transparent;
+  border-color: var(--sw-color-accent);
+  color: var(--sw-color-accent);
+}
+
+.sw-badge-success {
+  background: transparent;
+  border-color: var(--sw-color-success);
+  color: var(--sw-color-success);
+}
+
+.sw-badge-danger {
+  background: transparent;
+  border-color: var(--sw-color-danger);
+  color: var(--sw-color-danger);
+}
+
+.sw-segmented {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-glass-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: inline-flex;
+  gap: ${trackInset}px;
+  padding: ${trackInset}px;
+}
+
+.sw-segmented-item {
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-muted);
+  cursor: pointer;
+  font-family: var(--sw-font-sans);
+  font-size: ${data.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+  min-height: var(--sw-control-xs-min-height);
+  padding-inline: var(--sw-control-xs-padding-inline);
+}
+
+.sw-segmented-item:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-segmented-item-selected {
+  background: var(--sw-color-surface);
+  color: var(--sw-color-text);
+}
+
+.sw-table-wrap {
+  overflow: auto;
+  width: 100%;
+}
+
+.sw-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.sw-table th,
+.sw-table td {
+  border-bottom: 1px solid var(--sw-color-border);
+  padding: var(--sw-space-2) var(--sw-space-3);
+  text-align: start;
+  vertical-align: middle;
+}
+
+.sw-table th {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-table-end {
+  text-align: end;
+}
+
+.sw-table-numeric {
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+.sw-table-clip {
+  max-width: 0;
+  overflow: hidden;
+}
+
+.sw-table-sticky thead th {
+  background: var(--sw-glass-fill);
+  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));
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.sw-table-compact th,
+.sw-table-compact td {
+  padding: var(--sw-space-1) var(--sw-space-2);
+}
+
+.sw-table-row-selected > :first-child {
+  padding-inline-start: var(--sw-space-5);
+  position: relative;
+}
+
+.sw-table-compact .sw-table-row-selected > :first-child {
+  padding-inline-start: var(--sw-space-4);
+}
+
+.sw-table-row-selected > :first-child::before {
+  background: var(--sw-color-accent);
+  border-radius: var(--sw-radius-pill);
+  content: '';
+  height: var(--sw-space-2);
+  inset-block-start: 50%;
+  inset-inline-start: var(--sw-space-2);
+  position: absolute;
+  transform: translateY(-50%);
+  width: var(--sw-space-2);
+}
+
+.sw-table-compact .sw-table-row-selected > :first-child::before {
+  inset-inline-start: var(--sw-space-1);
+}`;
+}
+export function dataClassCatalog() {
+    return [
+        'sw-badge',
+        ...badgeTones.map((tone) => `sw-badge-${tone}`),
+        ...badgeSizes.map((size) => `sw-badge-${size}`),
+        'sw-segmented',
+        'sw-segmented-item',
+        'sw-segmented-item-selected',
+        'sw-table-wrap',
+        'sw-table',
+        'sw-table-end',
+        'sw-table-numeric',
+        'sw-table-clip',
+        'sw-table-sticky',
+        'sw-table-compact',
+        'sw-table-row-selected',
+    ];
+}

package/dist/css/css-date-field.d.ts

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