@bitrix24/b24ui-nuxt 0.7.2 → 1.0.1

package/.nuxt/b24ui/radio-group.ts

@@ -1,4 +1,9 @@
 const color = [
+  "air-primary",
+  "air-primary-success",
+  "air-primary-alert",
+  "air-primary-copilot",
+  "air-primary-warning",
   "default",
   "danger",
   "success",
@@ -37,63 +42,70 @@ export default {
   "slots": {
     "root": "relative",
     "fieldset": "flex",
-    "legend": "mb-1.5 block text-base-900 dark:text-base-400",
+    "legend": "mb-1.5 block text-(--b24ui-typography-label-color)",
     "item": "flex items-start",
-    "base": "cursor-pointer rounded-full ring ring-inset ring-base-300 dark:ring-base-700 outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2",
-    "indicator": " flex items-center justify-center size-full rounded-full after:bg-white dark:after:bg-base-dark after:rounded-full" as typeof indicator[number],
+    "base": "cursor-pointer rounded-(--ui-border-radius-pill) ring ring-inset ring-(--ui-color-base-5) outline-(--ui-color-background-transparent) focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-(--b24ui-background)",
+    "indicator": "flex items-center justify-center size-full rounded-(--ui-border-radius-pill) after:bg-(--b24ui-color) after:rounded-(--ui-border-radius-pill) bg-(--b24ui-background)" as typeof indicator[number],
     "container": "flex items-center",
-    "wrapper": "font-b24-primary font-regular w-full",
-    "label": "cursor-pointer block text-base-master dark:text-base-400",
-    "description": "text-base-500 dark:text-base-600"
+    "wrapper": "font-[family-name:var(--ui-font-family-primary)] font-(--ui-font-weight-regular) w-full",
+    "label": "cursor-pointer block text-(--b24ui-typography-label-color)",
+    "description": "text-(--b24ui-typography-description-color)"
   },
   "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"
+      },
       "default": {
-        "base": "focus-visible:outline-base-900 dark:focus-visible:outline-base-900",
-        "indicator": "bg-base-900 dark:bg-base-350" as typeof indicator[number]
+        "root": "style-old-default"
       },
       "danger": {
-        "base": "focus-visible:outline-red-500 dark:focus-visible:outline-red-600",
-        "indicator": "bg-red-500 dark:bg-red-600" as typeof indicator[number]
+        "root": "style-old-danger"
       },
       "success": {
-        "base": "focus-visible:outline-green-500 dark:focus-visible:outline-green-600",
-        "indicator": "bg-green-500 dark:bg-green-600" as typeof indicator[number]
+        "root": "style-old-success"
       },
       "warning": {
-        "base": "focus-visible:outline-orange-500 dark:focus-visible:outline-orange-600",
-        "indicator": "bg-orange-500 dark:bg-orange-600" as typeof indicator[number]
+        "root": "style-old-warning"
       },
       "primary": {
-        "base": "focus-visible:outline-blue-500 dark:focus-visible:outline-blue-600",
-        "indicator": "bg-blue-500 dark:bg-blue-600" as typeof indicator[number]
+        "root": "style-old-primary"
       },
       "secondary": {
-        "base": "focus-visible:outline-cyan-350 dark:focus-visible:outline-cyan-500",
-        "indicator": "bg-cyan-350 dark:bg-cyan-500" as typeof indicator[number]
+        "root": "style-old-secondary"
       },
       "collab": {
-        "base": "focus-visible:outline-collab-500 dark:focus-visible:outline-collab-600",
-        "indicator": "bg-collab-500 dark:bg-collab-600" as typeof indicator[number]
+        "root": "style-old-collab"
       },
       "ai": {
-        "base": "focus-visible:outline-ai-500 dark:focus-visible:outline-ai-600",
-        "indicator": "bg-ai-500 dark:bg-ai-600" as typeof indicator[number]
+        "root": "style-old-ai"
       }
     },
     "variant": {
       "list": {},
       "card": {
-        "item": "items-center border border-base-200 dark:border-base-700 rounded-lg"
+        "item": "cursor-pointer items-start border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:border-(--b24ui-border-color)"
       },
       "table": {
-        "item": "border border-base-200 dark:border-base-900"
+        "item": "cursor-pointer border border-(--ui-color-design-outline-na-stroke) bg-(--ui-color-design-outline-na-bg) has-data-[state=checked]:bg-(--b24ui-background)/24 has-data-[state=checked]:border-(--b24ui-border-color) has-data-[state=checked]:text-(--b24ui-color) has-data-[state=checked]:z-[1]"
       }
     },
     "orientation": {
       "horizontal": {
         "fieldset": "flex-row",
-        "wrapper": "me-2"
+        "root": "me-2"
       },
       "vertical": {
         "fieldset": "flex-col"
@@ -115,227 +127,175 @@ export default {
     },
     "size": {
       "xs": {
-        "fieldset": "gap-1",
-        "legend": "text-xs",
-        "base": "size-3",
-        "item": "text-xs",
-        "label": "leading-4",
-        "container": "h-4",
-        "indicator": "after:size-1" as typeof indicator[number]
+        "fieldset": "gap-x-[12px] gap-y-[4px]",
+        "legend": "text-(length:--ui-font-size-xs)",
+        "base": "size-[12px]",
+        "item": "text-(length:--ui-font-size-xs)",
+        "label": "leading-[11px]",
+        "container": "h-[12px]",
+        "indicator": "after:size-[4px]" as typeof indicator[number]
       },
       "sm": {
-        "fieldset": "gap-1.5",
-        "legend": "text-xs",
-        "base": "size-3.5",
-        "item": "text-sm",
-        "label": "leading-4",
-        "container": "h-4",
-        "indicator": "after:size-1" as typeof indicator[number]
+        "fieldset": "gap-x-[14px] gap-y-[6px]",
+        "legend": "text-(length:--ui-font-size-xs)",
+        "base": "size-[14px]",
+        "item": "text-(length:--ui-font-size-sm)",
+        "label": "leading-[14px]",
+        "container": "h-[14px]",
+        "indicator": "after:size-[6px]" as typeof indicator[number]
       },
       "md": {
-        "fieldset": "gap-1",
-        "legend": "text-sm",
-        "base": "size-4",
-        "item": "text-md",
-        "label": "leading-5",
-        "container": "h-5",
-        "indicator": "after:size-1.5" as typeof indicator[number]
+        "fieldset": "gap-x-[16px] gap-y-[8px]",
+        "legend": "text-(length:--ui-font-size-sm)",
+        "base": "size-[16px]",
+        "item": "text-(length:--ui-font-size-lg)",
+        "label": "leading-[15px]",
+        "container": "h-[16px]",
+        "indicator": "after:size-[6px]" as typeof indicator[number]
       },
       "lg": {
-        "fieldset": "gap-1.5",
-        "legend": "text-sm",
-        "base": "size-5",
-        "item": "text-xl",
-        "label": "leading-5",
-        "container": "h-5",
-        "indicator": "after:size-2" as typeof indicator[number]
+        "fieldset": "gap-x-[16px] gap-y-[8px]",
+        "legend": "text-(length:--ui-font-size-sm)",
+        "base": "size-[20px]",
+        "item": "text-(length:--ui-font-size-xl)",
+        "label": "leading-[18px]",
+        "container": "h-[20px]",
+        "indicator": "after:size-[8px]" as typeof indicator[number]
       }
     },
     "disabled": {
       "true": {
-        "base": "cursor-not-allowed opacity-75",
-        "label": "cursor-not-allowed opacity-75"
+        "base": "cursor-not-allowed opacity-30",
+        "label": "cursor-not-allowed opacity-30"
       }
     },
     "required": {
       "true": {
-        "label": "after:content-['*'] after:ms-0.5 after:text-red-500 dark:after:text-red-600"
+        "label": "after:content-['*'] after:ms-0.5 after:text-(--ui-color-accent-main-alert)"
       }
     }
   },
   "compoundVariants": [
     {
       "size": "xs" as typeof size[number],
-      "variant": [
-        "card" as typeof variant[number],
-        "table" as typeof variant[number]
-      ],
+      "variant": "card" as typeof variant[number],
       "class": {
-        "item": "p-2.5"
+        "item": "px-[13px] py-[7px] rounded-(--ui-border-radius-xs)"
       }
     },
     {
       "size": "sm" as typeof size[number],
-      "variant": [
-        "card" as typeof variant[number],
-        "table" as typeof variant[number]
-      ],
+      "variant": "card" as typeof variant[number],
       "class": {
-        "item": "p-3"
+        "item": "px-[13px] py-[9px] rounded-(--ui-border-radius-sm)"
       }
     },
     {
       "size": "md" as typeof size[number],
-      "variant": [
-        "card" as typeof variant[number],
-        "table" as typeof variant[number]
-      ],
+      "variant": "card" as typeof variant[number],
       "class": {
-        "item": "p-3.5"
+        "item": "px-[17px] py-[10px] rounded-(--ui-border-radius-md)"
       }
     },
     {
       "size": "lg" as typeof size[number],
-      "variant": [
-        "card" as typeof variant[number],
-        "table" as typeof variant[number]
-      ],
+      "variant": "card" as typeof variant[number],
       "class": {
-        "item": "p-4"
+        "item": "px-[23px] py-[12px] rounded-(--ui-border-radius-md)"
       }
     },
     {
-      "orientation": "horizontal" as typeof orientation[number],
+      "size": "xs" as typeof size[number],
       "variant": "table" as typeof variant[number],
       "class": {
-        "item": "first-of-type:rounded-s-lg last-of-type:rounded-e-lg",
-        "fieldset": "gap-0 -space-x-px"
+        "item": "px-[13px] py-[7px]"
       }
     },
     {
-      "orientation": "vertical" as typeof orientation[number],
+      "size": "sm" as typeof size[number],
       "variant": "table" as typeof variant[number],
       "class": {
-        "item": "first-of-type:rounded-t-lg last-of-type:rounded-b-lg",
-        "fieldset": "gap-0 -space-y-px"
-      }
-    },
-    {
-      "color": "default" as typeof color[number],
-      "variant": "card" as typeof variant[number],
-      "class": {
-        "item": "has-data-[state=checked]:border-base-900 dark:has-data-[state=checked]:border-base-350"
-      }
-    },
-    {
-      "color": "danger" as typeof color[number],
-      "variant": "card" as typeof variant[number],
-      "class": {
-        "item": "has-data-[state=checked]:border-red-500 dark:has-data-[state=checked]:border-red-600"
-      }
-    },
-    {
-      "color": "success" as typeof color[number],
-      "variant": "card" as typeof variant[number],
-      "class": {
-        "item": "has-data-[state=checked]:border-green-500 dark:has-data-[state=checked]:border-green-600"
-      }
-    },
-    {
-      "color": "warning" as typeof color[number],
-      "variant": "card" as typeof variant[number],
-      "class": {
-        "item": "has-data-[state=checked]:border-orange-500 dark:has-data-[state=checked]:border-orange-600"
+        "item": "px-[13px] py-[9px]"
       }
     },
     {
-      "color": "primary" as typeof color[number],
-      "variant": "card" as typeof variant[number],
-      "class": {
-        "item": "has-data-[state=checked]:border-blue-500 dark:has-data-[state=checked]:border-blue-600"
-      }
-    },
-    {
-      "color": "secondary" as typeof color[number],
-      "variant": "card" as typeof variant[number],
-      "class": {
-        "item": "has-data-[state=checked]:border-cyan-500 dark:has-data-[state=checked]:border-cyan-600"
-      }
-    },
-    {
-      "color": "collab" as typeof color[number],
-      "variant": "card" as typeof variant[number],
-      "class": {
-        "item": "has-data-[state=checked]:border-collab-500 dark:has-data-[state=checked]:border-collab-600"
-      }
-    },
-    {
-      "color": "ai" as typeof color[number],
-      "variant": "card" as typeof variant[number],
-      "class": {
-        "item": "has-data-[state=checked]:border-ai-500 dark:has-data-[state=checked]:border-ai-600"
-      }
-    },
-    {
-      "color": "default" as typeof color[number],
+      "size": "md" as typeof size[number],
       "variant": "table" as typeof variant[number],
       "class": {
-        "item": "has-data-[state=checked]:bg-base-100 dark:has-data-[state=checked]:bg-base-900 has-data-[state=checked]:border-base-900/25 dark:has-data-[state=checked]:border-base-700/25 has-data-[state=checked]:z-[1]"
+        "item": "px-[17px] py-[10px]"
       }
     },
     {
-      "color": "danger" as typeof color[number],
+      "size": "lg" as typeof size[number],
       "variant": "table" as typeof variant[number],
       "class": {
-        "item": "has-data-[state=checked]:bg-red-500/24 dark:has-data-[state=checked]:bg-red-600/24 has-data-[state=checked]:border-red-500 dark:has-data-[state=checked]:border-red-600 has-data-[state=checked]:z-[1]"
+        "item": "px-[23px] py-[12px]"
       }
     },
     {
-      "color": "success" as typeof color[number],
+      "size": "xs" as typeof size[number],
       "variant": "table" as typeof variant[number],
+      "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "item": "has-data-[state=checked]:bg-green-500/24 dark:has-data-[state=checked]:bg-green-600/24 has-data-[state=checked]:border-green-500 dark:has-data-[state=checked]:border-green-600 has-data-[state=checked]:z-[1]"
+        "item": "first-of-type:rounded-s-(--ui-border-radius-xs) last-of-type:rounded-e-(--ui-border-radius-xs)",
+        "fieldset": "gap-0 -space-x-px"
       }
     },
     {
-      "color": "warning" as typeof color[number],
+      "size": "xs" as typeof size[number],
       "variant": "table" as typeof variant[number],
+      "orientation": "vertical" as typeof orientation[number],
       "class": {
-        "item": "has-data-[state=checked]:bg-orange-500/24 dark:has-data-[state=checked]:bg-orange-600/24 has-data-[state=checked]:border-orange-500 dark:has-data-[state=checked]:border-orange-600 has-data-[state=checked]:z-[1]"
+        "item": "first-of-type:rounded-t-(--ui-border-radius-xs) last-of-type:rounded-b-(--ui-border-radius-xs)",
+        "fieldset": "gap-0 -space-y-px"
       }
     },
     {
-      "color": "primary" as typeof color[number],
+      "size": "sm" as typeof size[number],
       "variant": "table" as typeof variant[number],
+      "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "item": "has-data-[state=checked]:bg-blue-500/24 dark:has-data-[state=checked]:bg-blue-600/24 has-data-[state=checked]:border-blue-500 dark:has-data-[state=checked]:border-blue-600 has-data-[state=checked]:z-[1]"
+        "item": "first-of-type:rounded-s-(--ui-border-radius-sm) last-of-type:rounded-e-(--ui-border-radius-sm)",
+        "fieldset": "gap-0 -space-x-px"
       }
     },
     {
-      "color": "secondary" as typeof color[number],
+      "size": "sm" as typeof size[number],
       "variant": "table" as typeof variant[number],
+      "orientation": "vertical" as typeof orientation[number],
       "class": {
-        "item": "has-data-[state=checked]:bg-cyan-500/24 dark:has-data-[state=checked]:bg-cyan-600/24 has-data-[state=checked]:border-cyan-500 dark:has-data-[state=checked]:border-cyan-600 has-data-[state=checked]:z-[1]"
+        "item": "first-of-type:rounded-t-(--ui-border-radius-sm) last-of-type:rounded-b-(--ui-border-radius-sm)",
+        "fieldset": "gap-0 -space-y-px"
       }
     },
     {
-      "color": "collab" as typeof color[number],
+      "size": [
+        "lg" as typeof size[number],
+        "md" as typeof size[number]
+      ],
       "variant": "table" as typeof variant[number],
+      "orientation": "horizontal" as typeof orientation[number],
       "class": {
-        "item": "has-data-[state=checked]:bg-collab-500/24 dark:has-data-[state=checked]:bg-collab-600/24 has-data-[state=checked]:border-collab-500 dark:has-data-[state=checked]:border-collab-600 has-data-[state=checked]:z-[1]"
+        "item": "first-of-type:rounded-s-(--ui-border-radius-md) last-of-type:rounded-e-(--ui-border-radius-md)",
+        "fieldset": "gap-0 -space-x-px"
       }
     },
     {
-      "color": "ai" as typeof color[number],
+      "size": [
+        "lg" as typeof size[number],
+        "md" as typeof size[number]
+      ],
       "variant": "table" as typeof variant[number],
+      "orientation": "vertical" as typeof orientation[number],
       "class": {
-        "item": "has-data-[state=checked]:bg-ai-500/24 dark:has-data-[state=checked]:bg-ai-600/24 has-data-[state=checked]:border-ai-500 dark:has-data-[state=checked]:border-ai-600 has-data-[state=checked]:z-[1]"
+        "item": "first-of-type:rounded-t-(--ui-border-radius-md) last-of-type:rounded-b-(--ui-border-radius-md)",
+        "fieldset": "gap-0 -space-y-px"
       }
     }
   ],
   "defaultVariants": {
+    "color": "air-primary" as typeof color[number],
     "size": "md" as typeof size[number],
-    "color": "primary" as typeof color[number],
     "variant": "list" as typeof variant[number],
     "orientation": "vertical" as typeof orientation[number],
     "indicator": "start" as typeof indicator[number]

package/.nuxt/b24ui/range.ts

@@ -1,4 +1,9 @@
 const color = [
+  "air-primary",
+  "air-primary-success",
+  "air-primary-alert",
+  "air-primary-copilot",
+  "air-primary-warning",
   "default",
   "danger",
   "success",
@@ -24,57 +29,64 @@ const orientation = [
 export default {
   "slots": {
     "root": "relative flex items-center select-none touch-none",
-    "track": "relative bg-base-200 dark:bg-base-800 overflow-hidden rounded-full grow",
-    "range": "absolute rounded-full",
-    "thumb": "rounded-full bg-white dark:bg-base-100 ring-2 outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2"
+    "track": "relative rounded-(--ui-border-radius-pill) bg-(--ui-color-base-5) grow overflow-hidden",
+    "range": "absolute rounded-(--ui-border-radius-pill) bg-(--b24ui-background)",
+    "thumb": "rounded-(--ui-border-radius-pill) bg-(--ui-color-base-white-fixed) ring-2 outline-transparent focus-visible:outline-2 focus-visible:outline-offset-2 ring-(--b24ui-background) focus-visible:outline-(--b24ui-background-hover)"
   },
   "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"
+      },
       "default": {
-        "range": "bg-base-900 dark:bg-base-350",
-        "thumb": "ring-base-900 dark:ring-base-400 focus-visible:outline-base-900/50 dark:focus-visible:outline-base-700/50"
+        "root": "style-old-default"
       },
       "danger": {
-        "range": "bg-red-500 dark:bg-red-600",
-        "thumb": "ring-red-500 dark:ring-red-600 focus-visible:outline-red-500/50 dark:focus-visible:outline-red-600/50"
+        "root": "style-old-danger"
       },
       "success": {
-        "range": "bg-green-500 dark:bg-green-600",
-        "thumb": "ring-green-500 dark:ring-green-600 focus-visible:outline-green-500/50 dark:focus-visible:outline-green-600/50"
+        "root": "style-old-success"
       },
       "warning": {
-        "range": "bg-orange-500 dark:bg-orange-600",
-        "thumb": "ring-orange-500 dark:ring-orange-600 focus-visible:outline-orange-500/50 dark:focus-visible:outline-orange-600/50"
+        "root": "style-old-warning"
       },
       "primary": {
-        "range": "bg-blue-500 dark:bg-blue-600",
-        "thumb": "ring-blue-500 dark:ring-blue-600 focus-visible:outline-blue-500/50 dark:focus-visible:outline-blue-600/50"
+        "root": "style-old-primary"
       },
       "secondary": {
-        "range": "bg-cyan-350 dark:bg-cyan-500",
-        "thumb": "ring-cyan-350 dark:ring-cyan-500 focus-visible:outline-cyan-350/50 dark:focus-visible:outline-cyan-500/50"
+        "root": "style-old-secondary"
       },
       "collab": {
-        "range": "bg-collab-500 dark:bg-collab-600",
-        "thumb": "ring-collab-500 dark:ring-collab-600 focus-visible:outline-collab-500/50 dark:focus-visible:outline-collab-600/50"
+        "root": "style-old-collab"
       },
       "ai": {
-        "range": "bg-ai-500 dark:bg-ai-600",
-        "thumb": "ring-ai-500 dark:ring-ai-600 focus-visible:outline-ai-500/50 dark:focus-visible:outline-ai-600/50"
+        "root": "style-old-ai"
       }
     },
     "size": {
       "xs": {
-        "thumb": "size-3"
+        "thumb": "size-[12px]"
       },
       "sm": {
-        "thumb": "size-3.5"
+        "thumb": "size-[14px]"
       },
       "md": {
-        "thumb": "size-4"
+        "thumb": "size-[16px]"
       },
       "lg": {
-        "thumb": "size-5"
+        "thumb": "size-[20px]"
       }
     },
     "orientation": {
@@ -89,7 +101,7 @@ export default {
     },
     "disabled": {
       "true": {
-        "root": "opacity-75 cursor-not-allowed"
+        "root": "opacity-30 cursor-not-allowed"
       }
     }
   },
@@ -166,7 +178,7 @@ export default {
     }
   ],
   "defaultVariants": {
-    "size": "md" as typeof size[number],
-    "color": "primary" as typeof color[number]
+    "color": "air-primary" as typeof color[number],
+    "size": "md" as typeof size[number]
   }
 }