@likec4/styles 1.39.4 → 1.40.0

package/dist/types/composition.d.ts

@@ -15,6 +15,8 @@ interface Recursive<T> {
  * -----------------------------------------------------------------------------*/
 
 type TextStyleProperty =
+  | 'color'
+  | 'direction'
   | 'font'
   | 'fontFamily'
   | 'fontFeatureSettings'
@@ -35,6 +37,7 @@ type TextStyleProperty =
   | 'fontVariantPosition'
   | 'fontVariationSettings'
   | 'fontWeight'
+  | 'hangingPunctuation'
   | 'hypens'
   | 'hyphenateCharacter'
   | 'hyphenateLimitChars'
@@ -43,11 +46,17 @@ type TextStyleProperty =
   | 'lineHeight'
   | 'quotes'
   | 'overflowWrap'
+  | 'tabSize'
+  | 'textAlign'
+  | 'textAlignLast'
   | 'textCombineUpright'
   | 'textDecoration'
   | 'textDecorationColor'
   | 'textDecorationLine'
+  | 'textDecorationSkip'
+  | 'textDecorationSkipBox'
   | 'textDecorationSkipInk'
+  | 'textDecorationSkipInset'
   | 'textDecorationStyle'
   | 'textDecorationThickness'
   | 'textEmphasis'
@@ -60,16 +69,21 @@ type TextStyleProperty =
   | 'textOverflow'
   | 'textRendering'
   | 'textShadow'
+  | 'textStroke'
+  | 'textStrokeColor'
+  | 'textStrokeWidth'
   | 'textTransform'
   | 'textUnderlineOffset'
   | 'textUnderlinePosition'
   | 'textWrap'
   | 'textWrapMode'
   | 'textWrapStyle'
+  | 'unicodeBidi'
   | 'verticalAlign'
   | 'whiteSpace'
   | 'wordBreak'
   | 'wordSpacing'
+  | 'writingMode'
 
 export type TextStyle = CompositionStyleObject<TextStyleProperty>
 
@@ -79,17 +93,11 @@ export type TextStyles = Recursive<Token<TextStyle>>
  * Layer styles
  * -----------------------------------------------------------------------------*/
 
-type Placement =
-  | 'Top'
-  | 'Right'
-  | 'Bottom'
-  | 'Left'
-  | 'Inline'
-  | 'Block'
-  | 'InlineStart'
-  | 'InlineEnd'
-  | 'BlockStart'
-  | 'BlockEnd'
+type LogicalPlacement = 'Inline' | 'Block' | 'InlineStart' | 'InlineEnd' | 'BlockStart' | 'BlockEnd'
+
+type PhysicalPlacement = 'Top' | 'Right' | 'Bottom' | 'Left'
+
+type Placement = PhysicalPlacement | LogicalPlacement
 
 type Radius =
   | `Top${'Right' | 'Left'}`
@@ -98,20 +106,80 @@ type Radius =
   | `End${'Start' | 'End'}`
 
 type LayerStyleProperty =
+  | 'aspectRatio'
   | 'background'
   | 'backgroundColor'
   | 'backgroundImage'
-  | 'borderRadius'
   | 'border'
-  | 'borderWidth'
   | 'borderColor'
+  | 'borderImage'
+  | 'borderImageOutset'
+  | 'borderImageRepeat'
+  | 'borderImageSlice'
+  | 'borderImageSource'
+  | 'borderImageWidth'
+  | 'borderRadius'
   | 'borderStyle'
+  | 'borderWidth'
+  | `border${Placement}`
+  | `border${Placement}Color`
+  | `border${Placement}Style`
+  | `border${Placement}Width`
+  | 'borderRadius'
+  | `border${Radius}Radius`
   | 'boxShadow'
+  | 'boxShadowColor'
+  | 'clipPath'
+  | 'color'
+  | 'contain'
+  | 'content'
+  | 'contentVisibility'
+  | 'cursor'
+  | 'display'
   | 'filter'
   | 'backdropFilter'
-  | 'transform'
-  | 'color'
+  | 'height'
+  | 'width'
+  | 'minHeight'
+  | 'minWidth'
+  | 'maxHeight'
+  | 'maxWidth'
+  | `margin${Placement}`
+  | 'inset'
+  | `inset${LogicalPlacement}`
+  | Lowercase<PhysicalPlacement>
+  | 'isolation'
+  | 'mask'
+  | 'maskClip'
+  | 'maskComposite'
+  | 'maskImage'
+  | 'maskMode'
+  | 'maskOrigin'
+  | 'maskPosition'
+  | 'maskRepeat'
+  | 'maskSize'
+  | 'mixBlendMode'
+  | 'objectFit'
+  | 'objectPosition'
   | 'opacity'
+  | 'outline'
+  | 'outlineColor'
+  | 'outlineOffset'
+  | 'outlineStyle'
+  | 'outlineWidth'
+  | 'overflow'
+  | 'overflowX'
+  | 'overflowY'
+  | 'padding'
+  | `padding${Placement}`
+  | 'pointerEvents'
+  | 'position'
+  | 'resize'
+  | 'transform'
+  | 'transition'
+  | 'visibility'
+  | 'willChange'
+  | 'zIndex'
   | 'backgroundBlendMode'
   | 'backgroundAttachment'
   | 'backgroundClip'
@@ -119,14 +187,6 @@ type LayerStyleProperty =
   | 'backgroundPosition'
   | 'backgroundRepeat'
   | 'backgroundSize'
-  | `border${Placement}`
-  | `border${Placement}Width`
-  | 'borderRadius'
-  | `border${Radius}Radius`
-  | `border${Placement}Color`
-  | `border${Placement}Style`
-  | 'padding'
-  | `padding${Placement}`
 
 export type LayerStyle = CompositionStyleObject<LayerStyleProperty>
 

package/dist/types/conditions.d.ts

@@ -258,7 +258,7 @@ export interface Conditions {
 	"_edgeActive": string
 	/** `:where(.react-flow__node, .react-flow__edge):has([data-likec4-hovered="true"]) &` */
 	"_whenHovered": string
-	/** `:where(.react-flow__node.selected, .react-flow__edge.selected) &` */
+	/** `:where(.react-flow__node, .react-flow__edge):is(.selected) &` */
 	"_whenSelected": string
 	/** `:where(.react-flow__node, .react-flow__edge):has([data-likec4-dimmed]) &` */
 	"_whenDimmed": string

package/dist/types/jsx.d.ts

@@ -7,13 +7,27 @@ interface Dict {
   [k: string]: unknown
 }
 
+export interface UnstyledProps {
+  /**
+   * Whether to remove recipe styles
+   */
+  unstyled?: boolean | undefined
+}
+
+export interface AsProps {
+  /**
+   * The element to render as
+   */
+  as?: ElementType | undefined
+}
+
 export type ComponentProps<T extends ElementType> = DistributiveOmit<ComponentPropsWithoutRef<T>, 'ref'> & {
   ref?: Ref<ElementRef<T>>
 }
 
 export interface StyledComponent<T extends ElementType, P extends Dict = {}> {
-  (props: JsxHTMLProps<ComponentProps<T>, Assign<JsxStyleProps, P>>): JSX.Element
-  displayName?: string
+  (props: JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, Assign<JsxStyleProps, P>>): JSX.Element
+  displayName?: string | undefined
 }
 
 interface RecipeFn {
@@ -22,12 +36,12 @@ interface RecipeFn {
 
 interface JsxFactoryOptions<TProps extends Dict> {
   dataAttr?: boolean
-  defaultProps?: TProps
+  defaultProps?: Partial<TProps>
   shouldForwardProp?: (prop: string, variantKeys: string[]) => boolean
   forwardProps?: string[]
 }
 
-export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T>, P>;
+export type JsxRecipeProps<T extends ElementType, P extends Dict> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, P>;
 
 export type JsxElement<T extends ElementType, P extends Dict> = T extends StyledComponent<infer A, infer B>
   ? StyledComponent<A, Pretty<DistributiveUnion<P, B>>>
@@ -48,6 +62,6 @@ export type JsxElements = {
 
 export type Styled = JsxFactory & JsxElements
 
-export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T>, JsxStyleProps>
+export type HTMLStyledProps<T extends ElementType> = JsxHTMLProps<ComponentProps<T> & UnstyledProps & AsProps, JsxStyleProps>
 
 export type StyledVariantProps<T extends StyledComponent<any, any>> = T extends StyledComponent<any, infer Props> ? Props : never

package/dist/types/prop-type.d.ts

@@ -55,6 +55,10 @@ export interface UtilityValues {
 	outlineColor: Tokens["colors"];
 	outline: Tokens["borders"];
 	outlineOffset: Tokens["spacing"];
+	focusRing: "outside" | "inside" | "mixed" | "none";
+	focusVisibleRing: "outside" | "inside" | "mixed" | "none";
+	focusRingColor: Tokens["colors"];
+	focusRingOffset: Tokens["spacing"];
 	divideColor: Tokens["colors"];
 	width: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
 	inlineSize: "auto" | Tokens["sizes"] | "1/2" | "1/3" | "2/3" | "1/4" | "2/4" | "3/4" | "1/5" | "2/5" | "3/5" | "4/5" | "1/6" | "2/6" | "3/6" | "4/6" | "5/6" | "1/12" | "2/12" | "3/12" | "4/12" | "5/12" | "6/12" | "7/12" | "8/12" | "9/12" | "10/12" | "11/12" | "screen";
@@ -136,8 +140,9 @@ export interface UtilityValues {
 	transitionTimingFunction: Tokens["easings"];
 	transitionDelay: Tokens["durations"];
 	transitionDuration: Tokens["durations"];
-	transition: "all" | "common" | "background" | "colors" | "opacity" | "shadow" | "transform" | "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "none";
-	animationName: "indicatorOpacity" | "indicatorStrokeOpacity" | "xyedgeAnimated";
+	transitionProperty: "common" | "colors" | "size" | "position" | "background";
+	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform" | "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "none";
+	animationName: "indicatorOpacity" | "xyedgeAnimated";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];
@@ -185,10 +190,10 @@ export interface UtilityValues {
 	stroke: Tokens["colors"];
 	srOnly: boolean;
 	debug: boolean;
-	colorPalette: "mantine" | "mantine.colors.primary" | "mantine.colors" | "mantine.colors.gray" | "mantine.colors.dark" | "mantine.colors.orange" | "mantine.colors.teal" | "mantine.colors.red" | "mantine.colors.green" | "mantine.colors.yellow" | "transparent" | "amber" | "amber.light" | "amber.light.a" | "amber.light.p3" | "amber.light.p3.a" | "amber.dark" | "amber.dark.a" | "amber.dark.p3" | "amber.dark.p3.a" | "amber.a" | "amber.p3" | "amber.p3.a" | "blue" | "blue.light" | "blue.light.a" | "blue.light.p3" | "blue.light.p3.a" | "blue.dark" | "blue.dark.a" | "blue.dark.p3" | "blue.dark.p3.a" | "blue.a" | "blue.p3" | "blue.p3.a" | "crimson" | "crimson.light" | "crimson.light.a" | "crimson.light.p3" | "crimson.light.p3.a" | "crimson.dark" | "crimson.dark.a" | "crimson.dark.p3" | "crimson.dark.p3.a" | "crimson.a" | "crimson.p3" | "crimson.p3.a" | "grass" | "grass.light" | "grass.light.a" | "grass.light.p3" | "grass.light.p3.a" | "grass.dark" | "grass.dark.a" | "grass.dark.p3" | "grass.dark.p3.a" | "grass.a" | "grass.p3" | "grass.p3.a" | "indigo" | "indigo.light" | "indigo.light.a" | "indigo.light.p3" | "indigo.light.p3.a" | "indigo.dark" | "indigo.dark.a" | "indigo.dark.p3" | "indigo.dark.p3.a" | "indigo.a" | "indigo.p3" | "indigo.p3.a" | "lime" | "lime.light" | "lime.light.a" | "lime.light.p3" | "lime.light.p3.a" | "lime.dark" | "lime.dark.a" | "lime.dark.p3" | "lime.dark.p3.a" | "lime.a" | "lime.p3" | "lime.p3.a" | "orange" | "orange.light" | "orange.light.a" | "orange.light.p3" | "orange.light.p3.a" | "orange.dark" | "orange.dark.a" | "orange.dark.p3" | "orange.dark.p3.a" | "orange.a" | "orange.p3" | "orange.p3.a" | "pink" | "pink.light" | "pink.light.a" | "pink.light.p3" | "pink.light.p3.a" | "pink.dark" | "pink.dark.a" | "pink.dark.p3" | "pink.dark.p3.a" | "pink.a" | "pink.p3" | "pink.p3.a" | "purple" | "purple.light" | "purple.light.a" | "purple.light.p3" | "purple.light.p3.a" | "purple.dark" | "purple.dark.a" | "purple.dark.p3" | "purple.dark.p3.a" | "purple.a" | "purple.p3" | "purple.p3.a" | "red" | "red.light" | "red.light.a" | "red.light.p3" | "red.light.p3.a" | "red.dark" | "red.dark.a" | "red.dark.p3" | "red.dark.p3.a" | "red.a" | "red.p3" | "red.p3.a" | "ruby" | "ruby.light" | "ruby.light.a" | "ruby.light.p3" | "ruby.light.p3.a" | "ruby.dark" | "ruby.dark.a" | "ruby.dark.p3" | "ruby.dark.p3.a" | "ruby.a" | "ruby.p3" | "ruby.p3.a" | "teal" | "teal.light" | "teal.light.a" | "teal.light.p3" | "teal.light.p3.a" | "teal.dark" | "teal.dark.a" | "teal.dark.p3" | "teal.dark.p3.a" | "teal.a" | "teal.p3" | "teal.p3.a" | "tomato" | "tomato.light" | "tomato.light.a" | "tomato.light.p3" | "tomato.light.p3.a" | "tomato.dark" | "tomato.dark.a" | "tomato.dark.p3" | "tomato.dark.p3.a" | "tomato.a" | "tomato.p3" | "tomato.p3.a" | "violet" | "violet.light" | "violet.light.a" | "violet.light.p3" | "violet.light.p3.a" | "violet.dark" | "violet.dark.a" | "violet.dark.p3" | "violet.dark.p3.a" | "violet.a" | "violet.p3" | "violet.p3.a" | "yellow" | "yellow.light" | "yellow.light.a" | "yellow.light.p3" | "yellow.light.p3.a" | "yellow.dark" | "yellow.dark.a" | "yellow.dark.p3" | "yellow.dark.p3.a" | "yellow.a" | "yellow.p3" | "yellow.p3.a" | "likec4" | "likec4.background" | "likec4.tag.bg" | "likec4.tag" | "likec4.panel.bg" | "likec4.panel" | "likec4.panel.action-icon.text" | "likec4.panel.action-icon" | "likec4.panel.action-icon.bg" | "likec4.dropdown.bg" | "likec4.dropdown";
+	colorPalette: "mantine" | "mantine.colors.primary" | "mantine.colors" | "mantine.colors.gray" | "mantine.colors.dark" | "mantine.colors.orange" | "mantine.colors.teal" | "mantine.colors.red" | "mantine.colors.green" | "mantine.colors.yellow" | "transparent" | "none" | "amber" | "amber.light" | "amber.light.a" | "amber.light.p3" | "amber.light.p3.a" | "amber.dark" | "amber.dark.a" | "amber.dark.p3" | "amber.dark.p3.a" | "amber.a" | "amber.p3" | "amber.p3.a" | "blue" | "blue.light" | "blue.light.a" | "blue.light.p3" | "blue.light.p3.a" | "blue.dark" | "blue.dark.a" | "blue.dark.p3" | "blue.dark.p3.a" | "blue.a" | "blue.p3" | "blue.p3.a" | "crimson" | "crimson.light" | "crimson.light.a" | "crimson.light.p3" | "crimson.light.p3.a" | "crimson.dark" | "crimson.dark.a" | "crimson.dark.p3" | "crimson.dark.p3.a" | "crimson.a" | "crimson.p3" | "crimson.p3.a" | "grass" | "grass.light" | "grass.light.a" | "grass.light.p3" | "grass.light.p3.a" | "grass.dark" | "grass.dark.a" | "grass.dark.p3" | "grass.dark.p3.a" | "grass.a" | "grass.p3" | "grass.p3.a" | "indigo" | "indigo.light" | "indigo.light.a" | "indigo.light.p3" | "indigo.light.p3.a" | "indigo.dark" | "indigo.dark.a" | "indigo.dark.p3" | "indigo.dark.p3.a" | "indigo.a" | "indigo.p3" | "indigo.p3.a" | "lime" | "lime.light" | "lime.light.a" | "lime.light.p3" | "lime.light.p3.a" | "lime.dark" | "lime.dark.a" | "lime.dark.p3" | "lime.dark.p3.a" | "lime.a" | "lime.p3" | "lime.p3.a" | "orange" | "orange.light" | "orange.light.a" | "orange.light.p3" | "orange.light.p3.a" | "orange.dark" | "orange.dark.a" | "orange.dark.p3" | "orange.dark.p3.a" | "orange.a" | "orange.p3" | "orange.p3.a" | "pink" | "pink.light" | "pink.light.a" | "pink.light.p3" | "pink.light.p3.a" | "pink.dark" | "pink.dark.a" | "pink.dark.p3" | "pink.dark.p3.a" | "pink.a" | "pink.p3" | "pink.p3.a" | "purple" | "purple.light" | "purple.light.a" | "purple.light.p3" | "purple.light.p3.a" | "purple.dark" | "purple.dark.a" | "purple.dark.p3" | "purple.dark.p3.a" | "purple.a" | "purple.p3" | "purple.p3.a" | "red" | "red.light" | "red.light.a" | "red.light.p3" | "red.light.p3.a" | "red.dark" | "red.dark.a" | "red.dark.p3" | "red.dark.p3.a" | "red.a" | "red.p3" | "red.p3.a" | "ruby" | "ruby.light" | "ruby.light.a" | "ruby.light.p3" | "ruby.light.p3.a" | "ruby.dark" | "ruby.dark.a" | "ruby.dark.p3" | "ruby.dark.p3.a" | "ruby.a" | "ruby.p3" | "ruby.p3.a" | "teal" | "teal.light" | "teal.light.a" | "teal.light.p3" | "teal.light.p3.a" | "teal.dark" | "teal.dark.a" | "teal.dark.p3" | "teal.dark.p3.a" | "teal.a" | "teal.p3" | "teal.p3.a" | "tomato" | "tomato.light" | "tomato.light.a" | "tomato.light.p3" | "tomato.light.p3.a" | "tomato.dark" | "tomato.dark.a" | "tomato.dark.p3" | "tomato.dark.p3.a" | "tomato.a" | "tomato.p3" | "tomato.p3.a" | "violet" | "violet.light" | "violet.light.a" | "violet.light.p3" | "violet.light.p3.a" | "violet.dark" | "violet.dark.a" | "violet.dark.p3" | "violet.dark.p3.a" | "violet.a" | "violet.p3" | "violet.p3.a" | "yellow" | "yellow.light" | "yellow.light.a" | "yellow.light.p3" | "yellow.light.p3.a" | "yellow.dark" | "yellow.dark.a" | "yellow.dark.p3" | "yellow.dark.p3.a" | "yellow.a" | "yellow.p3" | "yellow.p3.a" | "likec4" | "likec4.background" | "likec4.tag.bg" | "likec4.tag" | "likec4.panel.bg" | "likec4.panel" | "likec4.panel.action-icon.text" | "likec4.panel.action-icon" | "likec4.panel.action-icon.bg" | "likec4.dropdown.bg" | "likec4.dropdown";
 	textStyle: "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "likec4.node.primary" | "likec4.node.secondary";
 	layerStyle: "likec4.tag" | "likec4.panel" | "likec4.dropdown";
-	animationStyle: "indicator" | "indicatorOpacity" | "xyedgeAnimated";
+	animationStyle: "indicator" | "xyedgeAnimated";
 }
 
 

package/dist/types/style-props.d.ts

@@ -5907,7 +5907,7 @@ transitionDuration?: ConditionalValue<UtilityValues["transitionDuration"] | CssV
    *
    * @see https://developer.mozilla.org/docs/Web/CSS/transition-property
    */
-transitionProperty?: ConditionalValue<WithEscapeHatch<CssProperties["transitionProperty"]>>
+transitionProperty?: ConditionalValue<UtilityValues["transitionProperty"] | CssVars | CssProperties["transitionProperty"]>
  /**
    * The **`transition-timing-function`** CSS property sets how intermediate values are calculated for CSS properties being affected by a transition effect.
    *
@@ -7362,6 +7362,12 @@ scrollPaddingX?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollPaddingIn
  hideBelow?: ConditionalValue<UtilityValues["hideBelow"] | CssVars | CssProperties["hideBelow"]>
  spaceX?: ConditionalValue<WithEscapeHatch<UtilityValues["spaceX"] | CssVars>>
  spaceY?: ConditionalValue<WithEscapeHatch<UtilityValues["spaceY"] | CssVars>>
+ focusRing?: ConditionalValue<UtilityValues["focusRing"] | CssVars | CssProperties["focusRing"]>
+ focusVisibleRing?: ConditionalValue<UtilityValues["focusVisibleRing"] | CssVars | CssProperties["focusVisibleRing"]>
+ focusRingColor?: ConditionalValue<WithEscapeHatch<UtilityValues["focusRingColor"] | CssVars>>
+ focusRingOffset?: ConditionalValue<WithEscapeHatch<UtilityValues["focusRingOffset"] | CssVars>>
+ focusRingWidth?: ConditionalValue<string | number | CssProperties["focusRingWidth"]>
+ focusRingStyle?: ConditionalValue<string | number | CssProperties["focusRingStyle"]>
  divideX?: ConditionalValue<string | number | CssProperties["divideX"]>
  divideY?: ConditionalValue<string | number | CssProperties["divideY"]>
  divideColor?: ConditionalValue<WithEscapeHatch<UtilityValues["divideColor"] | CssVars>>
@@ -7499,6 +7505,6 @@ scrollSnapMarginRight?: ConditionalValue<WithEscapeHatch<UtilityValues["scrollSn
  animationStyle?: ConditionalValue<UtilityValues["animationStyle"] | CssVars | CssProperties["animationStyle"]>
 }
 
-type StrictTokenProps = "top" | "left" | "inset" | "insetInline" | "insetX" | "insetBlock" | "insetY" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetEnd" | "end" | "insetInlineStart" | "insetStart" | "start" | "right" | "bottom" | "gap" | "gridGap" | "gridRowGap" | "gridColumnGap" | "rowGap" | "columnGap" | "padding" | "p" | "paddingLeft" | "pl" | "paddingRight" | "pr" | "paddingTop" | "pt" | "paddingBottom" | "pb" | "paddingBlock" | "py" | "paddingY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInline" | "paddingX" | "px" | "paddingInlineEnd" | "pe" | "paddingEnd" | "paddingInlineStart" | "ps" | "paddingStart" | "marginLeft" | "ml" | "marginRight" | "mr" | "marginTop" | "mt" | "marginBottom" | "mb" | "margin" | "m" | "marginBlock" | "my" | "marginY" | "marginBlockEnd" | "marginBlockStart" | "marginInline" | "mx" | "marginX" | "marginInlineEnd" | "me" | "marginEnd" | "marginInlineStart" | "ms" | "marginStart" | "spaceX" | "spaceY" | "outlineColor" | "ringColor" | "outlineOffset" | "ringOffset" | "divideColor" | "color" | "fontFamily" | "textDecorationColor" | "textEmphasisColor" | "textIndent" | "textShadowColor" | "background" | "bg" | "backgroundColor" | "bgColor" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderColor" | "borderInlineColor" | "borderXColor" | "borderBlockColor" | "borderYColor" | "borderLeftColor" | "borderInlineStartColor" | "borderStartColor" | "borderRightColor" | "borderInlineEndColor" | "borderEndColor" | "borderTopColor" | "borderBottomColor" | "borderBlockEndColor" | "borderBlockStartColor" | "boxShadowColor" | "shadowColor" | "borderSpacing" | "borderSpacingX" | "borderSpacingY" | "transitionTimingFunction" | "animationTimingFunction" | "translateX" | "x" | "translateY" | "y" | "translateZ" | "z" | "accentColor" | "caretColor" | "scrollbarColor" | "scrollMargin" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollMarginBottom" | "scrollMarginBlock" | "scrollMarginY" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginInline" | "scrollMarginX" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingY" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingInline" | "scrollPaddingX" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollPaddingBottom" | "scrollSnapMargin" | "scrollSnapMarginTop" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "fill" | "stroke"
+type StrictTokenProps = "top" | "left" | "inset" | "insetInline" | "insetX" | "insetBlock" | "insetY" | "insetBlockEnd" | "insetBlockStart" | "insetInlineEnd" | "insetEnd" | "end" | "insetInlineStart" | "insetStart" | "start" | "right" | "bottom" | "gap" | "gridGap" | "gridRowGap" | "gridColumnGap" | "rowGap" | "columnGap" | "padding" | "p" | "paddingLeft" | "pl" | "paddingRight" | "pr" | "paddingTop" | "pt" | "paddingBottom" | "pb" | "paddingBlock" | "py" | "paddingY" | "paddingBlockEnd" | "paddingBlockStart" | "paddingInline" | "paddingX" | "px" | "paddingInlineEnd" | "pe" | "paddingEnd" | "paddingInlineStart" | "ps" | "paddingStart" | "marginLeft" | "ml" | "marginRight" | "mr" | "marginTop" | "mt" | "marginBottom" | "mb" | "margin" | "m" | "marginBlock" | "my" | "marginY" | "marginBlockEnd" | "marginBlockStart" | "marginInline" | "mx" | "marginX" | "marginInlineEnd" | "me" | "marginEnd" | "marginInlineStart" | "ms" | "marginStart" | "spaceX" | "spaceY" | "outlineColor" | "ringColor" | "outlineOffset" | "ringOffset" | "focusRingColor" | "focusRingOffset" | "divideColor" | "color" | "fontFamily" | "textDecorationColor" | "textEmphasisColor" | "textIndent" | "textShadowColor" | "background" | "bg" | "backgroundColor" | "bgColor" | "gradientFrom" | "gradientTo" | "gradientVia" | "borderColor" | "borderInlineColor" | "borderXColor" | "borderBlockColor" | "borderYColor" | "borderLeftColor" | "borderInlineStartColor" | "borderStartColor" | "borderRightColor" | "borderInlineEndColor" | "borderEndColor" | "borderTopColor" | "borderBottomColor" | "borderBlockEndColor" | "borderBlockStartColor" | "boxShadowColor" | "shadowColor" | "borderSpacing" | "borderSpacingX" | "borderSpacingY" | "transitionTimingFunction" | "animationTimingFunction" | "translateX" | "x" | "translateY" | "y" | "translateZ" | "z" | "accentColor" | "caretColor" | "scrollbarColor" | "scrollMargin" | "scrollMarginLeft" | "scrollMarginRight" | "scrollMarginTop" | "scrollMarginBottom" | "scrollMarginBlock" | "scrollMarginY" | "scrollMarginBlockEnd" | "scrollMarginBlockStart" | "scrollMarginInline" | "scrollMarginX" | "scrollMarginInlineEnd" | "scrollMarginInlineStart" | "scrollPadding" | "scrollPaddingBlock" | "scrollPaddingY" | "scrollPaddingBlockStart" | "scrollPaddingBlockEnd" | "scrollPaddingInline" | "scrollPaddingX" | "scrollPaddingInlineEnd" | "scrollPaddingInlineStart" | "scrollPaddingLeft" | "scrollPaddingRight" | "scrollPaddingTop" | "scrollPaddingBottom" | "scrollSnapMargin" | "scrollSnapMarginTop" | "scrollSnapMarginBottom" | "scrollSnapMarginLeft" | "scrollSnapMarginRight" | "fill" | "stroke"
 
 type Restrict<Key, Value, Fallback> = Key extends StrictTokenProps ? Value : Value | Fallback

package/package.json

@@ -2,7 +2,7 @@
   "name": "@likec4/styles",
   "description": "Shared PandaCSS preset and generated styles, used in LikeC4",
   "license": "MIT",
-  "version": "1.39.4",
+  "version": "1.40.0",
   "bugs": "https://github.com/likec4/likec4/issues",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -57,23 +57,26 @@
     },
     "./dev": "./dev.ts"
   },
-  "dependencies": {
-    "@pandacss/dev": "^1.1.0"
+  "peerDependencies": {
+    "@pandacss/dev": "^1.3.0",
+    "@pandacss/types": "^1.3.0"
   },
   "devDependencies": {
     "@types/node": "~20.19.11",
     "@pandabox/panda-plugins": "^0.0.8",
     "@pandabox/utils": "^0.0.5",
     "@pandabox/unplugin": "^0.2.2",
+    "@pandacss/dev": "^1.3.0",
+    "@pandacss/types": "^1.3.0",
     "@types/picomatch": "^4.0.2",
     "@types/react": "19.1.12",
     "@types/react-dom": "19.1.9",
     "postcss": "8.5.6",
-    "nano-spawn": "^1.0.2",
+    "nano-spawn": "^1.0.3",
     "unbuild": "3.5.0",
     "typescript": "5.9.2",
-    "@likec4/style-preset": "1.39.4",
-    "@likec4/tsconfig": "1.39.4"
+    "@likec4/style-preset": "1.40.0",
+    "@likec4/tsconfig": "1.40.0"
   },
   "scripts": {
     "typecheck": "tsc --build --verbose",