@salesql/sql_components_vue3 0.2.0

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),d={DEFAULT:"default",PRIMARY:"primary"},b={LARGE:"large"},y={BUTTON:"button"},s={LIGHT:"light",DARK:"dark"},S={MEDIUM:"medium"},m=["aria-label","aria-live","aria-hidden"],B={key:0,class:"sr-only"},f=t.defineComponent({__name:"SqlSpinner",props:{type:{type:String,default:s.DARK},size:{type:String,default:S.MEDIUM},label:{type:String,default:""}},setup(e){const n=e,l=t.computed(()=>n.label&&n.label.length>0);return(o,a)=>(t.openBlock(),t.createElementBlock("span",{class:t.normalizeClass(["sql-spinner",[`theme-${e.type}`,`sql-spinner--${e.size}`]]),role:"status","aria-label":l.value?e.label:void 0,"aria-live":l.value?"polite":void 0,"aria-hidden":l.value?void 0:"true"},[a[0]||(a[0]=t.createElementVNode("span",{class:"ring"},null,-1)),l.value?(t.openBlock(),t.createElementBlock("span",B,t.toDisplayString(e.label),1)):t.createCommentVNode("",!0)],10,m))}}),c=(e,n)=>{const l=e.__vccOpts||e;for(const[o,a]of n)l[o]=a;return l},u=c(f,[["__scopeId","data-v-bdd073d8"]]),g="click",v=["type","disabled","autofocus","aria-busy","aria-disabled","aria-pressed"],E={key:1,class:"slotted-content"},T=t.defineComponent({__name:"SqlButton",props:{type:{type:String,default:d.DEFAULT},size:{type:String,default:b.LARGE},nativeType:{type:String,default:y.BUTTON},selected:{type:Boolean,default:null},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean,round:Boolean,circle:Boolean},setup(e,{emit:n}){const l=e,o=n,a=t.computed(()=>l.type===d.PRIMARY?s.LIGHT:s.DARK);function r(i){l.disabled||l.loading||o(g,i)}return(i,N)=>(t.openBlock(),t.createElementBlock("button",{class:t.normalizeClass(["sql-button",[e.type?`sql-button--${e.type}`:"",e.size?`sql-button--${e.size}`:"",{"is-disabled":e.disabled,"is-loading":e.loading,"is-circle":e.circle,"is-plain":e.plain,"is-round":e.round,"selectable-button":e.selected!==null,"is-selected":e.selected}]]),type:e.nativeType,disabled:e.disabled||e.loading,autofocus:e.autofocus,"aria-busy":e.loading||void 0,"aria-disabled":e.disabled||e.loading||void 0,"aria-pressed":e.selected!==null?!!e.selected:void 0,onClick:r},[t.createElementVNode("span",{class:t.normalizeClass(["slot-container",{"is-loading":e.loading}])},[e.loading?(t.openBlock(),t.createBlock(u,{key:0,class:"sql-spinner",type:a.value},null,8,["type"])):t.createCommentVNode("",!0),i.$slots.default?(t.openBlock(),t.createElementBlock("div",E,[t.renderSlot(i.$slots,"default",{},void 0,!0)])):t.createCommentVNode("",!0)],2)],10,v))}}),k=c(T,[["__scopeId","data-v-bd5f8a62"]]);exports.sqlButton=k;exports.sqlSpinner=u;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":["../src/constants/sql-components.ts","../src/components/SqlSpinner.vue","../src/constants/events.ts","../src/components/SqlButton.vue"],"sourcesContent":["// Tipos de botón (clases: sql-button--<type>)\nexport const SQL_BUTTON_TYPES = {\n  DEFAULT: 'default',\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  TERTIARY: 'tertiary',\n  SPECIAL: 'special',\n  SPECIAL2: 'special2',\n  DOTTED: 'dotted',\n} as const\nexport type SqlButtonType = typeof SQL_BUTTON_TYPES[keyof typeof SQL_BUTTON_TYPES]\n\n// Tamaños de botón (clases: sql-button--<size>)\nexport const SQL_BUTTON_SIZES = {\n  SMALL: 'small',\n  SMALL_SQUARE: 'small-square',\n  SMALL_SQUARE_NO_PADDING: 'small-square-no-padding',\n  MEDIUM: 'medium',\n  MEDIUM_SQUARE: 'medium-square',\n  LARGE: 'large',\n  LARGE_SQUARE: 'large-square',\n  XLARGE: 'xlarge',\n  XLARGE_SQUARE: 'xlarge-square',\n} as const\nexport type SqlButtonSize = typeof SQL_BUTTON_SIZES[keyof typeof SQL_BUTTON_SIZES]\n\n// type nativo del <button>\nexport const SQL_BUTTON_NATIVE_TYPES = {\n  BUTTON: 'button',\n  SUBMIT: 'submit',\n  RESET: 'reset',\n} as const\nexport type SqlButtonNativeType = typeof SQL_BUTTON_NATIVE_TYPES[keyof typeof SQL_BUTTON_NATIVE_TYPES]\n\n// Tema del spinner (lo usas en el computed del botón)\nexport const SQL_SPINNER_THEME_MODES = {\n  LIGHT: 'light', // para botones oscuros: spinner claro\n  DARK: 'dark',   // para botones claros: spinner oscuro\n} as const\nexport type SqlSpinnerThemeMode = typeof SQL_SPINNER_THEME_MODES[keyof typeof SQL_SPINNER_THEME_MODES]\n\nexport const SQL_SPINNER_SIZES = {\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n} as const;\n\nexport type SqlSpinnerSize = (typeof SQL_SPINNER_SIZES)[keyof typeof SQL_SPINNER_SIZES];\n","<script setup lang=\"ts\">\n  import { type PropType, computed } from \"vue\";\n  import {\n    SQL_SPINNER_SIZES,\n    SQL_SPINNER_THEME_MODES,\n    type SqlSpinnerSize,\n    type SqlSpinnerThemeMode,\n  } from \"../constants/sql-components\";\n\n  const props = defineProps({\n    type: {\n      type: String as PropType<SqlSpinnerThemeMode>,\n      default: SQL_SPINNER_THEME_MODES.DARK,\n    },\n    size: {\n      type: String as PropType<SqlSpinnerSize>,\n      default: SQL_SPINNER_SIZES.MEDIUM,\n    },\n    // Opcional: texto accesible (si no hay, marcamos aria-hidden)\n    label: {\n      type: String,\n      default: \"\",\n    },\n  });\n\n  const hasLabel = computed(() => props.label && props.label.length > 0);\n</script>\n\n<template>\n  <span\n    class=\"sql-spinner\"\n    :class=\"[`theme-${type}`, `sql-spinner--${size}`]\"\n    role=\"status\"\n    :aria-label=\"hasLabel ? label : undefined\"\n    :aria-live=\"hasLabel ? 'polite' : undefined\"\n    :aria-hidden=\"hasLabel ? undefined : 'true'\"\n  >\n    <span class=\"ring\" />\n    <span v-if=\"hasLabel\" class=\"sr-only\">{{ label }}</span>\n  </span>\n</template>\n\n<style lang=\"scss\" scoped>\n  @use \"../assets/css/colors.scss\" as colors;\n\n  /* Accesibilidad (solo-lectura visual) */\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  @keyframes sql-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .sql-spinner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    /* Tamaños por clase */\n    &.sql-spinner--small {\n      width: 12px;\n      height: 12px;\n    }\n    &.sql-spinner--medium {\n      width: 16px;\n      height: 16px;\n    }\n    &.sql-spinner--large {\n      width: 24px;\n      height: 24px;\n    }\n\n    .ring {\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border-style: solid;\n      border-width: 2px;\n      animation: sql-spin 0.8s linear infinite;\n    }\n\n    /* Temas */\n    &.theme-light .ring {\n      /* 3 lados visibles, 1 transparente para efecto “spinner” */\n      border-color: colors.$white colors.$white colors.$white transparent;\n    }\n\n    &.theme-dark .ring {\n      border-color: colors.$primary-main colors.$primary-main\n        colors.$primary-main transparent;\n    }\n  }\n</style>\n","// Evento genérico de click para props/emit\nexport const CLICK = 'click' as const\nexport type ClickEventName = typeof CLICK\n","<template>\n  <button\n    class=\"sql-button\"\n    :type=\"nativeType\"\n    :disabled=\"disabled || loading\"\n    :autofocus=\"autofocus\"\n    :aria-busy=\"loading || undefined\"\n    :aria-disabled=\"disabled || loading || undefined\"\n    :aria-pressed=\"selected !== null ? !!selected : undefined\"\n    :class=\"[\n      type ? `sql-button--${type}` : '',\n      size ? `sql-button--${size}` : '',\n      {\n        'is-disabled': disabled,\n        'is-loading': loading,\n        'is-circle': circle,\n        'is-plain': plain,\n        'is-round': round,\n        'selectable-button': selected !== null,\n        'is-selected': selected,\n      },\n    ]\"\n    @click=\"handleClick\"\n  >\n    <!-- Siempre renderizamos el contenedor para que el spinner funcione con o sin texto -->\n    <span class=\"slot-container\" :class=\"{ 'is-loading': loading }\">\n      <!-- Spinner superpuesto cuando loading -->\n      <SqlSpinner v-if=\"loading\" class=\"sql-spinner\" :type=\"spinnerType\" />\n\n      <!-- Texto/slot (se oculta visualmente cuando loading) -->\n      <div v-if=\"$slots.default\" class=\"slotted-content\">\n        <slot />\n      </div>\n    </span>\n  </button>\n</template>\n<script setup lang=\"ts\">\n  import { computed, type PropType } from \"vue\";\n  import SqlSpinner from \"@shared/components/SqlSpinner.vue\";\n  import {\n    SQL_BUTTON_NATIVE_TYPES,\n    SQL_BUTTON_SIZES,\n    SQL_BUTTON_TYPES,\n    SQL_SPINNER_THEME_MODES,\n    type SqlButtonNativeType,\n    type SqlButtonSize,\n    type SqlButtonType,\n  } from \"@shared/constants/sql-components\";\n  import { CLICK } from \"@shared/constants/events\";\n\n  const props = defineProps({\n    type: {\n      type: String as PropType<SqlButtonType>,\n      default: SQL_BUTTON_TYPES.DEFAULT,\n    },\n    size: {\n      type: String as PropType<SqlButtonSize>,\n      default: SQL_BUTTON_SIZES.LARGE,\n    },\n    nativeType: {\n      type: String as PropType<SqlButtonNativeType>,\n      default: SQL_BUTTON_NATIVE_TYPES.BUTTON,\n    },\n    selected: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    loading: Boolean,\n    disabled: Boolean,\n    plain: Boolean,\n    autofocus: Boolean,\n    round: Boolean,\n    circle: Boolean,\n  });\n\n  const emit = defineEmits<{\n    (e: typeof CLICK, event: MouseEvent): void;\n  }>();\n\n  const spinnerType = computed(() =>\n    props.type === SQL_BUTTON_TYPES.PRIMARY\n      ? SQL_SPINNER_THEME_MODES.LIGHT\n      : SQL_SPINNER_THEME_MODES.DARK\n  );\n\n  function handleClick(event: MouseEvent) {\n    if (props.disabled || props.loading) return; // guard\n    emit(CLICK, event);\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  @use \"../assets/css/colors.scss\" as colors;\n  @use \"../assets/css/spacing.scss\" as s;\n\n  /* keyframes a nivel raíz */\n  @keyframes rotating {\n    0% {\n      transform: rotateZ(360deg);\n    }\n    100% {\n      transform: rotateZ(0deg);\n    }\n  }\n\n  $default-background: colors.$white;\n\n  .sql-button {\n    padding: 0;\n\n    color: colors.$primary-main;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 20px;\n\n    border-width: 0;\n    border-radius: 4px;\n    outline: none;\n\n    cursor: pointer;\n    transition: background 0.2s, color 0.2s, border-color 0.2s;\n\n    &:active,\n    &:hover {\n      outline: none;\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n    }\n\n    &.is-circle {\n      padding: s.spacing(1);\n      border-radius: 50%;\n    }\n\n    .slot-container {\n      position: relative;\n\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n\n      .slotted-content {\n        display: inline-flex;\n        align-items: center;\n      }\n\n      &.is-loading {\n        .slotted-content {\n          visibility: hidden;\n        } /* el contenido sigue en el flujo para no cambiar ancho/alto */\n      }\n\n      .sql-spinner {\n        position: absolute;\n        inset: 0;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 1em;\n        height: 1em;\n        margin: auto;\n\n        pointer-events: none;\n      }\n    }\n\n    /* Types */\n    &.sql-button--default {\n      color: colors.$primary-main;\n      background-color: $default-background;\n\n      &:hover {\n        background-color: colors.$primary-tint;\n      }\n\n      &.is-disabled {\n        color: colors.$primary-mid;\n        background-color: $default-background;\n      }\n    }\n\n    &.sql-button--primary {\n      color: colors.$white;\n      background-color: colors.$primary-accent-main;\n\n      &:hover {\n        background-color: colors.$primary-accent-shadow;\n      }\n      &.is-disabled {\n        background-color: colors.$primary-accent-mid;\n      }\n    }\n\n    &.sql-button--secondary {\n      color: colors.$primary-main;\n      background-color: colors.$secondary-background;\n\n      &:hover {\n        background-color: colors.$primary-tint;\n      }\n      &.is-disabled {\n        color: colors.$primary-secondary-text;\n        background-color: colors.$primary-tint;\n      }\n    }\n\n    &.sql-button--tertiary {\n      color: colors.$primary-main;\n      background-color: $default-background;\n\n      &:hover {\n        background-color: colors.$primary-tint;\n      }\n      &:active {\n        color: $default-background;\n        background-color: colors.$primary-secondary-text;\n      }\n      &.is-disabled {\n        color: colors.$primary-mid;\n        background-color: $default-background;\n        &:active {\n          color: colors.$primary-mid;\n          background-color: $default-background;\n        }\n      }\n\n      &.selectable-button {\n        &:active {\n          color: colors.$primary-accent-main !important;\n          background: colors.$primary-accent-background !important;\n        }\n\n        &.is-selected {\n          color: colors.$primary-accent-main;\n          border: 1px solid colors.$primary-accent-main;\n          background: colors.$primary-accent-background;\n        }\n      }\n    }\n\n    &.sql-button--special {\n      color: colors.$primary-accent-main;\n      border: 1px solid colors.$primary-accent-mid;\n      background-color: $default-background;\n\n      &:hover {\n        border: 1px solid colors.$primary-accent-main;\n      }\n      &:active {\n        border: 1px solid colors.$primary-accent-main;\n        background-color: colors.$primary-accent-background;\n      }\n      &.is-disabled {\n        color: colors.$primary-accent-mid;\n        border: 1px solid colors.$primary-accent-tint;\n        background-color: $default-background;\n\n        &:active {\n          border: 1px solid colors.$primary-accent-tint;\n          background-color: $default-background;\n        }\n      }\n    }\n\n    &.sql-button--special2 {\n      color: colors.$primary-accent-main;\n      background-color: $default-background;\n\n      &:hover {\n        background-color: colors.$primary-accent-background;\n      }\n      &:active {\n        color: colors.$primary-accent-main;\n        background-color: colors.$primary-accent-tint;\n      }\n      &.is-disabled {\n        color: colors.$primary-accent-mid;\n        background-color: colors.$primary-accent-background;\n        &:active {\n          color: colors.$primary-accent-mid;\n          background-color: colors.$primary-accent-background;\n        }\n      }\n    }\n\n    &.sql-button--dotted {\n      color: colors.$primary-mid;\n      font-weight: bold;\n\n      border: 1px dashed colors.$primary-mid;\n      border-radius: s.spacing(3);\n\n      background-color: transparent;\n\n      &:hover:not(.is-disabled) {\n        color: colors.$primary-accent-main;\n        border: 1px dashed colors.$primary-accent-main;\n        background-color: colors.$primary-accent-background;\n      }\n    }\n\n    /* Sizes */\n    &.sql-button--small {\n      height: s.spacing(3);\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 14px;\n\n      .slot-container {\n        padding: 0 s.spacing(1);\n        .icon-left {\n          margin-right: 2px;\n        }\n        .icon-right {\n          margin-left: 2px;\n        }\n      }\n\n      .sql-spinner .spinner {\n        height: s.spacing(2);\n      }\n    }\n\n    &.sql-button--small-square {\n      height: s.spacing(3);\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 15px;\n\n      .slot-container {\n        padding: 4px;\n      }\n    }\n\n    &.sql-button--small-square-no-padding {\n      height: s.spacing(3);\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 15px;\n\n      .slot-container {\n        padding: 0;\n      }\n    }\n\n    &.sql-button--medium {\n      height: s.spacing(4);\n\n      .slot-container {\n        padding: 0 12px;\n        .icon-left {\n          margin-right: 2px;\n        }\n        .icon-right {\n          margin-left: 2px;\n        }\n      }\n    }\n\n    &.sql-button--medium-square {\n      height: s.spacing(4);\n      .slot-container {\n        padding: 6px;\n      }\n    }\n\n    &.sql-button--large {\n      height: 36px;\n\n      .slot-container {\n        padding: 0 s.spacing(2);\n        .icon-left {\n          margin-right: 4px;\n        }\n        .icon-right {\n          margin-left: 4px;\n        }\n      }\n    }\n\n    &.sql-button--large-square {\n      height: 36px;\n      .slot-container {\n        padding: s.spacing(1);\n      }\n    }\n\n    &.sql-button--xlarge {\n      height: s.spacing(6);\n\n      .slot-container {\n        padding: 0 22px;\n        .icon-left {\n          margin-right: 4px;\n        }\n        .icon-right {\n          margin-left: 4px;\n        }\n      }\n    }\n\n    &.sql-button--xlarge-square {\n      height: s.spacing(6);\n      .slot-container {\n        padding: s.spacing(2);\n      }\n    }\n  }\n</style>\n"],"names":["SQL_BUTTON_TYPES","SQL_BUTTON_SIZES","SQL_BUTTON_NATIVE_TYPES","SQL_SPINNER_THEME_MODES","SQL_SPINNER_SIZES","props","__props","hasLabel","computed","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_2","_toDisplayString","CLICK","emit","__emit","spinnerType","handleClick","event","_createBlock","SqlSpinner","$slots","_openBlock","_renderSlot","_ctx"],"mappings":"uGACaA,EAAmB,CAC9B,QAAS,UACT,QAAS,SAMX,EAIaC,EAAmB,CAM9B,MAAO,OAIT,EAIaC,EAA0B,CACrC,OAAQ,QAGV,EAIaC,EAA0B,CACrC,MAAO,QACP,KAAM,MACR,EAGaC,EAAoB,CAE/B,OAAQ,QAEV,sOCpCE,MAAMC,EAAQC,EAgBRC,EAAWC,EAAAA,SAAS,IAAMH,EAAM,OAASA,EAAM,MAAM,OAAS,CAAC,8BAIrEI,EAAAA,mBAUO,OAAA,CATL,MAAKC,EAAAA,eAAA,CAAC,cAAa,CAAA,SACDJ,EAAA,IAAI,mBAAoBA,EAAA,IAAI,EAAA,CAAA,CAAA,EAC9C,KAAK,SACJ,aAAYC,EAAA,MAAWD,EAAA,MAAQ,OAC/B,YAAWC,EAAA,MAAQ,SAAc,OACjC,cAAaA,EAAA,MAAW,OAAS,MAAA,eAElCI,EAAAA,mBAAqB,OAAA,CAAf,MAAM,MAAA,EAAM,KAAA,EAAA,GACNJ,EAAA,qBAAZE,EAAAA,mBAAwD,OAAxDG,EAAwDC,EAAAA,gBAAfP,EAAA,KAAK,EAAA,CAAA,wJCrCrCQ,EAAQ,8aCiDnB,MAAMT,EAAQC,EAyBRS,EAAOC,EAIPC,EAAcT,EAAAA,SAAS,IAC3BH,EAAM,OAASL,EAAiB,QAC5BG,EAAwB,MACxBA,EAAwB,IAAA,EAG9B,SAASe,EAAYC,EAAmB,CAClCd,EAAM,UAAYA,EAAM,SAC5BU,EAAKD,EAAOK,CAAK,CACnB,6BAvFAV,EAAAA,mBAiCS,SAAA,CAhCP,wBAAM,aAAY,CAOFH,EAAA,oBAAsBA,EAAA,IAAI,GAAA,GAAeA,EAAA,oBAAsBA,EAAA,IAAI,GAAA,kBAAwCA,EAAA,sBAAgCA,EAAA,oBAA8BA,EAAA,kBAA4BA,EAAA,iBAA2BA,EAAA,0BAAoCA,EAAA,WAAQ,mBAAkCA,EAAA,QAAA,KAN7T,KAAMA,EAAA,WACN,SAAUA,EAAA,UAAYA,EAAA,QACtB,UAAWA,EAAA,UACX,YAAWA,EAAA,SAAW,OACtB,gBAAeA,EAAA,UAAYA,EAAA,SAAW,OACtC,eAAcA,EAAA,WAAQ,KAAA,CAAA,CAAcA,EAAA,SAAW,OAc/C,QAAOY,CAAA,GAGRP,EAAAA,mBAQO,OAAA,CARD,MAAKD,EAAAA,eAAA,CAAC,iBAAgB,CAAA,aAAyBJ,EAAA,QAAO,CAAA,CAAA,GAExCA,EAAA,uBAAlBc,EAAAA,YAAqEC,EAAA,OAA1C,MAAM,cAAe,KAAMJ,EAAA,KAAA,gDAG3CK,EAAAA,OAAO,SAAlBC,EAAAA,YAAAd,EAAAA,mBAEM,MAFNG,EAEM,CADJY,EAAAA,WAAQC,EAAA,OAAA,UAAA,CAAA,EAAA,OAAA,EAAA,CAAA"}

package/dist/index.es.js

@@ -0,0 +1,131 @@
+import { defineComponent as b, computed as y, createElementBlock as o, openBlock as n, normalizeClass as d, createElementVNode as S, createCommentVNode as c, toDisplayString as v, createBlock as T, renderSlot as m } from "vue";
+const r = {
+  DEFAULT: "default",
+  PRIMARY: "primary"
+}, B = {
+  LARGE: "large"
+}, E = {
+  BUTTON: "button"
+}, u = {
+  LIGHT: "light",
+  // para botones oscuros: spinner claro
+  DARK: "dark"
+  // para botones claros: spinner oscuro
+}, I = {
+  MEDIUM: "medium"
+}, L = ["aria-label", "aria-live", "aria-hidden"], q = {
+  key: 0,
+  class: "sr-only"
+}, N = /* @__PURE__ */ b({
+  __name: "SqlSpinner",
+  props: {
+    type: {
+      type: String,
+      default: u.DARK
+    },
+    size: {
+      type: String,
+      default: I.MEDIUM
+    },
+    // Opcional: texto accesible (si no hay, marcamos aria-hidden)
+    label: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    const l = e, t = y(() => l.label && l.label.length > 0);
+    return (i, a) => (n(), o("span", {
+      class: d(["sql-spinner", [`theme-${e.type}`, `sql-spinner--${e.size}`]]),
+      role: "status",
+      "aria-label": t.value ? e.label : void 0,
+      "aria-live": t.value ? "polite" : void 0,
+      "aria-hidden": t.value ? void 0 : "true"
+    }, [
+      a[0] || (a[0] = S("span", { class: "ring" }, null, -1)),
+      t.value ? (n(), o("span", q, v(e.label), 1)) : c("", !0)
+    ], 10, L));
+  }
+}), f = (e, l) => {
+  const t = e.__vccOpts || e;
+  for (const [i, a] of l)
+    t[i] = a;
+  return t;
+}, h = /* @__PURE__ */ f(N, [["__scopeId", "data-v-bdd073d8"]]), k = "click", R = ["type", "disabled", "autofocus", "aria-busy", "aria-disabled", "aria-pressed"], A = {
+  key: 1,
+  class: "slotted-content"
+}, D = /* @__PURE__ */ b({
+  __name: "SqlButton",
+  props: {
+    type: {
+      type: String,
+      default: r.DEFAULT
+    },
+    size: {
+      type: String,
+      default: B.LARGE
+    },
+    nativeType: {
+      type: String,
+      default: E.BUTTON
+    },
+    selected: {
+      type: Boolean,
+      default: null
+    },
+    loading: Boolean,
+    disabled: Boolean,
+    plain: Boolean,
+    autofocus: Boolean,
+    round: Boolean,
+    circle: Boolean
+  },
+  setup(e, { emit: l }) {
+    const t = e, i = l, a = y(
+      () => t.type === r.PRIMARY ? u.LIGHT : u.DARK
+    );
+    function g(s) {
+      t.disabled || t.loading || i(k, s);
+    }
+    return (s, U) => (n(), o("button", {
+      class: d(["sql-button", [
+        e.type ? `sql-button--${e.type}` : "",
+        e.size ? `sql-button--${e.size}` : "",
+        {
+          "is-disabled": e.disabled,
+          "is-loading": e.loading,
+          "is-circle": e.circle,
+          "is-plain": e.plain,
+          "is-round": e.round,
+          "selectable-button": e.selected !== null,
+          "is-selected": e.selected
+        }
+      ]]),
+      type: e.nativeType,
+      disabled: e.disabled || e.loading,
+      autofocus: e.autofocus,
+      "aria-busy": e.loading || void 0,
+      "aria-disabled": e.disabled || e.loading || void 0,
+      "aria-pressed": e.selected !== null ? !!e.selected : void 0,
+      onClick: g
+    }, [
+      S("span", {
+        class: d(["slot-container", { "is-loading": e.loading }])
+      }, [
+        e.loading ? (n(), T(h, {
+          key: 0,
+          class: "sql-spinner",
+          type: a.value
+        }, null, 8, ["type"])) : c("", !0),
+        s.$slots.default ? (n(), o("div", A, [
+          m(s.$slots, "default", {}, void 0, !0)
+        ])) : c("", !0)
+      ], 2)
+    ], 10, R));
+  }
+}), M = /* @__PURE__ */ f(D, [["__scopeId", "data-v-bd5f8a62"]]);
+export {
+  M as sqlButton,
+  h as sqlSpinner
+};
+//# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.es.js","sources":["../src/constants/sql-components.ts","../src/components/SqlSpinner.vue","../src/constants/events.ts","../src/components/SqlButton.vue"],"sourcesContent":["// Tipos de botón (clases: sql-button--<type>)\nexport const SQL_BUTTON_TYPES = {\n  DEFAULT: 'default',\n  PRIMARY: 'primary',\n  SECONDARY: 'secondary',\n  TERTIARY: 'tertiary',\n  SPECIAL: 'special',\n  SPECIAL2: 'special2',\n  DOTTED: 'dotted',\n} as const\nexport type SqlButtonType = typeof SQL_BUTTON_TYPES[keyof typeof SQL_BUTTON_TYPES]\n\n// Tamaños de botón (clases: sql-button--<size>)\nexport const SQL_BUTTON_SIZES = {\n  SMALL: 'small',\n  SMALL_SQUARE: 'small-square',\n  SMALL_SQUARE_NO_PADDING: 'small-square-no-padding',\n  MEDIUM: 'medium',\n  MEDIUM_SQUARE: 'medium-square',\n  LARGE: 'large',\n  LARGE_SQUARE: 'large-square',\n  XLARGE: 'xlarge',\n  XLARGE_SQUARE: 'xlarge-square',\n} as const\nexport type SqlButtonSize = typeof SQL_BUTTON_SIZES[keyof typeof SQL_BUTTON_SIZES]\n\n// type nativo del <button>\nexport const SQL_BUTTON_NATIVE_TYPES = {\n  BUTTON: 'button',\n  SUBMIT: 'submit',\n  RESET: 'reset',\n} as const\nexport type SqlButtonNativeType = typeof SQL_BUTTON_NATIVE_TYPES[keyof typeof SQL_BUTTON_NATIVE_TYPES]\n\n// Tema del spinner (lo usas en el computed del botón)\nexport const SQL_SPINNER_THEME_MODES = {\n  LIGHT: 'light', // para botones oscuros: spinner claro\n  DARK: 'dark',   // para botones claros: spinner oscuro\n} as const\nexport type SqlSpinnerThemeMode = typeof SQL_SPINNER_THEME_MODES[keyof typeof SQL_SPINNER_THEME_MODES]\n\nexport const SQL_SPINNER_SIZES = {\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n} as const;\n\nexport type SqlSpinnerSize = (typeof SQL_SPINNER_SIZES)[keyof typeof SQL_SPINNER_SIZES];\n","<script setup lang=\"ts\">\n  import { type PropType, computed } from \"vue\";\n  import {\n    SQL_SPINNER_SIZES,\n    SQL_SPINNER_THEME_MODES,\n    type SqlSpinnerSize,\n    type SqlSpinnerThemeMode,\n  } from \"../constants/sql-components\";\n\n  const props = defineProps({\n    type: {\n      type: String as PropType<SqlSpinnerThemeMode>,\n      default: SQL_SPINNER_THEME_MODES.DARK,\n    },\n    size: {\n      type: String as PropType<SqlSpinnerSize>,\n      default: SQL_SPINNER_SIZES.MEDIUM,\n    },\n    // Opcional: texto accesible (si no hay, marcamos aria-hidden)\n    label: {\n      type: String,\n      default: \"\",\n    },\n  });\n\n  const hasLabel = computed(() => props.label && props.label.length > 0);\n</script>\n\n<template>\n  <span\n    class=\"sql-spinner\"\n    :class=\"[`theme-${type}`, `sql-spinner--${size}`]\"\n    role=\"status\"\n    :aria-label=\"hasLabel ? label : undefined\"\n    :aria-live=\"hasLabel ? 'polite' : undefined\"\n    :aria-hidden=\"hasLabel ? undefined : 'true'\"\n  >\n    <span class=\"ring\" />\n    <span v-if=\"hasLabel\" class=\"sr-only\">{{ label }}</span>\n  </span>\n</template>\n\n<style lang=\"scss\" scoped>\n  @use \"../assets/css/colors.scss\" as colors;\n\n  /* Accesibilidad (solo-lectura visual) */\n  .sr-only {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  @keyframes sql-spin {\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  .sql-spinner {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n\n    /* Tamaños por clase */\n    &.sql-spinner--small {\n      width: 12px;\n      height: 12px;\n    }\n    &.sql-spinner--medium {\n      width: 16px;\n      height: 16px;\n    }\n    &.sql-spinner--large {\n      width: 24px;\n      height: 24px;\n    }\n\n    .ring {\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n      border-radius: 50%;\n      border-style: solid;\n      border-width: 2px;\n      animation: sql-spin 0.8s linear infinite;\n    }\n\n    /* Temas */\n    &.theme-light .ring {\n      /* 3 lados visibles, 1 transparente para efecto “spinner” */\n      border-color: colors.$white colors.$white colors.$white transparent;\n    }\n\n    &.theme-dark .ring {\n      border-color: colors.$primary-main colors.$primary-main\n        colors.$primary-main transparent;\n    }\n  }\n</style>\n","// Evento genérico de click para props/emit\nexport const CLICK = 'click' as const\nexport type ClickEventName = typeof CLICK\n","<template>\n  <button\n    class=\"sql-button\"\n    :type=\"nativeType\"\n    :disabled=\"disabled || loading\"\n    :autofocus=\"autofocus\"\n    :aria-busy=\"loading || undefined\"\n    :aria-disabled=\"disabled || loading || undefined\"\n    :aria-pressed=\"selected !== null ? !!selected : undefined\"\n    :class=\"[\n      type ? `sql-button--${type}` : '',\n      size ? `sql-button--${size}` : '',\n      {\n        'is-disabled': disabled,\n        'is-loading': loading,\n        'is-circle': circle,\n        'is-plain': plain,\n        'is-round': round,\n        'selectable-button': selected !== null,\n        'is-selected': selected,\n      },\n    ]\"\n    @click=\"handleClick\"\n  >\n    <!-- Siempre renderizamos el contenedor para que el spinner funcione con o sin texto -->\n    <span class=\"slot-container\" :class=\"{ 'is-loading': loading }\">\n      <!-- Spinner superpuesto cuando loading -->\n      <SqlSpinner v-if=\"loading\" class=\"sql-spinner\" :type=\"spinnerType\" />\n\n      <!-- Texto/slot (se oculta visualmente cuando loading) -->\n      <div v-if=\"$slots.default\" class=\"slotted-content\">\n        <slot />\n      </div>\n    </span>\n  </button>\n</template>\n<script setup lang=\"ts\">\n  import { computed, type PropType } from \"vue\";\n  import SqlSpinner from \"@shared/components/SqlSpinner.vue\";\n  import {\n    SQL_BUTTON_NATIVE_TYPES,\n    SQL_BUTTON_SIZES,\n    SQL_BUTTON_TYPES,\n    SQL_SPINNER_THEME_MODES,\n    type SqlButtonNativeType,\n    type SqlButtonSize,\n    type SqlButtonType,\n  } from \"@shared/constants/sql-components\";\n  import { CLICK } from \"@shared/constants/events\";\n\n  const props = defineProps({\n    type: {\n      type: String as PropType<SqlButtonType>,\n      default: SQL_BUTTON_TYPES.DEFAULT,\n    },\n    size: {\n      type: String as PropType<SqlButtonSize>,\n      default: SQL_BUTTON_SIZES.LARGE,\n    },\n    nativeType: {\n      type: String as PropType<SqlButtonNativeType>,\n      default: SQL_BUTTON_NATIVE_TYPES.BUTTON,\n    },\n    selected: {\n      type: Boolean as PropType<boolean | null>,\n      default: null,\n    },\n    loading: Boolean,\n    disabled: Boolean,\n    plain: Boolean,\n    autofocus: Boolean,\n    round: Boolean,\n    circle: Boolean,\n  });\n\n  const emit = defineEmits<{\n    (e: typeof CLICK, event: MouseEvent): void;\n  }>();\n\n  const spinnerType = computed(() =>\n    props.type === SQL_BUTTON_TYPES.PRIMARY\n      ? SQL_SPINNER_THEME_MODES.LIGHT\n      : SQL_SPINNER_THEME_MODES.DARK\n  );\n\n  function handleClick(event: MouseEvent) {\n    if (props.disabled || props.loading) return; // guard\n    emit(CLICK, event);\n  }\n</script>\n\n<style lang=\"scss\" scoped>\n  @use \"../assets/css/colors.scss\" as colors;\n  @use \"../assets/css/spacing.scss\" as s;\n\n  /* keyframes a nivel raíz */\n  @keyframes rotating {\n    0% {\n      transform: rotateZ(360deg);\n    }\n    100% {\n      transform: rotateZ(0deg);\n    }\n  }\n\n  $default-background: colors.$white;\n\n  .sql-button {\n    padding: 0;\n\n    color: colors.$primary-main;\n    font-weight: 500;\n    font-size: 14px;\n    line-height: 20px;\n\n    border-width: 0;\n    border-radius: 4px;\n    outline: none;\n\n    cursor: pointer;\n    transition: background 0.2s, color 0.2s, border-color 0.2s;\n\n    &:active,\n    &:hover {\n      outline: none;\n    }\n\n    &[disabled] {\n      cursor: not-allowed;\n    }\n\n    &.is-circle {\n      padding: s.spacing(1);\n      border-radius: 50%;\n    }\n\n    .slot-container {\n      position: relative;\n\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n\n      .slotted-content {\n        display: inline-flex;\n        align-items: center;\n      }\n\n      &.is-loading {\n        .slotted-content {\n          visibility: hidden;\n        } /* el contenido sigue en el flujo para no cambiar ancho/alto */\n      }\n\n      .sql-spinner {\n        position: absolute;\n        inset: 0;\n\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        width: 1em;\n        height: 1em;\n        margin: auto;\n\n        pointer-events: none;\n      }\n    }\n\n    /* Types */\n    &.sql-button--default {\n      color: colors.$primary-main;\n      background-color: $default-background;\n\n      &:hover {\n        background-color: colors.$primary-tint;\n      }\n\n      &.is-disabled {\n        color: colors.$primary-mid;\n        background-color: $default-background;\n      }\n    }\n\n    &.sql-button--primary {\n      color: colors.$white;\n      background-color: colors.$primary-accent-main;\n\n      &:hover {\n        background-color: colors.$primary-accent-shadow;\n      }\n      &.is-disabled {\n        background-color: colors.$primary-accent-mid;\n      }\n    }\n\n    &.sql-button--secondary {\n      color: colors.$primary-main;\n      background-color: colors.$secondary-background;\n\n      &:hover {\n        background-color: colors.$primary-tint;\n      }\n      &.is-disabled {\n        color: colors.$primary-secondary-text;\n        background-color: colors.$primary-tint;\n      }\n    }\n\n    &.sql-button--tertiary {\n      color: colors.$primary-main;\n      background-color: $default-background;\n\n      &:hover {\n        background-color: colors.$primary-tint;\n      }\n      &:active {\n        color: $default-background;\n        background-color: colors.$primary-secondary-text;\n      }\n      &.is-disabled {\n        color: colors.$primary-mid;\n        background-color: $default-background;\n        &:active {\n          color: colors.$primary-mid;\n          background-color: $default-background;\n        }\n      }\n\n      &.selectable-button {\n        &:active {\n          color: colors.$primary-accent-main !important;\n          background: colors.$primary-accent-background !important;\n        }\n\n        &.is-selected {\n          color: colors.$primary-accent-main;\n          border: 1px solid colors.$primary-accent-main;\n          background: colors.$primary-accent-background;\n        }\n      }\n    }\n\n    &.sql-button--special {\n      color: colors.$primary-accent-main;\n      border: 1px solid colors.$primary-accent-mid;\n      background-color: $default-background;\n\n      &:hover {\n        border: 1px solid colors.$primary-accent-main;\n      }\n      &:active {\n        border: 1px solid colors.$primary-accent-main;\n        background-color: colors.$primary-accent-background;\n      }\n      &.is-disabled {\n        color: colors.$primary-accent-mid;\n        border: 1px solid colors.$primary-accent-tint;\n        background-color: $default-background;\n\n        &:active {\n          border: 1px solid colors.$primary-accent-tint;\n          background-color: $default-background;\n        }\n      }\n    }\n\n    &.sql-button--special2 {\n      color: colors.$primary-accent-main;\n      background-color: $default-background;\n\n      &:hover {\n        background-color: colors.$primary-accent-background;\n      }\n      &:active {\n        color: colors.$primary-accent-main;\n        background-color: colors.$primary-accent-tint;\n      }\n      &.is-disabled {\n        color: colors.$primary-accent-mid;\n        background-color: colors.$primary-accent-background;\n        &:active {\n          color: colors.$primary-accent-mid;\n          background-color: colors.$primary-accent-background;\n        }\n      }\n    }\n\n    &.sql-button--dotted {\n      color: colors.$primary-mid;\n      font-weight: bold;\n\n      border: 1px dashed colors.$primary-mid;\n      border-radius: s.spacing(3);\n\n      background-color: transparent;\n\n      &:hover:not(.is-disabled) {\n        color: colors.$primary-accent-main;\n        border: 1px dashed colors.$primary-accent-main;\n        background-color: colors.$primary-accent-background;\n      }\n    }\n\n    /* Sizes */\n    &.sql-button--small {\n      height: s.spacing(3);\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 14px;\n\n      .slot-container {\n        padding: 0 s.spacing(1);\n        .icon-left {\n          margin-right: 2px;\n        }\n        .icon-right {\n          margin-left: 2px;\n        }\n      }\n\n      .sql-spinner .spinner {\n        height: s.spacing(2);\n      }\n    }\n\n    &.sql-button--small-square {\n      height: s.spacing(3);\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 15px;\n\n      .slot-container {\n        padding: 4px;\n      }\n    }\n\n    &.sql-button--small-square-no-padding {\n      height: s.spacing(3);\n      font-weight: 400;\n      font-size: 12px;\n      line-height: 15px;\n\n      .slot-container {\n        padding: 0;\n      }\n    }\n\n    &.sql-button--medium {\n      height: s.spacing(4);\n\n      .slot-container {\n        padding: 0 12px;\n        .icon-left {\n          margin-right: 2px;\n        }\n        .icon-right {\n          margin-left: 2px;\n        }\n      }\n    }\n\n    &.sql-button--medium-square {\n      height: s.spacing(4);\n      .slot-container {\n        padding: 6px;\n      }\n    }\n\n    &.sql-button--large {\n      height: 36px;\n\n      .slot-container {\n        padding: 0 s.spacing(2);\n        .icon-left {\n          margin-right: 4px;\n        }\n        .icon-right {\n          margin-left: 4px;\n        }\n      }\n    }\n\n    &.sql-button--large-square {\n      height: 36px;\n      .slot-container {\n        padding: s.spacing(1);\n      }\n    }\n\n    &.sql-button--xlarge {\n      height: s.spacing(6);\n\n      .slot-container {\n        padding: 0 22px;\n        .icon-left {\n          margin-right: 4px;\n        }\n        .icon-right {\n          margin-left: 4px;\n        }\n      }\n    }\n\n    &.sql-button--xlarge-square {\n      height: s.spacing(6);\n      .slot-container {\n        padding: s.spacing(2);\n      }\n    }\n  }\n</style>\n"],"names":["SQL_BUTTON_TYPES","SQL_BUTTON_SIZES","SQL_BUTTON_NATIVE_TYPES","SQL_SPINNER_THEME_MODES","SQL_SPINNER_SIZES","props","__props","hasLabel","computed","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_2","_toDisplayString","CLICK","emit","__emit","spinnerType","handleClick","event","_createBlock","SqlSpinner","$slots","_openBlock","_renderSlot","_ctx"],"mappings":";AACO,MAAMA,IAAmB;AAAA,EAC9B,SAAS;AAAA,EACT,SAAS;AAMX,GAIaC,IAAmB;AAAA,EAM9B,OAAO;AAIT,GAIaC,IAA0B;AAAA,EACrC,QAAQ;AAGV,GAIaC,IAA0B;AAAA,EACrC,OAAO;AAAA;AAAA,EACP,MAAM;AAAA;AACR,GAGaC,IAAoB;AAAA,EAE/B,QAAQ;AAEV;;;;;;;;;;;;;;;;;;;;;ACpCE,UAAMC,IAAQC,GAgBRC,IAAWC,EAAS,MAAMH,EAAM,SAASA,EAAM,MAAM,SAAS,CAAC;2BAIrEI,EAUO,QAAA;AAAA,MATL,OAAKC,EAAA,CAAC,eAAa,CAAA,SACDJ,EAAA,IAAI,oBAAoBA,EAAA,IAAI,EAAA,CAAA,CAAA;AAAA,MAC9C,MAAK;AAAA,MACJ,cAAYC,EAAA,QAAWD,EAAA,QAAQ;AAAA,MAC/B,aAAWC,EAAA,QAAQ,WAAc;AAAA,MACjC,eAAaA,EAAA,QAAW,SAAS;AAAA,IAAA;sBAElCI,EAAqB,QAAA,EAAf,OAAM,OAAA,GAAM,MAAA,EAAA;AAAA,MACNJ,EAAA,cAAZE,EAAwD,QAAxDG,GAAwDC,EAAfP,EAAA,KAAK,GAAA,CAAA;;;;;;;;iECrCrCQ,IAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACiDnB,UAAMT,IAAQC,GAyBRS,IAAOC,GAIPC,IAAcT;AAAA,MAAS,MAC3BH,EAAM,SAASL,EAAiB,UAC5BG,EAAwB,QACxBA,EAAwB;AAAA,IAAA;AAG9B,aAASe,EAAYC,GAAmB;AACtC,MAAId,EAAM,YAAYA,EAAM,WAC5BU,EAAKD,GAAOK,CAAK;AAAA,IACnB;2BAvFAV,EAiCS,UAAA;AAAA,MAhCP,UAAM,cAAY;AAAA,QAOFH,EAAA,sBAAsBA,EAAA,IAAI,KAAA;AAAA,QAAeA,EAAA,sBAAsBA,EAAA,IAAI,KAAA;AAAA;yBAAwCA,EAAA;AAAA,wBAAgCA,EAAA;AAAA,uBAA8BA,EAAA;AAAA,sBAA4BA,EAAA;AAAA,sBAA2BA,EAAA;AAAA,+BAAoCA,EAAA,aAAQ;AAAA,yBAAkCA,EAAA;AAAA,QAAA;AAAA;MAN7T,MAAMA,EAAA;AAAA,MACN,UAAUA,EAAA,YAAYA,EAAA;AAAA,MACtB,WAAWA,EAAA;AAAA,MACX,aAAWA,EAAA,WAAW;AAAA,MACtB,iBAAeA,EAAA,YAAYA,EAAA,WAAW;AAAA,MACtC,gBAAcA,EAAA,aAAQ,OAAA,CAAA,CAAcA,EAAA,WAAW;AAAA,MAc/C,SAAOY;AAAA,IAAA;MAGRP,EAQO,QAAA;AAAA,QARD,OAAKD,EAAA,CAAC,kBAAgB,EAAA,cAAyBJ,EAAA,SAAO,CAAA;AAAA,MAAA;QAExCA,EAAA,gBAAlBc,EAAqEC,GAAA;AAAA;UAA1C,OAAM;AAAA,UAAe,MAAMJ,EAAA;AAAA,QAAA;QAG3CK,EAAAA,OAAO,WAAlBC,KAAAd,EAEM,OAFNG,GAEM;AAAA,UADJY,EAAQC,EAAA,QAAA,WAAA,CAAA,GAAA,QAAA,EAAA;AAAA,QAAA;;;;;"}

package/dist/sql_components_vue3.css

@@ -0,0 +1 @@
+@charset "UTF-8";*,*:before,*:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{height:100%}body{margin:0;color:#414c58;font-size:14px;font-family:Mulish,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#fff}a{text-decoration:none;color:inherit}article,aside,blockquote,body,button,dd,details,div,dl,dt,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,input,legend,li,menu,nav,ol,p,section,td,textarea,th,ul{margin:0;padding:0}button,input,select,textarea{font:inherit;line-height:inherit}img,svg{max-width:100%;height:auto;display:block}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:left;font-weight:400;vertical-align:middle}q{quotes:none}q:before,q:after{content:"";content:none}input[type=search]{-webkit-appearance:textfield;outline-offset:-2px}input[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;vertical-align:top;resize:vertical}[hidden]{display:none!important}.sr-only[data-v-bdd073d8]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes sql-spin-bdd073d8{to{transform:rotate(360deg)}}.sql-spinner[data-v-bdd073d8]{display:inline-flex;align-items:center;justify-content:center}.sql-spinner.sql-spinner--small[data-v-bdd073d8]{width:12px;height:12px}.sql-spinner.sql-spinner--medium[data-v-bdd073d8]{width:16px;height:16px}.sql-spinner.sql-spinner--large[data-v-bdd073d8]{width:24px;height:24px}.sql-spinner .ring[data-v-bdd073d8]{box-sizing:border-box;width:100%;height:100%;border-radius:50%;border-style:solid;border-width:2px;animation:sql-spin-bdd073d8 .8s linear infinite}.sql-spinner.theme-light .ring[data-v-bdd073d8]{border-color:#fff #fff #fff transparent}.sql-spinner.theme-dark .ring[data-v-bdd073d8]{border-color:#414c58 #414c58 #414c58 transparent}@keyframes rotating-bd5f8a62{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.sql-button[data-v-bd5f8a62]{padding:0;color:#414c58;font-weight:500;font-size:14px;line-height:20px;border-width:0;border-radius:4px;outline:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s}.sql-button[data-v-bd5f8a62]:active,.sql-button[data-v-bd5f8a62]:hover{outline:none}.sql-button[disabled][data-v-bd5f8a62]{cursor:not-allowed}.sql-button.is-circle[data-v-bd5f8a62]{padding:4px;border-radius:50%}.sql-button .slot-container[data-v-bd5f8a62]{position:relative;display:inline-flex;justify-content:center;align-items:center}.sql-button .slot-container .slotted-content[data-v-bd5f8a62]{display:inline-flex;align-items:center}.sql-button .slot-container.is-loading .slotted-content[data-v-bd5f8a62]{visibility:hidden}.sql-button .slot-container .sql-spinner[data-v-bd5f8a62]{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;width:1em;height:1em;margin:auto;pointer-events:none}.sql-button.sql-button--default[data-v-bd5f8a62]{color:#414c58;background-color:#fff}.sql-button.sql-button--default[data-v-bd5f8a62]:hover{background-color:#e7e9ea}.sql-button.sql-button--default.is-disabled[data-v-bd5f8a62]{color:#b8bcc0;background-color:#fff}.sql-button.sql-button--primary[data-v-bd5f8a62]{color:#fff;background-color:#6a69ff}.sql-button.sql-button--primary[data-v-bd5f8a62]:hover{background-color:#504fbf}.sql-button.sql-button--primary.is-disabled[data-v-bd5f8a62]{background-color:#c7c7ff}.sql-button.sql-button--secondary[data-v-bd5f8a62]{color:#414c58;background-color:#f6f6f6}.sql-button.sql-button--secondary[data-v-bd5f8a62]:hover{background-color:#e7e9ea}.sql-button.sql-button--secondary.is-disabled[data-v-bd5f8a62]{color:#888f97;background-color:#e7e9ea}.sql-button.sql-button--tertiary[data-v-bd5f8a62]{color:#414c58;background-color:#fff}.sql-button.sql-button--tertiary[data-v-bd5f8a62]:hover{background-color:#e7e9ea}.sql-button.sql-button--tertiary[data-v-bd5f8a62]:active{color:#fff;background-color:#888f97}.sql-button.sql-button--tertiary.is-disabled[data-v-bd5f8a62],.sql-button.sql-button--tertiary.is-disabled[data-v-bd5f8a62]:active{color:#b8bcc0;background-color:#fff}.sql-button.sql-button--tertiary.selectable-button[data-v-bd5f8a62]:active{color:#6a69ff!important;background:#f2f2ff!important}.sql-button.sql-button--tertiary.selectable-button.is-selected[data-v-bd5f8a62]{color:#6a69ff;border:1px solid #6a69ff;background:#f2f2ff}.sql-button.sql-button--special[data-v-bd5f8a62]{color:#6a69ff;border:1px solid #c7c7ff;background-color:#fff}.sql-button.sql-button--special[data-v-bd5f8a62]:hover{border:1px solid #6a69ff}.sql-button.sql-button--special[data-v-bd5f8a62]:active{border:1px solid #6a69ff;background-color:#f2f2ff}.sql-button.sql-button--special.is-disabled[data-v-bd5f8a62]{color:#c7c7ff;border:1px solid #ececff;background-color:#fff}.sql-button.sql-button--special.is-disabled[data-v-bd5f8a62]:active{border:1px solid #ececff;background-color:#fff}.sql-button.sql-button--special2[data-v-bd5f8a62]{color:#6a69ff;background-color:#fff}.sql-button.sql-button--special2[data-v-bd5f8a62]:hover{background-color:#f2f2ff}.sql-button.sql-button--special2[data-v-bd5f8a62]:active{color:#6a69ff;background-color:#ececff}.sql-button.sql-button--special2.is-disabled[data-v-bd5f8a62],.sql-button.sql-button--special2.is-disabled[data-v-bd5f8a62]:active{color:#c7c7ff;background-color:#f2f2ff}.sql-button.sql-button--dotted[data-v-bd5f8a62]{color:#b8bcc0;font-weight:700;border:1px dashed #b8bcc0;border-radius:12px;background-color:transparent}.sql-button.sql-button--dotted[data-v-bd5f8a62]:hover:not(.is-disabled){color:#6a69ff;border:1px dashed #6a69ff;background-color:#f2f2ff}.sql-button.sql-button--small[data-v-bd5f8a62]{height:12px;font-weight:400;font-size:12px;line-height:14px}.sql-button.sql-button--small .slot-container[data-v-bd5f8a62]{padding:0 4px}.sql-button.sql-button--small .slot-container .icon-left[data-v-bd5f8a62]{margin-right:2px}.sql-button.sql-button--small .slot-container .icon-right[data-v-bd5f8a62]{margin-left:2px}.sql-button.sql-button--small .sql-spinner .spinner[data-v-bd5f8a62]{height:8px}.sql-button.sql-button--small-square[data-v-bd5f8a62]{height:12px;font-weight:400;font-size:12px;line-height:15px}.sql-button.sql-button--small-square .slot-container[data-v-bd5f8a62]{padding:4px}.sql-button.sql-button--small-square-no-padding[data-v-bd5f8a62]{height:12px;font-weight:400;font-size:12px;line-height:15px}.sql-button.sql-button--small-square-no-padding .slot-container[data-v-bd5f8a62]{padding:0}.sql-button.sql-button--medium[data-v-bd5f8a62]{height:16px}.sql-button.sql-button--medium .slot-container[data-v-bd5f8a62]{padding:0 12px}.sql-button.sql-button--medium .slot-container .icon-left[data-v-bd5f8a62]{margin-right:2px}.sql-button.sql-button--medium .slot-container .icon-right[data-v-bd5f8a62]{margin-left:2px}.sql-button.sql-button--medium-square[data-v-bd5f8a62]{height:16px}.sql-button.sql-button--medium-square .slot-container[data-v-bd5f8a62]{padding:6px}.sql-button.sql-button--large[data-v-bd5f8a62]{height:36px}.sql-button.sql-button--large .slot-container[data-v-bd5f8a62]{padding:0 8px}.sql-button.sql-button--large .slot-container .icon-left[data-v-bd5f8a62]{margin-right:4px}.sql-button.sql-button--large .slot-container .icon-right[data-v-bd5f8a62]{margin-left:4px}.sql-button.sql-button--large-square[data-v-bd5f8a62]{height:36px}.sql-button.sql-button--large-square .slot-container[data-v-bd5f8a62]{padding:4px}.sql-button.sql-button--xlarge[data-v-bd5f8a62]{height:24px}.sql-button.sql-button--xlarge .slot-container[data-v-bd5f8a62]{padding:0 22px}.sql-button.sql-button--xlarge .slot-container .icon-left[data-v-bd5f8a62]{margin-right:4px}.sql-button.sql-button--xlarge .slot-container .icon-right[data-v-bd5f8a62]{margin-left:4px}.sql-button.sql-button--xlarge-square[data-v-bd5f8a62]{height:24px}.sql-button.sql-button--xlarge-square .slot-container[data-v-bd5f8a62]{padding:8px}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@salesql/sql_components_vue3",
+  "version": "0.2.0",
+  "description": "Librería de componentes Vue 3 (SalesQL)",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs"
+    },
+    "./dist/style.css": "./dist/sql_components_vue3.css"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@histoire/plugin-vue": "1.0.0-alpha.3",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "flexsearch": "^0.8.212",
+    "histoire": "1.0.0-alpha.3",
+    "sass": "^1.93.2",
+    "shiki": "^3.13.0",
+    "vite": "^7.1.7",
+    "vscode-oniguruma": "^2.0.1",
+    "vscode-textmate": "^9.2.0",
+    "vue": "^3.5.0",
+    "vue-tsc": "^2.2.12"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.19.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/salesql/salesql-components-library-vue3.git"
+  },
+  "bugs": {
+    "url": "https://github.com/salesql/salesql-components-library-vue3/issues"
+  },
+  "homepage": "https://github.com/salesql/salesql-components-library-vue3#readme",
+  "scripts": {
+    "build": "vue-tsc -p tsconfig.build.json --emitDeclarationOnly && vite build",
+    "stories": "histoire dev",
+    "typecheck": "vue-tsc --noEmit",
+    "changeset:version": "changeset version",
+    "changeset:publish": "changeset publish"
+  }
+}