@lucasbernardosn/react-ui 0.0.0-stage → 0.2.0

package/dist/components/disclosure/tabs/tabs-root.js

@@ -0,0 +1,53 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { TabsContextProvider } from "./use-tabs-context.js";
+import { tabsRootVariants } from "./tabs-root-variants.js";
+import { createSplitProps } from "@lucasbernardosn/utils";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/disclosure/tabs/tabs-root.tsx
+const splitVariantProps = createSplitProps();
+/**
+* Agrupa a lista de tabs e os painéis. `variant`, `fitted` e `justify` seguem
+* por contexto para `List`, `Tab` e `Indicator`; `colorScheme` vira variáveis
+* CSS (`--tabs-*`) lidas por todas as partes. Com
+* `orientation="vertical"`, a lista fica ao lado dos painéis.
+*
+* O fundo da tab ativa no `enclosed` e no `outline`, e o do `Indicator`, vem de
+* `--tabs-surface-bg` (`gray-1`). Sobre outra superfície, troque pela cor dela:
+* `className="[--tabs-surface-bg:var(--color-gray-2)]"`.
+*
+* @example
+* ```tsx
+* <Tabs.Root defaultValue="conta">
+*   <Tabs.List>
+*     <Tabs.Tab value="conta">Conta</Tabs.Tab>
+*     <Tabs.Tab value="senha">Senha</Tabs.Tab>
+*     <Tabs.Indicator />
+*   </Tabs.List>
+*   <Tabs.Panel value="conta">…</Tabs.Panel>
+*   <Tabs.Panel value="senha">…</Tabs.Panel>
+* </Tabs.Root>
+* ```
+*/
+const TabsRoot = (props) => {
+	const [variantProps, elementProps] = splitVariantProps(props, [
+		"colorScheme",
+		"fitted",
+		"justify",
+		"variant"
+	]);
+	const { className, ...rest } = elementProps;
+	return /* @__PURE__ */ jsx(TabsContextProvider, {
+		value: variantProps,
+		children: /* @__PURE__ */ jsx(Tabs.Root, {
+			"data-component": "Tabs.Root",
+			className: mergeStateClassNames(tabsRootVariants(variantProps), className),
+			...rest
+		})
+	});
+};
+TabsRoot.displayName = "Tabs.Root";
+//#endregion
+export { TabsRoot };
+
+//# sourceMappingURL=tabs-root.js.map

package/dist/components/disclosure/tabs/tabs-root.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-root.js","names":["BaseTabs"],"sources":["../../../../src/components/disclosure/tabs/tabs-root.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { createSplitProps, type MergeOverride } from '@lucasbernardosn/utils';\nimport { mergeStateClassNames } from '#utils';\nimport { tabsRootVariants } from './tabs-root-variants';\nimport { TabsContextProvider, type TabsVariants } from './use-tabs-context';\n\nexport type TabsRootProps = MergeOverride<BaseTabs.Root.Props, TabsVariants>;\n\nexport type TabsRootState = BaseTabs.Root.State;\n\nexport type TabsRootChangeEventDetails = BaseTabs.Root.ChangeEventDetails;\n\nexport type TabsRootChangeEventReason = BaseTabs.Root.ChangeEventReason;\n\nexport type TabsRootOrientation = BaseTabs.Root.Orientation;\n\nconst splitVariantProps = createSplitProps<TabsVariants>();\n\n/**\n * Agrupa a lista de tabs e os painéis. `variant`, `fitted` e `justify` seguem\n * por contexto para `List`, `Tab` e `Indicator`; `colorScheme` vira variáveis\n * CSS (`--tabs-*`) lidas por todas as partes. Com\n * `orientation=\"vertical\"`, a lista fica ao lado dos painéis.\n *\n * O fundo da tab ativa no `enclosed` e no `outline`, e o do `Indicator`, vem de\n * `--tabs-surface-bg` (`gray-1`). Sobre outra superfície, troque pela cor dela:\n * `className=\"[--tabs-surface-bg:var(--color-gray-2)]\"`.\n *\n * @example\n * ```tsx\n * <Tabs.Root defaultValue=\"conta\">\n *   <Tabs.List>\n *     <Tabs.Tab value=\"conta\">Conta</Tabs.Tab>\n *     <Tabs.Tab value=\"senha\">Senha</Tabs.Tab>\n *     <Tabs.Indicator />\n *   </Tabs.List>\n *   <Tabs.Panel value=\"conta\">…</Tabs.Panel>\n *   <Tabs.Panel value=\"senha\">…</Tabs.Panel>\n * </Tabs.Root>\n * ```\n */\nexport const TabsRoot = (props: TabsRootProps) => {\n  const [variantProps, elementProps] = splitVariantProps(props, [\n    'colorScheme',\n    'fitted',\n    'justify',\n    'variant',\n  ]);\n\n  const { className, ...rest } = elementProps;\n\n  return (\n    <TabsContextProvider value={variantProps}>\n      <BaseTabs.Root\n        data-component=\"Tabs.Root\"\n        className={mergeStateClassNames(\n          tabsRootVariants(variantProps),\n          className,\n        )}\n        {...rest}\n      />\n    </TabsContextProvider>\n  );\n};\n\nTabsRoot.displayName = 'Tabs.Root';\n"],"mappings":";;;;;;;AAgBA,MAAM,oBAAoB,iBAA+B;;;;;;;;;;;;;;;;;;;;;;;;AAyBzD,MAAa,YAAY,UAAyB;CAChD,MAAM,CAAC,cAAc,gBAAgB,kBAAkB,OAAO;EAC5D;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,OACE,oBAAC,qBAAD;EAAqB,OAAO;EAC1B,UAAA,oBAACA,KAAS,MAAV;GACE,kBAAe;GACf,WAAW,qBACT,iBAAiB,YAAY,GAC7B,SACF;GACA,GAAI;EACL,CAAA;CACkB,CAAA;AAEzB;AAEA,SAAS,cAAc"}

package/dist/components/disclosure/tabs/tabs-tab-variants.d.ts

@@ -0,0 +1,13 @@
+//#region src/components/disclosure/tabs/tabs-tab-variants.d.ts
+/**
+ * Cada variante pinta a tab ativa, e as classes `group-has-data-[component='Tabs.Indicator']`
+ * desligam essa pintura quando há um Indicator na List: ele passa a ser o único a marcar o
+ * estado, e o deslize aparece. Até o Base UI medir a tab, o Indicator não existe e a própria tab
+ * se pinta.
+ */
+export declare const tabsTabVariants: (props?: ({
+  fitted?: boolean | null | undefined;
+  variant?: "line" | "subtle" | "outline" | "plain" | "enclosed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=tabs-tab-variants.d.ts.map

package/dist/components/disclosure/tabs/tabs-tab-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab-variants.d.ts","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-tab-variants.ts"],"mappings":";;;;;;;qBASa,kBAAe;;;6CAiH3B"}

package/dist/components/disclosure/tabs/tabs-tab-variants.js

@@ -0,0 +1,98 @@
+import { tabsDefaultVariants } from "./use-tabs-context.js";
+import { cva } from "class-variance-authority";
+//#region src/components/disclosure/tabs/tabs-tab-variants.ts
+/**
+* Cada variante pinta a tab ativa, e as classes `group-has-data-[component='Tabs.Indicator']`
+* desligam essa pintura quando há um Indicator na List: ele passa a ser o único a marcar o
+* estado, e o deslize aparece. Até o Base UI medir a tab, o Indicator não existe e a própria tab
+* se pinta.
+*/
+const tabsTabVariants = cva([
+	"relative",
+	"inline-flex",
+	"items-center",
+	"shrink-0",
+	"gap-2",
+	"h-(--tabs-height)",
+	"min-w-(--tabs-height)",
+	"px-4",
+	"whitespace-nowrap",
+	"text-sm",
+	"font-medium",
+	"text-gray-11",
+	"data-active:text-(--tabs-accent-fg)",
+	"corner-squircle",
+	"select-none",
+	"cursor-pointer",
+	"transition-[color]",
+	"ring-(--tabs-accent)",
+	"focus-ring-inside",
+	"[--focus-ring-width:2px]",
+	"focus-visible:z-10",
+	"data-disabled:cursor-not-allowed",
+	"data-disabled:opacity-50",
+	"data-[orientation=horizontal]:justify-center",
+	"data-[orientation=vertical]:justify-start"
+], {
+	variants: {
+		fitted: {
+			true: ["flex-1", "text-center"],
+			false: []
+		},
+		variant: {
+			line: [
+				"after:absolute",
+				"after:content-[\"\"]",
+				"after:bg-(--tabs-accent)",
+				"after:opacity-0",
+				"after:transition-opacity",
+				"data-active:after:opacity-100",
+				"data-[orientation=horizontal]:after:inset-x-0",
+				"data-[orientation=horizontal]:after:-bottom-px",
+				"data-[orientation=horizontal]:after:h-0.5",
+				"data-[orientation=vertical]:after:inset-y-0",
+				"data-[orientation=vertical]:after:-inset-e-px",
+				"data-[orientation=vertical]:after:w-0.5",
+				"group-has-data-[component='Tabs.Indicator']/tabs-list:after:hidden"
+			],
+			subtle: [
+				"rounded-(--tabs-trigger-radius)",
+				"data-active:bg-(--tabs-subtle-bg)",
+				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent"
+			],
+			enclosed: [
+				"h-[calc(var(--tabs-height)-0.5rem)]",
+				"rounded-(--tabs-trigger-radius)",
+				"data-active:bg-(--tabs-surface-bg)",
+				"data-active:shadow-xs",
+				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent",
+				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:shadow-none"
+			],
+			outline: [
+				"border",
+				"border-transparent",
+				"data-active:border-gray-alpha-6",
+				"data-active:bg-(--tabs-surface-bg)",
+				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:border-transparent",
+				"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent",
+				"data-[orientation=horizontal]:rounded-t-(--tabs-trigger-radius)",
+				"data-[orientation=horizontal]:-mb-px",
+				"data-[orientation=horizontal]:not-last:-me-px",
+				"data-[orientation=horizontal]:data-active:border-b-transparent",
+				"data-[orientation=vertical]:rounded-s-(--tabs-trigger-radius)",
+				"data-[orientation=vertical]:-me-px",
+				"data-[orientation=vertical]:not-last:-mb-px",
+				"data-[orientation=vertical]:data-active:border-e-transparent"
+			],
+			plain: ["rounded-(--tabs-trigger-radius)"]
+		}
+	},
+	defaultVariants: {
+		fitted: tabsDefaultVariants.fitted,
+		variant: tabsDefaultVariants.variant
+	}
+});
+//#endregion
+export { tabsTabVariants };
+
+//# sourceMappingURL=tabs-tab-variants.js.map

package/dist/components/disclosure/tabs/tabs-tab-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab-variants.js","names":[],"sources":["../../../../src/components/disclosure/tabs/tabs-tab-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport { tabsDefaultVariants } from './use-tabs-context';\n\n/**\n * Cada variante pinta a tab ativa, e as classes `group-has-data-[component='Tabs.Indicator']`\n * desligam essa pintura quando há um Indicator na List: ele passa a ser o único a marcar o\n * estado, e o deslize aparece. Até o Base UI medir a tab, o Indicator não existe e a própria tab\n * se pinta.\n */\nexport const tabsTabVariants = cva(\n  [\n    'relative',\n\n    'inline-flex',\n    'items-center',\n    'shrink-0',\n    'gap-2',\n\n    'h-(--tabs-height)',\n    'min-w-(--tabs-height)',\n\n    'px-4',\n\n    'whitespace-nowrap',\n    'text-sm',\n    'font-medium',\n    'text-gray-11',\n    'data-active:text-(--tabs-accent-fg)',\n\n    'corner-squircle',\n\n    'select-none',\n    'cursor-pointer',\n    'transition-[color]',\n\n    'ring-(--tabs-accent)',\n    'focus-ring-inside',\n    '[--focus-ring-width:2px]',\n    'focus-visible:z-10',\n\n    'data-disabled:cursor-not-allowed',\n    'data-disabled:opacity-50',\n\n    'data-[orientation=horizontal]:justify-center',\n    'data-[orientation=vertical]:justify-start',\n  ],\n  {\n    variants: {\n      fitted: {\n        true: ['flex-1', 'text-center'],\n        false: [],\n      },\n      variant: {\n        // Faixa que avança 1px sobre a borda da List.\n        line: [\n          'after:absolute',\n          'after:content-[\"\"]',\n\n          'after:bg-(--tabs-accent)',\n          'after:opacity-0',\n          'after:transition-opacity',\n\n          'data-active:after:opacity-100',\n\n          'data-[orientation=horizontal]:after:inset-x-0',\n          'data-[orientation=horizontal]:after:-bottom-px',\n          'data-[orientation=horizontal]:after:h-0.5',\n\n          'data-[orientation=vertical]:after:inset-y-0',\n          'data-[orientation=vertical]:after:-inset-e-px',\n          'data-[orientation=vertical]:after:w-0.5',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:after:hidden\",\n        ],\n        subtle: [\n          'rounded-(--tabs-trigger-radius)',\n\n          'data-active:bg-(--tabs-subtle-bg)',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n        ],\n        enclosed: [\n          // A lista tem `p-1`: a tab desconta os dois lados para a lista ficar na altura da lista.\n          'h-[calc(var(--tabs-height)-0.5rem)]',\n\n          'rounded-(--tabs-trigger-radius)',\n\n          'data-active:bg-(--tabs-surface-bg)',\n          'data-active:shadow-xs',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:shadow-none\",\n        ],\n        outline: [\n          'border',\n          'border-transparent',\n\n          'data-active:border-gray-alpha-6',\n          'data-active:bg-(--tabs-surface-bg)',\n\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:border-transparent\",\n          \"group-has-data-[component='Tabs.Indicator']/tabs-list:data-active:bg-transparent\",\n\n          // Sobrepõe 1px da borda da List e da tab vizinha.\n          'data-[orientation=horizontal]:rounded-t-(--tabs-trigger-radius)',\n          'data-[orientation=horizontal]:-mb-px',\n          'data-[orientation=horizontal]:not-last:-me-px',\n          'data-[orientation=horizontal]:data-active:border-b-transparent',\n\n          'data-[orientation=vertical]:rounded-s-(--tabs-trigger-radius)',\n          'data-[orientation=vertical]:-me-px',\n          'data-[orientation=vertical]:not-last:-mb-px',\n          'data-[orientation=vertical]:data-active:border-e-transparent',\n        ],\n        plain: ['rounded-(--tabs-trigger-radius)'],\n      },\n    },\n    defaultVariants: {\n      fitted: tabsDefaultVariants.fitted,\n      variant: tabsDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;;;;;;;;AASA,MAAa,kBAAkB,IAC7B;CACE;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CAEA;CACA;CACA;CACA;CACA;CAEA;CAEA;CACA;CACA;CAEA;CACA;CACA;CACA;CAEA;CACA;CAEA;CACA;AACF,GACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM,CAAC,UAAU,aAAa;GAC9B,OAAO,CAAC;EACV;EACA,SAAS;GAEP,MAAM;IACJ;IACA;IAEA;IACA;IACA;IAEA;IAEA;IACA;IACA;IAEA;IACA;IACA;IAEA;GACF;GACA,QAAQ;IACN;IAEA;IAEA;GACF;GACA,UAAU;IAER;IAEA;IAEA;IACA;IAEA;IACA;GACF;GACA,SAAS;IACP;IACA;IAEA;IACA;IAEA;IACA;IAGA;IACA;IACA;IACA;IAEA;IACA;IACA;IACA;GACF;GACA,OAAO,CAAC,iCAAiC;EAC3C;CACF;CACA,iBAAiB;EACf,QAAQ,oBAAoB;EAC5B,SAAS,oBAAoB;CAC/B;AACF,CACF"}

package/dist/components/disclosure/tabs/tabs-tab.d.ts

@@ -0,0 +1,14 @@
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/disclosure/tabs/tabs-tab.d.ts
+export type TabsTabProps = Tabs.Tab.Props;
+export type TabsTabState = Tabs.Tab.State;
+/**
+ * O botão de cada tab. O `value` liga ao `Tabs.Panel` de mesmo valor. Para
+ * renderizar um link, use `render` com `nativeButton={false}`.
+ */
+export declare const TabsTab: {
+  (props: TabsTabProps): import("react").JSX.Element;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=tabs-tab.d.ts.map

package/dist/components/disclosure/tabs/tabs-tab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab.d.ts","names":["BaseTabs"],"sources":["../../../../src/components/disclosure/tabs/tabs-tab.tsx"],"mappings":";;YAKY,eAAeA,KAAS,IAAI;YAE5B,eAAeA,KAAS,IAAI;;;;;qBAM3B;GAAkB,OAAA,+BAAY,IAAA"}

package/dist/components/disclosure/tabs/tabs-tab.js

@@ -0,0 +1,27 @@
+import { mergeStateClassNames } from "../../../utils/merge-state-class-names.js";
+import { useTabsContext } from "./use-tabs-context.js";
+import { tabsTabVariants } from "./tabs-tab-variants.js";
+import { jsx } from "react/jsx-runtime";
+import { Tabs } from "@base-ui/react/tabs";
+//#region src/components/disclosure/tabs/tabs-tab.tsx
+/**
+* O botão de cada tab. O `value` liga ao `Tabs.Panel` de mesmo valor. Para
+* renderizar um link, use `render` com `nativeButton={false}`.
+*/
+const TabsTab = (props) => {
+	const { className, ...rest } = props;
+	const { fitted, variant } = useTabsContext();
+	return /* @__PURE__ */ jsx(Tabs.Tab, {
+		"data-component": "Tabs.Tab",
+		className: mergeStateClassNames(tabsTabVariants({
+			fitted,
+			variant
+		}), className),
+		...rest
+	});
+};
+TabsTab.displayName = "Tabs.Tab";
+//#endregion
+export { TabsTab };
+
+//# sourceMappingURL=tabs-tab.js.map

package/dist/components/disclosure/tabs/tabs-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-tab.js","names":["BaseTabs"],"sources":["../../../../src/components/disclosure/tabs/tabs-tab.tsx"],"sourcesContent":["import { Tabs as BaseTabs } from '@base-ui/react/tabs';\nimport { mergeStateClassNames } from '#utils';\nimport { tabsTabVariants } from './tabs-tab-variants';\nimport { useTabsContext } from './use-tabs-context';\n\nexport type TabsTabProps = BaseTabs.Tab.Props;\n\nexport type TabsTabState = BaseTabs.Tab.State;\n\n/**\n * O botão de cada tab. O `value` liga ao `Tabs.Panel` de mesmo valor. Para\n * renderizar um link, use `render` com `nativeButton={false}`.\n */\nexport const TabsTab = (props: TabsTabProps) => {\n  const { className, ...rest } = props;\n\n  const { fitted, variant } = useTabsContext();\n\n  return (\n    <BaseTabs.Tab\n      data-component=\"Tabs.Tab\"\n      className={mergeStateClassNames(\n        tabsTabVariants({ fitted, variant }),\n        className,\n      )}\n      {...rest}\n    />\n  );\n};\n\nTabsTab.displayName = 'Tabs.Tab';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,WAAW,UAAwB;CAC9C,MAAM,EAAE,WAAW,GAAG,SAAS;CAE/B,MAAM,EAAE,QAAQ,YAAY,eAAe;CAE3C,OACE,oBAACA,KAAS,KAAV;EACE,kBAAe;EACf,WAAW,qBACT,gBAAgB;GAAE;GAAQ;EAAQ,CAAC,GACnC,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,QAAQ,cAAc"}

package/dist/components/disclosure/tabs/use-tabs-context.d.ts

@@ -0,0 +1,37 @@
+import { ColorSchemeCore } from "../../../types/color-scheme.js";
+//#region src/components/disclosure/tabs/use-tabs-context.d.ts
+/**
+ * Variantes do Tabs. Informadas no `Tabs.Root` e repassadas a todas as partes
+ * por contexto.
+ */
+export type TabsVariants = {
+  /**
+   * Cor da tab ativa, do indicador e do anel de foco.
+   *
+   * @default 'gray'
+   */
+  colorScheme?: ColorSchemeCore;
+  /**
+   * Desenho da lista e da tab ativa.
+   *
+   * @default 'line'
+   */
+  variant?: 'line' | 'subtle' | 'enclosed' | 'outline' | 'plain';
+  /**
+   * Faz as tabs dividirem o espaço da lista igualmente. Na horizontal, a lista
+   * ocupa a largura toda.
+   *
+   * @default false
+   */
+  fitted?: boolean;
+  /**
+   * Alinhamento das tabs dentro da lista.
+   *
+   * @default 'start'
+   */
+  justify?: 'start' | 'center' | 'end';
+};
+export declare const tabsDefaultVariants: Required<TabsVariants>;
+export declare const TabsContextProvider: import("react").Provider<TabsVariants>, useTabsContext: () => TabsVariants;
+//#endregion
+//# sourceMappingURL=use-tabs-context.d.ts.map

package/dist/components/disclosure/tabs/use-tabs-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-context.d.ts","names":[],"sources":["../../../../src/components/disclosure/tabs/use-tabs-context.ts"],"mappings":";;;;;;YAOY;;;;;;EAMV,cAAc;;;;;;EAMd;;;;;;;EAOA;;;;;;EAMA;;qBAGW,qBAAqB,SAAS;qBAO7B,qCAAmB,SAAA,eAAE,sBAAc"}

package/dist/components/disclosure/tabs/use-tabs-context.js

@@ -0,0 +1,16 @@
+import { createContext } from "@lucasbernardosn/react-utils";
+//#region src/components/disclosure/tabs/use-tabs-context.ts
+const tabsDefaultVariants = {
+	colorScheme: "gray",
+	variant: "line",
+	fitted: false,
+	justify: "start"
+};
+const [TabsContextProvider, useTabsContext] = createContext({
+	name: "TabsContext",
+	providers: ["Tabs.Root"]
+});
+//#endregion
+export { TabsContextProvider, tabsDefaultVariants, useTabsContext };
+
+//# sourceMappingURL=use-tabs-context.js.map

package/dist/components/disclosure/tabs/use-tabs-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tabs-context.js","names":[],"sources":["../../../../src/components/disclosure/tabs/use-tabs-context.ts"],"sourcesContent":["import { createContext } from '@lucasbernardosn/react-utils';\nimport type { ColorSchemeCore } from '#types';\n\n/**\n * Variantes do Tabs. Informadas no `Tabs.Root` e repassadas a todas as partes\n * por contexto.\n */\nexport type TabsVariants = {\n  /**\n   * Cor da tab ativa, do indicador e do anel de foco.\n   *\n   * @default 'gray'\n   */\n  colorScheme?: ColorSchemeCore;\n  /**\n   * Desenho da lista e da tab ativa.\n   *\n   * @default 'line'\n   */\n  variant?: 'line' | 'subtle' | 'enclosed' | 'outline' | 'plain';\n  /**\n   * Faz as tabs dividirem o espaço da lista igualmente. Na horizontal, a lista\n   * ocupa a largura toda.\n   *\n   * @default false\n   */\n  fitted?: boolean;\n  /**\n   * Alinhamento das tabs dentro da lista.\n   *\n   * @default 'start'\n   */\n  justify?: 'start' | 'center' | 'end';\n};\n\nexport const tabsDefaultVariants: Required<TabsVariants> = {\n  colorScheme: 'gray',\n  variant: 'line',\n  fitted: false,\n  justify: 'start',\n};\n\nexport const [TabsContextProvider, useTabsContext] =\n  createContext<TabsVariants>({\n    name: 'TabsContext',\n    providers: ['Tabs.Root'],\n  });\n"],"mappings":";;AAmCA,MAAa,sBAA8C;CACzD,aAAa;CACb,SAAS;CACT,QAAQ;CACR,SAAS;AACX;AAEA,MAAa,CAAC,qBAAqB,kBACjC,cAA4B;CAC1B,MAAM;CACN,WAAW,CAAC,WAAW;AACzB,CAAC"}

package/dist/components/display/card/card-body.d.ts

@@ -0,0 +1,16 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/card/card-body.d.ts
+export type CardBodyProps = useRender.ComponentProps<'div'>;
+/**
+ * Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`
+ * para a base.
+ *
+ * Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes (tabela no README de `display`). Uma
+ * mudança aqui vale para a cópia na mesma rodada.
+ */
+export declare const CardBody: {
+  (props: CardBodyProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=card-body.d.ts.map

package/dist/components/display/card/card-body.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-body.d.ts","names":[],"sources":["../../../../src/components/display/card/card-body.tsx"],"mappings":";;YAGY,gBAAgB,UAAU;;;;;;;;qBASzB;GAAmB,OAAA,gCAAa,+CAAA"}

package/dist/components/display/card/card-body.js

@@ -0,0 +1,32 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/card/card-body.tsx
+/**
+* Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`
+* para a base.
+*
+* Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes (tabela no README de `display`). Uma
+* mudança aqui vale para a cópia na mesma rodada.
+*/
+const CardBody = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Card.Body",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-1",
+			"flex-col",
+			"p-(--card-padding)"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+CardBody.displayName = "Card.Body";
+//#endregion
+export { CardBody };
+
+//# sourceMappingURL=card-body.js.map

package/dist/components/display/card/card-body.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-body.js","names":[],"sources":["../../../../src/components/display/card/card-body.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardBodyProps = useRender.ComponentProps<'div'>;\n\n/**\n * Conteúdo principal do card. Ocupa o espaço que sobra (`flex-1`), empurrando o `Card.Footer`\n * para a base.\n *\n * Origem do corpo das superfícies com cabeçalho: o `Dialog.Body` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardBody = (props: CardBodyProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Body',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-1',\n        'flex-col',\n\n        'p-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardBody.displayName = 'Card.Body';\n"],"mappings":";;;;;;;;;;AAYA,MAAa,YAAY,UAAyB;CAChD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,SAAS,cAAc"}

package/dist/components/display/card/card-description.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/card/card-description.d.ts
+export type CardDescriptionProps = useRender.ComponentProps<'p'>;
+/**
+ * Texto de apoio do card, abaixo do título, em tamanho fixo.
+ *
+ * O `Dialog.Description` copia estas classes (tabela no README de `display`). Uma mudança aqui vale
+ * para a cópia na mesma rodada.
+ */
+export declare const CardDescription: {
+  (props: CardDescriptionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=card-description.d.ts.map

package/dist/components/display/card/card-description.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-description.d.ts","names":[],"sources":["../../../../src/components/display/card/card-description.tsx"],"mappings":";;YAGY,uBAAuB,UAAU;;;;;;;qBAQhC;GAA0B,OAAA,uCAAoB,+CAAA"}

package/dist/components/display/card/card-description.js

@@ -0,0 +1,31 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/card/card-description.tsx
+/**
+* Texto de apoio do card, abaixo do título, em tamanho fixo.
+*
+* O `Dialog.Description` copia estas classes (tabela no README de `display`). Uma mudança aqui vale
+* para a cópia na mesma rodada.
+*/
+const CardDescription = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Card.Description",
+		className: mergeTwClassNames([
+			"text-sm",
+			"leading-5",
+			"text-gray-11",
+			"text-pretty"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "p",
+		props: mergeProps(baseProps, rest)
+	});
+};
+CardDescription.displayName = "Card.Description";
+//#endregion
+export { CardDescription };
+
+//# sourceMappingURL=card-description.js.map

package/dist/components/display/card/card-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-description.js","names":[],"sources":["../../../../src/components/display/card/card-description.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardDescriptionProps = useRender.ComponentProps<'p'>;\n\n/**\n * Texto de apoio do card, abaixo do título, em tamanho fixo.\n *\n * O `Dialog.Description` copia estas classes (tabela no README de `display`). Uma mudança aqui vale\n * para a cópia na mesma rodada.\n */\nexport const CardDescription = (props: CardDescriptionProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Description',\n    className: mergeTwClassNames(\n      ['text-sm', 'leading-5', 'text-gray-11', 'text-pretty'],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'p',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardDescription.displayName = 'Card.Description';\n"],"mappings":";;;;;;;;;AAWA,MAAa,mBAAmB,UAAgC;CAC9D,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GAAC;GAAW;GAAa;GAAgB;EAAa,GACtD,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,gBAAgB,cAAc"}

package/dist/components/display/card/card-footer.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/card/card-footer.d.ts
+export type CardFooterProps = useRender.ComponentProps<'div'>;
+/**
+ * Linha de ações na base do card.
+ *
+ * Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes (tabela no README de `display`). Uma
+ * mudança aqui vale para a cópia na mesma rodada.
+ */
+export declare const CardFooter: {
+  (props: CardFooterProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=card-footer.d.ts.map

package/dist/components/display/card/card-footer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-footer.d.ts","names":[],"sources":["../../../../src/components/display/card/card-footer.tsx"],"mappings":";;YAGY,kBAAkB,UAAU;;;;;;;qBAQ3B;GAAqB,OAAA,kCAAe,+CAAA"}

package/dist/components/display/card/card-footer.js

@@ -0,0 +1,34 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/card/card-footer.tsx
+/**
+* Linha de ações na base do card.
+*
+* Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes (tabela no README de `display`). Uma
+* mudança aqui vale para a cópia na mesma rodada.
+*/
+const CardFooter = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Card.Footer",
+		className: mergeTwClassNames([
+			"flex",
+			"items-center",
+			"gap-2",
+			"px-(--card-padding)",
+			"pb-(--card-padding)",
+			"first:pt-(--card-padding)",
+			"[[data-component='Card.Header']+&]:pt-(--card-padding)"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+CardFooter.displayName = "Card.Footer";
+//#endregion
+export { CardFooter };
+
+//# sourceMappingURL=card-footer.js.map

package/dist/components/display/card/card-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-footer.js","names":[],"sources":["../../../../src/components/display/card/card-footer.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardFooterProps = useRender.ComponentProps<'div'>;\n\n/**\n * Linha de ações na base do card.\n *\n * Origem do rodapé das superfícies com cabeçalho: o `Dialog.Footer` copia estas classes (tabela no README de `display`). Uma\n * mudança aqui vale para a cópia na mesma rodada.\n */\nexport const CardFooter = (props: CardFooterProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Footer',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'items-center',\n        'gap-2',\n\n        'px-(--card-padding)',\n        'pb-(--card-padding)',\n        // O respiro de cima vem do `Body`. Sem ele (o `Footer` abrindo o card ou logo depois do\n        // `Header`), o próprio `Footer` o declara, para não ficar colado.\n        'first:pt-(--card-padding)',\n        \"[[data-component='Card.Header']+&]:pt-(--card-padding)\",\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardFooter.displayName = 'Card.Footer';\n"],"mappings":";;;;;;;;;AAWA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAGA;GACA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/components/display/card/card-header.d.ts

@@ -0,0 +1,15 @@
+import { useRender } from "@base-ui/react";
+//#region src/components/display/card/card-header.d.ts
+export type CardHeaderProps = useRender.ComponentProps<'div'>;
+/**
+ * Topo do card, onde ficam título e descrição.
+ *
+ * O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
+ * cópia na mesma rodada.
+ */
+export declare const CardHeader: {
+  (props: CardHeaderProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+  displayName: string;
+};
+//#endregion
+//# sourceMappingURL=card-header.d.ts.map

package/dist/components/display/card/card-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.d.ts","names":[],"sources":["../../../../src/components/display/card/card-header.tsx"],"mappings":";;YAGY,kBAAkB,UAAU;;;;;;;qBAQ3B;GAAqB,OAAA,kCAAe,+CAAA"}

package/dist/components/display/card/card-header.js

@@ -0,0 +1,33 @@
+import { mergeTwClassNames } from "../../../utils/merge-class-names.js";
+import { mergeProps, useRender } from "@base-ui/react";
+//#region src/components/display/card/card-header.tsx
+/**
+* Topo do card, onde ficam título e descrição.
+*
+* O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a
+* cópia na mesma rodada.
+*/
+const CardHeader = (props) => {
+	const { render, className, ...rest } = props;
+	const baseProps = {
+		"data-component": "Card.Header",
+		className: mergeTwClassNames([
+			"flex",
+			"flex-col",
+			"gap-0.5",
+			"px-(--card-padding)",
+			"pt-(--card-padding)",
+			"last:pb-(--card-padding)"
+		], className)
+	};
+	return useRender({
+		render,
+		defaultTagName: "div",
+		props: mergeProps(baseProps, rest)
+	});
+};
+CardHeader.displayName = "Card.Header";
+//#endregion
+export { CardHeader };
+
+//# sourceMappingURL=card-header.js.map

package/dist/components/display/card/card-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-header.js","names":[],"sources":["../../../../src/components/display/card/card-header.tsx"],"sourcesContent":["import { mergeProps, useRender } from '@base-ui/react';\nimport { mergeTwClassNames } from '#utils';\n\nexport type CardHeaderProps = useRender.ComponentProps<'div'>;\n\n/**\n * Topo do card, onde ficam título e descrição.\n *\n * O `Dialog.Header` copia estas classes (tabela no README de `display`). Uma mudança aqui vale para a\n * cópia na mesma rodada.\n */\nexport const CardHeader = (props: CardHeaderProps) => {\n  const { render, className, ...rest } = props;\n\n  const baseProps = {\n    'data-component': 'Card.Header',\n    className: mergeTwClassNames(\n      [\n        'flex',\n        'flex-col',\n        'gap-0.5',\n\n        'px-(--card-padding)',\n        'pt-(--card-padding)',\n        // Sem `Body` nem `Footer` depois, fecha o respiro do card embaixo.\n        'last:pb-(--card-padding)',\n      ],\n      className,\n    ),\n  };\n\n  return useRender({\n    render,\n    defaultTagName: 'div',\n    props: mergeProps(baseProps, rest),\n  });\n};\n\nCardHeader.displayName = 'Card.Header';\n"],"mappings":";;;;;;;;;AAWA,MAAa,cAAc,UAA2B;CACpD,MAAM,EAAE,QAAQ,WAAW,GAAG,SAAS;CAEvC,MAAM,YAAY;EAChB,kBAAkB;EAClB,WAAW,kBACT;GACE;GACA;GACA;GAEA;GACA;GAEA;EACF,GACA,SACF;CACF;CAEA,OAAO,UAAU;EACf;EACA,gBAAgB;EAChB,OAAO,WAAW,WAAW,IAAI;CACnC,CAAC;AACH;AAEA,WAAW,cAAc"}

package/dist/components/display/card/card-root-variants.d.ts

@@ -0,0 +1,19 @@
+//#region src/components/display/card/card-root-variants.d.ts
+export type CardVariants = {
+  /**
+   * Fundo, borda e sombra do card.
+   *
+   * @default 'outline'
+   */
+  variant?: 'elevated' | 'outline' | 'subtle';
+};
+export declare const cardDefaultVariants: Required<CardVariants>;
+/**
+ * O respiro de Header, Body e Footer fica em `--card-padding`, fixo em 16px: as partes leem a
+ * variável, e um card aninhado a redeclara para o que está dentro dele.
+ */
+export declare const cardRootVariants: (props?: ({
+  variant?: "subtle" | "outline" | "elevated" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+//#endregion
+//# sourceMappingURL=card-root-variants.d.ts.map

package/dist/components/display/card/card-root-variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-root-variants.d.ts","names":[],"sources":["../../../../src/components/display/card/card-root-variants.ts"],"mappings":";YAEY;;;;;;EAMV;;qBAGW,qBAAqB,SAAS;;;;;qBAQ9B,mBAAgB;;6CAkD5B"}

package/dist/components/display/card/card-root-variants.js

@@ -0,0 +1,46 @@
+import { cva } from "class-variance-authority";
+//#region src/components/display/card/card-root-variants.ts
+const cardDefaultVariants = { variant: "outline" };
+/**
+* O respiro de Header, Body e Footer fica em `--card-padding`, fixo em 16px: as partes leem a
+* variável, e um card aninhado a redeclara para o que está dentro dele.
+*/
+const cardRootVariants = cva([
+	"[--card-padding:--spacing(4)]",
+	"relative",
+	"flex",
+	"flex-col",
+	"min-w-0",
+	"rounded-md",
+	"corner-squircle",
+	"text-gray-12",
+	"text-start",
+	"wrap-break-word"
+], {
+	variants: { variant: {
+		elevated: [
+			"border",
+			"border-transparent",
+			"bg-white",
+			"dark:bg-gray-2",
+			"shadow-md"
+		],
+		outline: [
+			"border",
+			"border-gray-6",
+			"bg-white",
+			"dark:bg-gray-1"
+		],
+		subtle: [
+			"border",
+			"border-transparent",
+			"bg-gray-3",
+			"dark:bg-gray-3"
+		]
+	} },
+	defaultVariants: { variant: cardDefaultVariants.variant }
+});
+//#endregion
+export { cardDefaultVariants, cardRootVariants };
+
+//# sourceMappingURL=card-root-variants.js.map

package/dist/components/display/card/card-root-variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-root-variants.js","names":[],"sources":["../../../../src/components/display/card/card-root-variants.ts"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type CardVariants = {\n  /**\n   * Fundo, borda e sombra do card.\n   *\n   * @default 'outline'\n   */\n  variant?: 'elevated' | 'outline' | 'subtle';\n};\n\nexport const cardDefaultVariants: Required<CardVariants> = {\n  variant: 'outline',\n};\n\n/**\n * O respiro de Header, Body e Footer fica em `--card-padding`, fixo em 16px: as partes leem a\n * variável, e um card aninhado a redeclara para o que está dentro dele.\n */\nexport const cardRootVariants = cva(\n  [\n    '[--card-padding:--spacing(4)]',\n\n    'relative',\n\n    'flex',\n    'flex-col',\n\n    'min-w-0',\n\n    'rounded-md',\n    'corner-squircle',\n\n    'text-gray-12',\n    'text-start',\n    'wrap-break-word',\n  ],\n  {\n    variants: {\n      variant: {\n        elevated: [\n          'border',\n          'border-transparent',\n\n          'bg-white',\n          'dark:bg-gray-2',\n\n          'shadow-md',\n        ],\n        outline: [\n          'border',\n          'border-gray-6',\n\n          'bg-white',\n          'dark:bg-gray-1',\n        ],\n        subtle: [\n          'border',\n          'border-transparent',\n\n          'bg-gray-3',\n          'dark:bg-gray-3',\n        ],\n      },\n    },\n    defaultVariants: {\n      variant: cardDefaultVariants.variant,\n    },\n  },\n);\n"],"mappings":";;AAWA,MAAa,sBAA8C,EACzD,SAAS,UACX;;;;;AAMA,MAAa,mBAAmB,IAC9B;CACE;CAEA;CAEA;CACA;CAEA;CAEA;CACA;CAEA;CACA;CACA;AACF,GACA;CACE,UAAU,EACR,SAAS;EACP,UAAU;GACR;GACA;GAEA;GACA;GAEA;EACF;EACA,SAAS;GACP;GACA;GAEA;GACA;EACF;EACA,QAAQ;GACN;GACA;GAEA;GACA;EACF;CACF,EACF;CACA,iBAAiB,EACf,SAAS,oBAAoB,QAC/B;AACF,CACF"}