@scalewing/react 0.7.0 → 1.1.0

package/dist/styles.css

@@ -708,6 +708,10 @@ body {
   }
 }
 
+.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;
@@ -726,6 +730,11 @@ body {
 .sw-text-caption { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 400; letter-spacing: -0.08px; }
 .sw-text-data { font-family: var(--sw-font-sans); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.08px; font-variant-numeric: tabular-nums; }
 
+@media not all and (min-width: 48rem) {
+  .sw-text-display { font-size: 32px; line-height: 38px; letter-spacing: -0.6px; }
+  .sw-text-heading { font-size: 24px; line-height: 30px; letter-spacing: -0.4px; }
+}
+
 .sw-button {
   appearance: none;
   align-items: center;
@@ -1915,6 +1924,7 @@ body {
   display: inline-flex;
   font-family: var(--sw-font-sans);
   font-size: 15px;
+  gap: var(--sw-space-2);
   line-height: 20px;
   min-height: var(--sw-control-md-min-height);
   min-width: 0;
@@ -1922,12 +1932,30 @@ body {
   padding: var(--sw-space-1) var(--sw-space-3);
 }
 
+.sw-filter-chip-count {
+  color: var(--sw-color-muted);
+  flex: none;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 500;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+}
+
+.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);
@@ -1942,6 +1970,201 @@ body {
   .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; }
+}
+
+.sw-grid {
+  display: grid;
+  min-width: 0;
+}
+.sw-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.sw-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.sw-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+@media not all and (min-width: 48rem) {
+.sw-grid-cols-below-md-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.sw-grid-cols-below-md-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.sw-grid-cols-below-md-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.sw-grid-cols-below-md-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+}
+.sw-denomination-grid {
+  color: var(--sw-color-text);
+  font-family: var(--sw-font-sans);
+  max-width: 100%;
+  min-width: 0;
+}
+
+.sw-denomination-row-neutral { --sw-denomination-tone: var(--sw-color-muted); }
+.sw-denomination-row-accent { --sw-denomination-tone: var(--sw-color-accent); }
+.sw-denomination-row-success { --sw-denomination-tone: var(--sw-color-success); }
+.sw-denomination-row-danger { --sw-denomination-tone: var(--sw-color-danger); }
+
+.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: 13px;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  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: 15px;
+  font-weight: 600;
+  gap: var(--sw-space-2);
+  letter-spacing: -0.2px;
+  line-height: 20px;
+  min-width: 0;
+  text-align: start;
+}
+
+.sw-denomination-icon {
+  display: inline-flex;
+  flex: none;
+}
+
+.sw-denomination-cell {
+  color: var(--sw-color-text);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: end;
+}
+
+.sw-denomination-cell-zero {
+  color: var(--sw-color-muted);
+  font-weight: 500;
+  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: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: end;
+  white-space: nowrap;
+}
+
+.sw-denomination-total-inline {
+  display: none;
+  flex-basis: 100%;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.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: 20px;
+  letter-spacing: -0.3px;
+  line-height: 28px;
+}
+
+.sw-denomination-subtotal {
+  color: var(--sw-color-muted);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.08px;
+  line-height: 18px;
+  text-align: center;
+}
+
+@media not all and (min-width: 48rem) {
+  .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; }
 }
 
 .sw-field-required { color: var(--sw-color-danger); }
@@ -2115,3 +2338,11 @@ body {
     translate: var(--sw-toast-to-x) var(--sw-toast-to-y);
   }
 }
+
+@media (min-width: 48rem) {
+  .sw-hide-from-md { display: none; }
+}
+
+@media not all and (min-width: 48rem) {
+  .sw-hide-below-md { display: none; }
+}

package/dist/visibility-classes.d.ts

@@ -0,0 +1,6 @@
+import { type Breakpoint } from './css/breakpoints.js';
+export type VisibilityProps = {
+    hideBelow?: Breakpoint;
+    hideFrom?: Breakpoint;
+};
+export declare function visibilityClassNames({ hideBelow, hideFrom, }: VisibilityProps): string[];

package/dist/visibility-classes.js

@@ -0,0 +1,7 @@
+import { hideClass } from './css/breakpoints.js';
+export function visibilityClassNames({ hideBelow, hideFrom, }) {
+    return [
+        ...(hideBelow ? [hideClass('below', hideBelow)] : []),
+        ...(hideFrom ? [hideClass('from', hideFrom)] : []),
+    ];
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scalewing/react",
-  "version": "0.7.0",
+  "version": "1.1.0",
   "description": "Scalewing DOM components and package-owned CSS utilities.",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,7 @@
     "README.md"
   ],
   "dependencies": {
-    "@scalewing/tokens": "0.7.0"
+    "@scalewing/tokens": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",
@@ -57,7 +57,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf dist && tsc -p tsconfig.json && cp ../tokens/dist/styles.css dist/styles.css && rm -rf dist/palette && mkdir -p dist/palette && cp ../tokens/dist/palette/*.css dist/palette/",
+    "build": "rm -rf dist && tsc -p tsconfig.json && node --import ./scripts/register-tokens-dist.mjs scripts/write-css.js",
     "test": "vitest run",
     "typecheck": "tsc -p tsconfig.json --noEmit"
   },