@telegraph/style-engine 0.2.2 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @telegraph/style-engine
 
+## 0.3.1
+
+### Patch Changes
+
+- Updated dependencies [[`d3b6fee`](https://github.com/knocklabs/telegraph/commit/d3b6fee0e7cd308151efdc5921164d324ccaf045)]:
+  - @telegraph/tokens@0.2.0
+
+## 0.3.0
+
+### Minor Changes
+
+- [#714](https://github.com/knocklabs/telegraph/pull/714) [`627e61c`](https://github.com/knocklabs/telegraph/commit/627e61c3b17ccfc36f5fb835bb5f21a092efca95) Thanks [@kylemcd](https://github.com/kylemcd)! - feat: hover, focus, etc states as component props
+
 ## 0.2.2
 
 ### Patch Changes

package/README.md

@@ -48,7 +48,7 @@ import { getStyleProp, useStyleEngine } from "@telegraph/style-engine";
 const cssVars = {
   p: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "all",
   },
   bg: {
@@ -79,6 +79,7 @@ The Style Engine is the foundational CSS-in-JS system that enables Telegraph's d
 
 - **Prop-to-CSS Mapping**: Converts React props to CSS custom properties
 - **Type Safety**: Full TypeScript support for style props
+- **Pseudo-Class Support**: Object-based pseudo-class styling (hover, focus, active, etc.)
 - **Design Token Integration**: Seamless integration with Telegraph tokens
 - **Build-time Optimization**: PostCSS plugin for automatic CSS bundling
 - **Responsive Support**: Built-in responsive breakpoint system
@@ -99,9 +100,9 @@ Core function that processes style props and returns CSS variables.
 
 ```tsx
 {
-  styleProp: Record<string, string>; // CSS custom properties
-  otherProps: Record<string, unknown>; // Non-style props
-  interactive: boolean; // Whether component has interactive styles
+  styleProp: Record<string, string>; // CSS custom properties (including pseudo-class vars)
+  otherProps: Record<string, unknown>; // Non-style props (including unmatched pseudo sub-props)
+  interactive: boolean; // Whether pseudo-class props were resolved (for scoping CSS rules)
 }
 ```
 
@@ -135,7 +136,6 @@ type CssVarProp = {
   cssVar: string; // CSS custom property name
   value: string; // Value template (use VARIABLE for prop value)
   direction?: Direction; // For directional properties
-  interactive?: boolean; // Mark as interactive style
 };
 
 type Direction =
@@ -152,18 +152,57 @@ type Direction =
   | "side-right"; // Corner sides
 ```
 
+### Pseudo-Class Support
+
+Any style prop can be used inside pseudo-class objects. The style engine automatically handles `_hover`, `_focus`, `_active`, `_focusWithin`, and `_disabled` props:
+
+```tsx
+// Pseudo-class props accept objects containing any style props
+// Prefixed with _ to avoid collisions with native HTML attributes (e.g. disabled)
+<StyledBox
+  bg="gray-2"
+  _hover={{ bg: "gray-3", shadow: "1" }}
+  _focus={{ borderColor: "blue-8" }}
+  _active={{ bg: "gray-4" }}
+  _focusWithin={{ borderColor: "accent-6" }}
+  _disabled={{ bg: "gray-1" }}
+/>
+```
+
+**How it works:**
+
+1. When `getStyleProp` encounters a pseudo-class object (e.g., `_hover={{ bg: "gray-3" }}`), it resolves each sub-prop against the `cssVars` config
+2. Matched sub-props generate CSS variables prefixed with the pseudo state (e.g., `--hover--background-color: var(--tgph-gray-3)`)
+3. Unmatched sub-props are collected in `otherProps` for pass-through to child components
+4. If any pseudo-class props are resolved, `interactive` returns `true` — the component should add an `--interactive` modifier class to scope the CSS pseudo-class rules and prevent them from cascading into nested child elements
+
+**Type helper:**
+
+```tsx
+import { type WithPseudo } from "@telegraph/style-engine";
+
+// Wraps a style props type to include pseudo-class object variants
+type MyComponentProps = WithPseudo<{
+  bg?: ColorToken;
+  p?: SpacingToken;
+  // ... other style props
+}>;
+// Result includes: _hover?: { bg?: ColorToken; p?: SpacingToken; ... }, _focus?: { ... }, etc.
+```
+
 ## PostCSS Plugin
 
 The PostCSS plugin automatically includes CSS from Telegraph packages.
 
 ### At-Rules
 
-| Rule                      | Description                       |
-| ------------------------- | --------------------------------- |
-| `@telegraph tokens`       | Include default design tokens CSS |
-| `@telegraph tokens-light` | Include light theme tokens        |
-| `@telegraph tokens-dark`  | Include dark theme tokens         |
-| `@telegraph components`   | Include all component stylesheets |
+| Rule                                 | Description                                                       |
+| ------------------------------------ | ----------------------------------------------------------------- |
+| `@telegraph tokens`                  | Include default design tokens CSS                                 |
+| `@telegraph tokens-light`            | Include light theme tokens                                        |
+| `@telegraph tokens-dark`             | Include dark theme tokens                                         |
+| `@telegraph components`              | Include all component stylesheets                                 |
+| `@telegraph interactive(<selector>)` | Auto-generate pseudo-class CSS rules for a component (build-time) |
 
 ### Configuration
 
@@ -196,7 +235,7 @@ module.exports = {
 /* Your custom styles */
 .my-component {
   background: var(--tgph-gray-2);
-  padding: var(--tgph-space-3);
+  padding: var(--tgph-spacing-3);
   border-radius: var(--tgph-radius-2);
 }
 ```
@@ -206,56 +245,60 @@ module.exports = {
 ### Building Custom Components
 
 ```tsx
-import { type CssVarProp, useStyleEngine } from "@telegraph/style-engine";
+import {
+  type CssVarProp,
+  type WithPseudo,
+  useStyleEngine,
+} from "@telegraph/style-engine";
 
 // Define comprehensive CSS variable mappings
 const cssVars = {
   // Spacing
   p: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "all",
   },
   pt: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "top",
   },
   pr: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "right",
   },
   pb: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "bottom",
   },
   pl: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "left",
   },
   px: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "x",
   },
   py: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "y",
   },
 
   // Margin
   m: {
     cssVar: "--tgph-margin",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "all",
   },
   mt: {
     cssVar: "--tgph-margin",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "top",
   },
   // ... more margin variants
@@ -267,16 +310,9 @@ const cssVars = {
   // Layout
   w: { cssVar: "--tgph-width", value: "VARIABLE" },
   h: { cssVar: "--tgph-height", value: "VARIABLE" },
-
-  // Interactive states
-  hoverBg: {
-    cssVar: "--tgph-hover-background",
-    value: "var(--tgph-color-VARIABLE)",
-    interactive: true,
-  },
 } as const;
 
-type StyledBoxProps = {
+type StyleProps = {
   p?: string;
   pt?: string;
   pr?: string;
@@ -290,9 +326,12 @@ type StyledBoxProps = {
   color?: string;
   w?: string;
   h?: string;
-  hoverBg?: string;
   children?: React.ReactNode;
-} & React.HTMLAttributes<HTMLDivElement>;
+};
+
+// WithPseudo adds hover, focus, active, focusWithin, disabled object props
+type StyledBoxProps = WithPseudo<StyleProps> &
+  React.HTMLAttributes<HTMLDivElement>;
 
 export const StyledBox = ({ children, ...props }: StyledBoxProps) => {
   const { styleProp, otherProps, interactive } = useStyleEngine({
@@ -302,7 +341,7 @@ export const StyledBox = ({ children, ...props }: StyledBoxProps) => {
 
   return (
     <div
-      className={interactive ? "tgph-interactive" : undefined}
+      className={`tgph-styled-box${interactive ? " tgph-styled-box--interactive" : ""}`}
       style={styleProp}
       {...otherProps}
     >
@@ -312,51 +351,13 @@ export const StyledBox = ({ children, ...props }: StyledBoxProps) => {
 };
 ```
 
-### Responsive Styles
-
-```tsx
-import { RESPONSIVE_STYLE_PROPS } from "@telegraph/style-engine";
-
-// Define responsive CSS variables
-const responsiveCssVars = {
-  p: {
-    cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
-    direction: "all",
-  },
-} as const;
-
-// Responsive component
-export const ResponsiveBox = ({ children, ...props }) => {
-  const { styleProp, otherProps } = useStyleEngine({
-    props,
-    cssVars: responsiveCssVars,
-  });
-
-  return (
-    <div
-      style={{
-        ...styleProp,
-        // Add responsive overrides
-        [`@media ${RESPONSIVE_STYLE_PROPS.conditions.md["@media"]}`]: {
-          "--tgph-padding": "var(--tgph-space-6)",
-        },
-      }}
-      {...otherProps}
-    >
-      {children}
-    </div>
-  );
-};
-```
-
 ### Performance Optimization
 
 ```tsx
 // Memoize CSS variable definitions
 const cssVars = useMemo(
   () => ({
-    p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
+    p: { cssVar: "--tgph-padding", value: "var(--tgph-spacing-VARIABLE)" },
     bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
   }),
   [],
@@ -394,7 +395,7 @@ const customCssVars = {
 The Style Engine integrates deeply with Telegraph design tokens:
 
 - **Color System**: `var(--tgph-blue-9)`, `var(--tgph-gray-3)`, etc.
-- **Spacing Scale**: `var(--tgph-space-1)` through `var(--tgph-space-12)`
+- **Spacing Scale**: `var(--tgph-spacing-1)` through `var(--tgph-spacing-12)`
 - **Typography**: Font sizes, weights, and line heights
 - **Radius Scale**: Border radius values
 - **Shadows**: Box shadow definitions
@@ -405,8 +406,8 @@ The Style Engine integrates deeply with Telegraph design tokens:
 ```css
 .custom-component {
   /* Spacing tokens */
-  padding: var(--tgph-space-4);
-  margin: var(--tgph-space-2) var(--tgph-space-3);
+  padding: var(--tgph-spacing-4);
+  margin: var(--tgph-spacing-2) var(--tgph-spacing-3);
 
   /* Color tokens */
   background: var(--tgph-blue-3);
@@ -459,7 +460,7 @@ npm ls @telegraph/tokens @telegraph/button
 ```tsx
 // Ensure cssVars object uses 'as const'
 const cssVars = {
-  p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
+  p: { cssVar: "--tgph-padding", value: "var(--tgph-spacing-VARIABLE)" },
 } as const; // <- Important!
 ```
 
@@ -471,7 +472,7 @@ const cssVars = {
 import { useStyleEngine } from "@telegraph/style-engine";
 
 const cssVars = {
-  p: { cssVar: "--tgph-padding", value: "var(--tgph-space-VARIABLE)" },
+  p: { cssVar: "--tgph-padding", value: "var(--tgph-spacing-VARIABLE)" },
   bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
 } as const;
 
@@ -490,56 +491,48 @@ export const SimpleBox = (props) => {
 ### Advanced Example
 
 ```tsx
-import {
-  RESPONSIVE_STYLE_PROPS,
-  useStyleEngine,
-} from "@telegraph/style-engine";
+import { useStyleEngine } from "@telegraph/style-engine";
 
 const advancedCssVars = {
   // Spacing
   p: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "all",
   },
   pt: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "top",
   },
   pr: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "right",
   },
   pb: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "bottom",
   },
   pl: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "left",
   },
   px: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "x",
   },
   py: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "y",
   },
 
-  // Colors & States
+  // Colors
   bg: { cssVar: "--tgph-background", value: "var(--tgph-color-VARIABLE)" },
-  hoverBg: {
-    cssVar: "--tgph-hover-bg",
-    value: "var(--tgph-color-VARIABLE)",
-    interactive: true,
-  },
 
   // Layout
   w: { cssVar: "--tgph-width", value: "VARIABLE" },
@@ -558,11 +551,8 @@ export const AdvancedBox = ({ children, ...props }) => {
 
   return (
     <div
-      className={interactive ? "tgph-interactive" : undefined}
-      style={{
-        ...styleProp,
-        transition: interactive ? "all 0.2s ease" : undefined,
-      }}
+      className={`tgph-advanced-box${interactive ? " tgph-advanced-box--interactive" : ""}`}
+      style={styleProp}
       {...otherProps}
     >
       {children}
@@ -570,8 +560,15 @@ export const AdvancedBox = ({ children, ...props }) => {
   );
 };
 
-// Usage
-<AdvancedBox p="4" px="6" bg="blue-3" hoverBg="blue-4" rounded="2" w="200px">
+// Usage — pseudo-class styles use object syntax
+<AdvancedBox
+  p="4"
+  px="6"
+  bg="blue-3"
+  _hover={{ bg: "blue-4" }}
+  rounded="2"
+  w="200px"
+>
   Interactive Content
 </AdvancedBox>;
 ```
@@ -594,7 +591,7 @@ const buttonCssVars = {
   },
   p: {
     cssVar: "--tgph-padding",
-    value: "var(--tgph-space-VARIABLE)",
+    value: "var(--tgph-spacing-VARIABLE)",
     direction: "all"
   }
 } as const;
@@ -616,7 +613,7 @@ export const CustomButton = forwardRef<HTMLButtonElement, CustomButtonProps>(
     return (
       <button
         ref={ref}
-        className={`custom-button ${interactive ? "interactive" : ""}`}
+        className={`custom-button${interactive ? " custom-button--interactive" : ""}`}
         style={styleProp}
         {...otherProps}
       >
@@ -626,13 +623,13 @@ export const CustomButton = forwardRef<HTMLButtonElement, CustomButtonProps>(
   }
 );
 
-// Corresponding CSS
+// Corresponding CSS — use @telegraph interactive() to auto-generate pseudo rules
 /* button.css */
 @telegraph tokens;
 
 .custom-button {
   background: var(--tgph-button-variant, var(--tgph-blue-9));
-  padding: var(--tgph-padding, var(--tgph-space-2) var(--tgph-space-3));
+  padding: var(--tgph-padding, var(--tgph-spacing-2) var(--tgph-spacing-3));
   font-size: var(--tgph-button-size, var(--tgph-font-size-1));
   border-radius: var(--tgph-radius-2);
   border: none;
@@ -640,9 +637,8 @@ export const CustomButton = forwardRef<HTMLButtonElement, CustomButtonProps>(
   transition: all 0.2s ease;
 }
 
-.custom-button.interactive:hover {
-  background: var(--tgph-blue-10);
-}
+/* Auto-generates :hover, :focus-visible, :active, :has(:focus-visible), :disabled rules */
+@telegraph interactive(.custom-button);
 ```
 
 ## References

package/dist/cjs/index.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const y=require("react"),w={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},k={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},f={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},x={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)","0_5":"var(--tgph-spacing-0_5)","1_5":"var(--tgph-spacing-1_5)","2_5":"var(--tgph-spacing-2_5)","3_5":"var(--tgph-spacing-3_5)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},m={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},V={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},I={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},z={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},O={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},S={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},_={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},j={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:w,rounded:k,shadow:f,spacing:x,family:m,leading:V,tracking:I,text:z,weight:O,breakpoint:S,zIndex:_},$=p=>{const a=[];let t="",g=0;for(let r=0;r<p.length;r++){const h=p[r];h==="("?(g++,t+=h):h===")"?(g--,t+=h):h===" "&&g===0?t&&(a.push(t),t=""):t+=h}for(t&&a.push(t);a.length<4;)a.push("0");return[a[0]||"0",a[1]||"0",a[2]||"0",a[3]||"0"]},A=({currentValueOfCssVar:p="0 0 0 0",value:a,direction:t})=>{const[g,r,h,s]=$(p),e={top:g,right:r,bottom:h,left:s};return t==="top"&&(e.top=a),t==="right"&&(e.right=a),t==="bottom"&&(e.bottom=a),t==="left"&&(e.left=a),t==="all"&&(e.top=a,e.right=a,e.bottom=a,e.left=a),t==="x"&&(e.left=a,e.right=a),t==="y"&&(e.top=a,e.bottom=a),t==="side-top"&&(e.top=a,e.right=a),t==="side-bottom"&&(e.bottom=a,e.left=a),t==="side-left"&&(e.top=a,e.left=a),t==="side-right"&&(e.right=a,e.bottom=a),Object.values(e).join(" ")},E=({currentValueOfCssVar:p="visible visible",value:a,axis:t})=>{const[g,r]=p.split(" ");return t==="x"?`${a} ${r}`:t==="y"?`${g} ${a}`:`${a} ${a}`},b=p=>{const{cssVars:a}=p;if(!(p!=null&&p.props)||Object.keys(p.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:t={},...g}=p.props;let r=t;const h={};let s=!1;return Object.keys(g).forEach(e=>{const v=e,u=v,l=a==null?void 0:a[u];if(!l){Object.assign(h,{[v]:g[v]});return}const n=g==null?void 0:g[v];if(!n){Object.assign(r,{[v]:g[v]});return}let c;if(typeof n=="string"&&n.startsWith("-")){const o=n.slice(1);c=`calc(-1 * ${l.value.replace("VARIABLE",o)})`}else c=l.value.replace("VARIABLE",n);const i=l.cssVar;if(l.interactive&&(s=!0),l.direction){const o=r==null?void 0:r[i],d=A({currentValueOfCssVar:o,value:c,direction:l.direction});r={...r,[i]:d};return}if(l.axis){const o=r==null?void 0:r[i],d=E({currentValueOfCssVar:o,value:c,axis:l.axis});r={...r,[i]:d};return}r={...r,[i]:c}}),{styleProp:r,otherProps:h,interactive:s}},C=p=>y.useMemo(()=>b(p),[p]);exports.getStyleProp=b;exports.tokens=j;exports.useStyleEngine=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),I={transparent:"var(--tgph-transparent)",white:"var(--tgph-white)",black:"var(--tgph-black)","surface-1":"var(--tgph-surface-1)","surface-2":"var(--tgph-surface-2)","surface-3":"var(--tgph-surface-3)","alpha-white-1":"var(--tgph-alpha-white-1)","alpha-white-2":"var(--tgph-alpha-white-2)","alpha-white-3":"var(--tgph-alpha-white-3)","alpha-white-4":"var(--tgph-alpha-white-4)","alpha-white-5":"var(--tgph-alpha-white-5)","alpha-white-6":"var(--tgph-alpha-white-6)","alpha-white-7":"var(--tgph-alpha-white-7)","alpha-white-8":"var(--tgph-alpha-white-8)","alpha-white-9":"var(--tgph-alpha-white-9)","alpha-white-10":"var(--tgph-alpha-white-10)","alpha-white-11":"var(--tgph-alpha-white-11)","alpha-white-12":"var(--tgph-alpha-white-12)","alpha-black-1":"var(--tgph-alpha-black-1)","alpha-black-2":"var(--tgph-alpha-black-2)","alpha-black-3":"var(--tgph-alpha-black-3)","alpha-black-4":"var(--tgph-alpha-black-4)","alpha-black-5":"var(--tgph-alpha-black-5)","alpha-black-6":"var(--tgph-alpha-black-6)","alpha-black-7":"var(--tgph-alpha-black-7)","alpha-black-8":"var(--tgph-alpha-black-8)","alpha-black-9":"var(--tgph-alpha-black-9)","alpha-black-10":"var(--tgph-alpha-black-10)","alpha-black-11":"var(--tgph-alpha-black-11)","alpha-black-12":"var(--tgph-alpha-black-12)","gray-1":"var(--tgph-gray-1)","gray-2":"var(--tgph-gray-2)","gray-3":"var(--tgph-gray-3)","gray-4":"var(--tgph-gray-4)","gray-5":"var(--tgph-gray-5)","gray-6":"var(--tgph-gray-6)","gray-7":"var(--tgph-gray-7)","gray-8":"var(--tgph-gray-8)","gray-9":"var(--tgph-gray-9)","gray-10":"var(--tgph-gray-10)","gray-11":"var(--tgph-gray-11)","gray-12":"var(--tgph-gray-12)","beige-1":"var(--tgph-beige-1)","beige-2":"var(--tgph-beige-2)","beige-3":"var(--tgph-beige-3)","beige-4":"var(--tgph-beige-4)","beige-5":"var(--tgph-beige-5)","beige-6":"var(--tgph-beige-6)","beige-7":"var(--tgph-beige-7)","beige-8":"var(--tgph-beige-8)","beige-9":"var(--tgph-beige-9)","beige-10":"var(--tgph-beige-10)","beige-11":"var(--tgph-beige-11)","beige-12":"var(--tgph-beige-12)","accent-1":"var(--tgph-accent-1)","accent-2":"var(--tgph-accent-2)","accent-3":"var(--tgph-accent-3)","accent-4":"var(--tgph-accent-4)","accent-5":"var(--tgph-accent-5)","accent-6":"var(--tgph-accent-6)","accent-7":"var(--tgph-accent-7)","accent-8":"var(--tgph-accent-8)","accent-9":"var(--tgph-accent-9)","accent-10":"var(--tgph-accent-10)","accent-11":"var(--tgph-accent-11)","accent-12":"var(--tgph-accent-12)","green-1":"var(--tgph-green-1)","green-2":"var(--tgph-green-2)","green-3":"var(--tgph-green-3)","green-4":"var(--tgph-green-4)","green-5":"var(--tgph-green-5)","green-6":"var(--tgph-green-6)","green-7":"var(--tgph-green-7)","green-8":"var(--tgph-green-8)","green-9":"var(--tgph-green-9)","green-10":"var(--tgph-green-10)","green-11":"var(--tgph-green-11)","green-12":"var(--tgph-green-12)","yellow-1":"var(--tgph-yellow-1)","yellow-2":"var(--tgph-yellow-2)","yellow-3":"var(--tgph-yellow-3)","yellow-4":"var(--tgph-yellow-4)","yellow-5":"var(--tgph-yellow-5)","yellow-6":"var(--tgph-yellow-6)","yellow-7":"var(--tgph-yellow-7)","yellow-8":"var(--tgph-yellow-8)","yellow-9":"var(--tgph-yellow-9)","yellow-10":"var(--tgph-yellow-10)","yellow-11":"var(--tgph-yellow-11)","yellow-12":"var(--tgph-yellow-12)","blue-1":"var(--tgph-blue-1)","blue-2":"var(--tgph-blue-2)","blue-3":"var(--tgph-blue-3)","blue-4":"var(--tgph-blue-4)","blue-5":"var(--tgph-blue-5)","blue-6":"var(--tgph-blue-6)","blue-7":"var(--tgph-blue-7)","blue-8":"var(--tgph-blue-8)","blue-9":"var(--tgph-blue-9)","blue-10":"var(--tgph-blue-10)","blue-11":"var(--tgph-blue-11)","blue-12":"var(--tgph-blue-12)","red-1":"var(--tgph-red-1)","red-2":"var(--tgph-red-2)","red-3":"var(--tgph-red-3)","red-4":"var(--tgph-red-4)","red-5":"var(--tgph-red-5)","red-6":"var(--tgph-red-6)","red-7":"var(--tgph-red-7)","red-8":"var(--tgph-red-8)","red-9":"var(--tgph-red-9)","red-10":"var(--tgph-red-10)","red-11":"var(--tgph-red-11)","red-12":"var(--tgph-red-12)","purple-1":"var(--tgph-purple-1)","purple-2":"var(--tgph-purple-2)","purple-3":"var(--tgph-purple-3)","purple-4":"var(--tgph-purple-4)","purple-5":"var(--tgph-purple-5)","purple-6":"var(--tgph-purple-6)","purple-7":"var(--tgph-purple-7)","purple-8":"var(--tgph-purple-8)","purple-9":"var(--tgph-purple-9)","purple-10":"var(--tgph-purple-10)","purple-11":"var(--tgph-purple-11)","purple-12":"var(--tgph-purple-12)"},j={0:"var(--tgph-rounded-0)",1:"var(--tgph-rounded-1)",2:"var(--tgph-rounded-2)",3:"var(--tgph-rounded-3)",4:"var(--tgph-rounded-4)",5:"var(--tgph-rounded-5)",6:"var(--tgph-rounded-6)",full:"var(--tgph-rounded-full)"},z={0:"var(--tgph-shadow-0)",1:"var(--tgph-shadow-1)",2:"var(--tgph-shadow-2)",3:"var(--tgph-shadow-3)",inner:"var(--tgph-shadow-inner)"},E={0:"var(--tgph-spacing-0)",1:"var(--tgph-spacing-1)",2:"var(--tgph-spacing-2)",3:"var(--tgph-spacing-3)",4:"var(--tgph-spacing-4)",5:"var(--tgph-spacing-5)",6:"var(--tgph-spacing-6)",7:"var(--tgph-spacing-7)",8:"var(--tgph-spacing-8)",9:"var(--tgph-spacing-9)",10:"var(--tgph-spacing-10)",11:"var(--tgph-spacing-11)",12:"var(--tgph-spacing-12)",14:"var(--tgph-spacing-14)",16:"var(--tgph-spacing-16)",20:"var(--tgph-spacing-20)",24:"var(--tgph-spacing-24)",28:"var(--tgph-spacing-28)",32:"var(--tgph-spacing-32)",36:"var(--tgph-spacing-36)",40:"var(--tgph-spacing-40)",44:"var(--tgph-spacing-44)",48:"var(--tgph-spacing-48)",52:"var(--tgph-spacing-52)",56:"var(--tgph-spacing-56)",60:"var(--tgph-spacing-60)",64:"var(--tgph-spacing-64)",72:"var(--tgph-spacing-72)",80:"var(--tgph-spacing-80)",96:"var(--tgph-spacing-96)",120:"var(--tgph-spacing-120)",140:"var(--tgph-spacing-140)",160:"var(--tgph-spacing-160)",px:"var(--tgph-spacing-px)","0_5":"var(--tgph-spacing-0_5)","1_5":"var(--tgph-spacing-1_5)","2_5":"var(--tgph-spacing-2_5)","3_5":"var(--tgph-spacing-3_5)",full:"var(--tgph-spacing-full)",auto:"var(--tgph-spacing-auto)"},$={sans:"var(--tgph-family-sans)",mono:"var(--tgph-family-mono)"},A={0:"var(--tgph-leading-0)",1:"var(--tgph-leading-1)",2:"var(--tgph-leading-2)",3:"var(--tgph-leading-3)",4:"var(--tgph-leading-4)",5:"var(--tgph-leading-5)",6:"var(--tgph-leading-6)",7:"var(--tgph-leading-7)",8:"var(--tgph-leading-8)",9:"var(--tgph-leading-9)","code-0":"var(--tgph-leading-code-0)","code-1":"var(--tgph-leading-code-1)","code-2":"var(--tgph-leading-code-2)","code-3":"var(--tgph-leading-code-3)","code-4":"var(--tgph-leading-code-4)","code-5":"var(--tgph-leading-code-5)","code-6":"var(--tgph-leading-code-6)","code-7":"var(--tgph-leading-code-7)","code-8":"var(--tgph-leading-code-8)","code-9":"var(--tgph-leading-code-9)"},N={0:"var(--tgph-tracking-0)",1:"var(--tgph-tracking-1)",2:"var(--tgph-tracking-2)",3:"var(--tgph-tracking-3)",4:"var(--tgph-tracking-4)",5:"var(--tgph-tracking-5)",6:"var(--tgph-tracking-6)",7:"var(--tgph-tracking-7)",8:"var(--tgph-tracking-8)",9:"var(--tgph-tracking-9)"},D={0:"var(--tgph-text-0)",1:"var(--tgph-text-1)",2:"var(--tgph-text-2)",3:"var(--tgph-text-3)",4:"var(--tgph-text-4)",5:"var(--tgph-text-5)",6:"var(--tgph-text-6)",7:"var(--tgph-text-7)",8:"var(--tgph-text-8)",9:"var(--tgph-text-9)","code-0":"var(--tgph-text-code-0)","code-1":"var(--tgph-text-code-1)","code-2":"var(--tgph-text-code-2)","code-4":"var(--tgph-text-code-4)","code-5":"var(--tgph-text-code-5)","code-6":"var(--tgph-text-code-6)","code-7":"var(--tgph-text-code-7)","code-8":"var(--tgph-text-code-8)","code-9":"var(--tgph-text-code-9)"},T={regular:"var(--tgph-weight-regular)",medium:"var(--tgph-weight-medium)","semi-bold":"var(--tgph-weight-semi-bold)"},C={sm:"var(--tgph-breakpoint-sm)",md:"var(--tgph-breakpoint-md)",lg:"var(--tgph-breakpoint-lg)",xl:"var(--tgph-breakpoint-xl)","2xl":"var(--tgph-breakpoint-2xl)"},L={hidden:"var(--tgph-zIndex-hidden)",base:"var(--tgph-zIndex-base)",auto:"var(--tgph-zIndex-auto)",dropdown:"var(--tgph-zIndex-dropdown)",sticky:"var(--tgph-zIndex-sticky)",banner:"var(--tgph-zIndex-banner)",overlay:"var(--tgph-zIndex-overlay)",modal:"var(--tgph-zIndex-modal)",popover:"var(--tgph-zIndex-popover)",skipLink:"var(--tgph-zIndex-skipLink)",toast:"var(--tgph-zIndex-toast)",tooltip:"var(--tgph-zIndex-tooltip)"},R={"border-style":{solid:"var(--tgph-border-style-solid)",dashed:"var(--tgph-border-style-dashed)"},color:I,rounded:j,shadow:z,spacing:E,family:$,leading:A,tracking:N,text:D,weight:T,breakpoint:C,zIndex:L},w=["_hover","_focus","_active","_focusWithin","_disabled"],P={_hover:"hover",_focus:"focus",_active:"active",_focusWithin:"focus-within",_disabled:"disabled"},U=e=>{const a=[];let t="",g=0;for(let p=0;p<e.length;p++){const h=e[p];h==="("?(g++,t+=h):h===")"?(g--,t+=h):h===" "&&g===0?t&&(a.push(t),t=""):t+=h}for(t&&a.push(t);a.length<4;)a.push("0");return[a[0]||"0",a[1]||"0",a[2]||"0",a[3]||"0"]},W=({currentValueOfCssVar:e="0 0 0 0",value:a,direction:t})=>{const[g,p,h,c]=U(e),r={top:g,right:p,bottom:h,left:c};return t==="top"&&(r.top=a),t==="right"&&(r.right=a),t==="bottom"&&(r.bottom=a),t==="left"&&(r.left=a),t==="all"&&(r.top=a,r.right=a,r.bottom=a,r.left=a),t==="x"&&(r.left=a,r.right=a),t==="y"&&(r.top=a,r.bottom=a),t==="side-top"&&(r.top=a,r.right=a),t==="side-bottom"&&(r.bottom=a,r.left=a),t==="side-left"&&(r.top=a,r.left=a),t==="side-right"&&(r.right=a,r.bottom=a),Object.values(r).join(" ")},B=({currentValueOfCssVar:e="visible visible",value:a,axis:t})=>{const[g,p]=e.split(" ");return t==="x"?`${a} ${p}`:t==="y"?`${g} ${a}`:`${a} ${a}`},u=(e,a)=>{if(typeof a=="string"&&a.startsWith("-")){const g=a.slice(1);return`calc(-1 * ${e.value.replace("VARIABLE",g)})`}return e.value.replace("VARIABLE",a)},f=(e,a,t,g)=>{const p=g??a.cssVar;if(a.direction){const h=e==null?void 0:e[p],c=W({currentValueOfCssVar:h,value:t,direction:a.direction});return{...e,[p]:c}}if(a.axis){const h=e==null?void 0:e[p],c=B({currentValueOfCssVar:h,value:t,axis:a.axis});return{...e,[p]:c}}return{...e,[p]:t}},M=(e,a)=>{const t=P[a],g=e.replace(/^--/,"");return`--${t}--${g}`},y=e=>{const{cssVars:a}=e;if(!(e!=null&&e.props)||Object.keys(e.props).length===0)return{styleProp:{},otherProps:{},interactive:!1};const{style:t={},...g}=e.props;let p=t;const h={};let c=!1;return Object.keys(g).forEach(r=>{const n=r;if(w.includes(r)&&typeof g[n]=="object"&&g[n]!==null){const m=r,s=g[n],v={};if(Object.keys(s).forEach(l=>{const d=s[l];if(!d)return;const V=l,i=a==null?void 0:a[V];if(!i){v[l]=d;return}const S=u(i,d),_=M(i.cssVar,m);p=f(p,i,S,_)}),Object.keys(v).length>0){const l=h[r]||{};Object.assign(h,{[r]:{...l,...v}})}Object.keys(s).length>Object.keys(v).length&&(c=!0);return}const k=n,o=a==null?void 0:a[k];if(!o){Object.assign(h,{[n]:g[n]});return}const b=g==null?void 0:g[n];if(!b){Object.assign(p,{[n]:g[n]});return}const x=u(o,b);p=f(p,o,x)}),{styleProp:p,otherProps:h,interactive:c}},q=e=>O.useMemo(()=>y(e),[e]);exports.PSEUDO_STATES=w;exports.getStyleProp=y;exports.tokens=R;exports.useStyleEngine=q;
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\ntype Axis = \"x\" | \"y\" | \"both\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  axis?: Axis;\n  interactive?: boolean;\n};\n\n// Helper type to create negative spacing values\n// This distributes over union types for proper type expansion\nexport type NegativeSpacing<T extends string | number | symbol> =\n  T extends string ? `-${T}` : never;\n\n// Type that allows both positive and negative spacing values for a given token type\n// Using direct template literal for better TypeScript inference and autocomplete\nexport type WithNegativeSpacing<T extends string | number | symbol> =\n  T extends string ? T | `-${T}` : T;\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// Helper function to parse directional values (handles calc() expressions)\nconst parseDirectionalValues = (\n  value: string,\n): [string, string, string, string] => {\n  const matches: string[] = [];\n  let current = \"\";\n  let depth = 0;\n\n  for (let i = 0; i < value.length; i++) {\n    const char = value[i];\n\n    if (char === \"(\") {\n      depth++;\n      current += char;\n    } else if (char === \")\") {\n      depth--;\n      current += char;\n    } else if (char === \" \" && depth === 0) {\n      // Space at depth 0 means we're between values\n      if (current) {\n        matches.push(current);\n        current = \"\";\n      }\n    } else {\n      current += char;\n    }\n  }\n\n  // Push the last value\n  if (current) {\n    matches.push(current);\n  }\n\n  // Ensure we always have 4 values\n  while (matches.length < 4) {\n    matches.push(\"0\");\n  }\n\n  return [\n    matches[0] || \"0\",\n    matches[1] || \"0\",\n    matches[2] || \"0\",\n    matches[3] || \"0\",\n  ];\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] =\n    parseDirectionalValues(currentValueOfCssVar);\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\ntype ApplyAxisValuesProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  axis: Axis;\n};\n\nconst applyAxisValues = ({\n  currentValueOfCssVar = \"visible visible\",\n  value,\n  axis,\n}: ApplyAxisValuesProps) => {\n  const [x, y] = currentValueOfCssVar.split(\" \");\n\n  // If the axis is x, we need to set the x value and keep the y value.\n  if (axis === \"x\") {\n    return `${value} ${y}`;\n  }\n\n  // If the axis is y, we need to set the y value and keep the x value.\n  if (axis === \"y\") {\n    return `${x} ${value}`;\n  }\n\n  // If the axis is both, we need to set the x and y values.\n  return `${value} ${value}`;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    // Handle negative spacing values\n    let mappedValueOfCssVar: string;\n    const isNegative =\n      typeof matchingPropValue === \"string\" &&\n      matchingPropValue.startsWith(\"-\");\n\n    if (isNegative) {\n      // Remove the \"-\" prefix to get the actual token key\n      const positiveValue = matchingPropValue.slice(1);\n      // Replace VARIABLE with the positive token and wrap in calc()\n      const positiveVar = matchingCssVar.value.replace(\n        \"VARIABLE\",\n        positiveValue,\n      );\n      mappedValueOfCssVar = `calc(-1 * ${positiveVar})`;\n    } else {\n      // Replace the VARIABLE placeholder with the actual value of the prop\n      mappedValueOfCssVar = matchingCssVar.value.replace(\n        \"VARIABLE\",\n        matchingPropValue,\n      );\n    }\n\n    const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n    // If the style contains an interactive prop, set the interactive flag to true\n    // so that the component can include the interactive class\n    if (matchingCssVar.interactive) {\n      interactive = true;\n    }\n\n    if (matchingCssVar.direction) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n\n      const directionalValue = applyDirectionalValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        direction: matchingCssVar.direction,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: directionalValue,\n      };\n      return;\n    }\n\n    if (matchingCssVar.axis) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n      const axisValue = applyAxisValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        axis: matchingCssVar.axis,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: axisValue,\n      };\n      return;\n    }\n\n    styleProp = {\n      ...styleProp,\n      [cssVarName]: mappedValueOfCssVar,\n    };\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["parseDirectionalValues","value","matches","current","depth","i","char","applyDirectionalValues","currentValueOfCssVar","direction","top","right","bottom","left","newValues","applyAxisValues","axis","x","y","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","positiveValue","cssVarName","directionalValue","axisValue","useStyleEngine","React"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\ntype Axis = \"x\" | \"y\" | \"both\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  axis?: Axis;\n};\n\n// Supported pseudo-class states for the object syntax\n// Prefixed with underscore to avoid collisions with native HTML attributes\n// (e.g. `disabled`) and common component props (e.g. `active`).\nexport const PSEUDO_STATES = [\n  \"_hover\",\n  \"_focus\",\n  \"_active\",\n  \"_focusWithin\",\n  \"_disabled\",\n] as const;\n\nexport type PseudoState = (typeof PSEUDO_STATES)[number];\n\n// Maps pseudo state names to CSS variable prefixes\nconst PSEUDO_CSS_PREFIX: Record<PseudoState, string> = {\n  _hover: \"hover\",\n  _focus: \"focus\",\n  _active: \"active\",\n  _focusWithin: \"focus-within\",\n  _disabled: \"disabled\",\n};\n\n/**\n * Adds pseudo-class variant props to a style props type.\n *\n * Given a base style props type, this creates a new type that also\n * accepts `_hover`, `_focus`, `_active`, `_focusWithin`, and `_disabled`\n * props as objects containing any of the base style props.\n *\n * Prefixed with underscore to avoid collisions with native HTML attributes\n * (e.g. `disabled`) and common component props (e.g. `active`).\n *\n * @example\n * type BoxStyle = { bg: ColorToken; p: SpacingToken };\n * type BoxStyleWithPseudo = WithPseudo<BoxStyle>;\n * // Allows: { bg: \"gray-2\", _hover: { bg: \"gray-3\" }, _focus: { p: \"4\" } }\n */\nexport type WithPseudo<Props> = Props & {\n  _hover?: Partial<Props>;\n  _focus?: Partial<Props>;\n  _active?: Partial<Props>;\n  _focusWithin?: Partial<Props>;\n  _disabled?: Partial<Props>;\n};\n\n// Helper type to create negative spacing values\n// This distributes over union types for proper type expansion\nexport type NegativeSpacing<T extends string | number | symbol> =\n  T extends string ? `-${T}` : never;\n\n// Type that allows both positive and negative spacing values for a given token type\n// Using direct template literal for better TypeScript inference and autocomplete\nexport type WithNegativeSpacing<T extends string | number | symbol> =\n  T extends string ? T | `-${T}` : T;\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// Helper function to parse directional values (handles calc() expressions)\nconst parseDirectionalValues = (\n  value: string,\n): [string, string, string, string] => {\n  const matches: string[] = [];\n  let current = \"\";\n  let depth = 0;\n\n  for (let i = 0; i < value.length; i++) {\n    const char = value[i];\n\n    if (char === \"(\") {\n      depth++;\n      current += char;\n    } else if (char === \")\") {\n      depth--;\n      current += char;\n    } else if (char === \" \" && depth === 0) {\n      // Space at depth 0 means we're between values\n      if (current) {\n        matches.push(current);\n        current = \"\";\n      }\n    } else {\n      current += char;\n    }\n  }\n\n  // Push the last value\n  if (current) {\n    matches.push(current);\n  }\n\n  // Ensure we always have 4 values\n  while (matches.length < 4) {\n    matches.push(\"0\");\n  }\n\n  return [\n    matches[0] || \"0\",\n    matches[1] || \"0\",\n    matches[2] || \"0\",\n    matches[3] || \"0\",\n  ];\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] =\n    parseDirectionalValues(currentValueOfCssVar);\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\ntype ApplyAxisValuesProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  axis: Axis;\n};\n\nconst applyAxisValues = ({\n  currentValueOfCssVar = \"visible visible\",\n  value,\n  axis,\n}: ApplyAxisValuesProps) => {\n  const [x, y] = currentValueOfCssVar.split(\" \");\n\n  // If the axis is x, we need to set the x value and keep the y value.\n  if (axis === \"x\") {\n    return `${value} ${y}`;\n  }\n\n  // If the axis is y, we need to set the y value and keep the x value.\n  if (axis === \"y\") {\n    return `${x} ${value}`;\n  }\n\n  // If the axis is both, we need to set the x and y values.\n  return `${value} ${value}`;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\n// Resolves a single prop value against its matching CssVarProp definition.\n// Returns the mapped CSS variable value string, handling negative spacing.\nconst resolveValue = (\n  matchingCssVar: CssVarProp,\n  propValue: string,\n): string => {\n  const isNegative = typeof propValue === \"string\" && propValue.startsWith(\"-\");\n\n  if (isNegative) {\n    const positiveValue = propValue.slice(1);\n    const positiveVar = matchingCssVar.value.replace(\"VARIABLE\", positiveValue);\n    return `calc(-1 * ${positiveVar})`;\n  }\n\n  return matchingCssVar.value.replace(\"VARIABLE\", propValue);\n};\n\n// Applies a resolved CSS variable value to the styleProp object,\n// handling directional and axis properties.\nconst applyCssVar = <CssVars extends CssVarsPropObject<CssVars>>(\n  styleProp: StyleProp<CssVars>,\n  matchingCssVar: CssVarProp,\n  mappedValue: string,\n  cssVarNameOverride?: string,\n): StyleProp<CssVars> => {\n  const cssVarName = (cssVarNameOverride ??\n    matchingCssVar.cssVar) as keyof StyleProp<CssVars>;\n\n  if (matchingCssVar.direction) {\n    const currentValueOfCssVar = styleProp?.[cssVarName];\n    const directionalValue = applyDirectionalValues({\n      currentValueOfCssVar,\n      value: mappedValue,\n      direction: matchingCssVar.direction,\n    });\n    return { ...styleProp, [cssVarName]: directionalValue };\n  }\n\n  if (matchingCssVar.axis) {\n    const currentValueOfCssVar = styleProp?.[cssVarName];\n    const axisValue = applyAxisValues({\n      currentValueOfCssVar,\n      value: mappedValue,\n      axis: matchingCssVar.axis,\n    });\n    return { ...styleProp, [cssVarName]: axisValue };\n  }\n\n  return { ...styleProp, [cssVarName]: mappedValue };\n};\n\n// Creates a state-prefixed CSS variable name from a base CSS variable.\n// e.g. (\"--background-color\", \"hover\") => \"--hover--background-color\"\nconst createPseudoCssVarName = (\n  baseCssVar: string,\n  pseudoState: PseudoState,\n): string => {\n  const prefix = PSEUDO_CSS_PREFIX[pseudoState];\n  const baseName = baseCssVar.replace(/^--/, \"\");\n  return `--${prefix}--${baseName}`;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n\n    // Check if this is a pseudo-class object prop (hover, focus, active, etc.)\n    if (\n      PSEUDO_STATES.includes(_key as PseudoState) &&\n      typeof props[key] === \"object\" &&\n      props[key] !== null\n    ) {\n      const pseudoState = _key as PseudoState;\n      const pseudoProps = props[key] as Record<string, string | undefined>;\n      const unmatchedPseudoProps: Record<string, string> = {};\n\n      Object.keys(pseudoProps).forEach((pseudoPropKey) => {\n        const propValue = pseudoProps[pseudoPropKey];\n        if (!propValue) return;\n\n        const cssVarsKey = pseudoPropKey as unknown as keyof typeof cssVars;\n        const matchingCssVar = cssVars?.[cssVarsKey];\n\n        if (!matchingCssVar) {\n          // Collect unmatched pseudo props to pass through to otherProps\n          unmatchedPseudoProps[pseudoPropKey] = propValue;\n          return;\n        }\n\n        const mappedValue = resolveValue(matchingCssVar, propValue);\n        const pseudoCssVarName = createPseudoCssVarName(\n          matchingCssVar.cssVar,\n          pseudoState,\n        );\n\n        styleProp = applyCssVar(\n          styleProp,\n          matchingCssVar,\n          mappedValue,\n          pseudoCssVarName,\n        );\n      });\n\n      // Pass through any unmatched pseudo props so downstream components\n      // can process them (e.g. Button passes hover.backgroundColor to Box)\n      if (Object.keys(unmatchedPseudoProps).length > 0) {\n        const existingPseudo =\n          (otherProps as Record<string, unknown>)[_key] || {};\n        Object.assign(otherProps, {\n          [_key]: { ...existingPseudo, ...unmatchedPseudoProps },\n        });\n      }\n\n      // If any pseudo sub-props were matched against cssVars at this level,\n      // mark as interactive so the component adds the scoping class.\n      // This prevents pseudo-class CSS rules from cascading into child elements.\n      if (\n        Object.keys(pseudoProps).length >\n        Object.keys(unmatchedPseudoProps).length\n      ) {\n        interactive = true;\n      }\n\n      return;\n    }\n\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    const mappedValueOfCssVar = resolveValue(matchingCssVar, matchingPropValue);\n\n    styleProp = applyCssVar(styleProp, matchingCssVar, mappedValueOfCssVar);\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["PSEUDO_STATES","PSEUDO_CSS_PREFIX","parseDirectionalValues","value","matches","current","depth","i","char","applyDirectionalValues","currentValueOfCssVar","direction","top","right","bottom","left","newValues","applyAxisValues","axis","x","y","resolveValue","matchingCssVar","propValue","positiveValue","applyCssVar","styleProp","mappedValue","cssVarNameOverride","cssVarName","directionalValue","axisValue","createPseudoCssVarName","baseCssVar","pseudoState","prefix","baseName","getStyleProp","params","cssVars","style","props","otherProps","interactive","_key","key","pseudoProps","unmatchedPseudoProps","pseudoPropKey","cssVarsKey","pseudoCssVarName","existingPseudo","matchingPropValue","mappedValueOfCssVar","useStyleEngine","React"],"mappings":"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"}

package/dist/cjs/postcss.js

@@ -1,2 +1,2 @@
-"use strict";const a=require("path"),l=require("fs"),m=require("postcss");function y(t=process.cwd()){let e=t,s=!0;for(;s;){const n=a.join(e,"package.json");if(l.existsSync(n))try{if(JSON.parse(l.readFileSync(n,"utf8")).workspaces)return e}catch{}const r=a.dirname(e);r===e&&(s=!1),e=r}}const d=(t,e)=>{var s;if(!(!t.dependencies||((s=Object.keys(t.dependencies))==null?void 0:s.length)===0))return Object.entries(t.dependencies).reduce((n,[r,c])=>(r.startsWith("@telegraph/")&&(n[r]={name:r,version:c,path:a.resolve(e,"node_modules",r)}),n),{})};function v(){const t=a.resolve(process.cwd(),"package.json"),e=JSON.parse(l.readFileSync(t,"utf8")),s=d(e,process.cwd()),n=y(),r=c=>{if(!c||Object.keys(c).length===0)return c;const i={...c};for(const u of Object.values(c)){let o,p;u.version.includes("workspace:")&&n?(o=a.resolve(n,"node_modules",u.name,"package.json"),p=n):(o=a.resolve(process.cwd(),"node_modules",u.name,"package.json"),p=process.cwd());try{const g=JSON.parse(l.readFileSync(o,"utf8")),h=d(g,p);if(Object.assign(i,h),h){const k=r(h);Object.assign(i,k)}}catch{continue}}return i};return s?r(s):{}}function f({fileName:t="default.css",path:e}){try{const s=`${e}/dist/css/${t}`,n=a.resolve(s);return l.existsSync(n)?l.readFileSync(n,"utf8"):null}catch{return null}}const j=async({root:t,config:e})=>{const s=v(),n=e.components===!0?Object.values(s).filter(o=>!o.name.includes("@telegraph/tokens")):[],r=e.tokens.length>0?Object.values(s).filter(o=>o.name.includes("@telegraph/tokens")):[],c=n.map(o=>f({path:o.path})).filter(Boolean),i=e.tokens.map(o=>r.map(g=>f({path:g.path,fileName:`${o}.css`})).filter(Boolean)).filter(Boolean),u=[...c,...i];for(const o of u){const p=m.parse(o);t.append(p)}},O=()=>({postcssPlugin:"@telegraph/style-engine",plugins:[{postcssPlugin:"telegraph",AtRule:{telegraph(){}},async Once(t){const e={tokens:[],components:!1};t.walkAtRules("telegraph",s=>{s.params==="components"&&(e.components=!0,s.remove()),s.params==="tokens-light"&&(e.tokens.push("light"),s.remove()),s.params==="tokens-dark"&&(e.tokens.push("dark"),s.remove()),s.params==="tokens"&&(e.tokens.push("default"),s.remove())}),await j({root:t,config:{tokens:e.tokens,components:e.components}})}}]}),P=Object.assign(O,{postcss:!0});module.exports=P;
+"use strict";const a=require("node:path"),l=require("node:fs"),m=require("postcss");function y(t=process.cwd()){let e=t,s=!0;for(;s;){const n=a.join(e,"package.json");if(l.existsSync(n))try{if(JSON.parse(l.readFileSync(n,"utf8")).workspaces)return e}catch{}const r=a.dirname(e);r===e&&(s=!1),e=r}}const d=(t,e)=>{var s;if(!(!t.dependencies||((s=Object.keys(t.dependencies))==null?void 0:s.length)===0))return Object.entries(t.dependencies).reduce((n,[r,c])=>(r.startsWith("@telegraph/")&&(n[r]={name:r,version:c,path:a.resolve(e,"node_modules",r)}),n),{})};function v(){const t=a.resolve(process.cwd(),"package.json"),e=JSON.parse(l.readFileSync(t,"utf8")),s=d(e,process.cwd()),n=y(),r=c=>{if(!c||Object.keys(c).length===0)return c;const i={...c};for(const u of Object.values(c)){let o,p;u.version.includes("workspace:")&&n?(o=a.resolve(n,"node_modules",u.name,"package.json"),p=n):(o=a.resolve(process.cwd(),"node_modules",u.name,"package.json"),p=process.cwd());try{const g=JSON.parse(l.readFileSync(o,"utf8")),h=d(g,p);if(Object.assign(i,h),h){const k=r(h);Object.assign(i,k)}}catch{continue}}return i};return s?r(s):{}}function f({fileName:t="default.css",path:e}){try{const s=`${e}/dist/css/${t}`,n=a.resolve(s);return l.existsSync(n)?l.readFileSync(n,"utf8"):null}catch{return null}}const j=async({root:t,config:e})=>{const s=v(),n=e.components===!0?Object.values(s).filter(o=>!o.name.includes("@telegraph/tokens")):[],r=e.tokens.length>0?Object.values(s).filter(o=>o.name.includes("@telegraph/tokens")):[],c=n.map(o=>f({path:o.path})).filter(Boolean),i=e.tokens.map(o=>r.map(g=>f({path:g.path,fileName:`${o}.css`})).filter(Boolean)).filter(Boolean),u=[...c,...i];for(const o of u){const p=m.parse(o);t.append(p)}},O=()=>({postcssPlugin:"@telegraph/style-engine",plugins:[{postcssPlugin:"telegraph",AtRule:{telegraph(){}},async Once(t){const e={tokens:[],components:!1};t.walkAtRules("telegraph",s=>{s.params==="components"&&(e.components=!0,s.remove()),s.params==="tokens-light"&&(e.tokens.push("light"),s.remove()),s.params==="tokens-dark"&&(e.tokens.push("dark"),s.remove()),s.params==="tokens"&&(e.tokens.push("default"),s.remove())}),await j({root:t,config:{tokens:e.tokens,components:e.components}})}}]}),P=Object.assign(O,{postcss:!0});module.exports=P;
 //# sourceMappingURL=postcss.js.map

package/dist/cjs/postcss.js.map

@@ -1 +1 @@
-{"version":3,"file":"postcss.js","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n  const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n  const monorepoRoot = findMonorepoRoot();\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n      } else {\n        pkgJsonPath = nodePath.resolve(\n          process.cwd(),\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = process.cwd();\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (_err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps();\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}
+{"version":3,"file":"postcss.js","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst nodePath = require(\"node:path\");\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst nodeFs = require(\"node:fs\");\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n  const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n  const monorepoRoot = findMonorepoRoot();\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n      } else {\n        pkgJsonPath = nodePath.resolve(\n          process.cwd(),\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = process.cwd();\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (_err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps();\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}

package/dist/esm/index.mjs

@@ -1,22 +1,34 @@
-import u from "react";
-const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, w = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, f = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, k = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", "0_5": "var(--tgph-spacing-0_5)", "1_5": "var(--tgph-spacing-1_5)", "2_5": "var(--tgph-spacing-2_5)", "3_5": "var(--tgph-spacing-3_5)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, x = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, m = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, V = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, I = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, z = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, O = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, _ = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, S = {
+import _ from "react";
+const I = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)", black: "var(--tgph-black)", "surface-1": "var(--tgph-surface-1)", "surface-2": "var(--tgph-surface-2)", "surface-3": "var(--tgph-surface-3)", "alpha-white-1": "var(--tgph-alpha-white-1)", "alpha-white-2": "var(--tgph-alpha-white-2)", "alpha-white-3": "var(--tgph-alpha-white-3)", "alpha-white-4": "var(--tgph-alpha-white-4)", "alpha-white-5": "var(--tgph-alpha-white-5)", "alpha-white-6": "var(--tgph-alpha-white-6)", "alpha-white-7": "var(--tgph-alpha-white-7)", "alpha-white-8": "var(--tgph-alpha-white-8)", "alpha-white-9": "var(--tgph-alpha-white-9)", "alpha-white-10": "var(--tgph-alpha-white-10)", "alpha-white-11": "var(--tgph-alpha-white-11)", "alpha-white-12": "var(--tgph-alpha-white-12)", "alpha-black-1": "var(--tgph-alpha-black-1)", "alpha-black-2": "var(--tgph-alpha-black-2)", "alpha-black-3": "var(--tgph-alpha-black-3)", "alpha-black-4": "var(--tgph-alpha-black-4)", "alpha-black-5": "var(--tgph-alpha-black-5)", "alpha-black-6": "var(--tgph-alpha-black-6)", "alpha-black-7": "var(--tgph-alpha-black-7)", "alpha-black-8": "var(--tgph-alpha-black-8)", "alpha-black-9": "var(--tgph-alpha-black-9)", "alpha-black-10": "var(--tgph-alpha-black-10)", "alpha-black-11": "var(--tgph-alpha-black-11)", "alpha-black-12": "var(--tgph-alpha-black-12)", "gray-1": "var(--tgph-gray-1)", "gray-2": "var(--tgph-gray-2)", "gray-3": "var(--tgph-gray-3)", "gray-4": "var(--tgph-gray-4)", "gray-5": "var(--tgph-gray-5)", "gray-6": "var(--tgph-gray-6)", "gray-7": "var(--tgph-gray-7)", "gray-8": "var(--tgph-gray-8)", "gray-9": "var(--tgph-gray-9)", "gray-10": "var(--tgph-gray-10)", "gray-11": "var(--tgph-gray-11)", "gray-12": "var(--tgph-gray-12)", "beige-1": "var(--tgph-beige-1)", "beige-2": "var(--tgph-beige-2)", "beige-3": "var(--tgph-beige-3)", "beige-4": "var(--tgph-beige-4)", "beige-5": "var(--tgph-beige-5)", "beige-6": "var(--tgph-beige-6)", "beige-7": "var(--tgph-beige-7)", "beige-8": "var(--tgph-beige-8)", "beige-9": "var(--tgph-beige-9)", "beige-10": "var(--tgph-beige-10)", "beige-11": "var(--tgph-beige-11)", "beige-12": "var(--tgph-beige-12)", "accent-1": "var(--tgph-accent-1)", "accent-2": "var(--tgph-accent-2)", "accent-3": "var(--tgph-accent-3)", "accent-4": "var(--tgph-accent-4)", "accent-5": "var(--tgph-accent-5)", "accent-6": "var(--tgph-accent-6)", "accent-7": "var(--tgph-accent-7)", "accent-8": "var(--tgph-accent-8)", "accent-9": "var(--tgph-accent-9)", "accent-10": "var(--tgph-accent-10)", "accent-11": "var(--tgph-accent-11)", "accent-12": "var(--tgph-accent-12)", "green-1": "var(--tgph-green-1)", "green-2": "var(--tgph-green-2)", "green-3": "var(--tgph-green-3)", "green-4": "var(--tgph-green-4)", "green-5": "var(--tgph-green-5)", "green-6": "var(--tgph-green-6)", "green-7": "var(--tgph-green-7)", "green-8": "var(--tgph-green-8)", "green-9": "var(--tgph-green-9)", "green-10": "var(--tgph-green-10)", "green-11": "var(--tgph-green-11)", "green-12": "var(--tgph-green-12)", "yellow-1": "var(--tgph-yellow-1)", "yellow-2": "var(--tgph-yellow-2)", "yellow-3": "var(--tgph-yellow-3)", "yellow-4": "var(--tgph-yellow-4)", "yellow-5": "var(--tgph-yellow-5)", "yellow-6": "var(--tgph-yellow-6)", "yellow-7": "var(--tgph-yellow-7)", "yellow-8": "var(--tgph-yellow-8)", "yellow-9": "var(--tgph-yellow-9)", "yellow-10": "var(--tgph-yellow-10)", "yellow-11": "var(--tgph-yellow-11)", "yellow-12": "var(--tgph-yellow-12)", "blue-1": "var(--tgph-blue-1)", "blue-2": "var(--tgph-blue-2)", "blue-3": "var(--tgph-blue-3)", "blue-4": "var(--tgph-blue-4)", "blue-5": "var(--tgph-blue-5)", "blue-6": "var(--tgph-blue-6)", "blue-7": "var(--tgph-blue-7)", "blue-8": "var(--tgph-blue-8)", "blue-9": "var(--tgph-blue-9)", "blue-10": "var(--tgph-blue-10)", "blue-11": "var(--tgph-blue-11)", "blue-12": "var(--tgph-blue-12)", "red-1": "var(--tgph-red-1)", "red-2": "var(--tgph-red-2)", "red-3": "var(--tgph-red-3)", "red-4": "var(--tgph-red-4)", "red-5": "var(--tgph-red-5)", "red-6": "var(--tgph-red-6)", "red-7": "var(--tgph-red-7)", "red-8": "var(--tgph-red-8)", "red-9": "var(--tgph-red-9)", "red-10": "var(--tgph-red-10)", "red-11": "var(--tgph-red-11)", "red-12": "var(--tgph-red-12)", "purple-1": "var(--tgph-purple-1)", "purple-2": "var(--tgph-purple-2)", "purple-3": "var(--tgph-purple-3)", "purple-4": "var(--tgph-purple-4)", "purple-5": "var(--tgph-purple-5)", "purple-6": "var(--tgph-purple-6)", "purple-7": "var(--tgph-purple-7)", "purple-8": "var(--tgph-purple-8)", "purple-9": "var(--tgph-purple-9)", "purple-10": "var(--tgph-purple-10)", "purple-11": "var(--tgph-purple-11)", "purple-12": "var(--tgph-purple-12)" }, O = { 0: "var(--tgph-rounded-0)", 1: "var(--tgph-rounded-1)", 2: "var(--tgph-rounded-2)", 3: "var(--tgph-rounded-3)", 4: "var(--tgph-rounded-4)", 5: "var(--tgph-rounded-5)", 6: "var(--tgph-rounded-6)", full: "var(--tgph-rounded-full)" }, z = { 0: "var(--tgph-shadow-0)", 1: "var(--tgph-shadow-1)", 2: "var(--tgph-shadow-2)", 3: "var(--tgph-shadow-3)", inner: "var(--tgph-shadow-inner)" }, j = { 0: "var(--tgph-spacing-0)", 1: "var(--tgph-spacing-1)", 2: "var(--tgph-spacing-2)", 3: "var(--tgph-spacing-3)", 4: "var(--tgph-spacing-4)", 5: "var(--tgph-spacing-5)", 6: "var(--tgph-spacing-6)", 7: "var(--tgph-spacing-7)", 8: "var(--tgph-spacing-8)", 9: "var(--tgph-spacing-9)", 10: "var(--tgph-spacing-10)", 11: "var(--tgph-spacing-11)", 12: "var(--tgph-spacing-12)", 14: "var(--tgph-spacing-14)", 16: "var(--tgph-spacing-16)", 20: "var(--tgph-spacing-20)", 24: "var(--tgph-spacing-24)", 28: "var(--tgph-spacing-28)", 32: "var(--tgph-spacing-32)", 36: "var(--tgph-spacing-36)", 40: "var(--tgph-spacing-40)", 44: "var(--tgph-spacing-44)", 48: "var(--tgph-spacing-48)", 52: "var(--tgph-spacing-52)", 56: "var(--tgph-spacing-56)", 60: "var(--tgph-spacing-60)", 64: "var(--tgph-spacing-64)", 72: "var(--tgph-spacing-72)", 80: "var(--tgph-spacing-80)", 96: "var(--tgph-spacing-96)", 120: "var(--tgph-spacing-120)", 140: "var(--tgph-spacing-140)", 160: "var(--tgph-spacing-160)", px: "var(--tgph-spacing-px)", "0_5": "var(--tgph-spacing-0_5)", "1_5": "var(--tgph-spacing-1_5)", "2_5": "var(--tgph-spacing-2_5)", "3_5": "var(--tgph-spacing-3_5)", full: "var(--tgph-spacing-full)", auto: "var(--tgph-spacing-auto)" }, S = { sans: "var(--tgph-family-sans)", mono: "var(--tgph-family-mono)" }, E = { 0: "var(--tgph-leading-0)", 1: "var(--tgph-leading-1)", 2: "var(--tgph-leading-2)", 3: "var(--tgph-leading-3)", 4: "var(--tgph-leading-4)", 5: "var(--tgph-leading-5)", 6: "var(--tgph-leading-6)", 7: "var(--tgph-leading-7)", 8: "var(--tgph-leading-8)", 9: "var(--tgph-leading-9)", "code-0": "var(--tgph-leading-code-0)", "code-1": "var(--tgph-leading-code-1)", "code-2": "var(--tgph-leading-code-2)", "code-3": "var(--tgph-leading-code-3)", "code-4": "var(--tgph-leading-code-4)", "code-5": "var(--tgph-leading-code-5)", "code-6": "var(--tgph-leading-code-6)", "code-7": "var(--tgph-leading-code-7)", "code-8": "var(--tgph-leading-code-8)", "code-9": "var(--tgph-leading-code-9)" }, $ = { 0: "var(--tgph-tracking-0)", 1: "var(--tgph-tracking-1)", 2: "var(--tgph-tracking-2)", 3: "var(--tgph-tracking-3)", 4: "var(--tgph-tracking-4)", 5: "var(--tgph-tracking-5)", 6: "var(--tgph-tracking-6)", 7: "var(--tgph-tracking-7)", 8: "var(--tgph-tracking-8)", 9: "var(--tgph-tracking-9)" }, A = { 0: "var(--tgph-text-0)", 1: "var(--tgph-text-1)", 2: "var(--tgph-text-2)", 3: "var(--tgph-text-3)", 4: "var(--tgph-text-4)", 5: "var(--tgph-text-5)", 6: "var(--tgph-text-6)", 7: "var(--tgph-text-7)", 8: "var(--tgph-text-8)", 9: "var(--tgph-text-9)", "code-0": "var(--tgph-text-code-0)", "code-1": "var(--tgph-text-code-1)", "code-2": "var(--tgph-text-code-2)", "code-4": "var(--tgph-text-code-4)", "code-5": "var(--tgph-text-code-5)", "code-6": "var(--tgph-text-code-6)", "code-7": "var(--tgph-text-code-7)", "code-8": "var(--tgph-text-code-8)", "code-9": "var(--tgph-text-code-9)" }, N = { regular: "var(--tgph-weight-regular)", medium: "var(--tgph-weight-medium)", "semi-bold": "var(--tgph-weight-semi-bold)" }, C = { sm: "var(--tgph-breakpoint-sm)", md: "var(--tgph-breakpoint-md)", lg: "var(--tgph-breakpoint-lg)", xl: "var(--tgph-breakpoint-xl)", "2xl": "var(--tgph-breakpoint-2xl)" }, D = { hidden: "var(--tgph-zIndex-hidden)", base: "var(--tgph-zIndex-base)", auto: "var(--tgph-zIndex-auto)", dropdown: "var(--tgph-zIndex-dropdown)", sticky: "var(--tgph-zIndex-sticky)", banner: "var(--tgph-zIndex-banner)", overlay: "var(--tgph-zIndex-overlay)", modal: "var(--tgph-zIndex-modal)", popover: "var(--tgph-zIndex-popover)", skipLink: "var(--tgph-zIndex-skipLink)", toast: "var(--tgph-zIndex-toast)", tooltip: "var(--tgph-zIndex-tooltip)" }, X = {
   "border-style": { solid: "var(--tgph-border-style-solid)", dashed: "var(--tgph-border-style-dashed)" },
-  color: y,
-  rounded: w,
-  shadow: f,
-  spacing: k,
-  family: x,
-  leading: m,
-  tracking: V,
-  text: I,
-  weight: z,
-  breakpoint: O,
-  zIndex: _
-}, $ = (p) => {
+  color: I,
+  rounded: O,
+  shadow: z,
+  spacing: j,
+  family: S,
+  leading: E,
+  tracking: $,
+  text: A,
+  weight: N,
+  breakpoint: C,
+  zIndex: D
+}, L = [
+  "_hover",
+  "_focus",
+  "_active",
+  "_focusWithin",
+  "_disabled"
+], R = {
+  _hover: "hover",
+  _focus: "focus",
+  _active: "active",
+  _focusWithin: "focus-within",
+  _disabled: "disabled"
+}, W = (e) => {
   const a = [];
   let t = "", g = 0;
-  for (let r = 0; r < p.length; r++) {
-    const h = p[r];
+  for (let p = 0; p < e.length; p++) {
+    const h = e[p];
     h === "(" ? (g++, t += h) : h === ")" ? (g--, t += h) : h === " " && g === 0 ? t && (a.push(t), t = "") : t += h;
   }
   for (t && a.push(t); a.length < 4; )
@@ -27,90 +39,110 @@ const y = { transparent: "var(--tgph-transparent)", white: "var(--tgph-white)",
     a[2] || "0",
     a[3] || "0"
   ];
-}, j = ({
-  currentValueOfCssVar: p = "0 0 0 0",
+}, B = ({
+  currentValueOfCssVar: e = "0 0 0 0",
   value: a,
   direction: t
 }) => {
-  const [g, r, h, s] = $(p), e = {
+  const [g, p, h, c] = W(e), r = {
     top: g,
-    right: r,
+    right: p,
     bottom: h,
-    left: s
+    left: c
   };
-  return t === "top" && (e.top = a), t === "right" && (e.right = a), t === "bottom" && (e.bottom = a), t === "left" && (e.left = a), t === "all" && (e.top = a, e.right = a, e.bottom = a, e.left = a), t === "x" && (e.left = a, e.right = a), t === "y" && (e.top = a, e.bottom = a), t === "side-top" && (e.top = a, e.right = a), t === "side-bottom" && (e.bottom = a, e.left = a), t === "side-left" && (e.top = a, e.left = a), t === "side-right" && (e.right = a, e.bottom = a), Object.values(e).join(" ");
-}, A = ({
-  currentValueOfCssVar: p = "visible visible",
+  return t === "top" && (r.top = a), t === "right" && (r.right = a), t === "bottom" && (r.bottom = a), t === "left" && (r.left = a), t === "all" && (r.top = a, r.right = a, r.bottom = a, r.left = a), t === "x" && (r.left = a, r.right = a), t === "y" && (r.top = a, r.bottom = a), t === "side-top" && (r.top = a, r.right = a), t === "side-bottom" && (r.bottom = a, r.left = a), t === "side-left" && (r.top = a, r.left = a), t === "side-right" && (r.right = a, r.bottom = a), Object.values(r).join(" ");
+}, T = ({
+  currentValueOfCssVar: e = "visible visible",
   value: a,
   axis: t
 }) => {
-  const [g, r] = p.split(" ");
-  return t === "x" ? `${a} ${r}` : t === "y" ? `${g} ${a}` : `${a} ${a}`;
-}, C = (p) => {
-  const { cssVars: a } = p;
-  if (!(p != null && p.props) || Object.keys(p.props).length === 0)
+  const [g, p] = e.split(" ");
+  return t === "x" ? `${a} ${p}` : t === "y" ? `${g} ${a}` : `${a} ${a}`;
+}, u = (e, a) => {
+  if (typeof a == "string" && a.startsWith("-")) {
+    const g = a.slice(1);
+    return `calc(-1 * ${e.value.replace("VARIABLE", g)})`;
+  }
+  return e.value.replace("VARIABLE", a);
+}, f = (e, a, t, g) => {
+  const p = g ?? a.cssVar;
+  if (a.direction) {
+    const h = e == null ? void 0 : e[p], c = B({
+      currentValueOfCssVar: h,
+      value: t,
+      direction: a.direction
+    });
+    return { ...e, [p]: c };
+  }
+  if (a.axis) {
+    const h = e == null ? void 0 : e[p], c = T({
+      currentValueOfCssVar: h,
+      value: t,
+      axis: a.axis
+    });
+    return { ...e, [p]: c };
+  }
+  return { ...e, [p]: t };
+}, U = (e, a) => {
+  const t = R[a], g = e.replace(/^--/, "");
+  return `--${t}--${g}`;
+}, F = (e) => {
+  const { cssVars: a } = e;
+  if (!(e != null && e.props) || Object.keys(e.props).length === 0)
     return { styleProp: {}, otherProps: {}, interactive: !1 };
-  const { style: t = {}, ...g } = p.props;
-  let r = t;
+  const { style: t = {}, ...g } = e.props;
+  let p = t;
   const h = {};
-  let s = !1;
-  return Object.keys(g).forEach((e) => {
-    const v = e, b = v, l = a == null ? void 0 : a[b];
-    if (!l) {
-      Object.assign(h, { [v]: g[v] });
-      return;
-    }
-    const n = g == null ? void 0 : g[v];
-    if (!n) {
-      Object.assign(r, { [v]: g[v] });
+  let c = !1;
+  return Object.keys(g).forEach((r) => {
+    const n = r;
+    if (L.includes(r) && typeof g[n] == "object" && g[n] !== null) {
+      const k = r, s = g[n], v = {};
+      if (Object.keys(s).forEach((l) => {
+        const d = s[l];
+        if (!d) return;
+        const x = l, i = a == null ? void 0 : a[x];
+        if (!i) {
+          v[l] = d;
+          return;
+        }
+        const m = u(i, d), V = U(
+          i.cssVar,
+          k
+        );
+        p = f(
+          p,
+          i,
+          m,
+          V
+        );
+      }), Object.keys(v).length > 0) {
+        const l = h[r] || {};
+        Object.assign(h, {
+          [r]: { ...l, ...v }
+        });
+      }
+      Object.keys(s).length > Object.keys(v).length && (c = !0);
       return;
     }
-    let c;
-    if (typeof n == "string" && n.startsWith("-")) {
-      const o = n.slice(1);
-      c = `calc(-1 * ${l.value.replace(
-        "VARIABLE",
-        o
-      )})`;
-    } else
-      c = l.value.replace(
-        "VARIABLE",
-        n
-      );
-    const i = l.cssVar;
-    if (l.interactive && (s = !0), l.direction) {
-      const o = r == null ? void 0 : r[i], d = j({
-        currentValueOfCssVar: o,
-        value: c,
-        direction: l.direction
-      });
-      r = {
-        ...r,
-        [i]: d
-      };
+    const w = n, o = a == null ? void 0 : a[w];
+    if (!o) {
+      Object.assign(h, { [n]: g[n] });
       return;
     }
-    if (l.axis) {
-      const o = r == null ? void 0 : r[i], d = A({
-        currentValueOfCssVar: o,
-        value: c,
-        axis: l.axis
-      });
-      r = {
-        ...r,
-        [i]: d
-      };
+    const b = g == null ? void 0 : g[n];
+    if (!b) {
+      Object.assign(p, { [n]: g[n] });
       return;
     }
-    r = {
-      ...r,
-      [i]: c
-    };
-  }), { styleProp: r, otherProps: h, interactive: s };
-}, N = (p) => u.useMemo(() => C(p), [p]);
+    const y = u(o, b);
+    p = f(p, o, y);
+  }), { styleProp: p, otherProps: h, interactive: c };
+}, q = (e) => _.useMemo(() => F(e), [e]);
 export {
-  C as getStyleProp,
-  S as tokens,
-  N as useStyleEngine
+  L as PSEUDO_STATES,
+  F as getStyleProp,
+  X as tokens,
+  q as useStyleEngine
 };
 //# sourceMappingURL=index.mjs.map

package/dist/esm/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\ntype Axis = \"x\" | \"y\" | \"both\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  axis?: Axis;\n  interactive?: boolean;\n};\n\n// Helper type to create negative spacing values\n// This distributes over union types for proper type expansion\nexport type NegativeSpacing<T extends string | number | symbol> =\n  T extends string ? `-${T}` : never;\n\n// Type that allows both positive and negative spacing values for a given token type\n// Using direct template literal for better TypeScript inference and autocomplete\nexport type WithNegativeSpacing<T extends string | number | symbol> =\n  T extends string ? T | `-${T}` : T;\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// Helper function to parse directional values (handles calc() expressions)\nconst parseDirectionalValues = (\n  value: string,\n): [string, string, string, string] => {\n  const matches: string[] = [];\n  let current = \"\";\n  let depth = 0;\n\n  for (let i = 0; i < value.length; i++) {\n    const char = value[i];\n\n    if (char === \"(\") {\n      depth++;\n      current += char;\n    } else if (char === \")\") {\n      depth--;\n      current += char;\n    } else if (char === \" \" && depth === 0) {\n      // Space at depth 0 means we're between values\n      if (current) {\n        matches.push(current);\n        current = \"\";\n      }\n    } else {\n      current += char;\n    }\n  }\n\n  // Push the last value\n  if (current) {\n    matches.push(current);\n  }\n\n  // Ensure we always have 4 values\n  while (matches.length < 4) {\n    matches.push(\"0\");\n  }\n\n  return [\n    matches[0] || \"0\",\n    matches[1] || \"0\",\n    matches[2] || \"0\",\n    matches[3] || \"0\",\n  ];\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] =\n    parseDirectionalValues(currentValueOfCssVar);\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\ntype ApplyAxisValuesProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  axis: Axis;\n};\n\nconst applyAxisValues = ({\n  currentValueOfCssVar = \"visible visible\",\n  value,\n  axis,\n}: ApplyAxisValuesProps) => {\n  const [x, y] = currentValueOfCssVar.split(\" \");\n\n  // If the axis is x, we need to set the x value and keep the y value.\n  if (axis === \"x\") {\n    return `${value} ${y}`;\n  }\n\n  // If the axis is y, we need to set the y value and keep the x value.\n  if (axis === \"y\") {\n    return `${x} ${value}`;\n  }\n\n  // If the axis is both, we need to set the x and y values.\n  return `${value} ${value}`;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    // Handle negative spacing values\n    let mappedValueOfCssVar: string;\n    const isNegative =\n      typeof matchingPropValue === \"string\" &&\n      matchingPropValue.startsWith(\"-\");\n\n    if (isNegative) {\n      // Remove the \"-\" prefix to get the actual token key\n      const positiveValue = matchingPropValue.slice(1);\n      // Replace VARIABLE with the positive token and wrap in calc()\n      const positiveVar = matchingCssVar.value.replace(\n        \"VARIABLE\",\n        positiveValue,\n      );\n      mappedValueOfCssVar = `calc(-1 * ${positiveVar})`;\n    } else {\n      // Replace the VARIABLE placeholder with the actual value of the prop\n      mappedValueOfCssVar = matchingCssVar.value.replace(\n        \"VARIABLE\",\n        matchingPropValue,\n      );\n    }\n\n    const cssVarName = matchingCssVar.cssVar as keyof StyleProp<CssVars>;\n\n    // If the style contains an interactive prop, set the interactive flag to true\n    // so that the component can include the interactive class\n    if (matchingCssVar.interactive) {\n      interactive = true;\n    }\n\n    if (matchingCssVar.direction) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n\n      const directionalValue = applyDirectionalValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        direction: matchingCssVar.direction,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: directionalValue,\n      };\n      return;\n    }\n\n    if (matchingCssVar.axis) {\n      const currentValueOfCssVar = styleProp?.[cssVarName];\n      const axisValue = applyAxisValues({\n        currentValueOfCssVar,\n        value: mappedValueOfCssVar,\n        axis: matchingCssVar.axis,\n      });\n\n      styleProp = {\n        ...styleProp,\n        [cssVarName]: axisValue,\n      };\n      return;\n    }\n\n    styleProp = {\n      ...styleProp,\n      [cssVarName]: mappedValueOfCssVar,\n    };\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["parseDirectionalValues","value","matches","current","depth","i","char","applyDirectionalValues","currentValueOfCssVar","direction","top","right","bottom","left","newValues","applyAxisValues","axis","x","y","getStyleProp","params","cssVars","style","props","styleProp","otherProps","interactive","_key","key","cssVarsKey","matchingCssVar","matchingPropValue","mappedValueOfCssVar","positiveValue","cssVarName","directionalValue","axisValue","useStyleEngine","React"],"mappings":"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"}
+{"version":3,"file":"index.mjs","sources":["../../src/helpers/getStyleProp/getStyleProp.ts","../../src/hooks/useStyleEngine.ts"],"sourcesContent":["type Direction =\n  | \"x\"\n  | \"y\"\n  | \"top\"\n  | \"bottom\"\n  | \"left\"\n  | \"right\"\n  | \"all\"\n  | \"side-top\"\n  | \"side-bottom\"\n  | \"side-left\"\n  | \"side-right\";\n\ntype Axis = \"x\" | \"y\" | \"both\";\n\nexport type CssVarProp = {\n  cssVar: string;\n  value: string;\n  direction?: Direction;\n  axis?: Axis;\n};\n\n// Supported pseudo-class states for the object syntax\n// Prefixed with underscore to avoid collisions with native HTML attributes\n// (e.g. `disabled`) and common component props (e.g. `active`).\nexport const PSEUDO_STATES = [\n  \"_hover\",\n  \"_focus\",\n  \"_active\",\n  \"_focusWithin\",\n  \"_disabled\",\n] as const;\n\nexport type PseudoState = (typeof PSEUDO_STATES)[number];\n\n// Maps pseudo state names to CSS variable prefixes\nconst PSEUDO_CSS_PREFIX: Record<PseudoState, string> = {\n  _hover: \"hover\",\n  _focus: \"focus\",\n  _active: \"active\",\n  _focusWithin: \"focus-within\",\n  _disabled: \"disabled\",\n};\n\n/**\n * Adds pseudo-class variant props to a style props type.\n *\n * Given a base style props type, this creates a new type that also\n * accepts `_hover`, `_focus`, `_active`, `_focusWithin`, and `_disabled`\n * props as objects containing any of the base style props.\n *\n * Prefixed with underscore to avoid collisions with native HTML attributes\n * (e.g. `disabled`) and common component props (e.g. `active`).\n *\n * @example\n * type BoxStyle = { bg: ColorToken; p: SpacingToken };\n * type BoxStyleWithPseudo = WithPseudo<BoxStyle>;\n * // Allows: { bg: \"gray-2\", _hover: { bg: \"gray-3\" }, _focus: { p: \"4\" } }\n */\nexport type WithPseudo<Props> = Props & {\n  _hover?: Partial<Props>;\n  _focus?: Partial<Props>;\n  _active?: Partial<Props>;\n  _focusWithin?: Partial<Props>;\n  _disabled?: Partial<Props>;\n};\n\n// Helper type to create negative spacing values\n// This distributes over union types for proper type expansion\nexport type NegativeSpacing<T extends string | number | symbol> =\n  T extends string ? `-${T}` : never;\n\n// Type that allows both positive and negative spacing values for a given token type\n// Using direct template literal for better TypeScript inference and autocomplete\nexport type WithNegativeSpacing<T extends string | number | symbol> =\n  T extends string ? T | `-${T}` : T;\n\ntype ApplyDirectionProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  direction?: Direction;\n};\n\n// Helper function to parse directional values (handles calc() expressions)\nconst parseDirectionalValues = (\n  value: string,\n): [string, string, string, string] => {\n  const matches: string[] = [];\n  let current = \"\";\n  let depth = 0;\n\n  for (let i = 0; i < value.length; i++) {\n    const char = value[i];\n\n    if (char === \"(\") {\n      depth++;\n      current += char;\n    } else if (char === \")\") {\n      depth--;\n      current += char;\n    } else if (char === \" \" && depth === 0) {\n      // Space at depth 0 means we're between values\n      if (current) {\n        matches.push(current);\n        current = \"\";\n      }\n    } else {\n      current += char;\n    }\n  }\n\n  // Push the last value\n  if (current) {\n    matches.push(current);\n  }\n\n  // Ensure we always have 4 values\n  while (matches.length < 4) {\n    matches.push(\"0\");\n  }\n\n  return [\n    matches[0] || \"0\",\n    matches[1] || \"0\",\n    matches[2] || \"0\",\n    matches[3] || \"0\",\n  ];\n};\n\n// For values like margin and padding that require 4 values\nconst applyDirectionalValues = ({\n  currentValueOfCssVar = \"0 0 0 0\",\n  value,\n  direction,\n}: ApplyDirectionProps) => {\n  const [top, right, bottom, left] =\n    parseDirectionalValues(currentValueOfCssVar);\n\n  const newValues = {\n    top,\n    right,\n    bottom,\n    left,\n  };\n\n  if (direction === \"top\") {\n    newValues.top = value;\n  }\n\n  if (direction === \"right\") {\n    newValues.right = value;\n  }\n\n  if (direction === \"bottom\") {\n    newValues.bottom = value;\n  }\n\n  if (direction === \"left\") {\n    newValues.left = value;\n  }\n\n  if (direction === \"all\") {\n    newValues.top = value;\n    newValues.right = value;\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"x\") {\n    newValues.left = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"y\") {\n    newValues.top = value;\n    newValues.bottom = value;\n  }\n\n  // \"side\" direction is used for things like border-radius\n  // where we are settings values on corners instead of sides\n  // entire sides like padding and margin provide.\n  if (direction === \"side-top\") {\n    newValues.top = value;\n    newValues.right = value;\n  }\n\n  if (direction === \"side-bottom\") {\n    newValues.bottom = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-left\") {\n    newValues.top = value;\n    newValues.left = value;\n  }\n\n  if (direction === \"side-right\") {\n    newValues.right = value;\n    newValues.bottom = value;\n  }\n\n  const newValuesString = Object.values(newValues).join(\" \");\n\n  return newValuesString;\n};\n\ntype ApplyAxisValuesProps = {\n  currentValueOfCssVar: string | undefined;\n  value: string;\n  axis: Axis;\n};\n\nconst applyAxisValues = ({\n  currentValueOfCssVar = \"visible visible\",\n  value,\n  axis,\n}: ApplyAxisValuesProps) => {\n  const [x, y] = currentValueOfCssVar.split(\" \");\n\n  // If the axis is x, we need to set the x value and keep the y value.\n  if (axis === \"x\") {\n    return `${value} ${y}`;\n  }\n\n  // If the axis is y, we need to set the y value and keep the x value.\n  if (axis === \"y\") {\n    return `${x} ${value}`;\n  }\n\n  // If the axis is both, we need to set the x and y values.\n  return `${value} ${value}`;\n};\n\nexport type CssVarsPropObject<CssVars extends CssVarsPropObject<CssVars>> =\n  Record<keyof CssVars, CssVarProp>;\n\ntype CssVarPropKey<CssVars extends CssVarsPropObject<CssVars>> = keyof CssVars;\n\n// Allow for explicitly defined props that are not css vars to end to end typesafe\ntype OtherProps<CssVars extends CssVarsPropObject<CssVars>, Props> =\n  | Omit<\n      {\n        [key in keyof Props]: Props[key];\n      },\n      CssVarPropKey<CssVars>\n    >\n  | object;\n\n// Allow for explicitly defined css vars return css variables object created\n// by this function and be end to end typesafe\ntype StyleProp<CssVars extends CssVarsPropObject<CssVars>> =\n  | {\n      [key in CssVars[keyof CssVars][\"cssVar\"]]: string;\n    }\n  | object;\n\ntype GetStylePropParams<CssVars, Props> = {\n  props: Props & { style?: Record<string, string> };\n  cssVars: CssVars;\n};\n\n// Resolves a single prop value against its matching CssVarProp definition.\n// Returns the mapped CSS variable value string, handling negative spacing.\nconst resolveValue = (\n  matchingCssVar: CssVarProp,\n  propValue: string,\n): string => {\n  const isNegative = typeof propValue === \"string\" && propValue.startsWith(\"-\");\n\n  if (isNegative) {\n    const positiveValue = propValue.slice(1);\n    const positiveVar = matchingCssVar.value.replace(\"VARIABLE\", positiveValue);\n    return `calc(-1 * ${positiveVar})`;\n  }\n\n  return matchingCssVar.value.replace(\"VARIABLE\", propValue);\n};\n\n// Applies a resolved CSS variable value to the styleProp object,\n// handling directional and axis properties.\nconst applyCssVar = <CssVars extends CssVarsPropObject<CssVars>>(\n  styleProp: StyleProp<CssVars>,\n  matchingCssVar: CssVarProp,\n  mappedValue: string,\n  cssVarNameOverride?: string,\n): StyleProp<CssVars> => {\n  const cssVarName = (cssVarNameOverride ??\n    matchingCssVar.cssVar) as keyof StyleProp<CssVars>;\n\n  if (matchingCssVar.direction) {\n    const currentValueOfCssVar = styleProp?.[cssVarName];\n    const directionalValue = applyDirectionalValues({\n      currentValueOfCssVar,\n      value: mappedValue,\n      direction: matchingCssVar.direction,\n    });\n    return { ...styleProp, [cssVarName]: directionalValue };\n  }\n\n  if (matchingCssVar.axis) {\n    const currentValueOfCssVar = styleProp?.[cssVarName];\n    const axisValue = applyAxisValues({\n      currentValueOfCssVar,\n      value: mappedValue,\n      axis: matchingCssVar.axis,\n    });\n    return { ...styleProp, [cssVarName]: axisValue };\n  }\n\n  return { ...styleProp, [cssVarName]: mappedValue };\n};\n\n// Creates a state-prefixed CSS variable name from a base CSS variable.\n// e.g. (\"--background-color\", \"hover\") => \"--hover--background-color\"\nconst createPseudoCssVarName = (\n  baseCssVar: string,\n  pseudoState: PseudoState,\n): string => {\n  const prefix = PSEUDO_CSS_PREFIX[pseudoState];\n  const baseName = baseCssVar.replace(/^--/, \"\");\n  return `--${prefix}--${baseName}`;\n};\n\nexport const getStyleProp = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: GetStylePropParams<CssVars, Props>,\n): {\n  styleProp: StyleProp<CssVars>;\n  otherProps: OtherProps<CssVars, Props>;\n  interactive: boolean;\n} => {\n  const { cssVars } = params;\n\n  if (!params?.props || Object.keys(params.props).length === 0) {\n    return { styleProp: {}, otherProps: {}, interactive: false };\n  }\n\n  // Assign the additional styles to the style object so that it can be passed\n  // to the component as a prop.\n  const { style = {}, ...props } = params.props;\n\n  let styleProp: StyleProp<CssVars> = style;\n  const otherProps: OtherProps<CssVars, Props> = {};\n  let interactive = false;\n\n  Object.keys(props).forEach((_key) => {\n    const key = _key as keyof typeof props;\n\n    // Check if this is a pseudo-class object prop (hover, focus, active, etc.)\n    if (\n      PSEUDO_STATES.includes(_key as PseudoState) &&\n      typeof props[key] === \"object\" &&\n      props[key] !== null\n    ) {\n      const pseudoState = _key as PseudoState;\n      const pseudoProps = props[key] as Record<string, string | undefined>;\n      const unmatchedPseudoProps: Record<string, string> = {};\n\n      Object.keys(pseudoProps).forEach((pseudoPropKey) => {\n        const propValue = pseudoProps[pseudoPropKey];\n        if (!propValue) return;\n\n        const cssVarsKey = pseudoPropKey as unknown as keyof typeof cssVars;\n        const matchingCssVar = cssVars?.[cssVarsKey];\n\n        if (!matchingCssVar) {\n          // Collect unmatched pseudo props to pass through to otherProps\n          unmatchedPseudoProps[pseudoPropKey] = propValue;\n          return;\n        }\n\n        const mappedValue = resolveValue(matchingCssVar, propValue);\n        const pseudoCssVarName = createPseudoCssVarName(\n          matchingCssVar.cssVar,\n          pseudoState,\n        );\n\n        styleProp = applyCssVar(\n          styleProp,\n          matchingCssVar,\n          mappedValue,\n          pseudoCssVarName,\n        );\n      });\n\n      // Pass through any unmatched pseudo props so downstream components\n      // can process them (e.g. Button passes hover.backgroundColor to Box)\n      if (Object.keys(unmatchedPseudoProps).length > 0) {\n        const existingPseudo =\n          (otherProps as Record<string, unknown>)[_key] || {};\n        Object.assign(otherProps, {\n          [_key]: { ...existingPseudo, ...unmatchedPseudoProps },\n        });\n      }\n\n      // If any pseudo sub-props were matched against cssVars at this level,\n      // mark as interactive so the component adds the scoping class.\n      // This prevents pseudo-class CSS rules from cascading into child elements.\n      if (\n        Object.keys(pseudoProps).length >\n        Object.keys(unmatchedPseudoProps).length\n      ) {\n        interactive = true;\n      }\n\n      return;\n    }\n\n    const cssVarsKey = key as unknown as keyof typeof cssVars;\n    const matchingCssVar = cssVars?.[cssVarsKey];\n\n    // If the prop is not a css var, just add it to the otherProps\n    if (!matchingCssVar) {\n      Object.assign(otherProps, { [key]: props[key] });\n      return;\n    }\n\n    const matchingPropValue = props?.[key] as string | undefined;\n\n    if (!matchingPropValue) {\n      Object.assign(styleProp, { [key]: props[key] });\n      return;\n    }\n\n    const mappedValueOfCssVar = resolveValue(matchingCssVar, matchingPropValue);\n\n    styleProp = applyCssVar(styleProp, matchingCssVar, mappedValueOfCssVar);\n  });\n\n  return { styleProp, otherProps, interactive };\n};\n","import React from \"react\";\n\nimport { type CssVarProp, getStyleProp } from \"../helpers/getStyleProp\";\n\ntype CssVarsPropObject<CssVars> = Record<keyof CssVars, CssVarProp>;\n\nexport const useStyleEngine = <\n  CssVars extends CssVarsPropObject<CssVars>,\n  Props extends Record<string, unknown>,\n>(\n  params: Parameters<typeof getStyleProp<CssVars, Props>>[0],\n) => {\n  return React.useMemo(() => getStyleProp(params), [params]);\n};\n"],"names":["PSEUDO_STATES","PSEUDO_CSS_PREFIX","parseDirectionalValues","value","matches","current","depth","i","char","applyDirectionalValues","currentValueOfCssVar","direction","top","right","bottom","left","newValues","applyAxisValues","axis","x","y","resolveValue","matchingCssVar","propValue","positiveValue","applyCssVar","styleProp","mappedValue","cssVarNameOverride","cssVarName","directionalValue","axisValue","createPseudoCssVarName","baseCssVar","pseudoState","prefix","baseName","getStyleProp","params","cssVars","style","props","otherProps","interactive","_key","key","pseudoProps","unmatchedPseudoProps","pseudoPropKey","cssVarsKey","pseudoCssVarName","existingPseudo","matchingPropValue","mappedValueOfCssVar","useStyleEngine","React"],"mappings":"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"}

package/dist/esm/postcss.mjs

@@ -1,4 +1,4 @@
-const a = require("path"), l = require("fs"), m = require("postcss");
+const a = require("node:path"), l = require("node:fs"), m = require("postcss");
 function y(t = process.cwd()) {
   let e = t, s = !0;
   for (; s; ) {

package/dist/esm/postcss.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodePath = require(\"path\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst nodeFs = require(\"fs\");\n// eslint-disable-next-line @typescript-eslint/no-var-requires\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n  const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n  const monorepoRoot = findMonorepoRoot();\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n      } else {\n        pkgJsonPath = nodePath.resolve(\n          process.cwd(),\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = process.cwd();\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (_err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps();\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}
+{"version":3,"file":"postcss.mjs","sources":["../../src/plugins/postcss.ts"],"sourcesContent":["import { type AcceptedPlugin, type PluginCreator, type Root } from \"postcss\";\n\n// Using require() instead of import to prevent ESM-related bugs in PostCSS.\n// ESM = ECMAScript Modules (the import/export syntax)\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst nodePath = require(\"node:path\");\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst nodeFs = require(\"node:fs\");\n// eslint-disable-next-line @typescript-eslint/no-require-imports\nconst postcss = require(\"postcss\");\n\ntype PkgJson = {\n  dependencies?: Record<string, string>;\n  devDependencies?: Record<string, string>;\n};\n\ntype DepObject = Record<\n  string,\n  {\n    name: string;\n    version: string;\n    path: string;\n  }\n>;\n\n/**\n * Traverses up the directory tree to find the root of the monorepo by looking for a package.json with workspaces.\n * This is needed to properly resolve workspace dependencies in a monorepo setup.\n */\nfunction findMonorepoRoot(start = process.cwd()): string | undefined {\n  let current = start;\n  let run = true;\n\n  while (run) {\n    const pkgJsonPath = nodePath.join(current, \"package.json\");\n    if (nodeFs.existsSync(pkgJsonPath)) {\n      try {\n        const pkg = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        if (pkg.workspaces) {\n          return current;\n        }\n      } catch {\n        // malformed package.json, skip\n      }\n    }\n\n    const parent = nodePath.dirname(current);\n    if (parent === current) run = false;\n    current = parent;\n  }\n\n  return undefined;\n}\n\n/**\n * Extracts all @telegraph/* dependencies from a package.json file and returns them with their paths.\n * This is used to find all Telegraph packages that might contain CSS we need to include.\n */\nconst getTelegraphDepsFromPackageJson = (\n  pkg: PkgJson,\n  pkgPath: string,\n): DepObject | undefined => {\n  if (!pkg.dependencies || Object.keys(pkg.dependencies)?.length === 0) return;\n\n  return Object.entries(pkg.dependencies).reduce((acc, [dep, version]) => {\n    if (dep.startsWith(\"@telegraph/\")) {\n      acc[dep] = {\n        name: dep,\n        version,\n        path: nodePath.resolve(pkgPath, \"node_modules\", dep),\n      };\n    }\n    return acc;\n  }, {} as DepObject);\n};\n\n/**\n * Gets all Telegraph dependencies recursively, including dependencies of dependencies.\n * Handles both normal npm dependencies and workspace dependencies in a monorepo.\n */\nfunction getTelegraphDeps(): DepObject {\n  const pkgPath = nodePath.resolve(process.cwd(), \"package.json\");\n  const pkg = JSON.parse(nodeFs.readFileSync(pkgPath, \"utf8\"));\n  const topLevelDeps = getTelegraphDepsFromPackageJson(pkg, process.cwd());\n  const monorepoRoot = findMonorepoRoot();\n\n  const recursivelyGetTelegraphDeps = (deps: DepObject): DepObject => {\n    if (!deps || Object.keys(deps).length === 0) {\n      return deps;\n    }\n\n    const allDeps = { ...deps };\n\n    for (const dep of Object.values(deps)) {\n      let pkgJsonPath: string;\n      let searchPath: string;\n\n      if (dep.version.includes(\"workspace:\") && monorepoRoot) {\n        pkgJsonPath = nodePath.resolve(\n          monorepoRoot,\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = monorepoRoot;\n      } else {\n        pkgJsonPath = nodePath.resolve(\n          process.cwd(),\n          \"node_modules\",\n          dep.name,\n          \"package.json\",\n        );\n        searchPath = process.cwd();\n      }\n\n      try {\n        const pkgJson = JSON.parse(nodeFs.readFileSync(pkgJsonPath, \"utf8\"));\n        const deps = getTelegraphDepsFromPackageJson(pkgJson, searchPath);\n\n        // Merge new dependencies into allDeps\n        Object.assign(allDeps, deps);\n\n        if (deps) {\n          // Recursively get dependencies of dependencies\n          const nestedDeps = recursivelyGetTelegraphDeps(deps);\n          Object.assign(allDeps, nestedDeps);\n        }\n      } catch (_err) {\n        // Skip if package.json cannot be read\n        continue;\n      }\n    }\n\n    return allDeps;\n  };\n\n  if (topLevelDeps) {\n    return recursivelyGetTelegraphDeps(topLevelDeps);\n  }\n\n  return {};\n}\n\ntype GetCssStylesParams = {\n  fileName?: string;\n  path: string;\n};\n\n/**\n * Reads CSS file content from a Telegraph package's dist/css directory.\n * Returns null if the file doesn't exist or can't be read.\n */\nfunction getCssStyles({\n  fileName = \"default.css\",\n  path,\n}: GetCssStylesParams): string | null {\n  try {\n    const cssPath = `${path}/dist/css/${fileName}`;\n    const pkgPath = nodePath.resolve(cssPath);\n\n    if (nodeFs.existsSync(pkgPath)) {\n      return nodeFs.readFileSync(pkgPath, \"utf8\");\n    }\n\n    return null;\n  } catch {\n    return null;\n  }\n}\n\ntype BuildTelegraphCssParams = {\n  root: Root;\n  config: {\n    tokens: Array<\"light\" | \"dark\" | \"default\">;\n    components: boolean;\n  };\n};\n\n/**\n * Main function that builds the final CSS by:\n * 1. Getting all Telegraph dependencies\n * 2. Filtering for either token packages or component packages based on config\n * 3. Reading their CSS files\n * 4. Appending all CSS to the PostCSS Root node\n */\nconst buildTelegraphCss = async ({ root, config }: BuildTelegraphCssParams) => {\n  const deps = getTelegraphDeps();\n\n  const depsWithoutTokens =\n    config.components === true\n      ? Object.values(deps).filter(\n          (dep) => !dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const tokensDeps =\n    config.tokens.length > 0\n      ? Object.values(deps).filter((dep) =>\n          dep.name.includes(\"@telegraph/tokens\"),\n        )\n      : [];\n\n  const cssFiles = depsWithoutTokens\n    .map((dep) => getCssStyles({ path: dep.path }))\n    .filter(Boolean) as Array<string>;\n\n  const tokensCssFiles = config.tokens\n    .map((token) => {\n      const cssFile = tokensDeps.map((dep) =>\n        getCssStyles({ path: dep.path, fileName: `${token}.css` }),\n      );\n\n      return cssFile.filter(Boolean) as Array<string>;\n    })\n    .filter(Boolean);\n\n  const allCssFiles = [...cssFiles, ...tokensCssFiles];\n\n  for (const content of allCssFiles) {\n    const parsed = postcss.parse(content);\n    root.append(parsed);\n  }\n};\n\n/**\n * PostCSS plugin that processes @telegraph rules in CSS files.\n * It looks for @telegraph tokens, @telegraph tokens-light, @telegraph tokens-dark,\n * and @telegraph components rules and includes the appropriate CSS from Telegraph packages.\n */\nconst styleEnginePostCssPlugin = (): AcceptedPlugin => {\n  return {\n    postcssPlugin: \"@telegraph/style-engine\",\n    plugins: [\n      {\n        postcssPlugin: \"telegraph\",\n        AtRule: {\n          telegraph() {},\n        },\n        async Once(root) {\n          const run = {\n            tokens: [] as BuildTelegraphCssParams[\"config\"][\"tokens\"],\n            components: false,\n          };\n          root.walkAtRules(\"telegraph\", (atRule) => {\n            if (atRule.params === \"components\") {\n              run.components = true;\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-light\") {\n              run.tokens.push(\"light\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens-dark\") {\n              run.tokens.push(\"dark\");\n              atRule.remove();\n            }\n\n            if (atRule.params === \"tokens\") {\n              run.tokens.push(\"default\");\n              atRule.remove();\n            }\n          });\n\n          await buildTelegraphCss({\n            root,\n            config: {\n              tokens: run.tokens,\n              components: run.components,\n            },\n          });\n        },\n      },\n    ],\n  };\n};\n\nexport default Object.assign(styleEnginePostCssPlugin, {\n  postcss: true,\n}) as PluginCreator<Record<string, never>>;\n"],"names":["nodePath","nodeFs","postcss","findMonorepoRoot","start","current","run","pkgJsonPath","parent","getTelegraphDepsFromPackageJson","pkg","pkgPath","_a","acc","dep","version","getTelegraphDeps","topLevelDeps","monorepoRoot","recursivelyGetTelegraphDeps","deps","allDeps","searchPath","pkgJson","nestedDeps","getCssStyles","fileName","path","cssPath","buildTelegraphCss","root","config","depsWithoutTokens","tokensDeps","cssFiles","tokensCssFiles","token","allCssFiles","content","parsed","styleEnginePostCssPlugin","atRule","postcss$1"],"mappings":"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"}

package/dist/types/helpers/getStyleProp/getStyleProp.d.ts

@@ -5,7 +5,30 @@ export type CssVarProp = {
     value: string;
     direction?: Direction;
     axis?: Axis;
-    interactive?: boolean;
+};
+export declare const PSEUDO_STATES: readonly ["_hover", "_focus", "_active", "_focusWithin", "_disabled"];
+export type PseudoState = (typeof PSEUDO_STATES)[number];
+/**
+ * Adds pseudo-class variant props to a style props type.
+ *
+ * Given a base style props type, this creates a new type that also
+ * accepts `_hover`, `_focus`, `_active`, `_focusWithin`, and `_disabled`
+ * props as objects containing any of the base style props.
+ *
+ * Prefixed with underscore to avoid collisions with native HTML attributes
+ * (e.g. `disabled`) and common component props (e.g. `active`).
+ *
+ * @example
+ * type BoxStyle = { bg: ColorToken; p: SpacingToken };
+ * type BoxStyleWithPseudo = WithPseudo<BoxStyle>;
+ * // Allows: { bg: "gray-2", _hover: { bg: "gray-3" }, _focus: { p: "4" } }
+ */
+export type WithPseudo<Props> = Props & {
+    _hover?: Partial<Props>;
+    _focus?: Partial<Props>;
+    _active?: Partial<Props>;
+    _focusWithin?: Partial<Props>;
+    _disabled?: Partial<Props>;
 };
 export type NegativeSpacing<T extends string | number | symbol> = T extends string ? `-${T}` : never;
 export type WithNegativeSpacing<T extends string | number | symbol> = T extends string ? T | `-${T}` : T;

package/dist/types/helpers/getStyleProp/getStyleProp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"getStyleProp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/getStyleProp.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GACV,GAAG,GACH,GAAG,GACH,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAC;AAEjB,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;AAE/B,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAIF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAC5D,CAAC,SAAS,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC;AAIrC,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAChE,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;AA8JrC,MAAM,MAAM,iBAAiB,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACtE,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpC,KAAK,aAAa,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IAAI,MAAM,OAAO,CAAC;AAG/E,KAAK,UAAU,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAAE,KAAK,IAC7D,IAAI,CACF;KACG,GAAG,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;CACjC,EACD,aAAa,CAAC,OAAO,CAAC,CACvB,GACD,MAAM,CAAC;AAIX,KAAK,SAAS,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACrD;KACG,GAAG,IAAI,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,MAAM;CAClD,GACD,MAAM,CAAC;AAEX,KAAK,kBAAkB,CAAC,OAAO,EAAE,KAAK,IAAI;IACxC,KAAK,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,QAAQ,kBAAkB,CAAC,OAAO,EAAE,KAAK,CAAC,KACzC;IACD,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;CAuGtB,CAAC"}
+{"version":3,"file":"getStyleProp.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/getStyleProp.ts"],"names":[],"mappings":"AAAA,KAAK,SAAS,GACV,GAAG,GACH,GAAG,GACH,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,KAAK,GACL,UAAU,GACV,aAAa,GACb,WAAW,GACX,YAAY,CAAC;AAEjB,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,MAAM,CAAC;AAE/B,MAAM,MAAM,UAAU,GAAG;IACvB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAKF,eAAO,MAAM,aAAa,uEAMhB,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAWzD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,UAAU,CAAC,KAAK,IAAI,KAAK,GAAG;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACzB,YAAY,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CAC5B,CAAC;AAIF,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAC5D,CAAC,SAAS,MAAM,GAAG,IAAI,CAAC,EAAE,GAAG,KAAK,CAAC;AAIrC,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,GAAG,MAAM,IAChE,CAAC,SAAS,MAAM,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,GAAG,CAAC,CAAC;AA8JrC,MAAM,MAAM,iBAAiB,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACtE,MAAM,CAAC,MAAM,OAAO,EAAE,UAAU,CAAC,CAAC;AAEpC,KAAK,aAAa,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IAAI,MAAM,OAAO,CAAC;AAG/E,KAAK,UAAU,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAAE,KAAK,IAC7D,IAAI,CACF;KACG,GAAG,IAAI,MAAM,KAAK,GAAG,KAAK,CAAC,GAAG,CAAC;CACjC,EACD,aAAa,CAAC,OAAO,CAAC,CACvB,GACD,MAAM,CAAC;AAIX,KAAK,SAAS,CAAC,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,IACrD;KACG,GAAG,IAAI,OAAO,CAAC,MAAM,OAAO,CAAC,CAAC,QAAQ,CAAC,GAAG,MAAM;CAClD,GACD,MAAM,CAAC;AAEX,KAAK,kBAAkB,CAAC,OAAO,EAAE,KAAK,IAAI;IACxC,KAAK,EAAE,KAAK,GAAG;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;KAAE,CAAC;IAClD,OAAO,EAAE,OAAO,CAAC;CAClB,CAAC;AAgEF,eAAO,MAAM,YAAY,GACvB,OAAO,SAAS,iBAAiB,CAAC,OAAO,CAAC,EAC1C,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAErC,QAAQ,kBAAkB,CAAC,OAAO,EAAE,KAAK,CAAC,KACzC;IACD,SAAS,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;IAC9B,UAAU,EAAE,UAAU,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;IACvC,WAAW,EAAE,OAAO,CAAC;CAqGtB,CAAC"}

package/dist/types/helpers/getStyleProp/index.d.ts

@@ -1,3 +1,3 @@
-export { getStyleProp } from './getStyleProp';
-export type { CssVarProp, NegativeSpacing, WithNegativeSpacing, } from './getStyleProp';
+export { getStyleProp, PSEUDO_STATES } from './getStyleProp';
+export type { CssVarProp, NegativeSpacing, WithNegativeSpacing, PseudoState, WithPseudo, } from './getStyleProp';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/helpers/getStyleProp/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EACV,UAAU,EACV,eAAe,EACf,mBAAmB,GACpB,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/helpers/getStyleProp/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC7D,YAAY,EACV,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,WAAW,EACX,UAAU,GACX,MAAM,gBAAgB,CAAC"}

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { default as tokens } from '@telegraph/tokens/css-variables-map';
-export { getStyleProp, type CssVarProp, type NegativeSpacing, type WithNegativeSpacing, } from './helpers/getStyleProp';
+export { getStyleProp, PSEUDO_STATES, type CssVarProp, type NegativeSpacing, type WithNegativeSpacing, type PseudoState, type WithPseudo, } from './helpers/getStyleProp';
 export { useStyleEngine } from './hooks/useStyleEngine';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAGxE,OAAO,EACL,YAAY,EACZ,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,GACzB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,qCAAqC,CAAC;AAGxE,OAAO,EACL,YAAY,EACZ,aAAa,EACb,KAAK,UAAU,EACf,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAChB,KAAK,UAAU,GAChB,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@telegraph/style-engine",
-  "version": "0.2.2",
+  "version": "0.3.1",
   "description": "A wrappar around vanilla extract to style telegraph",
   "repository": "https://github.com/knocklabs/telegraph/tree/main/packages/style-engine",
   "author": "@knocklabs",
@@ -37,7 +37,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@telegraph/tokens": "^0.1.3",
+    "@telegraph/tokens": "^0.2.0",
     "postcss": "^8.5.6"
   },
   "devDependencies": {
@@ -45,14 +45,14 @@
     "@knocklabs/typescript-config": "^0.0.2",
     "@telegraph/prettier-config": "^0.0.7",
     "@telegraph/vite-config": "^0.0.15",
-    "@types/node": "^22.13.11",
+    "@types/node": "^25.5.0",
     "@types/postcss-import": "^14.0.3",
     "@types/react": "^19.2.9",
-    "eslint": "^8.56.0",
-    "globby": "^14.1.0",
-    "lightningcss": "^1.30.2",
-    "react": "^19.2.3",
-    "react-dom": "^19.2.3",
+    "eslint": "^10.2.0",
+    "globby": "^16.1.1",
+    "lightningcss": "^1.32.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
     "vite": "^6.4.1"
   },