@bitrix24/b24ui-nuxt 0.7.2 → 1.0.1

package/.nuxt/b24ui/textarea.ts

@@ -1,15 +1,9 @@
 const color = [
-  "default",
-  "danger",
-  "success",
-  "warning",
-  "primary",
-  "secondary",
-  "collab",
-  "ai"
-] as const
-
-const tagColor = [
+  "air-primary",
+  "air-primary-success",
+  "air-primary-alert",
+  "air-primary-copilot",
+  "air-primary-warning",
   "default",
   "danger",
   "success",
@@ -23,14 +17,14 @@ const tagColor = [
 export default {
   "slots": {
     "root": "isolate relative inline-flex items-center w-full",
-    "base": "w-full px-3 py-1.5 border-0 focus:outline-none disabled:cursor-not-allowed disabled:bg-base-30/37 disabled:resize-none disabled:text-base-500 dark:disabled:bg-base-900/37 dark:disabled:text-base-800 appearance-none transition duration-300 ease-linear ring ring-inset ring-base-300 dark:ring-base-800 text-base-master bg-white placeholder:text-base-400 hover:text-base-900 focus:text-base-900 active:text-base-900 dark:text-base-150 dark:bg-transparent dark:placeholder:text-base-300 dark:hover:text-base-350 dark:focus:text-base-350 dark:active:text-base-350 font-b24-primary font-regular text-md leading-normal align-middle",
-    "leading": "absolute start-0 flex items-start inset-y-1.5 px-1.5",
-    "leadingIcon": "shrink-0 text-base-400 inset-y-1.5 size-lg2",
-    "leadingAvatar": "shrink-0",
-    "leadingAvatarSize": "xs",
-    "trailing": "absolute end-0 flex items-start inset-y-1.5 px-1.5",
-    "trailingIcon": "shrink-0 text-base-400 size-lg2",
-    "tag": "pointer-events-none select-none absolute z-10 -top-1.5 right-3 h-sm px-1.5 flex flex-col justify-center items-center font-b24-primary font-bold text-6xs leading-none uppercase rounded-full"
+    "base": "px-3 w-full pt-[7px] pb-[8px] border-0 focus:outline-none disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-30 disabled:resize-none appearance-none transition duration-300 ease-linear ring ring-inset ring-(--ui-color-design-outline-stroke) text-(--ui-color-base-1) style-blurred-bg-input placeholder:text-(--ui-color-design-plain-na-content-secondary) hover:text-(--ui-color-base-1) focus:text-(--ui-color-base-1) active:text-(--ui-color-base-1) font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) text-(length:--ui-font-size-lg)/(--ui-font-line-height-2xs) align-middle focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-(--b24ui-border-color)",
+    "leading": "absolute inset-y-[7px] start-0 flex items-start px-[8px]",
+    "leadingIcon": "shrink-0 size-[18px] text-(--b24ui-icon-color)",
+    "leadingAvatar": "shrink-0 size-[20px]",
+    "leadingAvatarSize": "2xs",
+    "trailing": "absolute inset-y-[8px] end-0 flex items-start px-[6px]",
+    "trailingIcon": "shrink-0 size-[18px] text-(--b24ui-icon-color)",
+    "tag": "pointer-events-none select-none absolute z-10 -top-[6px] right-[12px]"
   },
   "variants": {
     "buttonGroup": {
@@ -52,44 +46,49 @@ export default {
       }
     },
     "color": {
-      "default": "",
-      "danger": "",
-      "success": "",
-      "warning": "",
-      "primary": "",
-      "secondary": "",
-      "collab": "",
-      "ai": ""
-    },
-    "tagColor": {
+      "air-primary": {
+        "base": "style-filled"
+      },
+      "air-primary-success": {
+        "base": "style-filled-success"
+      },
+      "air-primary-alert": {
+        "base": "style-filled-alert"
+      },
+      "air-primary-copilot": {
+        "base": "style-filled-copilot"
+      },
+      "air-primary-warning": {
+        "base": "style-filled-warning"
+      },
       "default": {
-        "tag": "text-white bg-base-900 dark:text-base-150 dark:bg-base-900"
+        "base": "style-old-default"
       },
       "danger": {
-        "tag": "text-white bg-red-500 dark:text-red-250 dark:bg-red-600"
+        "base": "style-old-danger"
       },
       "success": {
-        "tag": "text-white bg-green-500 dark:text-green-250 dark:bg-green-600"
+        "base": "style-old-success"
       },
       "warning": {
-        "tag": "text-white bg-orange-500 dark:text-orange-250 dark:bg-orange-600"
+        "base": "style-old-warning"
       },
       "primary": {
-        "tag": "text-white bg-blue-500 dark:text-blue-250 dark:bg-blue-600"
+        "base": "style-old-primary"
       },
       "secondary": {
-        "tag": "text-white bg-cyan-350 dark:text-base-150 dark:bg-cyan-500"
+        "base": "style-old-secondary"
       },
       "collab": {
-        "tag": "text-white bg-collab-500 dark:text-collab-200 dark:bg-collab-800"
+        "base": "style-old-collab"
       },
       "ai": {
-        "tag": "text-white bg-ai-500 dark:text-ai-200 dark:bg-ai-800"
+        "base": "style-old-ai"
       }
     },
     "rounded": {
-      "true": "rounded-3xl",
-      "false": "rounded-2xs"
+      "true": "rounded-(--ui-border-radius-3xl)",
+      "false": "rounded-(--ui-border-radius-sm)"
     },
     "noPadding": {
       "true": {
@@ -97,10 +96,10 @@ export default {
       }
     },
     "noBorder": {
-      "true": "ring-0 focus-visible:ring-0"
+      "true": "ring-0 focus-visible:ring-0 style-transparent-bg"
     },
     "underline": {
-      "true": "ring-0 focus-visible:ring-0 border-b border-b-base-300 rounded-none"
+      "true": "ring-0 focus-visible:ring-0 style-transparent-bg border-b-1 border-b-(--ui-color-design-outline-stroke) rounded-none"
     },
     "leading": {
       "true": ""
@@ -112,225 +111,41 @@ export default {
       "true": ""
     },
     "highlight": {
-      "true": ""
+      "true": "ring ring-inset ring-(--b24ui-border-color)"
     }
   },
   "compoundVariants": [
     {
-      "color": "default" as typeof color[number],
-      "noBorder": false,
-      "underline": false,
-      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-base-900 dark:focus-visible:ring-base-350"
-    },
-    {
-      "color": "default" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": false,
-      "class": "ring ring-inset ring-base-900 dark:ring-base-350"
-    },
-    {
-      "color": "default" as typeof color[number],
-      "noBorder": false,
-      "underline": true,
-      "class": "focus-visible:border-base-900 dark:focus-visible:border-b-base-350"
-    },
-    {
-      "color": "default" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": true,
-      "class": "border-b-base-900 dark:border-b-base-350"
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "noBorder": false,
-      "underline": false,
-      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-red-500 dark:focus-visible:ring-red-600"
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": false,
-      "class": "ring ring-inset ring-red-500 dark:ring-red-600"
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "noBorder": false,
-      "underline": true,
-      "class": "focus-visible:border-b-red-500 dark:focus-visible:border-b-red-600"
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": true,
-      "class": "border-b-red-500 dark:border-b-red-600"
-    },
-    {
-      "color": "success" as typeof color[number],
-      "noBorder": false,
-      "underline": false,
-      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-green-500 dark:focus-visible:ring-green-600"
-    },
-    {
-      "color": "success" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": false,
-      "class": "ring ring-inset ring-green-500 dark:ring-green-600"
-    },
-    {
-      "color": "success" as typeof color[number],
-      "noBorder": false,
-      "underline": true,
-      "class": "focus-visible:border-b-green-500 dark:focus-visible:border-b-green-600"
-    },
-    {
-      "color": "success" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": true,
-      "class": "border-b-green-500 dark:border-b-green-600"
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "noBorder": false,
-      "underline": false,
-      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-orange-500 dark:focus-visible:ring-orange-600"
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": false,
-      "class": "ring ring-inset ring-orange-500 dark:ring-orange-600"
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "noBorder": false,
-      "underline": true,
-      "class": "focus-visible:border-b-orange-500 dark:focus-visible:border-b-orange-600"
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": true,
-      "class": "border-b-orange-500 dark:border-b-orange-600"
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "noBorder": false,
-      "underline": false,
-      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-blue-500 dark:focus-visible:ring-blue-600"
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": false,
-      "class": "ring ring-inset ring-blue-500 dark:ring-blue-600"
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "noBorder": false,
-      "underline": true,
-      "class": "focus-visible:border-b-blue-500 dark:focus-visible:border-b-blue-600"
-    },
-    {
-      "color": "primary" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": true,
-      "class": "border-b-blue-500 dark:border-b-blue-600"
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "noBorder": false,
-      "underline": false,
-      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-cyan-350 dark:focus-visible:ring-cyan-500"
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": false,
-      "class": "ring ring-inset ring-cyan-350 dark:ring-cyan-500"
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "noBorder": false,
-      "underline": true,
-      "class": "focus-visible:border-b-cyan-350 dark:focus-visible:border-b-cyan-500"
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": true,
-      "class": "border-b-cyan-350 dark:border-b-cyan-500"
-    },
-    {
-      "color": "collab" as typeof color[number],
-      "noBorder": false,
-      "underline": false,
-      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-collab-500 dark:focus-visible:ring-collab-600"
-    },
-    {
-      "color": "collab" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": false,
-      "class": "ring ring-inset ring-collab-500 dark:ring-collab-600"
-    },
-    {
-      "color": "collab" as typeof color[number],
-      "noBorder": false,
-      "underline": true,
-      "class": "focus-visible:border-b-collab-500 dark:focus-visible:border-b-collab-600"
-    },
-    {
-      "color": "collab" as typeof color[number],
-      "highlight": true,
-      "noBorder": false,
-      "underline": true,
-      "class": "border-b-collab-500 dark:border-b-collab-600"
-    },
-    {
-      "color": "ai" as typeof color[number],
       "noBorder": false,
       "underline": false,
-      "class": "focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-ai-500 dark:focus-visible:ring-ai-600"
+      "class": ""
     },
     {
-      "color": "ai" as typeof color[number],
       "highlight": true,
       "noBorder": false,
       "underline": false,
-      "class": "ring ring-inset ring-ai-500 dark:ring-ai-600"
+      "class": "ring ring-inset ring-(--b24ui-border-color)"
     },
     {
-      "color": "ai" as typeof color[number],
       "noBorder": false,
       "underline": true,
-      "class": "focus-visible:border-b-ai-500 dark:focus-visible:border-b-ai-600"
+      "class": "focus-visible:border-(--b24ui-border-color)"
     },
     {
-      "color": "ai" as typeof color[number],
       "highlight": true,
       "noBorder": false,
       "underline": true,
-      "class": "border-b-ai-500 dark:border-b-ai-600"
+      "class": "border-b-(--b24ui-border-color)"
     },
     {
       "leading": true,
-      "class": "ps-8"
+      "noPadding": false,
+      "class": "ps-[34px]"
     },
     {
       "trailing": true,
-      "class": "pe-8"
+      "noPadding": false,
+      "class": "pe-[34px]"
     },
     {
       "loading": true,
@@ -349,7 +164,6 @@ export default {
     }
   ],
   "defaultVariants": {
-    "color": "primary" as typeof color[number],
-    "tagColor": "primary" as typeof tagColor[number]
+    "color": "air-primary" as typeof color[number]
   }
 }

package/.nuxt/b24ui/toast.ts

@@ -1,4 +1,10 @@
 const color = [
+  "air-primary",
+  "air-primary-success",
+  "air-primary-alert",
+  "air-primary-copilot",
+  "air-primary-warning",
+  "air-secondary",
   "default",
   "danger",
   "success",
@@ -11,58 +17,60 @@ const color = [
 
 export default {
   "slots": {
-    "root": "relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex items-center gap-2.5 focus:outline-none font-b24-primary dark:ring-2 dark:ring-base-900 bg-base-ebony/80 dark:bg-base-dark text-sm font-normal text-white dark:text-base-150",
+    "root": "dark relative group overflow-hidden rounded-[26px] py-3.5 ps-6 pe-4 flex items-center gap-2.5 focus-visible:outline-(length:--ui-design-outline-stroke-weight) focus-visible:outline-offset-2 focus-visible:outline-(--ui-color-design-outline-content-divider) font-[family-name:var(--ui-font-family-primary)] bg-(--ui-color-bg-content-primary)/80 text-(--ui-color-design-plain-na-focused-content) text-(length:--ui-font-size-sm) font-(--ui-font-weight-normal)",
     "wrapper": "w-0 flex-1 flex flex-col",
-    "title": "font-medium",
+    "title": "font-(--ui-font-weight-medium)",
     "description": "",
-    "icon": "shrink-0 size-6",
+    "icon": "shrink-0 size-6 text-(--b24ui-border-color)",
     "avatar": "shrink-0",
     "avatarSize": "xl",
     "actions": "flex gap-1.5 shrink-0",
-    "progress": "absolute inset-x-0 bottom-0 h-1 z-[-1]",
-    "close": "p-0 text-base-350 dark:text-base-350 hover:text-base-400 dark:hover:text-base-400"
+    "progress": "absolute inset-x-0 bottom-0",
+    "close": "p-0"
   },
   "variants": {
     "color": {
+      "air-primary": {
+        "root": "style-filled"
+      },
+      "air-primary-success": {
+        "root": "style-filled-success"
+      },
+      "air-primary-alert": {
+        "root": "style-filled-alert"
+      },
+      "air-primary-copilot": {
+        "root": "style-filled-copilot"
+      },
+      "air-primary-warning": {
+        "root": "style-filled-warning"
+      },
+      "air-secondary": {
+        "root": "style-filled-inverted"
+      },
       "default": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-base-400 dark:focus-visible:ring-base-400",
-        "icon": "text-white",
-        "progress": "bg-base-350 dark:bg-base-350"
+        "root": "old-style-default"
       },
       "danger": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-red-400 dark:focus-visible:ring-red-400",
-        "icon": "text-red-500",
-        "progress": "bg-red-500 dark:bg-red-500"
+        "root": "old-style-danger"
       },
       "success": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-green-400 dark:focus-visible:ring-green-400",
-        "icon": "text-green-500",
-        "progress": "bg-green-500 dark:bg-green-500"
+        "root": "old-style-success"
       },
       "warning": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-orange-400 dark:focus-visible:ring-orange-400",
-        "icon": "text-orange-500",
-        "progress": "bg-orange-500 dark:bg-orange-500"
+        "root": "old-style-warning"
       },
       "primary": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-blue-400 dark:focus-visible:ring-blue-400",
-        "icon": "text-blue-500",
-        "progress": "bg-blue-500 dark:bg-blue-500"
+        "root": "old-style-primary"
       },
       "secondary": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-cyan-400 dark:focus-visible:ring-cyan-400",
-        "icon": "text-cyan-500",
-        "progress": "bg-cyan-500 dark:bg-cyan-500"
+        "root": "old-style-secondary"
       },
       "collab": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-collab-400 dark:focus-visible:ring-collab-400",
-        "icon": "text-collab-500",
-        "progress": "bg-collab-500 dark:bg-collab-500"
+        "root": "old-style-collab"
       },
       "ai": {
-        "root": "focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ai-400 dark:focus-visible:ring-ai-400",
-        "icon": "text-ai-500",
-        "progress": "bg-ai-500 dark:bg-ai-500"
+        "root": "old-style-ai"
       }
     },
     "orientation": {
@@ -82,6 +90,6 @@ export default {
     }
   },
   "defaultVariants": {
-    "color": "default" as typeof color[number]
+    "color": "air-secondary" as typeof color[number]
   }
 }

package/.nuxt/b24ui/toaster.ts

@@ -16,7 +16,7 @@ const swipeDirection = [
 
 export default {
   "slots": {
-    "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-96 z-[100] data-[expanded=true]:h-(--height) focus:outline-none mr-(--scrollbar-width)",
+    "viewport": "fixed flex flex-col w-[calc(100%-2rem)] sm:w-[384px] z-[100] data-[expanded=true]:h-(--height) focus:outline-none mr-(--scrollbar-width)",
     "base": "pointer-events-auto absolute inset-x-0 z-(--index) transform-(--transform) data-[expanded=false]:data-[front=false]:h-(--front-height) data-[expanded=false]:data-[front=false]:*:opacity-0 data-[front=false]:*:transition-opacity data-[front=false]:*:duration-100 data-[state=closed]:animate-[toast-closed_200ms_ease-in-out] data-[state=closed]:data-[expanded=false]:data-[front=false]:animate-[toast-collapsed-closed_200ms_ease-in-out] data-[swipe=move]:transition-none transition-[transform,translate,height] duration-200 ease-out"
   },
   "variants": {

package/.nuxt/b24ui/tooltip.ts

@@ -1,10 +1,10 @@
 export default {
   "slots": {
-    "content": "flex items-center gap-1 shadow-sm rounded-2xs select-none data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] min-h-6 px-2.5 py-1 text-xs bg-base-dark text-white dark:bg-base-dark dark:text-base-150 dark:ring dark:ring-base-100/20 origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
-    "arrow": "fill-base-dark dark:fill-base-100/20",
-    "text": "text-pretty max-w-[200px]",
-    "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 before:content-[''] before:me-0.5",
+    "content": "dark flex flex-row items-center justify-between gap-[5px] will-change-[opacity] min-h-[37px] shadow-xl/20 select-none motion-safe:data-[state=delayed-open]:animate-[scale-in_100ms_ease-out] motion-safe:data-[state=closed]:animate-[scale-out_100ms_ease-in] p-[10px] text-(length:--ui-font-size-sm)/(--ui-font-line-height-reset) font-[family-name:var(--ui-font-family-primary)] bg-(--ui-color-bg-content-primary)/80 text-(--ui-color-design-plain-na-focused-content) rounded-[calc(var(--popup-window-border-radius)-2px)] origin-(--reka-tooltip-content-transform-origin) pointer-events-auto",
+    "arrow": "fill-(--ui-color-bg-content-primary)/80",
+    "text": "text-pretty max-w-[200px] min-w-[100px]",
+    "kbds": "hidden lg:inline-flex items-center shrink-0 gap-0.5 not-first-of-type:before:content-[''] not-first-of-type:before:me-0.5",
     "kbdsSize": "sm",
-    "kbdsDepth": "normal"
+    "kbdsAccent": "default"
   }
 }

package/cli/templates.mjs

@@ -156,7 +156,8 @@ const test = ({ name, prose, content }) => {
       ? undefined
       : `
 import { describe, it, expect } from 'vitest'
-import ${upperName}, { type ${upperName}Props, type ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
+import ${upperName} from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
+import type { ${upperName}Props, ${upperName}Slots } from '../../${content ? '../' : ''}src/runtime/components/${content ? 'content/' : ''}${upperName}.vue'
 import ComponentRender from '../${content ? '../' : ''}component-render'
 
 describe('${upperName}', () => {