@snksergio/design-system 0.43.3 → 0.45.0

package/dist-lib/chunks/page-header--cPS_Z-a.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-header--cPS_Z-a.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;"}
+{"version":3,"file":"page-header--cPS_Z-a.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\";\r\nimport { pageHeaderStyles } from \"./page-header.styles\";\r\nimport type { PageHeaderProps } from \"./page-header.types\";\r\n\r\n/**\r\n * PageHeader — bloco de título reutilizável colocado dentro do body do\r\n * `<AppShell>`. Cobre o caso comum:\r\n *\r\n *   - Título (h1) + descrição (sub) + badge (chip ao lado)\r\n *   - Slot de ações à direita (botões / dropdowns)\r\n *   - Slot livre abaixo pra tabs, filtros ou qualquer conteúdo extra\r\n *\r\n * Mobile-ready por default:\r\n *   - Title/description/badge somem em viewports pequenas\r\n *     (Header global do AppShell já mostra title/breadcrumb)\r\n *   - O último botão do `actions` vira fluid (CTA full-width)\r\n *\r\n * @example\r\n * ```tsx\r\n * <PageHeader\r\n *   title=\"Clientes\"\r\n *   description=\"Gerencie sua base de clientes.\"\r\n *   badge={<Chip color=\"primary\" variant=\"soft\">87 registros</Chip>}\r\n *   actions={\r\n *     <>\r\n *       <Button variant=\"outline\" size=\"icon-md\"><MoreHorizontal /></Button>\r\n *       <Button variant=\"filled\" color=\"primary\">Novo cliente</Button>\r\n *     </>\r\n *   }\r\n * />\r\n * ```\r\n *\r\n * @example com tabs abaixo (slot children):\r\n * ```tsx\r\n * <PageHeader title=\"Configurações\" actions={<Button>Salvar</Button>}>\r\n *   <Tabs ... />\r\n * </PageHeader>\r\n * ```\r\n */\r\nexport function PageHeader({\r\n  title,\r\n  description,\r\n  badge,\r\n  actions,\r\n  children,\r\n  hideTextOnMobile = true,\r\n  fluidPrimaryOnMobile = true,\r\n  className,\r\n}: PageHeaderProps) {\r\n  const s = pageHeaderStyles({\r\n    hideTextOnMobile,\r\n    mobileFluid: fluidPrimaryOnMobile,\r\n  });\r\n\r\n  const hasText = !!(title || description || badge);\r\n  const hasTopRow = hasText || !!actions;\r\n\r\n  return (\r\n    <header className={cn(s.root(), className)}>\r\n      {hasTopRow && (\r\n        <div className={s.topRow()}>\r\n          {hasText && (\r\n            <div className={s.textCol()}>\r\n              {(title || badge) && (\r\n                <div className={s.titleRow()}>\r\n                  {title && <h1 className={s.title()}>{title}</h1>}\r\n                  {badge}\r\n                </div>\r\n              )}\r\n              {description && <p className={s.description()}>{description}</p>}\r\n            </div>\r\n          )}\r\n          {actions && <div className={s.actionsRow()}>{actions}</div>}\r\n        </div>\r\n      )}\r\n      {children && <div className={s.extraRow()}>{children}</div>}\r\n    </header>\r\n  );\r\n}\r\n\r\nPageHeader.displayName = \"PageHeader\";\r\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;"}

package/dist-lib/chunks/page-header-DvAJoEfb.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"page-header-DvAJoEfb.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,OAAAA,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,OAAAA,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;;;"}
+{"version":3,"file":"page-header-DvAJoEfb.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\";\r\nimport { pageHeaderStyles } from \"./page-header.styles\";\r\nimport type { PageHeaderProps } from \"./page-header.types\";\r\n\r\n/**\r\n * PageHeader — bloco de título reutilizável colocado dentro do body do\r\n * `<AppShell>`. Cobre o caso comum:\r\n *\r\n *   - Título (h1) + descrição (sub) + badge (chip ao lado)\r\n *   - Slot de ações à direita (botões / dropdowns)\r\n *   - Slot livre abaixo pra tabs, filtros ou qualquer conteúdo extra\r\n *\r\n * Mobile-ready por default:\r\n *   - Title/description/badge somem em viewports pequenas\r\n *     (Header global do AppShell já mostra title/breadcrumb)\r\n *   - O último botão do `actions` vira fluid (CTA full-width)\r\n *\r\n * @example\r\n * ```tsx\r\n * <PageHeader\r\n *   title=\"Clientes\"\r\n *   description=\"Gerencie sua base de clientes.\"\r\n *   badge={<Chip color=\"primary\" variant=\"soft\">87 registros</Chip>}\r\n *   actions={\r\n *     <>\r\n *       <Button variant=\"outline\" size=\"icon-md\"><MoreHorizontal /></Button>\r\n *       <Button variant=\"filled\" color=\"primary\">Novo cliente</Button>\r\n *     </>\r\n *   }\r\n * />\r\n * ```\r\n *\r\n * @example com tabs abaixo (slot children):\r\n * ```tsx\r\n * <PageHeader title=\"Configurações\" actions={<Button>Salvar</Button>}>\r\n *   <Tabs ... />\r\n * </PageHeader>\r\n * ```\r\n */\r\nexport function PageHeader({\r\n  title,\r\n  description,\r\n  badge,\r\n  actions,\r\n  children,\r\n  hideTextOnMobile = true,\r\n  fluidPrimaryOnMobile = true,\r\n  className,\r\n}: PageHeaderProps) {\r\n  const s = pageHeaderStyles({\r\n    hideTextOnMobile,\r\n    mobileFluid: fluidPrimaryOnMobile,\r\n  });\r\n\r\n  const hasText = !!(title || description || badge);\r\n  const hasTopRow = hasText || !!actions;\r\n\r\n  return (\r\n    <header className={cn(s.root(), className)}>\r\n      {hasTopRow && (\r\n        <div className={s.topRow()}>\r\n          {hasText && (\r\n            <div className={s.textCol()}>\r\n              {(title || badge) && (\r\n                <div className={s.titleRow()}>\r\n                  {title && <h1 className={s.title()}>{title}</h1>}\r\n                  {badge}\r\n                </div>\r\n              )}\r\n              {description && <p className={s.description()}>{description}</p>}\r\n            </div>\r\n          )}\r\n          {actions && <div className={s.actionsRow()}>{actions}</div>}\r\n        </div>\r\n      )}\r\n      {children && <div className={s.extraRow()}>{children}</div>}\r\n    </header>\r\n  );\r\n}\r\n\r\nPageHeader.displayName = \"PageHeader\";\r\n"],"names":["tv","jsxs","cn","jsx"],"mappings":";;;AAkBO,MAAM,mBAAmBA,OAAAA,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,OAAAA,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;;;"}

package/dist-lib/chunks/{panel-CvfP8eP1.cjs → panel-4aMDou7z.cjs}

@@ -3,8 +3,8 @@ 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);
 const jsxRuntime = require("react/jsx-runtime");
-const sheet = require("./sheet-j-d_UX7R.cjs");
 const React = require("react");
+const sheet = require("./sheet-j-d_UX7R.cjs");
 const core = require("@dnd-kit/core");
 const sortable = require("@dnd-kit/sortable");
 const reactVirtual = require("@tanstack/react-virtual");
@@ -518,6 +518,7 @@ const FormFieldTextarea = React.forwardRef(
   )
 );
 FormFieldTextarea.displayName = "FormFieldTextarea";
+const SENTINELA_VAZIO = "__ds_select_vazio__";
 function FormFieldSelect({
   label,
   required,
@@ -537,6 +538,13 @@ function FormFieldSelect({
   triggerClassName,
   contentClassName
 }) {
+  const abertoRef = React.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__ */ jsxRuntime.jsx(
     FormField,
     {
@@ -553,9 +561,12 @@ function FormFieldSelect({
       children: ({ id: fieldId, state: fieldState }) => /* @__PURE__ */ jsxRuntime.jsxs(
         sheet.Select,
         {
-          value,
-          defaultValue,
-          onValueChange,
+          value: paraRadix(value),
+          defaultValue: paraRadix(defaultValue),
+          onValueChange: aoMudarValor,
+          onOpenChange: (aberto) => {
+            abertoRef.current = aberto;
+          },
           disabled,
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -570,7 +581,7 @@ function FormFieldSelect({
             /* @__PURE__ */ jsxRuntime.jsx(sheet.SelectContent, { className: contentClassName, children: options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx(
               sheet.SelectItem,
               {
-                value: opt.value,
+                value: paraRadix(opt.value),
                 disabled: opt.disabled,
                 children: opt.label
               },
@@ -13060,4 +13071,4 @@ exports.useColumnResize = useColumnResize;
 exports.useColumnWidths = useColumnWidths;
 exports.useDataTableContext = useDataTableContext;
 exports.useFloatingPanelResize = useFloatingPanelResize;
-//# sourceMappingURL=panel-CvfP8eP1.cjs.map
+//# sourceMappingURL=panel-4aMDou7z.cjs.map