@octavius2929-personal/design-system 0.22.1 → 0.23.1

package/dist/index.cjs

@@ -458,7 +458,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" }
@@ -466,14 +475,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] = (0, import_react6.useState)(() => storage.read());
+  const [persisted] = (0, import_react6.useState)(() => sanitizePersisted(storage.read()));
   const [schema, setSchema] = (0, import_react6.useState)(persisted?.schema ?? defaultSchema);
   const [preference, setPreference] = (0, import_react6.useState)(
     persisted?.preference ?? defaultMode
   );
   const [systemMode, setSystemMode] = (0, import_react6.useState)(() => system.get());
+  const [hydrated, setHydrated] = (0, import_react6.useState)(() => !storage.hydrate);
+  (0, import_react6.useEffect)(() => {
+    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]);
   (0, import_react6.useEffect)(() => {
     if (preference !== "system") return;
     const update = () => setSystemMode(system.get());
@@ -482,14 +513,17 @@ function useThemeStore(options, storage, system) {
   }, [preference, system]);
   const mode = resolveMode(preference, systemMode);
   (0, import_react6.useEffect)(() => {
+    if (!hydrated) return;
     storage.write({ schema, preference });
-  }, [schema, preference, storage]);
+  }, [schema, preference, storage, hydrated]);
   return (0, import_react6.useMemo)(
     () => ({
       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"),
@@ -1969,7 +2003,17 @@ function useStyles18({
 
 // src/components/select/index.tsx
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Select = (0, import_react43.forwardRef)(function Select2({ options, value, onChange, placeholder: placeholder2, label: label7, disabled: disabled3, ...rest }, ref) {
+var Select = (0, import_react43.forwardRef)(function Select2({
+  options,
+  value,
+  onChange,
+  placeholder: placeholder2,
+  label: label7,
+  disabled: disabled3,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...rest
+}, ref) {
   const [open, setOpen] = (0, import_react43.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react43.useState)(0);
   const rootRef = (0, import_react43.useRef)(null);
@@ -1981,6 +2025,7 @@ var Select = (0, import_react43.forwardRef)(function Select2({ options, value, o
   const baseId = (0, import_react43.useId)();
   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,
@@ -2060,7 +2105,8 @@ var Select = (0, import_react43.forwardRef)(function Select2({ options, value, o
         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;