@lupinum/ginko-docs 0.2.2 → 0.2.3

package/app/components/mdc/MdcDocImg.vue

@@ -1,25 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-/**
- * Wrap standalone `![alt](url)` lines in markdown with this block so Comark can
- * keep the image outside paragraph wrappers.
- * Avoids invalid `<p><figure>...</figure></p>` and hydration mismatches.
- *
- * @example
- * ::doc-img
- * ![Alt text](https://shadcn-starter.ginko-content.dev/images/example.jpg)
- * ::
- */
-const props = withDefaults(defineProps<{ bleed?: boolean | string }>(), { bleed: undefined });
-
-const shouldBleed = computed(
-  () => props.bleed === true || props.bleed === "true" || props.bleed === "outside",
-);
-</script>
-
-<template>
-  <div class="content-doc-img" :data-bleed="shouldBleed ? 'true' : undefined">
-    <slot unwrap="p" />
-  </div>
-</template>

package/app/components/mdc/MdcField.vue

@@ -1,62 +0,0 @@
-<script setup lang="ts">
-import { inject } from "vue";
-
-const MDC_FIELD_GROUP = Symbol.for("mdc.fieldGroup");
-const inFieldGroup = inject(MDC_FIELD_GROUP, false);
-
-defineProps<{
-  name: string;
-  type?: string;
-  required?: boolean;
-  description?: string;
-  defaultValue?: string;
-}>();
-</script>
-
-<template>
-  <div
-    data-slot="card"
-    :class="
-      inFieldGroup
-        ? 'not-prose flex flex-col gap-0 rounded-none border-0 bg-transparent py-0 text-card-foreground shadow-none ring-0 outline-none'
-        : 'not-prose my-4 flex flex-col gap-0 rounded-xl border bg-card py-0 text-card-foreground shadow-xs'
-    "
-  >
-    <div data-slot="card-content" class="space-y-4 px-6 py-6">
-      <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
-        <div class="flex flex-wrap items-center gap-2">
-          <code class="relative rounded-md bg-muted px-1 font-sans font-normal text-foreground">
-            {{ name }}
-          </code>
-
-          <span
-            v-if="required"
-            class="inline-flex items-center rounded-full border border-transparent bg-secondary px-2.5 py-0.5 text-xs font-semibold text-secondary-foreground"
-          >
-            Required
-          </span>
-        </div>
-
-        <span v-if="type" class="font-mono text-sm text-muted-foreground sm:ml-auto">
-          {{ type }}
-        </span>
-      </div>
-
-      <div class="content-prose content-prose-trim text-muted-foreground">
-        <slot v-if="$slots.default" unwrap="p" />
-        <span v-else-if="description">{{ description }}</span>
-      </div>
-    </div>
-
-    <div
-      v-if="defaultValue"
-      data-slot="card-footer"
-      class="flex flex-wrap items-center gap-2 border-t border-border pb-6 text-sm"
-    >
-      <span class="font-medium text-foreground">Default:</span>
-      <code class="relative rounded-md bg-muted px-1 font-sans font-normal text-muted-foreground">
-        {{ defaultValue }}
-      </code>
-    </div>
-  </div>
-</template>

package/app/components/mdc/MdcFieldGroup.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { provide } from "vue";
-
-const MDC_FIELD_GROUP = Symbol.for("mdc.fieldGroup");
-
-provide(MDC_FIELD_GROUP, true);
-</script>
-
-<template>
-  <div
-    data-slot="card"
-    class="not-prose my-4 flex flex-col gap-0 overflow-hidden rounded-xl border bg-card py-0 text-card-foreground shadow-xs"
-  >
-    <div class="flex flex-col divide-y divide-border">
-      <slot />
-    </div>
-  </div>
-</template>

package/app/components/mdc/MdcPassage.vue

@@ -1,32 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-const props = defineProps<{
-  /** Short label above the block (e.g. excerpt, chapter). */
-  label?: string;
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <aside class="not-prose my-4">
-    <div
-      data-slot="card"
-      :class="
-        cn(
-          'content-prose content-prose-trim gap-0 rounded-xl border border-border bg-muted/40 px-4 py-3 text-muted-foreground shadow-xs',
-          props.class,
-        )
-      "
-    >
-      <p
-        v-if="label"
-        class="mb-3 text-xs font-medium tracking-wider text-muted-foreground uppercase"
-      >
-        {{ label }}
-      </p>
-      <slot />
-    </div>
-  </aside>
-</template>

package/app/components/mdc/MdcQuizOption.vue

@@ -1,91 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue";
-import { cn } from "../../utils";
-
-const props = withDefaults(
-  defineProps<{
-    correct?: boolean;
-    selected?: boolean;
-    disabled?: boolean;
-    showResult?: boolean;
-    optionIndex?: number;
-    label?: string;
-  }>(),
-  {
-    correct: false,
-    selected: false,
-    disabled: false,
-    showResult: false,
-    optionIndex: 0,
-  },
-);
-
-const emit = defineEmits<{
-  select: [];
-}>();
-
-const letter = computed(() => String.fromCharCode(65 + props.optionIndex));
-
-const stateClass = computed(() => {
-  if (props.showResult && props.correct) {
-    return "border-success bg-success/10 text-foreground";
-  }
-  if (props.showResult && props.selected && !props.correct) {
-    return "border-destructive bg-destructive/10 text-foreground";
-  }
-  if (props.selected) {
-    return "border-primary bg-primary/5 ring-2 ring-primary/20";
-  }
-  return "";
-});
-
-const iconName = computed(() => {
-  if (!props.showResult) return null;
-  if (props.correct) return "lucide:circle-check";
-  if (props.selected) return "lucide:circle-x";
-  return null;
-});
-</script>
-
-<template>
-  <button
-    type="button"
-    :disabled="disabled"
-    :class="
-      cn(
-        'flex w-full items-center gap-3 rounded-lg border bg-background px-4 py-3 text-left text-sm transition-all',
-        !disabled && !showResult && 'cursor-pointer hover:bg-accent/50',
-        disabled && 'cursor-default',
-        stateClass,
-      )
-    "
-    @click="!disabled && emit('select')"
-  >
-    <span
-      :class="
-        cn(
-          'flex size-6 shrink-0 items-center justify-center rounded-md text-xs font-semibold',
-          selected && !showResult && 'bg-primary text-primary-foreground',
-          showResult && correct && 'bg-success text-success-foreground',
-          showResult && selected && !correct && 'bg-destructive text-destructive-foreground',
-          !selected && !showResult && 'bg-muted text-muted-foreground',
-          showResult && !correct && !selected && 'bg-muted text-muted-foreground',
-        )
-      "
-    >
-      {{ letter }}
-    </span>
-    <span class="min-w-0 flex-1">
-      <template v-if="label">{{ label }}</template>
-      <slot v-else />
-    </span>
-    <Icon
-      v-if="iconName"
-      :name="iconName"
-      :class="
-        cn('size-4 shrink-0', correct && 'text-success', selected && !correct && 'text-destructive')
-      "
-      aria-hidden="true"
-    />
-  </button>
-</template>

package/app/components/mdc/MdcReadMoreGroup.vue

@@ -1,18 +0,0 @@
-<script setup lang="ts">
-import { provide } from "vue";
-
-const MDC_READ_MORE_GROUP = Symbol.for("mdc.readMoreGroup");
-
-provide(MDC_READ_MORE_GROUP, true);
-</script>
-
-<template>
-  <div
-    data-slot="card"
-    class="not-prose my-6 gap-0 overflow-hidden rounded-xl border bg-card py-0 text-card-foreground shadow-xs transition-colors hover:border-foreground/20"
-  >
-    <div class="flex flex-col divide-y divide-border">
-      <slot />
-    </div>
-  </div>
-</template>

package/app/components/mdc/MdcShortcut.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, ref } from "vue";
-import type { HTMLAttributes } from "vue";
-import { cn } from "../../utils";
-
-interface Props {
-  value?: string;
-  size?: "sm" | "md";
-  class?: HTMLAttributes["class"];
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  size: "md",
-});
-
-const metaSymbol = ref("Ctrl");
-
-// Safe from Nuxt SSR because onMounted only fires on the client
-onMounted(() => {
-  if (typeof navigator !== "undefined" && navigator.userAgent.includes("Macintosh")) {
-    metaSymbol.value = "⌘";
-  }
-});
-
-const resolvedValue = computed(() => {
-  if (props.value === "meta") return metaSymbol.value;
-  return props.value;
-});
-</script>
-
-<template>
-  <kbd
-    :class="
-      cn(
-        'pointer-events-none inline-flex w-fit items-center justify-center gap-1 rounded-sm bg-muted font-sans font-medium text-muted-foreground ring-1 ring-border select-none [&_svg:not([class*=size-])]:size-3',
-        size === 'md' ? 'h-7 min-w-7 px-1.5 text-sm' : 'h-5 min-w-5 px-1 text-xs',
-        props.class,
-      )
-    "
-  >
-    <!-- Provide a slot so users can inject custom icons instead of strings if needed -->
-    <slot>
-      {{ resolvedValue }}
-    </slot>
-  </kbd>
-</template>

package/app/components/mdc/MdcStep.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import type { ComputedRef, HTMLAttributes } from "vue";
-import { computed, inject } from "vue";
-import { cn } from "../../utils";
-import { resolveIconifyIcon } from "./icons";
-
-type StepsVariant = "icons" | "numbered";
-
-const props = defineProps<{
-  title?: string;
-  icon?: string;
-  class?: HTMLAttributes["class"];
-}>();
-
-const stepsVariant = inject<ComputedRef<StepsVariant>>(
-  "mdcStepsVariant",
-  computed(() => "icons"),
-);
-
-const isNumbered = computed(() => stepsVariant.value === "numbered");
-
-const iconName = computed(() => {
-  const icon = props.icon?.trim();
-  if (!icon) return "lucide:circle";
-  return resolveIconifyIcon(icon) ?? "lucide:circle";
-});
-</script>
-
-<template>
-  <div :class="cn('content-step', props.class)">
-    <div class="content-step-marker" aria-hidden="true">
-      <Icon v-if="!isNumbered" :name="iconName" class="size-3.5" />
-    </div>
-
-    <div class="content-step-body content-prose content-prose-trim">
-      <p v-if="title" class="content-step-title">
-        {{ title }}
-      </p>
-      <slot />
-    </div>
-  </div>
-</template>

package/app/components/ui/accordion/Accordion.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import type { AccordionRootEmits, AccordionRootProps } from "reka-ui";
-import { AccordionRoot, useForwardPropsEmits } from "reka-ui";
-
-const props = defineProps<AccordionRootProps>();
-const emits = defineEmits<AccordionRootEmits>();
-
-const forwarded = useForwardPropsEmits(props, emits);
-</script>
-
-<template>
-  <AccordionRoot v-slot="slotProps" data-slot="accordion" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AccordionRoot>
-</template>

package/app/components/ui/accordion/AccordionContent.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-import type { AccordionContentProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { AccordionContent } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<AccordionContentProps & { class?: HTMLAttributes["class"] }>();
-
-const delegatedProps = reactiveOmit(props, "class");
-</script>
-
-<template>
-  <AccordionContent
-    data-slot="accordion-content"
-    v-bind="delegatedProps"
-    class="accordion-content overflow-hidden text-sm"
-  >
-    <div :class="cn('pt-0 pb-4', props.class)">
-      <slot />
-    </div>
-  </AccordionContent>
-</template>

package/app/components/ui/accordion/AccordionItem.vue

@@ -1,24 +0,0 @@
-<script setup lang="ts">
-import type { AccordionItemProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { AccordionItem, useForwardProps } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<AccordionItemProps & { class?: HTMLAttributes["class"] }>();
-
-const delegatedProps = reactiveOmit(props, "class");
-
-const forwardedProps = useForwardProps(delegatedProps);
-</script>
-
-<template>
-  <AccordionItem
-    v-slot="slotProps"
-    data-slot="accordion-item"
-    v-bind="forwardedProps"
-    :class="cn('border-b last:border-b-0', props.class)"
-  >
-    <slot v-bind="slotProps" />
-  </AccordionItem>
-</template>

package/app/components/ui/accordion/AccordionTrigger.vue

@@ -1,35 +0,0 @@
-<script setup lang="ts">
-import type { AccordionTriggerProps } from "reka-ui";
-import type { HTMLAttributes } from "vue";
-import { reactiveOmit } from "@vueuse/core";
-import { AccordionHeader, AccordionTrigger } from "reka-ui";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes["class"] }>();
-
-const delegatedProps = reactiveOmit(props, "class");
-</script>
-
-<template>
-  <AccordionHeader class="flex">
-    <AccordionTrigger
-      data-slot="accordion-trigger"
-      v-bind="delegatedProps"
-      :class="
-        cn(
-          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
-          props.class,
-        )
-      "
-    >
-      <slot />
-      <slot name="icon">
-        <Icon
-          name="lucide:chevron-down"
-          class="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200"
-          aria-hidden="true"
-        />
-      </slot>
-    </AccordionTrigger>
-  </AccordionHeader>
-</template>

package/app/components/ui/accordion/index.ts

@@ -1,4 +0,0 @@
-export { default as Accordion } from "./Accordion.vue";
-export { default as AccordionContent } from "./AccordionContent.vue";
-export { default as AccordionItem } from "./AccordionItem.vue";
-export { default as AccordionTrigger } from "./AccordionTrigger.vue";

package/app/components/ui/alert/Alert.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import type { AlertVariants } from ".";
-import { cn } from "#ginko-docs/lib/utils";
-import { alertVariants } from ".";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-  variant?: AlertVariants["variant"];
-}>();
-</script>
-
-<template>
-  <div
-    data-slot="alert"
-    :class="cn(alertVariants({ variant: props.variant }), props.class)"
-    role="alert"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/ui/alert/AlertDescription.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <div
-    data-slot="alert-description"
-    :class="
-      cn(
-        'col-start-2 text-sm text-balance text-muted-foreground group-has-[>[data-slot=alert-icon]]/alert:col-start-2 md:text-pretty',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>

package/app/components/ui/alert/AlertTitle.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <div
-    data-slot="alert-title"
-    :class="
-      cn(
-        'col-start-2 font-medium group-has-[>[data-slot=alert-icon]]/alert:col-start-2',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>

package/app/components/ui/alert/index.ts

@@ -1,34 +0,0 @@
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-
-export { default as Alert } from "./Alert.vue";
-export { default as AlertDescription } from "./AlertDescription.vue";
-export { default as AlertTitle } from "./AlertTitle.vue";
-
-export const alertVariants = cva(
-  [
-    "group/alert relative grid w-full gap-y-0.5 rounded-lg border px-4 py-3 text-left text-sm items-start",
-    "grid-cols-[0_1fr]",
-    "has-[>[data-slot=alert-icon]]:grid-cols-[auto_1fr]",
-    "has-[>[data-slot=alert-icon]]:gap-x-2.5",
-    "[&>[data-slot=alert-icon]]:col-start-1",
-    "[&>[data-slot=alert-icon]]:row-span-2",
-    "[&>[data-slot=alert-icon]]:size-4",
-    "[&>[data-slot=alert-icon]]:translate-y-0.5",
-    "[&>[data-slot=alert-icon]]:shrink-0",
-  ].join(" "),
-  {
-    variants: {
-      variant: {
-        default: "bg-card text-card-foreground",
-        destructive:
-          "text-destructive bg-card [&>[data-slot=alert-icon]]:text-current *:data-[slot=alert-description]:text-destructive/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export type AlertVariants = VariantProps<typeof alertVariants>;

package/app/components/ui/card/Card.vue

@@ -1,16 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
-import { cardVariants, type CardVariants } from "./card-variants";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-  variant?: CardVariants["variant"];
-}>();
-</script>
-
-<template>
-  <div data-slot="card" :class="cn(cardVariants({ variant: props.variant }), props.class)">
-    <slot />
-  </div>
-</template>

package/app/components/ui/card/CardAction.vue

@@ -1,17 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <div
-    data-slot="card-action"
-    :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)"
-  >
-    <slot />
-  </div>
-</template>

package/app/components/ui/card/CardContent.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <div data-slot="card-content" :class="cn('px-6', props.class)">
-    <slot />
-  </div>
-</template>

package/app/components/ui/card/CardDescription.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <p data-slot="card-description" :class="cn('text-sm text-muted-foreground', props.class)">
-    <slot />
-  </p>
-</template>

package/app/components/ui/card/CardFooter.vue

@@ -1,14 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
-    <slot />
-  </div>
-</template>

package/app/components/ui/card/CardHeader.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { cn } from "#ginko-docs/lib/utils";
-
-const props = defineProps<{
-  class?: HTMLAttributes["class"];
-}>();
-</script>
-
-<template>
-  <div
-    data-slot="card-header"
-    :class="
-      cn(
-        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
-        props.class,
-      )
-    "
-  >
-    <slot />
-  </div>
-</template>

package/app/components/ui/card/card-variants.ts

@@ -1,15 +0,0 @@
-import type { VariantProps } from "class-variance-authority";
-import { cva } from "class-variance-authority";
-
-export const cardVariants = cva("bg-card text-card-foreground border shadow-xs", {
-  variants: {
-    variant: {
-      default: "flex flex-col gap-6 rounded-xl py-6",
-    },
-  },
-  defaultVariants: {
-    variant: "default",
-  },
-});
-
-export type CardVariants = VariantProps<typeof cardVariants>;