@likec4/styles 1.44.0 → 1.46.0

package/dist/jsx/create-style-context.d.ts

@@ -1,7 +1,7 @@
 /* eslint-disable */
 import type { SlotRecipeRuntimeFn, RecipeVariantProps } from '../types/recipe';
 import type { JsxHTMLProps, JsxStyleProps, Assign } from '../types/system-types';
-import type { JsxFactoryOptions, ComponentProps } from '../types/jsx';
+import type { JsxFactoryOptions, ComponentProps, DataAttrs, AsProps } from '../types/jsx';
 import type { ComponentType, ElementType } from 'react'
 
 interface UnstyledProps {
@@ -19,11 +19,11 @@ type SlotRecipe = SvaFn | SlotRecipeFn
 type InferSlot<R extends SlotRecipe> = R extends SlotRecipeFn ? R['__slot'] : R extends SvaFn<infer S> ? S : never
 
 interface WithProviderOptions<P = {}> {
-  defaultProps?: Partial<P> | undefined
+  defaultProps?: (Partial<P> & DataAttrs) | undefined
 }
 
 type StyleContextProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
-  JsxHTMLProps<ComponentProps<T> & UnstyledProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<RecipeVariantProps<R>, JsxStyleProps>>
 >
 
 type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = ComponentType<
@@ -31,7 +31,7 @@ type StyleContextRootProvider<T extends ElementType, R extends SlotRecipe> = Com
 >
 
 type StyleContextConsumer<T extends ElementType> = ComponentType<
-  JsxHTMLProps<ComponentProps<T> & UnstyledProps, JsxStyleProps>
+  JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 >
 
 export interface StyleContext<R extends SlotRecipe> {

package/dist/jsx/create-style-context.mjs

@@ -5,9 +5,29 @@ import { styled } from './factory.mjs';
 import { getDisplayName } from './factory-helper.mjs';
 import { createContext, useContext, createElement, forwardRef } from 'react'
 
+function createSafeContext(contextName) {
+  const Context = createContext(undefined)
+  const useStyleContext = (componentName, slot) => {
+    const context = useContext(Context)
+    if (context === undefined) {
+      const componentInfo = componentName ? `Component "${componentName}"` : 'A component'
+      const slotInfo = slot ? ` (slot: "${slot}")` : ''
+      
+      throw new Error(
+        `${componentInfo}${slotInfo} cannot access ${contextName} because it's missing its Provider.`
+      )
+    }
+    return context
+  }
+  return [Context, useStyleContext]
+}
+
 export function createStyleContext(recipe) {
-  const StyleContext = createContext({})
   const isConfigRecipe = '__recipe__' in recipe
+  const recipeName = isConfigRecipe && recipe.__name__ ? recipe.__name__ : undefined
+  const contextName = recipeName ? `createStyleContext("${recipeName}")` : 'createStyleContext'
+  
+  const [StyleContext, useStyleContext] = createSafeContext(contextName)
   const svaFn = isConfigRecipe ? recipe : sva(recipe.config)
 
   const getResolvedProps = (props, slotStyles) => {
@@ -71,9 +91,10 @@ export function createStyleContext(recipe) {
 
   const withContext = (Component, slot, options) => {
     const StyledComponent = styled(Component, {}, options)
+    const componentName = getDisplayName(Component)
     
     const WithContext = forwardRef((props, ref) => {
-      const slotStyles = useContext(StyleContext)
+      const slotStyles = useStyleContext(componentName, slot)
 
       const propsWithClass = { ...props, className: props.className ?? options?.defaultProps?.className }
       const resolvedProps = getResolvedProps(propsWithClass, slotStyles[slot])
@@ -84,7 +105,6 @@ export function createStyleContext(recipe) {
       })
     })
     
-    const componentName = getDisplayName(Component)
     WithContext.displayName = `withContext(${componentName})`
     
     return WithContext

package/dist/preset.d.mts

@@ -7,6 +7,10 @@ declare const compoundNode: _pandacss_types.RecipeConfig<_pandacss_types.RecipeV
 
 declare const edgeActionBtn: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 
+declare const edgeLabel: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
+
+declare const edgePath: _pandacss_types.SlotRecipeConfig;
+
 declare const elementNodeData: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
 
 declare const elementShapeRecipe: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVariantRecord>;
@@ -22,6 +26,8 @@ declare const overlay: _pandacss_types.RecipeConfig<_pandacss_types.RecipeVarian
 declare const recipes_actionBtn: typeof actionBtn;
 declare const recipes_compoundNode: typeof compoundNode;
 declare const recipes_edgeActionBtn: typeof edgeActionBtn;
+declare const recipes_edgeLabel: typeof edgeLabel;
+declare const recipes_edgePath: typeof edgePath;
 declare const recipes_elementNodeData: typeof elementNodeData;
 declare const recipes_elementShapeRecipe: typeof elementShapeRecipe;
 declare const recipes_likec4tag: typeof likec4tag;
@@ -29,17 +35,14 @@ declare const recipes_markdownBlock: typeof markdownBlock;
 declare const recipes_navigationPanelActionIcon: typeof navigationPanelActionIcon;
 declare const recipes_overlay: typeof overlay;
 declare namespace recipes {
-  export { recipes_actionBtn as actionBtn, recipes_compoundNode as compoundNode, recipes_edgeActionBtn as edgeActionBtn, recipes_elementNodeData as elementNodeData, recipes_elementShapeRecipe as elementShapeRecipe, recipes_likec4tag as likec4tag, recipes_markdownBlock as markdownBlock, recipes_navigationPanelActionIcon as navigationPanelActionIcon, recipes_overlay as overlay };
+  export { recipes_actionBtn as actionBtn, recipes_compoundNode as compoundNode, recipes_edgeActionBtn as edgeActionBtn, recipes_edgeLabel as edgeLabel, recipes_edgePath as edgePath, recipes_elementNodeData as elementNodeData, recipes_elementShapeRecipe as elementShapeRecipe, recipes_likec4tag as likec4tag, recipes_markdownBlock as markdownBlock, recipes_navigationPanelActionIcon as navigationPanelActionIcon, recipes_overlay as overlay };
 }
 
-declare const edgeLabel: _pandacss_types.SlotRecipeConfig;
-
 declare const navigationLink: _pandacss_types.SlotRecipeConfig;
 
-declare const slotRecipes_edgeLabel: typeof edgeLabel;
 declare const slotRecipes_navigationLink: typeof navigationLink;
 declare namespace slotRecipes {
-  export { slotRecipes_edgeLabel as edgeLabel, slotRecipes_navigationLink as navigationLink };
+  export { slotRecipes_navigationLink as navigationLink };
 }
 
 declare const theme: {
@@ -1009,6 +1012,16 @@ declare const theme: {
     };
     semanticTokens: {
         colors: {
+            text: {
+                DEFAULT: {
+                    description: string;
+                    value: "var(--mantine-color-text)";
+                };
+                dimmed: {
+                    description: string;
+                    value: "var(--mantine-color-dimmed)";
+                };
+            };
             likec4: {
                 background: {
                     DEFAULT: {
@@ -1060,7 +1073,7 @@ declare const theme: {
                         description: string;
                         value: {
                             base: string;
-                            _light: string;
+                            _light: "var(--mantine-color-gray-2)";
                         };
                     };
                     text: {
@@ -1181,7 +1194,7 @@ declare const theme: {
                         outline: {
                             value: {
                                 _light: "var(--mantine-color-orange-8)";
-                                _dark: "var(--mantine-color-orange-6)";
+                                _dark: string;
                             };
                         };
                     };