@snksergio/design-system 0.4.0 → 0.5.1

package/dist-lib/src/components/ui/MenuSidebar/sidebar.styles.d.ts

@@ -0,0 +1,287 @@
+/**
+ * Sidebar styles — alinhado com /design-and-table-v2 (rail + panel).
+ *
+ * Dimensões preservadas do sandbox:
+ *   - rail: 64px de largura
+ *   - panel: 264px de largura (collapse → 0)
+ *   - header: 60px de altura
+ *   - panel item: 40px (h-form-lg) com font 13px e gap 11px
+ *   - subitem: 32px (h-form-sm) com font 12.5px
+ *
+ * Cores via tokens v3:
+ *   - bg-bg-sidebar + bg-bg-sidebar-accent (hover) + bg-bg-sidebar-accent-hover
+ *   - bg-bg-surface + shadow-sh-sm pro active (light only — dark auto-none)
+ *   - text-fg-default / text-fg-muted / text-fg-brand
+ *   - border-border-sidebar / border-border-subtle
+ */
+/**
+ * `w-fit` é crítico: faz o root ocupar SÓ a largura visível (rail 64px quando
+ * colapsado, rail + panel 328px quando aberto). Sem isso, o div ocuparia 100%
+ * da largura do parent e o hover-to-expand dispararia em qualquer lugar do app.
+ * `relative` é necessário pro panel `absolute` (floating) ancorar no root.
+ *
+ * Mobile: vira drawer fixed overlay sobre o conteúdo, com transform anim.
+ */
+export declare const sidebarRoot: import('tailwind-variants').TVReturnType<{
+    mobile: {
+        true: string;
+        false: string;
+    };
+    mobileOpen: {
+        true: string;
+        false: string;
+    };
+}, undefined, "relative flex h-screen w-fit bg-bg-sidebar text-fg-default font-sans", {
+    mobile: {
+        true: string;
+        false: string;
+    };
+    mobileOpen: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    mobile: {
+        true: string;
+        false: string;
+    };
+    mobileOpen: {
+        true: string;
+        false: string;
+    };
+}, undefined, "relative flex h-screen w-fit bg-bg-sidebar text-fg-default font-sans", unknown, unknown, undefined>>;
+/** Versão sem h-screen — pra usar em containers de tamanho fixo (docs, modals) */
+export declare const sidebarRootContained: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "relative flex h-full w-fit bg-bg-sidebar text-fg-default font-sans", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "relative flex h-full w-fit bg-bg-sidebar text-fg-default font-sans", unknown, unknown, undefined>>;
+/** Backdrop escuro atrás do drawer mobile — clicável pra fechar */
+export declare const sidebarMobileBackdrop: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "fixed inset-0 z-40 bg-overlay-scrim transition-opacity duration-200", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "fixed inset-0 z-40 bg-overlay-scrim transition-opacity duration-200", unknown, unknown, undefined>>;
+/** Close button (X) flutuante no canto superior direito do drawer mobile */
+export declare const sidebarMobileCloseBtn: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarRail: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarRailBrand: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarRailList: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex flex-col items-center gap-gp-sm flex-1", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex flex-col items-center gap-gp-sm flex-1", unknown, unknown, undefined>>;
+export declare const sidebarRailItem: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string;
+    };
+}, undefined, string[], {
+    active: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/** Pílula esquerda do item ativo (3px x 24px) */
+export declare const sidebarRailActiveBar: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+/** Tooltip CSS-only que aparece no hover do rail item */
+export declare const sidebarRailTooltip: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarRailAdd: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+/**
+ * Wrapper do user — apenas positioning (empurra pro bottom). O visual fica
+ * no conteúdo passado via `user` prop:
+ *   - Quando `user` é ReactNode custom (ex: UserMenu com DropdownMenu), o
+ *     consumer controla 100% do visual.
+ *   - Quando `user` é falsy/undefined, o sidebar-rail renderiza o avatar
+ *     default usando `sidebarRailUserDefault` styles.
+ */
+export declare const sidebarRailUser: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "mt-auto", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "mt-auto", unknown, unknown, undefined>>;
+/** Avatar default (string "SV") — usado quando user prop não foi passado. */
+export declare const sidebarRailUserDefault: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarPanel: import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+    };
+    /** Quando true: overlay absoluto sobre o conteúdo (hover-to-expand). */
+    floating: {
+        true: string;
+    };
+}, undefined, string[], {
+    collapsed: {
+        true: string;
+    };
+    /** Quando true: overlay absoluto sobre o conteúdo (hover-to-expand). */
+    floating: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+    };
+    /** Quando true: overlay absoluto sobre o conteúdo (hover-to-expand). */
+    floating: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarPanelHeader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex items-center h-[60px] flex-none px-[14px] border-b border-border-sidebar", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex items-center h-[60px] flex-none px-[14px] border-b border-border-sidebar", unknown, unknown, undefined>>;
+export declare const sidebarPanelTitle: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarPanelBody: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex-1 overflow-y-auto p-[14px] scrollbar-thin", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex-1 overflow-y-auto p-[14px] scrollbar-thin", unknown, unknown, undefined>>;
+export declare const sidebarPanelGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex flex-col gap-px", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex flex-col gap-px", unknown, unknown, undefined>>;
+export declare const sidebarItem: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+    };
+    subitem: {
+        true: string;
+    };
+}, undefined, string[], {
+    active: {
+        true: string[];
+    };
+    subitem: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+    };
+    subitem: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarItemIcon: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string;
+    };
+    parentActive: {
+        true: string;
+    };
+}, undefined, "flex-none w-[17px] h-[17px] text-fg-muted transition-colors", {
+    active: {
+        true: string;
+    };
+    parentActive: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string;
+    };
+    parentActive: {
+        true: string;
+    };
+}, undefined, "flex-none w-[17px] h-[17px] text-fg-muted transition-colors", unknown, unknown, undefined>>;
+export declare const sidebarItemText: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex-1 min-w-0 whitespace-nowrap overflow-hidden text-ellipsis", unknown, unknown, undefined>>;
+export declare const sidebarPill: import('tailwind-variants').TVReturnType<{
+    kind: {
+        default: string;
+        counter: string;
+        success: string;
+    };
+    active: {
+        true: string;
+    };
+}, undefined, string[], {
+    kind: {
+        default: string;
+        counter: string;
+        success: string;
+    };
+    active: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    kind: {
+        default: string;
+        counter: string;
+        success: string;
+    };
+    active: {
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarSubgroupRoot: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex flex-col gap-px", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex flex-col gap-px", unknown, unknown, undefined>>;
+export declare const sidebarSubgroupChev: import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+    };
+}, undefined, "flex-none w-[13px] h-[13px] text-fg-muted ml-auto transition-transform duration-200", {
+    collapsed: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+    };
+}, undefined, "flex-none w-[13px] h-[13px] text-fg-muted ml-auto transition-transform duration-200", unknown, unknown, undefined>>;
+export declare const sidebarSubgroupList: import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    collapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarSection: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex flex-col gap-px pt-[18px] mt-pad-xl border-t border-border-sidebar", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex flex-col gap-px pt-[18px] mt-pad-xl border-t border-border-sidebar", unknown, unknown, undefined>>;
+export declare const sidebarSectionHeader: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarSectionChev: import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+    };
+}, undefined, "flex-none w-[12px] h-[12px] transition-transform duration-200", {
+    collapsed: {
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+    };
+}, undefined, "flex-none w-[12px] h-[12px] transition-transform duration-200", unknown, unknown, undefined>>;
+export declare const sidebarSectionAdd: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarSectionList: import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+        false: string;
+    };
+    variant: {
+        bookmark: string;
+        chat: string;
+    };
+}, undefined, "flex flex-col gap-px overflow-hidden transition-[max-height,opacity] duration-200 ease-out", {
+    collapsed: {
+        true: string;
+        false: string;
+    };
+    variant: {
+        bookmark: string;
+        chat: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    collapsed: {
+        true: string;
+        false: string;
+    };
+    variant: {
+        bookmark: string;
+        chat: string;
+    };
+}, undefined, "flex flex-col gap-px overflow-hidden transition-[max-height,opacity] duration-200 ease-out", unknown, unknown, undefined>>;
+/** Item das sections (bookmark/chat) — herda visual do sidebarItem subitem */
+export declare const sidebarSectionItem: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarBookmarkDot: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex-none w-[10px] h-[10px] rounded-full", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex-none w-[10px] h-[10px] rounded-full", unknown, unknown, undefined>>;
+export declare const sidebarChatAvatar: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const sidebarChatStatus: import('tailwind-variants').TVReturnType<{
+    status: {
+        online: string;
+        offline: string;
+    };
+}, undefined, "flex-none w-[7px] h-[7px] rounded-full ml-auto", {
+    status: {
+        online: string;
+        offline: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    status: {
+        online: string;
+        offline: string;
+    };
+}, undefined, "flex-none w-[7px] h-[7px] rounded-full ml-auto", unknown, unknown, undefined>>;
+//# sourceMappingURL=sidebar.styles.d.ts.map

package/dist-lib/src/components/ui/MenuSidebar/sidebar.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/MenuSidebar/sidebar.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;GAeG;AAGH;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;mHAgBtB,CAAC;AAEH,kFAAkF;AAClF,eAAO,MAAM,oBAAoB,8TAE/B,CAAC;AAGH,mEAAmE;AACnE,eAAO,MAAM,qBAAqB,gUAEhC,CAAC;AAEH,4EAA4E;AAC5E,eAAO,MAAM,qBAAqB,sMAUhC,CAAC;AAGH,eAAO,MAAM,WAAW,sMAOtB,CAAC;AAEH,eAAO,MAAM,gBAAgB,sMAM3B,CAAC;AAEH,eAAO,MAAM,eAAe,gRAE1B,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;qDAgB1B,CAAC;AAEH,iDAAiD;AACjD,eAAO,MAAM,oBAAoB,sMAK/B,CAAC;AAEH,yDAAyD;AACzD,eAAO,MAAM,kBAAkB,sMAU7B,CAAC;AAEH,eAAO,MAAM,cAAc,sMAQzB,CAAC;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,wMAE1B,CAAC;AAEH,6EAA6E;AAC7E,eAAO,MAAM,sBAAsB,sMAMjC,CAAC;AAGH,eAAO,MAAM,YAAY;;;;IAUrB,wEAAwE;;;;;;;;IAAxE,wEAAwE;;;;;;;;IAAxE,wEAAwE;;;;qDAK1E,CAAC;AAEH,eAAO,MAAM,kBAAkB,oVAE7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,sMAS5B,CAAC;AAEH,eAAO,MAAM,gBAAgB,sRAE3B,CAAC;AAEH,eAAO,MAAM,iBAAiB,kOAE5B,CAAC;AAGH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;qDA+BtB,CAAC;AAEH,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;0GAU1B,CAAC;AAEH,eAAO,MAAM,eAAe,sTAE1B,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;qDAoBtB,CAAC;AAGH,eAAO,MAAM,mBAAmB,kOAE9B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;kIAO9B,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;qDAc9B,CAAC;AAGH,eAAO,MAAM,cAAc,wUAEzB,CAAC;AAEH,eAAO,MAAM,oBAAoB,sMAU/B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;4GAO7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,sMAO5B,CAAC;AAEH,eAAO,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;yIAa7B,CAAC;AAEH,8EAA8E;AAC9E,eAAO,MAAM,kBAAkB,sMAS7B,CAAC;AAEH,eAAO,MAAM,kBAAkB,0QAE7B,CAAC;AAEH,eAAO,MAAM,iBAAiB,sMAM5B,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;6FAS5B,CAAC"}

package/dist-lib/src/components/ui/MenuSidebar/sidebar.types.d.ts

@@ -0,0 +1,104 @@
+import { ReactNode, MouseEvent } from 'react';
+import { LucideIcon } from 'lucide-react';
+export type SidebarBadgeKind = "default" | "counter" | "success";
+export type SidebarMenuItem = {
+    name: string;
+    icon?: LucideIcon;
+    /** Quando presente vira `<a>` — quando ausente vira `<button>` (action) */
+    href?: string;
+    badge?: string;
+    badgeKind?: SidebarBadgeKind;
+    /** Quando presente vira grupo colapsável com submenus (1 nível) */
+    subitems?: SidebarMenuItem[];
+    /** Estado inicial do grupo (apenas quando tem subitems) */
+    defaultOpen?: boolean;
+    onClick?: (e: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void;
+};
+export type SidebarBookmarkItem = {
+    name: string;
+    /** Cor do dot indicador (qualquer cor CSS válida) */
+    color: string;
+    href?: string;
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+};
+export type SidebarChatItem = {
+    name: string;
+    initials: string;
+    /** Cor de fundo do avatar (qualquer cor CSS válida) */
+    color: string;
+    status?: "online" | "offline";
+    href?: string;
+    onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
+};
+export type SidebarSection = {
+    id: string;
+    label: string;
+    variant: "bookmark";
+    items: SidebarBookmarkItem[];
+    defaultOpen?: boolean;
+    onAdd?: () => void;
+} | {
+    id: string;
+    label: string;
+    variant: "chat";
+    items: SidebarChatItem[];
+    defaultOpen?: boolean;
+    onAdd?: () => void;
+};
+export type SidebarContext = {
+    id: string;
+    label: string;
+    icon: LucideIcon;
+    items: SidebarMenuItem[];
+    sections?: SidebarSection[];
+};
+export type SidebarProps = {
+    /** Array de contextos (categorias do rail) */
+    contexts: SidebarContext[];
+    /** Brand mark no topo do rail. Default = logo iGreen */
+    brand?: ReactNode;
+    /** Avatar de usuário no fim do rail. Default = "SV" com cor fixa */
+    user?: ReactNode;
+    /** Mostra botão "+" no fim do rail (entre contextos e user) */
+    showRailAdd?: boolean;
+    onRailAddClick?: () => void;
+    /** Active context — controlled */
+    activeContextId?: string;
+    /** Active context — uncontrolled initial */
+    defaultActiveContextId?: string;
+    onContextChange?: (id: string) => void;
+    /** Active item — controlled (matching by href) */
+    activeItemHref?: string;
+    /** Active item — uncontrolled initial */
+    defaultActiveItemHref?: string;
+    onItemClick?: (item: SidebarMenuItem) => void;
+    /** Panel colapsado (rail-only) — controlled */
+    panelCollapsed?: boolean;
+    /** Panel colapsado — uncontrolled initial */
+    defaultPanelCollapsed?: boolean;
+    onPanelCollapseChange?: (collapsed: boolean) => void;
+    /**
+     * Comportamento de hover-to-expand quando panel está colapsado.
+     * Default: true. Ao passar mouse sobre o sidebar, o panel abre como overlay
+     * absoluto (não empurra o conteúdo). Sai o mouse, recolhe.
+     * Passe `false` pra desabilitar.
+     */
+    expandOnHover?: boolean;
+    /**
+     * Mobile drawer — open/close (controlled).
+     * No mobile, o sidebar vira drawer fixed overlay sobre o conteúdo.
+     */
+    mobileOpen?: boolean;
+    /** Mobile drawer — estado inicial (uncontrolled). Default: false (hidden). */
+    defaultMobileOpen?: boolean;
+    onMobileOpenChange?: (open: boolean) => void;
+    /**
+     * Media query que ativa o modo mobile (drawer).
+     * Default: `(max-width: 767px)` (= breakpoint `md` do Tailwind).
+     */
+    mobileBreakpoint?: string;
+    /** Callback ao clicar no título do panel (ex: abrir context switcher) */
+    onPanelTitleClick?: () => void;
+    className?: string;
+};
+//# sourceMappingURL=sidebar.types.d.ts.map

package/dist-lib/src/components/ui/MenuSidebar/sidebar.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sidebar.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/MenuSidebar/sidebar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAI/C,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAC;AAIjE,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,gBAAgB,CAAC;IAC7B,mEAAmE;IACnE,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAC;IAC7B,2DAA2D;IAC3D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC1E,CAAC;AAIF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,uDAAuD;IACvD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC9B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,cAAc,GACtB;IACE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,UAAU,CAAC;IACpB,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAC7B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,GACD;IACE,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;CACpB,CAAC;AAIN,MAAM,MAAM,cAAc,GAAG;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,UAAU,CAAC;IACjB,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC;CAC7B,CAAC;AAIF,MAAM,MAAM,YAAY,GAAG;IACzB,8CAA8C;IAC9C,QAAQ,EAAE,cAAc,EAAE,CAAC;IAE3B,wDAAwD;IACxD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,oEAAoE;IACpE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAE5B,kCAAkC;IAClC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,4CAA4C;IAC5C,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAEvC,kDAAkD;IAClD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,yCAAyC;IACzC,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;IAE9C,+CAA+C;IAC/C,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,6CAA6C;IAC7C,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,qBAAqB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAErD;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,8EAA8E;IAC9E,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7C;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,yEAAyE;IACzE,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/dist-lib/src/components/ui/MenuSidebar/use-media-query.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Reactive media query matcher.
+ *
+ * Re-renderiza quando o resultado da media query muda (resize do viewport,
+ * mudança de orientação, etc).
+ *
+ * Uso:
+ *   const isMobile = useMediaQuery("(max-width: 767px)");
+ */
+export declare function useMediaQuery(query: string): boolean;
+//# sourceMappingURL=use-media-query.d.ts.map

package/dist-lib/src/components/ui/MenuSidebar/use-media-query.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/MenuSidebar/use-media-query.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAgBpD"}

package/dist-lib/src/components/ui/MenuSidebar/use-sidebar-state.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Hook genérico controlled/uncontrolled.
+ * - Se `controlledValue` for fornecido, opera em modo controlled.
+ * - Caso contrário, usa o `defaultValue` como inicial e gerencia internamente.
+ */
+export declare function useControllable<T>(controlledValue: T | undefined, defaultValue: T, onChange?: (value: T) => void): [T, (value: T) => void];
+//# sourceMappingURL=use-sidebar-state.d.ts.map

package/dist-lib/src/components/ui/MenuSidebar/use-sidebar-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-sidebar-state.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/MenuSidebar/use-sidebar-state.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,EAC/B,eAAe,EAAE,CAAC,GAAG,SAAS,EAC9B,YAAY,EAAE,CAAC,EACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAC5B,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC,CAczB"}

package/dist-lib/src/components/ui/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal } from './modal';
+export type { ModalProps, ModalAction, ModalSize } from './modal';
+//# sourceMappingURL=index.d.ts.map

package/dist-lib/src/components/ui/Modal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Modal/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}

package/dist-lib/src/components/ui/Modal/modal.d.ts

@@ -0,0 +1,78 @@
+import { ReactNode } from 'react';
+export type ModalSize = "sm" | "md" | "lg";
+export type ModalAction = {
+    /** Texto do botão. */
+    label: ReactNode;
+    /** Callback do click. */
+    onClick?: () => void;
+    /** Estado disabled. */
+    disabled?: boolean;
+    /** Loading com spinner (usa o do <Button>). */
+    loading?: boolean;
+    /** Quando true, pinta o botão com cor critical (destrutivo). */
+    danger?: boolean;
+};
+export type ModalProps = {
+    /** Controlled open. */
+    open: boolean;
+    /** Callback quando o modal pede pra fechar (X, ESC, overlay click, ou ação). */
+    onClose: () => void;
+    /**
+     * Ícone do header — renderizado dentro de um container 40×40 à esquerda.
+     * Passe o lucide pronto com `className="size-icon-md"` e `strokeWidth={1.7}`.
+     * Quando ausente, o header não tem icon container (texto começa à esquerda).
+     */
+    icon?: ReactNode;
+    /** Título principal — 17px / 700. */
+    title?: ReactNode;
+    /** Descrição/subtítulo — 12.5px / fg-muted. */
+    description?: ReactNode;
+    /** Conteúdo do body — flex-col com gap 18px entre filhos. */
+    children?: ReactNode;
+    /**
+     * Ação primária — botão filled (default brand, critical quando `danger`).
+     * Fica sempre na ponta direita do footer.
+     */
+    primaryAction?: ModalAction;
+    /**
+     * Ação secundária — botão outline secondary.
+     * Default label "Cancelar". Default onClick = onClose.
+     */
+    secondaryAction?: ModalAction;
+    /**
+     * Ação terciária — opcional. Quando presente, vai pra ESQUERDA do footer
+     * (justify-between). Use pra ações destrutivas (delete) ou neutras (ajuda).
+     * Estilo: ghost critical quando `danger`, ghost secondary caso contrário.
+     */
+    tertiaryAction?: ModalAction;
+    /**
+     * Se passado, substitui inteiramente as 3 actions estruturadas.
+     * Use quando precisar de layout custom (links, multi-step indicator, etc).
+     */
+    footer?: ReactNode;
+    /**
+     * Largura máxima do modal:
+     *   - sm: 440px
+     *   - md: 540px (default — match TblViewsModal sandbox)
+     *   - lg: 720px
+     */
+    size?: ModalSize;
+    /** Esconde o X de fechar no canto superior direito. */
+    hideClose?: boolean;
+    /** Click no overlay fecha o modal. Default true (comportamento padrão Dialog). */
+    closeOnOverlay?: boolean;
+    /** ClassName extra no DialogContent (root). */
+    className?: string;
+};
+/**
+ * Modal — composto sobre o `<Dialog>` (shadcn) com estrutura de header rico
+ * (icon + título + descrição), body livre via children, e footer flexível
+ * (até 3 actions estruturadas OU footer custom via slot).
+ *
+ * Visual alinhado com o `TblViewsModal` do sandbox `/design-and-table-v2`:
+ * dialog 540px (md), header com feature-icon 40×40, footer com botões DS.
+ *
+ * Quando precisar de modal de confirmação destrutiva simples, use `<AlertModal>`.
+ */
+export declare function Modal({ open, onClose, icon, title, description, children, primaryAction, secondaryAction, tertiaryAction, footer, size, hideClose, closeOnOverlay, className, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=modal.d.ts.map

package/dist-lib/src/components/ui/Modal/modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Modal/modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBvC,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE3C,MAAM,MAAM,WAAW,GAAG;IACxB,sBAAsB;IACtB,KAAK,EAAE,SAAS,CAAC;IACjB,yBAAyB;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,uBAAuB;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gEAAgE;IAChE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IACvB,uBAAuB;IACvB,IAAI,EAAE,OAAO,CAAC;IACd,gFAAgF;IAChF,OAAO,EAAE,MAAM,IAAI,CAAC;IAGpB;;;;OAIG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+CAA+C;IAC/C,WAAW,CAAC,EAAE,SAAS,CAAC;IAGxB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,SAAS,CAAC;IAGrB;;;OAGG;IACH,aAAa,CAAC,EAAE,WAAW,CAAC;IAC5B;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B;;;;OAIG;IACH,cAAc,CAAC,EAAE,WAAW,CAAC;IAG7B;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAGnB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB,uDAAuD;IACvD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kFAAkF;IAClF,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB,+CAA+C;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF;;;;;;;;;GASG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,QAAQ,EACR,aAAa,EACb,eAAe,EACf,cAAc,EACd,MAAM,EACN,IAAW,EACX,SAAiB,EACjB,cAAqB,EACrB,SAAS,GACV,EAAE,UAAU,2CAyEZ"}

package/dist-lib/src/components/ui/Modal/modal.styles.d.ts

@@ -0,0 +1,74 @@
+/**
+ * Slots tv() pro <Modal>.
+ *
+ * Estrutura visual idêntica ao TblViewsModal do sandbox (/design-and-table-v2):
+ *   header (icon + title + sub)  →  body livre (children)  →  footer (actions)
+ *
+ * Valores fora da escala DS (gaps 14/18/3px, padding 22px, fonts 12.5/13.5/17px)
+ * são arbitrary literal — calibração visual exata do sandbox. Onde o token
+ * semantico bate (form-lg=40, form-md=36, radius-lg=10, pad-4xl=24), usar token.
+ */
+export declare const dialog: import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const closeBtn: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const head: import('tailwind-variants').TVReturnType<{
+    withIcon: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], {
+    withIcon: {
+        false: string;
+        true: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    withIcon: {
+        false: string;
+        true: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const headIcon: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const headTitleWrap: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const title: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const description: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "m-0 text-body-xs font-normal text-fg-muted leading-[1.45]", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "m-0 text-body-xs font-normal text-fg-muted leading-[1.45]", unknown, unknown, undefined>>;
+export declare const body: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex flex-col gap-[18px] px-pad-4xl py-[22px]", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex flex-col gap-[18px] px-pad-4xl py-[22px]", unknown, unknown, undefined>>;
+/**
+ * Default: justify-end (todos os botões à direita).
+ * Com tertiary: justify-between (tertiary à esquerda, secondary+primary à direita).
+ */
+export declare const foot: import('tailwind-variants').TVReturnType<{
+    layout: {
+        end: string;
+        between: string;
+    };
+}, undefined, string[], {
+    layout: {
+        end: string;
+        between: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    layout: {
+        end: string;
+        between: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+/** Grupo da direita do footer (secondary + primary) quando há tertiary à esquerda. */
+export declare const footRight: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "flex items-center gap-gp-lg", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "flex items-center gap-gp-lg", unknown, unknown, undefined>>;
+//# sourceMappingURL=modal.styles.d.ts.map

package/dist-lib/src/components/ui/Modal/modal.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modal.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/Modal/modal.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;GASG;AAIH,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;qDAkBjB,CAAC;AAIH,eAAO,MAAM,QAAQ,sMAWnB,CAAC;AAIH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;qDAUf,CAAC;AAEH,eAAO,MAAM,QAAQ,sMAOnB,CAAC;AAEH,eAAO,MAAM,aAAa,sMAMxB,CAAC;AAEH,eAAO,MAAM,KAAK,sMAOhB,CAAC;AAEH,eAAO,MAAM,WAAW,4SAEtB,CAAC;AAIH,eAAO,MAAM,IAAI,oRAEf,CAAC;AAGH;;;GAGG;AACH,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;qDAYf,CAAC;AAEH,sFAAsF;AACtF,eAAO,MAAM,SAAS,gPAEpB,CAAC"}

package/dist-lib/src/components/ui/PageHeader/index.d.ts

@@ -0,0 +1,4 @@
+export { PageHeader } from './page-header';
+export type { PageHeaderProps } from './page-header.types';
+export { pageHeaderStyles } from './page-header.styles';
+//# sourceMappingURL=index.d.ts.map

package/dist-lib/src/components/ui/PageHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/ui/PageHeader/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC"}

package/dist-lib/src/components/ui/PageHeader/page-header.d.ts

@@ -0,0 +1,41 @@
+import { PageHeaderProps } from './page-header.types';
+/**
+ * PageHeader — bloco de título reutilizável colocado dentro do body do
+ * `<AppShell>`. Cobre o caso comum:
+ *
+ *   - Título (h1) + descrição (sub) + badge (chip ao lado)
+ *   - Slot de ações à direita (botões / dropdowns)
+ *   - Slot livre abaixo pra tabs, filtros ou qualquer conteúdo extra
+ *
+ * Mobile-ready por default:
+ *   - Title/description/badge somem em viewports pequenas
+ *     (Header global do AppShell já mostra title/breadcrumb)
+ *   - O último botão do `actions` vira fluid (CTA full-width)
+ *
+ * @example
+ * ```tsx
+ * <PageHeader
+ *   title="Clientes"
+ *   description="Gerencie sua base de clientes."
+ *   badge={<Chip color="primary" variant="soft">87 registros</Chip>}
+ *   actions={
+ *     <>
+ *       <Button variant="outline" size="icon-md"><MoreHorizontal /></Button>
+ *       <Button variant="filled" color="primary">Novo cliente</Button>
+ *     </>
+ *   }
+ * />
+ * ```
+ *
+ * @example com tabs abaixo (slot children):
+ * ```tsx
+ * <PageHeader title="Configurações" actions={<Button>Salvar</Button>}>
+ *   <Tabs ... />
+ * </PageHeader>
+ * ```
+ */
+export declare function PageHeader({ title, description, badge, actions, children, hideTextOnMobile, fluidPrimaryOnMobile, className, }: PageHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageHeader {
+    var displayName: string;
+}
+//# sourceMappingURL=page-header.d.ts.map