@snksergio/design-system 0.44.0 → 0.46.0

package/README.md

@@ -96,7 +96,7 @@ tokens/brands/default/
 Para criar um projeto novo do zero já consumindo o DS, com tudo configurado (Vite + React 19 + Tailwind v4 + tema light/dark + exemplo funcional):
 
 ```bash
-npm create @snksergio/design-system my-app
+npm create @snksergio/design-system@latest my-app
 cd my-app
 npm run dev
 ```

package/dist-lib/chunks/{kpi-delta-B_1xjDu_.mjs → kpi-delta-DuxCD93G.mjs}

@@ -2,7 +2,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 import { t as tv, c as cn } from "./avatar-DFWEwBKu.mjs";
 import { TrendingUp } from "lucide-react";
-import { C as Chip } from "./useTheme-DCmzLBUR.mjs";
+import { C as Chip } from "./useTheme-CS_no6zP.mjs";
 const kpi = tv({
   slots: {
     root: "flex flex-col gap-gp-lg",
@@ -147,4 +147,4 @@ export {
   Kpi as a,
   KpiDelta as b
 };
-//# sourceMappingURL=kpi-delta-B_1xjDu_.mjs.map
+//# sourceMappingURL=kpi-delta-DuxCD93G.mjs.map

package/dist-lib/chunks/{kpi-delta-B_1xjDu_.mjs.map → kpi-delta-DuxCD93G.mjs.map}

@@ -1 +1 @@
-{"version":3,"file":"kpi-delta-B_1xjDu_.mjs","sources":["../../src/components/ui/Kpi/kpi.styles.ts","../../src/components/ui/Kpi/kpi-group.tsx","../../src/components/ui/Kpi/kpi.tsx","../../src/components/ui/Kpi/kpi-delta.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/* ══════════════════════════════════════════════════════════════════════════\r\n   Kpi — estilos (tv). 100% sobre tokens do DS, theme-aware.\r\n   ══════════════════════════════════════════════════════════════════════════ */\r\n\r\nexport const kpi = tv({\r\n  slots: {\r\n    root: \"flex flex-col gap-gp-lg\",\r\n    header: \"flex items-start justify-between gap-gp-md\",\r\n    label: \"m-0 text-body-md font-semibold text-fg-default\",\r\n    iconBox:\r\n      \"grid size-form-lg shrink-0 place-items-center rounded-radius-lg [&>svg]:size-icon-md\",\r\n    main: \"flex flex-col gap-gp-xs\",\r\n    valueRow: \"flex flex-wrap items-center gap-gp-md\",\r\n    value:\r\n      \"leading-none text-fg-default [font-variant-numeric:tabular-nums]\",\r\n    hint: \"text-caption-sm text-fg-subtle\",\r\n    chart: \"mt-gp-xs\",\r\n    footnote:\r\n      \"mt-pad-md border-t border-border-subtle pt-pad-lg text-caption-md text-fg-muted\",\r\n  },\r\n  variants: {\r\n    // Tamanho do valor de destaque — presets `stat-*` (número de métrica).\r\n    // Default `md` (24px) = idêntico ao antigo `body-2xl`. Weight/leading tight\r\n    // vêm do preset + slot; pareado com tabular-nums.\r\n    size: {\r\n      sm: { value: \"text-stat-sm\" },\r\n      md: { value: \"text-stat-md\" },\r\n      lg: { value: \"text-stat-lg\" },\r\n      xl: { value: \"text-stat-xl\" },\r\n    },\r\n    surface: {\r\n      card: {\r\n        root: \"rounded-radius-xl border border-border-subtle bg-bg-surface p-pad-3xl shadow-sh-sm\",\r\n      },\r\n      plain: { root: \"p-pad-3xl\" },\r\n    },\r\n    tone: {\r\n      brand: { iconBox: \"bg-bg-brand-subtle text-fg-brand\" },\r\n      success: { iconBox: \"bg-bg-success-muted text-fg-success\" },\r\n      warning: { iconBox: \"bg-bg-warning-muted text-fg-warning\" },\r\n      info: { iconBox: \"bg-bg-info-muted text-fg-info\" },\r\n      danger: { iconBox: \"bg-bg-danger-muted text-fg-danger\" },\r\n      neutral: { iconBox: \"bg-bg-muted text-fg-muted\" },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    surface: \"card\",\r\n    tone: \"neutral\",\r\n  },\r\n});\r\n\r\nexport const kpiGroup = tv({\r\n  base: \"grid w-full\",\r\n  variants: {\r\n    columns: {\r\n      2: \"grid-cols-1 sm:grid-cols-2\",\r\n      3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\r\n      4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\r\n      5: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-5\",\r\n      6: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6\",\r\n    },\r\n    divided: {\r\n      // 1 card único com divisórias (linha no mobile, coluna no sm+)\r\n      true: \"overflow-hidden rounded-radius-xl border border-border-subtle bg-bg-surface shadow-sh-sm divide-y divide-border-subtle sm:divide-y-0 sm:divide-x\",\r\n      false: \"gap-gp-2xl\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    columns: 4,\r\n    divided: false,\r\n  },\r\n});\r\n","\"use client\";\r\n\r\nimport { createContext } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { kpiGroup } from \"./kpi.styles\";\r\nimport type { KpiGroupProps } from \"./kpi.types\";\r\n\r\n/** Superfície herdada pelos `Kpi` filhos (card normal vs plain dentro de divided). */\r\nexport const KpiSurfaceContext = createContext<\"card\" | \"plain\">(\"card\");\r\n\r\n/**\r\n * KpiGroup — layout de composição pros `Kpi`. `columns` (responsivo) e\r\n * `divided` (vira 1 card único com divisórias entre os KPIs).\r\n */\r\nexport function KpiGroup({\r\n  columns = 4,\r\n  divided = false,\r\n  children,\r\n  className,\r\n}: KpiGroupProps) {\r\n  return (\r\n    <KpiSurfaceContext.Provider value={divided ? \"plain\" : \"card\"}>\r\n      <div className={cn(kpiGroup({ columns, divided }), className)}>\r\n        {children}\r\n      </div>\r\n    </KpiSurfaceContext.Provider>\r\n  );\r\n}\r\n\r\nKpiGroup.displayName = \"KpiGroup\";\r\n","\"use client\";\r\n\r\nimport { useContext } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { kpi } from \"./kpi.styles\";\r\nimport { KpiSurfaceContext } from \"./kpi-group\";\r\nimport type { KpiProps } from \"./kpi.types\";\r\n\r\n/**\r\n * Kpi — card de KPI composável: header (label + ícone por tone), valor +\r\n * delta, hint, slot livre (sparkline/chart) e footnote. Use dentro de\r\n * `KpiGroup` pra rows/grids; dentro de `KpiGroup divided` ele vira \"plain\".\r\n */\r\nexport function Kpi({\r\n  label,\r\n  value,\r\n  delta,\r\n  hint,\r\n  icon,\r\n  tone = \"neutral\",\r\n  size = \"md\",\r\n  footnote,\r\n  children,\r\n  surface,\r\n  className,\r\n}: KpiProps) {\r\n  const inherited = useContext(KpiSurfaceContext);\r\n  const s = kpi({ size, surface: surface ?? inherited, tone });\r\n\r\n  return (\r\n    <article className={cn(s.root(), className)}>\r\n      <header className={s.header()}>\r\n        <h3 className={s.label()}>{label}</h3>\r\n        {icon && (\r\n          <span className={s.iconBox()} aria-hidden>\r\n            {icon}\r\n          </span>\r\n        )}\r\n      </header>\r\n      <div className={s.main()}>\r\n        <div className={s.valueRow()}>\r\n          <span className={s.value()}>{value}</span>\r\n          {delta}\r\n        </div>\r\n        {hint && <span className={s.hint()}>{hint}</span>}\r\n      </div>\r\n      {children && <div className={s.chart()}>{children}</div>}\r\n      {footnote && <div className={s.footnote()}>{footnote}</div>}\r\n    </article>\r\n  );\r\n}\r\n\r\nKpi.displayName = \"Kpi\";\r\n","\"use client\";\r\n\r\nimport { TrendingUp } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Chip } from \"@/components/ui/Chip\";\r\nimport type { KpiDeltaProps } from \"./kpi.types\";\r\n\r\n/**\r\n * KpiDelta — pílula de variação (sobre o Chip). Tom semântico explícito\r\n * (success/danger/neutral) + seta opcional. O tom é decisão do consumidor —\r\n * \"subir\" nem sempre é positivo (ex.: tempo de espera).\r\n *\r\n * `signed` deriva tom+seta do sinal do `value` (\"-\" → danger/down; senão\r\n * success/up). `tone`/`direction` explícitos sempre vencem.\r\n */\r\nexport function KpiDelta({\r\n  value,\r\n  tone,\r\n  direction,\r\n  signed = false,\r\n  className,\r\n}: KpiDeltaProps) {\r\n  const isNegative =\r\n    signed && typeof value === \"string\" && value.trim().startsWith(\"-\");\r\n  const resolvedTone = tone ?? (signed ? (isNegative ? \"danger\" : \"success\") : \"success\");\r\n  const resolvedDirection = direction ?? (signed ? (isNegative ? \"down\" : \"up\") : undefined);\r\n\r\n  return (\r\n    <Chip\r\n      color={resolvedTone}\r\n      variant=\"soft\"\r\n      size=\"sm\"\r\n      shape=\"pill\"\r\n      className={className}\r\n    >\r\n      {resolvedDirection && (\r\n        <TrendingUp\r\n          className={cn(\"size-[12px]\", resolvedDirection === \"down\" && \"rotate-180\")}\r\n          aria-hidden\r\n        />\r\n      )}\r\n      {value}\r\n    </Chip>\r\n  );\r\n}\r\n\r\nKpiDelta.displayName = \"KpiDelta\";\r\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"kpi-delta-DuxCD93G.mjs","sources":["../../src/components/ui/Kpi/kpi.styles.ts","../../src/components/ui/Kpi/kpi-group.tsx","../../src/components/ui/Kpi/kpi.tsx","../../src/components/ui/Kpi/kpi-delta.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/* ══════════════════════════════════════════════════════════════════════════\r\n   Kpi — estilos (tv). 100% sobre tokens do DS, theme-aware.\r\n   ══════════════════════════════════════════════════════════════════════════ */\r\n\r\nexport const kpi = tv({\r\n  slots: {\r\n    root: \"flex flex-col gap-gp-lg\",\r\n    header: \"flex items-start justify-between gap-gp-md\",\r\n    label: \"m-0 text-body-md font-semibold text-fg-default\",\r\n    iconBox:\r\n      \"grid size-form-lg shrink-0 place-items-center rounded-radius-lg [&>svg]:size-icon-md\",\r\n    main: \"flex flex-col gap-gp-xs\",\r\n    valueRow: \"flex flex-wrap items-center gap-gp-md\",\r\n    value:\r\n      \"leading-none text-fg-default [font-variant-numeric:tabular-nums]\",\r\n    hint: \"text-caption-sm text-fg-subtle\",\r\n    chart: \"mt-gp-xs\",\r\n    footnote:\r\n      \"mt-pad-md border-t border-border-subtle pt-pad-lg text-caption-md text-fg-muted\",\r\n  },\r\n  variants: {\r\n    // Tamanho do valor de destaque — presets `stat-*` (número de métrica).\r\n    // Default `md` (24px) = idêntico ao antigo `body-2xl`. Weight/leading tight\r\n    // vêm do preset + slot; pareado com tabular-nums.\r\n    size: {\r\n      sm: { value: \"text-stat-sm\" },\r\n      md: { value: \"text-stat-md\" },\r\n      lg: { value: \"text-stat-lg\" },\r\n      xl: { value: \"text-stat-xl\" },\r\n    },\r\n    surface: {\r\n      card: {\r\n        root: \"rounded-radius-xl border border-border-subtle bg-bg-surface p-pad-3xl shadow-sh-sm\",\r\n      },\r\n      plain: { root: \"p-pad-3xl\" },\r\n    },\r\n    tone: {\r\n      brand: { iconBox: \"bg-bg-brand-subtle text-fg-brand\" },\r\n      success: { iconBox: \"bg-bg-success-muted text-fg-success\" },\r\n      warning: { iconBox: \"bg-bg-warning-muted text-fg-warning\" },\r\n      info: { iconBox: \"bg-bg-info-muted text-fg-info\" },\r\n      danger: { iconBox: \"bg-bg-danger-muted text-fg-danger\" },\r\n      neutral: { iconBox: \"bg-bg-muted text-fg-muted\" },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    surface: \"card\",\r\n    tone: \"neutral\",\r\n  },\r\n});\r\n\r\nexport const kpiGroup = tv({\r\n  base: \"grid w-full\",\r\n  variants: {\r\n    columns: {\r\n      2: \"grid-cols-1 sm:grid-cols-2\",\r\n      3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\r\n      4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\r\n      5: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-5\",\r\n      6: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6\",\r\n    },\r\n    divided: {\r\n      // 1 card único com divisórias (linha no mobile, coluna no sm+)\r\n      true: \"overflow-hidden rounded-radius-xl border border-border-subtle bg-bg-surface shadow-sh-sm divide-y divide-border-subtle sm:divide-y-0 sm:divide-x\",\r\n      false: \"gap-gp-2xl\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    columns: 4,\r\n    divided: false,\r\n  },\r\n});\r\n","\"use client\";\r\n\r\nimport { createContext } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { kpiGroup } from \"./kpi.styles\";\r\nimport type { KpiGroupProps } from \"./kpi.types\";\r\n\r\n/** Superfície herdada pelos `Kpi` filhos (card normal vs plain dentro de divided). */\r\nexport const KpiSurfaceContext = createContext<\"card\" | \"plain\">(\"card\");\r\n\r\n/**\r\n * KpiGroup — layout de composição pros `Kpi`. `columns` (responsivo) e\r\n * `divided` (vira 1 card único com divisórias entre os KPIs).\r\n */\r\nexport function KpiGroup({\r\n  columns = 4,\r\n  divided = false,\r\n  children,\r\n  className,\r\n}: KpiGroupProps) {\r\n  return (\r\n    <KpiSurfaceContext.Provider value={divided ? \"plain\" : \"card\"}>\r\n      <div className={cn(kpiGroup({ columns, divided }), className)}>\r\n        {children}\r\n      </div>\r\n    </KpiSurfaceContext.Provider>\r\n  );\r\n}\r\n\r\nKpiGroup.displayName = \"KpiGroup\";\r\n","\"use client\";\r\n\r\nimport { useContext } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { kpi } from \"./kpi.styles\";\r\nimport { KpiSurfaceContext } from \"./kpi-group\";\r\nimport type { KpiProps } from \"./kpi.types\";\r\n\r\n/**\r\n * Kpi — card de KPI composável: header (label + ícone por tone), valor +\r\n * delta, hint, slot livre (sparkline/chart) e footnote. Use dentro de\r\n * `KpiGroup` pra rows/grids; dentro de `KpiGroup divided` ele vira \"plain\".\r\n */\r\nexport function Kpi({\r\n  label,\r\n  value,\r\n  delta,\r\n  hint,\r\n  icon,\r\n  tone = \"neutral\",\r\n  size = \"md\",\r\n  footnote,\r\n  children,\r\n  surface,\r\n  className,\r\n}: KpiProps) {\r\n  const inherited = useContext(KpiSurfaceContext);\r\n  const s = kpi({ size, surface: surface ?? inherited, tone });\r\n\r\n  return (\r\n    <article className={cn(s.root(), className)}>\r\n      <header className={s.header()}>\r\n        <h3 className={s.label()}>{label}</h3>\r\n        {icon && (\r\n          <span className={s.iconBox()} aria-hidden>\r\n            {icon}\r\n          </span>\r\n        )}\r\n      </header>\r\n      <div className={s.main()}>\r\n        <div className={s.valueRow()}>\r\n          <span className={s.value()}>{value}</span>\r\n          {delta}\r\n        </div>\r\n        {hint && <span className={s.hint()}>{hint}</span>}\r\n      </div>\r\n      {children && <div className={s.chart()}>{children}</div>}\r\n      {footnote && <div className={s.footnote()}>{footnote}</div>}\r\n    </article>\r\n  );\r\n}\r\n\r\nKpi.displayName = \"Kpi\";\r\n","\"use client\";\r\n\r\nimport { TrendingUp } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Chip } from \"@/components/ui/Chip\";\r\nimport type { KpiDeltaProps } from \"./kpi.types\";\r\n\r\n/**\r\n * KpiDelta — pílula de variação (sobre o Chip). Tom semântico explícito\r\n * (success/danger/neutral) + seta opcional. O tom é decisão do consumidor —\r\n * \"subir\" nem sempre é positivo (ex.: tempo de espera).\r\n *\r\n * `signed` deriva tom+seta do sinal do `value` (\"-\" → danger/down; senão\r\n * success/up). `tone`/`direction` explícitos sempre vencem.\r\n */\r\nexport function KpiDelta({\r\n  value,\r\n  tone,\r\n  direction,\r\n  signed = false,\r\n  className,\r\n}: KpiDeltaProps) {\r\n  const isNegative =\r\n    signed && typeof value === \"string\" && value.trim().startsWith(\"-\");\r\n  const resolvedTone = tone ?? (signed ? (isNegative ? \"danger\" : \"success\") : \"success\");\r\n  const resolvedDirection = direction ?? (signed ? (isNegative ? \"down\" : \"up\") : undefined);\r\n\r\n  return (\r\n    <Chip\r\n      color={resolvedTone}\r\n      variant=\"soft\"\r\n      size=\"sm\"\r\n      shape=\"pill\"\r\n      className={className}\r\n    >\r\n      {resolvedDirection && (\r\n        <TrendingUp\r\n          className={cn(\"size-[12px]\", resolvedDirection === \"down\" && \"rotate-180\")}\r\n          aria-hidden\r\n        />\r\n      )}\r\n      {value}\r\n    </Chip>\r\n  );\r\n}\r\n\r\nKpiDelta.displayName = \"KpiDelta\";\r\n"],"names":[],"mappings":"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"}

package/dist-lib/chunks/{kpi-delta-CXGg2nBx.cjs → kpi-delta-DwQWNM-F.cjs}

@@ -3,7 +3,7 @@ const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const avatar = require("./avatar-eM5txRFZ.cjs");
 const lucideReact = require("lucide-react");
-const useTheme = require("./useTheme-C9Y6vxTf.cjs");
+const useTheme = require("./useTheme-BB3QhUpu.cjs");
 const kpi = avatar.tv({
   slots: {
     root: "flex flex-col gap-gp-lg",
@@ -146,4 +146,4 @@ KpiDelta.displayName = "KpiDelta";
 exports.Kpi = Kpi;
 exports.KpiDelta = KpiDelta;
 exports.KpiGroup = KpiGroup;
-//# sourceMappingURL=kpi-delta-CXGg2nBx.cjs.map
+//# sourceMappingURL=kpi-delta-DwQWNM-F.cjs.map

package/dist-lib/chunks/{kpi-delta-CXGg2nBx.cjs.map → kpi-delta-DwQWNM-F.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"kpi-delta-CXGg2nBx.cjs","sources":["../../src/components/ui/Kpi/kpi.styles.ts","../../src/components/ui/Kpi/kpi-group.tsx","../../src/components/ui/Kpi/kpi.tsx","../../src/components/ui/Kpi/kpi-delta.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/* ══════════════════════════════════════════════════════════════════════════\r\n   Kpi — estilos (tv). 100% sobre tokens do DS, theme-aware.\r\n   ══════════════════════════════════════════════════════════════════════════ */\r\n\r\nexport const kpi = tv({\r\n  slots: {\r\n    root: \"flex flex-col gap-gp-lg\",\r\n    header: \"flex items-start justify-between gap-gp-md\",\r\n    label: \"m-0 text-body-md font-semibold text-fg-default\",\r\n    iconBox:\r\n      \"grid size-form-lg shrink-0 place-items-center rounded-radius-lg [&>svg]:size-icon-md\",\r\n    main: \"flex flex-col gap-gp-xs\",\r\n    valueRow: \"flex flex-wrap items-center gap-gp-md\",\r\n    value:\r\n      \"leading-none text-fg-default [font-variant-numeric:tabular-nums]\",\r\n    hint: \"text-caption-sm text-fg-subtle\",\r\n    chart: \"mt-gp-xs\",\r\n    footnote:\r\n      \"mt-pad-md border-t border-border-subtle pt-pad-lg text-caption-md text-fg-muted\",\r\n  },\r\n  variants: {\r\n    // Tamanho do valor de destaque — presets `stat-*` (número de métrica).\r\n    // Default `md` (24px) = idêntico ao antigo `body-2xl`. Weight/leading tight\r\n    // vêm do preset + slot; pareado com tabular-nums.\r\n    size: {\r\n      sm: { value: \"text-stat-sm\" },\r\n      md: { value: \"text-stat-md\" },\r\n      lg: { value: \"text-stat-lg\" },\r\n      xl: { value: \"text-stat-xl\" },\r\n    },\r\n    surface: {\r\n      card: {\r\n        root: \"rounded-radius-xl border border-border-subtle bg-bg-surface p-pad-3xl shadow-sh-sm\",\r\n      },\r\n      plain: { root: \"p-pad-3xl\" },\r\n    },\r\n    tone: {\r\n      brand: { iconBox: \"bg-bg-brand-subtle text-fg-brand\" },\r\n      success: { iconBox: \"bg-bg-success-muted text-fg-success\" },\r\n      warning: { iconBox: \"bg-bg-warning-muted text-fg-warning\" },\r\n      info: { iconBox: \"bg-bg-info-muted text-fg-info\" },\r\n      danger: { iconBox: \"bg-bg-danger-muted text-fg-danger\" },\r\n      neutral: { iconBox: \"bg-bg-muted text-fg-muted\" },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    surface: \"card\",\r\n    tone: \"neutral\",\r\n  },\r\n});\r\n\r\nexport const kpiGroup = tv({\r\n  base: \"grid w-full\",\r\n  variants: {\r\n    columns: {\r\n      2: \"grid-cols-1 sm:grid-cols-2\",\r\n      3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\r\n      4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\r\n      5: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-5\",\r\n      6: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6\",\r\n    },\r\n    divided: {\r\n      // 1 card único com divisórias (linha no mobile, coluna no sm+)\r\n      true: \"overflow-hidden rounded-radius-xl border border-border-subtle bg-bg-surface shadow-sh-sm divide-y divide-border-subtle sm:divide-y-0 sm:divide-x\",\r\n      false: \"gap-gp-2xl\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    columns: 4,\r\n    divided: false,\r\n  },\r\n});\r\n","\"use client\";\r\n\r\nimport { createContext } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { kpiGroup } from \"./kpi.styles\";\r\nimport type { KpiGroupProps } from \"./kpi.types\";\r\n\r\n/** Superfície herdada pelos `Kpi` filhos (card normal vs plain dentro de divided). */\r\nexport const KpiSurfaceContext = createContext<\"card\" | \"plain\">(\"card\");\r\n\r\n/**\r\n * KpiGroup — layout de composição pros `Kpi`. `columns` (responsivo) e\r\n * `divided` (vira 1 card único com divisórias entre os KPIs).\r\n */\r\nexport function KpiGroup({\r\n  columns = 4,\r\n  divided = false,\r\n  children,\r\n  className,\r\n}: KpiGroupProps) {\r\n  return (\r\n    <KpiSurfaceContext.Provider value={divided ? \"plain\" : \"card\"}>\r\n      <div className={cn(kpiGroup({ columns, divided }), className)}>\r\n        {children}\r\n      </div>\r\n    </KpiSurfaceContext.Provider>\r\n  );\r\n}\r\n\r\nKpiGroup.displayName = \"KpiGroup\";\r\n","\"use client\";\r\n\r\nimport { useContext } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { kpi } from \"./kpi.styles\";\r\nimport { KpiSurfaceContext } from \"./kpi-group\";\r\nimport type { KpiProps } from \"./kpi.types\";\r\n\r\n/**\r\n * Kpi — card de KPI composável: header (label + ícone por tone), valor +\r\n * delta, hint, slot livre (sparkline/chart) e footnote. Use dentro de\r\n * `KpiGroup` pra rows/grids; dentro de `KpiGroup divided` ele vira \"plain\".\r\n */\r\nexport function Kpi({\r\n  label,\r\n  value,\r\n  delta,\r\n  hint,\r\n  icon,\r\n  tone = \"neutral\",\r\n  size = \"md\",\r\n  footnote,\r\n  children,\r\n  surface,\r\n  className,\r\n}: KpiProps) {\r\n  const inherited = useContext(KpiSurfaceContext);\r\n  const s = kpi({ size, surface: surface ?? inherited, tone });\r\n\r\n  return (\r\n    <article className={cn(s.root(), className)}>\r\n      <header className={s.header()}>\r\n        <h3 className={s.label()}>{label}</h3>\r\n        {icon && (\r\n          <span className={s.iconBox()} aria-hidden>\r\n            {icon}\r\n          </span>\r\n        )}\r\n      </header>\r\n      <div className={s.main()}>\r\n        <div className={s.valueRow()}>\r\n          <span className={s.value()}>{value}</span>\r\n          {delta}\r\n        </div>\r\n        {hint && <span className={s.hint()}>{hint}</span>}\r\n      </div>\r\n      {children && <div className={s.chart()}>{children}</div>}\r\n      {footnote && <div className={s.footnote()}>{footnote}</div>}\r\n    </article>\r\n  );\r\n}\r\n\r\nKpi.displayName = \"Kpi\";\r\n","\"use client\";\r\n\r\nimport { TrendingUp } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Chip } from \"@/components/ui/Chip\";\r\nimport type { KpiDeltaProps } from \"./kpi.types\";\r\n\r\n/**\r\n * KpiDelta — pílula de variação (sobre o Chip). Tom semântico explícito\r\n * (success/danger/neutral) + seta opcional. O tom é decisão do consumidor —\r\n * \"subir\" nem sempre é positivo (ex.: tempo de espera).\r\n *\r\n * `signed` deriva tom+seta do sinal do `value` (\"-\" → danger/down; senão\r\n * success/up). `tone`/`direction` explícitos sempre vencem.\r\n */\r\nexport function KpiDelta({\r\n  value,\r\n  tone,\r\n  direction,\r\n  signed = false,\r\n  className,\r\n}: KpiDeltaProps) {\r\n  const isNegative =\r\n    signed && typeof value === \"string\" && value.trim().startsWith(\"-\");\r\n  const resolvedTone = tone ?? (signed ? (isNegative ? \"danger\" : \"success\") : \"success\");\r\n  const resolvedDirection = direction ?? (signed ? (isNegative ? \"down\" : \"up\") : undefined);\r\n\r\n  return (\r\n    <Chip\r\n      color={resolvedTone}\r\n      variant=\"soft\"\r\n      size=\"sm\"\r\n      shape=\"pill\"\r\n      className={className}\r\n    >\r\n      {resolvedDirection && (\r\n        <TrendingUp\r\n          className={cn(\"size-[12px]\", resolvedDirection === \"down\" && \"rotate-180\")}\r\n          aria-hidden\r\n        />\r\n      )}\r\n      {value}\r\n    </Chip>\r\n  );\r\n}\r\n\r\nKpiDelta.displayName = \"KpiDelta\";\r\n"],"names":["tv","createContext","jsx","cn","useContext","jsxs","Chip","TrendingUp"],"mappings":"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"}
+{"version":3,"file":"kpi-delta-DwQWNM-F.cjs","sources":["../../src/components/ui/Kpi/kpi.styles.ts","../../src/components/ui/Kpi/kpi-group.tsx","../../src/components/ui/Kpi/kpi.tsx","../../src/components/ui/Kpi/kpi-delta.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/* ══════════════════════════════════════════════════════════════════════════\r\n   Kpi — estilos (tv). 100% sobre tokens do DS, theme-aware.\r\n   ══════════════════════════════════════════════════════════════════════════ */\r\n\r\nexport const kpi = tv({\r\n  slots: {\r\n    root: \"flex flex-col gap-gp-lg\",\r\n    header: \"flex items-start justify-between gap-gp-md\",\r\n    label: \"m-0 text-body-md font-semibold text-fg-default\",\r\n    iconBox:\r\n      \"grid size-form-lg shrink-0 place-items-center rounded-radius-lg [&>svg]:size-icon-md\",\r\n    main: \"flex flex-col gap-gp-xs\",\r\n    valueRow: \"flex flex-wrap items-center gap-gp-md\",\r\n    value:\r\n      \"leading-none text-fg-default [font-variant-numeric:tabular-nums]\",\r\n    hint: \"text-caption-sm text-fg-subtle\",\r\n    chart: \"mt-gp-xs\",\r\n    footnote:\r\n      \"mt-pad-md border-t border-border-subtle pt-pad-lg text-caption-md text-fg-muted\",\r\n  },\r\n  variants: {\r\n    // Tamanho do valor de destaque — presets `stat-*` (número de métrica).\r\n    // Default `md` (24px) = idêntico ao antigo `body-2xl`. Weight/leading tight\r\n    // vêm do preset + slot; pareado com tabular-nums.\r\n    size: {\r\n      sm: { value: \"text-stat-sm\" },\r\n      md: { value: \"text-stat-md\" },\r\n      lg: { value: \"text-stat-lg\" },\r\n      xl: { value: \"text-stat-xl\" },\r\n    },\r\n    surface: {\r\n      card: {\r\n        root: \"rounded-radius-xl border border-border-subtle bg-bg-surface p-pad-3xl shadow-sh-sm\",\r\n      },\r\n      plain: { root: \"p-pad-3xl\" },\r\n    },\r\n    tone: {\r\n      brand: { iconBox: \"bg-bg-brand-subtle text-fg-brand\" },\r\n      success: { iconBox: \"bg-bg-success-muted text-fg-success\" },\r\n      warning: { iconBox: \"bg-bg-warning-muted text-fg-warning\" },\r\n      info: { iconBox: \"bg-bg-info-muted text-fg-info\" },\r\n      danger: { iconBox: \"bg-bg-danger-muted text-fg-danger\" },\r\n      neutral: { iconBox: \"bg-bg-muted text-fg-muted\" },\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    size: \"md\",\r\n    surface: \"card\",\r\n    tone: \"neutral\",\r\n  },\r\n});\r\n\r\nexport const kpiGroup = tv({\r\n  base: \"grid w-full\",\r\n  variants: {\r\n    columns: {\r\n      2: \"grid-cols-1 sm:grid-cols-2\",\r\n      3: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\",\r\n      4: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-4\",\r\n      5: \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-5\",\r\n      6: \"grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-6\",\r\n    },\r\n    divided: {\r\n      // 1 card único com divisórias (linha no mobile, coluna no sm+)\r\n      true: \"overflow-hidden rounded-radius-xl border border-border-subtle bg-bg-surface shadow-sh-sm divide-y divide-border-subtle sm:divide-y-0 sm:divide-x\",\r\n      false: \"gap-gp-2xl\",\r\n    },\r\n  },\r\n  defaultVariants: {\r\n    columns: 4,\r\n    divided: false,\r\n  },\r\n});\r\n","\"use client\";\r\n\r\nimport { createContext } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { kpiGroup } from \"./kpi.styles\";\r\nimport type { KpiGroupProps } from \"./kpi.types\";\r\n\r\n/** Superfície herdada pelos `Kpi` filhos (card normal vs plain dentro de divided). */\r\nexport const KpiSurfaceContext = createContext<\"card\" | \"plain\">(\"card\");\r\n\r\n/**\r\n * KpiGroup — layout de composição pros `Kpi`. `columns` (responsivo) e\r\n * `divided` (vira 1 card único com divisórias entre os KPIs).\r\n */\r\nexport function KpiGroup({\r\n  columns = 4,\r\n  divided = false,\r\n  children,\r\n  className,\r\n}: KpiGroupProps) {\r\n  return (\r\n    <KpiSurfaceContext.Provider value={divided ? \"plain\" : \"card\"}>\r\n      <div className={cn(kpiGroup({ columns, divided }), className)}>\r\n        {children}\r\n      </div>\r\n    </KpiSurfaceContext.Provider>\r\n  );\r\n}\r\n\r\nKpiGroup.displayName = \"KpiGroup\";\r\n","\"use client\";\r\n\r\nimport { useContext } from \"react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { kpi } from \"./kpi.styles\";\r\nimport { KpiSurfaceContext } from \"./kpi-group\";\r\nimport type { KpiProps } from \"./kpi.types\";\r\n\r\n/**\r\n * Kpi — card de KPI composável: header (label + ícone por tone), valor +\r\n * delta, hint, slot livre (sparkline/chart) e footnote. Use dentro de\r\n * `KpiGroup` pra rows/grids; dentro de `KpiGroup divided` ele vira \"plain\".\r\n */\r\nexport function Kpi({\r\n  label,\r\n  value,\r\n  delta,\r\n  hint,\r\n  icon,\r\n  tone = \"neutral\",\r\n  size = \"md\",\r\n  footnote,\r\n  children,\r\n  surface,\r\n  className,\r\n}: KpiProps) {\r\n  const inherited = useContext(KpiSurfaceContext);\r\n  const s = kpi({ size, surface: surface ?? inherited, tone });\r\n\r\n  return (\r\n    <article className={cn(s.root(), className)}>\r\n      <header className={s.header()}>\r\n        <h3 className={s.label()}>{label}</h3>\r\n        {icon && (\r\n          <span className={s.iconBox()} aria-hidden>\r\n            {icon}\r\n          </span>\r\n        )}\r\n      </header>\r\n      <div className={s.main()}>\r\n        <div className={s.valueRow()}>\r\n          <span className={s.value()}>{value}</span>\r\n          {delta}\r\n        </div>\r\n        {hint && <span className={s.hint()}>{hint}</span>}\r\n      </div>\r\n      {children && <div className={s.chart()}>{children}</div>}\r\n      {footnote && <div className={s.footnote()}>{footnote}</div>}\r\n    </article>\r\n  );\r\n}\r\n\r\nKpi.displayName = \"Kpi\";\r\n","\"use client\";\r\n\r\nimport { TrendingUp } from \"lucide-react\";\r\nimport { cn } from \"@/lib/utils\";\r\nimport { Chip } from \"@/components/ui/Chip\";\r\nimport type { KpiDeltaProps } from \"./kpi.types\";\r\n\r\n/**\r\n * KpiDelta — pílula de variação (sobre o Chip). Tom semântico explícito\r\n * (success/danger/neutral) + seta opcional. O tom é decisão do consumidor —\r\n * \"subir\" nem sempre é positivo (ex.: tempo de espera).\r\n *\r\n * `signed` deriva tom+seta do sinal do `value` (\"-\" → danger/down; senão\r\n * success/up). `tone`/`direction` explícitos sempre vencem.\r\n */\r\nexport function KpiDelta({\r\n  value,\r\n  tone,\r\n  direction,\r\n  signed = false,\r\n  className,\r\n}: KpiDeltaProps) {\r\n  const isNegative =\r\n    signed && typeof value === \"string\" && value.trim().startsWith(\"-\");\r\n  const resolvedTone = tone ?? (signed ? (isNegative ? \"danger\" : \"success\") : \"success\");\r\n  const resolvedDirection = direction ?? (signed ? (isNegative ? \"down\" : \"up\") : undefined);\r\n\r\n  return (\r\n    <Chip\r\n      color={resolvedTone}\r\n      variant=\"soft\"\r\n      size=\"sm\"\r\n      shape=\"pill\"\r\n      className={className}\r\n    >\r\n      {resolvedDirection && (\r\n        <TrendingUp\r\n          className={cn(\"size-[12px]\", resolvedDirection === \"down\" && \"rotate-180\")}\r\n          aria-hidden\r\n        />\r\n      )}\r\n      {value}\r\n    </Chip>\r\n  );\r\n}\r\n\r\nKpiDelta.displayName = \"KpiDelta\";\r\n"],"names":["tv","createContext","jsx","cn","useContext","jsxs","Chip","TrendingUp"],"mappings":"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"}

package/dist-lib/chunks/{panel-CCPe1H70.mjs → panel-BxYvTvlN.mjs}

@@ -2,14 +2,14 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { forwardRef, createContext, useContext, useId, useRef, useState, useCallback, useEffect, useMemo, Fragment as Fragment$1, useImperativeHandle, memo } from "react";
 import { A as AlertDialog, c as AlertDialogContent, f as AlertDialogHeader, i as AlertDialogTitle, d as AlertDialogDescription, e as AlertDialogFooter, b as AlertDialogCancel, a as AlertDialogAction, T as Textarea, S as Select, D as SelectTrigger, E as SelectValue, u as SelectContent, w as SelectItem, l as Checkbox, Q as Switch, C as Calendar$1, R as getPaginationRange, P as Pagination, o as PaginationFirst, t as PaginationPrevious, m as PaginationContent, p as PaginationItem, n as PaginationEllipsis, r as PaginationLink, s as PaginationNext, q as PaginationLast, N as SheetTitle, I as SheetDescription, G as SheetClose, F as Sheet, O as SheetTrigger, L as SheetOverlay } from "./sheet-D1vQth7X.mjs";
-import { forwardRef, createContext, useContext, useId, useState, useRef, useCallback, useEffect, useMemo, Fragment as Fragment$1, useImperativeHandle, memo } from "react";
 import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, DragOverlay, useDroppable, useDraggable, closestCenter } from "@dnd-kit/core";
 import { useSortable, sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { t as tv, B as Button, c as cn, R as InputGroup, U as InputGroupInput, S as InputGroupAddon, V as InputGroupText, X as Popover, $ as PopoverTrigger, _ as PopoverContent, f as Command, j as CommandInput, l as CommandList, h as CommandEmpty, i as CommandGroup, k as CommandItem, y as DropdownMenu, Q as DropdownMenuTrigger, E as DropdownMenuContent, H as DropdownMenuLabel, L as DropdownMenuSeparator, G as DropdownMenuItem, D as Dialog, p as DialogContent, o as DialogClose, w as DialogTitle, q as DialogDescription, Y as PopoverAnchor } from "./avatar-DFWEwBKu.mjs";
 import { X, CheckCircle2, AlertCircle, AlertTriangle, Info, ChevronDown, Check, ArrowUp, ArrowDown, ArrowUpDown, Search, CircleX, MoreHorizontal, Filter, ChevronLeft, GripVertical, Pin, PinOff, Plus, Trash2, Eye, Users, ChevronRight, Columns, SlidersHorizontal, Minimize2, Maximize2, Type, Hash, Calendar, ToggleLeft, DollarSign, Percent, AtSign, Phone, Link, ExternalLink, User, Tag, Tags, CalendarClock, Inbox, SearchX, FilterX, PinIcon, EyeOff, Loader2, Copy, Rows3, LayoutGrid, Settings2, RefreshCw, Table as Table$1, FileText, List as List$1, Rows4, Rows2 } from "lucide-react";
-import { C as Chip, w as useMediaQuery } from "./useTheme-DCmzLBUR.mjs";
+import { C as Chip, w as useMediaQuery } from "./useTheme-CS_no6zP.mjs";
 import { I as Input } from "./input-CfmzMYtd.mjs";
 import { createPortal } from "react-dom";
 import { Draggable, Droppable, DragDropContext } from "@hello-pangea/dnd";
@@ -500,6 +500,7 @@ const FormFieldTextarea = forwardRef(
   )
 );
 FormFieldTextarea.displayName = "FormFieldTextarea";
+const SENTINELA_VAZIO = "__ds_select_vazio__";
 function FormFieldSelect({
   label,
   required,
@@ -519,6 +520,13 @@ function FormFieldSelect({
   triggerClassName,
   contentClassName
 }) {
+  const abertoRef = useRef(false);
+  const valorEhOrfao = value !== void 0 && value !== "" && !options.some((opt) => opt.value === value);
+  const paraRadix = (v) => v === "" ? SENTINELA_VAZIO : v;
+  const aoMudarValor = (proximo) => {
+    if (proximo === "" && valorEhOrfao && !abertoRef.current) return;
+    onValueChange?.(proximo === SENTINELA_VAZIO ? "" : proximo);
+  };
   return /* @__PURE__ */ jsx(
     FormField,
     {
@@ -535,9 +543,12 @@ function FormFieldSelect({
       children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsxs(
         Select,
         {
-          value,
-          defaultValue,
-          onValueChange,
+          value: paraRadix(value),
+          defaultValue: paraRadix(defaultValue),
+          onValueChange: aoMudarValor,
+          onOpenChange: (aberto) => {
+            abertoRef.current = aberto;
+          },
           disabled,
           children: [
             /* @__PURE__ */ jsx(
@@ -552,7 +563,7 @@ function FormFieldSelect({
             /* @__PURE__ */ jsx(SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsx(
               SelectItem,
               {
-                value: opt.value,
+                value: paraRadix(opt.value),
                 disabled: opt.disabled,
                 children: opt.label
               },
@@ -9617,7 +9628,16 @@ function useGrabToScroll(scrollContainerRef, enabled, thresholdPx = 6) {
     ].join(",");
     const prevCursor = scroller.style.cursor;
     const prevUserSelect = scroller.style.userSelect;
-    scroller.style.cursor = "grab";
+    const syncCursor = () => {
+      const rolavel = scroller.scrollWidth > scroller.clientWidth;
+      scroller.style.cursor = rolavel ? "grab" : prevCursor;
+    };
+    syncCursor();
+    const ro = typeof ResizeObserver === "function" ? new ResizeObserver(syncCursor) : null;
+    if (ro) {
+      ro.observe(scroller);
+      if (scroller.firstElementChild) ro.observe(scroller.firstElementChild);
+    }
     let isPointerDown = false;
     let isDragging = false;
     let activePointerId = null;
@@ -9669,7 +9689,7 @@ function useGrabToScroll(scrollContainerRef, enabled, thresholdPx = 6) {
       isPointerDown = false;
       isDragging = false;
       activePointerId = null;
-      scroller.style.cursor = "grab";
+      syncCursor();
       scroller.style.userSelect = prevUserSelect;
       try {
         scroller.releasePointerCapture(event.pointerId);
@@ -9687,6 +9707,7 @@ function useGrabToScroll(scrollContainerRef, enabled, thresholdPx = 6) {
       scroller.removeEventListener("pointermove", onPointerMove);
       scroller.removeEventListener("pointerup", finish);
       scroller.removeEventListener("pointercancel", finish);
+      ro?.disconnect();
       scroller.style.cursor = prevCursor;
       scroller.style.userSelect = prevUserSelect;
     };
@@ -13044,4 +13065,4 @@ export {
   DataTableActionsCell as y,
   DataTableEditCell as z
 };
-//# sourceMappingURL=panel-CCPe1H70.mjs.map
+//# sourceMappingURL=panel-BxYvTvlN.mjs.map