@salesql/sql_components_vue3 0.2.0 → 0.3.0

package/README.md

@@ -0,0 +1,252 @@
+# @salesql/sql_components_vue3
+
+Librería de componentes Vue 3 (TypeScript) para SalesQL.  
+Estilos con **SCSS** (variables centralizadas en `colors.scss`).  
+Visor de componentes y playground con **Histoire**.
+
+---
+
+## 🚀 Requisitos
+
+> ⚠️ **Node:** Vite 7 requiere **Node ≥ 20.19** (recomendado **22.12.0**).  
+> Con Node 18 fallará con `crypto.hash is not a function`.
+
+| Tool / lib             | Versión recomendada    |
+| ---------------------- | ---------------------- |
+| **Node**               | **22.12.0** (o ≥20.19) |
+| **pnpm**               | 10.17.0                |
+| **Vue**                | 3.5.22                 |
+| **Vite**               | 7.1.7                  |
+| **@vitejs/plugin-vue** | 6.0.1                  |
+| **TypeScript**         | 5.9.2                  |
+| **vue-tsc**            | 2.2.12                 |
+| **Histoire**           | 1.0.0-alpha.3          |
+| **Sass (dart-sass)**   | 1.93.2                 |
+| **Changesets**         | 2.29.7                 |
+
+### Preparación de entorno
+
+```bash
+# Node
+nvm install 22.12.0
+nvm use 22.12.0
+node -v  # v22.12.0
+
+# Instalar dependencias del monorepo
+pnpm install
+
+# (Primera vez con Vite/Histoire)
+pnpm approve-builds     # marca @parcel/watcher y confirma
+```
+
+---
+
+## 📂 Estructura
+
+```
+salesql-components-library-vue3/
+├─ package.json                 # raíz del monorepo
+├─ pnpm-workspace.yaml
+├─ tsconfig.base.json
+└─ components/                  # paquete de la librería
+   ├─ package.json
+   ├─ tsconfig.json             # solo src/*
+   ├─ tsconfig.build.json       # build de la lib
+   ├─ tsconfig.node.json        # configs: vite/histoire
+   ├─ vite.config.ts
+   ├─ histoire.config.ts
+   ├─ src/
+   │  ├─ index.ts               # exporta componentes (+ importa estilos base)
+   │  ├─ env.d.ts
+   │  ├─ stories.setup.ts
+   │  ├─ assets/css/
+   │  │  ├─ base.scss
+   │  │  ├─ colors.scss
+   │  │  └─ spacing.scss
+   │  ├─ constants/sql-components.ts
+   │  └─ components/
+   │     ├─ SqlButton.vue
+   │     ├─ SqlButton.story.vue
+   │     ├─ SqlSpinner.vue
+   │     └─ SqlSpinner.story.vue
+   └─ dist/                     # salida de build
+```
+
+---
+
+## 📦 Scripts principales
+
+Desde la raíz:
+
+```bash
+pnpm build         # build de la librería
+pnpm dev:stories   # arranca Histoire
+pnpm typecheck     # chequeo estricto de tipos
+pnpm changeset     # crear un changeset
+pnpm release:version   # aplicar changeset y subir versión
+pnpm release:publish   # publicar a npm
+pnpm reset         # limpiar node_modules + reinstalar + aprobar builds
+```
+
+---
+
+## 🔎 Histoire (visualización y testeo)
+
+Para arrancar el entorno de historias:
+
+```bash
+pnpm dev:stories
+```
+
+- Abre http://localhost:6006
+- Historias junto al componente, ej: `SqlButton.story.vue`
+- Usa `<Story>` / `<Variant>` / `<Controls>` para mostrar variantes e interactuar
+
+---
+
+## 📥 Uso en apps consumidoras
+
+```bash
+pnpm add @salesql/sql_components_vue3
+```
+
+Ejemplo:
+
+```vue
+<script setup lang="ts">
+import { SqlButton } from '@salesql/sql_components_vue3';
+</script>
+
+<template>
+  <SqlButton class="sql-button--primary sql-button--large"> Guardar </SqlButton>
+</template>
+```
+
+Los estilos base se importan automáticamente desde la librería (`base.scss`).
+
+---
+
+## 🛠️ Añadir un nuevo componente (Checklist)
+
+> Convención de nombres: archivos **PascalCase** (`SqlX.vue`, `SqlX.story.vue`).
+
+### 1. Crear el componente
+
+`components/src/components/SqlX.vue`:
+
+```vue
+<script setup lang="ts">
+// lógica/props
+</script>
+
+<template>
+  <div class="sql-x">
+    <slot />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@use '../assets/css/colors.scss' as colors;
+@use '../assets/css/spacing.scss' as s;
+
+.sql-x {
+  color: colors.$primary-main;
+  padding: s.spacing(2);
+}
+</style>
+```
+
+### 2. Crear la historia
+
+`components/src/components/SqlX.story.vue`:
+
+```vue
+<script setup lang="ts">
+import SqlX from './SqlX.vue';
+</script>
+
+<template>
+  <Story title="SqlX/Básico">
+    <Variant title="Default">
+      <SqlX>Contenido</SqlX>
+    </Variant>
+    <Variant title="Playground">
+      <Controls :data="{ text: { type: 'text', default: 'Hola' } }">
+        <template #default="{ state }">
+          <SqlX>{{ state.text }}</SqlX>
+        </template>
+      </Controls>
+    </Variant>
+  </Story>
+</template>
+```
+
+### 3. Exportarlo
+
+En `components/src/index.ts`:
+
+```ts
+import './assets/css/base.scss';
+
+export { default as SqlButton } from './components/SqlButton.vue';
+export { default as SqlSpinner } from './components/SqlSpinner.vue';
+export { default as SqlX } from './components/SqlX.vue';
+```
+
+### 4. Probar con Histoire
+
+```bash
+pnpm dev:stories
+```
+
+### 5. Chequear y build
+
+```bash
+pnpm typecheck
+pnpm build
+```
+
+### 6. Versionado
+
+```bash
+pnpm changeset
+pnpm release:version
+```
+
+### 7. Publicación
+
+```bash
+pnpm release:publish
+```
+
+---
+
+## 🔧 Convenciones
+
+- **Archivos:** PascalCase para `.vue` y `.story.vue`.
+- **Estilos:** `@use '../assets/css/colors.scss' as colors;`.
+- **Spacing:** `spacing.scss` con `map.get(...)`.
+- **Enums/constantes:**
+  ```ts
+  export const SQL_SPINNER_SIZES = {
+    SMALL: 'small',
+    MEDIUM: 'medium',
+    LARGE: 'large',
+  } as const;
+  export type SqlSpinnerSize = (typeof SQL_SPINNER_SIZES)[keyof typeof SQL_SPINNER_SIZES];
+  ```
+
+---
+
+## 🐛 Troubleshooting
+
+- **`crypto.hash is not a function` / “Vite requires Node 20.19+ or 22.12+”**  
+  → Actualiza Node a **22.12.0** y reinstala dependencias.
+
+- **VSCode marca “Cannot find module 'vue'”**  
+  → Asegúrate de que `vue` está en **peerDependencies** y **devDependencies** en `components/package.json`.  
+  Reinicia TS server.
+
+- **pnpm pide aprobar `@parcel/watcher`**  
+  → `pnpm approve-builds` (marca `@parcel/watcher`).  
+  Para global: `pnpm approve-builds --global`.

package/dist/constants/events.d.ts

@@ -0,0 +1,2 @@
+export declare const CLICK: "click";
+export type ClickEventName = typeof CLICK;

package/dist/index.cjs

@@ -1,2 +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;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),r={LIGHT:"light",DARK:"dark"},E={SMALL:"small",MEDIUM:"medium",LARGE:"large"},b=["aria-label","aria-live","aria-hidden"],B={key:0,class:"sr-only"},T=e.defineComponent({__name:"SqlSpinner",props:{type:{type:String,default:r.DARK},size:{type:String,default:E.SMALL},label:{type:String,default:""}},setup(t){const s=t,n=e.computed(()=>s.label&&s.label.length>0);return(l,a)=>(e.openBlock(),e.createElementBlock("span",{class:e.normalizeClass(["sql-spinner",[`theme-${t.type}`,`sql-spinner--${t.size}`]]),role:"status","aria-label":n.value?t.label:void 0,"aria-live":n.value?"polite":void 0,"aria-hidden":n.value?void 0:"true"},[a[0]||(a[0]=e.createElementVNode("span",{class:"ring"},null,-1)),n.value?(e.openBlock(),e.createElementBlock("span",B,e.toDisplayString(t.label),1)):e.createCommentVNode("",!0)],10,b))}}),u=(t,s)=>{const n=t.__vccOpts||t;for(const[l,a]of s)n[l]=a;return n},S=u(T,[["__scopeId","data-v-9694500e"]]),c={DEFAULT:"default",PRIMARY:"primary",SECONDARY:"secondary",TERTIARY:"tertiary",SPECIAL:"special",SPECIAL2:"special2",SPECIAL3:"special3",DOTTED:"dotted",DANGER:"danger",GRADIENT:"gradient"},m={SMALL:"small",SMALL_SQUARE:"small-square",SMALL_SQUARE_NO_PADDING:"small-square-no-padding",MEDIUM:"medium",MEDIUM_SQUARE:"medium-square",LARGE:"large",LARGE_SQUARE:"large-square",XLARGE:"xlarge",XLARGE_SQUARE:"xlarge-square"},y={BUTTON:"button",SUBMIT:"submit",RESET:"reset"},g="click",L=["type","disabled","autofocus","aria-busy","aria-disabled","aria-pressed"],k={key:1,class:"slotted-content"},A=e.defineComponent({__name:"SqlButton",props:{type:{type:String,default:c.DEFAULT},size:{type:String,default:m.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(t,{emit:s}){const n=t,l=s,a=e.computed(()=>n.type===c.PRIMARY||n.type===c.DANGER?r.LIGHT:r.DARK);function o(i){n.disabled||n.loading||l(g,i)}return(i,_)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["sql-button",[t.type?`sql-button--${t.type}`:"",t.size?`sql-button--${t.size}`:"",{"is-disabled":t.disabled,"is-loading":t.loading,"is-circle":t.circle,"is-plain":t.plain,"is-round":t.round,"selectable-button":t.selected!==null,"is-selected":t.selected}]]),type:t.nativeType,disabled:t.disabled||t.loading,autofocus:t.autofocus,"aria-busy":t.loading||void 0,"aria-disabled":t.disabled||t.loading||void 0,"aria-pressed":t.selected!==null?!!t.selected:void 0,onClick:o},[e.createElementVNode("span",{class:e.normalizeClass(["slot-container",{"is-loading":t.loading}])},[t.loading?(e.openBlock(),e.createBlock(e.unref(S),{key:0,class:"sql-spinner",type:a.value},null,8,["type"])):e.createCommentVNode("",!0),i.$slots.default?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(i.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)],2)],10,L))}}),N=u(A,[["__scopeId","data-v-9eeb1a72"]]),d={LEFT:"left",CENTER:"center",RIGHT:"right"},p={class:"basic-table"},I={class:"basic-table__wrapper"},f={class:"basic-table__table"},R={key:0},v=["colspan"],h=e.defineComponent({__name:"BasicTable",props:{columns:{type:Array,required:!0},rows:{type:Array,required:!0},emptyMessage:{type:String,default:""}},setup(t){return(s,n)=>(e.openBlock(),e.createElementBlock("div",p,[e.createElementVNode("div",I,[e.createElementVNode("table",f,[e.createElementVNode("thead",null,[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,l=>{var a;return e.openBlock(),e.createElementBlock("th",{key:l.key,class:e.normalizeClass(`basic-table__th--${(a=l.align)!=null?a:e.unref(d).LEFT}`),style:e.normalizeStyle(l.width?{width:l.width}:void 0)},e.toDisplayString(l.label),7)}),128))])]),e.createElementVNode("tbody",null,[t.rows.length===0?(e.openBlock(),e.createElementBlock("tr",R,[e.createElementVNode("td",{class:"basic-table__empty",colspan:t.columns.length,"data-testid":"basic-table-empty"},[e.renderSlot(s.$slots,"empty",{},()=>[e.createTextVNode(e.toDisplayString(t.emptyMessage),1)],!0)],8,v)])):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.rows,l=>(e.openBlock(),e.createElementBlock("tr",{key:l.id,"data-testid":"basic-table-row"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,a=>{var o;return e.openBlock(),e.createElementBlock("td",{key:a.key,class:e.normalizeClass(`basic-table__td--${(o=a.align)!=null?o:e.unref(d).LEFT}`)},[e.renderSlot(s.$slots,`cell-${a.key}`,{row:l},()=>[e.createTextVNode(e.toDisplayString(l[a.key]),1)],!0)],2)}),128))]))),128))])])])]))}}),C=u(h,[["__scopeId","data-v-8f713759"]]);exports.BASIC_TABLE_ALIGN=d;exports.BasicTable=C;exports.SQL_BUTTON_NATIVE_TYPES=y;exports.SQL_BUTTON_SIZES=m;exports.SQL_BUTTON_TYPES=c;exports.SQL_SPINNER_SIZES=E;exports.SQL_SPINNER_THEME_MODES=r;exports.SqlButton=N;exports.SqlSpinner=S;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +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"}
+{"version":3,"file":"index.cjs","sources":["../src/ui/SqlSpinner/SqlSpinner.types.ts","../src/ui/SqlSpinner/SqlSpinner.vue","../src/ui/SqlButton/SqlButton.types.ts","../src/constants/events.ts","../src/ui/SqlButton/SqlButton.vue","../src/ui/BasicTable/BasicTable.types.ts","../src/ui/BasicTable/BasicTable.vue"],"sourcesContent":["// Tema del spinner (clases: theme-<mode>)\nexport const SQL_SPINNER_THEME_MODES = {\n  LIGHT: 'light', // para fondos oscuros: spinner claro\n  DARK: 'dark', // para fondos claros: spinner oscuro\n} as const;\nexport type SqlSpinnerThemeMode =\n  (typeof SQL_SPINNER_THEME_MODES)[keyof typeof SQL_SPINNER_THEME_MODES];\n\n// Tamaños (clases: sql-spinner--<size>)\nexport const SQL_SPINNER_SIZES = {\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n} as const;\nexport type SqlSpinnerSize = (typeof SQL_SPINNER_SIZES)[keyof typeof SQL_SPINNER_SIZES];\n","<script setup lang=\"ts\">\nimport { type PropType, computed } from 'vue';\nimport {\n  SQL_SPINNER_SIZES,\n  SQL_SPINNER_THEME_MODES,\n  type SqlSpinnerSize,\n  type SqlSpinnerThemeMode,\n} from './SqlSpinner.types';\n\nconst 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.SMALL,\n  },\n  // Opcional: texto accesible (si no hay, marcamos aria-hidden)\n  label: {\n    type: String,\n    default: '',\n  },\n});\n\nconst 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(1turn);\n  }\n}\n\n.sql-spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  /* color del anillo por tema (paridad con los PNG de frontend-app) */\n  --sql-spinner-color: #{colors.$primary-accent-main};\n\n  /* Tamaños (paridad con frontend-app: small=20, medium=36, large=64) */\n  &.sql-spinner--small {\n    width: 20px;\n    height: 20px;\n  }\n  &.sql-spinner--medium {\n    width: 36px;\n    height: 36px;\n  }\n  &.sql-spinner--large {\n    width: 64px;\n    height: 64px;\n  }\n\n  .ring {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n\n    /* Anillo con gradiente cónico transparente → color (arco que se desvanece) */\n    background: conic-gradient(from 90deg, transparent 8%, var(--sql-spinner-color) 100%);\n\n    /* Recorta el centro para dejar solo el anillo (grosor ~16% del radio ≈ 8% del diámetro,\n         medido sobre los PNG de frontend-app) */\n    mask: radial-gradient(farthest-side, transparent calc(100% - 16%), #000 calc(100% - 16%));\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-mask: radial-gradient(\n      farthest-side,\n      transparent calc(100% - 16%),\n      #000 calc(100% - 16%)\n    );\n\n    animation: sql-spin 1s linear infinite;\n  }\n\n  /* Temas */\n  &.theme-dark {\n    --sql-spinner-color: #{colors.$primary-accent-main};\n  }\n  &.theme-light {\n    --sql-spinner-color: #{colors.$white};\n  }\n}\n</style>\n","// 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  SPECIAL3: 'special3',\n  DOTTED: 'dotted',\n  DANGER: 'danger',\n  GRADIENT: 'gradient',\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 =\n  (typeof SQL_BUTTON_NATIVE_TYPES)[keyof typeof SQL_BUTTON_NATIVE_TYPES];\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\">\nimport { computed, type PropType } from 'vue';\nimport { SqlSpinner, SQL_SPINNER_THEME_MODES } from '@shared/ui/SqlSpinner';\nimport {\n  SQL_BUTTON_NATIVE_TYPES,\n  SQL_BUTTON_SIZES,\n  SQL_BUTTON_TYPES,\n  type SqlButtonNativeType,\n  type SqlButtonSize,\n  type SqlButtonType,\n} from './SqlButton.types';\nimport { CLICK } from '@shared/constants/events';\n\nconst 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\nconst emit = defineEmits<{\n  (e: typeof CLICK, event: MouseEvent): void;\n}>();\n\nconst spinnerType = computed(() =>\n  props.type === SQL_BUTTON_TYPES.PRIMARY || props.type === SQL_BUTTON_TYPES.DANGER\n    ? SQL_SPINNER_THEME_MODES.LIGHT\n    : SQL_SPINNER_THEME_MODES.DARK\n);\n\nfunction 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:\n    background 0.2s,\n    color 0.2s,\n    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      white-space: nowrap;\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--special3 {\n    color: colors.$primary-accent-main;\n    font-weight: 400;\n\n    background-color: colors.$primary-accent-tint;\n\n    &:hover {\n      color: colors.$white;\n      background-color: colors.$primary-accent-main;\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  &.sql-button--danger {\n    color: colors.$tertiary-accent-main !important;\n\n    background-color: colors.$tertiary-accent-tint;\n\n    &:hover {\n      background-color: colors.$tertiary-accent-mid;\n    }\n    &.is-disabled {\n      color: colors.$tertiary-accent-mid;\n      background-color: colors.$tertiary-accent-tint;\n    }\n  }\n\n  &.sql-button--gradient {\n    color: colors.$white !important;\n\n    background: linear-gradient(\n      106.21deg,\n      colors.$ai-gradient-1 22.52%,\n      colors.$ai-gradient-2 100%\n    );\n\n    &:hover {\n      background: linear-gradient(\n        106deg,\n        colors.$ai-gradient-hover 22.52%,\n        colors.$ai-gradient-2 100%\n      ) !important;\n    }\n    &.is-disabled {\n      background: linear-gradient(\n        106deg,\n        colors.$ai-gradient-disabled 22.52%,\n        colors.$ai-gradient-2 100%\n      );\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    width: s.spacing(3);\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","// Alineación de una columna (clases: basic-table__th--<align> / __td--<align>)\nexport const BASIC_TABLE_ALIGN = {\n  LEFT: 'left',\n  CENTER: 'center',\n  RIGHT: 'right',\n} as const;\nexport type BasicTableAlign = (typeof BASIC_TABLE_ALIGN)[keyof typeof BASIC_TABLE_ALIGN];\n\n// Definición de una columna. `key` mapea a la propiedad de la row para el\n// contenido por defecto y da nombre al slot scoped `cell-<key>`.\nexport interface BasicTableColumn {\n  key: string;\n  label: string;\n  align?: BasicTableAlign;\n  width?: string;\n}\n\n// Row genérica: sólo se exige un `id` estable para el :key; el resto de las\n// propiedades las consume cada columna vía su `key`.\nexport interface BasicTableRow {\n  id: string | number;\n  [key: string]: unknown;\n}\n","<script setup lang=\"ts\">\nimport { type PropType } from 'vue';\nimport { BASIC_TABLE_ALIGN, type BasicTableColumn, type BasicTableRow } from './BasicTable.types';\n\ndefineProps({\n  columns: {\n    type: Array as PropType<BasicTableColumn[]>,\n    required: true,\n  },\n  rows: {\n    type: Array as PropType<BasicTableRow[]>,\n    required: true,\n  },\n  emptyMessage: {\n    type: String,\n    default: '',\n  },\n});\n</script>\n\n<template>\n  <div class=\"basic-table\">\n    <div class=\"basic-table__wrapper\">\n      <table class=\"basic-table__table\">\n        <thead>\n          <tr>\n            <th\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              :class=\"`basic-table__th--${column.align ?? BASIC_TABLE_ALIGN.LEFT}`\"\n              :style=\"column.width ? { width: column.width } : undefined\"\n            >\n              {{ column.label }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr v-if=\"rows.length === 0\">\n            <td\n              class=\"basic-table__empty\"\n              :colspan=\"columns.length\"\n              data-testid=\"basic-table-empty\"\n            >\n              <slot name=\"empty\">{{ emptyMessage }}</slot>\n            </td>\n          </tr>\n          <tr v-for=\"row in rows\" :key=\"row.id\" data-testid=\"basic-table-row\">\n            <td\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              :class=\"`basic-table__td--${column.align ?? BASIC_TABLE_ALIGN.LEFT}`\"\n            >\n              <slot :name=\"`cell-${column.key}`\" :row=\"row\">{{ row[column.key] }}</slot>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/css/colors.scss' as colors;\n@use '../../assets/css/spacing.scss' as s;\n@use '../../assets/css/font-size.scss' as f;\n\n.basic-table {\n  &__wrapper {\n    border: 1px solid colors.$primary-tint;\n    border-radius: 8px;\n\n    overflow-x: auto;\n  }\n\n  &__table {\n    width: 100%;\n\n    border-collapse: collapse;\n\n    // Own every border/height explicitly so the table stays consistent even\n    // when embedded in a host app whose global `table td/th` rules would\n    // otherwise leak in. The scoped specificity (block + [data-v]) beats them.\n    th {\n      padding: s.spacing(1) s.spacing(2);\n\n      color: colors.$primary-main;\n      font-weight: 700;\n      font-size: f.font-size('text');\n\n      border: 0;\n      border-bottom: 1px solid colors.$primary-tint;\n\n      background-color: colors.$primary-background;\n    }\n\n    td {\n      height: auto;\n      padding: s.spacing(2);\n\n      color: colors.$primary-main;\n      font-size: f.font-size('text');\n\n      border: 0;\n    }\n\n    tr {\n      border: 0;\n    }\n\n    // Row separator only BETWEEN adjacent body rows: empty/single → none.\n    tbody tr + tr {\n      border-top: 1px solid colors.$primary-tint;\n    }\n  }\n\n  // Alignment modifiers are always emitted, so each owns its text-align and\n  // no base `th` text-align competes on specificity.\n  &__th--left,\n  &__td--left {\n    text-align: left;\n  }\n\n  &__th--center,\n  &__td--center {\n    text-align: center;\n  }\n\n  &__th--right,\n  &__td--right {\n    text-align: right;\n  }\n\n  &__empty {\n    padding: s.spacing(5) s.spacing(3);\n\n    color: colors.$primary-secondary-text;\n    text-align: center;\n  }\n}\n</style>\n"],"names":["SQL_SPINNER_THEME_MODES","SQL_SPINNER_SIZES","props","__props","hasLabel","computed","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_2","_toDisplayString","SQL_BUTTON_TYPES","SQL_BUTTON_SIZES","SQL_BUTTON_NATIVE_TYPES","CLICK","emit","__emit","spinnerType","handleClick","event","_createBlock","_unref","SqlSpinner","$slots","_openBlock","_renderSlot","_ctx","BASIC_TABLE_ALIGN","_hoisted_1","_hoisted_3","_Fragment","_renderList","column","_a","_normalizeStyle","_hoisted_4","row"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import './assets/css/base.scss';
+export { SqlButton } from './ui/SqlButton';
+export { SQL_BUTTON_TYPES, SQL_BUTTON_SIZES, SQL_BUTTON_NATIVE_TYPES } from './ui/SqlButton';
+export type { SqlButtonType, SqlButtonSize, SqlButtonNativeType } from './ui/SqlButton';
+export { SqlSpinner } from './ui/SqlSpinner';
+export { SQL_SPINNER_THEME_MODES, SQL_SPINNER_SIZES } from './ui/SqlSpinner';
+export type { SqlSpinnerThemeMode, SqlSpinnerSize } from './ui/SqlSpinner';
+export { BasicTable, BASIC_TABLE_ALIGN } from './ui/BasicTable';
+export type { BasicTableColumn, BasicTableRow, BasicTableAlign } from './ui/BasicTable';

package/dist/index.es.js

@@ -1,31 +1,26 @@
-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 = {
+import { defineComponent as L, computed as h, openBlock as s, createElementBlock as n, normalizeClass as o, createElementVNode as d, toDisplayString as u, createCommentVNode as y, createBlock as I, unref as g, renderSlot as A, Fragment as b, renderList as S, normalizeStyle as v, createTextVNode as R } from "vue";
+const T = {
   LIGHT: "light",
-  // para botones oscuros: spinner claro
+  // para fondos oscuros: spinner claro
   DARK: "dark"
-  // para botones claros: spinner oscuro
-}, I = {
-  MEDIUM: "medium"
-}, L = ["aria-label", "aria-live", "aria-hidden"], q = {
+  // para fondos claros: spinner oscuro
+}, B = {
+  SMALL: "small",
+  MEDIUM: "medium",
+  LARGE: "large"
+}, N = ["aria-label", "aria-live", "aria-hidden"], k = {
   key: 0,
   class: "sr-only"
-}, N = /* @__PURE__ */ b({
+}, D = /* @__PURE__ */ L({
   __name: "SqlSpinner",
   props: {
     type: {
       type: String,
-      default: u.DARK
+      default: T.DARK
     },
     size: {
       type: String,
-      default: I.MEDIUM
+      default: B.SMALL
     },
     // Opcional: texto accesible (si no hay, marcamos aria-hidden)
     label: {
@@ -34,40 +29,65 @@ const r = {
     }
   },
   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}`]]),
+    const i = e, l = h(() => i.label && i.label.length > 0);
+    return (t, a) => (s(), n("span", {
+      class: o(["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"
+      "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] = S("span", { class: "ring" }, null, -1)),
-      t.value ? (n(), o("span", q, v(e.label), 1)) : c("", !0)
-    ], 10, L));
+      a[0] || (a[0] = d("span", { class: "ring" }, null, -1)),
+      l.value ? (s(), n("span", k, u(e.label), 1)) : y("", !0)
+    ], 10, N));
   }
-}), 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 = {
+}), m = (e, i) => {
+  const l = e.__vccOpts || e;
+  for (const [t, a] of i)
+    l[t] = a;
+  return l;
+}, M = /* @__PURE__ */ m(D, [["__scopeId", "data-v-9694500e"]]), E = {
+  DEFAULT: "default",
+  PRIMARY: "primary",
+  SECONDARY: "secondary",
+  TERTIARY: "tertiary",
+  SPECIAL: "special",
+  SPECIAL2: "special2",
+  SPECIAL3: "special3",
+  DOTTED: "dotted",
+  DANGER: "danger",
+  GRADIENT: "gradient"
+}, q = {
+  SMALL: "small",
+  SMALL_SQUARE: "small-square",
+  SMALL_SQUARE_NO_PADDING: "small-square-no-padding",
+  MEDIUM: "medium",
+  MEDIUM_SQUARE: "medium-square",
+  LARGE: "large",
+  LARGE_SQUARE: "large-square",
+  XLARGE: "xlarge",
+  XLARGE_SQUARE: "xlarge-square"
+}, $ = {
+  BUTTON: "button",
+  SUBMIT: "submit",
+  RESET: "reset"
+}, p = "click", U = ["type", "disabled", "autofocus", "aria-busy", "aria-disabled", "aria-pressed"], G = {
   key: 1,
   class: "slotted-content"
-}, D = /* @__PURE__ */ b({
+}, C = /* @__PURE__ */ L({
   __name: "SqlButton",
   props: {
     type: {
       type: String,
-      default: r.DEFAULT
+      default: E.DEFAULT
     },
     size: {
       type: String,
-      default: B.LARGE
+      default: q.LARGE
     },
     nativeType: {
       type: String,
-      default: E.BUTTON
+      default: $.BUTTON
     },
     selected: {
       type: Boolean,
@@ -80,15 +100,15 @@ const r = {
     round: Boolean,
     circle: Boolean
   },
-  setup(e, { emit: l }) {
-    const t = e, i = l, a = y(
-      () => t.type === r.PRIMARY ? u.LIGHT : u.DARK
+  setup(e, { emit: i }) {
+    const l = e, t = i, a = h(
+      () => l.type === E.PRIMARY || l.type === E.DANGER ? T.LIGHT : T.DARK
     );
-    function g(s) {
-      t.disabled || t.loading || i(k, s);
+    function r(c) {
+      l.disabled || l.loading || t(p, c);
     }
-    return (s, U) => (n(), o("button", {
-      class: d(["sql-button", [
+    return (c, F) => (s(), n("button", {
+      class: o(["sql-button", [
         e.type ? `sql-button--${e.type}` : "",
         e.size ? `sql-button--${e.size}` : "",
         {
@@ -107,25 +127,101 @@ const r = {
       "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
+      onClick: r
     }, [
-      S("span", {
-        class: d(["slot-container", { "is-loading": e.loading }])
+      d("span", {
+        class: o(["slot-container", { "is-loading": e.loading }])
       }, [
-        e.loading ? (n(), T(h, {
+        e.loading ? (s(), I(g(M), {
           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)
+        }, null, 8, ["type"])) : y("", !0),
+        c.$slots.default ? (s(), n("div", G, [
+          A(c.$slots, "default", {}, void 0, !0)
+        ])) : y("", !0)
       ], 2)
-    ], 10, R));
+    ], 10, U));
+  }
+}), x = /* @__PURE__ */ m(C, [["__scopeId", "data-v-9eeb1a72"]]), f = {
+  LEFT: "left",
+  CENTER: "center",
+  RIGHT: "right"
+}, O = { class: "basic-table" }, P = { class: "basic-table__wrapper" }, Q = { class: "basic-table__table" }, _ = { key: 0 }, z = ["colspan"], w = /* @__PURE__ */ L({
+  __name: "BasicTable",
+  props: {
+    columns: {
+      type: Array,
+      required: !0
+    },
+    rows: {
+      type: Array,
+      required: !0
+    },
+    emptyMessage: {
+      type: String,
+      default: ""
+    }
+  },
+  setup(e) {
+    return (i, l) => (s(), n("div", O, [
+      d("div", P, [
+        d("table", Q, [
+          d("thead", null, [
+            d("tr", null, [
+              (s(!0), n(b, null, S(e.columns, (t) => {
+                var a;
+                return s(), n("th", {
+                  key: t.key,
+                  class: o(`basic-table__th--${(a = t.align) != null ? a : g(f).LEFT}`),
+                  style: v(t.width ? { width: t.width } : void 0)
+                }, u(t.label), 7);
+              }), 128))
+            ])
+          ]),
+          d("tbody", null, [
+            e.rows.length === 0 ? (s(), n("tr", _, [
+              d("td", {
+                class: "basic-table__empty",
+                colspan: e.columns.length,
+                "data-testid": "basic-table-empty"
+              }, [
+                A(i.$slots, "empty", {}, () => [
+                  R(u(e.emptyMessage), 1)
+                ], !0)
+              ], 8, z)
+            ])) : y("", !0),
+            (s(!0), n(b, null, S(e.rows, (t) => (s(), n("tr", {
+              key: t.id,
+              "data-testid": "basic-table-row"
+            }, [
+              (s(!0), n(b, null, S(e.columns, (a) => {
+                var r;
+                return s(), n("td", {
+                  key: a.key,
+                  class: o(`basic-table__td--${(r = a.align) != null ? r : g(f).LEFT}`)
+                }, [
+                  A(i.$slots, `cell-${a.key}`, { row: t }, () => [
+                    R(u(t[a.key]), 1)
+                  ], !0)
+                ], 2);
+              }), 128))
+            ]))), 128))
+          ])
+        ])
+      ])
+    ]));
   }
-}), M = /* @__PURE__ */ f(D, [["__scopeId", "data-v-bd5f8a62"]]);
+}), H = /* @__PURE__ */ m(w, [["__scopeId", "data-v-8f713759"]]);
 export {
-  M as sqlButton,
-  h as sqlSpinner
+  f as BASIC_TABLE_ALIGN,
+  H as BasicTable,
+  $ as SQL_BUTTON_NATIVE_TYPES,
+  q as SQL_BUTTON_SIZES,
+  E as SQL_BUTTON_TYPES,
+  B as SQL_SPINNER_SIZES,
+  T as SQL_SPINNER_THEME_MODES,
+  x as SqlButton,
+  M as SqlSpinner
 };
 //# sourceMappingURL=index.es.js.map

package/dist/index.es.js.map

@@ -1 +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;;;;;"}
+{"version":3,"file":"index.es.js","sources":["../src/ui/SqlSpinner/SqlSpinner.types.ts","../src/ui/SqlSpinner/SqlSpinner.vue","../src/ui/SqlButton/SqlButton.types.ts","../src/constants/events.ts","../src/ui/SqlButton/SqlButton.vue","../src/ui/BasicTable/BasicTable.types.ts","../src/ui/BasicTable/BasicTable.vue"],"sourcesContent":["// Tema del spinner (clases: theme-<mode>)\nexport const SQL_SPINNER_THEME_MODES = {\n  LIGHT: 'light', // para fondos oscuros: spinner claro\n  DARK: 'dark', // para fondos claros: spinner oscuro\n} as const;\nexport type SqlSpinnerThemeMode =\n  (typeof SQL_SPINNER_THEME_MODES)[keyof typeof SQL_SPINNER_THEME_MODES];\n\n// Tamaños (clases: sql-spinner--<size>)\nexport const SQL_SPINNER_SIZES = {\n  SMALL: 'small',\n  MEDIUM: 'medium',\n  LARGE: 'large',\n} as const;\nexport type SqlSpinnerSize = (typeof SQL_SPINNER_SIZES)[keyof typeof SQL_SPINNER_SIZES];\n","<script setup lang=\"ts\">\nimport { type PropType, computed } from 'vue';\nimport {\n  SQL_SPINNER_SIZES,\n  SQL_SPINNER_THEME_MODES,\n  type SqlSpinnerSize,\n  type SqlSpinnerThemeMode,\n} from './SqlSpinner.types';\n\nconst 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.SMALL,\n  },\n  // Opcional: texto accesible (si no hay, marcamos aria-hidden)\n  label: {\n    type: String,\n    default: '',\n  },\n});\n\nconst 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(1turn);\n  }\n}\n\n.sql-spinner {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  /* color del anillo por tema (paridad con los PNG de frontend-app) */\n  --sql-spinner-color: #{colors.$primary-accent-main};\n\n  /* Tamaños (paridad con frontend-app: small=20, medium=36, large=64) */\n  &.sql-spinner--small {\n    width: 20px;\n    height: 20px;\n  }\n  &.sql-spinner--medium {\n    width: 36px;\n    height: 36px;\n  }\n  &.sql-spinner--large {\n    width: 64px;\n    height: 64px;\n  }\n\n  .ring {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n\n    /* Anillo con gradiente cónico transparente → color (arco que se desvanece) */\n    background: conic-gradient(from 90deg, transparent 8%, var(--sql-spinner-color) 100%);\n\n    /* Recorta el centro para dejar solo el anillo (grosor ~16% del radio ≈ 8% del diámetro,\n         medido sobre los PNG de frontend-app) */\n    mask: radial-gradient(farthest-side, transparent calc(100% - 16%), #000 calc(100% - 16%));\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-mask: radial-gradient(\n      farthest-side,\n      transparent calc(100% - 16%),\n      #000 calc(100% - 16%)\n    );\n\n    animation: sql-spin 1s linear infinite;\n  }\n\n  /* Temas */\n  &.theme-dark {\n    --sql-spinner-color: #{colors.$primary-accent-main};\n  }\n  &.theme-light {\n    --sql-spinner-color: #{colors.$white};\n  }\n}\n</style>\n","// 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  SPECIAL3: 'special3',\n  DOTTED: 'dotted',\n  DANGER: 'danger',\n  GRADIENT: 'gradient',\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 =\n  (typeof SQL_BUTTON_NATIVE_TYPES)[keyof typeof SQL_BUTTON_NATIVE_TYPES];\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\">\nimport { computed, type PropType } from 'vue';\nimport { SqlSpinner, SQL_SPINNER_THEME_MODES } from '@shared/ui/SqlSpinner';\nimport {\n  SQL_BUTTON_NATIVE_TYPES,\n  SQL_BUTTON_SIZES,\n  SQL_BUTTON_TYPES,\n  type SqlButtonNativeType,\n  type SqlButtonSize,\n  type SqlButtonType,\n} from './SqlButton.types';\nimport { CLICK } from '@shared/constants/events';\n\nconst 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\nconst emit = defineEmits<{\n  (e: typeof CLICK, event: MouseEvent): void;\n}>();\n\nconst spinnerType = computed(() =>\n  props.type === SQL_BUTTON_TYPES.PRIMARY || props.type === SQL_BUTTON_TYPES.DANGER\n    ? SQL_SPINNER_THEME_MODES.LIGHT\n    : SQL_SPINNER_THEME_MODES.DARK\n);\n\nfunction 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:\n    background 0.2s,\n    color 0.2s,\n    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      white-space: nowrap;\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--special3 {\n    color: colors.$primary-accent-main;\n    font-weight: 400;\n\n    background-color: colors.$primary-accent-tint;\n\n    &:hover {\n      color: colors.$white;\n      background-color: colors.$primary-accent-main;\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  &.sql-button--danger {\n    color: colors.$tertiary-accent-main !important;\n\n    background-color: colors.$tertiary-accent-tint;\n\n    &:hover {\n      background-color: colors.$tertiary-accent-mid;\n    }\n    &.is-disabled {\n      color: colors.$tertiary-accent-mid;\n      background-color: colors.$tertiary-accent-tint;\n    }\n  }\n\n  &.sql-button--gradient {\n    color: colors.$white !important;\n\n    background: linear-gradient(\n      106.21deg,\n      colors.$ai-gradient-1 22.52%,\n      colors.$ai-gradient-2 100%\n    );\n\n    &:hover {\n      background: linear-gradient(\n        106deg,\n        colors.$ai-gradient-hover 22.52%,\n        colors.$ai-gradient-2 100%\n      ) !important;\n    }\n    &.is-disabled {\n      background: linear-gradient(\n        106deg,\n        colors.$ai-gradient-disabled 22.52%,\n        colors.$ai-gradient-2 100%\n      );\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    width: s.spacing(3);\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","// Alineación de una columna (clases: basic-table__th--<align> / __td--<align>)\nexport const BASIC_TABLE_ALIGN = {\n  LEFT: 'left',\n  CENTER: 'center',\n  RIGHT: 'right',\n} as const;\nexport type BasicTableAlign = (typeof BASIC_TABLE_ALIGN)[keyof typeof BASIC_TABLE_ALIGN];\n\n// Definición de una columna. `key` mapea a la propiedad de la row para el\n// contenido por defecto y da nombre al slot scoped `cell-<key>`.\nexport interface BasicTableColumn {\n  key: string;\n  label: string;\n  align?: BasicTableAlign;\n  width?: string;\n}\n\n// Row genérica: sólo se exige un `id` estable para el :key; el resto de las\n// propiedades las consume cada columna vía su `key`.\nexport interface BasicTableRow {\n  id: string | number;\n  [key: string]: unknown;\n}\n","<script setup lang=\"ts\">\nimport { type PropType } from 'vue';\nimport { BASIC_TABLE_ALIGN, type BasicTableColumn, type BasicTableRow } from './BasicTable.types';\n\ndefineProps({\n  columns: {\n    type: Array as PropType<BasicTableColumn[]>,\n    required: true,\n  },\n  rows: {\n    type: Array as PropType<BasicTableRow[]>,\n    required: true,\n  },\n  emptyMessage: {\n    type: String,\n    default: '',\n  },\n});\n</script>\n\n<template>\n  <div class=\"basic-table\">\n    <div class=\"basic-table__wrapper\">\n      <table class=\"basic-table__table\">\n        <thead>\n          <tr>\n            <th\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              :class=\"`basic-table__th--${column.align ?? BASIC_TABLE_ALIGN.LEFT}`\"\n              :style=\"column.width ? { width: column.width } : undefined\"\n            >\n              {{ column.label }}\n            </th>\n          </tr>\n        </thead>\n        <tbody>\n          <tr v-if=\"rows.length === 0\">\n            <td\n              class=\"basic-table__empty\"\n              :colspan=\"columns.length\"\n              data-testid=\"basic-table-empty\"\n            >\n              <slot name=\"empty\">{{ emptyMessage }}</slot>\n            </td>\n          </tr>\n          <tr v-for=\"row in rows\" :key=\"row.id\" data-testid=\"basic-table-row\">\n            <td\n              v-for=\"column in columns\"\n              :key=\"column.key\"\n              :class=\"`basic-table__td--${column.align ?? BASIC_TABLE_ALIGN.LEFT}`\"\n            >\n              <slot :name=\"`cell-${column.key}`\" :row=\"row\">{{ row[column.key] }}</slot>\n            </td>\n          </tr>\n        </tbody>\n      </table>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/css/colors.scss' as colors;\n@use '../../assets/css/spacing.scss' as s;\n@use '../../assets/css/font-size.scss' as f;\n\n.basic-table {\n  &__wrapper {\n    border: 1px solid colors.$primary-tint;\n    border-radius: 8px;\n\n    overflow-x: auto;\n  }\n\n  &__table {\n    width: 100%;\n\n    border-collapse: collapse;\n\n    // Own every border/height explicitly so the table stays consistent even\n    // when embedded in a host app whose global `table td/th` rules would\n    // otherwise leak in. The scoped specificity (block + [data-v]) beats them.\n    th {\n      padding: s.spacing(1) s.spacing(2);\n\n      color: colors.$primary-main;\n      font-weight: 700;\n      font-size: f.font-size('text');\n\n      border: 0;\n      border-bottom: 1px solid colors.$primary-tint;\n\n      background-color: colors.$primary-background;\n    }\n\n    td {\n      height: auto;\n      padding: s.spacing(2);\n\n      color: colors.$primary-main;\n      font-size: f.font-size('text');\n\n      border: 0;\n    }\n\n    tr {\n      border: 0;\n    }\n\n    // Row separator only BETWEEN adjacent body rows: empty/single → none.\n    tbody tr + tr {\n      border-top: 1px solid colors.$primary-tint;\n    }\n  }\n\n  // Alignment modifiers are always emitted, so each owns its text-align and\n  // no base `th` text-align competes on specificity.\n  &__th--left,\n  &__td--left {\n    text-align: left;\n  }\n\n  &__th--center,\n  &__td--center {\n    text-align: center;\n  }\n\n  &__th--right,\n  &__td--right {\n    text-align: right;\n  }\n\n  &__empty {\n    padding: s.spacing(5) s.spacing(3);\n\n    color: colors.$primary-secondary-text;\n    text-align: center;\n  }\n}\n</style>\n"],"names":["SQL_SPINNER_THEME_MODES","SQL_SPINNER_SIZES","props","__props","hasLabel","computed","_createElementBlock","_normalizeClass","_createElementVNode","_hoisted_2","_toDisplayString","SQL_BUTTON_TYPES","SQL_BUTTON_SIZES","SQL_BUTTON_NATIVE_TYPES","CLICK","emit","__emit","spinnerType","handleClick","event","_createBlock","_unref","SqlSpinner","$slots","_openBlock","_renderSlot","_ctx","BASIC_TABLE_ALIGN","_hoisted_1","_hoisted_3","_Fragment","_renderList","column","_a","_normalizeStyle","_hoisted_4","row"],"mappings":"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"}

package/dist/sql_components_vue3.css

@@ -1 +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}
+@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-9694500e]{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-9694500e{to{transform:rotate(1turn)}}.sql-spinner[data-v-9694500e]{display:inline-flex;align-items:center;justify-content:center;--sql-spinner-color: #6a69ff}.sql-spinner.sql-spinner--small[data-v-9694500e]{width:20px;height:20px}.sql-spinner.sql-spinner--medium[data-v-9694500e]{width:36px;height:36px}.sql-spinner.sql-spinner--large[data-v-9694500e]{width:64px;height:64px}.sql-spinner .ring[data-v-9694500e]{box-sizing:border-box;width:100%;height:100%;border-radius:50%;background:conic-gradient(from 90deg,transparent 8%,var(--sql-spinner-color) 100%);mask:radial-gradient(farthest-side,transparent 84%,#000 84%);-webkit-mask:radial-gradient(farthest-side,transparent 84%,#000 84%);animation:sql-spin-9694500e 1s linear infinite}.sql-spinner.theme-dark[data-v-9694500e]{--sql-spinner-color: #6a69ff}.sql-spinner.theme-light[data-v-9694500e]{--sql-spinner-color: #fff}@keyframes rotating-9eeb1a72{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.sql-button[data-v-9eeb1a72]{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-9eeb1a72]:active,.sql-button[data-v-9eeb1a72]:hover{outline:none}.sql-button[disabled][data-v-9eeb1a72]{cursor:not-allowed}.sql-button.is-circle[data-v-9eeb1a72]{padding:4px;border-radius:50%}.sql-button .slot-container[data-v-9eeb1a72]{position:relative;display:inline-flex;justify-content:center;align-items:center}.sql-button .slot-container .slotted-content[data-v-9eeb1a72]{display:inline-flex;align-items:center;white-space:nowrap}.sql-button .slot-container.is-loading .slotted-content[data-v-9eeb1a72]{visibility:hidden}.sql-button .slot-container .sql-spinner[data-v-9eeb1a72]{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-9eeb1a72]{color:#414c58;background-color:#fff}.sql-button.sql-button--default[data-v-9eeb1a72]:hover{background-color:#e7e9ea}.sql-button.sql-button--default.is-disabled[data-v-9eeb1a72]{color:#b8bcc0;background-color:#fff}.sql-button.sql-button--primary[data-v-9eeb1a72]{color:#fff;background-color:#6a69ff}.sql-button.sql-button--primary[data-v-9eeb1a72]:hover{background-color:#504fbf}.sql-button.sql-button--primary.is-disabled[data-v-9eeb1a72]{background-color:#c7c7ff}.sql-button.sql-button--secondary[data-v-9eeb1a72]{color:#414c58;background-color:#f6f6f6}.sql-button.sql-button--secondary[data-v-9eeb1a72]:hover{background-color:#e7e9ea}.sql-button.sql-button--secondary.is-disabled[data-v-9eeb1a72]{color:#888f97;background-color:#e7e9ea}.sql-button.sql-button--tertiary[data-v-9eeb1a72]{color:#414c58;background-color:#fff}.sql-button.sql-button--tertiary[data-v-9eeb1a72]:hover{background-color:#e7e9ea}.sql-button.sql-button--tertiary[data-v-9eeb1a72]:active{color:#fff;background-color:#888f97}.sql-button.sql-button--tertiary.is-disabled[data-v-9eeb1a72],.sql-button.sql-button--tertiary.is-disabled[data-v-9eeb1a72]:active{color:#b8bcc0;background-color:#fff}.sql-button.sql-button--tertiary.selectable-button[data-v-9eeb1a72]:active{color:#6a69ff!important;background:#f2f2ff!important}.sql-button.sql-button--tertiary.selectable-button.is-selected[data-v-9eeb1a72]{color:#6a69ff;border:1px solid #6a69ff;background:#f2f2ff}.sql-button.sql-button--special[data-v-9eeb1a72]{color:#6a69ff;border:1px solid #c7c7ff;background-color:#fff}.sql-button.sql-button--special[data-v-9eeb1a72]:hover{border:1px solid #6a69ff}.sql-button.sql-button--special[data-v-9eeb1a72]:active{border:1px solid #6a69ff;background-color:#f2f2ff}.sql-button.sql-button--special.is-disabled[data-v-9eeb1a72]{color:#c7c7ff;border:1px solid #ececff;background-color:#fff}.sql-button.sql-button--special.is-disabled[data-v-9eeb1a72]:active{border:1px solid #ececff;background-color:#fff}.sql-button.sql-button--special2[data-v-9eeb1a72]{color:#6a69ff;background-color:#fff}.sql-button.sql-button--special2[data-v-9eeb1a72]:hover{background-color:#f2f2ff}.sql-button.sql-button--special2[data-v-9eeb1a72]:active{color:#6a69ff;background-color:#ececff}.sql-button.sql-button--special2.is-disabled[data-v-9eeb1a72],.sql-button.sql-button--special2.is-disabled[data-v-9eeb1a72]:active{color:#c7c7ff;background-color:#f2f2ff}.sql-button.sql-button--special3[data-v-9eeb1a72]{color:#6a69ff;font-weight:400;background-color:#ececff}.sql-button.sql-button--special3[data-v-9eeb1a72]:hover{color:#fff;background-color:#6a69ff}.sql-button.sql-button--special3[data-v-9eeb1a72]:active{color:#6a69ff;background-color:#ececff}.sql-button.sql-button--special3.is-disabled[data-v-9eeb1a72],.sql-button.sql-button--special3.is-disabled[data-v-9eeb1a72]:active{color:#c7c7ff;background-color:#f2f2ff}.sql-button.sql-button--dotted[data-v-9eeb1a72]{color:#b8bcc0;font-weight:700;border:1px dashed #b8bcc0;border-radius:12px;background-color:transparent}.sql-button.sql-button--dotted[data-v-9eeb1a72]:hover:not(.is-disabled){color:#6a69ff;border:1px dashed #6a69ff;background-color:#f2f2ff}.sql-button.sql-button--danger[data-v-9eeb1a72]{color:#ff6a69!important;background-color:#ffecec}.sql-button.sql-button--danger[data-v-9eeb1a72]:hover{background-color:#ffc7c7}.sql-button.sql-button--danger.is-disabled[data-v-9eeb1a72]{color:#ffc7c7;background-color:#ffecec}.sql-button.sql-button--gradient[data-v-9eeb1a72]{color:#fff!important;background:linear-gradient(106.21deg,#ff699f 22.52%,#ffba69)}.sql-button.sql-button--gradient[data-v-9eeb1a72]:hover{background:linear-gradient(106deg,#cc547f 22.52%,#ffba69)!important}.sql-button.sql-button--gradient.is-disabled[data-v-9eeb1a72]{background:linear-gradient(106deg,#ffa6c6 22.52%,#ffba69)}.sql-button.sql-button--small[data-v-9eeb1a72]{height:12px;font-weight:400;font-size:12px;line-height:14px}.sql-button.sql-button--small .slot-container[data-v-9eeb1a72]{padding:0 4px}.sql-button.sql-button--small .slot-container .icon-left[data-v-9eeb1a72]{margin-right:2px}.sql-button.sql-button--small .slot-container .icon-right[data-v-9eeb1a72]{margin-left:2px}.sql-button.sql-button--small .sql-spinner .spinner[data-v-9eeb1a72]{height:8px}.sql-button.sql-button--small-square[data-v-9eeb1a72]{height:12px;font-weight:400;font-size:12px;line-height:15px}.sql-button.sql-button--small-square .slot-container[data-v-9eeb1a72]{padding:4px}.sql-button.sql-button--small-square-no-padding[data-v-9eeb1a72]{width:12px;height:12px;font-weight:400;font-size:12px;line-height:15px}.sql-button.sql-button--small-square-no-padding .slot-container[data-v-9eeb1a72]{padding:0}.sql-button.sql-button--medium[data-v-9eeb1a72]{height:16px}.sql-button.sql-button--medium .slot-container[data-v-9eeb1a72]{padding:0 12px}.sql-button.sql-button--medium .slot-container .icon-left[data-v-9eeb1a72]{margin-right:2px}.sql-button.sql-button--medium .slot-container .icon-right[data-v-9eeb1a72]{margin-left:2px}.sql-button.sql-button--medium-square[data-v-9eeb1a72]{height:16px}.sql-button.sql-button--medium-square .slot-container[data-v-9eeb1a72]{padding:6px}.sql-button.sql-button--large[data-v-9eeb1a72]{height:36px}.sql-button.sql-button--large .slot-container[data-v-9eeb1a72]{padding:0 8px}.sql-button.sql-button--large .slot-container .icon-left[data-v-9eeb1a72]{margin-right:4px}.sql-button.sql-button--large .slot-container .icon-right[data-v-9eeb1a72]{margin-left:4px}.sql-button.sql-button--large-square[data-v-9eeb1a72]{height:36px}.sql-button.sql-button--large-square .slot-container[data-v-9eeb1a72]{padding:4px}.sql-button.sql-button--xlarge[data-v-9eeb1a72]{height:24px}.sql-button.sql-button--xlarge .slot-container[data-v-9eeb1a72]{padding:0 22px}.sql-button.sql-button--xlarge .slot-container .icon-left[data-v-9eeb1a72]{margin-right:4px}.sql-button.sql-button--xlarge .slot-container .icon-right[data-v-9eeb1a72]{margin-left:4px}.sql-button.sql-button--xlarge-square[data-v-9eeb1a72]{height:24px}.sql-button.sql-button--xlarge-square .slot-container[data-v-9eeb1a72]{padding:8px}.basic-table__wrapper[data-v-8f713759]{border:1px solid #e7e9ea;border-radius:8px;overflow-x:auto}.basic-table__table[data-v-8f713759]{width:100%;border-collapse:collapse}.basic-table__table th[data-v-8f713759]{padding:4px 8px;color:#414c58;font-weight:700;font-size:14px;border:0;border-bottom:1px solid #e7e9ea;background-color:#f6f6f6}.basic-table__table td[data-v-8f713759]{height:auto;padding:8px;color:#414c58;font-size:14px;border:0}.basic-table__table tr[data-v-8f713759]{border:0}.basic-table__table tbody tr+tr[data-v-8f713759]{border-top:1px solid #e7e9ea}.basic-table__th--left[data-v-8f713759],.basic-table__td--left[data-v-8f713759]{text-align:left}.basic-table__th--center[data-v-8f713759],.basic-table__td--center[data-v-8f713759]{text-align:center}.basic-table__th--right[data-v-8f713759],.basic-table__td--right[data-v-8f713759]{text-align:right}.basic-table__empty[data-v-8f713759]{padding:20px 12px;color:#888f97;text-align:center}

package/dist/ui/BasicTable/BasicTable.types.d.ts

@@ -0,0 +1,16 @@
+export declare const BASIC_TABLE_ALIGN: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+    readonly RIGHT: "right";
+};
+export type BasicTableAlign = (typeof BASIC_TABLE_ALIGN)[keyof typeof BASIC_TABLE_ALIGN];
+export interface BasicTableColumn {
+    key: string;
+    label: string;
+    align?: BasicTableAlign;
+    width?: string;
+}
+export interface BasicTableRow {
+    id: string | number;
+    [key: string]: unknown;
+}

package/dist/ui/BasicTable/BasicTable.vue.d.ts

@@ -0,0 +1,46 @@
+import { type PropType } from 'vue';
+import { type BasicTableColumn, type BasicTableRow } from './BasicTable.types';
+declare var __VLS_1: {}, __VLS_4: `cell-${string}`, __VLS_5: {
+    row: BasicTableRow;
+};
+type __VLS_Slots = {} & {
+    [K in NonNullable<typeof __VLS_4>]?: (props: typeof __VLS_5) => any;
+} & {
+    empty?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<BasicTableColumn[]>;
+        required: true;
+    };
+    rows: {
+        type: PropType<BasicTableRow[]>;
+        required: true;
+    };
+    emptyMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    columns: {
+        type: PropType<BasicTableColumn[]>;
+        required: true;
+    };
+    rows: {
+        type: PropType<BasicTableRow[]>;
+        required: true;
+    };
+    emptyMessage: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    emptyMessage: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ui/BasicTable/index.d.ts

@@ -0,0 +1,2 @@
+export { default as BasicTable } from './BasicTable.vue';
+export * from './BasicTable.types';

package/dist/ui/SqlButton/SqlButton.types.d.ts

@@ -0,0 +1,31 @@
+export declare const SQL_BUTTON_TYPES: {
+    readonly DEFAULT: "default";
+    readonly PRIMARY: "primary";
+    readonly SECONDARY: "secondary";
+    readonly TERTIARY: "tertiary";
+    readonly SPECIAL: "special";
+    readonly SPECIAL2: "special2";
+    readonly SPECIAL3: "special3";
+    readonly DOTTED: "dotted";
+    readonly DANGER: "danger";
+    readonly GRADIENT: "gradient";
+};
+export type SqlButtonType = (typeof SQL_BUTTON_TYPES)[keyof typeof SQL_BUTTON_TYPES];
+export declare const SQL_BUTTON_SIZES: {
+    readonly SMALL: "small";
+    readonly SMALL_SQUARE: "small-square";
+    readonly SMALL_SQUARE_NO_PADDING: "small-square-no-padding";
+    readonly MEDIUM: "medium";
+    readonly MEDIUM_SQUARE: "medium-square";
+    readonly LARGE: "large";
+    readonly LARGE_SQUARE: "large-square";
+    readonly XLARGE: "xlarge";
+    readonly XLARGE_SQUARE: "xlarge-square";
+};
+export type SqlButtonSize = (typeof SQL_BUTTON_SIZES)[keyof typeof SQL_BUTTON_SIZES];
+export declare const SQL_BUTTON_NATIVE_TYPES: {
+    readonly BUTTON: "button";
+    readonly SUBMIT: "submit";
+    readonly RESET: "reset";
+};
+export type SqlButtonNativeType = (typeof SQL_BUTTON_NATIVE_TYPES)[keyof typeof SQL_BUTTON_NATIVE_TYPES];

package/dist/ui/SqlButton/SqlButton.vue.d.ts

@@ -0,0 +1,75 @@
+import { type PropType } from 'vue';
+import { type SqlButtonNativeType, type SqlButtonSize, type SqlButtonType } from './SqlButton.types';
+declare var __VLS_5: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_5) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<SqlButtonType>;
+        default: "default";
+    };
+    size: {
+        type: PropType<SqlButtonSize>;
+        default: "large";
+    };
+    nativeType: {
+        type: PropType<SqlButtonNativeType>;
+        default: "button";
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: null;
+    };
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    plain: BooleanConstructor;
+    autofocus: BooleanConstructor;
+    round: BooleanConstructor;
+    circle: BooleanConstructor;
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    click: (event: MouseEvent) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<SqlButtonType>;
+        default: "default";
+    };
+    size: {
+        type: PropType<SqlButtonSize>;
+        default: "large";
+    };
+    nativeType: {
+        type: PropType<SqlButtonNativeType>;
+        default: "button";
+    };
+    selected: {
+        type: PropType<boolean | null>;
+        default: null;
+    };
+    loading: BooleanConstructor;
+    disabled: BooleanConstructor;
+    plain: BooleanConstructor;
+    autofocus: BooleanConstructor;
+    round: BooleanConstructor;
+    circle: BooleanConstructor;
+}>> & Readonly<{
+    onClick?: ((event: MouseEvent) => any) | undefined;
+}>, {
+    type: SqlButtonType;
+    size: SqlButtonSize;
+    circle: boolean;
+    nativeType: SqlButtonNativeType;
+    selected: boolean | null;
+    loading: boolean;
+    disabled: boolean;
+    plain: boolean;
+    autofocus: boolean;
+    round: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/ui/SqlButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SqlButton } from './SqlButton.vue';
+export * from './SqlButton.types';

package/dist/ui/SqlSpinner/SqlSpinner.types.d.ts

@@ -0,0 +1,11 @@
+export declare const SQL_SPINNER_THEME_MODES: {
+    readonly LIGHT: "light";
+    readonly DARK: "dark";
+};
+export type SqlSpinnerThemeMode = (typeof SQL_SPINNER_THEME_MODES)[keyof typeof SQL_SPINNER_THEME_MODES];
+export declare const SQL_SPINNER_SIZES: {
+    readonly SMALL: "small";
+    readonly MEDIUM: "medium";
+    readonly LARGE: "large";
+};
+export type SqlSpinnerSize = (typeof SQL_SPINNER_SIZES)[keyof typeof SQL_SPINNER_SIZES];

package/dist/ui/SqlSpinner/SqlSpinner.vue.d.ts

@@ -0,0 +1,34 @@
+import { type PropType } from 'vue';
+import { type SqlSpinnerSize, type SqlSpinnerThemeMode } from './SqlSpinner.types';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<SqlSpinnerThemeMode>;
+        default: "dark";
+    };
+    size: {
+        type: PropType<SqlSpinnerSize>;
+        default: "small";
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    type: {
+        type: PropType<SqlSpinnerThemeMode>;
+        default: "dark";
+    };
+    size: {
+        type: PropType<SqlSpinnerSize>;
+        default: "small";
+    };
+    label: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    type: SqlSpinnerThemeMode;
+    size: SqlSpinnerSize;
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/ui/SqlSpinner/index.d.ts

@@ -0,0 +1,2 @@
+export { default as SqlSpinner } from './SqlSpinner.vue';
+export * from './SqlSpinner.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesql/sql_components_vue3",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Librería de componentes Vue 3 (SalesQL)",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -28,21 +28,27 @@
   "devDependencies": {
     "@histoire/plugin-vue": "1.0.0-alpha.3",
     "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^3.2.0",
+    "@vue/test-utils": "^2.4.6",
     "flexsearch": "^0.8.212",
     "histoire": "1.0.0-alpha.3",
+    "jsdom": "^26.1.0",
     "sass": "^1.93.2",
     "shiki": "^3.13.0",
     "vite": "^7.1.7",
+    "vitest": "^3.2.0",
     "vscode-oniguruma": "^2.0.1",
     "vscode-textmate": "^9.2.0",
     "vue": "^3.5.0",
     "vue-tsc": "^2.2.12"
   },
   "publishConfig": {
-    "access": "public"
+    "access": "public",
+    "registry": "https://registry.npmjs.org",
+    "provenance": false
   },
   "engines": {
-    "node": ">=20.19.0"
+    "node": "^24.0.0"
   },
   "repository": {
     "type": "git",
@@ -53,9 +59,13 @@
   },
   "homepage": "https://github.com/salesql/salesql-components-library-vue3#readme",
   "scripts": {
-    "build": "vue-tsc -p tsconfig.build.json --emitDeclarationOnly && vite build",
+    "build": "vite build && vue-tsc -p tsconfig.build.json --emitDeclarationOnly",
     "stories": "histoire dev",
+    "build:stories": "histoire build",
     "typecheck": "vue-tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
     "changeset:version": "changeset version",
     "changeset:publish": "changeset publish"
   }