@knkcs/anker 0.0.4 → 0.0.6

package/dist/{chunk-YSFUGIQM.js → chunk-7WPKYUHP.js}

@@ -1,7 +1,7 @@
 import { defineRecipe, defineSlotRecipe, createSystem, defaultConfig } from '@chakra-ui/react';
 import { toHex, transparentize as transparentize$1 } from 'color2k';
 
-// src/theme/index.ts
+// src/theme/create-theme.ts
 var buttonTheme = defineRecipe({
   base: {
     lineHeight: "1.2",
@@ -10,16 +10,19 @@ var buttonTheme = defineRecipe({
     transitionProperty: "common",
     transitionDuration: "normal",
     _focusVisible: {
-      boxShadow: "none",
-      outlineOffset: "2px",
-      outlineWidth: "2px",
-      outlineStyle: "solid",
-      outlineColor: "primary.600"
+      boxShadow: "focus-ring",
+      outline: "none"
+    },
+    _active: {
+      transform: "scale(0.98)"
     },
     _disabled: {
       opacity: 0.4,
       cursor: "not-allowed",
-      boxShadow: "none"
+      boxShadow: "none",
+      _active: {
+        transform: "none"
+      }
     },
     _hover: {
       _disabled: {
@@ -97,7 +100,9 @@ var buttonTheme = defineRecipe({
           }
         }
       },
-      // Primary: solid style locked to the primary color palette
+      // @deprecated Use variant="solid" instead — solid now defaults to
+      // colorPalette="primary". This variant will be removed in a future
+      // major release.
       primary: {
         bg: "primary.500",
         color: "white",
@@ -177,21 +182,28 @@ var buttonTheme = defineRecipe({
   },
   defaultVariants: {
     size: "lg",
-    variant: "solid"
+    variant: "solid",
+    colorPalette: "primary"
   }
 });
 var cardSlotRecipe = defineSlotRecipe({
   slots: ["root", "header", "body", "footer", "title", "description"],
   base: {
     root: {
-      bg: { base: "white", _dark: "gray.800" }
+      bg: { base: "white", _dark: "gray.800" },
+      transitionProperty: "box-shadow, transform",
+      transitionDuration: "normal"
     }
   },
   variants: {
     variant: {
       elevated: {
         root: {
-          boxShadow: "md"
+          boxShadow: "md",
+          _hover: {
+            boxShadow: "lg",
+            transform: "translateY(-1px)"
+          }
         }
       },
       flat: {
@@ -537,7 +549,7 @@ var menuTheme = defineSlotRecipe({
   }
 });
 var modalSlotRecipe = defineSlotRecipe({
-  slots: ["header", "closeButton", "dialog"],
+  slots: ["header", "closeButton", "dialog", "backdrop"],
   base: {
     header: {
       px: "6",
@@ -546,7 +558,10 @@ var modalSlotRecipe = defineSlotRecipe({
       fontWeight: "semibold",
       roundedTop: "md"
     },
-    closeButton: {}
+    closeButton: {},
+    backdrop: {
+      backdropFilter: "blur(4px)"
+    }
   },
   variants: {
     size: {
@@ -1384,7 +1399,8 @@ var tagTheme = defineRecipe({
     }
   },
   defaultVariants: {
-    size: "lg"
+    size: "lg",
+    colorPalette: "primary"
   }
 });
 var textarea_default = defineRecipe({
@@ -1420,7 +1436,8 @@ var tooltipTheme = defineRecipe({
     fontSize: "sm",
     boxShadow: "md",
     maxW: "xs",
-    zIndex: "tooltip"
+    zIndex: "tooltip",
+    animation: "slideUp 150ms ease-out"
   }
 });
 var tree_item_default = defineSlotRecipe({
@@ -1502,12 +1519,38 @@ var tree_item_default = defineSlotRecipe({
 var durations = {
   fast: { value: "150ms" },
   normal: { value: "200ms" },
-  slow: { value: "300ms" }
+  slow: { value: "300ms" },
+  slower: { value: "400ms" },
+  entrance: { value: "250ms" },
+  exit: { value: "200ms" }
 };
 var easings = {
   "ease-in": { value: "cubic-bezier(0.4, 0, 1, 1)" },
   "ease-out": { value: "cubic-bezier(0, 0, 0.2, 1)" },
-  "ease-in-out": { value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+  "ease-in-out": { value: "cubic-bezier(0.4, 0, 0.2, 1)" },
+  spring: { value: "cubic-bezier(0.175, 0.885, 0.32, 1.275)" }
+};
+var keyframes = {
+  fadeIn: {
+    from: { opacity: 0 },
+    to: { opacity: 1 }
+  },
+  fadeOut: {
+    from: { opacity: 1 },
+    to: { opacity: 0 }
+  },
+  slideUp: {
+    from: { opacity: 0, transform: "translateY(4px)" },
+    to: { opacity: 1, transform: "translateY(0)" }
+  },
+  slideDown: {
+    from: { opacity: 0, transform: "translateY(-4px)" },
+    to: { opacity: 1, transform: "translateY(0)" }
+  },
+  scaleIn: {
+    from: { opacity: 0, transform: "scale(0.95)" },
+    to: { opacity: 1, transform: "scale(1)" }
+  }
 };
 
 // src/theme/tokens/colors.ts
@@ -1754,6 +1797,18 @@ var semanticTokens = {
         base: "0px 0px 1px rgba(45, 55, 72, 0.05), 0px 16px 24px rgba(45, 55, 72, 0.1)",
         _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 16px 24px rgba(13, 14, 20, 0.9)"
       }
+    },
+    "2xl": {
+      value: {
+        base: "0px 0px 1px rgba(45, 55, 72, 0.04), 0px 24px 48px rgba(45, 55, 72, 0.12)",
+        _dark: "0px 0px 1px rgba(13, 14, 20, 1), 0px 24px 48px rgba(13, 14, 20, 0.9)"
+      }
+    },
+    "focus-ring": {
+      value: {
+        base: "0 0 0 3px rgba(32, 135, 215, 0.4)",
+        _dark: "0 0 0 3px rgba(32, 135, 215, 0.6)"
+      }
     }
   },
   opacity: {
@@ -1836,6 +1891,26 @@ var textStyles = {
     fontSize: "xs",
     lineHeight: "1.125rem"
     // 18px
+  },
+  // Additional semantic presets
+  display: {
+    fontSize: "6xl",
+    lineHeight: "4.5rem",
+    letterSpacing: "-0.03em",
+    fontWeight: "bold"
+  },
+  caption: {
+    fontSize: "xs",
+    lineHeight: "1rem",
+    letterSpacing: "0.01em",
+    color: "muted"
+  },
+  overline: {
+    fontSize: "xs",
+    lineHeight: "1rem",
+    letterSpacing: "0.08em",
+    fontWeight: "semibold",
+    textTransform: "uppercase"
   }
 };
 
@@ -1849,6 +1924,142 @@ var zIndex = {
   toast: { value: 1700 }
 };
 var z_index_default = zIndex;
+
+// src/theme/create-theme.ts
+function createAnkerTheme(preset) {
+  const fonts2 = {
+    heading: preset?.fonts?.heading ?? fonts.heading,
+    body: preset?.fonts?.body ?? fonts.body
+  };
+  const colors2 = preset?.colors ? { ...colors_default, ...preset.colors } : colors_default;
+  const durations2 = preset?.durations ? { ...durations, ...preset.durations } : durations;
+  const easings2 = preset?.easings ? { ...easings, ...preset.easings } : easings;
+  const radii2 = preset?.radii ?? radii_default;
+  const textStyles2 = preset?.textStyles ? { ...textStyles, ...preset.textStyles } : textStyles;
+  const semanticTokens2 = preset?.semanticTokens ? deepMerge(
+    semantic_default,
+    preset.semanticTokens
+  ) : semantic_default;
+  return createSystem(defaultConfig, {
+    globalCss: {
+      "@keyframes fadeIn": keyframes.fadeIn,
+      "@keyframes fadeOut": keyframes.fadeOut,
+      "@keyframes slideUp": keyframes.slideUp,
+      "@keyframes slideDown": keyframes.slideDown,
+      "@keyframes scaleIn": keyframes.scaleIn,
+      body: {
+        color: "default",
+        bg: { base: "white", _dark: "#000" }
+      },
+      "*::placeholder": {
+        opacity: 1,
+        color: "muted"
+      },
+      "*, *::before, *::after": {
+        borderColor: "border"
+      },
+      "table, td, th": {
+        borderColor: "border"
+      },
+      "html, body": {
+        height: "100%"
+      },
+      "#__next, #root, #app": {
+        display: "flex",
+        flexDirection: "column",
+        minH: "100%"
+      },
+      "*": {
+        _motionReduce: {
+          animationDuration: "0.01ms !important",
+          animationIterationCount: "1 !important",
+          transitionDuration: "0.01ms !important",
+          scrollBehavior: "auto !important"
+        }
+      }
+    },
+    theme: {
+      tokens: {
+        colors: colors2,
+        durations: durations2,
+        easings: easings2,
+        fonts: {
+          heading: { value: fonts2.heading },
+          body: { value: fonts2.body }
+        },
+        spacing: Object.fromEntries(
+          Object.entries(spacing_default).map(([k, v]) => [k, { value: v }])
+        ),
+        radii: Object.fromEntries(
+          Object.entries(radii2).map(([k, v]) => [k, { value: v }])
+        ),
+        zIndex: z_index_default
+      },
+      textStyles: textStyles2,
+      semanticTokens: semanticTokens2,
+      recipes: {
+        button: buttonTheme,
+        container: container_default,
+        prose: proseTheme,
+        separator: separator_default,
+        formLabel: form_label_default,
+        textarea: textarea_default,
+        tooltip: tooltipTheme,
+        tsRadioCard: radioCardTheme,
+        tag: tagTheme
+      },
+      slotRecipes: {
+        card: card_default,
+        tsProperty: propertyTheme,
+        treeItem: tree_item_default,
+        checkbox: checkbox_default,
+        comment: comment_default,
+        dialog,
+        drawer: drawerTheme,
+        // Field.Root override: v3 defaults to alignItems: flex-start which
+        // shrinks children. Restore v2 behavior where children stretch.
+        field: defineSlotRecipe({
+          slots: ["root"],
+          variants: {
+            orientation: {
+              vertical: {
+                root: {
+                  alignItems: "stretch"
+                }
+              }
+            }
+          }
+        }),
+        input: input_default,
+        menu: menuTheme,
+        modal: modalSlotRecipe,
+        persona: persona_default,
+        popover: popover_default,
+        stepper: stepperTheme,
+        table: tableTheme,
+        tabs: tabTheme
+      }
+    }
+  });
+}
+function deepMerge(base, override) {
+  const result = { ...base };
+  for (const key of Object.keys(override)) {
+    const baseVal = base[key];
+    const overrideVal = override[key];
+    if (baseVal && overrideVal && typeof baseVal === "object" && typeof overrideVal === "object" && !Array.isArray(baseVal)) {
+      result[key] = { ...baseVal, ...overrideVal };
+    } else if (overrideVal !== void 0) {
+      result[key] = overrideVal;
+    }
+  }
+  return result;
+}
+
+// src/theme/presets/default.ts
+var defaultPreset = {
+  name: "default"
+};
 var getColor = (theme, color, fallback) => {
   const hex = get(theme, `colors.${color}`, color);
   try {
@@ -1879,104 +2090,9 @@ function get(obj, path, fallback) {
 }
 
 // src/theme/index.ts
-var system = createSystem(defaultConfig, {
-  globalCss: {
-    body: {
-      color: "default",
-      bg: { base: "white", _dark: "#000" }
-    },
-    "*::placeholder": {
-      opacity: 1,
-      color: "muted"
-    },
-    "*, *::before, *::after": {
-      borderColor: "border"
-    },
-    "table, td, th": {
-      borderColor: "border"
-    },
-    "html, body": {
-      height: "100%"
-    },
-    "#__next, #root, #app": {
-      display: "flex",
-      flexDirection: "column",
-      minH: "100%"
-    },
-    "*": {
-      _motionReduce: {
-        animationDuration: "0.01ms !important",
-        animationIterationCount: "1 !important",
-        transitionDuration: "0.01ms !important",
-        scrollBehavior: "auto !important"
-      }
-    }
-  },
-  theme: {
-    tokens: {
-      colors: colors_default,
-      durations,
-      easings,
-      fonts: {
-        heading: { value: fonts.heading },
-        body: { value: fonts.body }
-      },
-      spacing: Object.fromEntries(
-        Object.entries(spacing_default).map(([k, v]) => [k, { value: v }])
-      ),
-      radii: Object.fromEntries(
-        Object.entries(radii_default).map(([k, v]) => [k, { value: v }])
-      ),
-      zIndex: z_index_default
-    },
-    textStyles,
-    semanticTokens: semantic_default,
-    recipes: {
-      button: buttonTheme,
-      container: container_default,
-      prose: proseTheme,
-      separator: separator_default,
-      formLabel: form_label_default,
-      textarea: textarea_default,
-      tooltip: tooltipTheme,
-      tsRadioCard: radioCardTheme,
-      tag: tagTheme
-    },
-    slotRecipes: {
-      card: card_default,
-      tsProperty: propertyTheme,
-      treeItem: tree_item_default,
-      checkbox: checkbox_default,
-      comment: comment_default,
-      dialog,
-      drawer: drawerTheme,
-      // Field.Root override: v3 defaults to alignItems: flex-start which
-      // shrinks children. Restore v2 behavior where children stretch.
-      field: defineSlotRecipe({
-        slots: ["root"],
-        variants: {
-          orientation: {
-            vertical: {
-              root: {
-                alignItems: "stretch"
-              }
-            }
-          }
-        }
-      }),
-      input: input_default,
-      menu: menuTheme,
-      modal: modalSlotRecipe,
-      persona: persona_default,
-      popover: popover_default,
-      stepper: stepperTheme,
-      table: tableTheme,
-      tabs: tabTheme
-    }
-  }
-});
+var system = createAnkerTheme();
 var theme_default = system;
 
-export { colors_default, durations, easings, fonts, getColor, radii_default, semantic_default, spacing_default, textStyles, theme_default, transparentize, z_index_default };
-//# sourceMappingURL=chunk-YSFUGIQM.js.map
-//# sourceMappingURL=chunk-YSFUGIQM.js.map
+export { colors_default, createAnkerTheme, defaultPreset, durations, easings, fonts, getColor, keyframes, radii_default, semantic_default, spacing_default, textStyles, theme_default, transparentize, z_index_default };
+//# sourceMappingURL=chunk-7WPKYUHP.js.map
+//# sourceMappingURL=chunk-7WPKYUHP.js.map