@vkzstudio/muza-ui 1.2.0 → 1.3.0

package/dist/components/Accordion/Accordion.d.ts

@@ -1,4 +1,5 @@
 import { AccordionMultipleProps as RadixAccordionMultipleProps, AccordionSingleProps as RadixAccordionSingleProps } from '@radix-ui/react-accordion';
+import { IconProps } from '../Icons';
 import { TypographyProps } from '../Typography';
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
@@ -128,6 +129,15 @@ export interface AccordionHeaderProps extends React.HTMLAttributes<HTMLDivElemen
      * </AccordionHeader>
      */
     headerActions?: React.ReactNode;
+    /**
+     * Suppresses the auto-injected expand/collapse chevron. Use when the
+     * header layout needs to position the chevron itself (e.g. inside a
+     * grid cell or paired with sibling content) — render your own chevron
+     * and rotate it on `data-state=open` via `group-data-[state=open]`.
+     *
+     * @default false
+     */
+    hideDefaultChevron?: boolean;
 }
 /**
  * Props for the AccordionContent component.
@@ -144,6 +154,27 @@ export type AccordionContentProps = React.ComponentProps<typeof AccordionPrimiti
  * trigger, so the accordion does not toggle when the footer is activated.
  */
 export type AccordionFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the AccordionChevron component.
+ *
+ * Renders the expand/collapse chevron icon with the rotation, sizing, and
+ * disabled-state coloring already wired up. Pair with `hideDefaultChevron`
+ * on `AccordionHeader` when the header layout needs to position the
+ * chevron itself (inside a grid cell, alongside sibling content, etc.).
+ *
+ * The chevron must be rendered inside an `AccordionHeader` so it can read
+ * the trigger's `data-state` and toggle rotation via `group-data-[state=open]`.
+ *
+ * Forwards every prop accepted by the underlying Solar icon (className,
+ * style, aria attributes, event handlers).
+ */
+export type AccordionChevronProps = Omit<IconProps, 'ref'> & {
+    /**
+     * Visual variant — overrides the surrounding Accordion's variant.
+     * @see AccordionVariant
+     */
+    variant?: AccordionVariant;
+};
 /**
  * Props for the AccordionTitle component.
  *
@@ -171,6 +202,9 @@ declare const accordionItemVariants: (props?: ({
 declare const accordionTriggerVariants: (props?: ({
     variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const accordionChevronVariants: (props?: ({
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const accordionTitleVariants: (props?: ({
     variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -182,7 +216,7 @@ declare const accordionFooterVariants: (props?: ({
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const Accordion: ({ className, variant: variantProp, ...props }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
 declare const AccordionItem: React.ForwardRefExoticComponent<Omit<AccordionItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-declare const AccordionHeader: ({ className, children, headerActions, ...props }: AccordionHeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const AccordionHeader: ({ className, children, headerActions, hideDefaultChevron, ...props }: AccordionHeaderProps) => import("react/jsx-runtime").JSX.Element;
 declare const AccordionContent: ({ className, children, ...props }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Standardized title slot for `AccordionHeader`. Owns the hover highlight via
@@ -204,6 +238,22 @@ declare const AccordionContent: ({ className, children, ...props }: AccordionCon
  * </AccordionHeader>
  */
 declare const AccordionTitle: ({ className, component, variant: typographyVariant, weight, size, fixY, ...props }: AccordionTitleProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Standalone chevron icon for `AccordionHeader`. Use together with
+ * `hideDefaultChevron` to take control of the chevron's placement (e.g.
+ * to position it inside a grid cell or alongside sibling content).
+ *
+ * Rotation, sizing, and disabled-state coloring are wired up to the
+ * surrounding trigger via `group-data-[state=open]` and
+ * `group-data-[disabled]`.
+ *
+ * @example
+ * <AccordionHeader hideDefaultChevron className="grid grid-cols-[1fr_auto]">
+ *   <AccordionTitle>Section title</AccordionTitle>
+ *   <AccordionChevron className="self-center" />
+ * </AccordionHeader>
+ */
+declare const AccordionChevron: ({ className, variant: variantProp, ...props }: AccordionChevronProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders below the content but stays visible regardless of the open state.
  * Use for actions (buttons, links) that should be reachable even when the
@@ -220,5 +270,5 @@ declare const AccordionTitle: ({ className, component, variant: typographyVarian
  * </AccordionItem>
  */
 declare const AccordionFooter: ({ className, children, onClick, ...props }: AccordionFooterProps) => import("react/jsx-runtime").JSX.Element;
-export { Accordion, AccordionContent, AccordionFooter, AccordionHeader, AccordionItem, AccordionTitle, accordionItemVariants, accordionTriggerVariants, accordionContentInnerVariants, accordionFooterVariants, accordionTitleVariants, };
+export { Accordion, AccordionChevron, AccordionContent, AccordionFooter, AccordionHeader, AccordionItem, AccordionTitle, accordionChevronVariants, accordionItemVariants, accordionTriggerVariants, accordionContentInnerVariants, accordionFooterVariants, accordionTitleVariants, };
 //# sourceMappingURL=Accordion.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Accordion.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.tsx"],"names":[],"mappings":"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"}

package/dist/components/Accordion/Accordion.js

@@ -1,11 +1,11 @@
-import { jsx as a, jsxs as f } from "react/jsx-runtime";
+import { jsx as a, jsxs as b } from "react/jsx-runtime";
 import * as l from "react";
-import * as m from "@radix-ui/react-accordion";
-import { cva as u } from "class-variance-authority";
+import * as g from "@radix-ui/react-accordion";
+import { cva as p } from "class-variance-authority";
 import { Typography as I } from "../Typography/Typography.js";
-import { cn as n } from "../../utils/cn.js";
-import { AltArrowDownOutline as P } from "@solar-icons/react-perf";
-const N = u("relative w-full transition-colors", {
+import { cn as i } from "../../utils/cn.js";
+import { AltArrowDownOutline as A } from "@solar-icons/react-perf";
+const N = p("relative w-full transition-colors", {
   variants: {
     variant: {
       default: "rounded-comp-accordion-default-radius border border-stroke-base-primary bg-surface-base-secondary px-comp-accordion-default-p py-comp-accordion-default-p-ver has-[[data-slot=accordion-trigger]:hover]:border-stroke-brand-hover",
@@ -15,7 +15,7 @@ const N = u("relative w-full transition-colors", {
     }
   },
   defaultVariants: { variant: "default" }
-}), A = u(
+}), V = p(
   "group flex w-full cursor-pointer items-center justify-between gap-4 transition-all outline-none [&[data-state=open]>svg]:rotate-180",
   {
     variants: {
@@ -28,7 +28,25 @@ const N = u("relative w-full transition-colors", {
     },
     defaultVariants: { variant: "default" }
   }
-), S = u("text-inherit transition-colors", {
+), P = p(
+  i(
+    "shrink-0 text-comp-select-icon-brand-def",
+    "transition-transform duration-300",
+    "group-data-[state=open]:rotate-180",
+    "group-data-[disabled]:text-icon-dark-tertiary"
+  ),
+  {
+    variants: {
+      variant: {
+        default: "size-comp-accordion-default-ico-size-md",
+        branded: "size-comp-accordion-branded-ico-size-md",
+        settings: "size-comp-accordion-default-ico-size-md",
+        inline: "size-comp-accordion-default-ico-size-md"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+), S = p("text-inherit transition-colors", {
   variants: {
     variant: {
       default: "group-hover:text-text-brand-hover",
@@ -38,7 +56,7 @@ const N = u("relative w-full transition-colors", {
     }
   },
   defaultVariants: { variant: "default" }
-}), V = u("text-left", {
+}), z = p("text-left", {
   variants: {
     variant: {
       default: "pt-md",
@@ -48,7 +66,7 @@ const N = u("relative w-full transition-colors", {
     }
   },
   defaultVariants: { variant: "default" }
-}), T = u("text-left", {
+}), T = p("text-left", {
   variants: {
     variant: {
       default: "pt-2xl",
@@ -60,34 +78,34 @@ const N = u("relative w-full transition-colors", {
   defaultVariants: { variant: "default" }
 }), C = l.createContext({
   variant: "default"
-}), g = () => l.useContext(C), v = l.createContext({
+}), m = () => l.useContext(C), v = l.createContext({
   isStatic: !1
-}), w = () => l.useContext(v), D = ({
+}), w = () => l.useContext(v), O = ({
   className: o,
   variant: r,
   ...t
 }) => {
   const e = r ?? (t.type === "single" ? "branded" : "default");
   return /* @__PURE__ */ a(C.Provider, { value: { variant: e }, children: /* @__PURE__ */ a(
-    m.Root,
+    g.Root,
     {
       "data-slot": "accordion",
-      className: n("flex w-full flex-col gap-md", o),
+      className: i("flex w-full flex-col gap-md", o),
       ...t
     }
   ) });
-}, z = l.forwardRef(
+}, j = l.forwardRef(
   ({
     className: o,
     children: r,
     clickableContent: t = !1,
     static: e,
-    value: i,
-    disabled: d,
-    ...c
-  }, s) => {
-    const { variant: x } = g(), h = l.useRef(null), k = (p) => {
-      h.current = p, typeof s == "function" ? s(p) : s && (s.current = p);
+    value: n,
+    disabled: c,
+    ...s
+  }, d) => {
+    const { variant: x } = m(), h = l.useRef(null), k = (u) => {
+      h.current = u, typeof d == "function" ? d(u) : d && (d.current = u);
     };
     return e ? /* @__PURE__ */ a(v.Provider, { value: { isStatic: !0 }, children: /* @__PURE__ */ a(
       "div",
@@ -95,49 +113,50 @@ const N = u("relative w-full transition-colors", {
         ref: k,
         "data-slot": "accordion-item",
         "data-state": "open",
-        className: n(N({ variant: x }), o),
-        ...c,
+        className: i(N({ variant: x }), o),
+        ...s,
         children: r
       }
     ) }) : /* @__PURE__ */ a(v.Provider, { value: { isStatic: !1 }, children: /* @__PURE__ */ a(
-      m.Item,
+      g.Item,
       {
         ref: k,
         "data-slot": "accordion-item",
-        value: i,
-        disabled: d,
-        className: n(
+        value: n,
+        disabled: c,
+        className: i(
           N({ variant: x }),
           t && "cursor-pointer",
           o
         ),
-        onClick: t ? (p) => {
+        onClick: t ? (u) => {
           var y;
-          const b = (y = h.current) == null ? void 0 : y.querySelector(
+          const f = (y = h.current) == null ? void 0 : y.querySelector(
             '[data-slot="accordion-trigger"]'
           );
-          b && !b.contains(p.target) && b.click();
+          f && !f.contains(u.target) && f.click();
         } : void 0,
-        ...c,
+        ...s,
         children: r
       }
     ) });
   }
 );
-z.displayName = "AccordionItem";
-const O = ({
+j.displayName = "AccordionItem";
+const B = ({
   className: o,
   children: r,
   headerActions: t,
-  ...e
+  hideDefaultChevron: e = !1,
+  ...n
 }) => {
-  const { variant: i } = g(), { isStatic: d } = w();
-  return d ? /* @__PURE__ */ f("div", { className: "flex items-center", ...e, children: [
+  const { variant: c } = m(), { isStatic: s } = w();
+  return s ? /* @__PURE__ */ b("div", { className: "flex items-center", ...n, children: [
     /* @__PURE__ */ a(
       "div",
       {
-        className: n(
-          A({ variant: i }),
+        className: i(
+          V({ variant: c }),
           "cursor-default",
           o
         ),
@@ -148,24 +167,24 @@ const O = ({
       "div",
       {
         className: "flex shrink-0 items-center",
-        onClick: (c) => c.stopPropagation(),
+        onClick: (d) => d.stopPropagation(),
         children: t
       }
     )
-  ] }) : /* @__PURE__ */ f(m.Header, { className: "flex items-center", ...e, children: [
-    /* @__PURE__ */ f(
-      m.Trigger,
+  ] }) : /* @__PURE__ */ b(g.Header, { className: "flex items-center", ...n, children: [
+    /* @__PURE__ */ b(
+      g.Trigger,
       {
         "data-slot": "accordion-trigger",
-        className: n(A({ variant: i }), o),
+        className: i(V({ variant: c }), o),
         children: [
           r,
-          /* @__PURE__ */ a(
-            P,
+          !e && /* @__PURE__ */ a(
+            A,
             {
-              className: n(
+              className: i(
                 "shrink-0 text-comp-select-icon-brand-def transition-transform duration-300 group-data-[disabled]:text-icon-dark-tertiary",
-                i === "branded" ? "size-comp-accordion-branded-ico-size-md" : "size-comp-accordion-default-ico-size-md"
+                c === "branded" ? "size-comp-accordion-branded-ico-size-md" : "size-comp-accordion-default-ico-size-md"
               )
             }
           )
@@ -176,25 +195,25 @@ const O = ({
       "div",
       {
         className: "flex shrink-0 items-center",
-        onClick: (c) => c.stopPropagation(),
+        onClick: (d) => d.stopPropagation(),
         children: t
       }
     )
   ] });
-}, B = ({
+}, E = ({
   className: o,
   children: r,
   ...t
 }) => {
-  const { variant: e } = g(), { isStatic: i } = w();
-  return i ? /* @__PURE__ */ a("div", { "data-slot": "accordion-content", ...t, children: /* @__PURE__ */ a(
+  const { variant: e } = m(), { isStatic: n } = w();
+  return n ? /* @__PURE__ */ a("div", { "data-slot": "accordion-content", ...t, children: /* @__PURE__ */ a(
     "div",
     {
-      className: n(V({ variant: e }), o),
+      className: i(z({ variant: e }), o),
       children: r
     }
   ) }) : /* @__PURE__ */ a(
-    m.Content,
+    g.Content,
     {
       "data-slot": "accordion-content",
       className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
@@ -202,22 +221,22 @@ const O = ({
       children: /* @__PURE__ */ a(
         "div",
         {
-          className: n(V({ variant: e }), o),
+          className: i(z({ variant: e }), o),
           children: r
         }
       )
     }
   );
-}, E = ({
+}, G = ({
   className: o,
   component: r = "span",
   variant: t = "title",
   weight: e = "medium",
-  size: i = "base",
-  fixY: d = !0,
-  ...c
+  size: n = "base",
+  fixY: c = !0,
+  ...s
 }) => {
-  const { variant: s } = g();
+  const { variant: d } = m();
   return /* @__PURE__ */ a(
     I,
     {
@@ -225,26 +244,40 @@ const O = ({
       component: r,
       variant: t,
       weight: e,
-      size: i,
-      fixY: d,
-      className: n(S({ variant: s }), o),
-      ...c
+      size: n,
+      fixY: c,
+      className: i(S({ variant: d }), o),
+      ...s
     }
   );
-}, G = ({
+}, J = ({
+  className: o,
+  variant: r,
+  ...t
+}) => {
+  const { variant: e } = m();
+  return /* @__PURE__ */ a(
+    A,
+    {
+      "data-slot": "accordion-chevron",
+      className: i(P({ variant: r ?? e }), o),
+      ...t
+    }
+  );
+}, K = ({
   className: o,
   children: r,
   onClick: t,
   ...e
 }) => {
-  const { variant: i } = g();
+  const { variant: n } = m();
   return /* @__PURE__ */ a(
     "div",
     {
       "data-slot": "accordion-footer",
-      className: n(T({ variant: i }), o),
-      onClick: (d) => {
-        t == null || t(d), d.stopPropagation();
+      className: i(T({ variant: n }), o),
+      onClick: (c) => {
+        t == null || t(c), c.stopPropagation();
       },
       ...e,
       children: r
@@ -252,15 +285,17 @@ const O = ({
   );
 };
 export {
-  D as Accordion,
-  B as AccordionContent,
-  G as AccordionFooter,
-  O as AccordionHeader,
-  z as AccordionItem,
-  E as AccordionTitle,
-  V as accordionContentInnerVariants,
+  O as Accordion,
+  J as AccordionChevron,
+  E as AccordionContent,
+  K as AccordionFooter,
+  B as AccordionHeader,
+  j as AccordionItem,
+  G as AccordionTitle,
+  P as accordionChevronVariants,
+  z as accordionContentInnerVariants,
   T as accordionFooterVariants,
   N as accordionItemVariants,
   S as accordionTitleVariants,
-  A as accordionTriggerVariants
+  V as accordionTriggerVariants
 };

package/dist/components/ArticleCard/ArticleCard.d.ts

@@ -0,0 +1,178 @@
+import { VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const articleCardVariants: (props?: ({
+    variant?: "search" | "compact" | "heroLarge" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const articleCardTitleVariants: (props?: ({
+    variant?: "search" | "compact" | "heroLarge" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const articleCardMetaVariants: (props?: ({
+    variant?: "search" | "compact" | "heroLarge" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ArticleCardVariant = 'compact' | 'heroLarge' | 'search';
+/** Props for the `ArticleCard.Skeleton` subcomponent. */
+export interface ArticleCardSkeletonProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /**
+     * Visual layout variant — mirrors `ArticleCard.variant` so the skeleton
+     * reserves the same footprint as the card it stands in for.
+     *
+     * @default 'compact'
+     */
+    variant?: ArticleCardVariant;
+    /**
+     * Skeleton color, forwarded to every inner `Skeleton` block. Use `'light'`
+     * when the skeleton sits on a tinted surface.
+     *
+     * @default 'default'
+     */
+    color?: 'default' | 'light';
+}
+declare const ArticleCardSkeleton: {
+    ({ variant, color, className, ...props }: ArticleCardSkeletonProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Content props shared between the default-anchor and `asChild` shapes of
+ * ArticleCard. Variant/size/styling lives here; the link target and the
+ * children/asChild axis are split into the two members of the discriminated
+ * union below.
+ */
+export interface ArticleCardBaseProps extends Omit<VariantProps<typeof articleCardVariants>, 'variant' | 'size'> {
+    /** Article title — maps to the consumer's `name` field. */
+    name: string;
+    /**
+     * Image source — either a URL string (rendered as a plain `<img>`) or a
+     * custom React node such as a Next.js `<Image>` element. The wrapper
+     * around the image handles sizing, rounded corners, overflow, and the
+     * disabled dim; any direct `<img>` child (including the one Next's
+     * `<Image>` renders) is auto-stretched to fill the wrapper, so no extra
+     * styling is required on the consumer side.
+     *
+     * @example
+     * // String form (built-in <img>)
+     * <ArticleCard image="/articles/hero.jpg" name="…" publicationDate={…} />
+     *
+     * @example
+     * // Next.js <Image> (or any custom element)
+     * <ArticleCard
+     *   image={<Image src={cover} alt="" fill />}
+     *   name="…"
+     *   publicationDate={…}
+     * />
+     */
+    image: string | React.ReactNode;
+    /**
+     * Alt text for the built-in `<img>` (used when `image` is a string).
+     *
+     * - `compact` / `search` — defaults to `name`.
+     * - `heroLarge` — defaults to `""` (the image is decorative; the title
+     *   already conveys the meaning).
+     *
+     * Ignored when `image` is a custom React node — the consumer's element
+     * carries its own `alt`.
+     */
+    imageAlt?: string;
+    /**
+     * Resolved category labels rendered as Tag chips. Consumer is expected to
+     * resolve category IDs to display labels before passing them in.
+     */
+    categories?: string[];
+    /**
+     * Maximum number of tag chips rendered before overflow collapses into a
+     * `+N` counter chip (mirrors `MultiSelect.maxNumberOfVisibleTags`).
+     *
+     * @default 2
+     */
+    maxNumberOfVisibleTags?: number;
+    /** Article publication date — accepts a `Date` or any value parseable by `new Date()`. */
+    publicationDate: Date | string;
+    /**
+     * Optional reading time in minutes. When set, rendered next to the
+     * publication date using `readingTimeLabel` (or the locale default).
+     */
+    readingTime?: number;
+    /** Override for the publication-date formatter. Defaults to `d. M. yyyy`. */
+    formatDate?: (date: Date) => string;
+    /**
+     * Override for the read-article CTA label.
+     *
+     * @default translations.articleCard.readArticle
+     */
+    readArticleLabel?: string;
+    /**
+     * Override for the reading-time label builder. Receives the duration in
+     * minutes.
+     *
+     * @default translations.articleCard.readingTime
+     */
+    readingTimeLabel?: (minutes: number) => string;
+    /**
+     * Visual layout variant.
+     *
+     * - `compact` — 288×316 grid card with image on top.
+     * - `heroLarge` — large feature card with text overlaid on the image.
+     * - `search` — horizontal image-left card for search result lists.
+     *
+     * @default 'compact'
+     */
+    variant?: 'compact' | 'heroLarge' | 'search';
+    /** Disabled visual state. Adds the disabled border, dims the image, and grays the text. The anchor's `href` is also stripped so the card is non-navigable. @default false */
+    disabled?: boolean;
+}
+/**
+ * Default shape — ArticleCard renders an `<a href>` as its root and the
+ * structured content (image, tags, title, metadata, CTA) as its children.
+ */
+export interface ArticleCardLinkProps extends ArticleCardBaseProps, Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'title' | 'children' | 'href'> {
+    /**
+     * URL the card navigates to when activated. Required unless `asChild` is
+     * used. Stripped from the rendered DOM when `disabled` is true so the
+     * anchor becomes non-navigable while keeping its visual state.
+     *
+     * @example
+     * <ArticleCard href="/articles/123" name="…" image="…" publicationDate={…} />
+     */
+    href: string;
+    /** Discriminant: omit (or set to `false`) for the built-in `<a>` shape. Set to `true` to switch to the `asChild` shape. */
+    asChild?: false;
+    /** Not accepted in the default `<a>` shape — the card composes its own structured content. Use `asChild` to inject a custom root. */
+    children?: never;
+}
+/**
+ * Escape-hatch shape — hand the root element off to a consumer-provided
+ * `<Link>` (Next.js, React Router, …) via Radix `Slot`. The card's
+ * structured content is rendered as the child's children, so the child
+ * must be self-closing.
+ */
+export interface ArticleCardAsChildProps extends ArticleCardBaseProps, Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'children'> {
+    /**
+     * Renders the consumer's child as the root element via Radix `Slot`, so
+     * the card surface can be a router `<Link>` (Next.js, React Router, …)
+     * instead of the built-in `<a>`. The structured content (image, tags,
+     * title, metadata, CTA) is rendered as the child's children — pass a
+     * self-closing element.
+     *
+     * @example
+     * <ArticleCard asChild name="…" image="…" publicationDate={…}>
+     *   <Link href="/articles/123" />
+     * </ArticleCard>
+     */
+    asChild: true;
+    /** Self-closing element to use as the root. Its children are overwritten with the card's structured content. */
+    children: React.ReactElement;
+    /** Not accepted in the `asChild` shape — set `href` on the consumer-provided child instead. */
+    href?: never;
+}
+/**
+ * Props for the ArticleCard component.
+ *
+ * The card is a link by default. Pass `href` for the built-in `<a>`, or
+ * `asChild` with a self-closing child to swap in a router `<Link>`.
+ */
+export type ArticleCardProps = ArticleCardLinkProps | ArticleCardAsChildProps;
+declare const ArticleCard: React.ForwardRefExoticComponent<ArticleCardProps & React.RefAttributes<HTMLAnchorElement>>;
+declare const ArticleCardWithSkeleton: typeof ArticleCard & {
+    Skeleton: typeof ArticleCardSkeleton;
+};
+export { ArticleCardWithSkeleton as ArticleCard, articleCardVariants, articleCardTitleVariants, articleCardMetaVariants, };
+//# sourceMappingURL=ArticleCard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ArticleCard.d.ts","sourceRoot":"","sources":["../../../src/components/ArticleCard/ArticleCard.tsx"],"names":[],"mappings":"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"}