@bitrix24/b24ui-nuxt 0.3.2 → 0.3.4

package/.nuxt/b24ui/container.ts

@@ -1,3 +1,3 @@
 export default {
-  "base": "max-w-[80rem] mx-auto px-4 sm:px-6 lg:px-8"
+  "base": "max-w-[80rem] mx-auto px-5"
 }

package/.nuxt/b24ui/index.ts

@@ -25,6 +25,7 @@ export { default as select } from './select'
 export { default as selectMenu } from './select-menu'
 export { default as separator } from './separator'
 export { default as skeleton } from './skeleton'
+export { default as slideover } from './slideover'
 export { default as switch } from './switch'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'

package/.nuxt/b24ui/slideover.ts

@@ -0,0 +1,101 @@
+const side = [
+  "top",
+  "right",
+  "bottom",
+  "left"
+] as const
+
+export default {
+  "slots": {
+    "overlay": "fixed inset-0 bg-base-950/20 dark:bg-base-950/30",
+    "content": "fixed bg-base-50 dark:bg-base-950 sm:shadow-lg flex flex-col focus:outline-none",
+    "header": "mt-4 px-5 flex items-center gap-1.5",
+    "wrapper": "min-h-2xl",
+    "body": "mx-0 mt-2 flex-1 overflow-y-auto",
+    "footer": "bg-white dark:bg-base-950 flex items-center justify-center gap-3 py-4 border-t border-t-1 border-t-base-900/10 dark:border-t-white/20 shadow-top-md p-2 pr-(--scrollbar-width)",
+    "title": "font-b24-system font-light text-4.5xl leading-none text-base-900 dark:text-base-150",
+    "description": "mt-2 mb-1 text-base-500 dark:text-base-400 text-sm",
+    "close": "absolute"
+  },
+  "variants": {
+    "side": {
+      "top": {
+        "content": "inset-x-0 top-0 max-h-full"
+      },
+      "right": {
+        "content": "right-0 inset-y-0 w-full max-w-[28rem]"
+      },
+      "bottom": {
+        "content": "inset-x-0 bottom-0 max-h-full"
+      },
+      "left": {
+        "content": "left-0 inset-y-0 w-full max-w-[28rem]"
+      }
+    },
+    "transition": {
+      "true": {
+        "overlay": "data-[state=open]:animate-[fade-in_200ms_ease-out] data-[state=closed]:animate-[fade-out_200ms_ease-in]"
+      }
+    },
+    "scrollbarThin": {
+      "true": {
+        "body": "scrollbar-thin"
+      }
+    }
+  },
+  "compoundVariants": [
+    {
+      "side": "right" as typeof side[number],
+      "class": {
+        "close": "pl-1.5 pr-2.5 top-3 -translate-x-full left-0 rounded-l-full"
+      }
+    },
+    {
+      "side": "left" as typeof side[number],
+      "class": {
+        "close": "pr-1.5 pl-2.5 top-3 translate-x-full right-0 rounded-r-full"
+      }
+    },
+    {
+      "side": [
+        "top" as typeof side[number],
+        "bottom" as typeof side[number]
+      ],
+      "class": {
+        "close": "top-4 end-4"
+      }
+    },
+    {
+      "transition": true,
+      "side": "top" as typeof side[number],
+      "class": {
+        "content": "data-[state=open]:animate-[slide-in-from-top_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-top_200ms_ease-in-out]"
+      }
+    },
+    {
+      "transition": true,
+      "side": "right" as typeof side[number],
+      "class": {
+        "content": "data-[state=open]:animate-[slide-in-from-right_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-right_200ms_ease-in-out]"
+      }
+    },
+    {
+      "transition": true,
+      "side": "bottom" as typeof side[number],
+      "class": {
+        "content": "data-[state=open]:animate-[slide-in-from-bottom_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-bottom_200ms_ease-in-out]"
+      }
+    },
+    {
+      "transition": true,
+      "side": "left" as typeof side[number],
+      "class": {
+        "content": "data-[state=open]:animate-[slide-in-from-left_200ms_ease-in-out] data-[state=closed]:animate-[slide-out-to-left_200ms_ease-in-out]"
+      }
+    }
+  ],
+  "defaultVariants": {
+    "side": "right" as typeof side[number],
+    "scrollbarThin": true
+  }
+}