@fiestaboard/ui 5.5.1 → 5.6.0

package/dist/components/containment/card.d.ts

@@ -1,9 +1,49 @@
 import * as React from "react";
 declare function Card({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-declare function CardTitle({ className, as: Component, ...props }: React.ComponentProps<"h3"> & {
+export type CardTitleProps = React.ComponentProps<"h3"> & {
     as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}): React.JSX.Element;
+    /**
+     * Leading glyph. Decorative — the title text is the accessible name, and
+     * the wrapper below is `aria-hidden`, so a glyph passed here is never
+     * announced. An icon that carries meaning the title does not is a
+     * different component (a Badge, a StatusDot); it does not belong in a
+     * heading whose text is the name.
+     */
+    icon?: React.ReactNode;
+    /**
+     * `"base"` is the settings-card scale (#274): 19 FiestaBoard headers spell
+     * `text-base` by hand because the default here is the parent's size.
+     * `"lg"` is the untouched default, so no existing call site moves.
+     */
+    size?: "base" | "lg";
+};
+/**
+ * The heading inside a CardHeader, with an optional leading glyph.
+ *
+ * ```tsx
+ * <CardTitle size="base" icon={<Info />}>About</CardTitle>
+ * ```
+ *
+ * The icon slot exists because the alternative had already drifted. Every
+ * settings card in FiestaBoard restated the same three decisions inline —
+ * turn the title into a flex row, drop it to `text-base`, size the glyph to
+ * 16px — and the one decision nobody restated consistently was the glyph's
+ * tone: most inherited the title's ink, some were `text-muted-foreground`,
+ * one `text-destructive`, one `text-brand`.
+ *
+ * `text-muted-foreground` is the default here. It is the majority of what
+ * the app already spelled, and it is the right reading: next to a
+ * `font-semibold` title the glyph is decoration, not a second voice. The
+ * other two tones stay reachable — the consumer owns the element passed to
+ * `icon`, so a `className` on it wins (see the `:not([class*='size-'])`
+ * escape hatch below, which does the same for size).
+ *
+ * Layout only becomes a flex row when an icon is present. A title without
+ * one keeps its original block layout, so this is additive for the ~40 call
+ * sites across the two apps that pass no icon.
+ */
+declare function CardTitle({ className, as: Component, icon, size, ...props }: CardTitleProps): React.JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/components/containment/card.js

@@ -1,50 +1,58 @@
 import { cn as e } from "../../lib/utils.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
 //#region src/components/containment/card.tsx
-function n({ className: n, ...r }) {
+function r({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card",
 		className: e("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-card transition-[box-shadow,border-color] duration-base", n),
 		...r
 	});
 }
-function r({ className: n, ...r }) {
+function i({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-header",
 		className: e("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", n),
 		...r
 	});
 }
-function i({ className: n, as: r = "h3", ...i }) {
-	return /* @__PURE__ */ t(r, {
+function a({ className: r, as: i = "h3", icon: a, size: o = "lg", ...s }) {
+	let { children: c, ...l } = s;
+	return /* @__PURE__ */ n(i, {
 		"data-slot": "card-title",
-		className: e("leading-none font-semibold", n),
-		...i
+		"data-size": o,
+		className: e("leading-none font-semibold", o === "base" && "text-base", a && "flex items-center gap-2", r),
+		...l,
+		children: [a ? /* @__PURE__ */ t("span", {
+			"data-slot": "card-title-icon",
+			"aria-hidden": "true",
+			className: e("inline-flex shrink-0 items-center justify-center text-muted-foreground", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"),
+			children: a
+		}) : null, c]
 	});
 }
-function a({ className: n, ...r }) {
+function o({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-description",
 		className: e("text-muted-foreground text-sm", n),
 		...r
 	});
 }
-function o({ className: n, ...r }) {
+function s({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-action",
 		className: e("col-start-2 row-span-2 row-start-1 self-start justify-self-end", n),
 		...r
 	});
 }
-function s({ className: n, ...r }) {
+function c({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-content",
 		className: e("px-6", n),
 		...r
 	});
 }
-function c({ className: n, ...r }) {
+function l({ className: n, ...r }) {
 	return /* @__PURE__ */ t("div", {
 		"data-slot": "card-footer",
 		className: e("flex items-center px-6 [.border-t]:pt-6", n),
@@ -52,6 +60,6 @@ function c({ className: n, ...r }) {
 	});
 }
 //#endregion
-export { n as Card, o as CardAction, s as CardContent, a as CardDescription, c as CardFooter, r as CardHeader, i as CardTitle };
+export { r as Card, s as CardAction, c as CardContent, o as CardDescription, l as CardFooter, i as CardHeader, a as CardTitle };
 
 //# sourceMappingURL=card.js.map

package/dist/components/containment/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/containment/card.tsx"],"mappings":";;;;AAIA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAsC;CAClE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,0IACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,4JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAU,EACjB,cACA,IAAI,IAAY,MAChB,GAAG,KAC6E;CAChF,OAAO,kBAAC,GAAD;EAAW,aAAU;EAAa,WAAW,EAAG,8BAA8B,CAAS;EAAG,GAAI;CAAQ,CAAA;AAC/G;AAEA,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAsC;CAC7E,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,EAAG,iCAAiC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClH;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,kEAAkE,CAAS;EACzF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;CACzE,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,EAAG,QAAQ,CAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,EAAG,2CAA2C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAElH"}
+{"version":3,"file":"card.js","names":[],"sources":["../../../src/components/containment/card.tsx"],"mappings":";;;;AAIA,SAAS,EAAK,EAAE,cAAW,GAAG,KAAsC;CAClE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,0IACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,4JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AA6CA,SAAS,EAAU,EAAE,cAAW,IAAI,IAAY,MAAM,SAAM,UAAO,MAAM,GAAG,KAAyB;CACnG,IAAM,EAAE,aAAU,GAAG,MAAS;CAE9B,OACE,kBAAC,GAAD;EACE,aAAU;EACV,aAAW;EACX,WAAW,EACT,8BACA,MAAS,UAAU,aAInB,KAAQ,2BACR,CACF;EACA,GAAI;EAZN,UAAA,CAcG,IACC,kBAAC,QAAD;GACE,aAAU;GAGV,eAAY;GACZ,WAAW,EACT,0EAKA,mFACF;GAEC,UAAA;EACG,CAAA,IACJ,MACH,CACQ;;AAEf;AAEA,SAAS,EAAgB,EAAE,cAAW,GAAG,KAAsC;CAC7E,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,EAAG,iCAAiC,CAAS;EAAG,GAAI;CAAQ,CAAA;AAClH;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EAAG,kEAAkE,CAAS;EACzF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAY,EAAE,cAAW,GAAG,KAAsC;CACzE,OAAO,kBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,EAAG,QAAQ,CAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,EAAW,EAAE,cAAW,GAAG,KAAsC;CACxE,OACE,kBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,EAAG,2CAA2C,CAAS;EAAG,GAAI;CAAQ,CAAA;AAElH"}

package/dist/components/containment/icon-tile.d.ts

@@ -42,7 +42,7 @@ import * as React from "react";
  * was promoted to fix.
  */
 declare const iconTileVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "md" | null | undefined;
     tone?: "muted" | "board" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconTileProps = React.ComponentProps<"span"> & VariantProps<typeof iconTileVariants> & {

package/dist/components/feedback/spinner.d.ts

@@ -10,7 +10,7 @@ import * as React from "react";
  *   lg  20px  Button size="lg"  / "icon-lg"  (h-10)
  */
 declare const spinnerVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface SpinnerProps extends Omit<React.ComponentProps<"span">, "children">, VariantProps<typeof spinnerVariants> {
     /**

package/dist/components/feedback/status-dot.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const statusDotVariants: (props?: ({
     status?: "info" | "success" | "warning" | "danger" | "neutral" | null | undefined;
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "md" | null | undefined;
     pulse?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface StatusDotProps extends Omit<React.ComponentProps<"span">, "children" | "color">, VariantProps<typeof statusDotVariants> {

package/dist/components/forms/button.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "brand" | "secondary" | "outline" | "ghost" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "lg" | "icon" | "sm" | "default" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, loading, children, onClick, ref, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/components/forms/swatch.d.ts

@@ -5,13 +5,13 @@ declare const swatchGroupVariants: (props?: ({
     wrap?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const swatchVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const swatchFillVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const swatchIndicatorVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SwatchSize = NonNullable<VariantProps<typeof swatchVariants>["size"]>;
 export type SwatchGroupProps = SelectionGroupBaseProps & SelectionGroupNameProps & VariantProps<typeof swatchGroupVariants> & {

package/dist/components/forms/toggle-card.d.ts

@@ -13,7 +13,7 @@ declare const toggleCardGroupVariants: (props?: ({
     columns?: "1" | "2" | "3" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const toggleCardVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "md" | null | undefined;
     align?: "start" | "center" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type ToggleCardSize = NonNullable<VariantProps<typeof toggleCardVariants>["size"]>;
@@ -81,7 +81,7 @@ declare const segmentedControlVariants: (props?: ({
     wrap?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const segmentedControlItemVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "lg" | "sm" | "md" | null | undefined;
     layout?: "grid" | "inline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SegmentedControlSize = NonNullable<VariantProps<typeof segmentedControlItemVariants>["size"]>;

package/dist/components/forms/toggle.d.ts

@@ -5,7 +5,7 @@ import * as React from "react";
 import type { SelectionGroupNameProps } from "./toggle-card";
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "sm" | "lg" | "default" | "icon" | "icon-sm" | null | undefined;
+    size?: "lg" | "icon" | "sm" | "default" | "icon-sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ToggleProps = Omit<React.ComponentProps<typeof TogglePrimitive>, "onPressedChange"> & VariantProps<typeof toggleVariants> & {
     /**

package/dist/components/typography/heading.d.ts

@@ -2,7 +2,7 @@ import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const headingVariants: (props?: ({
     tone?: "muted" | "default" | "destructive" | null | undefined;
-    size?: "base" | "sm" | "lg" | "xl" | null | undefined;
+    size?: "base" | "lg" | "sm" | "xl" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement>, VariantProps<typeof headingVariants> {
     /** Semantic heading element. h1 is reserved for PageHeader. */

package/dist/components/typography/text.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const textVariants: (props?: ({
-    size?: "base" | "sm" | "lg" | "xs" | null | undefined;
+    size?: "base" | "lg" | "sm" | "xs" | null | undefined;
     tone?: "muted" | "default" | "destructive" | "info" | "success" | "warning" | null | undefined;
     weight?: "normal" | "medium" | "semibold" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fiestaboard/ui",
-  "version": "5.5.1",
+  "version": "5.6.0",
   "description": "FiestaUI — the FiestaBoard design system. React components on Base UI with Tailwind v4 design tokens.",
   "license": "MIT",
   "repository": {