lib-pixelbuild 0.2.1 → 0.2.3

package/dist/designSystem/baseCss.js

@@ -0,0 +1,406 @@
+/**
+ * CSS base do site público (sem Bootstrap).
+ *
+ * Classes utilitárias e de componentes usadas pelo `lib-pixelbuild`. Todos os
+ * valores de destaque usam `var(--pb-*)` com fallback, então o design system
+ * (Etapa 1) sobrescreve os tokens sem tocar nestes estilos.
+ */
+export const baseCss = `
+/* ─── Reset e tipografia base ─────────────────────────────── */
+.pb-root, .pb-root *, .pb-root *::before, .pb-root *::after {
+  box-sizing: border-box;
+}
+.pb-root {
+  margin: 0;
+  font-family: var(--pb-font-family, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
+  font-size: var(--pb-font-size-base, 16px);
+  line-height: var(--pb-line-height, 1.6);
+  color: var(--pb-color-text, #1f2937);
+  background-color: var(--pb-color-background, #ffffff);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+.pb-root h1, .pb-root h2, .pb-root h3, .pb-root h4, .pb-root h5, .pb-root h6 {
+  margin: 0 0 0.5em;
+  font-weight: var(--pb-font-weight-bold, 700);
+  line-height: 1.2;
+  color: var(--pb-color-heading, #111827);
+}
+.pb-root img {
+  max-width: 100%;
+  height: auto;
+}
+.pb-root a {
+  color: var(--pb-color-primary, #f58220);
+  text-decoration: none;
+}
+.pb-root a:hover {
+  text-decoration: underline;
+}
+
+/* ─── Layout: container / grade ───────────────────────────── */
+.pb-container {
+  width: 100%;
+  margin-inline: auto;
+  padding-inline: var(--pb-gutter, 1.5rem);
+}
+.pb-container-fluid {
+  max-width: none !important;
+  padding-inline: var(--pb-gutter, 1.5rem);
+}
+@media (min-width: 576px) {
+  .pb-container { max-width: 540px; }
+}
+@media (min-width: 768px) {
+  .pb-container { max-width: 720px; }
+}
+@media (min-width: 992px) {
+  .pb-container { max-width: 960px; }
+}
+@media (min-width: 1200px) {
+  .pb-container { max-width: 1140px; }
+}
+@media (min-width: 1400px) {
+  .pb-container { max-width: 1320px; }
+}
+
+.pb-row {
+  display: grid;
+  grid-template-columns: repeat(12, minmax(0, 1fr));
+  gap: var(--pb-gutter, 1.5rem);
+}
+.pb-col {
+  min-width: 0;
+}
+
+/* ─── Botões ──────────────────────────────────────────────── */
+.pb-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5em;
+  padding: 0.5em 1.25em;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: var(--pb-font-weight-bold, 700);
+  line-height: 1.5;
+  text-align: center;
+  text-decoration: none;
+  border: 1px solid transparent;
+  border-radius: var(--pb-radius-md, 8px);
+  cursor: pointer;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
+}
+.pb-button:hover { text-decoration: none; }
+.pb-button:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+}
+
+.pb-button-primary {
+  background-color: var(--pb-color-primary, #f58220);
+  border-color: var(--pb-color-primary, #f58220);
+  color: #ffffff;
+}
+.pb-button-primary:hover:not(:disabled) {
+  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);
+  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 88%, #000);
+}
+.pb-button-secondary {
+  background-color: var(--pb-color-secondary, #64748b);
+  border-color: var(--pb-color-secondary, #64748b);
+  color: #ffffff;
+}
+.pb-button-success {
+  background-color: var(--pb-color-success, #16a34a);
+  border-color: var(--pb-color-success, #16a34a);
+  color: #ffffff;
+}
+.pb-button-danger {
+  background-color: var(--pb-color-danger, #dc2626);
+  border-color: var(--pb-color-danger, #dc2626);
+  color: #ffffff;
+}
+.pb-button-warning {
+  background-color: var(--pb-color-warning, #f59e0b);
+  border-color: var(--pb-color-warning, #f59e0b);
+  color: #1f2937;
+}
+.pb-button-info {
+  background-color: var(--pb-color-info, #0ea5e9);
+  border-color: var(--pb-color-info, #0ea5e9);
+  color: #ffffff;
+}
+.pb-button-light {
+  background-color: var(--pb-color-light, #f8fafc);
+  border-color: var(--pb-color-border, #e5e7eb);
+  color: var(--pb-color-text, #1f2937);
+}
+.pb-button-dark {
+  background-color: var(--pb-color-dark, #0f172a);
+  border-color: var(--pb-color-dark, #0f172a);
+  color: #ffffff;
+}
+.pb-button-outline-primary {
+  background-color: transparent;
+  border-color: var(--pb-color-primary, #f58220);
+  color: var(--pb-color-primary, #f58220);
+}
+.pb-button-outline-primary:hover:not(:disabled) {
+  background-color: var(--pb-color-primary, #f58220);
+  color: #ffffff;
+}
+.pb-button-outline-secondary {
+  background-color: transparent;
+  border-color: var(--pb-color-secondary, #64748b);
+  color: var(--pb-color-secondary, #64748b);
+}
+.pb-button-outline-secondary:hover:not(:disabled) {
+  background-color: var(--pb-color-secondary, #64748b);
+  color: #ffffff;
+}
+.pb-button-link {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--pb-color-primary, #f58220);
+  padding-inline: 0.5em;
+}
+.pb-button-sm {
+  padding: 0.375em 0.875em;
+  font-size: 0.875rem;
+  border-radius: var(--pb-radius-sm, 4px);
+}
+.pb-button-lg {
+  padding: 0.625em 1.5em;
+  font-size: 1.125rem;
+  border-radius: var(--pb-radius-lg, 12px);
+}
+
+/* ─── Spinner ─────────────────────────────────────────────── */
+.pb-spinner {
+  display: inline-block;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0.2em solid currentColor;
+  border-right-color: transparent;
+  border-radius: 50%;
+  animation: pb-spin 0.75s linear infinite;
+  vertical-align: -0.25em;
+}
+.pb-spinner-sm {
+  width: 1rem;
+  height: 1rem;
+  border-width: 0.18em;
+}
+@keyframes pb-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* ─── Alertas ─────────────────────────────────────────────── */
+.pb-alert {
+  padding: var(--pb-space-md, 16px) var(--pb-space-lg, 24px);
+  border: 1px solid;
+  border-radius: var(--pb-radius-md, 8px);
+  margin-bottom: var(--pb-space-md, 16px);
+}
+.pb-alert-title {
+  font-weight: var(--pb-font-weight-bold, 700);
+  margin-bottom: 0.25em;
+}
+.pb-alert-primary {
+  background-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 10%, #fff);
+  border-color: color-mix(in srgb, var(--pb-color-primary, #f58220) 35%, #fff);
+  color: var(--pb-color-text, #1f2937);
+}
+.pb-alert-info {
+  background-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 10%, #fff);
+  border-color: color-mix(in srgb, var(--pb-color-info, #0ea5e9) 35%, #fff);
+  color: var(--pb-color-text, #1f2937);
+}
+.pb-alert-success {
+  background-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 10%, #fff);
+  border-color: color-mix(in srgb, var(--pb-color-success, #16a34a) 35%, #fff);
+  color: var(--pb-color-text, #1f2937);
+}
+.pb-alert-warning {
+  background-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 12%, #fff);
+  border-color: color-mix(in srgb, var(--pb-color-warning, #f59e0b) 35%, #fff);
+  color: var(--pb-color-text, #1f2937);
+}
+.pb-alert-danger {
+  background-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 10%, #fff);
+  border-color: color-mix(in srgb, var(--pb-color-danger, #dc2626) 35%, #fff);
+  color: var(--pb-color-text, #1f2937);
+}
+.pb-alert-secondary {
+  background-color: var(--pb-color-light, #f8fafc);
+  border-color: var(--pb-color-border, #e5e7eb);
+  color: var(--pb-color-text, #1f2937);
+}
+
+/* ─── Formulários ─────────────────────────────────────────── */
+.pb-form-group {
+  margin-bottom: var(--pb-space-md, 16px);
+}
+.pb-form-label {
+  display: block;
+  margin-bottom: 0.375rem;
+  font-weight: var(--pb-font-weight-bold, 700);
+  color: var(--pb-color-text, #1f2937);
+}
+.pb-form-control,
+.pb-form-select,
+.pb-form-textarea {
+  display: block;
+  width: 100%;
+  padding: 0.5em 0.75em;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--pb-color-text, #1f2937);
+  background-color: var(--pb-color-surface, #ffffff);
+  border: 1px solid var(--pb-color-border, #e5e7eb);
+  border-radius: var(--pb-radius-sm, 4px);
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.pb-form-control:focus,
+.pb-form-select:focus,
+.pb-form-textarea:focus {
+  outline: none;
+  border-color: var(--pb-color-primary, #f58220);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pb-color-primary, #f58220) 20%, transparent);
+}
+.pb-form-control-invalid,
+.pb-form-select-invalid,
+.pb-form-textarea-invalid {
+  border-color: var(--pb-color-danger, #dc2626);
+}
+.pb-invalid-feedback {
+  display: block;
+  margin-top: 0.375rem;
+  font-size: 0.875rem;
+  color: var(--pb-color-danger, #dc2626);
+}
+.pb-form-check {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.pb-form-check-input {
+  width: 1.1em;
+  height: 1.1em;
+  accent-color: var(--pb-color-primary, #f58220);
+  flex-shrink: 0;
+}
+.pb-form-check-label {
+  font-weight: normal;
+  margin-bottom: 0;
+}
+
+/* ─── Header ──────────────────────────────────────────────── */
+.pb-header {
+  width: 100%;
+}
+.pb-header-inner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--pb-space-md, 16px);
+  flex-wrap: wrap;
+  padding-block: var(--pb-space-sm, 8px);
+}
+.pb-brand {
+  display: inline-flex;
+  align-items: center;
+  text-decoration: none;
+}
+.pb-brand img {
+  max-height: 56px;
+  width: auto;
+}
+.pb-nav {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.pb-nav-link {
+  display: inline-block;
+  padding: 0.5rem 0.75rem;
+  color: inherit;
+  text-decoration: none;
+  font-weight: 500;
+  border-bottom: 2px solid transparent;
+  transition: color 0.2s ease, border-color 0.2s ease;
+}
+.pb-nav-link:hover {
+  text-decoration: none;
+  opacity: 0.85;
+}
+.pb-nav-link-active {
+  border-bottom-color: currentColor;
+}
+.pb-nav-toggle {
+  display: none;
+  padding: 0.375rem 0.625rem;
+  font-size: 1.25rem;
+  line-height: 1;
+  background: transparent;
+  border: 1px solid var(--pb-color-border, #e5e7eb);
+  border-radius: var(--pb-radius-sm, 4px);
+  cursor: pointer;
+  color: inherit;
+}
+@media (max-width: 991.98px) {
+  .pb-nav-toggle { display: inline-flex; align-items: center; }
+  .pb-nav { display: none; }
+  .pb-nav-open { display: flex; flex-direction: column; width: 100%; }
+}
+
+/* ─── Footer ──────────────────────────────────────────────── */
+.pb-footer {
+  width: 100%;
+  padding-block: var(--pb-space-xl, 32px);
+  color: var(--pb-color-text, #1f2937);
+}
+.pb-footer-divider {
+  border: none;
+  border-top: 1px solid var(--pb-color-border, #e5e7eb);
+  margin: var(--pb-space-lg, 24px) 0;
+}
+.pb-social-icons {
+  display: flex;
+  justify-content: center;
+  gap: var(--pb-space-sm, 8px);
+  flex-wrap: wrap;
+}
+.pb-social-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  color: inherit;
+  text-decoration: none;
+}
+.pb-social-icon:hover {
+  text-decoration: none;
+  opacity: 0.8;
+}
+
+/* ─── Loading ─────────────────────────────────────────────── */
+.pb-loading {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--pb-space-sm, 8px);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+}
+
+/* ─── Utilitários de alinhamento ──────────────────────────── */
+.pb-text-center { text-align: center; }
+.pb-mb-0 { margin-bottom: 0; }
+`;

package/dist/designSystem/buildSiteCss.d.ts

@@ -0,0 +1,8 @@
+import { type PartialDesignTokens } from './tokens.js';
+/**
+ * Compõe o CSS completo do site público: variáveis de tema (`:root`) + CSS base.
+ *
+ * Usado pelo host (ex.: o preview do editor injeta no iframe) e pelo
+ * `SiteLayout` (site público).
+ */
+export declare function buildSiteCss(designSystem?: PartialDesignTokens): string;

package/dist/designSystem/buildSiteCss.js

@@ -0,0 +1,11 @@
+import { baseCss } from './baseCss.js';
+import { buildTokenCss } from './tokens.js';
+/**
+ * Compõe o CSS completo do site público: variáveis de tema (`:root`) + CSS base.
+ *
+ * Usado pelo host (ex.: o preview do editor injeta no iframe) e pelo
+ * `SiteLayout` (site público).
+ */
+export function buildSiteCss(designSystem) {
+    return `${buildTokenCss(designSystem)}\n${baseCss}`;
+}

package/dist/designSystem/index.d.ts

@@ -0,0 +1,6 @@
+export type { DesignTokens, DesignColors, DesignTypography, DesignSpacing, DesignRadius, DesignShadow, PartialDesignTokens, DeepPartial } from './tokens.js';
+export { defaultTokens, mergeTokens, tokenToCssVars, buildTokenCss, buildThemeVars } from './tokens.js';
+export { baseCss } from './baseCss.js';
+export { buildSiteCss } from './buildSiteCss.js';
+export { themeVarsStyle } from './themeVars.js';
+export { ThemeStyle } from './theme.js';

package/dist/designSystem/index.js

@@ -0,0 +1,5 @@
+export { defaultTokens, mergeTokens, tokenToCssVars, buildTokenCss, buildThemeVars } from './tokens.js';
+export { baseCss } from './baseCss.js';
+export { buildSiteCss } from './buildSiteCss.js';
+export { themeVarsStyle } from './themeVars.js';
+export { ThemeStyle } from './theme.js';

package/dist/designSystem/theme.d.ts

@@ -0,0 +1,9 @@
+import type { PartialDesignTokens } from './tokens.js';
+/**
+ * Injetor de tema em formato JSX. Renderiza um `<style>` com as variáveis de
+ * token e o CSS base. Usado em aplicações que não controlam o `<head>`
+ * diretamente (ex.: preview via portal).
+ */
+export declare function ThemeStyle({ designSystem }: {
+    readonly designSystem?: PartialDesignTokens;
+}): import("react").JSX.Element;

package/dist/designSystem/theme.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { buildSiteCss } from './buildSiteCss.js';
+/**
+ * Injetor de tema em formato JSX. Renderiza um `<style>` com as variáveis de
+ * token e o CSS base. Usado em aplicações que não controlam o `<head>`
+ * diretamente (ex.: preview via portal).
+ */
+export function ThemeStyle({ designSystem }) {
+    const css = buildSiteCss(designSystem);
+    return _jsx("style", { dangerouslySetInnerHTML: { __html: css } });
+}

package/dist/designSystem/themeVars.d.ts

@@ -0,0 +1,8 @@
+import type { CSSProperties } from 'react';
+import { type PartialDesignTokens } from './tokens.js';
+/**
+ * Converte os tokens do design system em um objeto de estilo válido para React
+ * (propriedades CSS custom `--pb-*`), para aplicar inline em um elemento raiz.
+ * Assim a alteração de um token reflete em tempo real no preview.
+ */
+export declare function themeVarsStyle(designSystem?: PartialDesignTokens): CSSProperties;

package/dist/designSystem/themeVars.js

@@ -0,0 +1,9 @@
+import { buildThemeVars } from './tokens.js';
+/**
+ * Converte os tokens do design system em um objeto de estilo válido para React
+ * (propriedades CSS custom `--pb-*`), para aplicar inline em um elemento raiz.
+ * Assim a alteração de um token reflete em tempo real no preview.
+ */
+export function themeVarsStyle(designSystem) {
+    return buildThemeVars(designSystem);
+}

package/dist/designSystem/tokens.d.ts

@@ -0,0 +1,82 @@
+/**
+ * Design System tokens.
+ *
+ * Fontes de verdade para cores, tipografia, espaçamento, raio e sombra do site
+ * público. Cada token é exposto como uma variável CSS `--pb-*` e os componentes
+ * do `lib-pixelbuild` consomem via `var(--pb-*, <fallback>)`, de forma que um
+ * site sem design system configurado continua com aparência padrão.
+ */
+export interface DesignColors {
+    primary: string;
+    secondary: string;
+    success: string;
+    danger: string;
+    warning: string;
+    info: string;
+    light: string;
+    dark: string;
+    background: string;
+    surface: string;
+    text: string;
+    heading: string;
+    muted: string;
+    border: string;
+}
+export interface DesignTypography {
+    fontFamily: string;
+    fontSizeBase: string;
+    fontWeightNormal: string;
+    fontWeightBold: string;
+    lineHeight: string;
+}
+export interface DesignSpacing {
+    none: string;
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xxl: string;
+}
+export interface DesignRadius {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+    full: string;
+}
+export interface DesignShadow {
+    none: string;
+    sm: string;
+    md: string;
+    lg: string;
+}
+export interface DesignTokens {
+    colors: DesignColors;
+    typography: DesignTypography;
+    spacing: DesignSpacing;
+    radius: DesignRadius;
+    shadow: DesignShadow;
+    gutter: string;
+}
+/** Versão em que qualquer grupo/token pode ser omitido (parcial aninhado). */
+export type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object ? DeepPartial<T[K]> : T[K];
+};
+export type PartialDesignTokens = DeepPartial<DesignTokens>;
+/**
+ * Valores padrão. Mantidos neutros e modernos para que um site sem
+ * personalização não tenha cara de "framework genérico".
+ */
+export declare const defaultTokens: DesignTokens;
+export declare function mergeTokens(base: DesignTokens, partial?: PartialDesignTokens): DesignTokens;
+/** Mapeia os tokens para pares `--pb-*` → valor. */
+export declare function tokenToCssVars(tokens: DesignTokens): Record<string, string>;
+/** Gera o bloco `:root { --pb-*: ... }` a partir dos tokens (com defaults). */
+export declare function buildTokenCss(tokens?: PartialDesignTokens): string;
+/**
+ * Retorna o mapa de variáveis `--pb-*` (com defaults mesclados) para aplicação
+ * inline em um elemento raiz — permite que a troca de token reflita em tempo
+ * real no preview sem reinjetar o `<head>`.
+ */
+export declare function buildThemeVars(designSystem?: PartialDesignTokens): Record<string, string>;