@baybreezy/docd 0.0.1

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

@@ -0,0 +1,56 @@
+<template>
+  <UiDropdownMenuPortal>
+    <DropdownMenuContent
+      data-slot="dropdown-menu-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        styles({
+          translucent: props.translucent,
+          class: normalizeClass(props.class) || undefined,
+        })
+      "
+    >
+      <slot />
+    </DropdownMenuContent>
+  </UiDropdownMenuPortal>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuContent, useForwardPropsEmits } from "reka-ui";
+  import type { DropdownMenuContentEmits, DropdownMenuContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = withDefaults(
+    defineProps<
+      DropdownMenuContentProps & {
+        /** Custom class(es) to add to the parent */
+        class?: HTMLAttributes["class"];
+        /** Whether to render the content with a translucent surface */
+        translucent?: boolean;
+      }
+    >(),
+    {
+      loop: true,
+      align: "center",
+      sideOffset: 4,
+      side: "bottom",
+      avoidCollisions: true,
+      sticky: "partial",
+    }
+  );
+
+  const emits = defineEmits<DropdownMenuContentEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "translucent"), emits);
+
+  const styles = tv({
+    base: "z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-visible rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingPanelClasses("popover"),
+      },
+    },
+  });
+</script>

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

@@ -0,0 +1,15 @@
+<template>
+  <DropdownMenuRoot data-slot="dropdown-menu" v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuRoot, useForwardPropsEmits } from "reka-ui";
+  import type { DropdownMenuRootEmits, DropdownMenuRootProps } from "reka-ui";
+
+  const props = defineProps<DropdownMenuRootProps>();
+
+  const emit = defineEmits<DropdownMenuRootEmits>();
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>

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

@@ -0,0 +1,12 @@
+<template>
+  <DropdownMenuGroup data-slot="dropdown-menu-group" v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuGroup } from "reka-ui";
+  import type { DropdownMenuGroupProps } from "reka-ui";
+
+  const props = defineProps<DropdownMenuGroupProps>();
+</script>

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

@@ -0,0 +1,64 @@
+<template>
+  <DropdownMenuItem
+    data-slot="dropdown-menu-item"
+    v-bind="forwarded"
+    :data-inset="inset"
+    :data-variant="variant"
+    :class="styles({ inset, class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      <slot name="icon">
+        <Icon v-if="icon" :name="icon" class="size-4" />
+      </slot>
+      <slot name="title">
+        <span v-if="title">{{ title }}</span>
+      </slot>
+    </slot>
+    <slot name="shortcut">
+      <UiDropdownMenuShortcut v-if="shortcut" :variant>{{ shortcut }}</UiDropdownMenuShortcut>
+    </slot>
+  </DropdownMenuItem>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuItem, useForwardPropsEmits } from "reka-ui";
+  import type { DropdownMenuItemEmits, DropdownMenuItemProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DropdownMenuItemProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+      /** Whether to inset the content */
+      inset?: boolean;
+      /** The shortcut text to display */
+      shortcut?: string;
+      /** The title text to display */
+      title?: string;
+      /** The icon to display */
+      icon?: string;
+      /**
+       * The variant of the item.
+       *
+       * @default "default"
+       */
+      variant?: "default" | "destructive";
+    }
+  >();
+
+  const emits = defineEmits<DropdownMenuItemEmits>();
+  const forwarded = useForwardPropsEmits(
+    reactiveOmit(props, "class", "inset", "shortcut", "title", "icon"),
+    emits
+  );
+
+  const styles = tv({
+    base: "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset=true]:pl-8 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground data-[variant=destructive]:*:[svg]:text-destructive!",
+    variants: {
+      inset: {
+        true: "pl-8",
+      },
+    },
+  });
+</script>

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

@@ -0,0 +1,32 @@
+<template>
+  <DropdownMenuItemIndicator
+    data-slot="dropdown-menu-item-indicator"
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      <Icon v-if="icon" :name="icon" class="size-4" />
+    </slot>
+  </DropdownMenuItemIndicator>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuItemIndicator } from "reka-ui";
+  import type { DropdownMenuItemIndicatorProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DropdownMenuItemIndicatorProps & {
+      /** The icon to display */
+      icon?: string;
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class", "icon");
+
+  const styles = tv({
+    base: "flex items-center justify-center",
+  });
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <DropdownMenuLabel
+    data-slot="dropdown-menu-label"
+    :class="styles({ inset, class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot>{{ label }}</slot>
+  </DropdownMenuLabel>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuLabel } from "reka-ui";
+  import type { DropdownMenuLabelProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DropdownMenuLabelProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+      /** Whether to inset the content */
+      inset?: boolean;
+      /** The label text to display */
+      label?: string;
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class", "inset", "label");
+  const styles = tv({
+    base: "inline-block w-full px-2 py-1.5 text-sm font-semibold text-foreground",
+    variants: {
+      inset: { true: "pl-8" },
+    },
+  });
+</script>

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

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

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

@@ -0,0 +1,16 @@
+<template>
+  <DropdownMenuRadioGroup data-slot="dropdown-menu-radio-group" v-bind="forwarded">
+    <slot />
+  </DropdownMenuRadioGroup>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuRadioGroup, useForwardPropsEmits } from "reka-ui";
+  import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from "reka-ui";
+
+  const props = defineProps<DropdownMenuRadioGroupProps>();
+
+  const emits = defineEmits<DropdownMenuRadioGroupEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>

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

@@ -0,0 +1,40 @@
+<template>
+  <DropdownMenuRadioItem
+    data-slot="dropdown-menu-radio-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 v-if="icon" :name="icon" class="size-4" />
+        <Icon v-else name="ph:circle-fill" class="size-2" />
+      </UiDropdownMenuItemIndicator>
+    </span>
+    <slot>{{ title }}</slot>
+  </DropdownMenuRadioItem>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuRadioItem, useForwardPropsEmits } from "reka-ui";
+  import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DropdownMenuRadioItemProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+      /** The icon to display */
+      icon?: string;
+      /** The title text to display */
+      title?: string;
+    }
+  >();
+
+  const emits = defineEmits<DropdownMenuRadioItemEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "icon", "title"), 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>

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

@@ -0,0 +1,25 @@
+<template>
+  <DropdownMenuSeparator
+    data-slot="dropdown-menu-separator"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuSeparator } from "reka-ui";
+  import type { DropdownMenuSeparatorProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DropdownMenuSeparatorProps & {
+      /** Custom class(es) to add to the parent */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "-mx-1 my-1 h-px bg-border",
+  });
+</script>

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

@@ -0,0 +1,44 @@
+<template>
+  <Primitive
+    data-slot="dropdown-menu-shortcut"
+    :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"];
+        /**
+         * The variant of the item.
+         *
+         * @default "default"
+         */
+        variant?: "default" | "destructive";
+      }
+    >(),
+    {
+      as: "span",
+    }
+  );
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "ml-auto text-xs tracking-widest",
+    variants: {
+      variant: {
+        default: "text-muted-foreground",
+        destructive: "text-destructive",
+      },
+    },
+  });
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <DropdownMenuSub data-slot="dropdown-menu-sub" v-bind="forwarded">
+    <slot />
+  </DropdownMenuSub>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuSub, useForwardPropsEmits } from "reka-ui";
+  import type { DropdownMenuSubEmits, DropdownMenuSubProps } from "reka-ui";
+
+  const props = defineProps<DropdownMenuSubProps>();
+  const emits = defineEmits<DropdownMenuSubEmits>();
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+  <UiDropdownMenuPortal :to="to">
+    <DropdownMenuSubContent
+      data-slot="dropdown-menu-sub-content"
+      v-bind="{ ...forwarded, ...$attrs }"
+      :class="
+        styles({
+          translucent: props.translucent,
+          class: normalizeClass(props.class) || undefined,
+        })
+      "
+    >
+      <slot />
+    </DropdownMenuSubContent>
+  </UiDropdownMenuPortal>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuSubContent, useForwardPropsEmits } from "reka-ui";
+  import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineOptions({ inheritAttrs: false });
+  const props = withDefaults(
+    defineProps<
+      DropdownMenuSubContentProps & {
+        /** Custom class(es) to add to the parent */
+        class?: HTMLAttributes["class"];
+        /** The element to render the portal into */
+        to?: string | HTMLElement;
+        /** Whether to render the content with a translucent surface */
+        translucent?: boolean;
+      }
+    >(),
+    {
+      loop: true,
+      sideOffset: 8,
+      avoidCollisions: true,
+      collisionPadding: 5,
+      sticky: "partial",
+    }
+  );
+
+  const emits = defineEmits<DropdownMenuSubContentEmits>();
+  const forwarded = useForwardPropsEmits(reactiveOmit(props, "class", "to", "translucent"), emits);
+
+  const styles = tv({
+    base: "z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-visible rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+    variants: {
+      translucent: {
+        true: getTranslucentFloatingPanelClasses("popover"),
+      },
+    },
+  });
+</script>

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

@@ -0,0 +1,47 @@
+<template>
+  <DropdownMenuSubTrigger
+    data-slot="dropdown-menu-sub-trigger"
+    v-bind="forwarded"
+    :class="styles({ inset, class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      <Icon v-if="icon" :name="icon" class="size-4" />
+      <span v-if="title">{{ title }}</span>
+    </slot>
+    <Icon
+      class="ml-auto size-4 text-muted-foreground"
+      :name="trailingIcon || 'lucide:chevron-right'"
+    />
+  </DropdownMenuSubTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { DropdownMenuSubTrigger } from "reka-ui";
+  import type { DropdownMenuSubTriggerProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    DropdownMenuSubTriggerProps & {
+      /**Custom class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+      /** Wether an indentation should be added to the item or not */
+      inset?: boolean;
+      /** The icon to display */
+      icon?: string;
+      /** The title for the item */
+      title?: string;
+      /** The trailing icon to display */
+      trailingIcon?: string;
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class", "inset", "icon", "title", "trailingIcon");
+  const styles = tv({
+    base: "flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-8 data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+    variants: {
+      inset: {
+        true: "pl-8",
+      },
+    },
+  });
+</script>

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

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