@anggiedimasta/ui/dist/index.js

A modern, accessible Vue 3 UI component library with comprehensive documentation, testing, and design system built with Tailwind CSS

import { defineComponent as C, createBlock as w, openBlock as V, resolveDynamicComponent as k, normalizeClass as _, unref as z, withCtx as N, renderSlot as j } from "vue";
function y(t) {
  var n, e, r = "";
  if (typeof t == "string" || typeof t == "number") r += t;
  else if (typeof t == "object") if (Array.isArray(t)) {
    var o = t.length;
    for (n = 0; n < o; n++) t[n] && (e = y(t[n])) && (r && (r += " "), r += e);
  } else for (e in t) t[e] && (r && (r += " "), r += e);
  return r;
}
function p() {
  for (var t, n, e = 0, r = "", o = arguments.length; e < o; e++) (t = arguments[e]) && (n = y(t)) && (r && (r += " "), r += n);
  return r;
}
const f = (t) => typeof t == "boolean" ? `${t}` : t === 0 ? "0" : t, m = p, A = (t, n) => (e) => {
  var r;
  if (n?.variants == null) return m(t, e?.class, e?.className);
  const { variants: o, defaultVariants: l } = n, b = Object.keys(o).map((a) => {
    const s = e?.[a], d = l?.[a];
    if (s === null) return null;
    const i = f(s) || f(d);
    return o[a][i];
  }), c = e && Object.entries(e).reduce((a, s) => {
    let [d, i] = s;
    return i === void 0 || (a[d] = i), a;
  }, {}), g = n == null || (r = n.compoundVariants) === null || r === void 0 ? void 0 : r.reduce((a, s) => {
    let { class: d, className: i, ...h } = s;
    return Object.entries(h).every((x) => {
      let [v, u] = x;
      return Array.isArray(u) ? u.includes({
        ...l,
        ...c
      }[v]) : {
        ...l,
        ...c
      }[v] === u;
    }) ? [
      ...a,
      d,
      i
    ] : a;
  }, []);
  return m(t, b, g, e?.class, e?.className);
}, O = A(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline"
      },
      size: {
        default: "h-9 px-4 py-2",
        sm: "h-8 rounded-md px-3 text-xs",
        lg: "h-10 rounded-md px-8",
        icon: "h-9 w-9"
      }
    },
    defaultVariants: {
      variant: "default",
      size: "default"
    }
  }
), P = /* @__PURE__ */ C({
  __name: "button",
  props: {
    as: { default: "button" },
    class: { default: "" },
    variant: { default: "default" },
    size: { default: "default" }
  },
  setup(t) {
    const n = t, e = O({
      variant: n.variant,
      size: n.size,
      class: n.class
    });
    return (r, o) => (V(), w(k(r.as), {
      class: _(z(e))
    }, {
      default: N(() => [
        j(r.$slots, "default")
      ]),
      _: 3
    }, 8, ["class"]));
  }
});
export {
  P as Button
};