@octavius2929-personal/design-system 0.22.1 → 0.23.1

package/dist/index.d.cts

@@ -633,6 +633,22 @@ declare const schemas: {
 };
 type SchemaName = keyof typeof schemas;
 declare const schemaNames: SchemaName[];
+/**
+ * Núcleo platform-agnostic del tema: estado resuelto + acciones. Web y native
+ * lo extienden con sus extras de plataforma (web: `themeClass`; native:
+ * `colorTokens` + `tokens`). Una sola fuente para la forma común.
+ */
+interface ThemeState {
+    schema: SchemaName;
+    /** Modo efectivo ya resuelto (nunca "system"). */
+    mode: Mode;
+    /** La preferencia cruda elegida (puede ser "system"). */
+    preference: ModePreference;
+    setSchema: (schema: SchemaName) => void;
+    setMode: (mode: ModePreference) => void;
+    toggleMode: () => void;
+    cycleMode: () => void;
+}
 
 declare const colorVars: {
     bg1: `var(--${string})`;
@@ -1500,19 +1516,8 @@ declare const iconCatalog: {
     Icon: Icon;
 }[];
 
-interface ThemeContextValue {
-    schema: SchemaName;
-    /** Modo efectivo ya resuelto (nunca "system"). */
-    mode: Mode;
-    /** La preferencia cruda elegida (puede ser "system"). */
-    preference: ModePreference;
+interface ThemeContextValue extends ThemeState {
     themeClass: string;
-    setSchema: (schema: SchemaName) => void;
-    setMode: (mode: ModePreference) => void;
-    /** Alterna binario claro↔oscuro a partir del modo efectivo. */
-    toggleMode: () => void;
-    /** Rota por los cuatro modos en orden. */
-    cycleMode: () => void;
 }
 interface ThemeProviderProps {
     children: ReactNode;

package/dist/index.d.ts

@@ -633,6 +633,22 @@ declare const schemas: {
 };
 type SchemaName = keyof typeof schemas;
 declare const schemaNames: SchemaName[];
+/**
+ * Núcleo platform-agnostic del tema: estado resuelto + acciones. Web y native
+ * lo extienden con sus extras de plataforma (web: `themeClass`; native:
+ * `colorTokens` + `tokens`). Una sola fuente para la forma común.
+ */
+interface ThemeState {
+    schema: SchemaName;
+    /** Modo efectivo ya resuelto (nunca "system"). */
+    mode: Mode;
+    /** La preferencia cruda elegida (puede ser "system"). */
+    preference: ModePreference;
+    setSchema: (schema: SchemaName) => void;
+    setMode: (mode: ModePreference) => void;
+    toggleMode: () => void;
+    cycleMode: () => void;
+}
 
 declare const colorVars: {
     bg1: `var(--${string})`;
@@ -1500,19 +1516,8 @@ declare const iconCatalog: {
     Icon: Icon;
 }[];
 
-interface ThemeContextValue {
-    schema: SchemaName;
-    /** Modo efectivo ya resuelto (nunca "system"). */
-    mode: Mode;
-    /** La preferencia cruda elegida (puede ser "system"). */
-    preference: ModePreference;
+interface ThemeContextValue extends ThemeState {
     themeClass: string;
-    setSchema: (schema: SchemaName) => void;
-    setMode: (mode: ModePreference) => void;
-    /** Alterna binario claro↔oscuro a partir del modo efectivo. */
-    toggleMode: () => void;
-    /** Rota por los cuatro modos en orden. */
-    cycleMode: () => void;
 }
 interface ThemeProviderProps {
     children: ReactNode;

package/dist/index.js

@@ -280,7 +280,16 @@ var tintaSchema = {
 var schemas = { tinta: tintaSchema };
 var schemaNames2 = Object.keys(schemas);
 var colorTokenNames = Object.keys(schemas.tinta.light.color);
+function isSchemaName(x) {
+  return typeof x === "string" && Object.hasOwn(schemas, x);
+}
 var modeNames2 = ["light", "dark", "sepia", "contrast"];
+function isMode(x) {
+  return typeof x === "string" && modeNames2.includes(x);
+}
+function isModePreference(x) {
+  return x === "system" || isMode(x);
+}
 var SYSTEM_MODE_PRECEDENCE = [
   { query: "(prefers-contrast: more)", mode: "contrast" },
   { query: "(prefers-color-scheme: dark)", mode: "dark" }
@@ -288,14 +297,36 @@ var SYSTEM_MODE_PRECEDENCE = [
 function resolveMode(preference, systemMode) {
   return preference === "system" ? systemMode : preference;
 }
+function sanitizePersisted(raw) {
+  if (!raw || typeof raw !== "object") return {};
+  const clean = {};
+  if (isSchemaName(raw.schema)) clean.schema = raw.schema;
+  if (isModePreference(raw.preference)) clean.preference = raw.preference;
+  return clean;
+}
 function useThemeStore(options, storage, system) {
   const { defaultSchema = "tinta", defaultMode = "light" } = options;
-  const [persisted] = useState2(() => storage.read());
+  const [persisted] = useState2(() => sanitizePersisted(storage.read()));
   const [schema, setSchema] = useState2(persisted?.schema ?? defaultSchema);
   const [preference, setPreference] = useState2(
     persisted?.preference ?? defaultMode
   );
   const [systemMode, setSystemMode] = useState2(() => system.get());
+  const [hydrated, setHydrated] = useState2(() => !storage.hydrate);
+  useEffect2(() => {
+    if (!storage.hydrate) return;
+    let active2 = true;
+    void storage.hydrate().then((raw) => {
+      if (!active2) return;
+      const clean = sanitizePersisted(raw);
+      if (clean.schema) setSchema(clean.schema);
+      if (clean.preference) setPreference(clean.preference);
+      setHydrated(true);
+    });
+    return () => {
+      active2 = false;
+    };
+  }, [storage]);
   useEffect2(() => {
     if (preference !== "system") return;
     const update = () => setSystemMode(system.get());
@@ -304,14 +335,17 @@ function useThemeStore(options, storage, system) {
   }, [preference, system]);
   const mode = resolveMode(preference, systemMode);
   useEffect2(() => {
+    if (!hydrated) return;
     storage.write({ schema, preference });
-  }, [schema, preference, storage]);
+  }, [schema, preference, storage, hydrated]);
   return useMemo3(
     () => ({
       schema,
       mode,
       preference,
-      colorTokens: schemas[schema][mode].color,
+      // Guard defensivo: un schema/modo inesperado (default inválido del caller) cae a
+      // tinta/light en vez de indexar `undefined` y crashear.
+      colorTokens: schemas[schema]?.[mode]?.color ?? schemas.tinta.light.color,
       setSchema,
       setMode: setPreference,
       toggleMode: () => setPreference(mode === "dark" ? "light" : "dark"),
@@ -1798,7 +1832,17 @@ function useStyles18({
 
 // src/components/select/index.tsx
 import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
-var Select = forwardRef20(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
+var Select = forwardRef20(function Select2({
+  options,
+  value,
+  onChange,
+  placeholder: placeholder2,
+  label: label7,
+  disabled: disabled3,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rest
+}, ref) {
   const [open, setOpen] = useState6(false);
   const [activeIndex, setActiveIndex] = useState6(0);
   const rootRef = useRef3(null);
@@ -1810,6 +1854,7 @@ var Select = forwardRef20(function Select2({ options, value, onChange, placehold
   const baseId = useId3();
   const labelId = `${baseId}-label`;
   const optionId = (index) => `${baseId}-option-${index}`;
+  const triggerLabelledBy = [label7 ? labelId : null, ariaLabelledBy].filter(Boolean).join(" ") || void 0;
   const {
     root: root24,
     label: labelClass,
@@ -1889,7 +1934,8 @@ var Select = forwardRef20(function Select2({ options, value, onChange, placehold
         disabled: disabled3,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
-        "aria-labelledby": label7 ? labelId : void 0,
+        "aria-label": ariaLabel,
+        "aria-labelledby": triggerLabelledBy,
         "aria-activedescendant": open ? optionId(activeIndex) : void 0,
         onClick: () => {
           if (disabled3) return;