@baybreezy/docd 0.0.1

package/app/components/Ui/FancyIcon.vue

@@ -0,0 +1,243 @@
+<template>
+  <div
+    data-slot="fancy-icon"
+    :class="styles({ class: normalizeClass(props.class) || undefined, color, size, theme })"
+  >
+    <slot>
+      <Icon v-if="icon" data-slot="fancy-icon-icon" :name="icon" />
+    </slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = withDefaults(
+    defineProps<{
+      /**
+       * Custom class(es) to add to the icon container.
+       */
+      class?: HTMLAttributes["class"];
+      /**
+       * The icon to display.
+       */
+      icon?: string;
+      /**
+       * The color variant of the icon.
+       */
+      color?: VariantProps<typeof styles>["color"];
+      /**
+       * The theme variant of the icon.
+       */
+      theme?: VariantProps<typeof styles>["theme"];
+      /**
+       * The size variant of the icon.
+       */
+      size?: VariantProps<typeof styles>["size"];
+    }>(),
+    {
+      color: "primary",
+      theme: "modern",
+      size: "lg",
+    }
+  );
+
+  const styles = tv({
+    base: "relative flex shrink-0 items-center justify-center",
+    variants: {
+      theme: {
+        light: "rounded-full",
+        gradient:
+          "rounded-full text-white *:z-10 before:absolute before:inset-0 before:size-full before:rounded-full before:border before:mask-b-from-0% after:absolute after:block after:rounded-full",
+        dark: "text-white before:absolute before:inset-px before:border before:border-white/10 before:mask-b-from-0%",
+        modern: "bg-background ring-1 ring-inset",
+        "modern-neue": [
+          "ring-1 ring-inset before:absolute before:inset-1 dark:bg-muted/40",
+          "before:shadow-[0px_1px_2px_0px_rgba(0,0,0,0.1),0px_3px_3px_0px_rgba(0,0,0,0.09),1px_8px_5px_0px_rgba(0,0,0,0.05),2px_21px_6px_0px_rgba(0,0,0,0),0px_0px_0px_1px_rgba(0,0,0,0.08),1px_13px_5px_0px_rgba(0,0,0,0.01),0px_-2px_2px_0px_rgba(0,0,0,0.13)_inset] before:ring-1 before:ring-border",
+        ],
+        outline:
+          "before:absolute before:rounded-full before:border-2 after:absolute after:rounded-full after:border-2",
+      },
+      size: {
+        sm: "*:size-4",
+        md: "*:size-5",
+        lg: "*:size-6",
+        xl: "*:size-7",
+      },
+      color: {
+        primary: "",
+        gray: "",
+        error: "",
+        warning: "",
+        success: "",
+        info: "",
+      },
+    },
+
+    compoundVariants: [
+      // Apply shadow to dark and modern
+      {
+        theme: ["dark", "modern"],
+        class:
+          "shadow-[0px_0px_0px_1px_rgba(10,13,18,0.18)_inset,0px_-2px_0px_0px_rgba(10,13,18,0.05)_inset,0px_1px_2px_rgba(10,13,18,0.05)]",
+      },
+      // Light sizes
+      { theme: "light", size: "sm", class: "size-8" },
+      { theme: "light", size: "md", class: "size-10" },
+      { theme: "light", size: "lg", class: "size-12" },
+      { theme: "light", size: "xl", class: "size-14" },
+      // Light colors
+      {
+        theme: "light",
+        color: "primary",
+        class: "bg-primary/10 text-primary dark:bg-primary dark:text-primary-foreground",
+      },
+      { theme: "light", color: "gray", class: "bg-muted text-muted-foreground" },
+      {
+        theme: "light",
+        color: "error",
+        class: "bg-red-500/10 text-red-500 dark:bg-red-500 dark:text-white",
+      },
+      {
+        theme: "light",
+        color: "warning",
+        class: "bg-amber-500/10 text-amber-500 dark:bg-amber-500 dark:text-white",
+      },
+      {
+        theme: "light",
+        color: "success",
+        class: "bg-green-500/10 text-green-500 dark:bg-green-500 dark:text-white",
+      },
+      {
+        theme: "light",
+        color: "info",
+        class: "bg-blue-500/10 text-blue-500 dark:bg-blue-500 dark:text-white",
+      },
+      // Gradient sizes
+      { theme: "gradient", size: "sm", class: "size-8 after:size-6 [*>svg]:size-4" },
+      { theme: "gradient", size: "md", class: "size-10 after:size-7 [*>svg]:size-4" },
+      { theme: "gradient", size: "lg", class: "size-12 after:size-8 [*>svg]:size-5" },
+      { theme: "gradient", size: "xl", class: "size-14 after:size-10 [*>svg]:size-5" },
+      // Gradient colors
+      {
+        theme: "gradient",
+        color: "primary",
+        class:
+          "before:border-primary/40 before:bg-primary/10 before:text-white after:bg-primary after:text-white",
+      },
+      {
+        theme: "gradient",
+        color: "gray",
+        class:
+          "before:border-gray-700/20 before:bg-gray-700/10 after:bg-gray-700 dark:before:bg-gray-700/50",
+      },
+      {
+        theme: "gradient",
+        color: "error",
+        class: "before:border-red-800/20 before:bg-red-500/10 after:bg-red-500",
+      },
+      {
+        theme: "gradient",
+        color: "warning",
+        class: "before:border-amber-800/20 before:bg-amber-500/10 after:bg-amber-500",
+      },
+      {
+        theme: "gradient",
+        color: "success",
+        class: "before:border-green-800/20 before:bg-green-500/10 after:bg-green-500",
+      },
+      {
+        theme: "gradient",
+        color: "info",
+        class: "before:border-blue-800/20 before:bg-blue-500/10 after:bg-blue-500",
+      },
+      // Dark sizes
+      { theme: "dark", size: "sm", class: "size-8 rounded-md before:rounded-[5px]" },
+      { theme: "dark", size: "md", class: "size-10 rounded-lg before:rounded-[7px]" },
+      { theme: "dark", size: "lg", class: "size-12 rounded-[10px] before:rounded-[9px]" },
+      { theme: "dark", size: "xl", class: "size-14 rounded-xl before:rounded-[11px]" },
+      // Dark colors
+      { theme: "dark", color: "primary", class: "bg-primary before:border-primary/12" },
+      {
+        theme: "dark",
+        color: "gray",
+        class: "bg-gray-800/80 before:border-muted/12 dark:bg-gray-700",
+      },
+      { theme: "dark", color: "error", class: "bg-red-500 before:border-red-800/12" },
+      {
+        theme: "dark",
+        color: "warning",
+        class: "bg-amber-500 before:border-amber-800/12",
+      },
+      {
+        theme: "dark",
+        color: "success",
+        class: "bg-green-500 before:border-green-800/12",
+      },
+      {
+        theme: "dark",
+        color: "info",
+        class: "bg-blue-500 before:border-blue-800/12",
+      },
+      // Modern sizes
+      { theme: "modern", size: "sm", class: "size-8 rounded-md" },
+      { theme: "modern", size: "md", class: "size-10 rounded-lg" },
+      { theme: "modern", size: "lg", class: "size-12 rounded-[10px]" },
+      { theme: "modern", size: "xl", class: "size-14 rounded-xl" },
+      // Modern colors
+      {
+        theme: "modern",
+        class: "text-foreground ring-border",
+      },
+      // Modern Neue sizes
+      { theme: "modern-neue", size: "sm", class: "size-8 rounded-[8px] before:rounded-[4px]" },
+      { theme: "modern-neue", size: "md", class: "size-10 rounded-[10px] before:rounded-[6px]" },
+      { theme: "modern-neue", size: "lg", class: "size-12 rounded-[12px] before:rounded-[8px]" },
+      { theme: "modern-neue", size: "xl", class: "size-14 rounded-[14px] before:rounded-[10px]" },
+      // Modern Neue colors
+      {
+        theme: "modern-neue",
+        class: "text-foreground ring-border",
+      },
+      // Outline sizes
+      { theme: "outline", size: "sm", class: "size-4 before:size-6 after:size-8.5" },
+      { theme: "outline", size: "md", class: "size-5 before:size-7 after:size-9.5" },
+      { theme: "outline", size: "lg", class: "size-6 before:size-8 after:size-10.5" },
+      { theme: "outline", size: "xl", class: "size-7 before:size-9 after:size-11.5" },
+      // Outline colors
+      {
+        theme: "outline",
+        color: "primary",
+        class: "text-primary before:border-primary/30 after:border-primary/10",
+      },
+      {
+        theme: "outline",
+        color: "gray",
+        class:
+          "text-muted-foreground before:border-muted-foreground/30 after:border-muted-foreground/10",
+      },
+      {
+        theme: "outline",
+        color: "error",
+        class: "text-red-500 before:border-red-500/30 after:border-red-500/10",
+      },
+      {
+        theme: "outline",
+        color: "warning",
+        class: "text-amber-500 before:border-amber-500/30 after:border-amber-500/10",
+      },
+      {
+        theme: "outline",
+        color: "success",
+        class: "text-green-500 before:border-green-500/30 after:border-green-500/10",
+      },
+      {
+        theme: "outline",
+        color: "info",
+        class: "text-blue-500 before:border-blue-500/30 after:border-blue-500/10",
+      },
+    ],
+    defaultVariants: { theme: "light", size: "md", color: "primary" },
+  });
+</script>

package/app/components/Ui/GradientDivider.vue

@@ -0,0 +1,26 @@
+<template>
+  <Separator
+    v-bind="forwarded"
+    :class="styles({ class: normalizeClass(props.class) || undefined })"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { Separator } from "reka-ui";
+  import type { SeparatorProps } from "reka-ui";
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  const props = defineProps<
+    SeparatorProps & {
+      /** Custom class(es) to add to parent element */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+
+  const forwarded = reactiveOmit(props, "class");
+
+  const styles = tv({
+    base: "h-px w-full border-t-0 bg-[linear-gradient(90deg,--alpha(var(--input)/10%),var(--input),--alpha(var(--input)/10%))]",
+  });
+</script>

package/app/components/Ui/IframeLazy.vue

@@ -0,0 +1,97 @@
+<template>
+  <div ref="root" :class="styles().wrapper({ class: normalizeClass(props.class) || undefined })">
+    <div v-if="!visible && placeholder" class="size-full">
+      <slot name="placeholder"> <div class="size-full bg-muted" /> </slot>
+    </div>
+
+    <iframe
+      v-show="visible"
+      :src="visible ? src : undefined"
+      :class="styles().iframe({ class: normalizeClass(iframeClass) || undefined })"
+      :loading
+      frameborder="0"
+      allowfullscreen
+      :scrolling="disableScroll ? 'no' : 'yes'"
+      @load="$emit('load', $event)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes } from "vue";
+
+  defineEmits<{ load: [event: Event] }>();
+
+  type IFrameLazyProps = {
+    /**
+     * The URL of the page to embed in the iframe.
+     */
+    src?: string;
+    /**
+     * Additional classes to apply to the wrapper element.
+     */
+    class?: HTMLAttributes["class"];
+    /**
+     * Additional classes to apply to the iframe element.
+     */
+    iframeClass?: HTMLAttributes["class"];
+    /**
+     * Indicates when the browser should load the iframe
+     *
+     * - `lazy`: Load the iframe when it is about to come into view.
+     * - `eager`: Load the iframe immediately.
+     *
+     * @default "lazy"
+     */
+    loading?: "lazy" | "eager";
+    /**
+     * Whether to show a placeholder before the iframe is loaded.
+     *
+     * @default true
+     */
+    placeholder?: boolean;
+    /**
+     * A string which specifies a set of offsets to add to the root's bounding box when calculating intersections.
+     *
+     * @default "150px"
+     */
+    rootMargin?: string;
+    /**
+     * Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target.
+     * @default 0
+     */
+    threshold?: number | number[];
+    /**
+     * Disable scrolling within the iframe.
+     */
+    disableScroll?: boolean;
+  };
+
+  const props = withDefaults(defineProps<IFrameLazyProps>(), {
+    loading: "lazy",
+    rootMargin: "150px",
+    placeholder: true,
+  });
+
+  const styles = tv({
+    slots: {
+      wrapper: "relative size-full",
+      iframe: "size-full",
+    },
+  });
+
+  const root = useTemplateRef("root");
+  const visible = shallowRef(false);
+
+  useIntersectionObserver(
+    root,
+    ([entry], observerElement) => {
+      if (entry?.isIntersecting) {
+        visible.value = true;
+        observerElement?.disconnect();
+      }
+    },
+    { root: null, rootMargin: props.rootMargin, threshold: props.threshold }
+  );
+</script>

package/app/components/Ui/Input.vue

@@ -0,0 +1,97 @@
+<template>
+  <input
+    v-bind="props"
+    ref="input"
+    data-slot="input"
+    :class="styles({ class: normalizeClass(props.class) || undefined, type: props.type as any })"
+    :value="modelValue"
+    @input="handleInput"
+  />
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+  import type { HTMLAttributes, InputHTMLAttributes } from "vue";
+
+  export type InputProps = {
+    /** Additional classes to add to the input */
+    class?: HTMLAttributes["class"];
+    /** The id of the input */
+    id?: string;
+    /** The name of the input */
+    name?: string;
+    /** The placeholder of the input */
+    placeholder?: string;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Whether the input is required */
+    required?: boolean;
+    /** The type of the input */
+    type?: InputHTMLAttributes["type"];
+    /** The value of the input */
+    modelValue?: any;
+    /** The maximum length of the input */
+    maxlength?: number;
+    /** The `RegExp` pattern of the input */
+    pattern?: string;
+    /** When `true`, the input will be focused when mounted */
+    autofocus?: boolean;
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<InputProps>(), {
+    type: "text",
+    modelValue: "",
+  });
+
+  const inputRef = useTemplateRef("input");
+
+  const emit = defineEmits<{
+    "update:modelValue": [value: string];
+  }>();
+
+  const handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    let value = target.value;
+
+    /* val input with pattern */
+    if (props.pattern) {
+      const regex = new RegExp(props.pattern);
+      value = Array.from(value)
+        .filter((char) => regex.test(char))
+        .join("");
+    }
+
+    /* Handle maxlength */
+    if (props.maxlength) {
+      value = value.slice(0, props.maxlength);
+    }
+
+    target.value = value;
+    emit("update:modelValue", value);
+  };
+
+  const styles = tv({
+    base: [
+      "flex h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none selection:bg-primary selection:text-primary-foreground file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground/70 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 dark:bg-input/30",
+      "focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50",
+      "aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40",
+    ],
+    variants: {
+      type: {
+        search:
+          "[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none [&::-webkit-search-results-button]:appearance-none [&::-webkit-search-results-decoration]:appearance-none",
+        file: "p-0 pr-3 text-muted-foreground/70 italic file:me-3 file:h-full file:border-0 file:border-r file:border-solid file:border-input file:bg-transparent file:px-3 file:text-sm file:font-medium file:text-foreground file:not-italic",
+      },
+    },
+  });
+
+  onMounted(() => {
+    if (props.autofocus) {
+      inputRef.value?.focus();
+    }
+  });
+
+  defineExpose({ inputRef });
+</script>

package/app/components/Ui/InputGroup/Addon.vue

@@ -0,0 +1,66 @@
+<template>
+  <Primitive
+    v-bind="forwarded"
+    role="group"
+    data-slot="input-group-addon"
+    :data-align="align || undefined"
+    :class="inputGroupAddonVariants({ class: normalizeClass(props.class) || undefined, align })"
+    @click="onClick"
+  >
+    <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";
+
+  const inputGroupAddonVariants = tv({
+    base: "flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+
+    variants: {
+      align: {
+        "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5 [.border-b]:pb-3",
+        "block-end":
+          "order-last w-full flex-wrap justify-start gap-y-2 px-3 pb-3 group-has-[>input]/input-group:pb-2.5 [.border-t]:pt-3",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  });
+
+  export type InputGroupAddonVariants = PrimitiveProps & {
+    /**
+     * Alignment of the addon within the input group.
+     * @default "inline-start"
+     */
+    align?: VariantProps<typeof inputGroupAddonVariants>["align"];
+    /**
+     * Additional classes to apply to the input group addon container.
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<InputGroupAddonVariants>(), {
+    align: "inline-start",
+  });
+
+  const forwarded = reactiveOmit(props, ["align", "class"]);
+
+  const onClick = (e: any) => {
+    if ((e.target as HTMLElement).closest("button")) {
+      return;
+    }
+    // Focus the associated input, textarea, or textbox when the addon is clicked.
+    e.currentTarget?.parentElement?.querySelector("input, textarea, [role='textbox']")?.focus();
+  };
+</script>

package/app/components/Ui/InputGroup/Button.vue

@@ -0,0 +1,50 @@
+<template>
+  <UiButton
+    data-slot="input-group-button"
+    v-bind="forwarded"
+    :data-size="size"
+    :class="inputGroupButtonVariants({ class: normalizeClass(props.class) || undefined, size })"
+  >
+    <slot />
+  </UiButton>
+</template>
+
+<script lang="ts">
+  import type { VariantProps } from "tailwind-variants";
+  import { normalizeClass } from "vue";
+
+  import type { ButtonProps } from "@/components/Ui/Button.vue";
+
+  export const inputGroupButtonVariants = tv({
+    base: "flex items-center gap-2 text-sm shadow-none",
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  });
+
+  export type InputGroupAddonVariants = Omit<ButtonProps, "size"> & {
+    /**
+     * The size of the button within the input group.
+     * @default "xs"
+     */
+    size?: VariantProps<typeof inputGroupButtonVariants>["size"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = withDefaults(defineProps<InputGroupAddonVariants>(), {
+    size: "xs",
+    variant: "ghost",
+    type: "button",
+  });
+
+  const forwarded = reactiveOmit(props, ["size", "class"]);
+</script>

package/app/components/Ui/InputGroup/Input.vue

@@ -0,0 +1,25 @@
+<template>
+  <UiInput
+    v-bind="forwarded"
+    data-slot="input-group-input"
+    :class="inputGroupInputStyles({ class: normalizeClass(props.class) || undefined })"
+  >
+    <slot />
+  </UiInput>
+</template>
+
+<script lang="ts">
+  import { normalizeClass } from "vue";
+
+  import type { InputProps } from "@/components/Ui/Input.vue";
+
+  const inputGroupInputStyles = tv({
+    base: "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+  });
+</script>
+
+<script lang="ts" setup>
+  const props = defineProps<InputProps>();
+
+  const forwarded = reactiveOmit(props, ["class"]);
+</script>

package/app/components/Ui/InputGroup/InputGroup.vue

@@ -0,0 +1,44 @@
+<template>
+  <Primitive
+    v-bind="props"
+    data-slot="input-group"
+    role="group"
+    :class="inputGroupStyles({ 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 inputGroupStyles = tv({
+    base: [
+      "group/input-group relative flex w-full items-center rounded-md border border-input shadow-xs transition-[color,box-shadow] outline-none dark:bg-input/30",
+      "h-9 has-[>textarea]:h-auto",
+      // Variants based on alignment.
+      "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+      "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+      "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+      "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+      // Focus state.
+      "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50",
+      // Error state.
+      "has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-destructive/20 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+    ],
+  });
+</script>
+
+<script lang="ts" setup>
+  const props = defineProps<
+    PrimitiveProps & {
+      /**
+       * Additional classes to apply to the input group container.
+       */
+      class?: HTMLAttributes["class"];
+    }
+  >();
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+  <Primitive
+    v-bind="forwarded"
+    data-slot="input-group-text"
+    :class="inputGroupTextStyles({ 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";
+
+  const inputGroupTextStyles = tv({
+    base: "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+  });
+
+  export type InputGroupText = PrimitiveProps & {
+    /**
+     * Additional classes to apply to the input group addon container.
+     */
+    class?: HTMLAttributes["class"];
+  };
+</script>
+
+<script lang="ts" setup>
+  const props = defineProps<InputGroupText>();
+
+  const forwarded = reactiveOmit(props, ["class"]);
+</script>