@knkcs/anker 0.0.1 → 0.0.2

package/dist/{chunk-4D3EY2W2.js → chunk-YSFUGIQM.js}

@@ -25,6 +25,18 @@ var buttonTheme = defineRecipe({
       _disabled: {
         bg: "initial"
       }
+    },
+    // WCAG 2.5.8 touch target: expand hit area to 44×44px minimum
+    // without changing visual size. The pseudo is invisible and captures
+    // pointer events beyond the button's visual bounds.
+    _after: {
+      content: '""',
+      position: "absolute",
+      top: "50%",
+      insetInlineStart: "50%",
+      minWidth: "44px",
+      minHeight: "44px",
+      transform: "translate(-50%, -50%)"
     }
   },
   variants: {
@@ -150,15 +162,15 @@ var buttonTheme = defineRecipe({
           color: { base: "colorPalette.700", _dark: "colorPalette.300" }
         }
       },
-      // Link variant for gray colorScheme
+      // Link variant for gray colorPalette
       "link-gray": {
-        color: "fg.muted",
+        color: "muted",
         _hover: {
           textDecoration: "none",
-          color: "fg.default"
+          color: "default"
         },
         _active: {
-          color: "fg.default"
+          color: "default"
         }
       }
     }
@@ -318,21 +330,21 @@ var form_label_default = defineRecipe({
         _peerPlaceholderShown: {
           fontSize: "sm",
           top: "1.5",
-          left: "4"
+          insetInlineStart: "4"
         }
       },
       md: {
         _peerPlaceholderShown: {
           fontSize: "md",
           top: "2",
-          left: "4"
+          insetInlineStart: "4"
         }
       },
       lg: {
         _peerPlaceholderShown: {
           fontSize: "lg",
           top: "2.5",
-          left: "4"
+          insetInlineStart: "4"
         }
       }
     },
@@ -346,7 +358,7 @@ var form_label_default = defineRecipe({
         transition: "all 0.12s ease-in",
         pointerEvents: "none",
         top: "-27px",
-        left: "0",
+        insetInlineStart: "0",
         _peerPlaceholderShown: {
           fontWeight: "normal",
           color: "subtle"
@@ -355,7 +367,7 @@ var form_label_default = defineRecipe({
           fontSize: "sm",
           fontWeight: "medium",
           top: "-27px",
-          left: "0",
+          insetInlineStart: "0",
           color: "muted"
         }
       }
@@ -386,19 +398,19 @@ var inputSlotRecipe = defineSlotRecipe({
       },
       "outline-on-accent": {
         field: {
-          bg: "white",
+          bg: { base: "white", _dark: "gray.800" },
           borderRadius: "md",
-          color: "gray.900",
+          color: { base: "gray.900", _dark: "gray.100" },
           borderWidth: "1px",
-          borderColor: "primary.50",
+          borderColor: { base: "primary.50", _dark: "primary.800" },
           _placeholder: {
-            color: "gray.500"
+            color: { base: "gray.500", _dark: "gray.400" }
           },
           _hover: {
-            borderColor: "primary.100"
+            borderColor: { base: "primary.100", _dark: "primary.700" }
           },
           _focus: {
-            borderColor: "primary.200",
+            borderColor: { base: "primary.200", _dark: "primary.600" },
             boxShadow: "0px 0px 0px 1px var(--chakra-colors-primary-200)"
           }
         }
@@ -478,7 +490,7 @@ var menuTheme = defineSlotRecipe({
       px: "0.8rem",
       fontSize: "sm",
       fontWeight: "normal",
-      color: "black",
+      color: { base: "gray.800", _dark: "gray.100" },
       transitionProperty: "background",
       transitionDuration: "ultra-fast",
       transitionTimingFunction: "ease-in",
@@ -647,6 +659,287 @@ var propertyTheme = defineSlotRecipe({
     }
   }
 });
+var TRAILING_PSEUDO_REGEX = /(::?[\w-]+(?:\([^)]*\))?)+$/;
+var EXCLUDE_CLASSNAME = ".not-prose";
+function inWhere(selector) {
+  const rebuiltSelector = selector.startsWith("& ") ? selector.slice(2) : selector;
+  const match = selector.match(TRAILING_PSEUDO_REGEX);
+  const pseudo = match ? match[0] : "";
+  const base = match ? selector.slice(0, -match[0].length) : rebuiltSelector;
+  return `& :where(${base}):not(${EXCLUDE_CLASSNAME}, ${EXCLUDE_CLASSNAME} *)${pseudo}`;
+}
+var proseTheme = defineRecipe({
+  className: "prose",
+  base: {
+    color: "fg.muted",
+    maxWidth: "65ch",
+    fontSize: "sm",
+    lineHeight: "1.7em",
+    [inWhere("& p")]: {
+      marginTop: "1em",
+      marginBottom: "1em"
+    },
+    [inWhere("& blockquote")]: {
+      marginTop: "1.285em",
+      marginBottom: "1.285em",
+      paddingInline: "1.285em",
+      borderInlineStartWidth: "0.25em",
+      color: "fg"
+    },
+    [inWhere("& a")]: {
+      color: "fg",
+      textDecoration: "underline",
+      textUnderlineOffset: "3px",
+      textDecorationThickness: "2px",
+      textDecorationColor: "border.muted",
+      fontWeight: "500"
+    },
+    [inWhere("& strong")]: {
+      fontWeight: "600"
+    },
+    [inWhere("& a strong")]: {
+      color: "inherit"
+    },
+    [inWhere("& em")]: {
+      fontStyle: "italic"
+    },
+    [inWhere("& h1")]: {
+      fontSize: "2.15em",
+      letterSpacing: "-0.02em",
+      marginTop: "0",
+      marginBottom: "0.8em",
+      lineHeight: "1.2em"
+    },
+    [inWhere("& h2")]: {
+      fontSize: "1.65em",
+      letterSpacing: "-0.02em",
+      marginTop: "1.6em",
+      marginBottom: "0.8em",
+      lineHeight: "1.3em"
+    },
+    [inWhere("& h3")]: {
+      fontSize: "1.35em",
+      letterSpacing: "-0.01em",
+      marginTop: "1.5em",
+      marginBottom: "0.4em",
+      lineHeight: "1.4em"
+    },
+    [inWhere("& h4")]: {
+      marginTop: "1.4em",
+      marginBottom: "0.5em",
+      letterSpacing: "-0.01em",
+      lineHeight: "1.5em"
+    },
+    [inWhere("& img")]: {
+      marginTop: "1.7em",
+      marginBottom: "1.7em",
+      borderRadius: "lg",
+      boxShadow: "inset"
+    },
+    [inWhere("& picture")]: {
+      marginTop: "1.7em",
+      marginBottom: "1.7em"
+    },
+    [inWhere("& picture > img")]: {
+      marginTop: "0",
+      marginBottom: "0"
+    },
+    [inWhere("& video")]: {
+      marginTop: "1.7em",
+      marginBottom: "1.7em"
+    },
+    [inWhere("& kbd")]: {
+      fontSize: "0.85em",
+      borderRadius: "xs",
+      paddingTop: "0.15em",
+      paddingBottom: "0.15em",
+      paddingInlineEnd: "0.35em",
+      paddingInlineStart: "0.35em",
+      fontFamily: "inherit",
+      color: "fg.muted",
+      "--shadow": "colors.border",
+      boxShadow: "0 0 0 1px var(--shadow), 0 1px 0 1px var(--shadow)"
+    },
+    [inWhere("& code")]: {
+      fontSize: "0.925em",
+      bg: "bg.muted",
+      letterSpacing: "-0.01em",
+      lineHeight: "1",
+      borderRadius: "md",
+      borderWidth: "1px",
+      paddingInline: "0.25em"
+    },
+    [inWhere("& pre code")]: {
+      fontSize: "inherit",
+      letterSpacing: "inherit",
+      borderWidth: "inherit",
+      padding: "0",
+      bg: "transparent"
+    },
+    [inWhere("& h2 code")]: {
+      fontSize: "0.9em"
+    },
+    [inWhere("& h3 code")]: {
+      fontSize: "0.8em"
+    },
+    [inWhere("& pre")]: {
+      backgroundColor: "bg.muted",
+      marginTop: "1.6em",
+      marginBottom: "1.6em",
+      borderRadius: "md",
+      fontSize: "0.9em",
+      paddingTop: "0.65em",
+      paddingBottom: "0.65em",
+      paddingInlineEnd: "1em",
+      paddingInlineStart: "1em",
+      overflowX: "auto",
+      fontWeight: "400"
+    },
+    [inWhere("& ol")]: {
+      marginTop: "1em",
+      marginBottom: "1em",
+      paddingInlineStart: "1.5em"
+    },
+    [inWhere("& ul")]: {
+      marginTop: "1em",
+      marginBottom: "1em",
+      paddingInlineStart: "1.5em"
+    },
+    [inWhere("& li")]: {
+      marginTop: "0.285em",
+      marginBottom: "0.285em"
+    },
+    [inWhere("& ol > li")]: {
+      paddingInlineStart: "0.4em",
+      listStyleType: "decimal",
+      "&::marker": {
+        color: "fg.muted"
+      }
+    },
+    [inWhere("& ul > li")]: {
+      paddingInlineStart: "0.4em",
+      listStyleType: "disc",
+      "&::marker": {
+        color: "fg.muted"
+      }
+    },
+    [inWhere("& > ul > li p")]: {
+      marginTop: "0.5em",
+      marginBottom: "0.5em"
+    },
+    [inWhere("& > ol > li p")]: {
+      marginTop: "0.5em",
+      marginBottom: "0.5em"
+    },
+    [inWhere("& > ul > li > p:first-of-type")]: {
+      marginTop: "0em"
+    },
+    [inWhere("& > ul > li > p:last-of-type")]: {
+      marginBottom: "0em"
+    },
+    [inWhere("& > ol > li > p:first-of-type")]: {
+      marginTop: "0em"
+    },
+    [inWhere("& > ol > li > p:last-of-type")]: {
+      marginBottom: "0em"
+    },
+    [inWhere("& ul ul, ul ol, ol ul, ol ol")]: {
+      marginTop: "0.5em",
+      marginBottom: "0.5em"
+    },
+    [inWhere("& dl")]: {
+      marginTop: "1em",
+      marginBottom: "1em"
+    },
+    [inWhere("& dt")]: {
+      fontWeight: "600",
+      marginTop: "1em"
+    },
+    [inWhere("& dd")]: {
+      marginTop: "0.285em",
+      paddingInlineStart: "1.5em"
+    },
+    [inWhere("& hr")]: {
+      marginTop: "2.25em",
+      marginBottom: "2.25em"
+    },
+    [inWhere("& :is(h1,h2,h3,h4,h5,hr) + *")]: {
+      marginTop: "0"
+    },
+    [inWhere("& table")]: {
+      width: "100%",
+      tableLayout: "auto",
+      textAlign: "start",
+      lineHeight: "1.5em",
+      marginTop: "2em",
+      marginBottom: "2em"
+    },
+    [inWhere("& thead")]: {
+      borderBottomWidth: "1px",
+      color: "fg"
+    },
+    [inWhere("& tbody tr")]: {
+      borderBottomWidth: "1px",
+      borderBottomColor: "border"
+    },
+    [inWhere("& thead th")]: {
+      paddingInlineEnd: "1em",
+      paddingBottom: "0.65em",
+      paddingInlineStart: "1em",
+      fontWeight: "medium",
+      textAlign: "start"
+    },
+    [inWhere("& thead th:first-of-type")]: {
+      paddingInlineStart: "0"
+    },
+    [inWhere("& thead th:last-of-type")]: {
+      paddingInlineEnd: "0"
+    },
+    [inWhere("& tbody td, tfoot td")]: {
+      paddingTop: "0.65em",
+      paddingInlineEnd: "1em",
+      paddingBottom: "0.65em",
+      paddingInlineStart: "1em"
+    },
+    [inWhere("& tbody td:first-of-type, tfoot td:first-of-type")]: {
+      paddingInlineStart: "0"
+    },
+    [inWhere("& tbody td:last-of-type, tfoot td:last-of-type")]: {
+      paddingInlineEnd: "0"
+    },
+    [inWhere("& figure")]: {
+      marginTop: "1.625em",
+      marginBottom: "1.625em"
+    },
+    [inWhere("& figure > *")]: {
+      marginTop: "0",
+      marginBottom: "0"
+    },
+    [inWhere("& figcaption")]: {
+      fontSize: "0.85em",
+      lineHeight: "1.25em",
+      marginTop: "0.85em",
+      color: "fg.muted"
+    },
+    [inWhere("& h1, h2, h3, h4, h5, h6")]: {
+      color: "fg",
+      fontWeight: "600"
+    }
+  },
+  variants: {
+    size: {
+      md: {
+        fontSize: "sm"
+      },
+      lg: {
+        fontSize: "md"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
 var radioCardTheme = defineRecipe({
   base: {
     borderWidth: "1px",
@@ -891,7 +1184,7 @@ var tableTheme = defineSlotRecipe({
           borderColor: "border"
         },
         row: {
-          bg: "bg"
+          bg: "bg-surface"
         }
       },
       striped: {
@@ -1184,19 +1477,19 @@ var tree_item_default = defineSlotRecipe({
     },
     treeItemContent: {},
     treeItemLabel: {
-      color: "gray.700"
+      color: { base: "gray.700", _dark: "gray.300" }
     },
     treeItemActions: {
-      textAlign: "right",
-      marginLeft: "4px"
+      textAlign: "end",
+      marginInlineStart: "4px"
     },
     treeItemChildren: {
       position: "relative",
-      paddingLeft: 12,
+      paddingInlineStart: 12,
       _before: {
         content: '""',
         position: "absolute",
-        left: "16px",
+        insetInlineStart: "16px",
         height: "100%",
         width: "1px",
         bg: { base: "gray.200", _dark: "gray.600" }
@@ -1311,7 +1604,7 @@ var semanticTokens = {
       value: { base: "gray.500", _dark: "gray.400" }
     },
     border: {
-      value: { base: "{colors.gray.200}", _dark: "{colors.gray.700}" }
+      value: { base: "gray.200", _dark: "gray.700" }
     },
     accent: {
       value: { base: "primary.500", _dark: "primary.200" }
@@ -1369,13 +1662,67 @@ var semanticTokens = {
         }
       }
     },
-    // Static accent surface tokens
-    "bg-accent": { value: "primary.600" },
-    "bg-accent-subtle": { value: "primary.500" },
-    "bg-accent-muted": { value: "primary.400" },
-    "on-accent": { value: "white" },
-    "on-accent-muted": { value: "primary.50" },
-    "on-accent-subtle": { value: "primary.100" }
+    // Secondary color palette tokens (for colorPalette="secondary")
+    secondary: {
+      contrast: { value: { base: "white", _dark: "white" } },
+      fg: {
+        value: {
+          base: "{colors.secondary.700}",
+          _dark: "{colors.secondary.300}"
+        }
+      },
+      subtle: {
+        value: {
+          base: "{colors.secondary.100}",
+          _dark: "{colors.secondary.900}"
+        }
+      },
+      muted: {
+        value: {
+          base: "{colors.secondary.200}",
+          _dark: "{colors.secondary.800}"
+        }
+      },
+      emphasized: {
+        value: {
+          base: "{colors.secondary.300}",
+          _dark: "{colors.secondary.700}"
+        }
+      },
+      solid: {
+        value: {
+          base: "{colors.secondary.500}",
+          _dark: "{colors.secondary.500}"
+        }
+      },
+      focusRing: {
+        value: {
+          base: "{colors.secondary.500}",
+          _dark: "{colors.secondary.500}"
+        }
+      },
+      border: {
+        value: {
+          base: "{colors.secondary.500}",
+          _dark: "{colors.secondary.400}"
+        }
+      }
+    },
+    // Accent surface tokens
+    "bg-accent": { value: { base: "primary.600", _dark: "primary.400" } },
+    "bg-accent-subtle": {
+      value: { base: "primary.500", _dark: "primary.500" }
+    },
+    "bg-accent-muted": {
+      value: { base: "primary.400", _dark: "primary.600" }
+    },
+    "on-accent": { value: { base: "white", _dark: "white" } },
+    "on-accent-muted": {
+      value: { base: "primary.50", _dark: "primary.100" }
+    },
+    "on-accent-subtle": {
+      value: { base: "primary.100", _dark: "primary.200" }
+    }
   },
   shadows: {
     xs: {
@@ -1521,6 +1868,12 @@ function get(obj, path, fallback) {
   for (const key of keys) {
     if (current == null || typeof current !== "object") return String(fallback);
     current = current[key];
+    if (current != null && typeof current === "object" && "value" in current) {
+      const val = current.value;
+      if (typeof val === "string") {
+        current = val;
+      }
+    }
   }
   return current != null ? String(current) : String(fallback);
 }
@@ -1581,17 +1934,18 @@ var system = createSystem(defaultConfig, {
     recipes: {
       button: buttonTheme,
       container: container_default,
+      prose: proseTheme,
       separator: separator_default,
       formLabel: form_label_default,
       textarea: textarea_default,
       tooltip: tooltipTheme,
       tsRadioCard: radioCardTheme,
-      tsProperty: propertyTheme,
-      treeItem: tree_item_default,
       tag: tagTheme
     },
     slotRecipes: {
       card: card_default,
+      tsProperty: propertyTheme,
+      treeItem: tree_item_default,
       checkbox: checkbox_default,
       comment: comment_default,
       dialog,
@@ -1624,5 +1978,5 @@ var system = createSystem(defaultConfig, {
 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-4D3EY2W2.js.map
-//# sourceMappingURL=chunk-4D3EY2W2.js.map
+//# sourceMappingURL=chunk-YSFUGIQM.js.map
+//# sourceMappingURL=chunk-YSFUGIQM.js.map