@likec4/styles 1.41.0 → 1.42.0

package/dist/recipes/element-node-data.d.ts

@@ -3,28 +3,23 @@ import type { ConditionalValue } from '../types/index';
 import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface ElementNodeDataVariant {
-  /**
- * @default false
- */
-hasIcon: boolean
-hasDescription: boolean
-hasTechnology: boolean
+  
 }
 
 type ElementNodeDataVariantMap = {
   [key in keyof ElementNodeDataVariant]: Array<ElementNodeDataVariant[key]>
 }
 
-type ElementNodeDataSlot = "root" | "textContainer" | "title" | "description" | "technology" | "icon"
+
 
 export type ElementNodeDataVariantProps = {
-  [key in keyof ElementNodeDataVariant]?: ElementNodeDataVariant[key] | undefined
+  [key in keyof ElementNodeDataVariant]?: ConditionalValue<ElementNodeDataVariant[key]> | undefined
 }
 
 export interface ElementNodeDataRecipe {
-  __slot: ElementNodeDataSlot
+  
   __type: ElementNodeDataVariantProps
-  (props?: ElementNodeDataVariantProps): Pretty<Record<ElementNodeDataSlot, string>>
+  (props?: ElementNodeDataVariantProps): string
   raw: (props?: ElementNodeDataVariantProps) => ElementNodeDataVariantProps
   variantMap: ElementNodeDataVariantMap
   variantKeys: Array<keyof ElementNodeDataVariant>

package/dist/recipes/element-node-data.mjs

@@ -1,82 +1,24 @@
-import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.mjs';
-import { createRecipe } from './create-recipe.mjs';
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
 
-const elementNodeDataDefaultVariants = {
-  "hasIcon": false
-}
-const elementNodeDataCompoundVariants = [
-  {
-    "hasDescription": true,
-    "hasTechnology": true,
-    "css": {
-      "textContainer": {
-        "gap": "6px"
-      }
-    }
-  }
-]
+const elementNodeDataFn = /* @__PURE__ */ createRecipe('likec4-element-node-data', {}, [])
 
-const elementNodeDataSlotNames = [
-  [
-    "root",
-    "likec4-el-node-data__root"
-  ],
-  [
-    "textContainer",
-    "likec4-el-node-data__textContainer"
-  ],
-  [
-    "title",
-    "likec4-el-node-data__title"
-  ],
-  [
-    "description",
-    "likec4-el-node-data__description"
-  ],
-  [
-    "technology",
-    "likec4-el-node-data__technology"
-  ],
-  [
-    "icon",
-    "likec4-el-node-data__icon"
-  ]
-]
-const elementNodeDataSlotFns = /* @__PURE__ */ elementNodeDataSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, elementNodeDataDefaultVariants, getSlotCompoundVariant(elementNodeDataCompoundVariants, slotName))])
+const elementNodeDataVariantMap = {}
 
-const elementNodeDataFn = memo((props = {}) => {
-  return Object.fromEntries(elementNodeDataSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]))
-})
+const elementNodeDataVariantKeys = Object.keys(elementNodeDataVariantMap)
 
-const elementNodeDataVariantKeys = [
-  "hasIcon",
-  "hasDescription",
-  "hasTechnology"
-]
-const getVariantProps = (variants) => ({ ...elementNodeDataDefaultVariants, ...compact(variants) })
-
-export const elementNodeData = /* @__PURE__ */ Object.assign(elementNodeDataFn, {
-  __recipe__: false,
+export const elementNodeData = /* @__PURE__ */ Object.assign(memo(elementNodeDataFn.recipeFn), {
+  __recipe__: true,
   __name__: 'elementNodeData',
+  __getCompoundVariantCss__: elementNodeDataFn.__getCompoundVariantCss__,
   raw: (props) => props,
-  classNameMap: {},
   variantKeys: elementNodeDataVariantKeys,
-  variantMap: {
-  "hasIcon": [
-    "false",
-    "true"
-  ],
-  "hasDescription": [
-    "false",
-    "true"
-  ],
-  "hasTechnology": [
-    "false",
-    "true"
-  ]
-},
+  variantMap: elementNodeDataVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
   splitVariantProps(props) {
     return splitProps(props, elementNodeDataVariantKeys)
   },
-  getVariantProps
+  getVariantProps: elementNodeDataFn.getVariantProps,
 })

package/dist/recipes/index.d.ts

@@ -2,11 +2,11 @@
 export * from './action-btn';
 export * from './compound-node';
 export * from './edge-action-btn';
-export * from './element-node-icon';
+export * from './element-node-data';
 export * from './element-shape-recipe';
 export * from './likec4tag';
 export * from './markdown-block';
 export * from './navigation-panel-action-icon';
+export * from './overlay';
 export * from './edge-label';
-export * from './element-node-data';
 export * from './navigation-link';

package/dist/recipes/index.mjs

@@ -1,11 +1,11 @@
 export * from './action-btn.mjs';
 export * from './compound-node.mjs';
 export * from './edge-action-btn.mjs';
-export * from './element-node-icon.mjs';
+export * from './element-node-data.mjs';
 export * from './element-shape-recipe.mjs';
 export * from './likec4tag.mjs';
 export * from './markdown-block.mjs';
 export * from './navigation-panel-action-icon.mjs';
+export * from './overlay.mjs';
 export * from './edge-label.mjs';
-export * from './element-node-data.mjs';
 export * from './navigation-link.mjs';

package/dist/recipes/overlay.d.ts

@@ -0,0 +1,40 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface OverlayVariant {
+  /**
+ * @default false
+ */
+fullscreen: boolean
+/**
+ * @default true
+ */
+withBackdrop: boolean
+}
+
+type OverlayVariantMap = {
+  [key in keyof OverlayVariant]: Array<OverlayVariant[key]>
+}
+
+
+
+export type OverlayVariantProps = {
+  [key in keyof OverlayVariant]?: ConditionalValue<OverlayVariant[key]> | undefined
+}
+
+export interface OverlayRecipe {
+  
+  __type: OverlayVariantProps
+  (props?: OverlayVariantProps): string
+  raw: (props?: OverlayVariantProps) => OverlayVariantProps
+  variantMap: OverlayVariantMap
+  variantKeys: Array<keyof OverlayVariant>
+  splitVariantProps<Props extends OverlayVariantProps>(props: Props): [OverlayVariantProps, Pretty<DistributiveOmit<Props, keyof OverlayVariantProps>>]
+  getVariantProps: (props?: OverlayVariantProps) => OverlayVariantProps
+}
+
+/**
+ * Recipe for Overlay Dialog
+ */
+export declare const overlay: OverlayRecipe

package/dist/recipes/overlay.mjs

@@ -0,0 +1,36 @@
+import { memo, splitProps } from '../helpers.mjs';
+import { createRecipe, mergeRecipes } from './create-recipe.mjs';
+
+const overlayFn = /* @__PURE__ */ createRecipe('likec4-overlay', {
+  "fullscreen": false,
+  "withBackdrop": true
+}, [])
+
+const overlayVariantMap = {
+  "fullscreen": [
+    "false",
+    "true"
+  ],
+  "withBackdrop": [
+    "false",
+    "true"
+  ]
+}
+
+const overlayVariantKeys = Object.keys(overlayVariantMap)
+
+export const overlay = /* @__PURE__ */ Object.assign(memo(overlayFn.recipeFn), {
+  __recipe__: true,
+  __name__: 'overlay',
+  __getCompoundVariantCss__: overlayFn.__getCompoundVariantCss__,
+  raw: (props) => props,
+  variantKeys: overlayVariantKeys,
+  variantMap: overlayVariantMap,
+  merge(recipe) {
+    return mergeRecipes(this, recipe)
+  },
+  splitVariantProps(props) {
+    return splitProps(props, overlayVariantKeys)
+  },
+  getVariantProps: overlayFn.getVariantProps,
+})

package/dist/tokens/index.mjs

@@ -9667,6 +9667,18 @@ const tokens = {
     "value": "var(--colors-likec4-panel-border)",
     "variable": "var(--colors-likec4-dropdown-border)"
   },
+  "colors.likec4.overlay.backdrop": {
+    "value": "var(--colors-likec4-overlay-backdrop)",
+    "variable": "var(--colors-likec4-overlay-backdrop)"
+  },
+  "colors.likec4.overlay.body": {
+    "value": "var(--colors-mantine-colors-body)",
+    "variable": "var(--colors-likec4-overlay-body)"
+  },
+  "colors.likec4.overlay.border": {
+    "value": "color-mix(in srgb, var(--colors-mantine-colors-default-border) 50%, transparent)",
+    "variable": "var(--colors-likec4-overlay-border)"
+  },
   "spacing.-0": {
     "value": "calc(var(--spacing-0) * -1)",
     "variable": "var(--spacing-0)"
@@ -11750,6 +11762,22 @@ const tokens = {
   "colors.colorPalette.dropdown.border": {
     "value": "var(--colors-color-palette-dropdown-border)",
     "variable": "var(--colors-color-palette-dropdown-border)"
+  },
+  "colors.colorPalette.overlay.backdrop": {
+    "value": "var(--colors-color-palette-overlay-backdrop)",
+    "variable": "var(--colors-color-palette-overlay-backdrop)"
+  },
+  "colors.colorPalette.backdrop": {
+    "value": "var(--colors-color-palette-backdrop)",
+    "variable": "var(--colors-color-palette-backdrop)"
+  },
+  "colors.colorPalette.overlay.body": {
+    "value": "var(--colors-color-palette-overlay-body)",
+    "variable": "var(--colors-color-palette-overlay-body)"
+  },
+  "colors.colorPalette.overlay.border": {
+    "value": "var(--colors-color-palette-overlay-border)",
+    "variable": "var(--colors-color-palette-overlay-border)"
   }
 }