@baybreezy/docd 0.0.1

package/app/components/Ui/Button.vue

@@ -0,0 +1,169 @@
+<template>
+  <component
+    :is="elementType"
+    :class="
+      buttonStyles({
+        hasIcon: !!icon,
+        disabled: disabled || loading,
+        variant: variant,
+        size: size,
+        class: normalizeClass(props.class) || undefined,
+        effect: props.effect,
+      })
+    "
+    :disabled="disabled || loading"
+    v-bind="forwarded"
+  >
+    <slot name="iconLeft">
+      <div
+        v-if="icon && iconPlacement == 'left'"
+        class="flex w-0 translate-x-[0%] pr-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-[0%] group-hover:pr-2 group-hover:opacity-100"
+      >
+        <Icon :name="icon" class="size-4" />
+      </div>
+    </slot>
+    <slot name="loading">
+      <Icon v-if="loading" class="size-4 shrink-0" :name="loadingIcon" />
+    </slot>
+    <slot>
+      <span v-if="text">{{ text }}</span>
+    </slot>
+    <slot name="iconRight">
+      <div
+        v-if="icon && iconPlacement == 'right'"
+        class="flex w-0 translate-x-full pl-0 opacity-0 transition-all duration-200 group-hover:w-5 group-hover:translate-x-0 group-hover:pl-2 group-hover:opacity-100"
+      >
+        <Icon :name="icon" class="size-4" />
+      </div>
+    </slot>
+  </component>
+</template>
+
+<script lang="ts">
+  import { reactiveOmit } from "@vueuse/core";
+  import { useForwardProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HtmlHTMLAttributes } from "vue";
+
+  import type { NuxtLinkProps } from "#app/components";
+
+  /**
+   * Exported button styles that can be used by other components
+   */
+  export const buttonStyles = tv({
+    base: "group inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 active:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      effect: {
+        expandIcon: "group relative gap-0",
+        ringHover: "transition-all duration-300 hover:ring-3 hover:ring-ring/50",
+        shine:
+          "relative overflow-hidden bg-position-[0s_ease] before:absolute before:inset-0 before:animate-shine before:rounded-[inherit] before:bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.5)_50%,transparent_75%,transparent_100%)] before:bg-size-[250%_250%,100%_100%] before:bg-no-repeat",
+        shineHover:
+          "relative overflow-hidden before:absolute before:inset-0 before:rounded-[inherit] before:bg-[linear-gradient(45deg,transparent_25%,rgba(255,255,255,0.5)_50%,transparent_75%,transparent_100%)] before:bg-size-[250%_250%,100%_100%] before:bg-position-[200%_0,0_0] before:bg-no-repeat before:transition-[background-position_0s_ease] before:duration-1000 hover:before:bg-position-[-100%_0,0_0]",
+        gooeyRight:
+          "relative z-0 overflow-hidden duration-500 before:absolute before:inset-0 before:-z-10 before:translate-x-[150%] before:translate-y-[150%] before:scale-[2.5] before:rounded-[100%] before:bg-linear-to-r before:from-white/40 before:transition-transform before:duration-1000 hover:before:translate-x-[0%] hover:before:translate-y-[0%]",
+        gooeyLeft:
+          "relative z-0 overflow-hidden duration-500 after:absolute after:inset-0 after:-z-10 after:translate-x-[-150%] after:translate-y-[150%] after:scale-[2.5] after:rounded-[100%] after:bg-linear-to-l after:from-white/40 after:transition-transform after:duration-1000 hover:after:translate-x-[0%] hover:after:translate-y-[0%]",
+        underline:
+          "relative no-underline! after:absolute after:bottom-2 after:h-px after:w-2/3 after:origin-bottom-left after:scale-x-100 after:bg-primary after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-right hover:after:scale-x-0",
+        hoverUnderline:
+          "relative no-underline! after:absolute after:bottom-2 after:h-px after:w-2/3 after:origin-bottom-right after:scale-x-0 after:bg-primary after:transition-transform after:duration-300 after:ease-in-out hover:after:origin-bottom-left hover:after:scale-x-100",
+        gradientSlideShow:
+          "animate-gradient-flow bg-[linear-gradient(-45deg,var(--gradient-lime),var(--gradient-ocean),var(--gradient-wine),var(--gradient-rust))] bg-size-[400%] text-white",
+      },
+      size: {
+        xs: "h-7 gap-1 px-2.5 text-xs has-[>svg]:px-2",
+        sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        lg: "h-10 px-6 has-[>svg]:px-4",
+        "icon-xs": "size-7",
+        "icon-sm": "size-8",
+        icon: "size-9",
+        "icon-lg": "size-10",
+      },
+      disabled: {
+        true: "pointer-events-none opacity-50",
+      },
+      hasIcon: {
+        false: "gap-2",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  });
+  export type ButtonVariants = VariantProps<typeof buttonStyles>;
+  export type ButtonProps = NuxtLinkProps & {
+    /** The type for the button */
+    type?: "button" | "submit" | "reset";
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Whether the button is loading */
+    loading?: boolean;
+    /** The action to perform when the button is clicked */
+    onClick?: any;
+    /** The element to render the button as */
+    as?: string;
+    /** Custom class(es) to add to parent element */
+    class?: HtmlHTMLAttributes["class"];
+    /** The variant of the button */
+    variant?: ButtonVariants["variant"];
+    /** The size of the button */
+    size?: ButtonVariants["size"];
+    /**
+     * The effect to apply to the button.
+     */
+    effect?: ButtonVariants["effect"];
+    /** The text to display in the button */
+    text?: string;
+    /** Should the icon be displayed on the `left` or the `right`? */
+    iconPlacement?: "left" | "right";
+    /** The icon to display in the button */
+    icon?: string;
+    /** The icon to display when the button is loading */
+    loadingIcon?: string;
+  };
+</script>
+
+<script setup lang="ts">
+  const props = withDefaults(defineProps<ButtonProps>(), {
+    type: "button",
+    loadingIcon: "line-md:loading-loop",
+    iconPlacement: "left",
+    loading: false,
+  });
+
+  const elementType = computed(() => {
+    if (props.as) return props.as;
+    if (props.href || props.to || props.target) return resolveComponent("NuxtLink");
+    return "button";
+  });
+
+  const forwarded = useForwardProps(
+    reactiveOmit(
+      props,
+      "class",
+      "text",
+      "icon",
+      "iconPlacement",
+      "size",
+      "variant",
+      "as",
+      "loading",
+      "disabled",
+      "loadingIcon",
+      "effect"
+    )
+  );
+</script>

package/app/components/Ui/ButtonGroup/ButtonGroup.vue

@@ -0,0 +1,54 @@
+<template>
+  <Primitive
+    v-bind="forwarded"
+    role="group"
+    data-slot="button-group"
+    :data-orientation="orientation"
+    :class="buttonGroupVariants({ orientation, class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import type { VariantProps } from "tailwind-variants";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const buttonGroupVariants = tv({
+    base: "flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  });
+
+  export type ButtonGroupProps = PrimitiveProps & {
+    /**
+     * The orientation of the button group.
+     * @default 'horizontal'
+     */
+    orientation?: VariantProps<typeof buttonGroupVariants>["orientation"];
+    /**
+     * Additional classes to apply to the button group.
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ButtonGroupProps>(), {
+    orientation: "horizontal",
+  });
+
+  const forwarded = reactiveOmit(props, ["orientation", "class"]);
+</script>

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

@@ -0,0 +1,38 @@
+<template>
+  <UiSeparator
+    v-bind="forwarded"
+    data-slot="button-group-separator"
+    :orientation="orientation"
+    :class="buttonGroupSeparatorStyles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </UiSeparator>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const buttonGroupSeparatorStyles = tv({
+    base: "relative m-0! self-stretch bg-input data-[orientation=vertical]:h-auto",
+  });
+
+  export type ButtonGroupSeparatorProps = {
+    /**
+     * The orientation of the separator.
+     */
+    orientation?: "horizontal" | "vertical";
+    /**
+     * Additional classes to apply to the button group text.
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<ButtonGroupSeparatorProps>(), {
+    orientation: "vertical",
+  });
+
+  const forwarded = reactiveOmit(props, ["class"]);
+</script>

package/app/components/Ui/ButtonGroup/Text.vue

@@ -0,0 +1,33 @@
+<template>
+  <Primitive
+    v-bind="forwarded"
+    data-slot="button-group-text"
+    :class="buttonGroupTextStyles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </Primitive>
+</template>
+
+<script lang="ts">
+  import { Primitive } from "reka-ui";
+  import type { PrimitiveProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  export const buttonGroupTextStyles = tv({
+    base: "flex items-center gap-2 rounded-md border bg-muted px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+  });
+
+  export type ButtonGroupTextProps = PrimitiveProps & {
+    /**
+     * Additional classes to apply to the button group text.
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = defineProps<ButtonGroupTextProps>();
+
+  const forwarded = reactiveOmit(props, ["class"]);
+</script>

package/app/components/Ui/Card/Action.vue

@@ -0,0 +1,31 @@
+<template>
+  <Primitive
+    data-slot="card-action"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    :as="as"
+    :as-child="asChild"
+  >
+    <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 element */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    { as: "div" }
+  );
+
+  const styles = tv({
+    base: "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
+  });
+</script>

package/app/components/Ui/Card/Card.vue

@@ -0,0 +1,58 @@
+<template>
+  <Primitive
+    data-slot="card"
+    :as="as"
+    :as-child="asChild"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      <slot name="header">
+        <UiCardHeader>
+          <slot name="title">
+            <UiCardTitle v-if="title || $slots.title" :title="title" />
+          </slot>
+          <slot name="action" />
+          <slot name="description">
+            <UiCardDescription
+              v-if="description || $slots.description"
+              :description="description"
+            />
+          </slot>
+        </UiCardHeader>
+      </slot>
+      <slot v-if="content || $slots.content" name="content">
+        <UiCardContent>
+          <div v-html="content" />
+        </UiCardContent>
+      </slot>
+      <slot name="footer" />
+    </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 & {
+        /** Title that should be displayed. Passed to the `CardTitle` component */
+        title?: string;
+        /** Description that should be displayed. Passed to the `CardDescription` component */
+        description?: string;
+        /** Content that should be displayed. Passed to the `CardContent` component */
+        content?: string;
+        /** Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    { as: "div" }
+  );
+
+  const styles = tv({
+    base: "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
+  });
+</script>

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

@@ -0,0 +1,34 @@
+<template>
+  <Primitive
+    data-slot="card-content"
+    :as="as"
+    :as-child="asChild"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot>
+      {{ content }}
+    </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 & {
+        /** Content to display in the card */
+        content?: string;
+        /** Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    { as: "div" }
+  );
+  const styles = tv({
+    base: "px-6",
+  });
+</script>

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

@@ -0,0 +1,36 @@
+<template>
+  <Primitive
+    data-slot="card-description"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot>
+      {{ description }}
+    </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 & {
+        /** Description to display in the card */
+        description?: string;
+        /** Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    {
+      as: "div",
+    }
+  );
+  const styles = tv({
+    base: "text-sm text-muted-foreground",
+  });
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <Primitive
+    data-slot="card-footer"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    :as="as"
+    :as-child="asChild"
+  >
+    <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 element */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    { as: "div" }
+  );
+
+  const styles = tv({
+    base: "flex items-center px-6 [.border-t]:pt-6",
+  });
+</script>

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

@@ -0,0 +1,31 @@
+<template>
+  <Primitive
+    data-slot="card-header"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    :as="as"
+    :as-child="asChild"
+  >
+    <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 element */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    { as: "div" }
+  );
+
+  const styles = tv({
+    base: "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+  });
+</script>

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

@@ -0,0 +1,37 @@
+<template>
+  <Primitive
+    data-slot="card-title"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    :as="as"
+    :as-child="asChild"
+  >
+    <slot>
+      {{ title }}
+    </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 & {
+        /** Title to display in the card */
+        title?: string;
+        /** Custom class(es) to add to the element */
+        class?: HTMLAttributes["class"];
+      }
+    >(),
+    {
+      as: "h3",
+    }
+  );
+
+  const styles = tv({
+    base: "leading-none font-semibold",
+  });
+</script>

package/app/components/Ui/Collapsible/Collapsible.vue

@@ -0,0 +1,16 @@
+<template>
+  <CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </CollapsibleRoot>
+</template>
+
+<script lang="ts" setup>
+  import { CollapsibleRoot, useForwardPropsEmits } from "reka-ui";
+  import type { CollapsibleRootEmits, CollapsibleRootProps } from "reka-ui";
+
+  const props = defineProps<CollapsibleRootProps>();
+
+  const emit = defineEmits<CollapsibleRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emit);
+</script>

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

@@ -0,0 +1,27 @@
+<template>
+  <CollapsibleContent
+    data-slot="collapsible-content"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+    v-bind="forwarded"
+  >
+    <slot />
+  </CollapsibleContent>
+</template>
+
+<script lang="ts" setup>
+  import { CollapsibleContent } from "reka-ui";
+  import type { CollapsibleContentProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    CollapsibleContentProps & {
+      /** Customer class(es) to add to the element */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+  const forwarded = reactiveOmit(props, "class");
+  const styles = tv({
+    base: "overflow-hidden transition duration-200 will-change-auto data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down",
+  });
+</script>

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

@@ -0,0 +1,13 @@
+<template>
+  <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="forwarded">
+    <slot />
+  </CollapsibleTrigger>
+</template>
+
+<script lang="ts" setup>
+  import { CollapsibleTrigger, useForwardProps } from "reka-ui";
+  import type { CollapsibleTriggerProps } from "reka-ui";
+
+  const props = defineProps<CollapsibleTriggerProps>();
+  const forwarded = useForwardProps(props);
+</script>