ui-thing 0.0.19 → 0.0.20

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## v0.0.20
+
+[compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.0.19...v0.0.20)
+
+### 🏡 Chore
+
+- **components:** Add new components - navbar, container & divider ([fb970d5](https://github.com/BayBreezy/ui-thing-cli/commit/fb970d5))
+
+### ❤️ Contributors
+
+- Behon Baker <behon.baker@yahoo.com>
+
 ## v0.0.19
 
 [compare changes](https://github.com/BayBreezy/ui-thing-cli/compare/v0.0.18...v0.0.19)

package/dist/index.js

@@ -1871,6 +1871,30 @@ export const buttonStyles = tv({\r
     base: "ml-auto text-xs tracking-widest text-muted-foreground",
   });
 </script>
+`}],utils:[],composables:[],plugins:[]},{name:"Container",value:"container",deps:["radix-vue","tailwind-variants"],devDeps:[],nuxtModules:[],files:[{fileName:"Container.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <Primitive :class="styles({ class: props.class })" v-bind="reactiveOmit(props, 'class')">\r
+    <slot></slot>\r
+  </Primitive>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import type { PrimitiveProps } from "radix-vue";\r
+\r
+  const props = withDefaults(\r
+    defineProps<\r
+      PrimitiveProps & {\r
+        class?: any;\r
+      }\r
+    >(),\r
+    {\r
+      as: "div",\r
+    }\r
+  );\r
+\r
+  const styles = tv({\r
+    base: "container mx-auto",\r
+  });\r
+</script>\r
 `}],utils:[],composables:[],plugins:[]},{name:"Context Menu",value:"context-menu",deps:["radix-vue","tailwind-variants"],devDeps:["tailwindcss-animate","nuxt-icon"],nuxtModules:["nuxt-icon"],files:[{fileName:"ContextMenu/Arrow.vue",dirPath:"components/UI",fileContent:`<template>
   <ContextMenuArrow v-bind="reactiveOmit(props, 'class')" :class="styles({ class: props.class })" />
 </template>
@@ -3653,6 +3677,83 @@ export default defineNuxtPlugin((nuxtApp) => {\r
 
   const props = defineProps<DialogTriggerProps>();
 </script>
+`}],utils:[],composables:[],plugins:[]},{name:"Divider",value:"divider",deps:["radix-vue","tailwind-variants"],devDeps:["nuxt-icon"],nuxtModules:["nuxt-icon"],components:["avatar"],files:[{fileName:"Divider.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <Primitive as="div" :class="base({ orientation, type, class: props.class })">\r
+    <Separator :orientation="orientation" :class="border({ orientation, type })" />\r
+    <template v-if="label || icon || avatar || $slots.default">\r
+      <div :class="container({ orientation, type })">\r
+        <slot>\r
+          <slot name="label">\r
+            <span v-if="label" :class="labelClass({ orientation, type })">\r
+              {{ label }}\r
+            </span>\r
+          </slot>\r
+          <slot name="icon">\r
+            <Icon v-if="icon" :name="icon" :class="iconClass({ orientation, type })" />\r
+          </slot>\r
+          <slot name="avatar">\r
+            <UiAvatar v-if="avatar" :src="avatar" />\r
+          </slot>\r
+        </slot>\r
+      </div>\r
+    </template>\r
+    <Separator :orientation="orientation" :class="border({ orientation, type })" />\r
+  </Primitive>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import { Primitive, Separator } from "radix-vue";\r
+\r
+  const props = defineProps<{\r
+    class?: any;\r
+    type?: VariantProps<typeof style>["type"];\r
+    orientation?: VariantProps<typeof style>["orientation"];\r
+    icon?: string;\r
+    label?: string;\r
+    avatar?: string;\r
+  }>();\r
+\r
+  const style = tv({\r
+    slots: {\r
+      base: "flex w-full items-center text-center align-middle",\r
+      container: "flex font-medium",\r
+      border: "flex border-border",\r
+      icon: "h-5 w-5 shrink-0",\r
+      label: "text-sm",\r
+    },\r
+    variants: {\r
+      orientation: {\r
+        horizontal: {\r
+          base: "flex-row",\r
+          container: "mx-3 whitespace-nowrap",\r
+          border: "w-full border-t",\r
+        },\r
+        vertical: {\r
+          base: "h-full flex-col",\r
+          container: "my-3",\r
+          border: "h-full border-s",\r
+        },\r
+      },\r
+      type: {\r
+        solid: {\r
+          border: "border-solid",\r
+        },\r
+        dashed: {\r
+          border: "border-dashed",\r
+        },\r
+        dotted: {\r
+          border: "border-dotted",\r
+        },\r
+      },\r
+    },\r
+    defaultVariants: {\r
+      orientation: "horizontal",\r
+      type: "solid",\r
+    },\r
+  });\r
+\r
+  const { base, border, container, icon: iconClass, label: labelClass } = style();\r
+</script>\r
 `}],utils:[],composables:[],plugins:[]},{name:"Dropdown Menu",value:"dropdown-menu",deps:["radix-vue","tailwind-variants"],devDeps:["tailwindcss-animate","nuxt-icon"],nuxtModules:["nuxt-icon"],files:[{fileName:"DropdownMenu/Arrow.vue",dirPath:"components/UI",fileContent:`<template>\r
   <DropdownMenuArrow\r
     v-bind="reactiveOmit(props, 'class')"\r
@@ -5209,6 +5310,36 @@ export function useFormField() {\r
     }
   });
 </script>
+`}],utils:[],composables:[],plugins:[]},{name:"Navbar",value:"navbar",deps:["radix-vue","tailwind-variants"],devDeps:[],nuxtModules:[],files:[{fileName:"Navbar.vue",dirPath:"components/UI",fileContent:`<template>\r
+  <Primitive :class="styles({ sticky, class: props.class })" v-bind="reactiveOmit(props, 'class')">\r
+    <slot> </slot>\r
+  </Primitive>\r
+</template>\r
+\r
+<script lang="ts" setup>\r
+  import { type PrimitiveProps } from "radix-vue";\r
+\r
+  const props = withDefaults(\r
+    defineProps<\r
+      PrimitiveProps & {\r
+        class?: any;\r
+        sticky?: boolean;\r
+      }\r
+    >(),\r
+    {\r
+      as: "header",\r
+    }\r
+  );\r
+\r
+  const styles = tv({\r
+    base: "z-20 border-b bg-background/90 backdrop-blur",\r
+    variants: {\r
+      sticky: {\r
+        true: "sticky top-0",\r
+      },\r
+    },\r
+  });\r
+</script>\r
 `}],utils:[],composables:[],plugins:[]},{name:"Navigation Menu",value:"navigation-menu",deps:["radix-vue","tailwind-variants"],devDeps:["tailwindcss-animate","nuxt-icon"],nuxtModules:["nuxt-icon"],files:[{fileName:"NavigationMenu/Content.vue",dirPath:"components/UI",fileContent:`<template>
   <NavigationMenuContent v-bind="forwarded" :class="styles({ class: props.class })">
     <slot></slot>