@vkzstudio/muza-ui 1.0.47 → 1.0.48

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

@@ -1,4 +1,5 @@
 import { AccordionMultipleProps as RadixAccordionMultipleProps, AccordionSingleProps as RadixAccordionSingleProps } from '@radix-ui/react-accordion';
+import { TypographyProps } from '../Typography';
 import * as React from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 /**
@@ -6,8 +7,9 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
  * - `'default'` — outlined border, neutral background
  * - `'branded'` — brand-colored fill, no border
  * - `'settings'` — white background with light border, for admin/config panels
+ * - `'inline'` — borderless except for a bottom divider, for stacked list-style sections
  */
-export type AccordionVariant = 'default' | 'branded' | 'settings';
+export type AccordionVariant = 'default' | 'branded' | 'settings' | 'inline';
 /** Props for single mode — only one item can be open at a time. */
 export interface AccordionSingleProps extends RadixAccordionSingleProps {
     /** Single mode — only one item can be open at a time. */
@@ -72,18 +74,18 @@ export interface AccordionItemProps extends React.ComponentProps<typeof Accordio
     /** Prevents interaction with this specific item. @default false */
     disabled?: boolean;
     /**
-     * When true, clicking anywhere on the item (not just the header) toggles the open state.
-     * Set to false for items whose content contains interactive elements (forms, inputs, switches)
-     * so inner clicks don't collapse the section.
+     * When true, clicking anywhere on the item (not just the header trigger)
+     * toggles the open state. Opt-in because interactive content inside
+     * `AccordionContent` (forms, inputs, switches, buttons) would otherwise
+     * bubble clicks up and silently collapse the section. Safe to enable for
+     * items whose content is purely informational text.
      *
-     * @default true
+     * @default false
      * @example
-     * <AccordionItem value="settings" clickableContent={false}>
-     *   <AccordionHeader>Settings</AccordionHeader>
-     *   <AccordionContent>
-     *     <Input />
-     *     <Switch />
-     *   </AccordionContent>
+     * // Pure-text content — enable for a larger click target
+     * <AccordionItem value="faq" clickableContent>
+     *   <AccordionHeader>Question</AccordionHeader>
+     *   <AccordionContent>Answer text</AccordionContent>
      * </AccordionItem>
      */
     clickableContent?: boolean;
@@ -105,26 +107,118 @@ export interface AccordionItemProps extends React.ComponentProps<typeof Accordio
  * Props for the AccordionHeader component.
  * Renders the clickable header area that toggles content visibility.
  * Wraps and behaves as Radix's `Accordion.Header` + `Accordion.Trigger`.
+ *
+ * Extends `HTMLAttributes<HTMLDivElement>` rather than Radix's Header props
+ * so that Radix-specific props (e.g. `asChild`) don't leak onto a plain
+ * `<div>` in the static-item branch of the implementation.
  */
-export type AccordionHeaderProps = React.ComponentProps<typeof AccordionPrimitive.Header>;
+export interface AccordionHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Action node rendered as a sibling of the trigger inside the header. Stays
+     * visible regardless of the open state and is independently clickable —
+     * useful for buttons, icon controls, or status indicators that should not
+     * toggle the accordion when activated.
+     *
+     * Place interactive elements here instead of inside the trigger to avoid
+     * nested `<button>` elements.
+     *
+     * @example
+     * <AccordionHeader headerActions={<Button size="xs" onClick={handleEdit}>Edit</Button>}>
+     *   Section title
+     * </AccordionHeader>
+     */
+    headerActions?: React.ReactNode;
+}
 /**
  * Props for the AccordionContent component.
  * Collapsible content area with built-in slide-up/slide-down animation.
  * Wraps Radix's `Accordion.Content`.
  */
 export type AccordionContentProps = React.ComponentProps<typeof AccordionPrimitive.Content>;
+/**
+ * Props for the AccordionFooter component.
+ *
+ * Renders below the content but stays visible regardless of the open state.
+ * Use for actions (buttons, links) that should be reachable even when the
+ * accordion is collapsed. Clicks inside the footer do not propagate to the
+ * trigger, so the accordion does not toggle when the footer is activated.
+ */
+export type AccordionFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Props for the AccordionTitle component.
+ *
+ * Standardized title slot inside an `AccordionHeader`. Owns the hover
+ * highlight (via `group-hover`) so that hovering the trigger re-colors only
+ * the title, not every text node in the header.
+ *
+ * Wraps {@link Typography} — accepts the same `variant`, `weight`, `size`,
+ * `component`, and `fixY` props. Defaults are tuned for accordion titles:
+ * - `component` defaults to `'span'`
+ * - `variant` defaults to `'title'`
+ * - `weight` defaults to `'medium'`
+ * - `size` defaults to `'base'`
+ * - `fixY` defaults to `true`
+ *
+ * @see Typography
+ */
+export type AccordionTitleProps = Omit<TypographyProps, 'component'> & {
+    /** HTML element to render. @default 'span' */
+    component?: TypographyProps['component'];
+};
 declare const accordionItemVariants: (props?: ({
-    variant?: "default" | "branded" | "settings" | null | undefined;
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 declare const accordionTriggerVariants: (props?: ({
-    variant?: "default" | "branded" | "settings" | null | undefined;
+    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;
 declare const accordionContentInnerVariants: (props?: ({
-    variant?: "default" | "branded" | "settings" | null | undefined;
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare const accordionFooterVariants: (props?: ({
+    variant?: "default" | "inline" | "branded" | "settings" | null | undefined;
 } & 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: ({ className, children, clickableContent, static: isStatic, value, disabled, ...props }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
-declare const AccordionHeader: ({ className, children, ...props }: AccordionHeaderProps) => 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 AccordionContent: ({ className, children, ...props }: AccordionContentProps) => import("react/jsx-runtime").JSX.Element;
-export { Accordion, AccordionContent, AccordionHeader, AccordionItem, accordionItemVariants, accordionTriggerVariants, accordionContentInnerVariants, };
+/**
+ * Standardized title slot for `AccordionHeader`. Owns the hover highlight via
+ * `group-hover` so only the title re-colors on hover — sibling text in the
+ * header (subtitles, badge labels) keeps its own color. Wraps `Typography`.
+ *
+ * @example
+ * <AccordionHeader>
+ *   <AccordionTitle>Personal info</AccordionTitle>
+ * </AccordionHeader>
+ *
+ * @example
+ * // With a subtitle that stays its own color on hover:
+ * <AccordionHeader>
+ *   <div className="flex flex-col">
+ *     <AccordionTitle>Bookings</AccordionTitle>
+ *     <Typography size="sm" className="text-text-dark-secondary">3 upcoming</Typography>
+ *   </div>
+ * </AccordionHeader>
+ */
+declare const AccordionTitle: ({ className, component, variant: typographyVariant, weight, size, fixY, ...props }: AccordionTitleProps) => 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
+ * accordion is collapsed. Clicks inside the footer do not propagate to the
+ * trigger.
+ *
+ * @example
+ * <AccordionItem value="item-1">
+ *   <AccordionHeader>Section title</AccordionHeader>
+ *   <AccordionContent>...</AccordionContent>
+ *   <AccordionFooter>
+ *     <Button fullWidth onClick={save}>Save</Button>
+ *   </AccordionFooter>
+ * </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, };
 //# 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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,2BAA2B,CAAA;AAC/D,OAAO,EACL,KAAK,sBAAsB,IAAI,2BAA2B,EAC1D,KAAK,oBAAoB,IAAI,yBAAyB,EACvD,MAAM,2BAA2B,CAAA;AAKlC;;;;;GAKG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,CAAA;AAEjE,mEAAmE;AACnE,MAAM,WAAW,oBAAqB,SAAQ,yBAAyB;IACrE,yDAAyD;IACzD,IAAI,EAAE,QAAQ,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,iFAAiF;IACjF,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,qEAAqE;IACrE,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,oDAAoD;IACpD,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,2EAA2E;IAC3E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACvC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,gFAAgF;AAChF,MAAM,WAAW,sBAAuB,SAAQ,2BAA2B;IACzE,sEAAsE;IACtE,IAAI,EAAE,UAAU,CAAA;IAChB;;;;OAIG;IACH,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,EAAE,CAAA;IAChB,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,EAAE,CAAA;IACvB,0EAA0E;IAC1E,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAA;IACzC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,cAAc,GAAG,oBAAoB,GAAG,sBAAsB,CAAA;AAE1E;;;GAGG;AACH,MAAM,WAAW,kBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC;IAC5D,qGAAqG;IACrG,KAAK,EAAE,MAAM,CAAA;IACb,mEAAmE;IACnE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;;;;;;;;;;;;OAcG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;;;;;;;;;;OAWG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED;;;;GAIG;AACH,MAAM,MAAM,oBAAoB,GAAG,KAAK,CAAC,cAAc,CACrD,OAAO,kBAAkB,CAAC,MAAM,CACjC,CAAA;AAED;;;;GAIG;AACH,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,cAAc,CACtD,OAAO,kBAAkB,CAAC,OAAO,CAClC,CAAA;AAMD,QAAA,MAAM,qBAAqB;;8EAYzB,CAAA;AAEF,QAAA,MAAM,wBAAwB;;8EAe7B,CAAA;AAED,QAAA,MAAM,6BAA6B;;8EASjC,CAAA;AA8BF,QAAA,MAAM,SAAS,GAAI,+CAIhB,cAAc,4CAahB,CAAA;AAED,QAAA,MAAM,aAAa,GAAI,wFAQpB,kBAAkB,4CAiDpB,CAAA;AAED,QAAA,MAAM,eAAe,GAAI,mCAItB,oBAAoB,4CAsCtB,CAAA;AAED,QAAA,MAAM,gBAAgB,GAAI,mCAIvB,qBAAqB,4CA6BvB,CAAA;AAED,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,qBAAqB,EACrB,wBAAwB,EACxB,6BAA6B,GAC9B,CAAA"}
+{"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,168 +1,266 @@
-import { jsx as t, jsxs as w } from "react/jsx-runtime";
-import * as c from "react";
-import * as n from "@radix-ui/react-accordion";
+import { jsx as a, jsxs as f } 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 { cn as i } from "../../utils/cn.js";
-import { AltArrowDownOutline as N } from "@solar-icons/react-perf";
-const v = u("relative w-full transition-colors", {
+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", {
   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",
       branded: "rounded-comp-accordion-branded-radius border-0 bg-surface-brand-brand-tertiary p-comp-accordion-branded-p has-[[data-slot=accordion-trigger]:hover]:bg-surface-base-primary-hover",
-      settings: "rounded-comp-accordion-settings-radius border border-comp-accordion-settings-stroke-def bg-comp-accordion-settings-bg-primary-def has-[[data-slot=accordion-trigger]:disabled]:cursor-not-allowed has-[[data-slot=accordion-trigger]:disabled]:border-comp-accordion-settings-stroke-disabled has-[[data-slot=accordion-trigger]:disabled]:bg-comp-accordion-settings-bg-primary-disabled has-[[data-slot=accordion-trigger]:focus-visible]:border-comp-accordion-settings-stroke-focused has-[[data-slot=accordion-trigger]:focus-visible]:bg-comp-accordion-settings-bg-primary-focused has-[[data-slot=accordion-trigger]:hover:not(:disabled)]:border-comp-accordion-settings-stroke-hover has-[[data-slot=accordion-trigger]:hover:not(:disabled)]:bg-comp-accordion-settings-bg-primary-hover"
+      settings: "rounded-comp-accordion-settings-radius border border-comp-accordion-settings-stroke-def bg-comp-accordion-settings-bg-primary-def has-[[data-slot=accordion-trigger]:disabled]:cursor-not-allowed has-[[data-slot=accordion-trigger]:disabled]:border-comp-accordion-settings-stroke-disabled has-[[data-slot=accordion-trigger]:disabled]:bg-comp-accordion-settings-bg-primary-disabled has-[[data-slot=accordion-trigger]:focus-visible]:border-comp-accordion-settings-stroke-focused has-[[data-slot=accordion-trigger]:focus-visible]:bg-comp-accordion-settings-bg-primary-focused has-[[data-slot=accordion-trigger]:hover:not(:disabled)]:border-comp-accordion-settings-stroke-hover has-[[data-slot=accordion-trigger]:hover:not(:disabled)]:bg-comp-accordion-settings-bg-primary-hover",
+      inline: "rounded-none border-x-0 border-t-0 border-b border-comp-accordion-inline-stroke-def bg-transparent has-[[data-slot=accordion-trigger]:disabled]:border-comp-accordion-inline-stroke-disabled has-[[data-slot=accordion-trigger]:focus-visible]:border-comp-accordion-inline-stroke-focused has-[[data-slot=accordion-trigger]:hover:not(:disabled)]:border-comp-accordion-inline-stroke-hover"
     }
   },
   defaultVariants: { variant: "default" }
-}), x = u(
+}), A = u(
   "group flex w-full cursor-pointer items-center justify-between gap-4 transition-all outline-none [&[data-state=open]>svg]:rotate-180",
   {
     variants: {
       variant: {
         default: "text-text-dark-primary-def focus-visible-default data-[state=open]:text-text-brand-def",
         branded: "text-text-brand-def focus-visible-default data-[state=open]:text-text-brand-hover",
-        settings: "gap-comp-accordion-settings-gap p-comp-accordion-settings-p text-text-dark-primary-def data-[disabled]:text-text-dark-disabled"
+        settings: "gap-comp-accordion-settings-gap p-comp-accordion-settings-p text-text-dark-primary-def data-[disabled]:text-text-dark-disabled",
+        inline: "gap-comp-accordion-inline-gap px-comp-accordion-inline-p-hor py-comp-accordion-inline-p-ver text-text-dark-primary-def data-[disabled]:text-text-dark-disabled"
       }
     },
     defaultVariants: { variant: "default" }
   }
-), h = u("text-left", {
+), S = u("text-inherit transition-colors", {
+  variants: {
+    variant: {
+      default: "group-hover:text-text-brand-hover",
+      branded: "group-hover:text-text-brand-hover",
+      settings: "group-hover:text-text-brand-hover group-data-[disabled]:text-text-dark-disabled",
+      inline: "group-hover:text-text-brand-hover group-data-[disabled]:text-text-dark-disabled"
+    }
+  },
+  defaultVariants: { variant: "default" }
+}), V = u("text-left", {
   variants: {
     variant: {
       default: "pt-md",
       branded: "pt-2xl text-text-brand-def",
-      settings: "p-comp-accordion-settings-p pt-comp-accordion-settings-p-top"
+      settings: "p-comp-accordion-settings-p pt-comp-accordion-settings-p-top",
+      inline: "px-comp-accordion-inline-p-hor pb-comp-accordion-inline-p-ver"
+    }
+  },
+  defaultVariants: { variant: "default" }
+}), T = u("text-left", {
+  variants: {
+    variant: {
+      default: "pt-2xl",
+      branded: "pt-2xl",
+      settings: "p-comp-accordion-settings-p pt-comp-accordion-settings-p-top",
+      inline: "px-comp-accordion-inline-p-hor pb-comp-accordion-inline-p-ver"
     }
   },
   defaultVariants: { variant: "default" }
-}), y = c.createContext({
+}), C = l.createContext({
   variant: "default"
-}), m = () => c.useContext(y), l = c.createContext({
+}), g = () => l.useContext(C), v = l.createContext({
   isStatic: !1
-}), k = () => c.useContext(l), P = ({
+}), w = () => l.useContext(v), D = ({
   className: o,
   variant: r,
-  ...a
+  ...t
 }) => {
-  const e = r ?? (a.type === "single" ? "branded" : "default");
-  return /* @__PURE__ */ t(y.Provider, { value: { variant: e }, children: /* @__PURE__ */ t(
-    n.Root,
+  const e = r ?? (t.type === "single" ? "branded" : "default");
+  return /* @__PURE__ */ a(C.Provider, { value: { variant: e }, children: /* @__PURE__ */ a(
+    m.Root,
     {
       "data-slot": "accordion",
-      className: i("flex w-full flex-col gap-md", o),
-      ...a
+      className: n("flex w-full flex-col gap-md", o),
+      ...t
     }
   ) });
-}, j = ({
+}, z = 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);
+    };
+    return e ? /* @__PURE__ */ a(v.Provider, { value: { isStatic: !0 }, children: /* @__PURE__ */ a(
+      "div",
+      {
+        ref: k,
+        "data-slot": "accordion-item",
+        "data-state": "open",
+        className: n(N({ variant: x }), o),
+        ...c,
+        children: r
+      }
+    ) }) : /* @__PURE__ */ a(v.Provider, { value: { isStatic: !1 }, children: /* @__PURE__ */ a(
+      m.Item,
+      {
+        ref: k,
+        "data-slot": "accordion-item",
+        value: i,
+        disabled: d,
+        className: n(
+          N({ variant: x }),
+          t && "cursor-pointer",
+          o
+        ),
+        onClick: t ? (p) => {
+          var y;
+          const b = (y = h.current) == null ? void 0 : y.querySelector(
+            '[data-slot="accordion-trigger"]'
+          );
+          b && !b.contains(p.target) && b.click();
+        } : void 0,
+        ...c,
+        children: r
+      }
+    ) });
+  }
+);
+z.displayName = "AccordionItem";
+const O = ({
   className: o,
   children: r,
-  clickableContent: a = !0,
-  static: e,
-  value: d,
-  disabled: A,
-  ...g
+  headerActions: t,
+  ...e
 }) => {
-  const { variant: f } = m(), p = c.useRef(null);
-  return e ? /* @__PURE__ */ t(l.Provider, { value: { isStatic: !0 }, children: /* @__PURE__ */ t(
+  const { variant: i } = g(), { isStatic: d } = w();
+  return d ? /* @__PURE__ */ f("div", { className: "flex items-center", ...e, children: [
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: n(
+          A({ variant: i }),
+          "cursor-default",
+          o
+        ),
+        children: r
+      }
+    ),
+    t && /* @__PURE__ */ a(
+      "div",
+      {
+        className: "flex shrink-0 items-center",
+        onClick: (c) => c.stopPropagation(),
+        children: t
+      }
+    )
+  ] }) : /* @__PURE__ */ f(m.Header, { className: "flex items-center", ...e, children: [
+    /* @__PURE__ */ f(
+      m.Trigger,
+      {
+        "data-slot": "accordion-trigger",
+        className: n(A({ variant: i }), o),
+        children: [
+          r,
+          /* @__PURE__ */ a(
+            P,
+            {
+              className: n(
+                "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"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    t && /* @__PURE__ */ a(
+      "div",
+      {
+        className: "flex shrink-0 items-center",
+        onClick: (c) => c.stopPropagation(),
+        children: t
+      }
+    )
+  ] });
+}, B = ({
+  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(
     "div",
     {
-      "data-slot": "accordion-item",
-      "data-state": "open",
-      className: i(v({ variant: f }), o),
-      ...g,
+      className: n(V({ variant: e }), o),
       children: r
     }
-  ) }) : /* @__PURE__ */ t(l.Provider, { value: { isStatic: !1 }, children: /* @__PURE__ */ t(
-    n.Item,
+  ) }) : /* @__PURE__ */ a(
+    m.Content,
     {
-      ref: p,
-      "data-slot": "accordion-item",
-      value: d,
-      disabled: A,
-      className: i(
-        v({ variant: f }),
-        a && "cursor-pointer",
-        o
-      ),
-      onClick: a ? (C) => {
-        var b;
-        const s = (b = p.current) == null ? void 0 : b.querySelector(
-          '[data-slot="accordion-trigger"]'
-        );
-        s && !s.contains(C.target) && s.click();
-      } : void 0,
-      ...g,
-      children: r
+      "data-slot": "accordion-content",
+      className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+      ...t,
+      children: /* @__PURE__ */ a(
+        "div",
+        {
+          className: n(V({ variant: e }), o),
+          children: r
+        }
+      )
     }
-  ) });
-}, R = ({
+  );
+}, E = ({
   className: o,
-  children: r,
-  ...a
+  component: r = "span",
+  variant: t = "title",
+  weight: e = "medium",
+  size: i = "base",
+  fixY: d = !0,
+  ...c
 }) => {
-  const { variant: e } = m(), { isStatic: d } = k();
-  return d ? /* @__PURE__ */ t("div", { className: "flex", ...a, children: /* @__PURE__ */ t(
-    "div",
-    {
-      className: i(
-        x({ variant: e }),
-        "cursor-default",
-        o
-      ),
-      children: r
-    }
-  ) }) : /* @__PURE__ */ t(n.Header, { className: "flex", ...a, children: /* @__PURE__ */ w(
-    n.Trigger,
+  const { variant: s } = g();
+  return /* @__PURE__ */ a(
+    I,
     {
-      "data-slot": "accordion-trigger",
-      className: i(x({ variant: e }), o),
-      children: [
-        r,
-        /* @__PURE__ */ t(
-          N,
-          {
-            className: i(
-              "shrink-0 text-comp-select-icon-brand-def transition-transform duration-300 group-data-[disabled]:text-icon-dark-tertiary",
-              e === "branded" ? "size-comp-accordion-branded-ico-size-md" : "size-comp-accordion-default-ico-size-md"
-            )
-          }
-        )
-      ]
+      "data-slot": "accordion-title",
+      component: r,
+      variant: t,
+      weight: e,
+      size: i,
+      fixY: d,
+      className: n(S({ variant: s }), o),
+      ...c
     }
-  ) });
-}, H = ({
+  );
+}, G = ({
   className: o,
   children: r,
-  ...a
+  onClick: t,
+  ...e
 }) => {
-  const { variant: e } = m(), { isStatic: d } = k();
-  return d ? /* @__PURE__ */ t("div", { "data-slot": "accordion-content", ...a, children: /* @__PURE__ */ t(
+  const { variant: i } = g();
+  return /* @__PURE__ */ a(
     "div",
     {
-      className: i(h({ variant: e }), o),
+      "data-slot": "accordion-footer",
+      className: n(T({ variant: i }), o),
+      onClick: (d) => {
+        t == null || t(d), d.stopPropagation();
+      },
+      ...e,
       children: r
     }
-  ) }) : /* @__PURE__ */ t(
-    n.Content,
-    {
-      "data-slot": "accordion-content",
-      className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
-      ...a,
-      children: /* @__PURE__ */ t(
-        "div",
-        {
-          className: i(h({ variant: e }), o),
-          children: r
-        }
-      )
-    }
   );
 };
 export {
-  P as Accordion,
-  H as AccordionContent,
-  R as AccordionHeader,
-  j as AccordionItem,
-  h as accordionContentInnerVariants,
-  v as accordionItemVariants,
-  x as accordionTriggerVariants
+  D as Accordion,
+  B as AccordionContent,
+  G as AccordionFooter,
+  O as AccordionHeader,
+  z as AccordionItem,
+  E as AccordionTitle,
+  V as accordionContentInnerVariants,
+  T as accordionFooterVariants,
+  N as accordionItemVariants,
+  S as accordionTitleVariants,
+  A as accordionTriggerVariants
 };

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

@@ -8,6 +8,9 @@ export declare const Single: Story;
 export declare const Multiple: Story;
 export declare const Settings: Story;
 export declare const Static: Story;
+export declare const ClickableContent: Story;
+export declare const Inline: Story;
+export declare const WithFooter: Story;
 export declare const AllVariants: Story;
 type PlaygroundProps = {
     headline1: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAc3D,OAAO,EACL,SAAS,EAKV,MAAM,aAAa,CAAA;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CAuEhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAsDrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAmEpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAA;AAqVD,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA0EpB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAiLzB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,eAAe,CA4DxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,eAAe,CAyEtD,CAAA"}
+{"version":3,"file":"Accordion.stories.d.ts","sourceRoot":"","sources":["../../../src/components/Accordion/Accordion.stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAgB3D,OAAO,EACL,SAAS,EAOV,MAAM,aAAa,CAAA;AAEpB,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,SAAS,CA6EhC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,SAAS,CAAC,CAAA;AAEvC,eAAO,MAAM,OAAO,EAAE,KAsDrB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAmEpB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAiCtB,CAAA;AAqVD,eAAO,MAAM,QAAQ,EAAE,KAetB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KA0EpB,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAoJ9B,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAmGpB,CAAA;AAsDD,eAAO,MAAM,UAAU,EAAE,KAWxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAkPzB,CAAA;AAED,KAAK,eAAe,GAAG;IACrB,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,kBAAkB,EAAE,QAAQ,CAAC,eAAe,CA4DxD,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,QAAQ,CAAC,eAAe,CAyEtD,CAAA"}

package/dist/components/Alert/Alert.js

@@ -2,8 +2,8 @@ import { jsxs as x, jsx as r } from "react/jsx-runtime";
 import * as o from "react";
 import { cva as b } from "class-variance-authority";
 import { XClose as y } from "../Icons/CustomIcons.js";
-import { Typography as h } from "../Typography/Typography.js";
-import { cn as v } from "../../utils/cn.js";
+import { cn as h } from "../../utils/cn.js";
+import { Typography as v } from "../Typography/Typography.js";
 const w = b(["rounded-2xl"], {
   variants: {
     type: {
@@ -41,7 +41,7 @@ const w = b(["rounded-2xl"], {
     {
       "data-slot": "alert",
       role: "alert",
-      className: v(
+      className: h(
         w({ type: i, size: t }),
         s,
         "flex w-fit items-center gap-sm",
@@ -51,7 +51,7 @@ const w = b(["rounded-2xl"], {
       ...p,
       children: [
         /* @__PURE__ */ r(
-          h,
+          v,
           {
             component: "span",
             variant: "body",

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonArrow.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonArrow/ButtonArrow.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAyBzB,CAAA"}
+{"version":3,"file":"ButtonArrow.stories.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonArrow/ButtonArrow.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAG3D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+B0B,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAcrB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAiEzB,CAAA"}