cynx-lib 1.3.80 → 1.3.82

package/vue/components/Badge.vue

@@ -1,79 +1,79 @@
-<script setup lang="ts">
-import { computed } from "vue";
-
-const VARIANTS: Record<string, any> = {
-  ok: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
-  success: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
-  err: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  danger: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  error: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
-  warn: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
-  warning: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
-  blue: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
-  info: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
-  teal: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
-  primary: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
-  dim: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  neutral: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  secondary: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
-  ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
-};
-
-const SIZE_MAP: Record<string, any> = {
-  xs: { padding: "1.5px 6px", plainPadding: "1px 0", fontSize: "9.5px", dotSize: 5 },
-  sm: { padding: "2px 8px", plainPadding: "2px 0", fontSize: "11px", dotSize: 6 },
-  md: { padding: "3px 9px", plainPadding: "2px 0", fontSize: "12px", dotSize: 6.5 },
-  lg: { padding: "4px 12px", plainPadding: "3px 0", fontSize: "13px", dotSize: 8 },
-};
-
-const props = withDefaults(
-  defineProps<{
-    variant?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-    dot?: boolean;
-    pill?: boolean;
-    plain?: boolean;
-    minimal?: boolean;
-  }>(),
-  {
-    variant: "dim",
-    size: "sm",
-    dot: false,
-    pill: true,
-    plain: false,
-    minimal: false,
-  }
-);
-
-const v = computed(() => VARIANTS[props.variant] || VARIANTS.dim);
-const s = computed(() => SIZE_MAP[props.size] || SIZE_MAP.sm);
-const isPlain = computed(() => props.plain || props.minimal);
-</script>
-
-<template>
-  <span
-    :class="[
-      'inline-flex items-center gap-1.5 select-none',
-      isPlain ? 'font-semibold' : 'font-bold leading-none',
-      isPlain ? '' : (pill ? 'rounded-full' : 'rounded-md')
-    ]"
-    :style="{
-      background: isPlain ? 'transparent' : v.bg,
-      color: v.color,
-      border: isPlain ? 'none' : `1px solid ${v.border}`,
-      padding: isPlain ? s.plainPadding : s.padding,
-      fontSize: s.fontSize,
-    }"
-  >
-    <span
-      v-if="dot"
-      class="rounded-full flex-shrink-0"
-      :style="{
-        width: `${s.dotSize}px`,
-        height: `${s.dotSize}px`,
-        background: v.dot,
-      }"
-    />
-    <slot />
-  </span>
-</template>
+<script setup lang="ts">
+import { computed } from "vue";
+
+const VARIANTS: Record<string, any> = {
+  ok: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
+  success: { bg: "var(--success-bg, rgba(39,174,96,.1))", color: "var(--success, #16a34a)", border: "var(--sd, rgba(39,174,96,.2))", dot: "var(--success, #16a34a)" },
+  err: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  danger: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  error: { bg: "var(--danger-bg, rgba(246,71,71,.1))", color: "var(--danger, #ef4444)", border: "var(--dd, rgba(246,71,71,.2))", dot: "var(--danger, #ef4444)" },
+  warn: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
+  warning: { bg: "var(--accent-bg, rgba(249,158,44,.1))", color: "var(--accent, #f59e0b)", border: "var(--accent-border, rgba(249,158,44,.25))", dot: "var(--accent, #f59e0b)" },
+  blue: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
+  info: { bg: "var(--blue-bg, rgba(39,130,228,.1))", color: "var(--blue, #2563eb)", border: "var(--infd, rgba(39,130,228,.2))", dot: "var(--blue, #2563eb)" },
+  teal: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
+  primary: { bg: "rgba(18,103,93,.1)", color: "var(--accent, #12675D)", border: "rgba(18,103,93,.25)", dot: "var(--accent, #12675D)" },
+  dim: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  neutral: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  secondary: { bg: "var(--grey-1, #f5f5f8)", color: "var(--grey-4, #64748b)", border: "var(--border, #e2e8f0)", dot: "var(--grey-4, #64748b)" },
+  ghost: { bg: "transparent", color: "var(--t2, #64748b)", border: "var(--bd, #e2e8f0)", dot: "var(--t3, #94a3b8)" },
+};
+
+const SIZE_MAP: Record<string, any> = {
+  xs: { padding: "1.5px 6px", plainPadding: "1px 0", fontSize: "9.5px", dotSize: 5 },
+  sm: { padding: "2px 8px", plainPadding: "2px 0", fontSize: "11px", dotSize: 6 },
+  md: { padding: "3px 9px", plainPadding: "2px 0", fontSize: "12px", dotSize: 6.5 },
+  lg: { padding: "4px 12px", plainPadding: "3px 0", fontSize: "13px", dotSize: 8 },
+};
+
+const props = withDefaults(
+  defineProps<{
+    variant?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    dot?: boolean;
+    pill?: boolean;
+    plain?: boolean;
+    minimal?: boolean;
+  }>(),
+  {
+    variant: "dim",
+    size: "sm",
+    dot: false,
+    pill: true,
+    plain: false,
+    minimal: false,
+  }
+);
+
+const v = computed(() => VARIANTS[props.variant] || VARIANTS.dim);
+const s = computed(() => SIZE_MAP[props.size] || SIZE_MAP.sm);
+const isPlain = computed(() => props.plain || props.minimal);
+</script>
+
+<template>
+  <span
+    :class="[
+      'inline-flex items-center gap-1.5 select-none',
+      isPlain ? 'font-semibold' : 'font-bold leading-none',
+      isPlain ? '' : (pill ? 'rounded-full' : 'rounded-md')
+    ]"
+    :style="{
+      background: isPlain ? 'transparent' : v.bg,
+      color: v.color,
+      border: isPlain ? 'none' : `1px solid ${v.border}`,
+      padding: isPlain ? s.plainPadding : s.padding,
+      fontSize: s.fontSize,
+    }"
+  >
+    <span
+      v-if="dot"
+      class="rounded-full flex-shrink-0"
+      :style="{
+        width: `${s.dotSize}px`,
+        height: `${s.dotSize}px`,
+        background: v.dot,
+      }"
+    />
+    <slot />
+  </span>
+</template>

package/vue/components/Button.vue

@@ -1,209 +1,209 @@
-<script setup lang="ts">
-import { computed, useSlots, type VNode } from "vue";
-import Spinner from "./Spinner.vue";
-
-const VARIANTS: Record<string, any> = {
-  default: {
-    background: "var(--surface, #fff)",
-    color: "var(--def-btn-text, #0f111c)",
-    border: "1px solid var(--bd, #d7d8e0)",
-    hoverBg: "var(--grey-1, #f5f5f8)",
-    hoverBorder: "var(--grey-2, #ebebee)",
-  },
-  primary: {
-    background: "var(--accent, #12675D)",
-    color: "#fff",
-    border: "1px solid transparent",
-    hoverBg: "var(--accent-hover, #0e524a)",
-    hoverShadow: "0 2px 8px rgba(18, 103, 93, .35)",
-  },
-  secondary: {
-    background: "var(--blue-bg, rgba(39,130,228,.1))",
-    color: "var(--blue, #2782e4)",
-    border: "1px solid var(--infd, rgba(39,130,228,.2))",
-    hoverBg: "var(--infd, rgba(39,130,228,.18))",
-    hoverShadow: "0 2px 8px rgba(39,130,228,.25)",
-  },
-  danger: {
-    background: "var(--danger-bg, rgba(246,71,71,.1))",
-    color: "var(--danger, #f64747)",
-    border: "1px solid var(--dd, rgba(246,71,71,.2))",
-    hoverBg: "var(--dd, rgba(246,71,71,.18))",
-    hoverShadow: "0 2px 8px rgba(246,71,71,.25)",
-  },
-  "danger-solid": {
-    background: "var(--danger, #EF4444)",
-    color: "#fff",
-    border: "1px solid transparent",
-    hoverBg: "#dc2626",
-    hoverShadow: "0 2px 8px rgba(239, 68, 68, .35)",
-  },
-  "danger-fill": {
-    background: "var(--danger, #EF4444)",
-    color: "#fff",
-    border: "1px solid transparent",
-    hoverBg: "#dc2626",
-    hoverShadow: "0 2px 8px rgba(239, 68, 68, .35)",
-  },
-  success: {
-    background: "var(--success-bg, rgba(39,174,96,.1))",
-    color: "var(--success, #27ae60)",
-    border: "1px solid var(--sd, rgba(39,174,96,.2))",
-    hoverBg: "var(--sd, rgba(39,174,96,.18))",
-    hoverShadow: "0 2px 8px rgba(39,174,96,.25)",
-  },
-  warning: {
-    background: "var(--accent-bg, rgba(249,158,44,.1))",
-    color: "var(--accent, #f99e2c)",
-    border: "1px solid var(--accent-border, rgba(249,158,44,.25))",
-    hoverBg: "var(--pd, rgba(249,158,44,.18))",
-    hoverShadow: "0 2px 8px rgba(249,158,44,.25)",
-  },
-  ghost: {
-    background: "var(--surface, #ffffff)",
-    color: "var(--t2, #797b8d)",
-    border: "1px solid var(--bd, #d7d8e0)",
-    hoverColor: "var(--t1, #1a1a2e)",
-    hoverBg: "var(--grey-1, #f5f5f8)",
-    hoverBorder: "var(--grey-2, #ebebee)",
-  },
-  plain: {
-    background: "transparent",
-    color: "var(--t2, #797b8d)",
-    border: "1px solid transparent",
-    hoverColor: "var(--t1, #1a1a2e)",
-    hoverBg: "var(--grey-1, #f5f5f8)",
-    hoverBorder: "transparent",
-    boxShadow: "none",
-  },
-  flat: {
-    background: "transparent",
-    color: "var(--t2, #797b8d)",
-    border: "1px solid transparent",
-    hoverColor: "var(--t1, #1a1a2e)",
-    hoverBg: "var(--grey-1, #f5f5f8)",
-    hoverBorder: "transparent",
-    boxShadow: "none",
-  },
-  icon: {
-    background: "transparent",
-    color: "var(--t2, #797b8d)",
-    border: "1px solid transparent",
-    hoverColor: "var(--t1, #1a1a2e)",
-    hoverBg: "var(--grey-1, #f5f5f8)",
-    hoverBorder: "transparent",
-    boxShadow: "none",
-  },
-  outline: {
-    background: "transparent",
-    color: "var(--accent, #12675D)",
-    border: "1px solid var(--accent, #12675D)",
-    hoverBg: "var(--accent-bg, rgba(18, 103, 93, .1))",
-  },
-  link: {
-    background: "transparent",
-    color: "var(--accent, #12675D)",
-    border: "1px solid transparent",
-    paddingLeft: "4px",
-    paddingRight: "4px",
-    boxShadow: "none",
-  },
-  "no-line": {
-    background: "none",
-    border: "none",
-    boxShadow: "none",
-    color: "var(--t3, #8a96b0)",
-    paddingLeft: "14px",
-    paddingRight: "14px",
-    borderRadius: "var(--rmd, 8px)",
-  },
-};
-
-const SIZES: Record<string, any> = {
-  xs: { padding: "0 6px", fontSize: 11, height: 24 },
-  sm: { padding: "0 8px", fontSize: 11.5, height: 28 },
-  md: { padding: "0 14px", fontSize: 13, height: 32 },
-  lg: { padding: "0 18px", fontSize: 14, height: 36 },
-};
-
-const props = withDefaults(
-  defineProps<{
-    variant?: string;
-    size?: "xs" | "sm" | "md" | "lg";
-    disabled?: boolean;
-    loading?: boolean;
-    type?: "button" | "submit" | "reset";
-    iconOnly?: boolean;
-  }>(),
-  {
-    variant: "default",
-    size: "md",
-    disabled: false,
-    loading: false,
-    type: "button",
-    iconOnly: false,
-  }
-);
-
-const emit = defineEmits<{
-  (e: "click", event: MouseEvent): void;
-}>();
-
-const slots = useSlots();
-const v = computed(() => VARIANTS[props.variant] || VARIANTS.default);
-const s = computed(() => SIZES[props.size] || SIZES.md);
-
-const hasDefaultText = computed(() => {
-  if (!slots.default) return false;
-  const nodes = slots.default();
-  if (!nodes || nodes.length === 0) return false;
-  return nodes.some((node: VNode) => {
-    if (node.type === Symbol.for("v-cmt")) return false;
-    if (typeof node.children === "string") return node.children.trim().length > 0;
-    if (Array.isArray(node.children)) return node.children.length > 0;
-    return Boolean(node.type);
-  });
-});
-
-const isIconOnly = computed(() => {
-  if (props.iconOnly || props.variant === "icon") return true;
-  const hasIconSlot = Boolean(slots.icon) || Boolean(slots.iconRight);
-  return hasIconSlot && !hasDefaultText.value;
-});
-</script>
-
-<template>
-  <button
-    :type="type"
-    :disabled="disabled || loading"
-    :class="[`btn btn-${variant}`, 'inline-flex items-center justify-center gap-1.5 font-medium transition select-none flex-shrink-0']"
-    :style="{
-      borderRadius: 'var(--rads, 8px)',
-      fontFamily: 'var(--f, var(--sans, inherit))',
-      cursor: disabled ? 'not-allowed' : 'pointer',
-      whiteSpace: 'nowrap',
-      letterSpacing: '-.01em',
-      outline: 'none',
-      boxShadow: v.boxShadow !== undefined ? v.boxShadow : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
-      opacity: disabled ? 0.45 : 1,
-      pointerEvents: disabled ? 'none' : undefined,
-      background: v.background,
-      color: v.color,
-      border: v.border,
-      padding: isIconOnly ? '0' : s.padding,
-      fontSize: `${s.fontSize}px`,
-      height: `${s.height}px`,
-      width: isIconOnly ? `${s.height}px` : undefined,
-      minWidth: isIconOnly ? `${s.height}px` : undefined,
-      maxWidth: isIconOnly ? `${s.height}px` : undefined,
-      ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
-      ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
-    }"
-    @click="emit('click', $event)"
-  >
-    <Spinner v-if="loading" :size="14" inline color="currentColor" />
-    <slot v-if="!loading" name="icon" />
-    <slot v-if="!loading" />
-    <slot v-if="!loading" name="iconRight" />
-  </button>
-</template>
+<script setup lang="ts">
+import { computed, useSlots, type VNode } from "vue";
+import Spinner from "./Spinner.vue";
+
+const VARIANTS: Record<string, any> = {
+  default: {
+    background: "var(--surface, #fff)",
+    color: "var(--def-btn-text, #0f111c)",
+    border: "1px solid var(--bd, #d7d8e0)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "var(--grey-2, #ebebee)",
+  },
+  primary: {
+    background: "var(--accent, #12675D)",
+    color: "#fff",
+    border: "1px solid transparent",
+    hoverBg: "var(--accent-hover, #0e524a)",
+    hoverShadow: "0 2px 8px rgba(18, 103, 93, .35)",
+  },
+  secondary: {
+    background: "var(--blue-bg, rgba(39,130,228,.1))",
+    color: "var(--blue, #2782e4)",
+    border: "1px solid var(--infd, rgba(39,130,228,.2))",
+    hoverBg: "var(--infd, rgba(39,130,228,.18))",
+    hoverShadow: "0 2px 8px rgba(39,130,228,.25)",
+  },
+  danger: {
+    background: "var(--danger-bg, rgba(246,71,71,.1))",
+    color: "var(--danger, #f64747)",
+    border: "1px solid var(--dd, rgba(246,71,71,.2))",
+    hoverBg: "var(--dd, rgba(246,71,71,.18))",
+    hoverShadow: "0 2px 8px rgba(246,71,71,.25)",
+  },
+  "danger-solid": {
+    background: "var(--danger, #EF4444)",
+    color: "#fff",
+    border: "1px solid transparent",
+    hoverBg: "#dc2626",
+    hoverShadow: "0 2px 8px rgba(239, 68, 68, .35)",
+  },
+  "danger-fill": {
+    background: "var(--danger, #EF4444)",
+    color: "#fff",
+    border: "1px solid transparent",
+    hoverBg: "#dc2626",
+    hoverShadow: "0 2px 8px rgba(239, 68, 68, .35)",
+  },
+  success: {
+    background: "var(--success-bg, rgba(39,174,96,.1))",
+    color: "var(--success, #27ae60)",
+    border: "1px solid var(--sd, rgba(39,174,96,.2))",
+    hoverBg: "var(--sd, rgba(39,174,96,.18))",
+    hoverShadow: "0 2px 8px rgba(39,174,96,.25)",
+  },
+  warning: {
+    background: "var(--accent-bg, rgba(249,158,44,.1))",
+    color: "var(--accent, #f99e2c)",
+    border: "1px solid var(--accent-border, rgba(249,158,44,.25))",
+    hoverBg: "var(--pd, rgba(249,158,44,.18))",
+    hoverShadow: "0 2px 8px rgba(249,158,44,.25)",
+  },
+  ghost: {
+    background: "var(--surface, #ffffff)",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid var(--bd, #d7d8e0)",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "var(--grey-2, #ebebee)",
+  },
+  plain: {
+    background: "transparent",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid transparent",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "transparent",
+    boxShadow: "none",
+  },
+  flat: {
+    background: "transparent",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid transparent",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "transparent",
+    boxShadow: "none",
+  },
+  icon: {
+    background: "transparent",
+    color: "var(--t2, #797b8d)",
+    border: "1px solid transparent",
+    hoverColor: "var(--t1, #1a1a2e)",
+    hoverBg: "var(--grey-1, #f5f5f8)",
+    hoverBorder: "transparent",
+    boxShadow: "none",
+  },
+  outline: {
+    background: "transparent",
+    color: "var(--accent, #12675D)",
+    border: "1px solid var(--accent, #12675D)",
+    hoverBg: "var(--accent-bg, rgba(18, 103, 93, .1))",
+  },
+  link: {
+    background: "transparent",
+    color: "var(--accent, #12675D)",
+    border: "1px solid transparent",
+    paddingLeft: "4px",
+    paddingRight: "4px",
+    boxShadow: "none",
+  },
+  "no-line": {
+    background: "none",
+    border: "none",
+    boxShadow: "none",
+    color: "var(--t3, #8a96b0)",
+    paddingLeft: "14px",
+    paddingRight: "14px",
+    borderRadius: "var(--rmd, 8px)",
+  },
+};
+
+const SIZES: Record<string, any> = {
+  xs: { padding: "0 6px", fontSize: 11, height: 24 },
+  sm: { padding: "0 8px", fontSize: 11.5, height: 28 },
+  md: { padding: "0 14px", fontSize: 13, height: 32 },
+  lg: { padding: "0 18px", fontSize: 14, height: 36 },
+};
+
+const props = withDefaults(
+  defineProps<{
+    variant?: string;
+    size?: "xs" | "sm" | "md" | "lg";
+    disabled?: boolean;
+    loading?: boolean;
+    type?: "button" | "submit" | "reset";
+    iconOnly?: boolean;
+  }>(),
+  {
+    variant: "default",
+    size: "md",
+    disabled: false,
+    loading: false,
+    type: "button",
+    iconOnly: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: "click", event: MouseEvent): void;
+}>();
+
+const slots = useSlots();
+const v = computed(() => VARIANTS[props.variant] || VARIANTS.default);
+const s = computed(() => SIZES[props.size] || SIZES.md);
+
+const hasDefaultText = computed(() => {
+  if (!slots.default) return false;
+  const nodes = slots.default();
+  if (!nodes || nodes.length === 0) return false;
+  return nodes.some((node: VNode) => {
+    if (node.type === Symbol.for("v-cmt")) return false;
+    if (typeof node.children === "string") return node.children.trim().length > 0;
+    if (Array.isArray(node.children)) return node.children.length > 0;
+    return Boolean(node.type);
+  });
+});
+
+const isIconOnly = computed(() => {
+  if (props.iconOnly || props.variant === "icon") return true;
+  const hasIconSlot = Boolean(slots.icon) || Boolean(slots.iconRight);
+  return hasIconSlot && !hasDefaultText.value;
+});
+</script>
+
+<template>
+  <button
+    :type="type"
+    :disabled="disabled || loading"
+    :class="[`btn btn-${variant}`, 'inline-flex items-center justify-center gap-1.5 font-medium transition select-none flex-shrink-0']"
+    :style="{
+      borderRadius: 'var(--rads, 8px)',
+      fontFamily: 'var(--f, var(--sans, inherit))',
+      cursor: disabled ? 'not-allowed' : 'pointer',
+      whiteSpace: 'nowrap',
+      letterSpacing: '-.01em',
+      outline: 'none',
+      boxShadow: v.boxShadow !== undefined ? v.boxShadow : 'var(--shadow, 0 1px 3px rgba(20,22,41,.1))',
+      opacity: disabled ? 0.45 : 1,
+      pointerEvents: disabled ? 'none' : undefined,
+      background: v.background,
+      color: v.color,
+      border: v.border,
+      padding: isIconOnly ? '0' : s.padding,
+      fontSize: `${s.fontSize}px`,
+      height: `${s.height}px`,
+      width: isIconOnly ? `${s.height}px` : undefined,
+      minWidth: isIconOnly ? `${s.height}px` : undefined,
+      maxWidth: isIconOnly ? `${s.height}px` : undefined,
+      ...(v.paddingLeft !== undefined && { paddingLeft: v.paddingLeft }),
+      ...(v.paddingRight !== undefined && { paddingRight: v.paddingRight }),
+    }"
+    @click="emit('click', $event)"
+  >
+    <Spinner v-if="loading" :size="14" inline color="currentColor" />
+    <slot v-if="!loading" name="icon" />
+    <slot v-if="!loading" />
+    <slot v-if="!loading" name="iconRight" />
+  </button>
+</template>