rimelight-components 1.4.2 → 1.4.4

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/swatches/ColorSwatch.d.vue.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    name?: string;
     hex?: string;
     rgb?: string;
     hsl?: string;

package/dist/runtime/components/swatches/ColorSwatch.vue

@@ -4,7 +4,8 @@ import { useToast } from "#imports";
 import { computed } from "#imports";
 const { copy } = useClipboard();
 const toast = useToast();
-const { hex, rgb, hsl, oklch, cmyk } = defineProps({
+const { name, hex, rgb, hsl, oklch, cmyk } = defineProps({
+  name: { type: String, required: false },
   hex: { type: String, required: false },
   rgb: { type: String, required: false },
   hsl: { type: String, required: false },
@@ -33,22 +34,25 @@ const color = computed(() => {
   if (hsl) return hsl;
   if (cmyk) return cmyk;
   if (oklch) return oklch;
-  return "primary-500";
+  return "var(--color-primary-500)";
 });
 </script>
 
 <template>
-  <UCard>
-    <div class="flex flex-row gap-sm">
-      <div class="aspect-square size-64" :class="`bg-[${color}]`" />
-      <div class="flex flex-col justify-center gap-sm">
+  <UCard variant="subtle" class="w-fit rounded-none">
+    <template #header v-if="name">
+      <h3 class="text-lg font-bold">{{ name }}</h3>
+    </template>
+    <div class="gap-sm flex flex-row">
+      <div class="aspect-square size-48" :style="{ backgroundColor: color }" />
+      <div class="gap-sm flex flex-col justify-center">
         <UButton
           v-if="hex"
           variant="outline"
           size="sm"
           icon="lucide:copy"
           label="Copy HEX"
-          class="w-32"
+          class="w-28"
           @click="copyToClipboard(hex)"
         />
         <UButton
@@ -57,7 +61,7 @@ const color = computed(() => {
           size="sm"
           icon="lucide:copy"
           label="Copy RGB"
-          class="w-32"
+          class="w-28"
           @click="copyToClipboard(rgb)"
         />
         <UButton
@@ -66,7 +70,7 @@ const color = computed(() => {
           size="sm"
           icon="lucide:copy"
           label="Copy HSL"
-          class="w-32"
+          class="w-28"
           @click="copyToClipboard(hsl)"
         />
         <UButton
@@ -75,7 +79,7 @@ const color = computed(() => {
           size="sm"
           icon="lucide:copy"
           label="Copy OKLCH"
-          class="w-32"
+          class="w-28"
           @click="copyToClipboard(oklch)"
         />
         <UButton
@@ -84,7 +88,7 @@ const color = computed(() => {
           size="sm"
           icon="lucide:copy"
           label="Copy CMYK"
-          class="w-32"
+          class="w-28"
           @click="copyToClipboard(cmyk)"
         />
       </div>

package/dist/runtime/components/swatches/ColorSwatch.vue.d.ts

@@ -1,4 +1,5 @@
 type __VLS_Props = {
+    name?: string;
     hex?: string;
     rgb?: string;
     hsl?: string;

package/package.json

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