@leavepulse/ui 0.30.1 → 0.31.0

package/src/composables/useMergedClass.ts

@@ -0,0 +1,56 @@
+import { computed, useAttrs, type ComputedRef, type MaybeRefOrGetter, toValue } from "vue"
+import { cn } from "tailwind-variants"
+
+/*
+ * "The class the consumer passed should win."
+ *
+ * Tailwind emits `w-full` and `w-40` into the same layer with the same
+ * specificity, so which one applies comes down to their order in the stylesheet
+ * — not to which one the caller wrote. In practice the component's own class
+ * won every time: `class="w-40"` on an input that styles itself `w-full` did
+ * nothing, `border-r-0` could not cancel a sidebar's `border-r`, and a consumer
+ * had no way to tell from the outside that their class was being ignored. The
+ * usual workaround is to grow a prop for every class anyone might want to
+ * override, which is a prop per Tailwind utility and never finishes.
+ *
+ * `tailwind-variants` already ships the conflict resolution (its `cn`), and the
+ * kit already depends on it. This wraps it in the one shape components need:
+ * take the component's own classes, fold in whatever arrived through `class`,
+ * and let the caller's win where the two describe the same thing.
+ *
+ * Note it resolves CONFLICTS, not everything: `class="w-40"` beats `w-full`
+ * because both are widths, while `class="shadow-lg"` is simply added, because
+ * the component said nothing about shadows.
+ */
+
+/**
+ * Merges the component's own classes with the `class` attribute the consumer
+ * passed, resolving Tailwind conflicts in the consumer's favour.
+ *
+ * ```ts
+ * const rootClass = useMergedClass(() => shell({ size: props.size }))
+ * ```
+ * ```vue
+ * <div :class="rootClass">
+ * ```
+ *
+ * Pair it with `inheritAttrs: false` (and bind the rest of `$attrs` yourself)
+ * so the raw `class` does not land on the element a second time, unmerged.
+ */
+export function useMergedClass(
+  own: MaybeRefOrGetter<string | undefined>,
+): ComputedRef<string> {
+  const attrs = useAttrs()
+  // `cn` returns undefined when everything it was given was empty; a class
+  // binding is happier with "" than with undefined.
+  return computed(() => cn(toValue(own), attrs.class as string | undefined) ?? "")
+}
+
+/**
+ * The same merge as a plain function, for the places that already have both
+ * strings in hand and do not need the attrs lookup — a render helper, or a
+ * component merging a class onto a child rather than its own root.
+ */
+export function mergeClass(...classes: (string | undefined | null | false)[]): string {
+  return cn(...classes) ?? ""
+}

package/dist/chunks/LpBadge-BPodVcJa.js

@@ -1,45 +0,0 @@
-import { defineComponent, computed, openBlock, createElementBlock, normalizeClass, createCommentVNode, renderSlot } from "vue";
-import { tv } from "tailwind-variants";
-const _hoisted_1 = {
-  key: 0,
-  class: "size-1.5 rounded-full bg-current"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "LpBadge",
-  props: {
-    tone: {},
-    dot: { type: Boolean }
-  },
-  setup(__props) {
-    const badge = tv({
-      base: "inline-flex items-center gap-1.5 rounded-pill px-2.5 py-0.5 text-xs font-medium",
-      variants: {
-        tone: {
-          neutral: "bg-surface-soft text-muted-strong",
-          brand: "bg-brand-soft text-brand",
-          action: "bg-action/15 text-action",
-          success: "bg-action/15 text-action",
-          // Partial trouble, which every status surface eventually needs: without
-          // it a half-failed thing has to render as either fine or broken.
-          warning: "bg-accent/15 text-accent",
-          danger: "bg-danger-soft text-danger",
-          outline: "border border-line text-ink"
-        }
-      },
-      defaultVariants: { tone: "neutral" }
-    });
-    const props = __props;
-    const classes = computed(() => badge({ tone: props.tone }));
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("span", {
-        class: normalizeClass(classes.value)
-      }, [
-        __props.dot ? (openBlock(), createElementBlock("span", _hoisted_1)) : createCommentVNode("", true),
-        renderSlot(_ctx.$slots, "default")
-      ], 2);
-    };
-  }
-});
-export {
-  _sfc_main as _
-};