@scalewing/react 0.1.0 → 0.3.0

package/dist/palette/sunburst.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-background: #F6DCAC;
+  --sw-color-surface: #FBF0D8;
+  --sw-color-text: #1D1D1F;
+  --sw-color-muted: #5C5346;
+  --sw-color-accent: #A33B20;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #E5C48A;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-background: #012D4E;
+  --sw-color-surface: #0A3D5C;
+  --sw-color-text: #F6DCAC;
+  --sw-color-muted: #C4A882;
+  --sw-color-accent: #FAA968;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #1A5A70;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(68, 53, 43, 0.72);
+  --sw-glass-border: rgba(253, 221, 195, 0.22);
+  --sw-glass-specular: rgba(254, 238, 225, 0.28);
+}

package/dist/palette/synthwave.css

@@ -0,0 +1,26 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #D81B60;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-background: #1A0533;
+  --sw-color-surface: #241043;
+  --sw-color-text: #F5F5F7;
+  --sw-color-muted: #C9B8E8;
+  --sw-color-accent: #FF2A6D;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #4A2C6A;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(69, 31, 44, 0.72);
+  --sw-glass-border: rgba(255, 170, 197, 0.22);
+  --sw-glass-specular: rgba(255, 212, 226, 0.28);
+}

package/dist/palette/tangerine.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #C2410C;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1;
+  --sw-glass-fill: rgba(255, 255, 255, 1);
+  --sw-glass-border: rgba(210, 210, 215, 1);
+  --sw-glass-specular: rgba(255, 255, 255, 0);
+}
+
+[data-theme='dark'] {
+  --sw-color-accent: #FB923C;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(68, 49, 35, 0.72);
+  --sw-glass-border: rgba(253, 211, 177, 0.22);
+  --sw-glass-specular: rgba(254, 233, 216, 0.28);
+}

package/dist/select-list.d.ts

@@ -0,0 +1,7 @@
+export type SelectOption = {
+    value: string;
+    label: string;
+};
+export declare function selectedSelectIndex(options: readonly SelectOption[], value: string): number;
+export declare function nextSelectIndex(current: number, delta: number, length: number): number;
+export declare function selectIndexForKey(key: string, current: number, length: number): number | null;

package/dist/select-list.js

@@ -0,0 +1,24 @@
+export function selectedSelectIndex(options, value) {
+    const index = options.findIndex((option) => option.value === value);
+    return index < 0 ? 0 : index;
+}
+export function nextSelectIndex(current, delta, length) {
+    if (length <= 0) {
+        return 0;
+    }
+    return Math.min(length - 1, Math.max(0, current + delta));
+}
+export function selectIndexForKey(key, current, length) {
+    switch (key) {
+        case 'ArrowDown':
+            return nextSelectIndex(current, 1, length);
+        case 'ArrowUp':
+            return nextSelectIndex(current, -1, length);
+        case 'Home':
+            return 0;
+        case 'End':
+            return Math.max(0, length - 1);
+        default:
+            return null;
+    }
+}

package/dist/split-size.d.ts

@@ -0,0 +1,18 @@
+export type SplitMetrics = {
+    min: number;
+    max: number;
+    step: number;
+};
+export type SplitSnapshot = {
+    collapsed: boolean;
+    width: number;
+};
+export declare function cssLengthToPx(value: string, remPx?: number): number;
+export declare function readSplitMetrics(read: (name: string) => string, remPx?: number): SplitMetrics & {
+    defaultWidth: number;
+};
+export declare function clampSplitSize(size: number, min: number, max: number): number;
+export declare function splitPercent(width: number, min: number, max: number): number;
+export declare function effectiveSplitMax(tokenMax: number, parentWidth: number, handleWidth: number, min: number): number;
+export declare function applySplitDrag(start: SplitSnapshot, deltaX: number, metrics: SplitMetrics): SplitSnapshot;
+export declare function applySplitKey(key: string, start: SplitSnapshot, metrics: SplitMetrics): SplitSnapshot | null;

package/dist/split-size.js

@@ -0,0 +1,94 @@
+import { spacingScale, splitScale } from '@scalewing/tokens';
+export function cssLengthToPx(value, remPx = 16) {
+    const trimmed = value.trim();
+    if (trimmed.endsWith('rem')) {
+        const count = Number.parseFloat(trimmed);
+        return Number.isFinite(count) ? count * remPx : 0;
+    }
+    if (trimmed.endsWith('px')) {
+        const count = Number.parseFloat(trimmed);
+        return Number.isFinite(count) ? count : 0;
+    }
+    const count = Number.parseFloat(trimmed);
+    return Number.isFinite(count) ? count : 0;
+}
+export function readSplitMetrics(read, remPx = 16) {
+    return {
+        min: cssLengthToPx(read('--sw-split-min') || `${splitScale.min}rem`, remPx),
+        max: cssLengthToPx(read('--sw-split-max') || `${splitScale.max}rem`, remPx),
+        step: cssLengthToPx(read('--sw-space-4') || `${spacingScale[4]}px`, remPx),
+        defaultWidth: cssLengthToPx(read('--sw-split-size') || `${splitScale.size}rem`, remPx),
+    };
+}
+export function clampSplitSize(size, min, max) {
+    return Math.min(max, Math.max(min, size));
+}
+export function splitPercent(width, min, max) {
+    if (max <= min) {
+        return 0;
+    }
+    return Math.round(((clampSplitSize(width, min, max) - min) / (max - min)) * 100);
+}
+export function effectiveSplitMax(tokenMax, parentWidth, handleWidth, min) {
+    if (parentWidth <= 0) {
+        return tokenMax;
+    }
+    const room = parentWidth - handleWidth - min;
+    if (room < min) {
+        return min;
+    }
+    return Math.min(tokenMax, room);
+}
+export function applySplitDrag(start, deltaX, metrics) {
+    if (start.collapsed) {
+        if (deltaX <= 0) {
+            return start;
+        }
+        return {
+            collapsed: false,
+            width: clampSplitSize(metrics.min + deltaX, metrics.min, metrics.max),
+        };
+    }
+    const proposed = start.width + deltaX;
+    if (proposed < metrics.min) {
+        return { collapsed: true, width: start.width };
+    }
+    return {
+        collapsed: false,
+        width: clampSplitSize(proposed, metrics.min, metrics.max),
+    };
+}
+export function applySplitKey(key, start, metrics) {
+    if (key === 'Enter' || key === ' ') {
+        return { collapsed: !start.collapsed, width: start.width };
+    }
+    if (start.collapsed) {
+        if (key === 'ArrowRight') {
+            return { collapsed: false, width: start.width };
+        }
+        if (key === 'End') {
+            return { collapsed: false, width: metrics.max };
+        }
+        return null;
+    }
+    if (key === 'Home') {
+        return { collapsed: false, width: metrics.min };
+    }
+    if (key === 'End') {
+        return { collapsed: false, width: metrics.max };
+    }
+    if (key === 'ArrowRight') {
+        return {
+            collapsed: false,
+            width: clampSplitSize(start.width + metrics.step, metrics.min, metrics.max),
+        };
+    }
+    if (key === 'ArrowLeft') {
+        const next = start.width - metrics.step;
+        if (next < metrics.min) {
+            return { collapsed: true, width: start.width };
+        }
+        return { collapsed: false, width: next };
+    }
+    return null;
+}