rimelight-components 1.4.1 → 1.4.3

package/dist/module.d.mts

@@ -3,6 +3,7 @@ import * as _nuxt_schema from '@nuxt/schema';
 interface CalloutOptions {
     icon: string;
     title: string;
+    tooltip: string;
 }
 interface ModuleOptions {
     callouts: {

package/dist/module.mjs

@@ -4,31 +4,38 @@ const defaultOptions = {
   callouts: {
     info: {
       icon: "lucide:shield-alert",
-      title: "Note"
+      title: "Note",
+      tooltip: "This callout is used for general notes."
     },
     success: {
       icon: "lucide:circle-alert",
-      title: "Tip"
+      title: "Tip",
+      tooltip: "This callout is used for tips and useful information."
     },
     warning: {
       icon: "lucide:triangle-alert",
-      title: "Warning"
+      title: "Warning",
+      tooltip: "This callout is used for important information."
     },
     error: {
       icon: "lucide:octagon-alert",
-      title: "Danger"
+      title: "Danger",
+      tooltip: "This callout is used for critical information and prohibitions."
     },
     commentary: {
       icon: "lucide:message-circle-warning",
-      title: "Commentary"
+      title: "Commentary",
+      tooltip: "This callout is used for developer commentary."
     },
     ideation: {
       icon: "lucide:badge-alert",
-      title: "Ideation"
+      title: "Ideation",
+      tooltip: "This alert is used for ideas and brainstorming."
     },
     source: {
       icon: "lucide:book-alert",
-      title: "Creator's Remarks"
+      title: "Creator's Remarks",
+      tooltip: "This alert is used for direct commentary of the author."
     }
   }
 };

package/dist/runtime/components/content/Callout.d.vue.ts

@@ -2,9 +2,9 @@ export type CalloutVariant = "info" | "success" | "warning" | "error" | "comment
 type __VLS_Props = {
     variant: CalloutVariant;
 };
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/content/Callout.vue

@@ -8,17 +8,34 @@ const { variant } = defineProps({
 const config = computed(() => {
   return appConfig.rimelightComponents?.callouts?.[variant] ?? {
     icon: "lucide:alert-circle",
-    title: "Unknown"
+    title: "Unknown",
+    tooltip: "Callout"
   };
 });
 const icon = computed(() => config.value.icon);
 const title = computed(() => config.value.title);
+const tooltip = computed(() => config.value.tooltip);
 </script>
 
 <template>
-  <UAlert :icon="icon" :title="title" :color="variant" variant="subtle">
+  <UAlert
+    :title="title"
+    :color="variant"
+    variant="subtle"
+    :close="{
+  class: 'pointer-events-none focus-visible:outline-none'
+}"
+  >
+    <template #leading>
+      <UIcon :name="icon" class="size-6" />
+    </template>
     <template #description>
       <slot />
     </template>
+    <template #close>
+      <UTooltip :text="tooltip">
+        <UIcon name="lucide:circle-question-mark" class="size-4" />
+      </UTooltip>
+    </template>
   </UAlert>
 </template>

package/dist/runtime/components/content/Callout.vue.d.ts

@@ -2,9 +2,9 @@ export type CalloutVariant = "info" | "success" | "warning" | "error" | "comment
 type __VLS_Props = {
     variant: CalloutVariant;
 };
-declare var __VLS_8: {};
+declare var __VLS_14: {};
 type __VLS_Slots = {} & {
-    default?: (props: typeof __VLS_8) => any;
+    default?: (props: typeof __VLS_14) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/content/Section.d.vue.ts

@@ -2,6 +2,7 @@ export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type __VLS_Props = {
     level?: SectionLevel;
     title: string;
+    description?: string;
 };
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {

package/dist/runtime/components/content/Section.vue

@@ -2,37 +2,59 @@
 import { tv } from "tailwind-variants";
 const sectionVariants = tv({
   slots: {
-    sectionSlot: "flex flex-col gap-md lg:gap-lg",
-    headingSlot: ""
+    sectionSlot: "flex flex-col py-4",
+    headingSlot: "font-bold",
+    descriptionSlot: "text-muted",
+    separatorSlot: "py-2",
+    contentSlot: "flex flex-col gap-md mt-2"
   },
   variants: {
     level: {
       1: {
-        headingSlot: "text-4xl font-bold"
+        sectionSlot: "gap-2",
+        headingSlot: "text-4xl",
+        descriptionSlot: "text-2xl"
       },
       2: {
-        headingSlot: "text-3xl font-bold"
+        sectionSlot: "gap-1.5",
+        headingSlot: "text-3xl",
+        descriptionSlot: "text-xl"
       },
       3: {
-        headingSlot: "text-2xl font-bold"
+        sectionSlot: "gap-1",
+        headingSlot: "text-2xl",
+        descriptionSlot: "text-lg"
       },
       4: {
-        headingSlot: "text-xl font-bold"
+        sectionSlot: "gap-0.5",
+        headingSlot: "text-xl",
+        descriptionSlot: "text-md"
       },
       5: {
-        headingSlot: "text-lg font-bold"
+        sectionSlot: "gap-0.25",
+        headingSlot: "text-lg",
+        descriptionSlot: "text-sm"
       },
       6: {
-        headingSlot: "text-base font-bold"
+        sectionSlot: "gap-0.125",
+        headingSlot: "text-base",
+        descriptionSlot: "text-xs"
       }
     }
   }
 });
 const { level = 1 } = defineProps({
   level: { type: Number, required: false },
-  title: { type: String, required: true }
+  title: { type: String, required: true },
+  description: { type: String, required: false }
 });
-const { sectionSlot, headingSlot } = sectionVariants({ level });
+const {
+  sectionSlot,
+  headingSlot,
+  descriptionSlot,
+  separatorSlot,
+  contentSlot
+} = sectionVariants({ level });
 </script>
 
 <template>
@@ -40,7 +62,10 @@ const { sectionSlot, headingSlot } = sectionVariants({ level });
     <component :is="`h${level}`" :class="headingSlot()">
       {{ title }}
     </component>
-    <USeparator />
-    <slot />
+    <p v-if="description" :class="descriptionSlot()">{{ description }}</p>
+    <USeparator :class="separatorSlot()" />
+    <div :class="contentSlot()">
+      <slot />
+    </div>
   </section>
 </template>

package/dist/runtime/components/content/Section.vue.d.ts

@@ -2,6 +2,7 @@ export type SectionLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type __VLS_Props = {
     level?: SectionLevel;
     title: string;
+    description?: string;
 };
 declare var __VLS_11: {};
 type __VLS_Slots = {} & {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rimelight-components",
-  "version": "1.4.1",
+  "version": "1.4.3",
   "description": "My new Nuxt module",
   "repository": "Rimelight  Entertainment/rimelight-components",
   "license": "MIT",