@snksergio/design-system 0.35.0 → 0.36.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-lib/chunks/{input-CizzMZ20.cjs → input-CLZuK61s.cjs} +2 -2
- package/dist-lib/chunks/{input-CizzMZ20.cjs.map → input-CLZuK61s.cjs.map} +1 -1
- package/dist-lib/chunks/{input-Cym0k4ZI.mjs → input-Di_5Ir5M.mjs} +2 -2
- package/dist-lib/chunks/{input-Cym0k4ZI.mjs.map → input-Di_5Ir5M.mjs.map} +1 -1
- package/dist-lib/chunks/{kpi-delta-DrSJPMCY.cjs → kpi-delta--KmkXYn9.cjs} +2 -2
- package/dist-lib/chunks/{kpi-delta-DrSJPMCY.cjs.map → kpi-delta--KmkXYn9.cjs.map} +1 -1
- package/dist-lib/chunks/{kpi-delta-FhfuIg27.mjs → kpi-delta-CMdiNoMu.mjs} +2 -2
- package/dist-lib/chunks/{kpi-delta-FhfuIg27.mjs.map → kpi-delta-CMdiNoMu.mjs.map} +1 -1
- package/dist-lib/chunks/{page-header-BMzUloFi.cjs → page-header-HWma4AzM.cjs} +2 -2
- package/dist-lib/chunks/{page-header-BMzUloFi.cjs.map → page-header-HWma4AzM.cjs.map} +1 -1
- package/dist-lib/chunks/{page-header-Buh6YlQM.mjs → page-header-gYXNGHv-.mjs} +2 -2
- package/dist-lib/chunks/{page-header-Buh6YlQM.mjs.map → page-header-gYXNGHv-.mjs.map} +1 -1
- package/dist-lib/chunks/{panel-Cdl0GPVE.mjs → panel-BCGlqoEk.mjs} +3 -3
- package/dist-lib/chunks/{panel-Cdl0GPVE.mjs.map → panel-BCGlqoEk.mjs.map} +1 -1
- package/dist-lib/chunks/{panel-DlyaLunw.cjs → panel-Cq9UQki6.cjs} +3 -3
- package/dist-lib/chunks/{panel-DlyaLunw.cjs.map → panel-Cq9UQki6.cjs.map} +1 -1
- package/dist-lib/chunks/{useTheme-DF2xbSdI.mjs → useTheme-D-405m16.mjs} +7 -2
- package/dist-lib/chunks/useTheme-D-405m16.mjs.map +1 -0
- package/dist-lib/chunks/{useTheme-D4alxxGV.cjs → useTheme-DFAlP_ab.cjs} +7 -2
- package/dist-lib/chunks/useTheme-DFAlP_ab.cjs.map +1 -0
- package/dist-lib/index.cjs +5 -5
- package/dist-lib/index.mjs +8 -8
- package/dist-lib/preview/chat.cjs +2 -2
- package/dist-lib/preview/chat.mjs +2 -2
- package/dist-lib/preview/clientes.cjs +4 -4
- package/dist-lib/preview/clientes.mjs +4 -4
- package/dist-lib/preview/dashboard.cjs +3 -3
- package/dist-lib/preview/dashboard.mjs +3 -3
- package/dist-lib/src/components/shadcn/command.d.ts.map +1 -1
- package/dist-lib/theme/brand-blue.css +110 -110
- package/dist-lib/theme/brand-green.css +110 -110
- package/dist-lib/theme/brand-pay.css +189 -189
- package/dist-lib/theme/brand-vibrant.css +148 -148
- package/dist-lib/theme.css +10 -6
- package/dist-lib/tokens/brands/blue/semantic/color-dark.d.ts +4 -0
- package/dist-lib/tokens/brands/blue/semantic/color-dark.d.ts.map +1 -1
- package/dist-lib/tokens/brands/blue/semantic/color-light.d.ts +4 -0
- package/dist-lib/tokens/brands/blue/semantic/color-light.d.ts.map +1 -1
- package/dist-lib/tokens/brands/default/semantic/color-dark.d.ts +4 -0
- package/dist-lib/tokens/brands/default/semantic/color-dark.d.ts.map +1 -1
- package/dist-lib/tokens/brands/default/semantic/color-light.d.ts +4 -0
- package/dist-lib/tokens/brands/default/semantic/color-light.d.ts.map +1 -1
- package/dist-lib/tokens/brands/green/semantic/color-dark.d.ts +4 -0
- package/dist-lib/tokens/brands/green/semantic/color-dark.d.ts.map +1 -1
- package/dist-lib/tokens/brands/green/semantic/color-light.d.ts +4 -0
- package/dist-lib/tokens/brands/green/semantic/color-light.d.ts.map +1 -1
- package/dist-lib/tokens/brands/pay/semantic/color-dark.d.ts +4 -0
- package/dist-lib/tokens/brands/pay/semantic/color-dark.d.ts.map +1 -1
- package/dist-lib/tokens/brands/pay/semantic/color-light.d.ts +4 -0
- package/dist-lib/tokens/brands/pay/semantic/color-light.d.ts.map +1 -1
- package/dist-lib/tokens/brands/vibrant/semantic/color-dark.d.ts +4 -0
- package/dist-lib/tokens/brands/vibrant/semantic/color-dark.d.ts.map +1 -1
- package/dist-lib/tokens/brands/vibrant/semantic/color-light.d.ts +4 -0
- package/dist-lib/tokens/brands/vibrant/semantic/color-light.d.ts.map +1 -1
- package/dist-lib/tokens.cjs +12 -0
- package/dist-lib/tokens.cjs.map +1 -1
- package/dist-lib/tokens.mjs +12 -0
- package/dist-lib/tokens.mjs.map +1 -1
- package/package.json +1 -1
- package/dist-lib/chunks/useTheme-D4alxxGV.cjs.map +0 -1
- package/dist-lib/chunks/useTheme-DF2xbSdI.mjs.map +0 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
const jsxRuntime = require("react/jsx-runtime");
|
|
3
3
|
const React = require("react");
|
|
4
4
|
const classVarianceAuthority = require("class-variance-authority");
|
|
5
|
-
const useTheme = require("./useTheme-
|
|
5
|
+
const useTheme = require("./useTheme-DFAlP_ab.cjs");
|
|
6
6
|
function _interopNamespaceDefault(e) {
|
|
7
7
|
const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
|
|
8
8
|
if (e) {
|
|
@@ -89,4 +89,4 @@ const Input = React__namespace.forwardRef(
|
|
|
89
89
|
Input.displayName = "Input";
|
|
90
90
|
exports.Input = Input;
|
|
91
91
|
exports.inputVariants = inputVariants;
|
|
92
|
-
//# sourceMappingURL=input-
|
|
92
|
+
//# sourceMappingURL=input-CLZuK61s.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-
|
|
1
|
+
{"version":3,"file":"input-CLZuK61s.cjs","sources":["../../src/components/shadcn/input.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n/**\r\n * Input — alinhado com `.tbl-form-input` do design-and-table-v2.\r\n *\r\n * Specs base (md, default):\r\n * - h: 40px (form-lg), px: 12px (pad-xl), radius: 10px (radius-lg)\r\n * - bg-input (light) / dark:bg-bg-muted\r\n * - border: 1px solid border-input\r\n * - font: 13px, color fg-default, placeholder fg-muted\r\n * - focus: border + shadow-sh-ring por state\r\n *\r\n * Pra inputs com prefixo/sufixo/ícone/botão dentro → use `<InputGroup>`.\r\n * Este componente é puro (só o <input>) — sem wrapper, sem adornments inline.\r\n */\r\n\r\nexport type InputState = \"default\" | \"error\" | \"warning\" | \"success\";\r\n\r\nconst inputVariants = cva(\r\n [\r\n \"flex w-full\",\r\n \"bg-bg-input dark:bg-bg-muted\",\r\n \"hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover\",\r\n \"border border-border-input rounded-radius-lg\",\r\n \"px-pad-xl\",\r\n \"text-body-sm font-normal text-fg-default placeholder:text-fg-muted placeholder:opacity-70\",\r\n \"transition-[border-color,box-shadow,background-color] outline-none\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-bg-input dark:disabled:hover:bg-bg-muted\",\r\n \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-fg-default\",\r\n // type=file — escopado no atributo de propósito, pra não mexer em nenhum\r\n // outro input (este é primitivo compartilhado).\r\n //\r\n // · `block` + `align-content:center`: o conteúdo do file input (botão +\r\n // nome do arquivo) vive no SHADOW DOM, então `align-items` NÃO o move —\r\n // medido: com `items-center` o computed vira `center` e o pixel não sai\r\n // do lugar. O que centra é `align-content` num container de BLOCO\r\n // (CSS Align L3), que aplica ao conteúdo em fluxo. Testados e reprovados:\r\n // `items-center`, `align-content` sobre flex (com e sem wrap), `grid` +\r\n // `place-content`, e `::file-selector-button { margin-block: auto }`.\r\n // Preferido a `line-height` = altura da caixa, que centraria também mas\r\n // exigiria um px mágico por size (28/32/36/40) desacoplado dos tokens de\r\n // `form-*`. Piso: Chrome 123+ / Safari 17.6+ / Firefox 125+; abaixo disso\r\n // degrada pro alinhamento antigo, sem quebrar nada.\r\n // · `text-fg-muted`: o \"Nenhum arquivo escolhido\" vinha em fg-default\r\n // (0.98), destoando de `placeholder:text-fg-muted` de todo input do DS.\r\n // O CSS não distingue vazio de preenchido num file input, então o nome do\r\n // arquivo escolhido também fica muted — trade-off registrado no gotcha de\r\n // `shadcn/USAGE.md`; pra UX de upload de verdade use `FileUploadField`.\r\n \"[&[type=file]]:block [&[type=file]]:[align-content:center] [&[type=file]]:text-fg-muted\",\r\n ],\r\n {\r\n variants: {\r\n size: {\r\n xxs: \"min-h-form-xs rounded-radius-md\",\r\n xs: \"min-h-form-sm rounded-radius-md\",\r\n sm: \"min-h-form-md\",\r\n md: \"min-h-form-lg\",\r\n },\r\n state: {\r\n default: \"focus-visible:border-border-brand focus-visible:shadow-sh-ring\",\r\n error: \"border-border-danger-muted focus-visible:border-border-danger-muted focus-visible:shadow-sh-ring-danger\",\r\n warning: \"border-border-warning-muted focus-visible:border-border-warning-muted focus-visible:shadow-sh-ring-warning\",\r\n success: \"border-border-success-muted focus-visible:border-border-success-muted focus-visible:shadow-sh-ring-success\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n state: \"default\",\r\n },\r\n },\r\n);\r\n\r\nexport type InputVariantProps = VariantProps<typeof inputVariants>;\r\n\r\nexport interface InputProps\r\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\r\n InputVariantProps {}\r\n\r\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n ({ className, type, size, state, ...props }, ref) => {\r\n return (\r\n <input\r\n type={type}\r\n ref={ref}\r\n className={cn(inputVariants({ size, state }), className)}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\nInput.displayName = \"Input\";\r\n\r\nexport { Input, inputVariants };\r\n"],"names":["cva","React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAoBA,MAAM,gBAAgBA,uBAAAA;AAAAA,EACpB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,IAAK;AAAA,QACL,IAAK;AAAA,QACL,IAAK;AAAA,MAAA;AAAA,MAEP,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAQA,MAAM,QAAQC,iBAAM;AAAA,EAClB,CAAC,EAAE,WAAW,MAAM,MAAM,OAAO,GAAG,MAAA,GAAS,QAAQ;AACnD,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAWC,SAAAA,GAAG,cAAc,EAAE,MAAM,MAAA,CAAO,GAAG,SAAS;AAAA,QACtD,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,MAAM,cAAc;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import * as React from "react";
|
|
3
3
|
import { cva } from "class-variance-authority";
|
|
4
|
-
import { c as cn } from "./useTheme-
|
|
4
|
+
import { c as cn } from "./useTheme-D-405m16.mjs";
|
|
5
5
|
const inputVariants = cva(
|
|
6
6
|
[
|
|
7
7
|
"flex w-full",
|
|
@@ -73,4 +73,4 @@ export {
|
|
|
73
73
|
Input as I,
|
|
74
74
|
inputVariants as i
|
|
75
75
|
};
|
|
76
|
-
//# sourceMappingURL=input-
|
|
76
|
+
//# sourceMappingURL=input-Di_5Ir5M.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input-
|
|
1
|
+
{"version":3,"file":"input-Di_5Ir5M.mjs","sources":["../../src/components/shadcn/input.tsx"],"sourcesContent":["import * as React from \"react\";\r\nimport { cva, type VariantProps } from \"class-variance-authority\";\r\nimport { cn } from \"@/lib/utils\";\r\n\r\n/**\r\n * Input — alinhado com `.tbl-form-input` do design-and-table-v2.\r\n *\r\n * Specs base (md, default):\r\n * - h: 40px (form-lg), px: 12px (pad-xl), radius: 10px (radius-lg)\r\n * - bg-input (light) / dark:bg-bg-muted\r\n * - border: 1px solid border-input\r\n * - font: 13px, color fg-default, placeholder fg-muted\r\n * - focus: border + shadow-sh-ring por state\r\n *\r\n * Pra inputs com prefixo/sufixo/ícone/botão dentro → use `<InputGroup>`.\r\n * Este componente é puro (só o <input>) — sem wrapper, sem adornments inline.\r\n */\r\n\r\nexport type InputState = \"default\" | \"error\" | \"warning\" | \"success\";\r\n\r\nconst inputVariants = cva(\r\n [\r\n \"flex w-full\",\r\n \"bg-bg-input dark:bg-bg-muted\",\r\n \"hover:bg-bg-input-hover dark:hover:bg-bg-muted-hover\",\r\n \"border border-border-input rounded-radius-lg\",\r\n \"px-pad-xl\",\r\n \"text-body-sm font-normal text-fg-default placeholder:text-fg-muted placeholder:opacity-70\",\r\n \"transition-[border-color,box-shadow,background-color] outline-none\",\r\n \"disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:bg-bg-input dark:disabled:hover:bg-bg-muted\",\r\n \"file:inline-flex file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-fg-default\",\r\n // type=file — escopado no atributo de propósito, pra não mexer em nenhum\r\n // outro input (este é primitivo compartilhado).\r\n //\r\n // · `block` + `align-content:center`: o conteúdo do file input (botão +\r\n // nome do arquivo) vive no SHADOW DOM, então `align-items` NÃO o move —\r\n // medido: com `items-center` o computed vira `center` e o pixel não sai\r\n // do lugar. O que centra é `align-content` num container de BLOCO\r\n // (CSS Align L3), que aplica ao conteúdo em fluxo. Testados e reprovados:\r\n // `items-center`, `align-content` sobre flex (com e sem wrap), `grid` +\r\n // `place-content`, e `::file-selector-button { margin-block: auto }`.\r\n // Preferido a `line-height` = altura da caixa, que centraria também mas\r\n // exigiria um px mágico por size (28/32/36/40) desacoplado dos tokens de\r\n // `form-*`. Piso: Chrome 123+ / Safari 17.6+ / Firefox 125+; abaixo disso\r\n // degrada pro alinhamento antigo, sem quebrar nada.\r\n // · `text-fg-muted`: o \"Nenhum arquivo escolhido\" vinha em fg-default\r\n // (0.98), destoando de `placeholder:text-fg-muted` de todo input do DS.\r\n // O CSS não distingue vazio de preenchido num file input, então o nome do\r\n // arquivo escolhido também fica muted — trade-off registrado no gotcha de\r\n // `shadcn/USAGE.md`; pra UX de upload de verdade use `FileUploadField`.\r\n \"[&[type=file]]:block [&[type=file]]:[align-content:center] [&[type=file]]:text-fg-muted\",\r\n ],\r\n {\r\n variants: {\r\n size: {\r\n xxs: \"min-h-form-xs rounded-radius-md\",\r\n xs: \"min-h-form-sm rounded-radius-md\",\r\n sm: \"min-h-form-md\",\r\n md: \"min-h-form-lg\",\r\n },\r\n state: {\r\n default: \"focus-visible:border-border-brand focus-visible:shadow-sh-ring\",\r\n error: \"border-border-danger-muted focus-visible:border-border-danger-muted focus-visible:shadow-sh-ring-danger\",\r\n warning: \"border-border-warning-muted focus-visible:border-border-warning-muted focus-visible:shadow-sh-ring-warning\",\r\n success: \"border-border-success-muted focus-visible:border-border-success-muted focus-visible:shadow-sh-ring-success\",\r\n },\r\n },\r\n defaultVariants: {\r\n size: \"md\",\r\n state: \"default\",\r\n },\r\n },\r\n);\r\n\r\nexport type InputVariantProps = VariantProps<typeof inputVariants>;\r\n\r\nexport interface InputProps\r\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\">,\r\n InputVariantProps {}\r\n\r\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(\r\n ({ className, type, size, state, ...props }, ref) => {\r\n return (\r\n <input\r\n type={type}\r\n ref={ref}\r\n className={cn(inputVariants({ size, state }), className)}\r\n {...props}\r\n />\r\n );\r\n },\r\n);\r\nInput.displayName = \"Input\";\r\n\r\nexport { Input, inputVariants };\r\n"],"names":[],"mappings":";;;;AAoBA,MAAM,gBAAgB;AAAA,EACpB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAoBA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,KAAK;AAAA,QACL,IAAK;AAAA,QACL,IAAK;AAAA,QACL,IAAK;AAAA,MAAA;AAAA,MAEP,OAAO;AAAA,QACL,SAAS;AAAA,QACT,OAAS;AAAA,QACT,SAAS;AAAA,QACT,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ;AAQA,MAAM,QAAQ,MAAM;AAAA,EAClB,CAAC,EAAE,WAAW,MAAM,MAAM,OAAO,GAAG,MAAA,GAAS,QAAQ;AACnD,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,WAAW,GAAG,cAAc,EAAE,MAAM,MAAA,CAAO,GAAG,SAAS;AAAA,QACtD,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACA,MAAM,cAAc;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const jsxRuntime = require("react/jsx-runtime");
|
|
3
3
|
const React = require("react");
|
|
4
|
-
const useTheme = require("./useTheme-
|
|
4
|
+
const useTheme = require("./useTheme-DFAlP_ab.cjs");
|
|
5
5
|
const lucideReact = require("lucide-react");
|
|
6
6
|
const kpi = useTheme.tv({
|
|
7
7
|
slots: {
|
|
@@ -145,4 +145,4 @@ KpiDelta.displayName = "KpiDelta";
|
|
|
145
145
|
exports.Kpi = Kpi;
|
|
146
146
|
exports.KpiDelta = KpiDelta;
|
|
147
147
|
exports.KpiGroup = KpiGroup;
|
|
148
|
-
//# sourceMappingURL=kpi-delta
|
|
148
|
+
//# sourceMappingURL=kpi-delta--KmkXYn9.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kpi-delta-DrSJPMCY.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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"}
|
|
1
|
+
{"version":3,"file":"kpi-delta--KmkXYn9.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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createContext, useContext } from "react";
|
|
3
|
-
import { t as tv, c as cn, C as Chip } from "./useTheme-
|
|
3
|
+
import { t as tv, c as cn, C as Chip } from "./useTheme-D-405m16.mjs";
|
|
4
4
|
import { TrendingUp } from "lucide-react";
|
|
5
5
|
const kpi = tv({
|
|
6
6
|
slots: {
|
|
@@ -146,4 +146,4 @@ export {
|
|
|
146
146
|
Kpi as a,
|
|
147
147
|
KpiDelta as b
|
|
148
148
|
};
|
|
149
|
-
//# sourceMappingURL=kpi-delta-
|
|
149
|
+
//# sourceMappingURL=kpi-delta-CMdiNoMu.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kpi-delta-FhfuIg27.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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"}
|
|
1
|
+
{"version":3,"file":"kpi-delta-CMdiNoMu.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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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
const jsxRuntime = require("react/jsx-runtime");
|
|
3
|
-
const useTheme = require("./useTheme-
|
|
3
|
+
const useTheme = require("./useTheme-DFAlP_ab.cjs");
|
|
4
4
|
const pageHeaderStyles = useTheme.tv({
|
|
5
5
|
slots: {
|
|
6
6
|
root: "shrink-0 flex flex-col gap-gp-md",
|
|
@@ -74,4 +74,4 @@ function PageHeader({
|
|
|
74
74
|
PageHeader.displayName = "PageHeader";
|
|
75
75
|
exports.PageHeader = PageHeader;
|
|
76
76
|
exports.pageHeaderStyles = pageHeaderStyles;
|
|
77
|
-
//# sourceMappingURL=page-header-
|
|
77
|
+
//# sourceMappingURL=page-header-HWma4AzM.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header-
|
|
1
|
+
{"version":3,"file":"page-header-HWma4AzM.cjs","sources":["../../src/components/ui/PageHeader/page-header.styles.ts","../../src/components/ui/PageHeader/page-header.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/**\r\n * PageHeader styles — bloco de título de página colocado dentro do body\r\n * do `<AppShell>`.\r\n *\r\n * Layout desktop:\r\n * ┌──────────────────────────────────────────────────────────┐\r\n * │ [title] [badge] [action1] [action2] [CTA] │\r\n * │ description │\r\n * ├──────────────────────────────────────────────────────────┤\r\n * │ {children — ex: <Tabs />} │\r\n * └──────────────────────────────────────────────────────────┘\r\n *\r\n * Mobile:\r\n * - Text section sai (hideTextOnMobile, default true)\r\n * - Actions ocupam toda a largura; último botão vira fluid (CTA primary)\r\n */\r\nexport const pageHeaderStyles = tv({\r\n slots: {\r\n root: \"shrink-0 flex flex-col gap-gp-md\",\r\n topRow: \"flex items-center justify-between gap-gp-2xl\",\r\n textCol: \"flex flex-col gap-gp-xs min-w-0 flex-1\",\r\n titleRow: \"flex items-center gap-gp-md\",\r\n title: \"m-0 text-title-lg font-bold tracking-[-0.01em] text-fg-default\",\r\n description: [\r\n \"m-0 text-body-md text-fg-subtle leading-[1.5]\",\r\n \"whitespace-nowrap overflow-hidden text-ellipsis\",\r\n ],\r\n actionsRow: \"flex items-center gap-gp-sm shrink-0\",\r\n // mt-gp-xl: +20px somados ao gap-gp-md (12px) do root = ~32px de respiro\r\n // entre o título/descrição e o slot de conteúdo (tabs/filtros).\r\n extraRow: \"w-full mt-gp-xl\",\r\n },\r\n variants: {\r\n hideTextOnMobile: {\r\n true: { textCol: \"max-md:hidden\" },\r\n false: {},\r\n },\r\n /**\r\n * Mobile: actions ocupa o espaço (text hidden) + último filho vira fluid.\r\n * Off = mantém actions square e shrink-0 (mesmo comportamento desktop).\r\n */\r\n mobileFluid: {\r\n true: {\r\n actionsRow: [\r\n \"max-md:shrink max-md:flex-1 max-md:justify-end\",\r\n \"max-md:[&>:last-child]:flex-1\",\r\n ],\r\n },\r\n false: {},\r\n },\r\n },\r\n defaultVariants: {\r\n hideTextOnMobile: true,\r\n mobileFluid: true,\r\n },\r\n});\r\n","import { cn } from \"@/lib/utils\";\nimport { pageHeaderStyles } from \"./page-header.styles\";\nimport type { PageHeaderProps } from \"./page-header.types\";\n\n/**\n * PageHeader — bloco de título reutilizável colocado dentro do body do\n * `<AppShell>`. Cobre o caso comum:\n *\n * - Título (h1) + descrição (sub) + badge (chip ao lado)\n * - Slot de ações à direita (botões / dropdowns)\n * - Slot livre abaixo pra tabs, filtros ou qualquer conteúdo extra\n *\n * Mobile-ready por default:\n * - Title/description/badge somem em viewports pequenas\n * (Header global do AppShell já mostra title/breadcrumb)\n * - O último botão do `actions` vira fluid (CTA full-width)\n *\n * @example\n * ```tsx\n * <PageHeader\n * title=\"Clientes\"\n * description=\"Gerencie sua base de clientes.\"\n * badge={<Chip color=\"primary\" variant=\"soft\">87 registros</Chip>}\n * actions={\n * <>\n * <Button variant=\"outline\" size=\"icon-md\"><MoreHorizontal /></Button>\n * <Button variant=\"filled\" color=\"primary\">Novo cliente</Button>\n * </>\n * }\n * />\n * ```\n *\n * @example com tabs abaixo (slot children):\n * ```tsx\n * <PageHeader title=\"Configurações\" actions={<Button>Salvar</Button>}>\n * <Tabs ... />\n * </PageHeader>\n * ```\n */\nexport function PageHeader({\n title,\n description,\n badge,\n actions,\n children,\n hideTextOnMobile = true,\n fluidPrimaryOnMobile = true,\n className,\n}: PageHeaderProps) {\n const s = pageHeaderStyles({\n hideTextOnMobile,\n mobileFluid: fluidPrimaryOnMobile,\n });\n\n const hasText = !!(title || description || badge);\n const hasTopRow = hasText || !!actions;\n\n return (\n <header className={cn(s.root(), className)}>\n {hasTopRow && (\n <div className={s.topRow()}>\n {hasText && (\n <div className={s.textCol()}>\n {(title || badge) && (\n <div className={s.titleRow()}>\n {title && <h1 className={s.title()}>{title}</h1>}\n {badge}\n </div>\n )}\n {description && <p className={s.description()}>{description}</p>}\n </div>\n )}\n {actions && <div className={s.actionsRow()}>{actions}</div>}\n </div>\n )}\n {children && <div className={s.extraRow()}>{children}</div>}\n </header>\n );\n}\n\nPageHeader.displayName = \"PageHeader\";\n"],"names":["tv","jsxs","cn","jsx"],"mappings":";;;AAkBO,MAAM,mBAAmBA,SAAAA,GAAG;AAAA,EACjC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,MACX;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,YAAY;AAAA;AAAA;AAAA,IAGZ,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChB,MAAM,EAAE,SAAS,gBAAA;AAAA,MACjB,OAAO,CAAA;AAAA,IAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,YAAY;AAAA,UACV;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,OAAO,CAAA;AAAA,IAAC;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,kBAAkB;AAAA,IAClB,aAAa;AAAA,EAAA;AAEjB,CAAC;AClBM,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB;AACF,GAAoB;AAClB,QAAM,IAAI,iBAAiB;AAAA,IACzB;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,QAAM,UAAU,CAAC,EAAE,SAAS,eAAe;AAC3C,QAAM,YAAY,WAAW,CAAC,CAAC;AAE/B,SACEC,2BAAAA,KAAC,YAAO,WAAWC,SAAAA,GAAG,EAAE,KAAA,GAAQ,SAAS,GACtC,UAAA;AAAA,IAAA,aACCD,2BAAAA,KAAC,OAAA,EAAI,WAAW,EAAE,UACf,UAAA;AAAA,MAAA,WACCA,2BAAAA,KAAC,OAAA,EAAI,WAAW,EAAE,WACd,UAAA;AAAA,SAAA,SAAS,UACTA,2BAAAA,KAAC,OAAA,EAAI,WAAW,EAAE,YACf,UAAA;AAAA,UAAA,wCAAU,MAAA,EAAG,WAAW,EAAE,MAAA,GAAU,UAAA,OAAM;AAAA,UAC1C;AAAA,QAAA,GACH;AAAA,QAED,eAAeE,2BAAAA,IAAC,KAAA,EAAE,WAAW,EAAE,YAAA,GAAgB,UAAA,YAAA,CAAY;AAAA,MAAA,GAC9D;AAAA,MAED,WAAWA,2BAAAA,IAAC,OAAA,EAAI,WAAW,EAAE,WAAA,GAAe,UAAA,QAAA,CAAQ;AAAA,IAAA,GACvD;AAAA,IAED,YAAYA,2BAAAA,IAAC,OAAA,EAAI,WAAW,EAAE,SAAA,GAAa,SAAA,CAAS;AAAA,EAAA,GACvD;AAEJ;AAEA,WAAW,cAAc;;;"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { t as tv, c as cn } from "./useTheme-
|
|
2
|
+
import { t as tv, c as cn } from "./useTheme-D-405m16.mjs";
|
|
3
3
|
const pageHeaderStyles = tv({
|
|
4
4
|
slots: {
|
|
5
5
|
root: "shrink-0 flex flex-col gap-gp-md",
|
|
@@ -75,4 +75,4 @@ export {
|
|
|
75
75
|
PageHeader as P,
|
|
76
76
|
pageHeaderStyles as p
|
|
77
77
|
};
|
|
78
|
-
//# sourceMappingURL=page-header-
|
|
78
|
+
//# sourceMappingURL=page-header-gYXNGHv-.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header-
|
|
1
|
+
{"version":3,"file":"page-header-gYXNGHv-.mjs","sources":["../../src/components/ui/PageHeader/page-header.styles.ts","../../src/components/ui/PageHeader/page-header.tsx"],"sourcesContent":["import { tv } from \"@/utils/tv\";\r\n\r\n/**\r\n * PageHeader styles — bloco de título de página colocado dentro do body\r\n * do `<AppShell>`.\r\n *\r\n * Layout desktop:\r\n * ┌──────────────────────────────────────────────────────────┐\r\n * │ [title] [badge] [action1] [action2] [CTA] │\r\n * │ description │\r\n * ├──────────────────────────────────────────────────────────┤\r\n * │ {children — ex: <Tabs />} │\r\n * └──────────────────────────────────────────────────────────┘\r\n *\r\n * Mobile:\r\n * - Text section sai (hideTextOnMobile, default true)\r\n * - Actions ocupam toda a largura; último botão vira fluid (CTA primary)\r\n */\r\nexport const pageHeaderStyles = tv({\r\n slots: {\r\n root: \"shrink-0 flex flex-col gap-gp-md\",\r\n topRow: \"flex items-center justify-between gap-gp-2xl\",\r\n textCol: \"flex flex-col gap-gp-xs min-w-0 flex-1\",\r\n titleRow: \"flex items-center gap-gp-md\",\r\n title: \"m-0 text-title-lg font-bold tracking-[-0.01em] text-fg-default\",\r\n description: [\r\n \"m-0 text-body-md text-fg-subtle leading-[1.5]\",\r\n \"whitespace-nowrap overflow-hidden text-ellipsis\",\r\n ],\r\n actionsRow: \"flex items-center gap-gp-sm shrink-0\",\r\n // mt-gp-xl: +20px somados ao gap-gp-md (12px) do root = ~32px de respiro\r\n // entre o título/descrição e o slot de conteúdo (tabs/filtros).\r\n extraRow: \"w-full mt-gp-xl\",\r\n },\r\n variants: {\r\n hideTextOnMobile: {\r\n true: { textCol: \"max-md:hidden\" },\r\n false: {},\r\n },\r\n /**\r\n * Mobile: actions ocupa o espaço (text hidden) + último filho vira fluid.\r\n * Off = mantém actions square e shrink-0 (mesmo comportamento desktop).\r\n */\r\n mobileFluid: {\r\n true: {\r\n actionsRow: [\r\n \"max-md:shrink max-md:flex-1 max-md:justify-end\",\r\n \"max-md:[&>:last-child]:flex-1\",\r\n ],\r\n },\r\n false: {},\r\n },\r\n },\r\n defaultVariants: {\r\n hideTextOnMobile: true,\r\n mobileFluid: true,\r\n },\r\n});\r\n","import { cn } from \"@/lib/utils\";\nimport { pageHeaderStyles } from \"./page-header.styles\";\nimport type { PageHeaderProps } from \"./page-header.types\";\n\n/**\n * PageHeader — bloco de título reutilizável colocado dentro do body do\n * `<AppShell>`. Cobre o caso comum:\n *\n * - Título (h1) + descrição (sub) + badge (chip ao lado)\n * - Slot de ações à direita (botões / dropdowns)\n * - Slot livre abaixo pra tabs, filtros ou qualquer conteúdo extra\n *\n * Mobile-ready por default:\n * - Title/description/badge somem em viewports pequenas\n * (Header global do AppShell já mostra title/breadcrumb)\n * - O último botão do `actions` vira fluid (CTA full-width)\n *\n * @example\n * ```tsx\n * <PageHeader\n * title=\"Clientes\"\n * description=\"Gerencie sua base de clientes.\"\n * badge={<Chip color=\"primary\" variant=\"soft\">87 registros</Chip>}\n * actions={\n * <>\n * <Button variant=\"outline\" size=\"icon-md\"><MoreHorizontal /></Button>\n * <Button variant=\"filled\" color=\"primary\">Novo cliente</Button>\n * </>\n * }\n * />\n * ```\n *\n * @example com tabs abaixo (slot children):\n * ```tsx\n * <PageHeader title=\"Configurações\" actions={<Button>Salvar</Button>}>\n * <Tabs ... />\n * </PageHeader>\n * ```\n */\nexport function PageHeader({\n title,\n description,\n badge,\n actions,\n children,\n hideTextOnMobile = true,\n fluidPrimaryOnMobile = true,\n className,\n}: PageHeaderProps) {\n const s = pageHeaderStyles({\n hideTextOnMobile,\n mobileFluid: fluidPrimaryOnMobile,\n });\n\n const hasText = !!(title || description || badge);\n const hasTopRow = hasText || !!actions;\n\n return (\n <header className={cn(s.root(), className)}>\n {hasTopRow && (\n <div className={s.topRow()}>\n {hasText && (\n <div className={s.textCol()}>\n {(title || badge) && (\n <div className={s.titleRow()}>\n {title && <h1 className={s.title()}>{title}</h1>}\n {badge}\n </div>\n )}\n {description && <p className={s.description()}>{description}</p>}\n </div>\n )}\n {actions && <div className={s.actionsRow()}>{actions}</div>}\n </div>\n )}\n {children && <div className={s.extraRow()}>{children}</div>}\n </header>\n );\n}\n\nPageHeader.displayName = \"PageHeader\";\n"],"names":[],"mappings":";;AAkBO,MAAM,mBAAmB,GAAG;AAAA,EACjC,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,MACX;AAAA,MACA;AAAA,IAAA;AAAA,IAEF,YAAY;AAAA;AAAA;AAAA,IAGZ,UAAU;AAAA,EAAA;AAAA,EAEZ,UAAU;AAAA,IACR,kBAAkB;AAAA,MAChB,MAAM,EAAE,SAAS,gBAAA;AAAA,MACjB,OAAO,CAAA;AAAA,IAAC;AAAA;AAAA;AAAA;AAAA;AAAA,IAMV,aAAa;AAAA,MACX,MAAM;AAAA,QACJ,YAAY;AAAA,UACV;AAAA,UACA;AAAA,QAAA;AAAA,MACF;AAAA,MAEF,OAAO,CAAA;AAAA,IAAC;AAAA,EACV;AAAA,EAEF,iBAAiB;AAAA,IACf,kBAAkB;AAAA,IAClB,aAAa;AAAA,EAAA;AAEjB,CAAC;AClBM,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,mBAAmB;AAAA,EACnB,uBAAuB;AAAA,EACvB;AACF,GAAoB;AAClB,QAAM,IAAI,iBAAiB;AAAA,IACzB;AAAA,IACA,aAAa;AAAA,EAAA,CACd;AAED,QAAM,UAAU,CAAC,EAAE,SAAS,eAAe;AAC3C,QAAM,YAAY,WAAW,CAAC,CAAC;AAE/B,SACE,qBAAC,YAAO,WAAW,GAAG,EAAE,KAAA,GAAQ,SAAS,GACtC,UAAA;AAAA,IAAA,aACC,qBAAC,OAAA,EAAI,WAAW,EAAE,UACf,UAAA;AAAA,MAAA,WACC,qBAAC,OAAA,EAAI,WAAW,EAAE,WACd,UAAA;AAAA,SAAA,SAAS,UACT,qBAAC,OAAA,EAAI,WAAW,EAAE,YACf,UAAA;AAAA,UAAA,6BAAU,MAAA,EAAG,WAAW,EAAE,MAAA,GAAU,UAAA,OAAM;AAAA,UAC1C;AAAA,QAAA,GACH;AAAA,QAED,eAAe,oBAAC,KAAA,EAAE,WAAW,EAAE,YAAA,GAAgB,UAAA,YAAA,CAAY;AAAA,MAAA,GAC9D;AAAA,MAED,WAAW,oBAAC,OAAA,EAAI,WAAW,EAAE,WAAA,GAAe,UAAA,QAAA,CAAQ;AAAA,IAAA,GACvD;AAAA,IAED,YAAY,oBAAC,OAAA,EAAI,WAAW,EAAE,SAAA,GAAa,SAAA,CAAS;AAAA,EAAA,GACvD;AAEJ;AAEA,WAAW,cAAc;"}
|
|
@@ -7,11 +7,11 @@ import React__default, { forwardRef, createContext, useContext, useId, useState,
|
|
|
7
7
|
import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, DragOverlay, useDroppable, useDraggable, closestCenter } from "@dnd-kit/core";
|
|
8
8
|
import { useSortable, sortableKeyboardCoordinates, SortableContext, horizontalListSortingStrategy, arrayMove } from "@dnd-kit/sortable";
|
|
9
9
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
10
|
-
import { c as cn, t as tv, B as Button, M as InputGroup, Q as InputGroupInput, N as InputGroupAddon, R as InputGroupText, P as Popover, j as PopoverTrigger, k as PopoverContent, a9 as Command, v as CommandInput, w as CommandList, x as CommandEmpty, y as CommandGroup, z as CommandItem, D as DropdownMenu, f as DropdownMenuTrigger, g as DropdownMenuContent, F as DropdownMenuLabel, i as DropdownMenuSeparator, h as DropdownMenuItem, l as Dialog, n as DialogContent, q as DialogClose, o as DialogTitle, r as DialogDescription, p as PopoverAnchor, C as Chip, a8 as useMediaQuery } from "./useTheme-
|
|
10
|
+
import { c as cn, t as tv, B as Button, M as InputGroup, Q as InputGroupInput, N as InputGroupAddon, R as InputGroupText, P as Popover, j as PopoverTrigger, k as PopoverContent, a9 as Command, v as CommandInput, w as CommandList, x as CommandEmpty, y as CommandGroup, z as CommandItem, D as DropdownMenu, f as DropdownMenuTrigger, g as DropdownMenuContent, F as DropdownMenuLabel, i as DropdownMenuSeparator, h as DropdownMenuItem, l as Dialog, n as DialogContent, q as DialogClose, o as DialogTitle, r as DialogDescription, p as PopoverAnchor, C as Chip, a8 as useMediaQuery } from "./useTheme-D-405m16.mjs";
|
|
11
11
|
import { X, CheckCircle2, AlertCircle, AlertTriangle, Info, ChevronDown, Minus, Check, ChevronUp, ArrowUp, ArrowDown, ArrowUpDown, Search, CircleX, MoreHorizontal, Filter, ChevronLeft, GripVertical, Pin, PinOff, Plus, Trash2, Eye, Users, ChevronRight, Columns, SlidersHorizontal, Minimize2, Maximize2, Type, Hash, ChevronLeftIcon, ChevronRightIcon, Calendar as Calendar$1, ToggleLeft, DollarSign, Percent, AtSign, Phone, Link, ExternalLink, User, Tag, Tags, CalendarClock, ChevronsLeft, ChevronsRight, 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";
|
|
12
12
|
import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
|
|
13
13
|
import * as SwitchPrimitives from "@radix-ui/react-switch";
|
|
14
|
-
import { I as Input } from "./input-
|
|
14
|
+
import { I as Input } from "./input-Di_5Ir5M.mjs";
|
|
15
15
|
import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
|
|
16
16
|
import * as SelectPrimitive from "@radix-ui/react-select";
|
|
17
17
|
import ReactDOM, { createPortal, flushSync } from "react-dom";
|
|
@@ -22420,4 +22420,4 @@ export {
|
|
|
22420
22420
|
DataTableLoading as y,
|
|
22421
22421
|
DataTableNoResults as z
|
|
22422
22422
|
};
|
|
22423
|
-
//# sourceMappingURL=panel-
|
|
22423
|
+
//# sourceMappingURL=panel-BCGlqoEk.mjs.map
|