@baybreezy/docd 0.1.9 → 0.1.11

package/app/components/Ui/Badge.vue

@@ -60,17 +60,17 @@
 
   const props = defineProps<
     NuxtLinkProps & {
-      /** Any additional class that should be added to the badge */
+      /** Any additional class that should be added to the badge. */
       class?: HTMLAttributes["class"];
-      /** The variant of the badge */
+      /** The variant of the badge. */
       variant?: BadgeProps["variant"];
-      /** The size of the badge */
+      /** The size of the badge. */
       size?: BadgeProps["size"];
-      /** The action to perform when the badge is clicked */
+      /** The action to perform when the badge is clicked. */
       onClick?: () => void;
-      /** Should the badge be disabled or not */
+      /** Should the badge be disabled or not. */
       disabled?: boolean;
-      /** The element to render the badge as */
+      /** The element to render the badge as. */
       tag?: string;
     }
   >();

package/app/components/Ui/BadgeGroup.vue

@@ -68,21 +68,21 @@
 <script setup lang="ts">
   const props = withDefaults(
     defineProps<{
-      /** The text shown in the badge addon pill */
+      /** The text shown in the badge addon pill. */
       addonText: string;
-      /** Size of the badge group */
+      /** Size of the badge group. */
       size?: BadgeGroupSize;
-      /** Color variant — only applies to the light theme */
+      /** Color variant — only applies to the light theme. */
       color?: BadgeGroupColor;
       /** Visual theme: pill-style (light) or card-style with dot (modern) */
       theme?: BadgeGroupTheme;
-      /** Whether the badge addon appears before or after the main text */
+      /** Whether the badge addon appears before or after the main text. */
       align?: BadgeGroupAlign;
       /** Icon name passed to `<Icon>`. Set to `false` to hide the icon. */
       icon?: string | false;
-      /** Animate the modern theme dot with a ping pulse */
+      /** Animate the modern theme dot with a ping pulse. */
       pulse?: boolean;
-      /** Additional classes applied to the root element */
+      /** Additional classes applied to the root element. */
       class?: HTMLAttributes["class"];
     }>(),
     {

package/app/components/Ui/BgPattern/Grid.vue

@@ -88,10 +88,11 @@
   export type BgPatternGridSize = "sm" | "md" | "lg";
 
   export type BgPatternGridProps = {
-    /** Additional CSS classes */
+    /** Additional CSS classes. */
     class?: HTMLAttributes["class"];
     /**
-     * Size of the pattern
+     * Size of the pattern.
+     *
      * @default "lg"
      */
     size?: BgPatternGridSize;

package/app/components/Ui/BorderBeam.vue

@@ -37,45 +37,25 @@
   import type { CSSProperties, HTMLAttributes } from "vue";
 
   interface BorderBeamProps {
-    /**
-     * The size of the border beam.
-     */
+    /** The size of the border beam. */
     size?: number;
-    /**
-     * The duration of the border beam.
-     */
+    /** The duration of the border beam. */
     duration?: number;
-    /**
-     * The delay of the border beam.
-     */
+    /** The delay of the border beam. */
     delay?: number;
-    /**
-     * The color of the border beam from.
-     */
+    /** The color of the border beam from. */
     colorFrom?: string;
-    /**
-     * The color of the border beam to.
-     */
+    /** The color of the border beam to. */
     colorTo?: string;
-    /**
-     * The motion transition of the border beam.
-     */
+    /** The motion transition of the border beam. */
     transition?: Transition;
-    /**
-     * The class name of the border beam.
-     */
+    /** The class name of the border beam. */
     class?: HTMLAttributes["class"];
-    /**
-     * The style of the border beam.
-     */
+    /** The style of the border beam. */
     style?: CSSProperties;
-    /**
-     * Whether to reverse the animation direction.
-     */
+    /** Whether to reverse the animation direction. */
     reverse?: boolean;
-    /**
-     * The initial offset position (0-100).
-     */
+    /** The initial offset position (0-100). */
     initialOffset?: number;
   }
 </script>

package/app/components/Ui/Breadcrumbs.vue

@@ -65,22 +65,16 @@
     link?: string;
     disabled?: boolean;
     slot?: string;
-    click?: () => void;
+    click?: Function;
   }
 
   const props = withDefaults(
     defineProps<{
-      /**
-       * The items to display in the breadcrumbs.
-       */
+      /** The items to display in the breadcrumbs. */
       items?: BreadcrumbItem[];
-      /**
-       * The separator to use between each breadcrumb.
-       */
+      /** The separator to use between each breadcrumb. */
       separator?: string;
-      /**
-       * Custom class(es) to add to the parent element.
-       */
+      /** Custom class(es) to add to the parent element. */
       class?: HTMLAttributes["class"];
     }>(),
     {
@@ -91,6 +85,7 @@
 
   /**
    * Detects if the current item is not the last item in the breadcrumbs.
+   *
    * @param index - The index of the current item.
    */
   const isNotLastItem = (index: number) => {

package/app/components/Ui/Button.vue

@@ -9,6 +9,7 @@
         size: size,
         class: normalizeClass(props.class) || undefined,
         effect: props.effect,
+        skeuomorphic: props.skeuomorphic,
       })
     "
     :disabled="disabled || loading"
@@ -47,9 +48,7 @@
 
   import type { NuxtLinkProps } from "#app/components";
 
-  /**
-   * Exported button styles that can be used by other 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: {
@@ -62,6 +61,8 @@
         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",
+        gradient:
+          "bg-[linear-gradient(314deg,color-mix(in_oklch,var(--primary),white_33%),var(--primary))] text-primary-foreground shadow-xs transition-[filter] hover:brightness-110",
       },
       effect: {
         expandIcon: "group relative gap-0",
@@ -97,6 +98,9 @@
       hasIcon: {
         false: "gap-2",
       },
+      skeuomorphic: {
+        true: "[box-shadow:0px_0px_0px_1px_rgba(0,0,0,0.18)_inset,0px_-2px_0px_0px_rgba(0,0,0,0.05)_inset,var(--shadow-xs)]",
+      },
     },
     defaultVariants: {
       variant: "default",
@@ -105,34 +109,34 @@
   });
   export type ButtonVariants = VariantProps<typeof buttonStyles>;
   export type ButtonProps = NuxtLinkProps & {
-    /** The type for the button */
+    /** The type for the button. */
     type?: "button" | "submit" | "reset";
-    /** Whether the button is disabled */
+    /** Whether the button is disabled. */
     disabled?: boolean;
-    /** Whether the button is loading */
+    /** Whether the button is loading. */
     loading?: boolean;
-    /** The action to perform when the button is clicked */
+    /** The action to perform when the button is clicked. */
     onClick?: any;
-    /** The element to render the button as */
+    /** The element to render the button as. */
     as?: string;
-    /** Custom class(es) to add to parent element */
+    /** Custom class(es) to add to parent element. */
     class?: HtmlHTMLAttributes["class"];
-    /** The variant of the button */
+    /** The variant of the button. */
     variant?: ButtonVariants["variant"];
-    /** The size of the button */
+    /** The size of the button. */
     size?: ButtonVariants["size"];
-    /**
-     * The effect to apply to the button.
-     */
+    /** The effect to apply to the button. */
     effect?: ButtonVariants["effect"];
-    /** The text to display in the button */
+    /** 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 */
+    /** The icon to display in the button. */
     icon?: string;
-    /** The icon to display when the button is loading */
+    /** The icon to display when the button is loading. */
     loadingIcon?: string;
+    /** Applies an inset skeuomorphic shadow for a tactile, raised appearance. */
+    skeuomorphic?: boolean;
   };
 </script>
 
@@ -163,7 +167,8 @@
       "loading",
       "disabled",
       "loadingIcon",
-      "effect"
+      "effect",
+      "skeuomorphic"
     )
   );
 </script>

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

@@ -35,12 +35,11 @@
   export type ButtonGroupProps = PrimitiveProps & {
     /**
      * The orientation of the button group.
-     * @default 'horizontal'
+     *
+     * @default "horizontal"
      */
     orientation?: VariantProps<typeof buttonGroupVariants>["orientation"];
-    /**
-     * Additional classes to apply to the button group.
-     */
+    /** Additional classes to apply to the button group. */
     class?: HTMLAttributes["class"];
   };
 </script>

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

@@ -18,13 +18,9 @@
   });
 
   export type ButtonGroupSeparatorProps = {
-    /**
-     * The orientation of the separator.
-     */
+    /** The orientation of the separator. */
     orientation?: "horizontal" | "vertical";
-    /**
-     * Additional classes to apply to the button group text.
-     */
+    /** Additional classes to apply to the button group text. */
     class?: HTMLAttributes["class"];
   };
 </script>

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

@@ -19,9 +19,7 @@
   });
 
   export type ButtonGroupTextProps = PrimitiveProps & {
-    /**
-     * Additional classes to apply to the button group text.
-     */
+    /** Additional classes to apply to the button group text. */
     class?: HTMLAttributes["class"];
   };
 </script>

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

@@ -18,7 +18,7 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
       }
     >(),

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

@@ -39,13 +39,13 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
-        /** Title that should be displayed. Passed to the `CardTitle` component */
+        /** Title that should be displayed. Passed to the `CardTitle` component. */
         title?: string;
-        /** Description that should be displayed. Passed to the `CardDescription` component */
+        /** Description that should be displayed. Passed to the `CardDescription` component. */
         description?: string;
-        /** Content that should be displayed. Passed to the `CardContent` component */
+        /** Content that should be displayed. Passed to the `CardContent` component. */
         content?: string;
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
       }
     >(),

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

@@ -20,9 +20,9 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
-        /** Content to display in the card */
+        /** Content to display in the card. */
         content?: string;
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
       }
     >(),

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

@@ -20,9 +20,9 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
-        /** Description to display in the card */
+        /** Description to display in the card. */
         description?: string;
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
       }
     >(),

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

@@ -18,7 +18,7 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
       }
     >(),

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

@@ -18,7 +18,7 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
       }
     >(),

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

@@ -20,9 +20,9 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
-        /** Title to display in the card */
+        /** Title to display in the card. */
         title?: string;
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
       }
     >(),

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

@@ -16,7 +16,7 @@
 
   const props = defineProps<
     CollapsibleContentProps & {
-      /** Customer class(es) to add to the element */
+      /** Customer class(es) to add to the element. */
       class?: HTMLAttributes["class"];
     }
   >();

package/app/components/Ui/Command/Command.vue

@@ -61,13 +61,7 @@
   });
 
   function filterItems() {
-    const tokens = filterState.search
-      .trim()
-      .split(/\s+/)
-      .map((token) => token.trim())
-      .filter(Boolean);
-
-    if (!tokens.length) {
+    if (!filterState.search) {
       filterState.filtered.count = allItems.value.size;
       // Do nothing, each item will know to show itself because search is empty
       return;
@@ -79,17 +73,9 @@
 
     // Check which items should be included
     for (const [id, value] of allItems.value) {
-      let score = 0;
-      for (const token of tokens) {
-        if (!contains(value, token)) {
-          score = 0;
-          break;
-        }
-        score += 1;
-      }
-
-      filterState.filtered.items.set(id, score);
-      if (score > 0) itemCount++;
+      const score = contains(value, filterState.search);
+      filterState.filtered.items.set(id, score ? 1 : 0);
+      if (score) itemCount++;
     }
 
     // Check which groups have at least 1 item shown

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

@@ -41,13 +41,9 @@
          * @default true
          */
         showCloseButton?: boolean;
-        /**
-         * Whether to render the dialog content with a translucent surface.
-         */
+        /** Whether to render the dialog content with a translucent surface. */
         translucent?: boolean;
-        /**
-         * When `true`, hover over item will trigger highlight
-         */
+        /** When `true`, hover over item will trigger highlight. */
         highlightOnHover?: boolean;
       }
     >(),

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

@@ -27,7 +27,7 @@
   import { Primitive, type PrimitiveProps } from "reka-ui";
   import { normalizeClass, type HTMLAttributes } from "vue";
   export type CommandFooterProps = PrimitiveProps & {
-    /** Custom class(es) to add to the element */
+    /** Custom class(es) to add to the element. */
     class?: HTMLAttributes["class"];
   };
   const styles = tv({

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

@@ -29,7 +29,7 @@
 
   const props = defineProps<
     ListboxGroupProps & {
-      /** Custom class(es) to add to the element */
+      /** Custom class(es) to add to the element. */
       class?: HTMLAttributes["class"];
       heading?: string;
     }

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

@@ -32,7 +32,7 @@
   const props = withDefaults(
     defineProps<
       ListboxFilterProps & {
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
         /**
          * The name of the icon to display for the search input.

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

@@ -38,13 +38,13 @@
 
   const props = defineProps<
     ListboxItemProps & {
-      /** Custom class(es) to add to the element */
+      /** Custom class(es) to add to the element. */
       class?: HTMLAttributes["class"];
-      /** Icon to render */
+      /** Icon to render. */
       icon?: string;
-      /** Text to render */
+      /** Text to render. */
       text?: string;
-      /** Shortcut to render */
+      /** Shortcut to render. */
       shortcut?: string;
     }
   >();
@@ -60,7 +60,7 @@
   const groupContext = useCommandGroup();
 
   const styles = tv({
-    base: "group/command-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none in-data-[slot=dialog-content]:rounded-lg! data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:bg-muted data-[state=checked]:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+    base: "group/command-item relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none in-data-[slot=dialog-content]:rounded-lg! data-highlighted:bg-accent data-highlighted:text-accent-foreground data-[state=checked]:bg-muted data-[state=checked]:text-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
   });
 
   const isRender = computed(() => {

package/app/components/Ui/Command/List.vue

@@ -20,7 +20,7 @@
 
   const props = defineProps<
     ListboxContentProps & {
-      /** Custom class(es) to add to the element */
+      /** Custom class(es) to add to the element. */
       class?: HTMLAttributes["class"];
     }
   >();

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

@@ -18,7 +18,7 @@
 
   const props = defineProps<
     SeparatorProps & {
-      /** Custom class(es) to add to the element */
+      /** Custom class(es) to add to the element. */
       class?: HTMLAttributes["class"];
     }
   >();

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

@@ -16,9 +16,9 @@
 
   const props = defineProps<
     PrimitiveProps & {
-      /** Custom class(es) to add to the element */
+      /** Custom class(es) to add to the element. */
       class?: HTMLAttributes["class"];
-      /** The shortcut text to render */
+      /** The shortcut text to render. */
       shortcut?: any;
     }
   >();

package/app/components/Ui/Container.vue

@@ -18,9 +18,9 @@
   const props = withDefaults(
     defineProps<
       PrimitiveProps & {
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
-        /** Whether to constrain the width of the container */
+        /** Whether to constrain the width of the container. */
         constrained?: boolean;
       }
     >(),

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

@@ -20,9 +20,9 @@
   const props = withDefaults(
     defineProps<
       ContextMenuArrowProps & {
-        /** Custom class(es) to add to the arrow */
+        /** Custom class(es) to add to the arrow. */
         class?: HTMLAttributes["class"];
-        /** Whether to render the arrow with a translucent surface */
+        /** Whether to render the arrow with a translucent surface. */
         translucent?: boolean;
       }
     >(),

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

@@ -24,11 +24,11 @@
 
   const props = defineProps<
     ContextMenuCheckboxItemProps & {
-      /**Custom class(es) to add to the element */
+      /** Custom class(es) to add to the element. */
       class?: HTMLAttributes["class"];
-      /**The shortcut for the item */
+      /** The shortcut for the item. */
       shortcut?: string;
-      /**The title for the item */
+      /** The title for the item. */
       title?: string;
     }
   >();

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

@@ -25,9 +25,9 @@
   const props = withDefaults(
     defineProps<
       ContextMenuContentProps & {
-        /** Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
-        /** Whether to render the content with a translucent surface */
+        /** Whether to render the content with a translucent surface. */
         translucent?: boolean;
       }
     >(),

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

@@ -24,17 +24,15 @@
   const props = withDefaults(
     defineProps<
       ContextMenuItemProps & {
-        /**Custom class(es) to add to the element */
+        /** Custom class(es) to add to the element. */
         class?: HTMLAttributes["class"];
-        /** Wether an indentation should be added to the item or not */
+        /** Wether an indentation should be added to the item or not. */
         inset?: boolean;
-        /** The shortcut for the item */
+        /** The shortcut for the item. */
         shortcut?: string;
-        /** The title for the item */
+        /** The title for the item. */
         title?: string;
-        /**
-         * The variant of the item.
-         */
+        /** The variant of the item. */
         variant?: "default" | "destructive";
       }
     >(),
@@ -50,7 +48,7 @@
   );
 
   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!",
+    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-[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 data-disabled:pointer-events-none data-disabled:opacity-50 [&_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",

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

@@ -17,7 +17,7 @@
 
   const props = defineProps<
     ContextMenuItemIndicatorProps & {
-      /** The icon to display */
+      /** The icon to display. */
       icon?: string;
       class?: HTMLAttributes["class"];
     }