@octavius2929-personal/design-system 0.4.0 → 0.5.1

package/dist/index.d.ts

@@ -122,14 +122,8 @@ declare const tintaSchema: {
             readonly tight: "-0.01em";
             readonly normal: "0";
             readonly wide: "0.04em";
-            readonly wider: "0.14em";
-            readonly widest: "0.28em";
-        };
-        leading: {
-            readonly tight: "1.05";
-            readonly snug: "1.2";
-            readonly normal: "1.5";
-            readonly relaxed: "1.7";
+            readonly wider: "0.1em";
+            readonly widest: "0.14em";
         };
         weight: {
             readonly light: "300";
@@ -272,14 +266,8 @@ declare const tintaSchema: {
             readonly tight: "-0.01em";
             readonly normal: "0";
             readonly wide: "0.04em";
-            readonly wider: "0.14em";
-            readonly widest: "0.28em";
-        };
-        leading: {
-            readonly tight: "1.05";
-            readonly snug: "1.2";
-            readonly normal: "1.5";
-            readonly relaxed: "1.7";
+            readonly wider: "0.1em";
+            readonly widest: "0.14em";
         };
         weight: {
             readonly light: "300";
@@ -422,14 +410,8 @@ declare const tintaSchema: {
             readonly tight: "-0.01em";
             readonly normal: "0";
             readonly wide: "0.04em";
-            readonly wider: "0.14em";
-            readonly widest: "0.28em";
-        };
-        leading: {
-            readonly tight: "1.05";
-            readonly snug: "1.2";
-            readonly normal: "1.5";
-            readonly relaxed: "1.7";
+            readonly wider: "0.1em";
+            readonly widest: "0.14em";
         };
         weight: {
             readonly light: "300";
@@ -572,14 +554,8 @@ declare const tintaSchema: {
             readonly tight: "-0.01em";
             readonly normal: "0";
             readonly wide: "0.04em";
-            readonly wider: "0.14em";
-            readonly widest: "0.28em";
-        };
-        leading: {
-            readonly tight: "1.05";
-            readonly snug: "1.2";
-            readonly normal: "1.5";
-            readonly relaxed: "1.7";
+            readonly wider: "0.1em";
+            readonly widest: "0.14em";
         };
         weight: {
             readonly light: "300";
@@ -758,12 +734,6 @@ declare const vars: {
         readonly wider: `var(--${string})`;
         readonly widest: `var(--${string})`;
     };
-    leading: {
-        readonly tight: `var(--${string})`;
-        readonly snug: `var(--${string})`;
-        readonly normal: `var(--${string})`;
-        readonly relaxed: `var(--${string})`;
-    };
     dur: {
         readonly fast: `var(--${string})`;
         readonly base: `var(--${string})`;
@@ -953,7 +923,7 @@ interface SelectOption {
 }
 interface SelectProps {
     options: SelectOption[];
-    value?: string;
+    value?: string | undefined;
     onChange?: (value: string) => void;
     placeholder?: ReactNode;
     label?: ReactNode;

package/dist/index.js

@@ -1,9 +1,9 @@
 // src/theme/theme.css.ts
-var colorVars = { bg1: "var(--bg1__e3grur2c)", bg2: "var(--bg2__e3grur2d)", bg3: "var(--bg3__e3grur2e)", bgInset: "var(--bgInset__e3grur2f)", fg1: "var(--fg1__e3grur2g)", fg2: "var(--fg2__e3grur2h)", fg3: "var(--fg3__e3grur2i)", fgOnAccent: "var(--fgOnAccent__e3grur2j)", border1: "var(--border1__e3grur2k)", border2: "var(--border2__e3grur2l)", borderStrong: "var(--borderStrong__e3grur2m)", accent: "var(--accent__e3grur2n)", accentHover: "var(--accentHover__e3grur2o)", accentSoft: "var(--accentSoft__e3grur2p)", ok: "var(--ok__e3grur2q)", warn: "var(--warn__e3grur2r)", danger: "var(--danger__e3grur2s)", info: "var(--info__e3grur2t)", focus: "var(--focus__e3grur2u)", scrim: "var(--scrim__e3grur2v)" };
+var colorVars = { bg1: "var(--bg1__e3grur28)", bg2: "var(--bg2__e3grur29)", bg3: "var(--bg3__e3grur2a)", bgInset: "var(--bgInset__e3grur2b)", fg1: "var(--fg1__e3grur2c)", fg2: "var(--fg2__e3grur2d)", fg3: "var(--fg3__e3grur2e)", fgOnAccent: "var(--fgOnAccent__e3grur2f)", border1: "var(--border1__e3grur2g)", border2: "var(--border2__e3grur2h)", borderStrong: "var(--borderStrong__e3grur2i)", accent: "var(--accent__e3grur2j)", accentHover: "var(--accentHover__e3grur2k)", accentSoft: "var(--accentSoft__e3grur2l)", ok: "var(--ok__e3grur2m)", warn: "var(--warn__e3grur2n)", danger: "var(--danger__e3grur2o)", info: "var(--info__e3grur2p)", focus: "var(--focus__e3grur2q)", scrim: "var(--scrim__e3grur2r)" };
 var modeNames = ["light", "dark", "sepia", "contrast"];
 var schemaNames = ["tinta"];
-var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2w", dark: "theme_themes_tinta_dark__e3grur2x", sepia: "theme_themes_tinta_sepia__e3grur2y", contrast: "theme_themes_tinta_contrast__e3grur2z" } };
-var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, leading: { tight: "var(--leading-tight__e3grur1w)", snug: "var(--leading-snug__e3grur1x)", normal: "var(--leading-normal__e3grur1y)", relaxed: "var(--leading-relaxed__e3grur1z)" }, weight: { light: "var(--weight-light__e3grur20)", regular: "var(--weight-regular__e3grur21)", medium: "var(--weight-medium__e3grur22)", semibold: "var(--weight-semibold__e3grur23)", bold: "var(--weight-bold__e3grur24)" }, dur: { fast: "var(--dur-fast__e3grur25)", base: "var(--dur-base__e3grur26)", slow: "var(--dur-slow__e3grur27)" }, ease: { ink: "var(--ease-ink__e3grur28)" }, shadow: { sm: "var(--shadow-sm__e3grur29)", md: "var(--shadow-md__e3grur2a)", lg: "var(--shadow-lg__e3grur2b)" }, color: colorVars };
+var themes = { tinta: { light: "theme_themes_tinta_light__e3grur2s", dark: "theme_themes_tinta_dark__e3grur2t", sepia: "theme_themes_tinta_sepia__e3grur2u", contrast: "theme_themes_tinta_contrast__e3grur2v" } };
+var vars = { font: { display: "var(--font-display__e3grur0)", text: "var(--font-text__e3grur1)", mono: "var(--font-mono__e3grur2)", black: "var(--font-black__e3grur3)" }, text: { eyebrow: { size: "var(--text-eyebrow-size__e3grur4)", lineHeight: "var(--text-eyebrow-lineHeight__e3grur5)", weight: "var(--text-eyebrow-weight__e3grur6)", letterSpacing: "var(--text-eyebrow-letterSpacing__e3grur7)" }, display: { size: "var(--text-display-size__e3grur8)", lineHeight: "var(--text-display-lineHeight__e3grur9)", weight: "var(--text-display-weight__e3grura)", letterSpacing: "var(--text-display-letterSpacing__e3grurb)" }, h1: { size: "var(--text-h1-size__e3grurc)", lineHeight: "var(--text-h1-lineHeight__e3grurd)", weight: "var(--text-h1-weight__e3grure)", letterSpacing: "var(--text-h1-letterSpacing__e3grurf)" }, h2: { size: "var(--text-h2-size__e3grurg)", lineHeight: "var(--text-h2-lineHeight__e3grurh)", weight: "var(--text-h2-weight__e3gruri)", letterSpacing: "var(--text-h2-letterSpacing__e3grurj)" }, h3: { size: "var(--text-h3-size__e3grurk)", lineHeight: "var(--text-h3-lineHeight__e3grurl)", weight: "var(--text-h3-weight__e3grurm)", letterSpacing: "var(--text-h3-letterSpacing__e3grurn)" }, h4: { size: "var(--text-h4-size__e3gruro)", lineHeight: "var(--text-h4-lineHeight__e3grurp)", weight: "var(--text-h4-weight__e3grurq)", letterSpacing: "var(--text-h4-letterSpacing__e3grurr)" }, body: { size: "var(--text-body-size__e3grurs)", lineHeight: "var(--text-body-lineHeight__e3grurt)", weight: "var(--text-body-weight__e3gruru)", letterSpacing: "var(--text-body-letterSpacing__e3grurv)" }, lead: { size: "var(--text-lead-size__e3grurw)", lineHeight: "var(--text-lead-lineHeight__e3grurx)", weight: "var(--text-lead-weight__e3grury)", letterSpacing: "var(--text-lead-letterSpacing__e3grurz)" }, small: { size: "var(--text-small-size__e3grur10)", lineHeight: "var(--text-small-lineHeight__e3grur11)", weight: "var(--text-small-weight__e3grur12)", letterSpacing: "var(--text-small-letterSpacing__e3grur13)" }, caption: { size: "var(--text-caption-size__e3grur14)", lineHeight: "var(--text-caption-lineHeight__e3grur15)", weight: "var(--text-caption-weight__e3grur16)", letterSpacing: "var(--text-caption-letterSpacing__e3grur17)" } }, space: { none: "var(--space-none__e3grur18)", xs: "var(--space-xs__e3grur19)", sm: "var(--space-sm__e3grur1a)", md: "var(--space-md__e3grur1b)", lg: "var(--space-lg__e3grur1c)", xl: "var(--space-xl__e3grur1d)", "2xl": "var(--space-2xl__e3grur1e)", "3xl": "var(--space-3xl__e3grur1f)", "4xl": "var(--space-4xl__e3grur1g)", "5xl": "var(--space-5xl__e3grur1h)" }, radius: { none: "var(--radius-none__e3grur1i)", sm: "var(--radius-sm__e3grur1j)", md: "var(--radius-md__e3grur1k)", lg: "var(--radius-lg__e3grur1l)", base: "var(--radius-base__e3grur1m)", full: "var(--radius-full__e3grur1n)" }, border: { hair: "var(--border-hair__e3grur1o)", rule: "var(--border-rule__e3grur1p)", heavy: "var(--border-heavy__e3grur1q)" }, tracking: { tight: "var(--tracking-tight__e3grur1r)", normal: "var(--tracking-normal__e3grur1s)", wide: "var(--tracking-wide__e3grur1t)", wider: "var(--tracking-wider__e3grur1u)", widest: "var(--tracking-widest__e3grur1v)" }, weight: { light: "var(--weight-light__e3grur1w)", regular: "var(--weight-regular__e3grur1x)", medium: "var(--weight-medium__e3grur1y)", semibold: "var(--weight-semibold__e3grur1z)", bold: "var(--weight-bold__e3grur20)" }, dur: { fast: "var(--dur-fast__e3grur21)", base: "var(--dur-base__e3grur22)", slow: "var(--dur-slow__e3grur23)" }, ease: { ink: "var(--ease-ink__e3grur24)" }, shadow: { sm: "var(--shadow-sm__e3grur25)", md: "var(--shadow-md__e3grur26)", lg: "var(--shadow-lg__e3grur27)" }, color: colorVars };
 
 // src/hooks/use-previous/index.ts
 import { useEffect, useRef } from "react";
@@ -104,7 +104,10 @@ function ThemeProvider({
       setSchema,
       setMode: setPreference,
       toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
-      cycleMode: () => setPreference(modeNames[(modeNames.indexOf(mode) + 1) % modeNames.length])
+      cycleMode: () => {
+        const next = modeNames[(modeNames.indexOf(mode) + 1) % modeNames.length];
+        if (next) setPreference(next);
+      }
     }),
     [schema, mode, preference]
   );
@@ -253,7 +256,10 @@ var root4 = "use-styles_root__1wpei6p0";
 var tone2 = { ink: "use-styles_tone_ink__1wpei6p2", accent: "use-styles_tone_accent__1wpei6p3" };
 
 // src/components/badge/use-styles.ts
-function useStyles4({ tone: tone4 = "ink", className }) {
+function useStyles4({
+  tone: tone4 = "ink",
+  className
+}) {
   const { themeClass } = useTheme();
   const root24 = useMemo5(
     () => [themeClass, root4, className].filter(Boolean).join(" "),
@@ -437,11 +443,11 @@ function CheckIcon({ size: size3 = 20, strokeWidth = 1.75, ...rest }) {
 import { useMemo as useMemo8 } from "react";
 
 // src/components/checkbox/use-styles.css.ts
-var box = "use-styles_box__9zoga92";
-var boxChecked = "use-styles_boxChecked__9zoga93";
-var check = "use-styles_check__9zoga94";
-var disabled = "use-styles_disabled__9zoga95";
-var input = "use-styles_input__9zoga91";
+var box = "use-styles_box__9zoga91";
+var boxChecked = "use-styles_boxChecked__9zoga92";
+var check = "use-styles_check__9zoga93";
+var disabled = "use-styles_disabled__9zoga94";
+var input = "surfaces_srOnly__6hs0fg0";
 var root6 = "use-styles_root__9zoga90";
 
 // src/components/checkbox/use-styles.ts
@@ -493,11 +499,11 @@ function Checkbox({
 import { useMemo as useMemo9 } from "react";
 
 // src/components/radio/use-styles.css.ts
-var circle = "use-styles_circle__vy61b43";
+var circle = "use-styles_circle__vy61b42";
 var disabled2 = "use-styles_disabled__vy61b41";
-var dot2 = "use-styles_dot__vy61b44";
-var input2 = "use-styles_input__vy61b42";
-var label2 = "use-styles_label__vy61b45";
+var dot2 = "use-styles_dot__vy61b43";
+var input2 = "surfaces_srOnly__6hs0fg0";
+var label2 = "use-styles_label__vy61b44";
 var root7 = "use-styles_root__vy61b40";
 
 // src/components/radio/use-styles.ts
@@ -545,13 +551,13 @@ function Radio({ checked, onChange, label: label7, name, value, disabled: disabl
 import { useMemo as useMemo10 } from "react";
 
 // src/components/switch/use-styles.css.ts
-var input3 = "use-styles_input__1r6kem71";
-var knob = "use-styles_knob__1r6kem74";
-var knobChecked = "use-styles_knobChecked__1r6kem75";
-var label3 = "use-styles_label__1r6kem76";
+var input3 = "surfaces_srOnly__6hs0fg0";
+var knob = "use-styles_knob__1r6kem73";
+var knobChecked = "use-styles_knobChecked__1r6kem74";
+var label3 = "use-styles_label__1r6kem75";
 var root8 = "use-styles_root__1r6kem70";
-var track2 = "use-styles_track__1r6kem72";
-var trackChecked = "use-styles_trackChecked__1r6kem73";
+var track2 = "use-styles_track__1r6kem71";
+var trackChecked = "use-styles_trackChecked__1r6kem72";
 
 // src/components/switch/use-styles.ts
 function useStyles9({ checked }) {
@@ -1009,12 +1015,14 @@ import { cloneElement, useId as useId2, useState as useState4 } from "react";
 import { useMemo as useMemo15 } from "react";
 
 // src/components/tooltip/use-styles.css.ts
-var bubble = "use-styles_bubble__h9kvh1";
+var bubble = "use-styles_bubble__h9kvh1 surfaces_inkySurface__6hs0fg2";
 var placement = { top: "use-styles_placement_top__h9kvh2", bottom: "use-styles_placement_bottom__h9kvh3" };
 var wrapper = "use-styles_wrapper__h9kvh0";
 
 // src/components/tooltip/use-styles.ts
-function useStyles14({ placement: placement2 = "top" }) {
+function useStyles14({
+  placement: placement2 = "top"
+}) {
   const { themeClass } = useTheme();
   const wrapper4 = useMemo15(
     () => [themeClass, wrapper].filter(Boolean).join(" "),
@@ -1076,7 +1084,7 @@ import { useMemo as useMemo16 } from "react";
 var chevron = "use-styles_chevron__1w1czpb4";
 var chevronOpen = "use-styles_chevronOpen__1w1czpb5";
 var label4 = "use-styles_label__1w1czpb1";
-var menu = "use-styles_menu__1w1czpb6";
+var menu = "use-styles_menu__1w1czpb6 surfaces_panelSurface__6hs0fg1";
 var option = "use-styles_option__1w1czpb7";
 var optionActive = "use-styles_optionActive__1w1czpb9";
 var optionSelected = "use-styles_optionSelected__1w1czpb8";
@@ -1643,7 +1651,7 @@ import { useMemo as useMemo23 } from "react";
 // src/components/menu/use-styles.css.ts
 var danger = "use-styles_danger__1uyxaj3";
 var item2 = "use-styles_item__1uyxaj2";
-var list = "use-styles_list__1uyxaj1";
+var list = "use-styles_list__1uyxaj1 surfaces_panelSurface__6hs0fg1";
 var wrapper3 = "use-styles_wrapper__1uyxaj0";
 
 // src/components/menu/use-styles.ts
@@ -1848,6 +1856,7 @@ function Dialog({ open, onClose, title, actions: actions3, children }) {
     }
     const first = focusable[0];
     const last = focusable[focusable.length - 1];
+    if (!first || !last) return;
     const active2 = document.activeElement;
     if (event.shiftKey) {
       if (active2 === first || active2 === surfaceEl) {
@@ -1892,7 +1901,7 @@ import { useMemo as useMemo25 } from "react";
 // src/components/snackbar/use-styles.css.ts
 var closeBtn = "use-styles_closeBtn__ihzsep2";
 var message = "use-styles_message__ihzsep1";
-var root20 = "use-styles_root__ihzsep0";
+var root20 = "use-styles_root__ihzsep0 surfaces_inkySurface__6hs0fg2";
 
 // src/components/snackbar/use-styles.ts
 function useStyles24() {
@@ -1999,7 +2008,10 @@ var selected2 = "use-styles_selected__kbreq11";
 var trailing = "use-styles_trailing__kbreq14";
 
 // src/components/list-item/use-styles.ts
-function useStyles27({ selected: selected3, className }) {
+function useStyles27({
+  selected: selected3,
+  className
+}) {
   const { themeClass } = useTheme();
   const root24 = useMemo28(
     () => [themeClass, root23, selected3 && selected2, className].filter(Boolean).join(" "),