@vkzstudio/muza-ui 1.2.0 → 1.3.0

package/dist/components/CategoryCard/CategoryCard.js

@@ -0,0 +1,152 @@
+import { jsxs as l, Fragment as N, jsx as e } from "react/jsx-runtime";
+import * as i from "react";
+import { Slot as C } from "@radix-ui/react-slot";
+import { cva as w } from "class-variance-authority";
+import { Flex as x } from "../Flex/Flex.js";
+import { cn as t } from "../../utils/cn.js";
+import { Typography as f } from "../Typography/Typography.js";
+import { Skeleton as n } from "../Skeleton/Skeleton.js";
+const S = w([
+  "group inline-flex w-full items-center gap-md no-underline",
+  "py-sm pr-2xl pl-sm",
+  "rounded-lg border border-solid bg-surface-base-secondary",
+  "cursor-pointer transition-colors outline-none",
+  "border-stroke-base-primary",
+  "hover:border-stroke-brand-hover",
+  "focus-visible:border-stroke-brand-focused",
+  "active:border-stroke-brand-pressed",
+  "data-[disabled=true]:pointer-events-none",
+  "data-[disabled=true]:cursor-not-allowed",
+  "data-[disabled=true]:border-stroke-base-disabled"
+]), z = i.forwardRef(
+  (o, r) => {
+    const {
+      title: s,
+      image: m,
+      imageAlt: g = "",
+      imageSlot: h,
+      count: d,
+      disabled: a = !1,
+      asChild: v = !1,
+      href: y,
+      className: k,
+      children: c,
+      ...p
+    } = o, b = /* @__PURE__ */ l(N, { children: [
+      /* @__PURE__ */ l(
+        x,
+        {
+          component: "span",
+          align: "center",
+          gap: "md",
+          flex: 1,
+          className: "min-w-0",
+          children: [
+            h ?? (m && /* @__PURE__ */ e(
+              "img",
+              {
+                src: m,
+                alt: g,
+                className: t(
+                  "size-comp-button-h-sm shrink-0 rounded-md object-cover",
+                  "group-data-[disabled=true]:opacity-50"
+                )
+              }
+            )),
+            /* @__PURE__ */ e(
+              f,
+              {
+                component: "span",
+                variant: "body",
+                size: "sm",
+                weight: "medium",
+                fixY: !0,
+                className: t(
+                  "line-clamp-3 min-w-0 flex-1 text-left text-text-dark-primary-def transition-colors",
+                  "group-focus-visible:text-text-brand-focused",
+                  "group-active:text-text-brand-pressed",
+                  "group-data-[disabled=true]:text-text-dark-disabled"
+                ),
+                children: s
+              }
+            )
+          ]
+        }
+      ),
+      d != null && /* @__PURE__ */ e(
+        f,
+        {
+          component: "span",
+          variant: "body",
+          size: "sm",
+          weight: "medium",
+          fixY: !0,
+          className: t(
+            "shrink-0 text-text-brand-def transition-colors",
+            "group-hover:text-text-brand-hover",
+            "group-focus-visible:text-text-brand-focused",
+            "group-active:text-text-brand-pressed",
+            "group-data-[disabled=true]:text-text-dark-disabled"
+          ),
+          children: d
+        }
+      )
+    ] }), u = t(S(), k);
+    return v && i.isValidElement(c) ? /* @__PURE__ */ e(
+      C,
+      {
+        ref: r,
+        className: u,
+        "data-disabled": a || void 0,
+        "aria-disabled": a || void 0,
+        ...p,
+        children: i.cloneElement(c, void 0, b)
+      }
+    ) : /* @__PURE__ */ e(
+      "a",
+      {
+        ref: r,
+        href: a ? void 0 : y,
+        className: u,
+        "data-disabled": a || void 0,
+        "aria-disabled": a || void 0,
+        ...p,
+        children: b
+      }
+    );
+  }
+);
+z.displayName = "CategoryCard";
+const j = ({
+  className: o,
+  color: r = "default",
+  ...s
+}) => /* @__PURE__ */ l(
+  x,
+  {
+    align: "center",
+    gap: "md",
+    className: t(
+      "w-full rounded-lg border border-solid border-stroke-base-primary bg-surface-base-secondary py-sm pr-2xl pl-sm",
+      o
+    ),
+    ...s,
+    children: [
+      /* @__PURE__ */ e(
+        n,
+        {
+          color: r,
+          className: "size-comp-button-h-sm shrink-0 rounded-md"
+        }
+      ),
+      /* @__PURE__ */ e(n, { color: r, className: "h-[16px] min-w-0 flex-1" }),
+      /* @__PURE__ */ e(n, { color: r, className: "h-[16px] w-[28px] shrink-0" })
+    ]
+  }
+);
+j.displayName = "CategoryCardSkeleton";
+export {
+  z as CategoryCard,
+  j as CategoryCardSkeleton,
+  S as categoryCardVariants
+};

package/dist/components/CategoryCard/CategoryCard.stories.d.ts

@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CategoryCard } from './CategoryCard';
+declare const meta: Meta<typeof CategoryCard>;
+export default meta;
+type Story = StoryObj<typeof CategoryCard>;
+export declare const Default: Story;
+export declare const AllStates: Story;
+export declare const WithoutCount: Story;
+export declare const LongTitle: Story;
+export declare const AsChild: Story;
+export declare const Grid: Story;
+export declare const LoadingSkeleton: Story;
+export declare const LoadingSkeletonGrid: Story;
+//# sourceMappingURL=CategoryCard.stories.d.ts.map

package/dist/components/CategoryCard/CategoryCard.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryCard.stories.d.ts","sourceRoot":"","sources":["../../../src/components/CategoryCard/CategoryCard.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAwB,MAAM,gBAAgB,CAAA;AAInE,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAmCnC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAY1C,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAkCvB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAY1B,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAcvB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KA0BrB,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KA8BlB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAA;AAED,eAAO,MAAM,mBAAmB,EAAE,KAkBjC,CAAA"}

package/dist/components/CategoryCard/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CategoryCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CategoryCard/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CategoryCard/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/components/CategoryIcon/CategoryIcon.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+/**
+ * CVA variants for {@link CategoryIcon}. Exposes the `size` variant
+ * (`'sm' | 'md' | 'lg'`) that maps to the `--comp-market-category-ico-*` design tokens.
+ */
+declare const categoryIconVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Props for the CategoryIcon component. */
+export interface CategoryIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'>, VariantProps<typeof categoryIconVariants> {
+    /**
+     * Main color of the category (any CSS color string).
+     * Drives the icon color (via `currentColor` on the container) and the
+     * derived background tint (`Color(color).alpha(0.2)`).
+     *
+     * @example
+     * <CategoryIcon color="#e3b42b" icon={<SuitcaseBold />} />
+     */
+    color: string;
+    /**
+     * Icon node rendered inside the badge. Should use `currentColor` (Solar
+     * icons do by default) so it inherits the main color from the container.
+     */
+    icon: React.ReactNode;
+    /** Visual size. @default 'sm' */
+    size?: 'sm' | 'md' | 'lg';
+}
+/**
+ * A circular category badge: an icon over a softly tinted background derived
+ * from a single main color.
+ *
+ * Pass any CSS color string as `color` and any icon node as `icon`. The
+ * component sets `color` on the container so icons rendered with
+ * `currentColor` (the Solar icon default) inherit it automatically, and
+ * derives a 20% alpha background tint from the same color using the
+ * [color](https://www.npmjs.com/package/color) package.
+ *
+ * @component
+ * @example
+ * <CategoryIcon color="#e3b42b" icon={<SuitcaseBold />} size="lg" />
+ */
+declare const CategoryIcon: React.ForwardRefExoticComponent<CategoryIconProps & React.RefAttributes<HTMLSpanElement>>;
+export { CategoryIcon, categoryIconVariants };
+//# sourceMappingURL=CategoryIcon.d.ts.map

package/dist/components/CategoryIcon/CategoryIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CategoryIcon/CategoryIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAIjE;;;GAGG;AACH,QAAA,MAAM,oBAAoB;;8EAYzB,CAAA;AAED,4CAA4C;AAC5C,MAAM,WAAW,iBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,oBAAoB,CAAC;IAC3C;;;;;;;OAOG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAA;IACrB,iCAAiC;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAC1B;AAYD;;;;;;;;;;;;;GAaG;AACH,QAAA,MAAM,YAAY,2FAuCjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,oBAAoB,EAAE,CAAA"}

package/dist/components/CategoryIcon/CategoryIcon.js

@@ -0,0 +1,54 @@
+import { jsx as m } from "react/jsx-runtime";
+import * as g from "react";
+import { cva as l } from "class-variance-authority";
+import p from "color";
+import { cn as y } from "../../utils/cn.js";
+const d = l(
+  "inline-flex shrink-0 items-center justify-center rounded-full [&>svg]:pointer-events-none",
+  {
+    variants: {
+      size: {
+        sm: "size-comp-market-category-ico-bg-size-sm [&>*]:size-comp-market-category-ico-ico-size-sm",
+        md: "size-comp-market-category-ico-bg-size-md [&>*]:size-comp-market-category-ico-ico-size-md",
+        lg: "size-comp-market-category-ico-bg-size-lg [&>*]:size-comp-market-category-ico-ico-size-lg"
+      }
+    },
+    defaultVariants: { size: "sm" }
+  }
+), f = (t) => {
+  try {
+    return p(t);
+  } catch {
+    return null;
+  }
+}, a = /* @__PURE__ */ new Set(), z = g.forwardRef(
+  ({ className: t, color: e, icon: c, size: i, style: r, ...n }, s) => {
+    const o = f(e);
+    return !o && process.env.NODE_ENV !== "production" && !a.has(e) && (a.add(e), console.warn(
+      `[CategoryIcon] Invalid color "${e}". Falling back to neutral styling.`
+    )), /* @__PURE__ */ m(
+      "span",
+      {
+        ref: s,
+        "data-slot": "category-icon",
+        className: y(
+          d({ size: i }),
+          o && "bg-(--category-icon-bg) text-(--category-icon-fg)",
+          t
+        ),
+        style: o ? {
+          "--category-icon-bg": o.alpha(0.2).toString(),
+          "--category-icon-fg": o.toString(),
+          ...r
+        } : r,
+        ...n,
+        children: c
+      }
+    );
+  }
+);
+z.displayName = "CategoryIcon";
+export {
+  z as CategoryIcon,
+  d as categoryIconVariants
+};

package/dist/components/CategoryIcon/CategoryIcon.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { CategoryIcon } from './CategoryIcon';
+declare const meta: Meta<typeof CategoryIcon>;
+export default meta;
+type Story = StoryObj<typeof CategoryIcon>;
+export declare const Default: Story;
+export declare const AllCategories: Story;
+export declare const AllSizes: Story;
+export declare const CustomColor: Story;
+//# sourceMappingURL=CategoryIcon.stories.d.ts.map

package/dist/components/CategoryIcon/CategoryIcon.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryIcon.stories.d.ts","sourceRoot":"","sources":["../../../src/components/CategoryIcon/CategoryIcon.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAW3D,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAE7C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,YAAY,CAoCnC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,YAAY,CAAC,CAAA;AAY1C,eAAO,MAAM,OAAO,EAAE,KAerB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAqB3B,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAgBtB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAiBzB,CAAA"}

package/dist/components/CategoryIcon/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CategoryIcon';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/CategoryIcon/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CategoryIcon/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA"}

package/dist/components/DatePicker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,SAAS,EAA2C,MAAM,OAAO,CAAA;AAC/E,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAIjD,OAAO,EAAY,KAAK,iBAAiB,EAAE,MAAM,aAAa,CAAA;AAG9D,OAAO,EAGL,KAAK,mBAAmB,EAEzB,MAAM,oBAAoB,CAAA;AAE3B,OAAO,EAAE,KAAK,OAAO,EAAgB,MAAM,sBAAsB,CAAA;AAGjE;;;;;GAKG;AACH,MAAM,MAAM,oBAAoB,GAAG,OAAO,CAAC;IACzC,qEAAqE;IACrE,cAAc,EAAE,MAAM,CAAA;IACtB,sDAAsD;IACtD,cAAc,EAAE,MAAM,CAAA;IACtB,kDAAkD;IAClD,KAAK,EAAE,MAAM,CAAA;IACb,6DAA6D;IAC7D,eAAe,EAAE,MAAM,CAAA;CACxB,CAAC,CAAA;AAEF;;;;;;;;;GASG;AACH,MAAM,MAAM,eAAe,GAAG;IAC5B,4EAA4E;IAC5E,aAAa,CAAC,EAAE,QAAQ,GAAG,KAAK,GAAG,OAAO,CAAA;IAC1C;;;;;;;;;;;OAWG;IACH,cAAc,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,CAAC,OAAO,OAAO,CAAC,CAAC,MAAM,CAAC,CAAA;KAAE,EAAE,CAAA;IACnE,qDAAqD;IACrD,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,iDAAiD;IACjD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC;;;OAGG;IACH,UAAU,CAAC,EAAE,oBAAoB,CAAA;IACjC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,4CAA4C;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,6CAA6C;IAC7C,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,uDAAuD;IACvD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,2EAA2E;IAC3E,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;IAC1C,+EAA+E;IAC/E,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;;;;OASG;IACH,mBAAmB,CAAC,EAAE,IAAI,CACxB,mBAAmB,EACnB,OAAO,GAAG,MAAM,GAAG,iBAAiB,GAAG,WAAW,CACnD,CAAA;IACD,yEAAyE;IACzE,mBAAmB,CAAC,EAAE,MAAM,SAAS,CAAA;IACrC;;;;;;;OAOG;IACH,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,+EAA+E;IAC/E,uBAAuB,CAAC,EAAE,OAAO,CAAA;IACjC,kFAAkF;IAClF,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAA;IACtB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB,GAAG,IAAI,CACN,iBAAiB,EACf,gBAAgB,GAChB,WAAW,GACX,SAAS,GACT,YAAY,GACZ,mBAAmB,GACnB,mBAAmB,GACnB,eAAe,GACf,oBAAoB,GACpB,UAAU,CACb,GACC,CAAC,oBAAoB,GAAG,qBAAqB,CAAC,CAAA;AAEhD;;;GAGG;AACH,MAAM,MAAM,oBAAoB,GAAG;IACjC,6DAA6D;IAC7D,IAAI,EAAE,OAAO,CAAA;IACb,kDAAkD;IAClD,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IAC7B,iDAAiD;IACjD,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;IACpC,iGAAiG;IACjG,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAA;IAChD,0EAA0E;IAC1E,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,CAAA;CAC5C,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,qBAAqB,GAAG;IAClC,qCAAqC;IACrC,IAAI,EAAE,QAAQ,CAAA;IACd,4CAA4C;IAC5C,KAAK,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IACxB,2CAA2C;IAC3C,YAAY,CAAC,EAAE,IAAI,GAAG,SAAS,CAAA;IAC/B,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAA;IAC3C,oEAAoE;IACpE,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,MAAM,CAAA;CACvC,CAAA;AAED,eAAO,MAAM,UAAU,8GAmQtB,CAAA"}

package/dist/components/DatePicker/DatePicker.js

@@ -6,11 +6,11 @@ import { Popover as pt, PopoverTrigger as nt, PopoverContent as dt } from "../Po
 import { getDateRange as ut } from "./utils/getDateRange.js";
 import { resolveOneDayRange as bt } from "./utils/resolveOneDayRange.js";
 import { Input as st } from "../Input/Input.js";
-import { formatDate as xt } from "../Calendar/utils/formatDate.js";
-import { formatDateRange as lt } from "../Calendar/utils/formatDateRange.js";
 import { Calendar as A } from "../Calendar/Calendar.js";
 import { cn as l } from "../../utils/cn.js";
-import { typographyVariants as yt } from "../Typography/Typography.js";
+import { typographyVariants as xt } from "../Typography/Typography.js";
+import { formatDate as lt } from "../../utils/formatDate.js";
+import { formatDateRange as yt } from "../../utils/formatDateRange.js";
 import { CalendarBold as mt } from "@solar-icons/react-perf";
 const vt = et(
   ({
@@ -64,7 +64,7 @@ const vt = et(
       "button",
       {
         className: l(
-          yt({
+          xt({
             variant: "cta",
             weight: "medium",
             size: "sm",
@@ -83,7 +83,7 @@ const vt = et(
         children: t.name
       },
       t.type
-    )), D = H ?? (y === "single" ? xt : lt), F = f ? e !== void 0 ? e : i : j, E = {
+    )), D = H ?? (y === "single" ? lt : yt), F = f ? e !== void 0 ? e : i : j, E = {
       ...a,
       numberOfMonths: Z ?? (h ? 2 : 1),
       hideNavigation: _,

package/dist/components/DotDivider/DotDivider.d.ts

@@ -0,0 +1,35 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const dotDividerVariants: (props?: ({
+    variant?: "default" | "invert" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+/** Props for the DotDivider component. */
+export interface DotDividerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof dotDividerVariants> {
+    /**
+     * Visual variant of the dot.
+     *
+     * - `default` — dark dot for use on light surfaces.
+     * - `invert` — light dot for use on dark surfaces.
+     *
+     * @default 'default'
+     */
+    variant?: 'default' | 'invert';
+}
+/**
+ * A small decorative dot used as an inline separator between metadata pieces
+ * (e.g. `Author • Date • Category`).
+ *
+ * The dot is purely visual and is hidden from assistive technologies via
+ * `aria-hidden`. Use a comma or other punctuation in the underlying text if
+ * the separation needs to be conveyed semantically.
+ *
+ * @example
+ * <span className="inline-flex items-center gap-2">
+ *   <span>Author</span>
+ *   <DotDivider />
+ *   <span>Date</span>
+ * </span>
+ */
+declare const DotDivider: React.ForwardRefExoticComponent<DotDividerProps & React.RefAttributes<HTMLSpanElement>>;
+export { DotDivider, dotDividerVariants };
+//# sourceMappingURL=DotDivider.d.ts.map

package/dist/components/DotDivider/DotDivider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotDivider.d.ts","sourceRoot":"","sources":["../../../src/components/DotDivider/DotDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,kBAAkB;;8EAWvB,CAAA;AAED,0CAA0C;AAC1C,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAC3C,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC;;;;;;;OAOG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B;AAED;;;;;;;;;;;;;;GAcG;AACH,QAAA,MAAM,UAAU,yFASf,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,kBAAkB,EAAE,CAAA"}

package/dist/components/DotDivider/DotDivider.js

@@ -0,0 +1,31 @@
+import { jsx as d } from "react/jsx-runtime";
+import * as e from "react";
+import { cva as o } from "class-variance-authority";
+import { cn as n } from "../../utils/cn.js";
+const m = o(
+  "inline-block size-comp-dot-divider-default shrink-0 rounded-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-comp-dot-divider-def",
+        invert: "bg-comp-dot-divider-invert"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+), s = e.forwardRef(
+  ({ className: i, variant: r, ...t }, a) => /* @__PURE__ */ d(
+    "span",
+    {
+      ref: a,
+      "aria-hidden": "true",
+      className: n(m({ variant: r, className: i })),
+      ...t
+    }
+  )
+);
+s.displayName = "DotDivider";
+export {
+  s as DotDivider,
+  m as dotDividerVariants
+};

package/dist/components/DotDivider/DotDivider.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { DotDivider } from './DotDivider';
+declare const meta: Meta<typeof DotDivider>;
+export default meta;
+type Story = StoryObj<typeof DotDivider>;
+export declare const Default: Story;
+export declare const Invert: Story;
+export declare const AllVariants: Story;
+export declare const InContext: Story;
+//# sourceMappingURL=DotDivider.stories.d.ts.map

package/dist/components/DotDivider/DotDivider.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotDivider.stories.d.ts","sourceRoot":"","sources":["../../../src/components/DotDivider/DotDivider.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,UAAU,CAgCjC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,UAAU,CAAC,CAAA;AAExC,eAAO,MAAM,OAAO,EAAE,KAUrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAsBpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAmCzB,CAAA;AAED,eAAO,MAAM,SAAS,EAAE,KAmBvB,CAAA"}

package/dist/components/DotDivider/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DotDivider';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/DotDivider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DotDivider/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAA"}

package/dist/components/HeartButton/HeartButton.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+declare const heartButtonVariants: (props?: import('class-variance-authority/types').ClassProp | undefined) => string;
+/**
+ * Props for the HeartButton component.
+ *
+ * A 32×32 circular icon-only toggle that flips between an outlined and a
+ * filled heart. Supports controlled (`active`) and uncontrolled
+ * (`defaultActive`) usage.
+ *
+ * **Render mode is auto-detected.** When neither `onClick` nor
+ * `defaultActive` is provided, the component renders as a non-interactive
+ * `<span role="img">` instead of a `<button>` — useful for surfacing
+ * favorite status in read-only listings. As soon as either prop is set,
+ * the component renders as a `<button>` and behaves as a toggle.
+ *
+ * The ref's concrete element type depends on the render mode: it is
+ * `HTMLButtonElement` in interactive mode and `HTMLSpanElement` in
+ * display-only mode.
+ */
+export interface HeartButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onClick' | 'type'> {
+    /**
+     * Controlled active (favorited) state. When provided, the component does
+     * not manage its own state — pair with `onClick` to update. Used alone
+     * (without `onClick` or `defaultActive`), it drives the display-only
+     * render path.
+     */
+    active?: boolean;
+    /**
+     * Initial active state for uncontrolled usage. Ignored when `active` is
+     * provided. Passing this prop signals that the consumer wants the
+     * component to manage its own toggle state, so the component renders as
+     * an interactive `<button>` even when `onClick` is omitted.
+     */
+    defaultActive?: boolean;
+    /**
+     * Fires when the button is clicked. Receives the native mouse event and
+     * the **next** active value (post-toggle). When the component is
+     * uncontrolled, the internal state has already been updated to
+     * `nextActive` by the time this fires.
+     *
+     * Omitting `onClick` (and `defaultActive`) switches the component to the
+     * display-only `<span role="img">` render path.
+     *
+     * @example
+     * <HeartButton onClick={(_e, next) => saveFavorite(next)} />
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, nextActive: boolean) => void;
+    /**
+     * Prevents interaction and applies disabled styling. Visual-only in
+     * display mode (no interaction to prevent). @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible label for the icon-only control. Defaults to
+     * `translations.heartButton.toggleFavorite`.
+     */
+    'aria-label'?: string;
+}
+declare const HeartButton: React.ForwardRefExoticComponent<HeartButtonProps & React.RefAttributes<HTMLButtonElement | HTMLSpanElement>>;
+export { HeartButton, heartButtonVariants };
+//# sourceMappingURL=HeartButton.d.ts.map

package/dist/components/HeartButton/HeartButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeartButton.d.ts","sourceRoot":"","sources":["../../../src/components/HeartButton/HeartButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,mBAAmB,oFAUvB,CAAA;AAEF;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,WAAW,gBACf,SAAQ,IAAI,CACV,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAC7C,UAAU,GAAG,SAAS,GAAG,MAAM,CAChC;IACD;;;;;OAKG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,EAAE,CACR,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,EAC1C,UAAU,EAAE,OAAO,KAChB,IAAI,CAAA;IACT;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,QAAA,MAAM,WAAW,8GAqFhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,mBAAmB,EAAE,CAAA"}

package/dist/components/HeartButton/HeartButton.js

@@ -0,0 +1,88 @@
+import { jsx as o, jsxs as N, Fragment as j } from "react/jsx-runtime";
+import * as p from "react";
+import { cva as y } from "class-variance-authority";
+import { useMuzaTranslationContext as z } from "../../translations/TranslationContext.js";
+import { cn as b } from "../../utils/cn.js";
+import { HeartOutline as A, HeartBold as F } from "@solar-icons/react-perf";
+const v = y([
+  "group inline-flex size-comp-button-h-xs shrink-0 items-center justify-center rounded-full",
+  "bg-transparent transition-colors",
+  "focus-visible-default",
+  "[&>svg]:size-icon-small [&>svg]:shrink-0",
+  "text-comp-button-invert-ghost-text-def",
+  "hover:text-comp-button-invert-ghost-text-hover",
+  "focus-visible:text-comp-button-invert-ghost-text-focused",
+  "disabled:pointer-events-none disabled:text-comp-button-invert-ghost-text-disabled",
+  "data-[disabled=true]:pointer-events-none data-[disabled=true]:text-comp-button-invert-ghost-text-disabled"
+]), I = p.forwardRef(
+  ({
+    active: n,
+    defaultActive: s,
+    onClick: t,
+    disabled: a = !1,
+    className: r,
+    "aria-label": h,
+    ...i
+  }, d) => {
+    const { translations: f } = z(), x = t !== void 0 || s !== void 0, l = h ?? f.heartButton.toggleFavorite, [g, B] = p.useState(
+      s ?? !1
+    ), c = n !== void 0, e = c ? n : g, u = /* @__PURE__ */ N(j, { children: [
+      /* @__PURE__ */ o(
+        A,
+        {
+          "aria-hidden": "true",
+          className: "group-data-[state=on]:hidden"
+        }
+      ),
+      /* @__PURE__ */ o(
+        F,
+        {
+          "aria-hidden": "true",
+          className: "hidden group-data-[state=on]:block"
+        }
+      )
+    ] });
+    return x ? /* @__PURE__ */ o(
+      "button",
+      {
+        ref: d,
+        type: "button",
+        "data-slot": "heart-button",
+        "data-state": e ? "on" : "off",
+        "data-disabled": a || void 0,
+        "aria-pressed": e,
+        "aria-label": l,
+        disabled: a,
+        onClick: (H) => {
+          const m = !e;
+          c || B(m), t == null || t(H, m);
+        },
+        className: b(v(), "cursor-pointer", r),
+        ...i,
+        children: u
+      }
+    ) : /* @__PURE__ */ o(
+      "span",
+      {
+        ref: d,
+        "data-slot": "heart-button",
+        "data-state": e ? "on" : "off",
+        "data-disabled": a || void 0,
+        role: "img",
+        "aria-label": l,
+        className: b(
+          v(),
+          "pointer-events-none",
+          r
+        ),
+        ...i,
+        children: u
+      }
+    );
+  }
+);
+I.displayName = "HeartButton";
+export {
+  I as HeartButton,
+  v as heartButtonVariants
+};

package/dist/components/HeartButton/HeartButton.stories.d.ts

@@ -0,0 +1,10 @@
+import { Meta, StoryObj } from '@storybook/react-vite';
+import { HeartButton } from './HeartButton';
+declare const meta: Meta<typeof HeartButton>;
+export default meta;
+type Story = StoryObj<typeof HeartButton>;
+export declare const Default: Story;
+export declare const Uncontrolled: Story;
+export declare const DisplayOnly: Story;
+export declare const AllStates: Story;
+//# sourceMappingURL=HeartButton.stories.d.ts.map

package/dist/components/HeartButton/HeartButton.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeartButton.stories.d.ts","sourceRoot":"","sources":["../../../src/components/HeartButton/HeartButton.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAA;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAuClC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,OAAO,EAAE,KAqBrB,CAAA;AAED,eAAO,MAAM,YAAY,EAAE,KAa1B,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAA;AAID,eAAO,MAAM,SAAS,EAAE,KA2EvB,CAAA"}

package/dist/components/HeartButton/index.d.ts

@@ -0,0 +1,2 @@
+export * from './HeartButton';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/HeartButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HeartButton/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAA"}