@baybreezy/docd 0.0.1

package/app/components/Ui/Dialog/Footer.vue

@@ -0,0 +1,32 @@
+<template>
+  <Primitive
+    data-slot="dialog-footer"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        /** Custom class(es) to add to the parent */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    {
+      as: "div",
+    }
+  );
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+  });
+</script>

package/app/components/Ui/Dialog/Header.vue

@@ -0,0 +1,32 @@
+<template>
+  <Primitive
+    data-slot="dialog-header"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      PrimitiveProps & {
+        /** Custom class(es) to add to the parent */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    {
+      as: "div",
+    }
+  );
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "flex flex-col gap-2 text-center sm:text-left",
+  });
+</script>

package/app/components/Ui/Dialog/Overlay.vue

@@ -0,0 +1,25 @@
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { DialogOverlay } from "reka-ui";
+  import type { DialogOverlayProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DialogOverlayProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "fixed inset-0 z-50 bg-background/50 backdrop-blur-sm data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+  });
+</script>

package/app/components/Ui/Dialog/Portal.vue

@@ -0,0 +1,12 @@
+<template>
+  <DialogPortal data-slot="dialog-portal" v-bind="props">
+    <slot />
+  </DialogPortal>
+</template>
+
+<script lang="ts" setup>
+  import { DialogPortal } from "reka-ui";
+  import type { DialogPortalProps } from "reka-ui";
+
+  const props = defineProps<DialogPortalProps>();
+</script>

package/app/components/Ui/Dialog/Title.vue

@@ -0,0 +1,29 @@
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot>{{ title }}</slot>
+  </DialogTitle>
+</template>
+
+<script lang="ts" setup>
+  import { DialogTitle } from "reka-ui";
+  import type { DialogTitleProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DialogTitleProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+      /** The title text */
+      title?: string;
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class", "title");
+  const styles = tv({
+    base: "text-lg leading-none font-semibold tracking-tight",
+  });
+</script>

package/app/components/Ui/Dialog/Trigger.vue

@@ -0,0 +1,12 @@
+<template>
+  <DialogTrigger data-slot="dialog-trigger" v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { DialogTrigger } from "reka-ui";
+  import type { DialogTriggerProps } from "reka-ui";
+
+  const props = defineProps<DialogTriggerProps>();
+</script>

package/app/components/Ui/Divider.vue

@@ -0,0 +1,102 @@
+<template>
+  <Primitive
+    as="div"
+    :class="base({ orientation, type, class: normalizeClass(props.class) || undefined })"
+  >
+    <Separator :orientation="orientation" :class="border({ orientation, type })" />
+    <template v-if="label || icon || avatar || $slots.default">
+      <div :class="container({ orientation, type })">
+        <slot>
+          <slot name="label">
+            <span v-if="label" :class="labelClass({ orientation, type })">
+              {{ label }}
+            </span>
+          </slot>
+          <slot name="icon">
+            <Icon v-if="icon" :name="icon" :class="iconClass({ orientation, type })" />
+          </slot>
+          <slot name="avatar">
+            <UiAvatar v-if="avatar" :src="avatar" />
+          </slot>
+        </slot>
+      </div>
+    </template>
+    <Separator :orientation="orientation" :class="border({ orientation, type })" />
+  </Primitive>
+</template>
+
+<script lang="ts" setup>
+  import { Primitive, Separator } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<{
+    /**
+     * Custom class for the divider
+     */
+    class?: HTMLAttributes["class"];
+    /**
+     * The type of the divider
+     * @default "solid"
+     */
+    type?: VariantProps<typeof style>["type"];
+    /**
+     * The orientation of the divider
+     * @default "horizontal"
+     */
+    orientation?: VariantProps<typeof style>["orientation"];
+    /**
+     * The icon to display in the divider
+     */
+    icon?: string;
+    /**
+     * The label to display in the divider
+     */
+    label?: string;
+    /**
+     * The avatar to display in the divider
+     */
+    avatar?: string;
+  }>();
+
+  const style = tv({
+    slots: {
+      base: "flex w-full items-center text-center align-middle",
+      container: "flex font-medium",
+      border: "flex border-border",
+      icon: "h-5 w-5 shrink-0",
+      label: "text-sm",
+    },
+    variants: {
+      orientation: {
+        horizontal: {
+          base: "flex-row",
+          container: "mx-3 whitespace-nowrap",
+          border: "w-full border-t",
+        },
+        vertical: {
+          base: "h-full flex-col",
+          container: "my-3",
+          border: "h-full border-s",
+        },
+      },
+      type: {
+        solid: {
+          border: "border-solid",
+        },
+        dashed: {
+          border: "border-dashed",
+        },
+        dotted: {
+          border: "border-dotted",
+        },
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+      type: "solid",
+    },
+  });
+
+  const { base, border, container, icon: iconClass, label: labelClass } = style();
+</script>

package/app/components/Ui/Drawer/Close.vue

@@ -0,0 +1,12 @@
+<template>
+  <DrawerClose data-slot="drawer-close" v-bind="props">
+    <slot />
+  </DrawerClose>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerClose } from "vaul-vue";
+  import type { DrawerCloseProps } from "vaul-vue";
+
+  const props = defineProps<DrawerCloseProps>();
+</script>

package/app/components/Ui/Drawer/Content.vue

@@ -0,0 +1,67 @@
+<template>
+  <UiDrawerPortal>
+    <slot name="overlay">
+      <UiDrawerOverlay />
+    </slot>
+    <slot name="content">
+      <DrawerContent
+        data-slot="drawer-content"
+        v-bind="{ ...forwarded, ...$attrs }"
+        :class="
+          styles({
+            translucent: props.translucent,
+            class: normalizeClass(props.class) || undefined,
+          })
+        "
+      >
+        <slot name="knob">
+          <div
+            v-if="!hideKnob"
+            data-slot="drawer-knob"
+            class="mx-auto mt-4 h-1.5 w-[60px] shrink-0 cursor-grab rounded-full bg-muted active:cursor-grabbing"
+          />
+        </slot>
+
+        <slot />
+      </DrawerContent>
+    </slot>
+  </UiDrawerPortal>
+</template>
+
+<script lang="ts" setup>
+  import { useForwardPropsEmits } from "reka-ui";
+  import type { DialogContentEmits, DialogContentProps } from "reka-ui";
+  import { DrawerContent } from "vaul-vue";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<
+    DialogContentProps & {
+      class?: HTMLAttributes["class"];
+      hideKnob?: boolean;
+      translucent?: boolean;
+    }
+  >();
+  const emits = defineEmits<DialogContentEmits>();
+  const forwarded = useForwardPropsEmits(
+    reactiveOmit(props, "class", "hideKnob", "translucent"),
+    emits
+  );
+
+  const styles = tv({
+    base: [
+      "group/drawer-content fixed z-50 flex h-auto flex-col bg-background",
+      "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+      "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+      "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+      "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+    ],
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingPanelClasses("background"),
+      },
+    },
+  });
+</script>

package/app/components/Ui/Drawer/Description.vue

@@ -0,0 +1,33 @@
+<template>
+  <DrawerDescription
+    data-slot="drawer-description"
+    v-bind="props"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      {{ props.text }}
+    </slot>
+  </DrawerDescription>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerDescription } from "vaul-vue";
+  import type { DrawerDescriptionProps } from "vaul-vue";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  interface Props extends DrawerDescriptionProps {
+    /**
+     * Custom class(es) to add to the parent.
+     */
+    class?: HTMLAttributes["class"];
+    /**
+     * The text content of the description.
+     */
+    text?: string;
+  }
+
+  const props = defineProps<Props>();
+
+  const styles = tv({ base: "text-sm text-muted-foreground" });
+</script>

package/app/components/Ui/Drawer/Drawer.vue

@@ -0,0 +1,17 @@
+<template>
+  <DrawerRoot data-slot="drawer" v-bind="forwarded">
+    <slot />
+  </DrawerRoot>
+</template>
+
+<script lang="ts" setup>
+  import { useForwardPropsEmits } from "reka-ui";
+  import { DrawerRoot } from "vaul-vue";
+  import type { DrawerRootEmits, DrawerRootProps } from "vaul-vue";
+
+  const props = withDefaults(defineProps<DrawerRootProps>(), {
+    shouldScaleBackground: true,
+  });
+  const emits = defineEmits<DrawerRootEmits>();
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>

package/app/components/Ui/Drawer/Footer.vue

@@ -0,0 +1,35 @@
+<template>
+  <Primitive
+    data-slot="drawer-footer"
+    v-bind="forwarded"
+    :class="drawerFooterStyles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { Primitive, useForwardProps } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const drawerFooterStyles = tv({
+    base: "mt-auto flex flex-col gap-2 p-4",
+  });
+
+  export type DrawerHeaderProps = PrimitiveProps & {
+    /**
+     * Classes to add to the parent.
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<DrawerHeaderProps>(), {
+    as: "div",
+  });
+  const forwarded = useForwardProps(reactiveOmit(props, ["class"]));
+</script>

package/app/components/Ui/Drawer/Header.vue

@@ -0,0 +1,34 @@
+<template>
+  <Primitive
+    data-slot="drawer-header"
+    v-bind="forwarded"
+    :class="drawerHeaderStyles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { Primitive, useForwardProps } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const drawerHeaderStyles = tv({
+    base: "grid gap-1.5 p-4 text-center sm:text-left",
+  });
+
+  export type DrawerHeaderProps = PrimitiveProps & {
+    /**
+     * Classes to add to the header.
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<DrawerHeaderProps>(), {
+    as: "div",
+  });
+  const forwarded = useForwardProps(reactiveOmit(props, ["class"]));
+</script>

package/app/components/Ui/Drawer/Overlay.vue

@@ -0,0 +1,20 @@
+<template>
+  <DrawerOverlay
+    data-slot="drawer-overlay"
+    v-bind="props"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  />
+</template>
+
+<script lang="ts" setup>
+  import type { DialogOverlayProps } from "reka-ui";
+  import { DrawerOverlay } from "vaul-vue";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>();
+
+  const styles = tv({
+    base: "fixed inset-0 z-50 bg-background/40 backdrop-blur",
+  });
+</script>

package/app/components/Ui/Drawer/Portal.vue

@@ -0,0 +1,12 @@
+<template>
+  <DrawerPortal data-slot="drawer-portal" v-bind="props">
+    <slot />
+  </DrawerPortal>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerPortal } from "vaul-vue";
+  import type { DrawerPortalProps } from "vaul-vue";
+
+  const props = defineProps<DrawerPortalProps>();
+</script>

package/app/components/Ui/Drawer/Title.vue

@@ -0,0 +1,35 @@
+<template>
+  <DrawerTitle
+    data-slot="drawer-title"
+    v-bind="props"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      {{ props.text }}
+    </slot>
+  </DrawerTitle>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerTitle } from "vaul-vue";
+  import type { DrawerTitleProps } from "vaul-vue";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DrawerTitleProps & {
+      /**
+       * Custom class(es) to add to the parent.
+       */
+      class?: HTMLAttributes["class"];
+      /**
+       * The text content of the title.
+       */
+      text?: string;
+    }
+  >();
+
+  const styles = tv({
+    base: "text-lg leading-none font-semibold tracking-tight",
+  });
+</script>

package/app/components/Ui/Drawer/Trigger.vue

@@ -0,0 +1,12 @@
+<template>
+  <DrawerTrigger data-slot="drawer-trigger" v-bind="props">
+    <slot />
+  </DrawerTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { DrawerTrigger } from "vaul-vue";
+  import type { DrawerTriggerProps } from "vaul-vue";
+
+  const props = defineProps<DrawerTriggerProps>();
+</script>

package/app/components/Ui/DropdownMenu/Arrow.vue

@@ -0,0 +1,43 @@
+<template>
+  <DropdownMenuArrow
+    data-slot="dropdown-menu-arrow"
+    v-bind="forwarded"
+    :class="
+      styles({
+        translucent: props.translucent,
+        class: normalizeClass(props.class) || undefined,
+      })
+    "
+  />
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuArrow } from "reka-ui";
+  import type { DropdownMenuArrowProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<
+      DropdownMenuArrowProps & {
+        /** Custom class(es) to add to the parent */
+        class?: HTMLAttributes["class"];
+        /** Whether to render the arrow with a translucent surface */
+        translucent?: boolean;
+      }
+    >(),
+    {
+      width: 12,
+      height: 6,
+    }
+  );
+  const forwarded = reactiveOmit(props, "class", "translucent");
+  const styles = tv({
+    base: "fill-popover stroke-border",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingArrowClasses("popover"),
+      },
+    },
+  });
+</script>

package/app/components/Ui/DropdownMenu/CheckboxItem.vue

@@ -0,0 +1,41 @@
+<template>
+  <DropdownMenuCheckboxItem
+    data-slot="dropdown-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <span class="absolute left-2 flex size-3.5 items-center justify-center text-primary">
+      <UiDropdownMenuItemIndicator icon="lucide:check" />
+    </span>
+    <slot>
+      <span v-if="title">{{ title }}</span>
+    </slot>
+    <slot name="shortcut">
+      <UiDropdownMenuShortcut v-if="shortcut">{{ shortcut }}</UiDropdownMenuShortcut>
+    </slot>
+  </DropdownMenuCheckboxItem>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuCheckboxItem, useForwardPropsEmits } from "reka-ui";
+  import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DropdownMenuCheckboxItemProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+      /** The shortcut text to display */
+      shortcut?: string;
+      /** The title text to display */
+      title?: string;
+    }
+  >();
+  const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "title", "shortcut", "class"), emits);
+
+  const styles = tv({
+    base: "relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  });
+</script>