@wrrdev/fenix-ui 1.1.4 → 1.1.6

package/dist/fenix-ui5.esm.js

@@ -0,0 +1,110 @@
+const fenixComponentMap = {
+  "fx-button": "@wrrdev/fenix-ui/button",
+  "fx-badge": "@wrrdev/fenix-ui/badge",
+  "fx-spinner": "@wrrdev/fenix-ui/spinner",
+  "fx-select": "@wrrdev/fenix-ui/select",
+  "fx-multiselect": "@wrrdev/fenix-ui/multiselect",
+  "fx-input": "@wrrdev/fenix-ui/input",
+  "fx-switch": "@wrrdev/fenix-ui/switch",
+  "fx-calendar": "@wrrdev/fenix-ui/calendar",
+  "fx-datepicker": "@wrrdev/fenix-ui/datepicker",
+  "fx-checkbox": "@wrrdev/fenix-ui/checkbox",
+  "fx-radio": "@wrrdev/fenix-ui/radio",
+  "fx-table": "@wrrdev/fenix-ui/table",
+  "fx-floatlabel": "@wrrdev/fenix-ui/floatlabel",
+  "fx-textarea": "@wrrdev/fenix-ui/textarea",
+  "fx-dialog": "@wrrdev/fenix-ui/dialog",
+  "fx-confirmpopup": "@wrrdev/fenix-ui/confirmpopup",
+  "fx-fileupload": "@wrrdev/fenix-ui/fileupload",
+  "fx-slider": "@wrrdev/fenix-ui/slider",
+  "fx-chip": "@wrrdev/fenix-ui/chip",
+  "fx-avatar": "@wrrdev/fenix-ui/avatar",
+  "fx-card": "@wrrdev/fenix-ui/card",
+  "fx-breadcrumb": "@wrrdev/fenix-ui/breadcrumb",
+  "fx-popover": "@wrrdev/fenix-ui/popover",
+  "fx-stepper": "@wrrdev/fenix-ui/stepper",
+  "fx-rating": "@wrrdev/fenix-ui/rating",
+  "fx-menu": "@wrrdev/fenix-ui/menu",
+  "fx-toggle-button-group": "@wrrdev/fenix-ui/toggle-button-group",
+  "fx-empty-state": "@wrrdev/fenix-ui/empty-state",
+  "fx-password-strength": "@wrrdev/fenix-ui/password-strength",
+  "fx-timeline": "@wrrdev/fenix-ui/timeline",
+  "fx-carousel": "@wrrdev/fenix-ui/carousel",
+  "fx-tree": "@wrrdev/fenix-ui/tree",
+  "fx-drawer": "@wrrdev/fenix-ui/drawer",
+  "fx-toast": "@wrrdev/fenix-ui/toast",
+  "fx-tooltip": "@wrrdev/fenix-ui/tooltip",
+  "fx-tabs": "@wrrdev/fenix-ui/tabs",
+  "fx-tab-panel": "@wrrdev/fenix-ui/tabs",
+  "fx-progress": "@wrrdev/fenix-ui/progress",
+  "fx-skeleton": "@wrrdev/fenix-ui/skeleton",
+  "fx-alert": "@wrrdev/fenix-ui/alert",
+  "fx-dropdown": "@wrrdev/fenix-ui/dropdown",
+  "fx-dropdown-item": "@wrrdev/fenix-ui/dropdown",
+  "fx-pagination": "@wrrdev/fenix-ui/pagination",
+  "fx-autocomplete": "@wrrdev/fenix-ui/autocomplete",
+  "fx-knob": "@wrrdev/fenix-ui/knob",
+  "fx-accordion": "@wrrdev/fenix-ui/accordion",
+  "fx-accordion-panel": "@wrrdev/fenix-ui/accordion",
+  "fx-orderlist": "@wrrdev/fenix-ui/orderlist",
+  "fx-picklist": "@wrrdev/fenix-ui/picklist",
+  "fx-column": "@wrrdev/fenix-ui/table"
+};
+const TAG_RE = /<(fx-[a-z][a-z-]*)(?=[\s/>])/g;
+const FENIX_ICON_CLASS_RE = /\bfx-icon(?:-[a-z0-9_]+)*\b/;
+function transformSource(code, options = {}) {
+  const pkg = options.packageName ?? "@wrrdev/fenix-ui";
+  const resolve = (sub) => pkg === "@wrrdev/fenix-ui" ? sub : sub.replace("@wrrdev/fenix-ui", pkg);
+  const needed = /* @__PURE__ */ new Set();
+  for (const m of code.matchAll(TAG_RE)) {
+    const sub = fenixComponentMap[m[1]];
+    if (sub) {
+      const target = resolve(sub);
+      if (!code.includes(`'${target}'`) && !code.includes(`"${target}"`)) {
+        needed.add(target);
+      }
+    }
+  }
+  const iconsSub = resolve("@wrrdev/fenix-ui/icons");
+  if (FENIX_ICON_CLASS_RE.test(code) && !code.includes(`'${iconsSub}'`) && !code.includes(`"${iconsSub}"`)) {
+    needed.add(iconsSub);
+  }
+  if (!needed.size) return code;
+  const lines = [...needed].map((s) => `import '${s}';`);
+  const vueScript = /(<script[^>]*>)\n/.exec(code);
+  if (vueScript) {
+    return code.replace(vueScript[0], `${vueScript[1]}
+${lines.join("\n")}
+`);
+  }
+  let lastEnd = -1;
+  for (const m of code.matchAll(/^[ \t]*import\b[^;]*?['"][^'"]+['"];?[^\S\n]*$/gm)) {
+    lastEnd = Math.max(lastEnd, m.index + m[0].length);
+  }
+  if (lastEnd === -1) return `${lines.join("\n")}
+${code}`;
+  return `${code.slice(0, lastEnd)}
+${lines.join("\n")}${code.slice(lastEnd)}`;
+}
+function shouldTransform(id) {
+  return !id.includes("node_modules") && !id.endsWith(".d.ts") && !id.endsWith(".css") && /\.(ts|js|tsx|jsx|vue|html|svelte)$/.test(id);
+}
+function FenixAutoImport(options = {}) {
+  return {
+    name: "fenix-ui-auto-import",
+    enforce: "pre",
+    transform(code, id) {
+      if (!shouldTransform(id)) return void 0;
+      const result = transformSource(code, options);
+      if (result === code) return void 0;
+      return { code: result, map: null };
+    }
+  };
+}
+export {
+  FenixAutoImport,
+  fenixComponentMap,
+  shouldTransform,
+  transformSource
+};
+//# sourceMappingURL=fenix-ui5.esm.js.map

package/dist/fenix-ui5.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fenix-ui5.esm.js","sources":["../src/plugins/auto-import.ts","../src/plugins/index.ts"],"sourcesContent":["/**\n * Registro de tags → subpaths para o auto-import.\n * Mantido em um módulo próprio (sem depender de DOM) para ser usado\n * também no build do cliente via plugin.\n */\nexport const fenixComponentMap: Record<string, string> = {\n  'fx-button': '@wrrdev/fenix-ui/button',\n  'fx-badge': '@wrrdev/fenix-ui/badge',\n  'fx-spinner': '@wrrdev/fenix-ui/spinner',\n  'fx-select': '@wrrdev/fenix-ui/select',\n  'fx-multiselect': '@wrrdev/fenix-ui/multiselect',\n  'fx-input': '@wrrdev/fenix-ui/input',\n  'fx-switch': '@wrrdev/fenix-ui/switch',\n  'fx-calendar': '@wrrdev/fenix-ui/calendar',\n  'fx-datepicker': '@wrrdev/fenix-ui/datepicker',\n  'fx-checkbox': '@wrrdev/fenix-ui/checkbox',\n  'fx-radio': '@wrrdev/fenix-ui/radio',\n  'fx-table': '@wrrdev/fenix-ui/table',\n  'fx-floatlabel': '@wrrdev/fenix-ui/floatlabel',\n  'fx-textarea': '@wrrdev/fenix-ui/textarea',\n  'fx-dialog': '@wrrdev/fenix-ui/dialog',\n  'fx-confirmpopup': '@wrrdev/fenix-ui/confirmpopup',\n  'fx-fileupload': '@wrrdev/fenix-ui/fileupload',\n  'fx-slider': '@wrrdev/fenix-ui/slider',\n  'fx-chip': '@wrrdev/fenix-ui/chip',\n  'fx-avatar': '@wrrdev/fenix-ui/avatar',\n  'fx-card': '@wrrdev/fenix-ui/card',\n  'fx-breadcrumb': '@wrrdev/fenix-ui/breadcrumb',\n  'fx-popover': '@wrrdev/fenix-ui/popover',\n  'fx-stepper': '@wrrdev/fenix-ui/stepper',\n  'fx-rating': '@wrrdev/fenix-ui/rating',\n  'fx-menu': '@wrrdev/fenix-ui/menu',\n  'fx-toggle-button-group': '@wrrdev/fenix-ui/toggle-button-group',\n  'fx-empty-state': '@wrrdev/fenix-ui/empty-state',\n  'fx-password-strength': '@wrrdev/fenix-ui/password-strength',\n  'fx-timeline': '@wrrdev/fenix-ui/timeline',\n  'fx-carousel': '@wrrdev/fenix-ui/carousel',\n  'fx-tree': '@wrrdev/fenix-ui/tree',\n  'fx-drawer': '@wrrdev/fenix-ui/drawer',\n  'fx-toast': '@wrrdev/fenix-ui/toast',\n  'fx-tooltip': '@wrrdev/fenix-ui/tooltip',\n  'fx-tabs': '@wrrdev/fenix-ui/tabs',\n  'fx-tab-panel': '@wrrdev/fenix-ui/tabs',\n  'fx-progress': '@wrrdev/fenix-ui/progress',\n  'fx-skeleton': '@wrrdev/fenix-ui/skeleton',\n  'fx-alert': '@wrrdev/fenix-ui/alert',\n  'fx-dropdown': '@wrrdev/fenix-ui/dropdown',\n  'fx-dropdown-item': '@wrrdev/fenix-ui/dropdown',\n  'fx-pagination': '@wrrdev/fenix-ui/pagination',\n  'fx-autocomplete': '@wrrdev/fenix-ui/autocomplete',\n  'fx-knob': '@wrrdev/fenix-ui/knob',\n  'fx-accordion': '@wrrdev/fenix-ui/accordion',\n  'fx-accordion-panel': '@wrrdev/fenix-ui/accordion',\n  'fx-orderlist': '@wrrdev/fenix-ui/orderlist',\n  'fx-picklist': '@wrrdev/fenix-ui/picklist',\n  'fx-column': '@wrrdev/fenix-ui/table',\n};\n\nconst TAG_RE = /<(fx-[a-z][a-z-]*)(?=[\\s/>])/g;\n\n/** Detecta uso da biblioteca de ícones por classe (fx-icon / fx-icon-home etc.). */\nexport const FENIX_ICON_CLASS_RE = /\\bfx-icon(?:-[a-z0-9_]+)*\\b/;\n\nexport interface AutoImportOptions {\n  /** Prefixo do pacote (padrão '@wrrdev/fenix-ui'). */\n  packageName?: string;\n}\n\n/**\n * Injeta `import '<subpath>'` para cada componente fx-* usado no código\n * que ainda não foi importado. Retorna o código transformado ou o original.\n */\nexport function transformSource(code: string, options: AutoImportOptions = {}): string {\n  const pkg = options.packageName ?? '@wrrdev/fenix-ui';\n  // Subpaths do mapa são reescritos quando um pacote custom é informado.\n  const resolve = (sub: string): string =>\n    pkg === '@wrrdev/fenix-ui' ? sub : sub.replace('@wrrdev/fenix-ui', pkg);\n\n  // Componentes usados e ainda não importados explicitamente.\n  const needed = new Set<string>();\n  for (const m of code.matchAll(TAG_RE)) {\n    const sub = fenixComponentMap[m[1]];\n    if (sub) {\n      const target = resolve(sub);\n      if (!code.includes(`'${target}'`) && !code.includes(`\"${target}\"`)) {\n        needed.add(target);\n      }\n    }\n  }\n  // Biblioteca de ícones: classes fx-icon / fx-icon-<nome> injetam o subpath /icons.\n  const iconsSub = resolve('@wrrdev/fenix-ui/icons');\n  if (FENIX_ICON_CLASS_RE.test(code) && !code.includes(`'${iconsSub}'`) && !code.includes(`\"${iconsSub}\"`)) {\n    needed.add(iconsSub);\n  }\n  if (!needed.size) return code;\n\n  const lines = [...needed].map((s) => `import '${s}';`);\n\n  // Arquivo único (.vue): injeta logo após a abertura do <script>.\n  const vueScript = /(<script[^>]*>)\\n/.exec(code);\n  if (vueScript) {\n    return code.replace(vueScript[0], `${vueScript[1]}\\n${lines.join('\\n')}\\n`);\n  }\n\n  // TS/JS: injeta após o último import existente (ou no topo).\n  let lastEnd = -1;\n  for (const m of code.matchAll(/^[ \\t]*import\\b[^;]*?['\"][^'\"]+['\"];?[^\\S\\n]*$/gm)) {\n    lastEnd = Math.max(lastEnd, m.index + m[0].length);\n  }\n  if (lastEnd === -1) return `${lines.join('\\n')}\\n${code}`;\n  return `${code.slice(0, lastEnd)}\\n${lines.join('\\n')}${code.slice(lastEnd)}`;\n}\n\n/** Verifica se o arquivo deve ser transformado. */\nexport function shouldTransform(id: string): boolean {\n  return (\n    !id.includes('node_modules') &&\n    !id.endsWith('.d.ts') &&\n    !id.endsWith('.css') &&\n    /\\.(ts|js|tsx|jsx|vue|html|svelte)$/.test(id)\n  );\n}\n\n","/**\n * Plugin de AUTO-IMPORT para Vite/Rollup.\n *\n * O usuário escreve apenas `<fx-button>`, `<fx-select>` etc. no template/código;\n * este plugin detecta as tags em tempo de build e injeta os imports dos\n * subpaths correspondentes — mantendo o tree-shaking (só entra no bundle\n * o que é usado).\n *\n * Uso no projeto do cliente (vite.config.ts):\n *   import { FenixAutoImport } from '@wrrdev/fenix-ui/auto-import';\n *   export default { plugins: [FenixAutoImport()] };\n */\nimport {\n  transformSource,\n  shouldTransform,\n  type AutoImportOptions,\n} from './auto-import';\n\nexport interface FenixPlugin {\n  name: string;\n  enforce: 'pre';\n  transform: (\n    code: string,\n    id: string,\n  ) => { code: string; map: null } | undefined;\n}\n\nexport function FenixAutoImport(options: AutoImportOptions = {}): FenixPlugin {\n  return {\n    name: 'fenix-ui-auto-import',\n    enforce: 'pre',\n    transform(code, id) {\n      if (!shouldTransform(id)) return undefined;\n      const result = transformSource(code, options);\n      if (result === code) return undefined;\n      return { code: result, map: null };\n    },\n  };\n}\n\nexport { transformSource, shouldTransform, fenixComponentMap } from './auto-import';\nexport type { AutoImportOptions } from './auto-import';\n"],"names":[],"mappings":"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"}

package/dist/icons/base-css.d.ts

@@ -18,4 +18,20 @@ export declare const FENIX_ICON_FONT_VAR = "var(--fx-icon-font, Fenix Icons)";
 export declare const FENIX_ICON_BASE_CSS = "\n.fx-icon {\n  font-family: var(--fx-icon-font, Fenix Icons);\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  user-select: none;\n}\n.fx-icon.fx-icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }\n.fx-icon.fx-icon-bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }\n";
 /** Verifica se o valor parece um nome de ícone da Fenix Icons (e não emoji/texto livre). */
 export declare function isFenixIconName(value: string): boolean;
+/**
+ * HTML do ícone para uso DENTRO de Shadow DOM (concatenar ao template).
+ *
+ * - Nome válido da Fenix Icons (ex.: `home`) → glifo via LIGADURA: o nome
+ *   vira o conteúdo de texto do elemento com a font-family de ícones.
+ *   Isso é obrigatório dentro de Shadow DOM: as regras
+ *   `.fx-icon-<nome>::before` são injetadas no <head> do documento e NÃO
+ *   atravessam a fronteira do shadow root (apenas o @font-face vale
+ *   dentro dele) — a classe vazia renderizaria um elemento sem glifo.
+ * - Qualquer outro valor (emoji, texto) → texto puro escapado.
+ *
+ * A classe base `.fx-icon` é fornecida por `FENIX_ICON_BASE_CSS`
+ * (concatenada às `static styles` do componente); o @font-face vem do
+ * `@wrrdev/fenix-ui/icons` (injetado no <head>).
+ */
+export declare function fenixIconHtml(icon: string): string;
 //# sourceMappingURL=base-css.d.ts.map

package/dist/icons/base-css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"base-css.d.ts","sourceRoot":"","sources":["../../src/icons/base-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,mFAAmF;AACnF,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AAEpD,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,qCAAmD,CAAC;AAEpF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,moBAmB/B,CAAC;AAEF,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEtD"}
+{"version":3,"file":"base-css.d.ts","sourceRoot":"","sources":["../../src/icons/base-css.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAIH,mFAAmF;AACnF,eAAO,MAAM,sBAAsB,gBAAgB,CAAC;AAEpD,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,qCAAmD,CAAC;AAEpF;;;GAGG;AACH,eAAO,MAAM,mBAAmB,moBAmB/B,CAAC;AAEF,4FAA4F;AAC5F,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAEtD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAOlD"}

package/dist/icons/base-css.js

@@ -1,3 +1,4 @@
+import { esc } from "../core/sanitize.js";
 const FENIX_ICON_FONT_FAMILY = "Fenix Icons";
 const FENIX_ICON_FONT_VAR = `var(--fx-icon-font, ${FENIX_ICON_FONT_FAMILY})`;
 const FENIX_ICON_BASE_CSS = `
@@ -23,10 +24,19 @@ const FENIX_ICON_BASE_CSS = `
 function isFenixIconName(value) {
   return /^[a-z][a-z0-9_]*$/.test(value.trim());
 }
+function fenixIconHtml(icon) {
+  const value = (icon ?? "").trim();
+  if (!value) return "";
+  if (isFenixIconName(value)) {
+    return `<i class="fx-icon" aria-hidden="true">${value}</i>`;
+  }
+  return `<span aria-hidden="true">${esc(value)}</span>`;
+}
 export {
   FENIX_ICON_BASE_CSS,
   FENIX_ICON_FONT_FAMILY,
   FENIX_ICON_FONT_VAR,
+  fenixIconHtml,
   isFenixIconName
 };
 //# sourceMappingURL=base-css.js.map

package/dist/icons/base-css.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-css.js","sources":["../../src/icons/base-css.ts"],"sourcesContent":["/**\n * CSS base da biblioteca de ícones — módulo LEVE (não importa a lista de nomes\n * nem dispara o carregamento da fonte). Usado dentro dos Shadow DOMs dos\n * componentes que suportam o atributo `icon`.\n *\n * O @font-face em si é injetado no <head> por `@wrrdev/fenix-ui/icons`\n * (ver ./index.ts) — @font-face registrado no documento também se aplica\n * dentro dos Shadow DOMs.\n */\n\n/** Nome da família de fontes dos ícones (self-hosted, sem dependência externa). */\nexport const FENIX_ICON_FONT_FAMILY = 'Fenix Icons';\n\n/** Família configurável via CSS custom property (fallback para o nome padrão). */\nexport const FENIX_ICON_FONT_VAR = `var(--fx-icon-font, ${FENIX_ICON_FONT_FAMILY})`;\n\n/**\n * Regras da classe `.fx-icon` para uso DENTRO de Shadow DOM\n * (concatene às `static styles` do componente).\n */\nexport const FENIX_ICON_BASE_CSS = `\n.fx-icon {\n  font-family: ${FENIX_ICON_FONT_VAR};\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  user-select: none;\n}\n.fx-icon.fx-icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }\n.fx-icon.fx-icon-bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }\n`;\n\n/** Verifica se o valor parece um nome de ícone da Fenix Icons (e não emoji/texto livre). */\nexport function isFenixIconName(value: string): boolean {\n  return /^[a-z][a-z0-9_]*$/.test(value.trim());\n}\n"],"names":[],"mappings":"AAWO,MAAM,yBAAyB;AAG/B,MAAM,sBAAsB,uBAAuB,sBAAsB;AAMzE,MAAM,sBAAsB;AAAA;AAAA,iBAElB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB7B,SAAS,gBAAgB,OAAwB;AACtD,SAAO,oBAAoB,KAAK,MAAM,KAAA,CAAM;AAC9C;"}
+{"version":3,"file":"base-css.js","sources":["../../src/icons/base-css.ts"],"sourcesContent":["/**\n * CSS base da biblioteca de ícones — módulo LEVE (não importa a lista de nomes\n * nem dispara o carregamento da fonte). Usado dentro dos Shadow DOMs dos\n * componentes que suportam o atributo `icon`.\n *\n * O @font-face em si é injetado no <head> por `@wrrdev/fenix-ui/icons`\n * (ver ./index.ts) — @font-face registrado no documento também se aplica\n * dentro dos Shadow DOMs.\n */\n\nimport { esc } from '../core/sanitize';\n\n/** Nome da família de fontes dos ícones (self-hosted, sem dependência externa). */\nexport const FENIX_ICON_FONT_FAMILY = 'Fenix Icons';\n\n/** Família configurável via CSS custom property (fallback para o nome padrão). */\nexport const FENIX_ICON_FONT_VAR = `var(--fx-icon-font, ${FENIX_ICON_FONT_FAMILY})`;\n\n/**\n * Regras da classe `.fx-icon` para uso DENTRO de Shadow DOM\n * (concatene às `static styles` do componente).\n */\nexport const FENIX_ICON_BASE_CSS = `\n.fx-icon {\n  font-family: ${FENIX_ICON_FONT_VAR};\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  user-select: none;\n}\n.fx-icon.fx-icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }\n.fx-icon.fx-icon-bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }\n`;\n\n/** Verifica se o valor parece um nome de ícone da Fenix Icons (e não emoji/texto livre). */\nexport function isFenixIconName(value: string): boolean {\n  return /^[a-z][a-z0-9_]*$/.test(value.trim());\n}\n\n/**\n * HTML do ícone para uso DENTRO de Shadow DOM (concatenar ao template).\n *\n * - Nome válido da Fenix Icons (ex.: `home`) → glifo via LIGADURA: o nome\n *   vira o conteúdo de texto do elemento com a font-family de ícones.\n *   Isso é obrigatório dentro de Shadow DOM: as regras\n *   `.fx-icon-<nome>::before` são injetadas no <head> do documento e NÃO\n *   atravessam a fronteira do shadow root (apenas o @font-face vale\n *   dentro dele) — a classe vazia renderizaria um elemento sem glifo.\n * - Qualquer outro valor (emoji, texto) → texto puro escapado.\n *\n * A classe base `.fx-icon` é fornecida por `FENIX_ICON_BASE_CSS`\n * (concatenada às `static styles` do componente); o @font-face vem do\n * `@wrrdev/fenix-ui/icons` (injetado no <head>).\n */\nexport function fenixIconHtml(icon: string): string {\n  const value = (icon ?? '').trim();\n  if (!value) return '';\n  if (isFenixIconName(value)) {\n    return `<i class=\"fx-icon\" aria-hidden=\"true\">${value}</i>`;\n  }\n  return `<span aria-hidden=\"true\">${esc(value)}</span>`;\n}\n"],"names":[],"mappings":";AAaO,MAAM,yBAAyB;AAG/B,MAAM,sBAAsB,uBAAuB,sBAAsB;AAMzE,MAAM,sBAAsB;AAAA;AAAA,iBAElB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB7B,SAAS,gBAAgB,OAAwB;AACtD,SAAO,oBAAoB,KAAK,MAAM,KAAA,CAAM;AAC9C;AAiBO,SAAS,cAAc,MAAsB;AAClD,QAAM,SAAS,QAAQ,IAAI,KAAA;AAC3B,MAAI,CAAC,MAAO,QAAO;AACnB,MAAI,gBAAgB,KAAK,GAAG;AAC1B,WAAO,yCAAyC,KAAK;AAAA,EACvD;AACA,SAAO,4BAA4B,IAAI,KAAK,CAAC;AAC/C;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wrrdev/fenix-ui",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "description": "FenixUI Design System Web nativo (Web Components + Shadow DOM + Design Tokens) com tree-shaking por componente.",
   "type": "module",
   "license": "ISC",
@@ -48,6 +48,7 @@
   "devDependencies": {
     "@babel/types": "^8.0.4",
     "@types/node": "^22.7.4",
+    "@types/react": "18.3.31",
     "jsdom": "^25.0.1",
     "typescript": "^5.6.2",
     "vite": "^5.4.8",
@@ -224,10 +225,6 @@
       "types": "./dist/components/dropdown/index.d.ts",
       "import": "./dist/components/dropdown/index.js"
     },
-    "./sidebar": {
-      "types": "./dist/components/sidebar/index.d.ts",
-      "import": "./dist/components/sidebar/index.js"
-    },
     "./pagination": {
       "types": "./dist/components/pagination/index.d.ts",
       "import": "./dist/components/pagination/index.js"
@@ -276,6 +273,10 @@
       "types": "./dist/core/vue.d.ts",
       "import": "./dist/core/vue.js"
     },
+    "./react": {
+      "types": "./dist/core/react.d.ts",
+      "import": "./dist/core/react.js"
+    },
     "./components/*": {
       "types": "./dist/components/*/index.d.ts",
       "import": "./dist/components/*/index.js"

package/dist/assets/base-css-BifSeW2H.js

@@ -1,31 +0,0 @@
-const FENIX_ICON_FONT_FAMILY = "Fenix Icons";
-const FENIX_ICON_FONT_VAR = `var(--fx-icon-font, ${FENIX_ICON_FONT_FAMILY})`;
-const FENIX_ICON_BASE_CSS = `
-.fx-icon {
-  font-family: ${FENIX_ICON_FONT_VAR};
-  font-weight: normal;
-  font-style: normal;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  user-select: none;
-}
-.fx-icon.fx-icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
-.fx-icon.fx-icon-bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }
-`;
-function isFenixIconName(value) {
-  return /^[a-z][a-z0-9_]*$/.test(value.trim());
-}
-export {
-  FENIX_ICON_FONT_FAMILY as F,
-  FENIX_ICON_BASE_CSS as a,
-  isFenixIconName as i
-};
-//# sourceMappingURL=base-css-BifSeW2H.js.map

package/dist/assets/base-css-BifSeW2H.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"base-css-BifSeW2H.js","sources":["../../src/icons/base-css.ts"],"sourcesContent":["/**\n * CSS base da biblioteca de ícones — módulo LEVE (não importa a lista de nomes\n * nem dispara o carregamento da fonte). Usado dentro dos Shadow DOMs dos\n * componentes que suportam o atributo `icon`.\n *\n * O @font-face em si é injetado no <head> por `@wrrdev/fenix-ui/icons`\n * (ver ./index.ts) — @font-face registrado no documento também se aplica\n * dentro dos Shadow DOMs.\n */\n\n/** Nome da família de fontes dos ícones (self-hosted, sem dependência externa). */\nexport const FENIX_ICON_FONT_FAMILY = 'Fenix Icons';\n\n/** Família configurável via CSS custom property (fallback para o nome padrão). */\nexport const FENIX_ICON_FONT_VAR = `var(--fx-icon-font, ${FENIX_ICON_FONT_FAMILY})`;\n\n/**\n * Regras da classe `.fx-icon` para uso DENTRO de Shadow DOM\n * (concatene às `static styles` do componente).\n */\nexport const FENIX_ICON_BASE_CSS = `\n.fx-icon {\n  font-family: ${FENIX_ICON_FONT_VAR};\n  font-weight: normal;\n  font-style: normal;\n  line-height: 1;\n  letter-spacing: normal;\n  text-transform: none;\n  display: inline-block;\n  white-space: nowrap;\n  word-wrap: normal;\n  direction: ltr;\n  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n  user-select: none;\n}\n.fx-icon.fx-icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }\n.fx-icon.fx-icon-bold { font-variation-settings: 'FILL' 0, 'wght' 600, 'GRAD' 0, 'opsz' 24; }\n`;\n\n/** Verifica se o valor parece um nome de ícone da Fenix Icons (e não emoji/texto livre). */\nexport function isFenixIconName(value: string): boolean {\n  return /^[a-z][a-z0-9_]*$/.test(value.trim());\n}\n"],"names":[],"mappings":"AAWO,MAAM,yBAAyB;AAG/B,MAAM,sBAAsB,uBAAuB,sBAAsB;AAMzE,MAAM,sBAAsB;AAAA;AAAA,iBAElB,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoB7B,SAAS,gBAAgB,OAAwB;AACtD,SAAO,oBAAoB,KAAK,MAAM,KAAA,CAAM;AAC9C;"}