@snksergio/design-system 0.56.0 → 0.57.0

package/dist-lib/index.cjs

@@ -5276,11 +5276,25 @@ const schedulerRoot = avatar.tv({
 });
 const schedulerToolbar = avatar.tv({
   base: [
-    "flex flex-wrap items-center justify-between gap-gp-xl"
+    "flex flex-col gap-gp-xl",
+    "lg:flex-row lg:flex-wrap lg:items-center lg:justify-between"
   ]
 });
 const schedulerToolbarSide = avatar.tv({
-  base: "flex min-w-0 flex-wrap items-center gap-gp-md"
+  base: "flex min-w-0 items-center gap-gp-md",
+  variants: {
+    /**
+     * `leading` = título + navegação. Empilhado, ocupa a linha inteira e
+     * separa os dois extremos — é o que joga `‹ Hoje ›` pro fim.
+     * `trailing` = busca + controles. A busca é quem estica (`flex-1` nela),
+     * então aqui basta ocupar a linha.
+     */
+    slot: {
+      leading: "w-full justify-between lg:w-auto lg:flex-wrap lg:justify-start",
+      trailing: "w-full lg:w-auto lg:flex-wrap"
+    }
+  },
+  defaultVariants: { slot: "trailing" }
 });
 const schedulerTitle = avatar.tv({
   base: [
@@ -5320,15 +5334,15 @@ const schedulerSearch = avatar.tv({
     "border border-border-subtle dark:border-border-input",
     "shadow-sh-sm dark:shadow-sh-none",
     "text-fg-default",
-    "min-w-0 flex-1 md:flex-initial",
-    "md:w-[200px] md:focus-within:w-[300px]",
+    "min-w-0 flex-1 lg:flex-initial",
+    "lg:w-[200px] lg:focus-within:w-[300px]",
     "transition-[width,border-color,background-color,box-shadow] duration-200",
     "focus-within:border-border-brand focus-within:shadow-sh-ring",
     "[&_svg]:size-icon-sm [&_svg]:shrink-0 [&_svg]:text-fg-muted"
   ],
   variants: {
     /** Mantém expandido mesmo sem foco quando já há termo digitado. */
-    expanded: { true: "md:w-[300px]", false: "" }
+    expanded: { true: "lg:w-[300px]", false: "" }
   },
   defaultVariants: { expanded: false }
 });
@@ -5391,13 +5405,32 @@ const schedulerMain = avatar.tv({
 });
 const schedulerFilterAside = avatar.tv({
   base: [
-    "flex w-[280px] min-h-0 shrink-0 flex-col overflow-y-auto",
+    "flex min-h-0 flex-col overflow-y-auto",
     // `scrollbar-thin` é a barra do DS (26 usos no repo contra 2 do
     // `scrollbar-default`) — trilho transparente + thumb tokenizado.
     // ⚠️ É `@utility` do tema GERADO, não do globals.css: existe nos 4 canais.
-    "scrollbar-thin",
-    "rounded-radius-xl border border-border-default bg-bg-surface"
-  ]
+    "scrollbar-thin"
+  ],
+  variants: {
+    /**
+     * `embedded` = o painel vive DENTRO de outro contêiner que já é a
+     * superfície — hoje o `FloatingPanel` do modo drawer (<1024px).
+     *
+     * Como coluna (`false`, o default) ele É o card: largura própria, borda,
+     * radius e fundo. Embutido, os quatro viram defeito — largura fixa deixa
+     * uma faixa morta à direita do drawer, e borda+radius+fundo repetem a
+     * superfície do painel que já o embrulha (card dentro de card, a mesma
+     * classe de erro da L-050).
+     */
+    embedded: {
+      false: [
+        "w-[280px] shrink-0",
+        "rounded-radius-xl border border-border-default bg-bg-surface"
+      ],
+      true: "w-full"
+    }
+  },
+  defaultVariants: { embedded: false }
 });
 const schedulerAsideSection = avatar.tv({
   base: [
@@ -5867,7 +5900,6 @@ function SchedulerToolbar({
   appliedCount,
   filterPanelOpen,
   onToggleFilterPanel,
-  filterPanelAvailable,
   toolbarActions,
   primaryAction
 }) {
@@ -5879,7 +5911,7 @@ function SchedulerToolbar({
   );
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-gp-xl", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: schedulerToolbar(), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: schedulerToolbarSide(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: schedulerToolbarSide({ slot: "leading" }), children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: schedulerTitle(), children: title2 }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "group", "aria-label": "Navegação de período", className: schedulerNavGroup(), children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5907,7 +5939,7 @@ function SchedulerToolbar({
           )
         ] })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: schedulerToolbarSide(), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: schedulerToolbarSide({ slot: "trailing" }), children: [
         searchable ? /* @__PURE__ */ jsxRuntime.jsxs("label", { className: schedulerSearch({ expanded: search !== "" }), children: [
           /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5931,10 +5963,10 @@ function SchedulerToolbar({
               color: "secondary",
               size: "sm",
               iconLeft: activeView.icon,
-              iconRight: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, {}),
+              iconRight: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { className: "hidden lg:block" }),
               "aria-label": `Visualização: ${activeView.label}`,
-              className: "shrink-0",
-              children: activeView.label
+              className: "shrink-0 max-lg:size-form-xl max-lg:p-0",
+              children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden lg:inline", children: activeView.label })
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx(avatar.DropdownMenuContent, { align: "end", className: "min-w-[168px]", children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -5958,13 +5990,13 @@ function SchedulerToolbar({
                 size: "sm",
                 iconLeft: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ListFilter, {}),
                 onClick: onToggleFilterPanel,
-                disabled: !filterPanelAvailable,
                 "aria-expanded": filterPanelOpen,
                 className: avatar.cn(
+                  "max-lg:size-form-xl max-lg:p-0",
                   filterEngaged && "border-border-brand hover:border-border-brand"
                 ),
-                title: filterPanelAvailable ? void 0 : "O painel de filtros precisa de uma tela mais larga (1024px+)",
-                children: "Filtro"
+                "aria-label": "Filtro",
+                children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden lg:inline", children: "Filtro" })
               }
             ),
             appliedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: schedulerFilterDot(), "aria-hidden": "true" }) : null
@@ -6262,6 +6294,7 @@ function SchedulerFilterPanel({
   onClearAll,
   appliedCount,
   onClose,
+  embedded = false,
   counts,
   date,
   now,
@@ -6277,8 +6310,8 @@ function SchedulerFilterPanel({
     else next.add(id);
     return next;
   });
-  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: schedulerFilterAside(), "aria-label": "Filtros do calendário", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: schedulerAsideSection({ compact: true, sticky: true }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: schedulerAsideHead(), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className: schedulerFilterAside({ embedded }), "aria-label": "Filtros do calendário", children: [
+    embedded ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: schedulerAsideSection({ compact: true, sticky: true }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: schedulerAsideHead(), children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: schedulerAsideTitle(), children: "Filtros" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-gp-sm", children: [
         appliedCount > 0 ? /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onClearAll, className: schedulerClearLink(), children: "Limpar" }) : null,
@@ -7608,9 +7641,11 @@ const Scheduler = React.forwardRef(
       return;
     }, [draggable, resizable, onEventMove, onEventResize]);
     const eventoArrastado = dnd.dragAtivo?.kind === "move" ? filter.filteredEvents.find((e) => e.id === dnd.dragAtivo?.eventId) ?? null : null;
-    const filterPanelAvailable = useMediaQuery("(min-width: 1024px)");
+    const wideLayout = useMediaQuery("(min-width: 1024px)");
     const [filterPanelOpen, setFilterPanelOpen] = React.useState(defaultFilterPanelOpen);
-    const showFilterPanel = filterPanelOpen && filterPanelAvailable && (filterFields?.length ?? 0) > 0;
+    const hasFilterFields = (filterFields?.length ?? 0) > 0;
+    const showFilterPanel = filterPanelOpen && wideLayout && hasFilterFields;
+    const showFilterDrawer = filterPanelOpen && !wideLayout && hasFilterFields;
     React.useImperativeHandle(
       ref,
       () => ({
@@ -7677,9 +7712,8 @@ const Scheduler = React.forwardRef(
                     onClearField: filter.clearField,
                     onClearAll: filter.clearAll,
                     appliedCount: filter.appliedCount,
-                    filterPanelOpen: showFilterPanel,
+                    filterPanelOpen: showFilterPanel || showFilterDrawer,
                     onToggleFilterPanel: () => setFilterPanelOpen((o) => !o),
-                    filterPanelAvailable,
                     toolbarActions,
                     primaryAction
                   }
@@ -7756,6 +7790,52 @@ const Scheduler = React.forwardRef(
                     }
                   ) : null
                 ] }),
+                showFilterDrawer && filterFields ? /* @__PURE__ */ jsxRuntime.jsx(
+                  panel.FloatingPanel,
+                  {
+                    open: true,
+                    onOpenChange: (aberto) => setFilterPanelOpen(aberto),
+                    side: "right",
+                    size: "sm",
+                    bodyPadded: false,
+                    title: "Filtros",
+                    titleIcon: lucideReact.ListFilter,
+                    description: filter.appliedCount === 1 ? "1 filtro ativo" : `${filter.appliedCount} filtros ativos`,
+                    footer: /* @__PURE__ */ jsxRuntime.jsx(
+                      avatar.Button,
+                      {
+                        variant: "ghost",
+                        color: "secondary",
+                        size: "sm",
+                        onClick: filter.clearAll,
+                        disabled: filter.appliedCount === 0,
+                        children: "Limpar tudo"
+                      }
+                    ),
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      SchedulerFilterPanel,
+                      {
+                        embedded: true,
+                        filterFields,
+                        filterModel: filter.filterModel,
+                        onToggleValue: filter.toggleValue,
+                        onClearAll: filter.clearAll,
+                        appliedCount: filter.appliedCount,
+                        onClose: () => setFilterPanelOpen(false),
+                        counts: filter.optionCounts,
+                        date: state.date,
+                        now,
+                        locale,
+                        weekStartsOn,
+                        events: filter.filteredEvents,
+                        onDateSelect: (d) => {
+                          state.goToDate(d);
+                          setFilterPanelOpen(false);
+                        }
+                      }
+                    )
+                  }
+                ) : null,
                 /* @__PURE__ */ jsxRuntime.jsx(core.DragOverlay, { dropAnimation: null, children: eventoArrastado ? /* @__PURE__ */ jsxRuntime.jsx(
                   SchedulerEventItem,
                   {