@scalewing/react 0.2.0 → 0.3.0

package/dist/components/Text.d.ts

@@ -1,13 +1,13 @@
 import { type SemanticColorKey, type TypographyVariant } from '@scalewing/tokens';
-import { type HTMLAttributes } from 'react';
+import { type HTMLAttributes, type LabelHTMLAttributes } from 'react';
 export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'label' | 'strong';
-export type TextProps = HTMLAttributes<HTMLElement> & {
+export type TextProps = HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<HTMLLabelElement>, 'htmlFor'> & {
     as?: TextElement;
     color?: SemanticColorKey;
     truncate?: boolean;
     variant?: TypographyVariant;
 };
-export declare const Text: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+export declare const Text: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & Pick<LabelHTMLAttributes<HTMLLabelElement>, "htmlFor"> & {
     as?: TextElement;
     color?: SemanticColorKey;
     truncate?: boolean;

package/dist/components/Text.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, } from 'react';
 import { cx } from '../class-names.js';
 const defaultElement = {
     body: 'p',
     caption: 'span',
+    data: 'span',
     display: 'h1',
     heading: 'h2',
     label: 'span',

package/dist/components/Toast.d.ts

@@ -0,0 +1,10 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+export type ToastProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'popover'> & {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    timeoutMs?: number;
+    anchor?: Element | null;
+    target?: Element | null;
+    children: ReactNode;
+};
+export declare function Toast({ anchor, children, className, onOpenChange, open, target, timeoutMs, ...rest }: ToastProps): import("react").JSX.Element;

package/dist/components/Toast.js

@@ -0,0 +1,61 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useEffect, useRef, } from 'react';
+import { cx } from '../class-names.js';
+import { spacingClassNames } from '../spacing-classes.js';
+import { applyTravelVars, clearTravelVars, travelTranslate, } from '../toast-travel.js';
+const DEFAULT_TIMEOUT_MS = 800;
+function travels(anchor, target) {
+    return Boolean(anchor && target);
+}
+export function Toast({ anchor = null, children, className, onOpenChange, open, target = null, timeoutMs = DEFAULT_TIMEOUT_MS, ...rest }) {
+    const nodeRef = useRef(null);
+    const moving = travels(anchor, target);
+    useLayoutEffect(() => {
+        const node = nodeRef.current;
+        if (!node || typeof node.showPopover !== 'function') {
+            return;
+        }
+        if (!open) {
+            if (node.matches(':popover-open')) {
+                node.hidePopover();
+            }
+            clearTravelVars(node);
+            return;
+        }
+        if (moving && anchor && target) {
+            if (!node.matches(':popover-open')) {
+                node.showPopover();
+            }
+            applyTravelVars(node, travelTranslate(anchor.getBoundingClientRect(), target.getBoundingClientRect(), node.getBoundingClientRect()));
+            return;
+        }
+        clearTravelVars(node);
+        if (!node.matches(':popover-open')) {
+            node.showPopover();
+        }
+    }, [anchor, moving, open, target]);
+    useEffect(() => {
+        if (!open) {
+            return;
+        }
+        const reducedMotion = typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (moving && !reducedMotion) {
+            return;
+        }
+        const timer = window.setTimeout(() => {
+            onOpenChange(false);
+        }, timeoutMs);
+        return () => {
+            window.clearTimeout(timer);
+        };
+    }, [moving, open, onOpenChange, timeoutMs]);
+    function onAnimationEnd(event) {
+        if (event.target !== event.currentTarget || !moving) {
+            return;
+        }
+        onOpenChange(false);
+    }
+    return (_jsx("div", { ...rest, ref: nodeRef, className: cx('sw-toast', moving && 'sw-toast-travel', ...spacingClassNames({ padding: 3 }), className), onAnimationEnd: onAnimationEnd, popover: "manual", role: "status", children: children }));
+}

package/dist/index.d.ts

@@ -1,8 +1,24 @@
+export { Accordion } from './components/Accordion.js';
+export type { AccordionProps } from './components/Accordion.js';
+export { AppHeader, type AppHeaderProps } from './components/AppHeader.js';
+export { Badge, type BadgeProps, type BadgeSize, type BadgeTone, } 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';
 export { Card, type CardProps, type CardVariant } from './components/Card.js';
-export { Field, type FieldProps } from './components/Field.js';
+export { Dialog } from './components/Dialog.js';
+export type { DialogProps } from './components/Dialog.js';
+export { Toast } from './components/Toast.js';
+export type { ToastProps } from './components/Toast.js';
+export { Field, type FieldProps, type FieldSize } from './components/Field.js';
 export { Inline, type InlineProps } from './components/Inline.js';
+export { Split } from './components/Split.js';
+export type { SplitProps } from './components/Split.js';
+export { Nav, type NavProps } from './components/Nav.js';
+export { SegmentedControl, type SegmentedControlProps, type SegmentedItem, } from './components/SegmentedControl.js';
+export { Select } from './components/Select.js';
+export type { SelectAction, SelectOption, SelectProps, } from './components/Select.js';
 export { Stack, type Align, type Justify, type StackProps, } from './components/Stack.js';
+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';

package/dist/index.js

@@ -1,8 +1,19 @@
+export { Accordion } from './components/Accordion.js';
+export { AppHeader } from './components/AppHeader.js';
+export { Badge, } from './components/Badge.js';
+export { BarChart, } from './components/BarChart.js';
 export { Button, } from './components/Button.js';
 export { Box } from './components/Box.js';
 export { Card } from './components/Card.js';
+export { Dialog } from './components/Dialog.js';
+export { Toast } from './components/Toast.js';
 export { Field } from './components/Field.js';
 export { Inline } from './components/Inline.js';
+export { Split } from './components/Split.js';
+export { Nav } from './components/Nav.js';
+export { SegmentedControl, } from './components/SegmentedControl.js';
+export { Select } from './components/Select.js';
 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';

package/dist/palette/amber.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #B45309;
+  --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: #FCD34D;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(68, 61, 38, 0.72);
+  --sw-glass-border: rgba(254, 237, 184, 0.22);
+  --sw-glass-specular: rgba(254, 246, 219, 0.28);
+}

package/dist/palette/capri.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0077B6;
+  --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: #48CAE4;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(36, 59, 66, 0.72);
+  --sw-glass-border: rgba(182, 234, 244, 0.22);
+  --sw-glass-specular: rgba(218, 244, 250, 0.28);
+}

package/dist/palette/cerulean.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0066CC;
+  --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: #5AC8FA;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(39, 59, 70, 0.72);
+  --sw-glass-border: rgba(189, 233, 253, 0.22);
+  --sw-glass-specular: rgba(222, 244, 254, 0.28);
+}

package/dist/palette/cornflower.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #4F6BED;
+  --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: #93A4FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(49, 52, 71, 0.72);
+  --sw-glass-border: rgba(212, 219, 255, 0.22);
+  --sw-glass-specular: rgba(233, 237, 255, 0.28);
+}

package/dist/palette/fuchsia.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #C026D3;
+  --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: #E879F9;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(65, 45, 69, 0.72);
+  --sw-glass-border: rgba(246, 201, 253, 0.22);
+  --sw-glass-specular: rgba(250, 228, 254, 0.28);
+}

package/dist/palette/harvest.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-background: #E3DCC8;
+  --sw-color-surface: #EBE6D6;
+  --sw-color-text: #1D1D1F;
+  --sw-color-muted: #5C5346;
+  --sw-color-accent: #3E3E24;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #C9C2AE;
+  --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: #263E24;
+  --sw-color-surface: #2F4A2C;
+  --sw-color-text: #E3DCC8;
+  --sw-color-muted: #B8B090;
+  --sw-color-accent: #CEA453;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #3D5238;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(60, 52, 40, 0.72);
+  --sw-glass-border: rgba(235, 219, 186, 0.22);
+  --sw-glass-specular: rgba(245, 237, 221, 0.28);
+}

package/dist/palette/ink.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #1D1D1F;
+  --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: #F5F5F7;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(67, 67, 69, 0.72);
+  --sw-glass-border: rgba(251, 251, 252, 0.22);
+  --sw-glass-specular: rgba(253, 253, 253, 0.28);
+}

package/dist/palette/mocha.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-background: #F3E3C3;
+  --sw-color-surface: #F8EEE0;
+  --sw-color-text: #473333;
+  --sw-color-muted: #6B5348;
+  --sw-color-accent: #473333;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #E0CBA8;
+  --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: #473333;
+  --sw-color-surface: #5A4242;
+  --sw-color-text: #F3E3C3;
+  --sw-color-muted: #D4C4A8;
+  --sw-color-accent: #E8C69F;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #6B5353;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(65, 59, 53, 0.72);
+  --sw-glass-border: rgba(246, 232, 217, 0.22);
+  --sw-glass-specular: rgba(250, 244, 236, 0.28);
+}

package/dist/palette/navy.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0A2540;
+  --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: #7EB8FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(46, 56, 71, 0.72);
+  --sw-glass-border: rgba(203, 227, 255, 0.22);
+  --sw-glass-specular: rgba(229, 241, 255, 0.28);
+}

package/dist/palette/postcard.css

@@ -0,0 +1,31 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-background: #E4E4CC;
+  --sw-color-surface: #EEEEDD;
+  --sw-color-text: #1B2130;
+  --sw-color-muted: #5C5346;
+  --sw-color-accent: #A33B2B;
+  --sw-color-onAccent: #FFFFFF;
+  --sw-color-border: #D0D0B8;
+  --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: #1B2130;
+  --sw-color-surface: #252B40;
+  --sw-color-text: #E4E4CC;
+  --sw-color-muted: #B8B49A;
+  --sw-color-accent: #EEAF90;
+  --sw-color-onAccent: #101214;
+  --sw-color-border: #3A4158;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(66, 54, 51, 0.72);
+  --sw-glass-border: rgba(248, 223, 211, 0.22);
+  --sw-glass-specular: rgba(252, 239, 233, 0.28);
+}

package/dist/palette/raspberry.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #DB2777;
+  --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: #F472B6;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(67, 43, 57, 0.72);
+  --sw-glass-border: rgba(251, 199, 226, 0.22);
+  --sw-glass-specular: rgba(253, 227, 240, 0.28);
+}

package/dist/palette/sky.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #0369A1;
+  --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: #38BDF8;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(33, 57, 69, 0.72);
+  --sw-glass-border: rgba(175, 229, 252, 0.22);
+  --sw-glass-specular: rgba(215, 242, 254, 0.28);
+}

package/dist/palette/soft-blue.css

@@ -0,0 +1,21 @@
+/* Generated by @scalewing/tokens. Do not edit by hand. */
+:root,
+[data-theme='light'] {
+  --sw-color-accent: #3B6FD4;
+  --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: #8BB8FF;
+  --sw-color-onAccent: #101214;
+  --sw-glass-blur: 24px;
+  --sw-glass-saturate: 1.8;
+  --sw-glass-fill: rgba(48, 56, 71, 0.72);
+  --sw-glass-border: rgba(209, 227, 255, 0.22);
+  --sw-glass-specular: rgba(232, 241, 255, 0.28);
+}

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;