@wrrdev/fenix-ui 1.0.0

package/dist/core/tokens.js

@@ -0,0 +1,83 @@
+const lightTokens = {
+  color: {
+    primary: "#4f46e5",
+    secondary: "#8b5cf6",
+    success: "#10b981",
+    warning: "#f59e0b",
+    danger: "#f43f5e",
+    info: "#0ea5e9"
+  },
+  surface: {
+    background: "#ffffff",
+    surface: "#f8fafc",
+    "surface-hover": "#eef2f7"
+  },
+  text: {
+    default: "#0f172a",
+    muted: "#64748b",
+    disabled: "#94a3b8"
+  },
+  border: {
+    default: "#e2e8f0",
+    hover: "#cbd5e1"
+  },
+  font: {
+    family: "'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif",
+    size: "14px",
+    weight: "500",
+    "line-height": "1.5"
+  },
+  space: { xs: "4px", sm: "8px", md: "12px", lg: "16px", xl: "24px" },
+  radius: { none: "0", sm: "4px", md: "8px", lg: "12px", full: "9999px" },
+  size: { sm: "32px", md: "40px", lg: "48px" },
+  shadow: {
+    sm: "0 1px 2px rgba(15, 23, 42, 0.06)",
+    md: "0 4px 12px rgba(15, 23, 42, 0.10)",
+    lg: "0 12px 32px rgba(15, 23, 42, 0.18)"
+  },
+  motion: {
+    "duration-fast": "120ms",
+    "duration-normal": "240ms",
+    easing: "cubic-bezier(0.25, 0.1, 0.25, 1)"
+  },
+  effect: {
+    /** '0' desativa o efeito ripple do botão. */
+    ripple: "1",
+    /** Anel de foco dos campos de formulário. Use 'none' para campos sem sobra. */
+    "focus-ring": "0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)"
+  },
+  z: { base: "auto", dropdown: "1000", modal: "1100", toast: "1200" }
+};
+const darkTokens = {
+  color: { ...lightTokens.color },
+  surface: {
+    background: "#0f172a",
+    surface: "#1e293b",
+    "surface-hover": "#334155"
+  },
+  text: {
+    default: "#f8fafc",
+    muted: "#94a3b8",
+    disabled: "#64748b"
+  },
+  border: { default: "#334155", hover: "#475569" },
+  font: { ...lightTokens.font },
+  space: { ...lightTokens.space },
+  radius: { ...lightTokens.radius },
+  size: { ...lightTokens.size },
+  shadow: {
+    sm: "0 1px 2px rgba(0, 0, 0, 0.4)",
+    md: "0 6px 16px rgba(0, 0, 0, 0.5)",
+    lg: "0 16px 40px rgba(0, 0, 0, 0.6)"
+  },
+  motion: { ...lightTokens.motion },
+  effect: { ...lightTokens.effect },
+  z: { ...lightTokens.z }
+};
+const defaultTokens = lightTokens;
+export {
+  darkTokens,
+  defaultTokens,
+  lightTokens
+};
+//# sourceMappingURL=tokens.js.map

package/dist/core/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../src/core/tokens.ts"],"sourcesContent":["/**\n * Design Tokens — camada de personalização do FenixUI.\n *\n * Os componentes consomem apenas `var(--fx-*)`, nunca valores fixos.\n * Isso atravessa o Shadow DOM via CSS Custom Properties e permite\n * trocar o tema em runtime sem recompilar a biblioteca.\n */\n\nexport interface FenixTokens {\n  /** Cores semânticas */ color: Record<'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info', string>;\n  /** Superfícies */ surface: Record<'background' | 'surface' | 'surface-hover', string>;\n  /** Texto */ text: Record<'default' | 'muted' | 'disabled', string>;\n  /** Bordas */ border: Record<'default' | 'hover', string>;\n  /** Tipografia */ font: Record<'family' | 'size' | 'weight' | 'line-height', string>;\n  /** Espaçamento */ space: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', string>;\n  /** Radius */ radius: Record<'none' | 'sm' | 'md' | 'lg' | 'full', string>;\n  /** Altura dos controles (button, input, select, switch…). Personalizável por preset. */\n  size: Record<'sm' | 'md' | 'lg', string>;\n  /** Sombras */ shadow: Record<'sm' | 'md' | 'lg', string>;\n  /** Motion */ motion: Record<'duration-fast' | 'duration-normal' | 'easing', string>;\n  /** Efeitos visuais configuráveis (ripple, anel de foco dos campos). */\n  effect: { ripple: string; 'focus-ring': string };\n  /** Z-index */ z: Record<'base' | 'dropdown' | 'modal' | 'toast', string>;\n}\n\n/** Tema claro (padrão). */\nexport const lightTokens: FenixTokens = {\n  color: {\n    primary: '#4f46e5',\n    secondary: '#8b5cf6',\n    success: '#10b981',\n    warning: '#f59e0b',\n    danger: '#f43f5e',\n    info: '#0ea5e9',\n  },\n  surface: {\n    background: '#ffffff',\n    surface: '#f8fafc',\n    'surface-hover': '#eef2f7',\n  },\n  text: {\n    default: '#0f172a',\n    muted: '#64748b',\n    disabled: '#94a3b8',\n  },\n  border: {\n    default: '#e2e8f0',\n    hover: '#cbd5e1',\n  },\n  font: {\n    family: \"'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif\",\n    size: '14px',\n    weight: '500',\n    'line-height': '1.5',\n  },\n  space: { xs: '4px', sm: '8px', md: '12px', lg: '16px', xl: '24px' },\n  radius: { none: '0', sm: '4px', md: '8px', lg: '12px', full: '9999px' },\n  size: { sm: '32px', md: '40px', lg: '48px' },\n  shadow: {\n    sm: '0 1px 2px rgba(15, 23, 42, 0.06)',\n    md: '0 4px 12px rgba(15, 23, 42, 0.10)',\n    lg: '0 12px 32px rgba(15, 23, 42, 0.18)',\n  },\n  motion: {\n    'duration-fast': '120ms',\n    'duration-normal': '240ms',\n    easing: 'cubic-bezier(0.25, 0.1, 0.25, 1)',\n  },\n  effect: {\n    /** '0' desativa o efeito ripple do botão. */\n    ripple: '1',\n    /** Anel de foco dos campos de formulário. Use 'none' para campos sem sobra. */\n    'focus-ring': '0 0 0 3px color-mix(in srgb, var(--fx-color-primary) 22%, transparent)',\n  },\n  z: { base: 'auto', dropdown: '1000', modal: '1100', toast: '1200' },\n};\n\n/** Tema escuro — os componentes reagem automaticamente às variáveis CSS. */\nexport const darkTokens: FenixTokens = {\n  color: { ...lightTokens.color },\n  surface: {\n    background: '#0f172a',\n    surface: '#1e293b',\n    'surface-hover': '#334155',\n  },\n  text: {\n    default: '#f8fafc',\n    muted: '#94a3b8',\n    disabled: '#64748b',\n  },\n  border: { default: '#334155', hover: '#475569' },\n  font: { ...lightTokens.font },\n  space: { ...lightTokens.space },\n  radius: { ...lightTokens.radius },\n  size: { ...lightTokens.size },\n  shadow: {\n    sm: '0 1px 2px rgba(0, 0, 0, 0.4)',\n    md: '0 6px 16px rgba(0, 0, 0, 0.5)',\n    lg: '0 16px 40px rgba(0, 0, 0, 0.6)',\n  },\n  motion: { ...lightTokens.motion },\n  effect: { ...lightTokens.effect },\n  z: { ...lightTokens.z },\n};\n\nexport const defaultTokens: FenixTokens = lightTokens;\n\n/** Override parcial e profundo — permite customizar apenas alguns tokens por vez. */\nexport type DeepPartial<T> = { [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K] };"],"names":[],"mappings":"AA0BO,MAAM,cAA2B;AAAA,EACtC,OAAO;AAAA,IACL,SAAS;AAAA,IACT,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,MAAM;AAAA,EAAA;AAAA,EAER,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA,EAAA;AAAA,EAEnB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ;AAAA,IACN,SAAS;AAAA,IACT,OAAO;AAAA,EAAA;AAAA,EAET,MAAM;AAAA,IACJ,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,eAAe;AAAA,EAAA;AAAA,EAEjB,OAAO,EAAE,IAAI,OAAO,IAAI,OAAO,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAA;AAAA,EAC3D,QAAQ,EAAE,MAAM,KAAK,IAAI,OAAO,IAAI,OAAO,IAAI,QAAQ,MAAM,SAAA;AAAA,EAC7D,MAAM,EAAE,IAAI,QAAQ,IAAI,QAAQ,IAAI,OAAA;AAAA,EACpC,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA,EAEN,QAAQ;AAAA,IACN,iBAAiB;AAAA,IACjB,mBAAmB;AAAA,IACnB,QAAQ;AAAA,EAAA;AAAA,EAEV,QAAQ;AAAA;AAAA,IAEN,QAAQ;AAAA;AAAA,IAER,cAAc;AAAA,EAAA;AAAA,EAEhB,GAAG,EAAE,MAAM,QAAQ,UAAU,QAAQ,OAAO,QAAQ,OAAO,OAAA;AAC7D;AAGO,MAAM,aAA0B;AAAA,EACrC,OAAO,EAAE,GAAG,YAAY,MAAA;AAAA,EACxB,SAAS;AAAA,IACP,YAAY;AAAA,IACZ,SAAS;AAAA,IACT,iBAAiB;AAAA,EAAA;AAAA,EAEnB,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,EAAA;AAAA,EAEZ,QAAQ,EAAE,SAAS,WAAW,OAAO,UAAA;AAAA,EACrC,MAAM,EAAE,GAAG,YAAY,KAAA;AAAA,EACvB,OAAO,EAAE,GAAG,YAAY,MAAA;AAAA,EACxB,QAAQ,EAAE,GAAG,YAAY,OAAA;AAAA,EACzB,MAAM,EAAE,GAAG,YAAY,KAAA;AAAA,EACvB,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA,EAEN,QAAQ,EAAE,GAAG,YAAY,OAAA;AAAA,EACzB,QAAQ,EAAE,GAAG,YAAY,OAAA;AAAA,EACzB,GAAG,EAAE,GAAG,YAAY,EAAA;AACtB;AAEO,MAAM,gBAA6B;"}

package/dist/docs/app.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Documentação interativa do FenixUI.
+ *
+ * SPA sem framework (hash routing) no
+ *  - navegação lateral por componente;
+ *  - playground por componente com controles ao vivo;
+ *  - tabelas de API (atributos, slots, eventos);
+ *  - seletor de tema (preset × modo claro/escuro) refletindo na hora,
+ *    pois os componentes leem CSS Custom Properties (`--fx-*`).
+ */
+import '../components/button';
+import '../components/badge';
+import '../components/spinner';
+import '../components/select';
+import '../components/input';
+import '../components/switch';
+import '../components/table';
+import '../components/checkbox';
+import '../components/radio';
+import '../components/floatlabel';
+import '../components/multiselect';
+import '../components/calendar';
+import '../components/datepicker';
+import '../components/textarea';
+import '../components/toast';
+import '../components/dialog';
+import '../components/tooltip';
+import '../components/tabs';
+import '../components/progress';
+import '../components/skeleton';
+import '../components/alert';
+import '../components/dropdown';
+import '../components/pagination';
+import '../components/autocomplete';
+import '../components/drawer';
+export declare function formatHtml(src: string): string;
+//# sourceMappingURL=app.d.ts.map

package/dist/docs/app.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"app.d.ts","sourceRoot":"","sources":["../../src/docs/app.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,0BAA0B,CAAC;AAClC,OAAO,2BAA2B,CAAC;AACnC,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,wBAAwB,CAAC;AAChC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,wBAAwB,CAAC;AAChC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,4BAA4B,CAAC;AACpC,OAAO,sBAAsB,CAAC;AA80D9B,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAmC9C"}