@wrrdev/fenix-ui 1.0.4 → 1.0.6

package/README.md

@@ -18,8 +18,8 @@ import { FenixUI } from '@wrrdev/fenix-ui';  // API de tema/tokens (índice)
 FenixUI.theme('dark');
 ```
 
-> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.0.4**, acesso público.
-> Subpaths disponíveis: `./theme`, `./tokens`, `./jsx`, `./button`, `./badge`, `./spinner`, `./select`, `./input`, `./switch`, `./textarea`, `./checkbox`, `./radio`, `./calendar`, `./datepicker`, `./multiselect`, `./table`, `./floatlabel`, `./dialog`, `./toast`, `./tooltip`, `./tabs`, `./progress`, `./skeleton`, `./alert`, `./drawer`, `./dropdown`, `./sidebar`, `./pagination`, `./autocomplete`, `./auto-import` e o curinga `./components/*`.
+> 📦 npm: [`@wrrdev/fenix-ui`](https://www.npmjs.com/package/@wrrdev/fenix-ui) — **v1.0.6**, acesso público.
+> Subpaths disponíveis: `./theme`, `./tokens`, `./jsx`, `./vue`, `./button`, `./badge`, `./spinner`, `./select`, `./input`, `./switch`, `./textarea`, `./checkbox`, `./radio`, `./calendar`, `./datepicker`, `./multiselect`, `./table`, `./floatlabel`, `./dialog`, `./toast`, `./tooltip`, `./tabs`, `./progress`, `./skeleton`, `./alert`, `./drawer`, `./dropdown`, `./sidebar`, `./pagination`, `./autocomplete`, `./auto-import` e o curinga `./components/*`.
 
 
 ## Consumo
@@ -65,7 +65,7 @@ Carregue o bundle **UMD** único: ele registra todos os componentes e expõe os
 <fx-toast></fx-toast>
 
 <!--
-  🔗 Links diretos para CDN (versão 1.0.4):
+  🔗 Links diretos para CDN (versão 1.0.6):
   • https://cdn.jsdelivr.net/npm/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
   • https://unpkg.com/@wrrdev/fenix-ui@latest/dist/fenix-ui.umd.min.js
 -->
@@ -165,6 +165,30 @@ FenixUI.resetTheme();
 Os tokens viram CSS Custom Properties (`--fx-color-primary`, `--fx-radius-md`, …) no `:root`,
 atravessando o Shadow DOM. Todo componente reage automaticamente.
 
+### Configuração completa (`FenixUI.configure`)
+
+Alternativa a chamar `theme()`/`setTokens()` separadamente — define tema e tokens numa chamada só:
+
+```ts
+import { FenixUI } from '@wrrdev/fenix-ui';
+
+FenixUI.configure({
+  theme: 'light',                 // 'light' | 'dark'
+  tokens: {
+    color: {
+      primary: '#0d9488',         // sobrescreve apenas o primary (merge profundo)
+    },
+    effect: {
+      ripple: '1',                // '0' desativa o ripple do fx-button
+      'focus-ring': 'none',       // campos sem anel de foco/sobra
+    },
+  },
+});
+```
+
+Grupos de tokens disponíveis: `color`, `surface`, `text`, `border`, `font`, `space`,
+`radius`, `size`, `shadow`, `motion`, `effect` e `z` (veja `@wrrdev/fenix-ui/tokens`).
+
 ### Presets prontos (temas padrão)
 
 O FenixUI já vem com temas prontos — **não é preciso definir nada**. Basta aplicar:
@@ -225,6 +249,36 @@ import '@wrrdev/fenix-ui'; // registra componentes + habilita as tipagens JSX
 Se o autocomplete ainda não aparecer, garanta que o `tsconfig` do seu projeto tem
 `"moduleResolution": "bundler"` (ou `"node16"`/`"nodenext"`) para resolver os `exports` do pacote.
 
+#### Vue 3 (templates SFC / Volar)
+
+No Vue, o autocomplete dos atributos `fx-*` nos templates é habilitado por um módulo próprio.
+Importe o subpath `./vue` **uma única vez** no `main.ts`:
+
+```ts
+import '@wrrdev/fenix-ui/vue'; // habilita autocomplete de fx-* nos templates SFC
+```
+
+Requisitos:
+
+- `vue` ≥ 3.5 (usa `IntrinsicElementAttributes`);
+- Volar / vue-tsc (já incluído no `@vue/language-tools` usado pelo VS Code + Volar);
+- no `tsconfig`, `"moduleResolution": "bundler"`.
+
+Com isso o editor mostra as propriedades de cada componente (`variant`, `size`, `loading`, …)
+nos templates. Para além do autocomplete, **validar** valores inválidos (ex.: `variant="foo"`),
+ative o modo estrito do Volar no `tsconfig.json`:
+
+```jsonc
+{
+  "vueCompilerOptions": {
+    "strictTemplates": true
+  }
+}
+```
+
+> Sem `strictTemplates`, o Vue não reporta atributos desconhecidos de elementos nativos
+> (comportamento padrão do Volar) — mas o autocomplete das propriedades continua funcionando.
+
 ## Componentes (fase 1)
 
 | Elemento     | Atributos principais                          | Slots        |

package/dist/core/vue.d.ts

@@ -0,0 +1,80 @@
+/**
+ * Tipagem de componentes <fx-*> para Vue 3 (Volar / vue-tsc).
+ *
+ * Este módulo é OPT-IN: importe `@wrrdev/fenix-ui/vue` uma única vez
+ * (ex.: no `main.ts`) para habilitar autocomplete + validação de atributos
+ * dos elementos `fx-*` nos templates SFC.
+ *
+ * - `IntrinsicElementAttributes` (Vue 3.5+): ponto oficial de extensão para
+ *   elementos nativos/custom — alimenta `NativeElements` e o
+ *   `JSX.IntrinsicElements` usado pelo Volar para tags com hífen.
+ * - `GlobalComponents`: registro adicional como componentes globais.
+ */
+import type { FxAutocompleteProps, FxAlertProps, FxBadgeProps, FxButtonProps, FxCalendarProps, FxCheckboxProps, FxDatepickerProps, FxDialogProps, FxDropdownItemProps, FxDropdownProps, FxDrawerProps, FxFloatlabelProps, FxInputProps, FxMultiselectProps, FxPaginationProps, FxProgressProps, FxRadioProps, FxSelectProps, FxSkeletonProps, FxSpinnerProps, FxSwitchProps, FxTableProps, FxTabPanelProps, FxTabsProps, FxTextareaProps, FxToastProps, FxTooltipProps } from './jsx';
+type FxComp<P> = import('vue').FunctionalComponent<P>;
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        'fx-button': FxComp<FxButtonProps>;
+        'fx-badge': FxComp<FxBadgeProps>;
+        'fx-spinner': FxComp<FxSpinnerProps>;
+        'fx-input': FxComp<FxInputProps>;
+        'fx-select': FxComp<FxSelectProps>;
+        'fx-switch': FxComp<FxSwitchProps>;
+        'fx-checkbox': FxComp<FxCheckboxProps>;
+        'fx-radio': FxComp<FxRadioProps>;
+        'fx-textarea': FxComp<FxTextareaProps>;
+        'fx-multiselect': FxComp<FxMultiselectProps>;
+        'fx-calendar': FxComp<FxCalendarProps>;
+        'fx-datepicker': FxComp<FxDatepickerProps>;
+        'fx-table': FxComp<FxTableProps>;
+        'fx-floatlabel': FxComp<FxFloatlabelProps>;
+        'fx-dialog': FxComp<FxDialogProps>;
+        'fx-drawer': FxComp<FxDrawerProps>;
+        'fx-toast': FxComp<FxToastProps>;
+        'fx-tooltip': FxComp<FxTooltipProps>;
+        'fx-tabs': FxComp<FxTabsProps>;
+        'fx-tab-panel': FxComp<FxTabPanelProps>;
+        'fx-progress': FxComp<FxProgressProps>;
+        'fx-skeleton': FxComp<FxSkeletonProps>;
+        'fx-alert': FxComp<FxAlertProps>;
+        'fx-dropdown': FxComp<FxDropdownProps>;
+        'fx-dropdown-item': FxComp<FxDropdownItemProps>;
+        'fx-pagination': FxComp<FxPaginationProps>;
+        'fx-autocomplete': FxComp<FxAutocompleteProps>;
+    }
+}
+declare module '@vue/runtime-dom' {
+    interface IntrinsicElementAttributes {
+        'fx-button': FxButtonProps;
+        'fx-badge': FxBadgeProps;
+        'fx-spinner': FxSpinnerProps;
+        'fx-input': FxInputProps;
+        'fx-select': FxSelectProps;
+        'fx-switch': FxSwitchProps;
+        'fx-checkbox': FxCheckboxProps;
+        'fx-radio': FxRadioProps;
+        'fx-textarea': FxTextareaProps;
+        'fx-multiselect': FxMultiselectProps;
+        'fx-calendar': FxCalendarProps;
+        'fx-datepicker': FxDatepickerProps;
+        'fx-table': FxTableProps;
+        'fx-floatlabel': FxFloatlabelProps;
+        'fx-dialog': FxDialogProps;
+        'fx-drawer': FxDrawerProps;
+        'fx-toast': FxToastProps;
+        'fx-tooltip': FxTooltipProps;
+        'fx-tabs': FxTabsProps;
+        'fx-tab-panel': FxTabPanelProps;
+        'fx-progress': FxProgressProps;
+        'fx-skeleton': FxSkeletonProps;
+        'fx-alert': FxAlertProps;
+        'fx-dropdown': FxDropdownProps;
+        'fx-dropdown-item': FxDropdownItemProps;
+        'fx-pagination': FxPaginationProps;
+        'fx-autocomplete': FxAutocompleteProps;
+    }
+}
+/** Marcador para `import '@wrrdev/fenix-ui/vue'` funcionar como side-effect import. */
+export declare const FX_VUE_TYPES: true;
+export {};
+//# sourceMappingURL=vue.d.ts.map

package/dist/core/vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.d.ts","sourceRoot":"","sources":["../../src/core/vue.ts"],"names":[],"mappings":"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"}

package/dist/core/vue.js

@@ -0,0 +1,5 @@
+const FX_VUE_TYPES = true;
+export {
+  FX_VUE_TYPES
+};
+//# sourceMappingURL=vue.js.map

package/dist/core/vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vue.js","sources":["../../src/core/vue.ts"],"sourcesContent":["/**\n * Tipagem de componentes <fx-*> para Vue 3 (Volar / vue-tsc).\n *\n * Este módulo é OPT-IN: importe `@wrrdev/fenix-ui/vue` uma única vez\n * (ex.: no `main.ts`) para habilitar autocomplete + validação de atributos\n * dos elementos `fx-*` nos templates SFC.\n *\n * - `IntrinsicElementAttributes` (Vue 3.5+): ponto oficial de extensão para\n *   elementos nativos/custom — alimenta `NativeElements` e o\n *   `JSX.IntrinsicElements` usado pelo Volar para tags com hífen.\n * - `GlobalComponents`: registro adicional como componentes globais.\n */\nimport type {\n  FxAutocompleteProps,\n  FxAlertProps,\n  FxBadgeProps,\n  FxButtonProps,\n  FxCalendarProps,\n  FxCheckboxProps,\n  FxDatepickerProps,\n  FxDialogProps,\n  FxDropdownItemProps,\n  FxDropdownProps,\n  FxDrawerProps,\n  FxFloatlabelProps,\n  FxInputProps,\n  FxMultiselectProps,\n  FxPaginationProps,\n  FxProgressProps,\n  FxRadioProps,\n  FxSelectProps,\n  FxSkeletonProps,\n  FxSpinnerProps,\n  FxSwitchProps,\n  FxTableProps,\n  FxTabPanelProps,\n  FxTabsProps,\n  FxTextareaProps,\n  FxToastProps,\n  FxTooltipProps,\n} from './jsx';\n\nimport type {} from '@vue/runtime-dom';\r\n\r\ntype FxComp<P> = import('vue').FunctionalComponent<P>;\n\ndeclare module '@vue/runtime-core' {\r\n  interface GlobalComponents {\r\n    'fx-button': FxComp<FxButtonProps>;\r\n    'fx-badge': FxComp<FxBadgeProps>;\r\n    'fx-spinner': FxComp<FxSpinnerProps>;\r\n    'fx-input': FxComp<FxInputProps>;\r\n    'fx-select': FxComp<FxSelectProps>;\r\n    'fx-switch': FxComp<FxSwitchProps>;\r\n    'fx-checkbox': FxComp<FxCheckboxProps>;\r\n    'fx-radio': FxComp<FxRadioProps>;\r\n    'fx-textarea': FxComp<FxTextareaProps>;\r\n    'fx-multiselect': FxComp<FxMultiselectProps>;\r\n    'fx-calendar': FxComp<FxCalendarProps>;\r\n    'fx-datepicker': FxComp<FxDatepickerProps>;\r\n    'fx-table': FxComp<FxTableProps>;\r\n    'fx-floatlabel': FxComp<FxFloatlabelProps>;\r\n    'fx-dialog': FxComp<FxDialogProps>;\r\n    'fx-drawer': FxComp<FxDrawerProps>;\r\n    'fx-toast': FxComp<FxToastProps>;\r\n    'fx-tooltip': FxComp<FxTooltipProps>;\r\n    'fx-tabs': FxComp<FxTabsProps>;\r\n    'fx-tab-panel': FxComp<FxTabPanelProps>;\r\n    'fx-progress': FxComp<FxProgressProps>;\r\n    'fx-skeleton': FxComp<FxSkeletonProps>;\r\n    'fx-alert': FxComp<FxAlertProps>;\r\n    'fx-dropdown': FxComp<FxDropdownProps>;\r\n    'fx-dropdown-item': FxComp<FxDropdownItemProps>;\r\n    'fx-pagination': FxComp<FxPaginationProps>;\r\n    'fx-autocomplete': FxComp<FxAutocompleteProps>;\r\n  }\r\n}\r\n\r\ndeclare module '@vue/runtime-dom' {\n  interface IntrinsicElementAttributes {\n    'fx-button': FxButtonProps;\n    'fx-badge': FxBadgeProps;\n    'fx-spinner': FxSpinnerProps;\n    'fx-input': FxInputProps;\n    'fx-select': FxSelectProps;\n    'fx-switch': FxSwitchProps;\n    'fx-checkbox': FxCheckboxProps;\n    'fx-radio': FxRadioProps;\n    'fx-textarea': FxTextareaProps;\n    'fx-multiselect': FxMultiselectProps;\n    'fx-calendar': FxCalendarProps;\n    'fx-datepicker': FxDatepickerProps;\n    'fx-table': FxTableProps;\n    'fx-floatlabel': FxFloatlabelProps;\n    'fx-dialog': FxDialogProps;\n    'fx-drawer': FxDrawerProps;\n    'fx-toast': FxToastProps;\n    'fx-tooltip': FxTooltipProps;\n    'fx-tabs': FxTabsProps;\n    'fx-tab-panel': FxTabPanelProps;\n    'fx-progress': FxProgressProps;\n    'fx-skeleton': FxSkeletonProps;\n    'fx-alert': FxAlertProps;\n    'fx-dropdown': FxDropdownProps;\n    'fx-dropdown-item': FxDropdownItemProps;\n    'fx-pagination': FxPaginationProps;\n    'fx-autocomplete': FxAutocompleteProps;\n  }\n}\n\n/** Marcador para `import '@wrrdev/fenix-ui/vue'` funcionar como side-effect import. */\nexport const FX_VUE_TYPES = true as const;\n\n"],"names":[],"mappings":"AA+GO,MAAM,eAAe;"}