@traky-app/ui 1.3.0 → 1.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@traky-app/ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Componentes Traky UI para importar desde @traky-app/ui, más el registro copy-paste.",
   "license": "MIT",
   "type": "module",

package/registry/traky/json/header-page.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "header-page",
+  "type": "registry:ui",
+  "author": "Traky (https://traky.app)",
+  "dependencies": [
+    "@tabler/icons-react"
+  ],
+  "registryDependencies": [
+    "entity-icon"
+  ],
+  "files": [
+    {
+      "path": "ui/header-page.tsx",
+      "content": "\"use client\"\n\nimport type { Icon } from \"@tabler/icons-react\"\nimport type { ReactNode } from \"react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { EntityIcon } from \"@/components/ui/entity-icon\"\n\ntype HeaderPageProps = {\n  icon: Icon\n  title: string\n  description: string\n  className?: string\n  /** Contenido izquierdo de la barra (filtros, enlaces secundarios, etc.). */\n  toolbarStart?: ReactNode\n  /** Contenido derecho de la barra (resumen, paginación, acción principal). */\n  toolbarEnd?: ReactNode\n  /** Panel expandible debajo de la barra (p. ej. filtros avanzados). */\n  filters?: ReactNode\n  showFilters?: boolean\n  toolbarAriaLabel?: string\n  toolbarId?: string\n  /** Acción principal junto al título (p. ej. crear registro). */\n  action?: ReactNode\n}\n\nfunction HeaderPageMeta({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return (\n    <p\n      data-header-meta\n      className={cn(\n        \"text-sm text-muted-foreground max-sm:order-3 max-sm:basis-full max-sm:shrink-0 sm:order-1 xl:order-none\",\n        className,\n      )}\n    >\n      {children}\n    </p>\n  )\n}\n\nfunction HeaderPageToolbarAction({\n  children,\n  className,\n  order = \"primary\",\n}: {\n  children: ReactNode\n  className?: string\n  order?: \"primary\" | \"secondary\"\n}) {\n  return (\n    <div\n      className={cn(\n        \"w-full sm:w-auto xl:order-none [&_a]:w-full sm:[&_a]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto\",\n        order === \"primary\" && \"sm:order-2 sm:ml-auto\",\n        order === \"secondary\" && \"sm:order-3\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction HeaderPageToolbarPagination({\n  children,\n  className,\n}: {\n  children: ReactNode\n  className?: string\n}) {\n  return (\n    <div\n      className={cn(\n        \"flex items-center justify-center sm:order-3 xl:order-none\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  )\n}\n\nfunction HeaderPageRoot({\n  icon: Icon,\n  title,\n  description,\n  className,\n  toolbarStart,\n  toolbarEnd,\n  filters,\n  showFilters = false,\n  toolbarAriaLabel = \"Filtros y acciones\",\n  toolbarId,\n  action,\n}: HeaderPageProps) {\n  const hasToolbar = Boolean(toolbarStart || toolbarEnd)\n  const hasFiltersPanel = Boolean(filters)\n\n  return (\n    <header className={cn(\"space-y-4\", className)}>\n      <div className=\"flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between\">\n        <div className=\"flex min-w-0 items-start gap-3\">\n          <EntityIcon icon={Icon} size=\"lg\" />\n          <div className=\"min-w-0\">\n            <h1 className=\"text-xl font-semibold\">{title}</h1>\n            <p className=\"mt-1 text-sm text-muted-foreground\">{description}</p>\n          </div>\n        </div>\n\n        {action ? (\n          <div className=\"flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:flex-nowrap sm:justify-end sm:pt-0.5 [&_a:not([data-icon-only])]:w-full sm:[&_a:not([data-icon-only])]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto max-sm:[&>a:not([data-icon-only])]:basis-full max-sm:[&>a:not([data-icon-only])]:shrink-0 max-sm:[&>[data-icon-only]]:order-first max-sm:[&>button:not([data-icon-only])]:basis-full max-sm:[&>button:not([data-icon-only])]:shrink-0\">\n            {action}\n          </div>\n        ) : null}\n      </div>\n\n      {(hasToolbar || hasFiltersPanel) && (\n        <section\n          id={toolbarId}\n          className=\"space-y-4\"\n          aria-label={toolbarAriaLabel}\n        >\n          {hasToolbar && (\n            <div\n              className={cn(\n                \"flex flex-col gap-3\",\n                \"max-sm:flex-row max-sm:flex-wrap max-sm:items-center max-sm:gap-2\",\n                \"max-sm:[&_[data-icon-only]]:order-1 max-sm:[&_[data-icon-only]]:shrink-0\",\n                \"max-sm:[&_[data-header-icons]_[data-icon-only]]:order-none\",\n                \"max-sm:[&_.w-full]:order-2 max-sm:[&_.w-full]:basis-full max-sm:[&_.w-full]:shrink-0\",\n                \"max-sm:[&_[data-header-icons]_.w-full]:order-none max-sm:[&_[data-header-icons]_.w-full]:basis-auto max-sm:[&_[data-header-icons]_.w-full]:shrink\",\n                toolbarStart\n                  ? \"xl:flex-row xl:items-center xl:justify-between\"\n                  : \"sm:flex-row sm:flex-wrap sm:items-center sm:justify-between xl:justify-end xl:gap-4\",\n              )}\n            >\n              {toolbarStart ? (\n                <div className=\"max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:gap-2\">\n                  {toolbarStart}\n                </div>\n              ) : null}\n\n              {toolbarEnd ? (\n                <div className=\"max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:justify-between sm:gap-3 xl:justify-end xl:gap-4\">\n                  {toolbarEnd}\n                </div>\n              ) : null}\n            </div>\n          )}\n\n          {showFilters && filters}\n        </section>\n      )}\n    </header>\n  )\n}\n\nconst HeaderPage = Object.assign(HeaderPageRoot, {\n  Meta: HeaderPageMeta,\n  ToolbarAction: HeaderPageToolbarAction,\n  ToolbarPagination: HeaderPageToolbarPagination,\n})\n\nexport { HeaderPage }\nexport default HeaderPage\n",
+      "type": "registry:ui",
+      "target": ""
+    }
+  ]
+}

package/registry/traky/registry.json

@@ -293,6 +293,16 @@
         }
       ]
     },
+    {
+      "name": "header-page",
+      "type": "registry:ui",
+      "files": [
+        {
+          "path": "json/header-page.json",
+          "type": "registry:file"
+        }
+      ]
+    },
     {
       "name": "hover-card",
       "type": "registry:ui",

package/registry/traky/ui/header-page.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import type { Icon } from "@tabler/icons-react"
+import type { ReactNode } from "react"
+
+import { cn } from "@/lib/utils"
+import { EntityIcon } from "@/components/ui/entity-icon"
+
+type HeaderPageProps = {
+  icon: Icon
+  title: string
+  description: string
+  className?: string
+  /** Contenido izquierdo de la barra (filtros, enlaces secundarios, etc.). */
+  toolbarStart?: ReactNode
+  /** Contenido derecho de la barra (resumen, paginación, acción principal). */
+  toolbarEnd?: ReactNode
+  /** Panel expandible debajo de la barra (p. ej. filtros avanzados). */
+  filters?: ReactNode
+  showFilters?: boolean
+  toolbarAriaLabel?: string
+  toolbarId?: string
+  /** Acción principal junto al título (p. ej. crear registro). */
+  action?: ReactNode
+}
+
+function HeaderPageMeta({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <p
+      data-header-meta
+      className={cn(
+        "text-sm text-muted-foreground max-sm:order-3 max-sm:basis-full max-sm:shrink-0 sm:order-1 xl:order-none",
+        className,
+      )}
+    >
+      {children}
+    </p>
+  )
+}
+
+function HeaderPageToolbarAction({
+  children,
+  className,
+  order = "primary",
+}: {
+  children: ReactNode
+  className?: string
+  order?: "primary" | "secondary"
+}) {
+  return (
+    <div
+      className={cn(
+        "w-full sm:w-auto xl:order-none [&_a]:w-full sm:[&_a]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto",
+        order === "primary" && "sm:order-2 sm:ml-auto",
+        order === "secondary" && "sm:order-3",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function HeaderPageToolbarPagination({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center sm:order-3 xl:order-none",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function HeaderPageRoot({
+  icon: Icon,
+  title,
+  description,
+  className,
+  toolbarStart,
+  toolbarEnd,
+  filters,
+  showFilters = false,
+  toolbarAriaLabel = "Filtros y acciones",
+  toolbarId,
+  action,
+}: HeaderPageProps) {
+  const hasToolbar = Boolean(toolbarStart || toolbarEnd)
+  const hasFiltersPanel = Boolean(filters)
+
+  return (
+    <header className={cn("space-y-4", className)}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 items-start gap-3">
+          <EntityIcon icon={Icon} size="lg" />
+          <div className="min-w-0">
+            <h1 className="text-xl font-semibold">{title}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+
+        {action ? (
+          <div className="flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:flex-nowrap sm:justify-end sm:pt-0.5 [&_a:not([data-icon-only])]:w-full sm:[&_a:not([data-icon-only])]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto max-sm:[&>a:not([data-icon-only])]:basis-full max-sm:[&>a:not([data-icon-only])]:shrink-0 max-sm:[&>[data-icon-only]]:order-first max-sm:[&>button:not([data-icon-only])]:basis-full max-sm:[&>button:not([data-icon-only])]:shrink-0">
+            {action}
+          </div>
+        ) : null}
+      </div>
+
+      {(hasToolbar || hasFiltersPanel) && (
+        <section
+          id={toolbarId}
+          className="space-y-4"
+          aria-label={toolbarAriaLabel}
+        >
+          {hasToolbar && (
+            <div
+              className={cn(
+                "flex flex-col gap-3",
+                "max-sm:flex-row max-sm:flex-wrap max-sm:items-center max-sm:gap-2",
+                "max-sm:[&_[data-icon-only]]:order-1 max-sm:[&_[data-icon-only]]:shrink-0",
+                "max-sm:[&_[data-header-icons]_[data-icon-only]]:order-none",
+                "max-sm:[&_.w-full]:order-2 max-sm:[&_.w-full]:basis-full max-sm:[&_.w-full]:shrink-0",
+                "max-sm:[&_[data-header-icons]_.w-full]:order-none max-sm:[&_[data-header-icons]_.w-full]:basis-auto max-sm:[&_[data-header-icons]_.w-full]:shrink",
+                toolbarStart
+                  ? "xl:flex-row xl:items-center xl:justify-between"
+                  : "sm:flex-row sm:flex-wrap sm:items-center sm:justify-between xl:justify-end xl:gap-4",
+              )}
+            >
+              {toolbarStart ? (
+                <div className="max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:gap-2">
+                  {toolbarStart}
+                </div>
+              ) : null}
+
+              {toolbarEnd ? (
+                <div className="max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:justify-between sm:gap-3 xl:justify-end xl:gap-4">
+                  {toolbarEnd}
+                </div>
+              ) : null}
+            </div>
+          )}
+
+          {showFilters && filters}
+        </section>
+      )}
+    </header>
+  )
+}
+
+const HeaderPage = Object.assign(HeaderPageRoot, {
+  Meta: HeaderPageMeta,
+  ToolbarAction: HeaderPageToolbarAction,
+  ToolbarPagination: HeaderPageToolbarPagination,
+})
+
+export { HeaderPage }
+export default HeaderPage

package/src/ui/header-page.tsx

@@ -0,0 +1,171 @@
+"use client"
+
+import type { Icon } from "@tabler/icons-react"
+import type { ReactNode } from "react"
+
+import { cn } from "../lib/utils"
+import { EntityIcon } from "./entity-icon"
+
+type HeaderPageProps = {
+  icon: Icon
+  title: string
+  description: string
+  className?: string
+  /** Contenido izquierdo de la barra (filtros, enlaces secundarios, etc.). */
+  toolbarStart?: ReactNode
+  /** Contenido derecho de la barra (resumen, paginación, acción principal). */
+  toolbarEnd?: ReactNode
+  /** Panel expandible debajo de la barra (p. ej. filtros avanzados). */
+  filters?: ReactNode
+  showFilters?: boolean
+  toolbarAriaLabel?: string
+  toolbarId?: string
+  /** Acción principal junto al título (p. ej. crear registro). */
+  action?: ReactNode
+}
+
+function HeaderPageMeta({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <p
+      data-header-meta
+      className={cn(
+        "text-sm text-muted-foreground max-sm:order-3 max-sm:basis-full max-sm:shrink-0 sm:order-1 xl:order-none",
+        className,
+      )}
+    >
+      {children}
+    </p>
+  )
+}
+
+function HeaderPageToolbarAction({
+  children,
+  className,
+  order = "primary",
+}: {
+  children: ReactNode
+  className?: string
+  order?: "primary" | "secondary"
+}) {
+  return (
+    <div
+      className={cn(
+        "w-full sm:w-auto xl:order-none [&_a]:w-full sm:[&_a]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto",
+        order === "primary" && "sm:order-2 sm:ml-auto",
+        order === "secondary" && "sm:order-3",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function HeaderPageToolbarPagination({
+  children,
+  className,
+}: {
+  children: ReactNode
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center sm:order-3 xl:order-none",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  )
+}
+
+function HeaderPageRoot({
+  icon: Icon,
+  title,
+  description,
+  className,
+  toolbarStart,
+  toolbarEnd,
+  filters,
+  showFilters = false,
+  toolbarAriaLabel = "Filtros y acciones",
+  toolbarId,
+  action,
+}: HeaderPageProps) {
+  const hasToolbar = Boolean(toolbarStart || toolbarEnd)
+  const hasFiltersPanel = Boolean(filters)
+
+  return (
+    <header className={cn("space-y-4", className)}>
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+        <div className="flex min-w-0 items-start gap-3">
+          <EntityIcon icon={Icon} size="lg" />
+          <div className="min-w-0">
+            <h1 className="text-xl font-semibold">{title}</h1>
+            <p className="mt-1 text-sm text-muted-foreground">{description}</p>
+          </div>
+        </div>
+
+        {action ? (
+          <div className="flex w-full shrink-0 flex-wrap items-center gap-2 sm:w-auto sm:flex-nowrap sm:justify-end sm:pt-0.5 [&_a:not([data-icon-only])]:w-full sm:[&_a:not([data-icon-only])]:w-auto [&_button:not([data-icon-only])]:w-full sm:[&_button:not([data-icon-only])]:w-auto max-sm:[&>a:not([data-icon-only])]:basis-full max-sm:[&>a:not([data-icon-only])]:shrink-0 max-sm:[&>[data-icon-only]]:order-first max-sm:[&>button:not([data-icon-only])]:basis-full max-sm:[&>button:not([data-icon-only])]:shrink-0">
+            {action}
+          </div>
+        ) : null}
+      </div>
+
+      {(hasToolbar || hasFiltersPanel) && (
+        <section
+          id={toolbarId}
+          className="space-y-4"
+          aria-label={toolbarAriaLabel}
+        >
+          {hasToolbar && (
+            <div
+              className={cn(
+                "flex flex-col gap-3",
+                "max-sm:flex-row max-sm:flex-wrap max-sm:items-center max-sm:gap-2",
+                "max-sm:[&_[data-icon-only]]:order-1 max-sm:[&_[data-icon-only]]:shrink-0",
+                "max-sm:[&_[data-header-icons]_[data-icon-only]]:order-none",
+                "max-sm:[&_.w-full]:order-2 max-sm:[&_.w-full]:basis-full max-sm:[&_.w-full]:shrink-0",
+                "max-sm:[&_[data-header-icons]_.w-full]:order-none max-sm:[&_[data-header-icons]_.w-full]:basis-auto max-sm:[&_[data-header-icons]_.w-full]:shrink",
+                toolbarStart
+                  ? "xl:flex-row xl:items-center xl:justify-between"
+                  : "sm:flex-row sm:flex-wrap sm:items-center sm:justify-between xl:justify-end xl:gap-4",
+              )}
+            >
+              {toolbarStart ? (
+                <div className="max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:gap-2">
+                  {toolbarStart}
+                </div>
+              ) : null}
+
+              {toolbarEnd ? (
+                <div className="max-sm:contents sm:flex sm:flex-wrap sm:items-center sm:justify-between sm:gap-3 xl:justify-end xl:gap-4">
+                  {toolbarEnd}
+                </div>
+              ) : null}
+            </div>
+          )}
+
+          {showFilters && filters}
+        </section>
+      )}
+    </header>
+  )
+}
+
+const HeaderPage = Object.assign(HeaderPageRoot, {
+  Meta: HeaderPageMeta,
+  ToolbarAction: HeaderPageToolbarAction,
+  ToolbarPagination: HeaderPageToolbarPagination,
+})
+
+export { HeaderPage }
+export default HeaderPage