@scalewing/react 0.6.1 → 1.0.0

package/dist/css/css-switch.js

@@ -0,0 +1,115 @@
+import { typographyVariants } from '@scalewing/tokens';
+const label = typographyVariants.label;
+const caption = typographyVariants.caption;
+export function cssSwitchClasses() {
+    return `.sw-switch {
+  align-items: center;
+  cursor: pointer;
+  display: inline-flex;
+  gap: var(--sw-space-2);
+  min-height: var(--sw-control-md-min-height);
+}
+
+.sw-switch-control {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 var(--sw-space-8);
+  min-height: var(--sw-control-md-min-height);
+  position: relative;
+}
+
+.sw-switch-input {
+  cursor: inherit;
+  height: 100%;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 100%;
+}
+
+.sw-switch-track {
+  background: var(--sw-color-border);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-pill);
+  box-sizing: border-box;
+  display: block;
+  height: var(--sw-space-5);
+  pointer-events: none;
+  position: relative;
+  width: var(--sw-space-8);
+}
+
+.sw-switch-thumb {
+  background: var(--sw-color-surface);
+  border-radius: var(--sw-radius-pill);
+  height: var(--sw-space-4);
+  inset-block-start: var(--sw-space-1);
+  inset-inline-start: var(--sw-space-1);
+  position: absolute;
+  transition: inset-inline-start var(--sw-motion-fast) var(--sw-motion-easing);
+  width: var(--sw-space-4);
+}
+
+.sw-switch-input:checked + .sw-switch-track {
+  background: var(--sw-color-accent);
+  border-color: var(--sw-color-accent);
+}
+
+.sw-switch-input:checked + .sw-switch-track .sw-switch-thumb {
+  inset-inline-start: calc(var(--sw-space-8) - var(--sw-space-4) - var(--sw-space-1));
+}
+
+.sw-switch-input:focus-visible + .sw-switch-track {
+  outline: var(--sw-focus-ring-width) solid var(--sw-color-accent);
+  outline-offset: var(--sw-focus-ring-offset);
+}
+
+.sw-switch:has(.sw-switch-input:disabled) {
+  cursor: not-allowed;
+  opacity: var(--sw-disabled-opacity);
+}
+
+.sw-switch-copy {
+  display: flex;
+  flex-direction: column;
+}
+
+.sw-switch-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-switch-description {
+  color: var(--sw-color-muted);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-switch-thumb { transition: none; }
+}
+
+@media (forced-colors: active) {
+  .sw-switch-track { background: Canvas; border-color: CanvasText; }
+  .sw-switch-thumb { background: CanvasText; }
+  .sw-switch-input:checked + .sw-switch-track { background: Highlight; border-color: Highlight; }
+  .sw-switch-input:checked + .sw-switch-track .sw-switch-thumb { background: HighlightText; }
+}`;
+}
+export function switchClassCatalog() {
+    return [
+        'sw-switch',
+        'sw-switch-control',
+        'sw-switch-input',
+        'sw-switch-track',
+        'sw-switch-thumb',
+        'sw-switch-copy',
+        'sw-switch-label',
+        'sw-switch-description',
+    ];
+}

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

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

package/dist/css/css-toast.js

@@ -0,0 +1,92 @@
+export function cssToastClasses() {
+    return `.sw-toast {
+  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);
+  inset: unset;
+  bottom: var(--sw-space-6);
+  left: 50%;
+  margin: 0;
+  overflow: visible;
+  pointer-events: none;
+  position: fixed;
+  translate: -50% 0;
+  width: max-content;
+}
+
+.sw-toast:popover-open {
+  animation: sw-toast-float var(--sw-motion-default) var(--sw-motion-easing);
+}
+
+.sw-toast-travel {
+  bottom: auto;
+  left: 0;
+  top: 0;
+  translate: var(--sw-toast-from-x) var(--sw-toast-from-y);
+}
+
+.sw-toast-travel:popover-open {
+  animation: sw-toast-travel var(--sw-motion-travel)
+    var(--sw-motion-travel-easing) forwards;
+}
+
+@keyframes sw-toast-float {
+  from {
+    opacity: 0;
+    translate: -50% var(--sw-space-3);
+  }
+  to {
+    opacity: 1;
+    translate: -50% 0;
+  }
+}
+
+@keyframes sw-toast-travel {
+  0% {
+    opacity: 1;
+    scale: 0.6;
+    translate: var(--sw-toast-from-x) var(--sw-toast-from-y);
+  }
+  16% {
+    opacity: 1;
+    scale: 1.2;
+    translate: var(--sw-toast-from-x) var(--sw-toast-from-y);
+  }
+  42% {
+    opacity: 1;
+    scale: 1;
+    translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
+  }
+  78% {
+    opacity: 1;
+    scale: 1;
+    translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
+  }
+  100% {
+    opacity: 0;
+    scale: 0.94;
+    translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sw-toast:popover-open,
+  .sw-toast-travel:popover-open {
+    animation: none;
+  }
+
+  .sw-toast-travel:popover-open {
+    opacity: 1;
+    scale: 1;
+    translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
+  }
+}`;
+}
+export function toastClassCatalog() {
+    return ['sw-toast', 'sw-toast-travel'];
+}

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

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

package/dist/css/css-tooltip.js

@@ -0,0 +1,35 @@
+import { typographyVariants } from '@scalewing/tokens';
+const caption = typographyVariants.caption;
+export function cssTooltipClasses() {
+    return `.sw-tooltip-anchor {
+  display: inline-flex;
+  position: relative;
+}
+
+.sw-tooltip {
+  background: var(--sw-color-surface);
+  border: 1px solid var(--sw-color-border);
+  border-radius: var(--sw-radius-sm);
+  box-shadow: var(--sw-elevation-sm);
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  font-size: ${caption.fontSize}px;
+  line-height: ${caption.lineHeight}px;
+  inset-block-start: calc(100% + var(--sw-space-1));
+  inset-inline-start: 0;
+  max-width: min(18rem, calc(100vw - 2 * var(--sw-space-3)));
+  padding: var(--sw-space-2);
+  position: absolute;
+  width: max-content;
+  z-index: 10;
+}
+
+.sw-tooltip[hidden] { display: none; }
+
+@media (forced-colors: active) {
+  .sw-tooltip { border-color: CanvasText; box-shadow: none; }
+}`;
+}
+export function tooltipClassCatalog() {
+    return ['sw-tooltip-anchor', 'sw-tooltip'];
+}

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

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

package/dist/css/css-utilities.js

@@ -0,0 +1,57 @@
+import { spacingSteps } from '@scalewing/tokens';
+import { gapAxes, layoutClassNames, paddingAxes, spacingClass, } from './spacing-classes.js';
+function paddingRule(axis, step) {
+    const className = spacingClass('padding', axis, step);
+    const value = `var(--sw-space-${step})`;
+    switch (axis) {
+        case 'all':
+            return `.${className} { padding: ${value}; }`;
+        case 'x':
+            return `.${className} { padding-inline: ${value}; }`;
+        case 'y':
+            return `.${className} { padding-block: ${value}; }`;
+        case 'top':
+            return `.${className} { padding-top: ${value}; }`;
+        case 'right':
+            return `.${className} { padding-right: ${value}; }`;
+        case 'bottom':
+            return `.${className} { padding-bottom: ${value}; }`;
+        case 'left':
+            return `.${className} { padding-left: ${value}; }`;
+    }
+}
+function gapRule(axis, step) {
+    const className = spacingClass('gap', axis, step);
+    const value = `var(--sw-space-${step})`;
+    switch (axis) {
+        case 'all':
+            return `.${className} { gap: ${value}; }`;
+        case 'x':
+            return `.${className} { column-gap: ${value}; }`;
+        case 'y':
+            return `.${className} { row-gap: ${value}; }`;
+    }
+}
+const layoutRules = {
+    'sw-stack': '.sw-stack { display: flex; flex-direction: column; min-width: 0; }',
+    'sw-inline': '.sw-inline { display: flex; flex-direction: row; align-items: center; min-width: 0; }',
+    'sw-wrap': '.sw-wrap { flex-wrap: wrap; }',
+    'sw-grow': '.sw-grow { flex-grow: 1; }',
+    'sw-full-width': '.sw-full-width { width: 100%; }',
+    'sw-container': '.sw-container { width: 100%; max-width: var(--sw-container-max); margin-inline: auto; }',
+    'sw-sr-only': '.sw-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }',
+    'sw-align-start': '.sw-align-start { align-items: flex-start; }',
+    'sw-align-center': '.sw-align-center { align-items: center; }',
+    'sw-align-end': '.sw-align-end { align-items: flex-end; }',
+    'sw-align-stretch': '.sw-align-stretch { align-items: stretch; }',
+    'sw-justify-start': '.sw-justify-start { justify-content: flex-start; }',
+    'sw-justify-center': '.sw-justify-center { justify-content: center; }',
+    'sw-justify-end': '.sw-justify-end { justify-content: flex-end; }',
+    'sw-justify-between': '.sw-justify-between { justify-content: space-between; }',
+};
+export function cssUtilities() {
+    const padding = paddingAxes.flatMap((axis) => spacingSteps.map((step) => paddingRule(axis, step)));
+    const gap = gapAxes.flatMap((axis) => spacingSteps.map((step) => gapRule(axis, step)));
+    const layout = layoutClassNames.map((name) => layoutRules[name]);
+    return [...padding, ...gap, ...layout].join('\n');
+}

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

@@ -0,0 +1,2 @@
+import { type Theme } from '@scalewing/tokens';
+export declare function cssVariables(light: Theme, dark: Theme): string;

package/dist/css/css-variables.js

@@ -0,0 +1,61 @@
+import { controlScale, disabledOpacity, focusRing, quietOpacity, radiusScale, semanticColorKeys, spacingScale, spacingSteps, splitScale, } from '@scalewing/tokens';
+function colorDeclarations(theme) {
+    return semanticColorKeys
+        .map((key) => `  --sw-color-${key}: ${theme.colors[key]};`)
+        .join('\n');
+}
+function glassDeclarations(theme) {
+    return `  --sw-glass-blur: ${theme.glass.blur}px;
+  --sw-glass-saturate: ${theme.glass.saturate};
+  --sw-glass-fill: ${theme.glass.fill};
+  --sw-glass-border: ${theme.glass.border};
+  --sw-glass-specular: ${theme.glass.specular};`;
+}
+function sharedDeclarations(theme) {
+    const space = spacingSteps
+        .map((step) => `  --sw-space-${step}: ${spacingScale[step]}px;`)
+        .join('\n');
+    const radius = Object.entries(radiusScale)
+        .map(([name, value]) => `  --sw-radius-${name}: ${value}px;`)
+        .join('\n');
+    const control = Object.entries(controlScale)
+        .flatMap(([size, value]) => [
+        `  --sw-control-${size}-min-height: ${value.minHeight}px;`,
+        `  --sw-control-${size}-padding-inline: ${value.paddingInline}px;`,
+    ])
+        .join('\n');
+    return `${space}
+${radius}
+${control}
+  --sw-font-sans: ${theme.fontFamily};
+  --sw-elevation-sm: ${theme.elevation.sm};
+  --sw-elevation-md: ${theme.elevation.md};
+  --sw-disabled-opacity: ${disabledOpacity};
+  --sw-quiet-opacity: ${quietOpacity};
+  --sw-focus-ring-width: ${focusRing.width}px;
+  --sw-focus-ring-offset: ${focusRing.offset}px;
+  --sw-container-max: 72rem;
+  --sw-dialog-max: 32rem;
+  --sw-select-max: 16rem;
+  --sw-split-min: ${splitScale.min}rem;
+  --sw-split-size: ${splitScale.size}rem;
+  --sw-split-max: ${splitScale.max}rem;
+  --sw-motion-fast: ${theme.motion.duration.fast};
+  --sw-motion-default: ${theme.motion.duration.default};
+  --sw-motion-travel: ${theme.motion.duration.travel};
+  --sw-motion-easing: ${theme.motion.easing.standard};
+  --sw-motion-travel-easing: ${theme.motion.easing.travel};
+${glassDeclarations(theme)}`;
+}
+export function cssVariables(light, dark) {
+    return `:root,
+[data-theme='light'] {
+${colorDeclarations(light)}
+${sharedDeclarations(light)}
+}
+
+[data-theme='dark'] {
+${colorDeclarations(dark)}
+${sharedDeclarations(dark)}
+}`;
+}

package/dist/css/spacing-classes.d.ts

@@ -0,0 +1,10 @@
+import { type SpacingStep } from '@scalewing/tokens';
+export declare const paddingAxes: readonly ["all", "x", "y", "top", "right", "bottom", "left"];
+export type PaddingAxis = (typeof paddingAxes)[number];
+export declare const gapAxes: readonly ["all", "x", "y"];
+export type GapAxis = (typeof gapAxes)[number];
+export type SpacingKind = 'padding' | 'gap';
+export declare function spacingClass(kind: SpacingKind, axis: PaddingAxis | GapAxis, step: SpacingStep): string;
+export declare function paddingClassNames(): string[];
+export declare function gapClassNames(): string[];
+export declare const layoutClassNames: readonly ["sw-stack", "sw-inline", "sw-wrap", "sw-grow", "sw-full-width", "sw-container", "sw-sr-only", "sw-align-start", "sw-align-center", "sw-align-end", "sw-align-stretch", "sw-justify-start", "sw-justify-center", "sw-justify-end", "sw-justify-between"];

package/dist/css/spacing-classes.js

@@ -0,0 +1,40 @@
+import { spacingSteps } from '@scalewing/tokens';
+export const paddingAxes = [
+    'all',
+    'x',
+    'y',
+    'top',
+    'right',
+    'bottom',
+    'left',
+];
+export const gapAxes = ['all', 'x', 'y'];
+export function spacingClass(kind, axis, step) {
+    if (axis === 'all') {
+        return `sw-${kind}-${step}`;
+    }
+    return `sw-${kind}-${axis}-${step}`;
+}
+export function paddingClassNames() {
+    return paddingAxes.flatMap((axis) => spacingSteps.map((step) => spacingClass('padding', axis, step)));
+}
+export function gapClassNames() {
+    return gapAxes.flatMap((axis) => spacingSteps.map((step) => spacingClass('gap', axis, step)));
+}
+export const layoutClassNames = [
+    'sw-stack',
+    'sw-inline',
+    'sw-wrap',
+    'sw-grow',
+    'sw-full-width',
+    'sw-container',
+    'sw-sr-only',
+    'sw-align-start',
+    'sw-align-center',
+    'sw-align-end',
+    'sw-align-stretch',
+    'sw-justify-start',
+    'sw-justify-center',
+    'sw-justify-end',
+    'sw-justify-between',
+];

package/dist/css/stylesheet.d.ts

@@ -0,0 +1,3 @@
+export declare function utilityClassCatalog(): string[];
+export { generatePaletteStylesheet, paletteStylesheetIds, } from './css-palettes.js';
+export declare function generateStylesheet(): string;

package/dist/css/stylesheet.js

@@ -0,0 +1,75 @@
+import { cardVariants, darkTheme, lightTheme, typographyVariants, } from '@scalewing/tokens';
+import { actionMenuClassCatalog } from './css-action-menu.js';
+import { accordionClassCatalog } from './css-accordion.js';
+import { switchClassCatalog } from './css-switch.js';
+import { dateFieldClassCatalog } from './css-date-field.js';
+import { checkboxClassCatalog } from './css-checkbox.js';
+import { radioGroupClassCatalog } from './css-radio-group.js';
+import { spinnerClassCatalog } from './css-spinner.js';
+import { progressClassCatalog } from './css-progress.js';
+import { tooltipClassCatalog } from './css-tooltip.js';
+import { separatorClassCatalog } from './css-separator.js';
+import { responsiveClassCatalog } from './css-responsive.js';
+import { filterChipsClassCatalog } from './css-filter-chips.js';
+import { fieldClassCatalog } from './css-field.js';
+import { cssComponentClasses } from './css-components.js';
+import { buttonClassCatalog } from './css-button.js';
+import { chartClassCatalog } from './css-chart.js';
+import { dataClassCatalog } from './css-data.js';
+import { chromeClassCatalog } from './css-chrome.js';
+import { dialogClassCatalog } from './css-dialog.js';
+import { selectClassCatalog } from './css-select.js';
+import { splitClassCatalog } from './css-split.js';
+import { toastClassCatalog } from './css-toast.js';
+import { cssDocumentCanvas } from './css-document.js';
+import { cssPaletteAttributes } from './css-palettes.js';
+import { cssUtilities } from './css-utilities.js';
+import { cssVariables } from './css-variables.js';
+import { gapClassNames, layoutClassNames, paddingClassNames, } from './spacing-classes.js';
+export function utilityClassCatalog() {
+    return [
+        ...paddingClassNames(),
+        ...gapClassNames(),
+        ...layoutClassNames,
+        'sw-card',
+        ...cardVariants.map((variant) => `sw-card-${variant}`),
+        'sw-truncate',
+        'sw-tabular',
+        ...Object.keys(typographyVariants).map((name) => `sw-text-${name}`),
+        ...buttonClassCatalog(),
+        ...dataClassCatalog(),
+        ...chartClassCatalog(),
+        ...chromeClassCatalog(),
+        ...dialogClassCatalog(),
+        ...accordionClassCatalog(),
+        ...selectClassCatalog(),
+        ...actionMenuClassCatalog(),
+        ...switchClassCatalog(),
+        ...dateFieldClassCatalog(),
+        ...checkboxClassCatalog(),
+        ...radioGroupClassCatalog(),
+        ...spinnerClassCatalog(),
+        ...progressClassCatalog(),
+        ...tooltipClassCatalog(),
+        ...separatorClassCatalog(),
+        ...filterChipsClassCatalog(),
+        ...fieldClassCatalog(),
+        ...splitClassCatalog(),
+        ...toastClassCatalog(),
+        ...responsiveClassCatalog(),
+    ];
+}
+export { generatePaletteStylesheet, paletteStylesheetIds, } from './css-palettes.js';
+export function generateStylesheet() {
+    return `/* Generated by @scalewing/tokens. Do not edit by hand. */
+${cssVariables(lightTheme, darkTheme)}
+
+${cssPaletteAttributes()}
+
+${cssDocumentCanvas()}
+
+${cssUtilities()}
+
+${cssComponentClasses()}
+`;
+}

package/dist/date-only.d.ts

@@ -0,0 +1,3 @@
+export declare function isDateOnly(value: string): boolean;
+export declare function assertDateOnly(name: string, value: string, empty?: boolean): void;
+export declare function isOutsideDateRange(value: string, min?: string, max?: string): boolean;

package/dist/date-only.js

@@ -0,0 +1,31 @@
+const DATE_ONLY = /^(\d{4})-(\d{2})-(\d{2})$/;
+function daysInMonth(year, month) {
+    if (month === 2) {
+        const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
+        return leap ? 29 : 28;
+    }
+    return [4, 6, 9, 11].includes(month) ? 30 : 31;
+}
+export function isDateOnly(value) {
+    const parts = DATE_ONLY.exec(value);
+    if (!parts)
+        return false;
+    const year = Number(parts[1]);
+    const month = Number(parts[2]);
+    const day = Number(parts[3]);
+    return (year >= 1 &&
+        month >= 1 &&
+        month <= 12 &&
+        day >= 1 &&
+        day <= daysInMonth(year, month));
+}
+export function assertDateOnly(name, value, empty = false) {
+    if (empty && value === '')
+        return;
+    if (!isDateOnly(value))
+        throw new RangeError(`${name} must be a valid YYYY-MM-DD date`);
+}
+export function isOutsideDateRange(value, min, max) {
+    return (value !== '' &&
+        ((min !== undefined && value < min) || (max !== undefined && value > max)));
+}

package/dist/index.d.ts

@@ -1,7 +1,15 @@
+export { ActionMenu, type ActionMenuItem, type ActionMenuProps, } from './components/ActionMenu.js';
 export { Accordion } from './components/Accordion.js';
 export type { AccordionProps } from './components/Accordion.js';
+export { Switch, type SwitchProps } from './components/Switch.js';
+export { DateField, type DateFieldProps } from './components/DateField.js';
+export { Checkbox, type CheckboxProps } from './components/Checkbox.js';
+export { Spinner, type SpinnerProps, type SpinnerSize, } from './components/Spinner.js';
+export { Progress, type ProgressProps, type ProgressTone, } from './components/Progress.js';
+export { Tooltip, type TooltipProps } from './components/Tooltip.js';
+export { RadioGroup, type RadioGroupOption, type RadioGroupProps, } from './components/RadioGroup.js';
 export { AppHeader, type AppHeaderProps } from './components/AppHeader.js';
-export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, } from './components/Badge.js';
+export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, type BarChartItem, type BarChartProps, } from './components/BarChart.js';
 export { Button, type ButtonProps, type ButtonSize, type ButtonVariant, } from './components/Button.js';
 export { Box, type BoxElement, type BoxProps } from './components/Box.js';
@@ -22,3 +30,9 @@ export { Stack, type Align, type Justify, type StackProps, } from './components/
 export { Table, TableBody, TableCell, TableHeader, TableRow, type TableBodyProps, type TableCellProps, type TableDensity, type TableHeaderProps, type TableProps, type TableRowProps, } from './components/Table.js';
 export { Text, type TextElement, type TextProps } from './components/Text.js';
 export { ThemeProvider, useTheme, type ThemeProviderProps, } from './theme/ThemeProvider.js';
+export { utilityClassCatalog } from './css/stylesheet.js';
+export type { VisibilityProps } from './visibility-classes.js';
+export { Separator } from './components/Separator.js';
+export type { SeparatorOrientation, SeparatorProps, } from './components/Separator.js';
+export { FilterChips } from './components/FilterChips.js';
+export type { FilterChipOption, FilterChipsProps, } from './components/FilterChips.js';

package/dist/index.js

@@ -1,6 +1,14 @@
+export { ActionMenu, } from './components/ActionMenu.js';
 export { Accordion } from './components/Accordion.js';
+export { Switch } from './components/Switch.js';
+export { DateField } from './components/DateField.js';
+export { Checkbox } from './components/Checkbox.js';
+export { Spinner, } from './components/Spinner.js';
+export { Progress, } from './components/Progress.js';
+export { Tooltip } from './components/Tooltip.js';
+export { RadioGroup, } from './components/RadioGroup.js';
 export { AppHeader } from './components/AppHeader.js';
-export { Badge, } from './components/Badge.js';
+export { Badge, badgeSizes, badgeTones, } from './components/Badge.js';
 export { BarChart, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
 export { Box } from './components/Box.js';
@@ -17,3 +25,6 @@ export { Stack, } from './components/Stack.js';
 export { Table, TableBody, TableCell, TableHeader, TableRow, } from './components/Table.js';
 export { Text } from './components/Text.js';
 export { ThemeProvider, useTheme, } from './theme/ThemeProvider.js';
+export { utilityClassCatalog } from './css/stylesheet.js';
+export { Separator } from './components/Separator.js';
+export { FilterChips } from './components/FilterChips.js';

package/dist/spacing-classes.js

@@ -1,4 +1,4 @@
-import { spacingClass, } from '@scalewing/tokens';
+import { spacingClass } from './css/spacing-classes.js';
 const paddingPropToAxis = {
     padding: 'all',
     paddingX: 'x',