@scalewing/react 0.7.0 → 1.1.0

package/dist/css/css-date-field.js

@@ -0,0 +1,77 @@
+import { typographyVariants } from '@scalewing/tokens';
+const body = typographyVariants.body;
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+export function cssDateFieldClasses() {
+    return `.sw-date-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  max-width: 100%;
+  min-width: 0;
+  width: max-content;
+}
+
+.sw-date-field-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;
+}
+
+.sw-date-field-input {
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: ${body.fontSize}px;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  padding-inline: var(--sw-control-md-padding-inline);
+  width: 100%;
+}
+
+.sw-date-field-input:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-date-field-input[aria-invalid='true'] {
+  border-color: var(--sw-color-danger);
+}
+
+.sw-date-field-input:disabled {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-date-field-description,
+.sw-date-field-error {
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-date-field-description { color: var(--sw-color-muted); }
+.sw-date-field-error { color: var(--sw-color-danger); }
+
+@media (prefers-reduced-transparency: reduce) {
+  .sw-date-field-input { background: var(--sw-color-surface); }
+}
+
+@media (forced-colors: active) {
+  .sw-date-field-input[aria-invalid='true'] { border-color: CanvasText; }
+}`;
+}
+export function dateFieldClassCatalog() {
+    return [
+        'sw-date-field',
+        'sw-date-field-label',
+        'sw-date-field-input',
+        'sw-date-field-description',
+        'sw-date-field-error',
+    ];
+}

package/dist/css/css-denomination-grid.d.ts

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

package/dist/css/css-denomination-grid.js

@@ -0,0 +1,213 @@
+import { typographyVariants } from '@scalewing/tokens';
+import { breakpointQuery } from './breakpoints.js';
+import { badgeTones } from './css-data.js';
+const caption = typographyVariants.caption;
+const data = typographyVariants.data;
+const label = typographyVariants.label;
+const title = typographyVariants.title;
+function toneRules() {
+    return badgeTones
+        .map((tone) => `.sw-denomination-row-${tone} { --sw-denomination-tone: var(--sw-color-${tone === 'neutral' ? 'muted' : tone}); }`)
+        .join('\n');
+}
+export function cssDenominationGridClasses() {
+    return `.sw-denomination-grid {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  max-width: 100%;
+  min-width: 0;
+}
+
+${toneRules()}
+
+.sw-denomination-strip {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.sw-denomination-strip th,
+.sw-denomination-strip td {
+  padding: var(--sw-space-1) var(--sw-space-2);
+  vertical-align: middle;
+}
+
+.sw-denomination-strip tbody tr {
+  border-top: 1px solid var(--sw-color-border);
+}
+
+.sw-denomination-head {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-weight: 600;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  text-align: end;
+}
+
+.sw-denomination-corner {
+  padding: 0;
+}
+
+.sw-denomination-label {
+  align-items: center;
+  border-inline-start: var(--sw-space-1) solid var(--sw-denomination-tone);
+  color: var(--sw-denomination-tone);
+  display: flex;
+  flex-wrap: wrap;
+  font-size: ${label.fontSize}px;
+  font-weight: ${label.fontWeight};
+  gap: var(--sw-space-2);
+  letter-spacing: ${label.letterSpacing}px;
+  line-height: ${label.lineHeight}px;
+  min-width: 0;
+  text-align: start;
+}
+
+.sw-denomination-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-denomination-cell {
+  color: var(--sw-color-text);
+  font-size: ${data.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+  text-align: end;
+}
+
+.sw-denomination-cell-zero {
+  color: var(--sw-color-muted);
+  font-weight: ${data.fontWeight};
+  opacity: var(--sw-quiet-opacity);
+}
+
+.sw-denomination-row-signed .sw-denomination-cell-positive {
+  color: var(--sw-color-success);
+}
+
+.sw-denomination-cell-negative {
+  color: var(--sw-color-danger);
+}
+
+.sw-denomination-total {
+  color: var(--sw-denomination-tone);
+  font-size: ${data.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.sw-denomination-total-inline {
+  display: none;
+  flex-basis: 100%;
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-denomination-tiles {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-3);
+}
+
+.sw-denomination-tiles .sw-denomination-label {
+  border-inline-start: 0;
+}
+
+.sw-denomination-tiles .sw-denomination-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-2);
+}
+
+.sw-denomination-tile-list {
+  display: grid;
+  gap: var(--sw-space-2);
+  grid-template-columns: repeat(auto-fit, minmax(var(--sw-space-8), 1fr));
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.sw-denomination-tile {
+  align-items: center;
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--sw-space-1);
+  min-width: 0;
+  padding: var(--sw-space-3) var(--sw-space-2);
+}
+
+.sw-denomination-tile .sw-denomination-head,
+.sw-denomination-tile .sw-denomination-cell {
+  text-align: center;
+}
+
+.sw-denomination-tile .sw-denomination-cell {
+  font-size: ${title.fontSize}px;
+  letter-spacing: ${title.letterSpacing}px;
+  line-height: ${title.lineHeight}px;
+}
+
+.sw-denomination-subtotal {
+  color: var(--sw-color-muted);
+  font-size: ${caption.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: ${caption.letterSpacing}px;
+  line-height: ${caption.lineHeight}px;
+  text-align: center;
+}
+
+@media ${breakpointQuery('below', 'md')} {
+  .sw-denomination-strip .sw-denomination-total { display: none; }
+  .sw-denomination-total-inline { display: block; }
+  .sw-denomination-strip .sw-denomination-label { flex-direction: column; align-items: flex-start; gap: var(--sw-space-1); }
+  .sw-denomination-strip th,
+  .sw-denomination-strip td { padding: var(--sw-space-1); }
+  .sw-denomination-tile-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+}
+
+@media (forced-colors: active) {
+  .sw-denomination-label { border-inline-start-color: CanvasText; color: CanvasText; }
+  .sw-denomination-cell-zero { color: GrayText; opacity: 1; }
+  .sw-denomination-cell-negative,
+  .sw-denomination-row-signed .sw-denomination-cell-positive,
+  .sw-denomination-total { color: CanvasText; }
+  .sw-denomination-tile { border-color: CanvasText; }
+}`;
+}
+export function denominationGridClassCatalog() {
+    return [
+        'sw-denomination-grid',
+        ...badgeTones.map((tone) => `sw-denomination-row-${tone}`),
+        'sw-denomination-strip',
+        'sw-denomination-head',
+        'sw-denomination-corner',
+        'sw-denomination-row',
+        'sw-denomination-row-signed',
+        'sw-denomination-label',
+        'sw-denomination-label-text',
+        'sw-denomination-icon',
+        'sw-denomination-cell',
+        'sw-denomination-cell-zero',
+        'sw-denomination-cell-positive',
+        'sw-denomination-cell-negative',
+        'sw-denomination-total',
+        'sw-denomination-total-inline',
+        'sw-denomination-tiles',
+        'sw-denomination-tile-list',
+        'sw-denomination-tile',
+        'sw-denomination-subtotal',
+    ];
+}

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

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

package/dist/css/css-dialog.js

@@ -0,0 +1,29 @@
+export function cssDialogClasses() {
+    return `.sw-dialog {
+  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));
+  box-sizing: border-box;
+  color: var(--sw-color-text);
+  margin: auto;
+  max-height: min(100vh - var(--sw-space-8), 100dvh - var(--sw-space-8));
+  max-width: min(var(--sw-dialog-max), calc(100vw - var(--sw-space-8)));
+  overflow: auto;
+  width: calc(100% - var(--sw-space-8));
+}
+
+.sw-dialog::backdrop {
+  background: color-mix(in srgb, var(--sw-color-text) 28%, transparent);
+}
+
+.sw-dialog:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}`;
+}
+export function dialogClassCatalog() {
+    return ['sw-dialog'];
+}

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

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

package/dist/css/css-document.js

@@ -0,0 +1,102 @@
+import { typographyVariants } from '@scalewing/tokens';
+const body = typographyVariants.body;
+const typedInputs = [
+    "input[type='text']",
+    "input[type='email']",
+    "input[type='number']",
+    "input[type='search']",
+    "input[type='url']",
+    "input[type='password']",
+    'input:not([type])',
+    'textarea',
+].join(', ');
+const controlSurface = `background-color: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  padding-inline: var(--sw-control-md-padding-inline);`;
+export function cssDocumentCanvas() {
+    return `html,
+body {
+  margin: 0;
+}
+
+[data-theme] {
+  background-color: var(--sw-color-background);
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: ${body.fontSize}px;
+  letter-spacing: ${body.letterSpacing}px;
+  line-height: ${body.lineHeight}px;
+  min-height: 100vh;
+  min-height: 100dvh;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[data-theme] [data-theme] {
+  min-height: 0;
+}
+
+[data-theme='light'] {
+  color-scheme: light;
+}
+
+[data-theme='dark'] {
+  color-scheme: dark;
+}
+
+[data-theme] a {
+  color: var(--sw-color-accent);
+  text-decoration: none;
+}
+
+[data-theme] a:hover {
+  color: var(--sw-color-text);
+}
+
+[data-theme] a:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+[data-theme] :is(${typedInputs}) {
+  ${controlSurface}
+  box-sizing: border-box;
+  min-height: var(--sw-control-md-min-height);
+}
+
+[data-theme] select {
+  ${controlSurface}
+  appearance: none;
+  background-image:
+    linear-gradient(45deg, transparent 50%, var(--sw-color-muted) 50%),
+    linear-gradient(135deg, var(--sw-color-muted) 50%, transparent 50%);
+  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);
+  background-repeat: no-repeat;
+  background-size: var(--sw-space-1) var(--sw-space-1),
+    var(--sw-space-1) var(--sw-space-1);
+  box-sizing: content-box;
+  height: calc(var(--sw-control-md-min-height) - 1px - 1px);
+  min-height: 0;
+  padding-inline-end: calc(
+    var(--sw-control-md-padding-inline) + var(--sw-space-5)
+  );
+}
+
+[data-theme] :is(${typedInputs}):focus,
+[data-theme] select:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+[data-theme] :is(${typedInputs}):focus-visible,
+[data-theme] select:focus-visible {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}`;
+}

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

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

package/dist/css/css-field.js

@@ -0,0 +1,33 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+export function cssFieldClasses() {
+    return `.sw-field-required { color: var(--sw-color-danger); }
+
+.sw-field-description,
+.sw-field-error {
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+.sw-field-description { color: var(--sw-color-muted); }
+.sw-field-error { color: var(--sw-color-danger); }
+
+[data-theme] .sw-field-invalid :is(input, select, textarea) {
+  border-color: var(--sw-color-danger);
+}
+
+@media (forced-colors: active) {
+  [data-theme] .sw-field-invalid :is(input, select, textarea) { border-color: Mark; }
+  .sw-field-error, .sw-field-required { color: Mark; }
+}`;
+}
+export function fieldClassCatalog() {
+    return [
+        'sw-field',
+        'sw-field-required',
+        'sw-field-description',
+        'sw-field-error',
+        'sw-field-invalid',
+    ];
+}

package/dist/css/css-filter-chips.d.ts

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

package/dist/css/css-filter-chips.js

@@ -0,0 +1,116 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+const data = typographyVariants.data;
+export function cssFilterChipsClasses() {
+    return `.sw-filter-chips {
+  border: 0;
+  margin: 0;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0;
+}
+
+.sw-filter-chips-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 0 var(--sw-space-2);
+}
+
+.sw-filter-chips-options {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sw-space-2);
+  min-width: 0;
+}
+
+.sw-filter-chip {
+  cursor: pointer;
+  display: inline-flex;
+  max-width: 100%;
+  position: relative;
+}
+
+.sw-filter-chip-input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.sw-filter-chip-face {
+  align-items: center;
+  background: var(--sw-glass-fill);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  color: var(--sw-color-text);
+  display: inline-flex;
+  font-family: var(--sw-font-sans);
+  font-size: ${label.fontSize}px;
+  gap: var(--sw-space-2);
+  line-height: ${label.lineHeight}px;
+  min-height: var(--sw-control-md-min-height);
+  min-width: 0;
+  overflow-wrap: anywhere;
+  padding: var(--sw-space-1) var(--sw-space-3);
+}
+
+.sw-filter-chip-count {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: ${data.fontSize}px;
+  font-variant-numeric: tabular-nums;
+  font-weight: ${data.fontWeight};
+  letter-spacing: ${data.letterSpacing}px;
+  line-height: ${data.lineHeight}px;
+}
+
+.sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face {
+  opacity: var(--sw-quiet-opacity);
+}
+
+.sw-filter-chip-input:checked + .sw-filter-chip-face {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+  color: var(--sw-color-onAccent);
+}
+
+.sw-filter-chip-input:checked + .sw-filter-chip-face .sw-filter-chip-count {
+  color: inherit;
+}
+
+.sw-filter-chip-input:focus-visible + .sw-filter-chip-face {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-filter-chip:has(.sw-filter-chip-input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+@media (forced-colors: active) {
+  .sw-filter-chip-face { background: Canvas; border-color: CanvasText; color: CanvasText; }
+  .sw-filter-chip-input:checked + .sw-filter-chip-face { background: Highlight; border-color: Highlight; color: HighlightText; }
+  .sw-filter-chip-input:focus-visible + .sw-filter-chip-face { outline-color: Highlight; }
+  .sw-filter-chip-count { color: inherit; }
+  .sw-filter-chip-quiet:not(:has(.sw-filter-chip-input:checked)) .sw-filter-chip-face { opacity: 1; color: GrayText; border-color: GrayText; }
+}`;
+}
+export function filterChipsClassCatalog() {
+    return [
+        'sw-filter-chips',
+        'sw-filter-chips-legend',
+        'sw-filter-chips-options',
+        'sw-filter-chip',
+        'sw-filter-chip-input',
+        'sw-filter-chip-face',
+        'sw-filter-chip-count',
+        'sw-filter-chip-quiet',
+    ];
+}

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

@@ -0,0 +1,7 @@
+import { type Breakpoint } from './breakpoints.js';
+export declare const gridColumnCounts: readonly [1, 2, 3, 4];
+export type GridColumns = (typeof gridColumnCounts)[number];
+export declare function gridColumnsClass(columns: GridColumns): string;
+export declare function gridColumnsBelowClass(breakpoint: Breakpoint, columns: GridColumns): string;
+export declare function cssGridClasses(): string;
+export declare function gridClassCatalog(): string[];

package/dist/css/css-grid.js

@@ -0,0 +1,31 @@
+import { breakpointQuery, breakpoints, } from './breakpoints.js';
+export const gridColumnCounts = [1, 2, 3, 4];
+export function gridColumnsClass(columns) {
+    return `sw-grid-cols-${columns}`;
+}
+export function gridColumnsBelowClass(breakpoint, columns) {
+    return `sw-grid-cols-below-${breakpoint}-${columns}`;
+}
+function columnsRule(className, columns) {
+    return `.${className} { grid-template-columns: repeat(${columns}, minmax(0, 1fr)); }`;
+}
+export function cssGridClasses() {
+    const base = `.sw-grid {
+  display: grid;
+  min-width: 0;
+}`;
+    const columns = gridColumnCounts.map((count) => columnsRule(gridColumnsClass(count), count));
+    const below = breakpoints.map((breakpoint) => `@media ${breakpointQuery('below', breakpoint)} {
+${gridColumnCounts
+        .map((count) => columnsRule(gridColumnsBelowClass(breakpoint, count), count))
+        .join('\n')}
+}`);
+    return [base, ...columns, ...below].join('\n');
+}
+export function gridClassCatalog() {
+    return [
+        'sw-grid',
+        ...gridColumnCounts.map((count) => gridColumnsClass(count)),
+        ...breakpoints.flatMap((breakpoint) => gridColumnCounts.map((count) => gridColumnsBelowClass(breakpoint, count))),
+    ];
+}

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

@@ -0,0 +1,4 @@
+import { type PaletteId } from '@scalewing/tokens';
+export declare function cssPaletteAttributes(): string;
+export declare function generatePaletteStylesheet(id: PaletteId): string;
+export declare function paletteStylesheetIds(): PaletteId[];

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[];