@snksergio/design-system 0.5.0 → 0.17.0

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

@@ -1 +0,0 @@
-{"version":3,"file":"page-header-qOywgRWy.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    extraRow: \"w-full\",\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,UAAAA,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,IACZ,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;AChBM,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,UAAAA,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;;;"}