@frontify/fondue-components 29.1.0 → 29.2.0

package/dist/fondue-components21.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components21.js","sources":["../src/components/LoadingCircle/LoadingCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport styles from './styles/loadingCircleStyles.module.scss';\n\nexport type LoadingCircleProps = {\n    /**\n     * The  variant of the loading circle.\n     * @default 'progress'\n     */\n    variant?: 'progress' | 'success' | 'danger';\n    /**\n     * The size of the loading circle\n     * @default \"medium\"\n     */\n    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';\n    'data-test-id'?: string;\n};\n\nexport const LoadingCircle = forwardRef<HTMLDivElement, LoadingCircleProps>(\n    (\n        {\n            variant = 'progress',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-circle-content',\n        }: LoadingCircleProps,\n        ref: ForwardedRef<HTMLDivElement>,\n    ) => {\n        return (\n            <div\n                ref={ref}\n                data-test-id={dataTestId}\n                data-variant={variant}\n                data-size={size}\n                className={styles.root}\n            ></div>\n        );\n    },\n);\nLoadingCircle.displayName = 'LoadingCircle';\n"],"names":["LoadingCircle","forwardRef","variant","size","dataTestId","ref","jsx","styles"],"mappings":";;;AAoBO,MAAMA,IAAgBC;AAAA,EACzB,CACI;AAAA,IACI,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,EAAA,GAEjCC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcD;AAAA,MACd,gBAAcF;AAAA,MACd,aAAWC;AAAA,MACX,WAAWI,EAAO;AAAA,IAAA;AAAA,EAAA;AAIlC;AACAP,EAAc,cAAc;"}
+{"version":3,"file":"fondue-components21.js","sources":["../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as ProgressRadixPrimitive from '@radix-ui/react-progress';\nimport { forwardRef, type CSSProperties, type ElementRef, type ForwardedRef } from 'react';\n\nimport styles from './styles/loadingBar.module.scss';\n\nexport type LoadingBarProps = {\n    /**\n     * The current value of the loading bar. If `null`, the loading bar will be in an indeterminate state.\n     * @default null\n     */\n    value: number | null;\n    /**\n     * The maximum value of the loading bar\n     * @default 100\n     */\n    max?: number;\n    /**\n     * @default 'fondue-loading-bar'\n     */\n    'data-test-id'?: string;\n    /**\n     * Add rounded corners to the loading bar\n     * @default true\n     */\n    rounded?: boolean;\n    /**\n     * The style of the loading bar\n     * @default \"default\"\n     */\n    variant?: 'default' | 'positive' | 'negative';\n    /**\n     * The size of the loading bar\n     * @default \"medium\"\n     */\n    size?: 'small' | 'medium' | 'large' | 'x-large';\n    /**\n     * The label of the loading bar for accessibility purposes\n     */\n    getValueLabel?: (value: number, max: number) => string;\n} & ({ 'aria-label': string } | { 'aria-labelledby': string });\n\nexport const LoadingBar = forwardRef<ElementRef<typeof ProgressRadixPrimitive.Root>, LoadingBarProps>(\n    (\n        {\n            value,\n            max = 100,\n            rounded = true,\n            variant = 'default',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-bar',\n            ...props\n        }: LoadingBarProps,\n        ref: ForwardedRef<ElementRef<typeof ProgressRadixPrimitive.Root>>,\n    ) => {\n        return (\n            <ProgressRadixPrimitive.Root\n                ref={ref}\n                data-test-id={dataTestId}\n                className={styles.container}\n                data-rounded={rounded}\n                data-size={size}\n                data-variant={variant}\n                aria-busy={value !== max}\n                value={value}\n                max={max}\n                style={\n                    {\n                        '--loading-bar-value': value,\n                        '--loading-bar-max': max,\n                        '--loading-bar-proportion': 'calc(var(--loading-bar-value) / var(--loading-bar-max))',\n                    } as CSSProperties\n                }\n                {...props}\n            >\n                <ProgressRadixPrimitive.Indicator\n                    className={styles.indicator}\n                    data-variant={variant}\n                    data-indeterminate={value === null}\n                />\n            </ProgressRadixPrimitive.Root>\n        );\n    },\n);\nLoadingBar.displayName = 'LoadingBar';\n"],"names":["LoadingBar","forwardRef","value","max","rounded","variant","size","dataTestId","props","ref","jsx","ProgressRadixPrimitive","styles"],"mappings":";;;;AA2CO,MAAMA,IAAaC;AAAA,EACtB,CACI;AAAA,IACI,OAAAC;AAAA,IACA,KAAAC,IAAM;AAAA,IACN,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,IAC7B,GAAGC;AAAA,EAAA,GAEPC,MAGI,gBAAAC;AAAA,IAACC,EAAuB;AAAA,IAAvB;AAAA,MACG,KAAAF;AAAA,MACA,gBAAcF;AAAA,MACd,WAAWK,EAAO;AAAA,MAClB,gBAAcR;AAAA,MACd,aAAWE;AAAA,MACX,gBAAcD;AAAA,MACd,aAAWH,MAAUC;AAAA,MACrB,OAAAD;AAAA,MACA,KAAAC;AAAA,MACA,OACI;AAAA,QACI,uBAAuBD;AAAA,QACvB,qBAAqBC;AAAA,QACrB,4BAA4B;AAAA,MAAA;AAAA,MAGnC,GAAGK;AAAA,MAEJ,UAAA,gBAAAE;AAAA,QAACC,EAAuB;AAAA,QAAvB;AAAA,UACG,WAAWC,EAAO;AAAA,UAClB,gBAAcP;AAAA,UACd,sBAAoBH,MAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAClC;AAAA,EAAA;AAIhB;AACAF,EAAW,cAAc;"}

package/dist/fondue-components22.js

@@ -1,50 +1,24 @@
-import { jsxs as p, jsx as t } from "react/jsx-runtime";
-import { IconCross as f } from "@frontify/fondue-icons";
-import { useTranslation as N } from "./fondue-components42.js";
-import a from "./fondue-components72.js";
-const x = ({
-  "aria-label": o,
-  "data-test-id": r = "notice",
-  variant: n = "default",
-  emphasis: d = "default",
-  size: e = "medium",
-  icon: i,
-  action: s,
-  onDismiss: l,
-  className: c = "",
-  children: m
-}) => {
-  const { t: u } = N();
-  return /* @__PURE__ */ p(
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import d from "./fondue-components76.js";
+const s = i(
+  ({
+    variant: t = "progress",
+    size: a = "medium",
+    "data-test-id": r = "fondue-loading-circle-content"
+  }, o) => /* @__PURE__ */ e(
     "div",
     {
-      "data-component": "notice",
-      "data-variant": n,
-      "data-emphasis": d,
-      "data-size": e,
+      ref: o,
       "data-test-id": r,
-      className: [a.root, c].filter(Boolean).join(" "),
-      role: "status",
-      "aria-live": "polite",
-      children: [
-        i ? /* @__PURE__ */ t("div", { className: a.icon, children: i }) : null,
-        /* @__PURE__ */ t("div", { className: a.content, children: m }),
-        s ? /* @__PURE__ */ t("div", { className: a.action, children: s }) : null,
-        l ? /* @__PURE__ */ t(
-          "button",
-          {
-            type: "button",
-            "aria-label": o || u("Notice_dismiss"),
-            className: a.dismiss,
-            onClick: l,
-            children: /* @__PURE__ */ t(f, { size: e === "large" ? "20" : "16" })
-          }
-        ) : null
-      ]
+      "data-variant": t,
+      "data-size": a,
+      className: d.root
     }
-  );
-};
+  )
+);
+s.displayName = "LoadingCircle";
 export {
-  x as Notice
+  s as LoadingCircle
 };
 //# sourceMappingURL=fondue-components22.js.map

package/dist/fondue-components22.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components22.js","sources":["../src/components/Notice/Notice.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from './styles/notice.module.scss';\n\ntype NoticeVariant = 'default' | 'highlight' | 'positive' | 'danger' | 'warning';\n\ntype NoticeEmphasis = 'default' | 'strong' | 'weak';\n\ntype NoticeSize = 'medium' | 'large';\n\nexport type NoticeProps = {\n    /**\n     * @default 'default'\n     */\n    variant?: NoticeVariant;\n    /**\n     * @default 'default'\n     */\n    emphasis?: NoticeEmphasis;\n    /**\n     * @default 'medium'\n     */\n    size?: NoticeSize;\n    /**\n     * Leading icon element\n     */\n    icon?: ReactNode;\n    /**\n     * Action element (typically a button)\n     */\n    action?: ReactNode;\n    /**\n     * Callback when the dismiss button is clicked\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Custom aria-label for the dismiss button\n     */\n    'aria-label'?: string;\n    /**\n     * Test ID for the component\n     */\n    'data-test-id'?: string;\n    /**\n     * Additional CSS class\n     */\n    className?: string;\n    /**\n     * Message content\n     */\n    children: ReactNode;\n};\n\nexport const Notice = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'notice',\n    variant = 'default',\n    emphasis = 'default',\n    size = 'medium',\n    icon,\n    action,\n    onDismiss,\n    className = '',\n    children,\n}: NoticeProps) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-component=\"notice\"\n            data-variant={variant}\n            data-emphasis={emphasis}\n            data-size={size}\n            data-test-id={dataTestId}\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            role=\"status\"\n            aria-live=\"polite\"\n        >\n            {icon ? <div className={styles.icon}>{icon}</div> : null}\n            <div className={styles.content}>{children}</div>\n            {action ? <div className={styles.action}>{action}</div> : null}\n            {onDismiss ? (\n                <button\n                    type=\"button\"\n                    aria-label={ariaLabel || t('Notice_dismiss')}\n                    className={styles.dismiss}\n                    onClick={onDismiss}\n                >\n                    <IconCross size={size === 'large' ? '20' : '16'} />\n                </button>\n            ) : null}\n        </div>\n    );\n};\n"],"names":["Notice","ariaLabel","dataTestId","variant","emphasis","size","icon","action","onDismiss","className","children","t","useTranslation","jsxs","styles","jsx","IconCross"],"mappings":";;;;AA0DO,MAAMA,IAAS,CAAC;AAAA,EACnB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACJ,MAAmB;AACf,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,kBAAe;AAAA,MACf,gBAAcV;AAAA,MACd,iBAAeC;AAAA,MACf,aAAWC;AAAA,MACX,gBAAcH;AAAA,MACd,WAAW,CAACY,EAAO,MAAML,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,MAAK;AAAA,MACL,aAAU;AAAA,MAET,UAAA;AAAA,QAAAH,sBAAQ,OAAA,EAAI,WAAWQ,EAAO,MAAO,aAAK,IAAS;AAAA,QACpD,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,SAAU,UAAAJ,GAAS;AAAA,QACzCH,IAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,aAAO,IAAS;AAAA,QACzDN,IACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,cAAYd,KAAaU,EAAE,gBAAgB;AAAA,YAC3C,WAAWG,EAAO;AAAA,YAClB,SAASN;AAAA,YAET,4BAACQ,GAAA,EAAU,MAAMX,MAAS,UAAU,OAAO,KAAA,CAAM;AAAA,UAAA;AAAA,QAAA,IAErD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB;"}
+{"version":3,"file":"fondue-components22.js","sources":["../src/components/LoadingCircle/LoadingCircle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { forwardRef, type ForwardedRef } from 'react';\n\nimport styles from './styles/loadingCircleStyles.module.scss';\n\nexport type LoadingCircleProps = {\n    /**\n     * The  variant of the loading circle.\n     * @default 'progress'\n     */\n    variant?: 'progress' | 'success' | 'danger';\n    /**\n     * The size of the loading circle\n     * @default \"medium\"\n     */\n    size?: 'xx-small' | 'x-small' | 'small' | 'medium' | 'large';\n    'data-test-id'?: string;\n};\n\nexport const LoadingCircle = forwardRef<HTMLDivElement, LoadingCircleProps>(\n    (\n        {\n            variant = 'progress',\n            size = 'medium',\n            'data-test-id': dataTestId = 'fondue-loading-circle-content',\n        }: LoadingCircleProps,\n        ref: ForwardedRef<HTMLDivElement>,\n    ) => {\n        return (\n            <div\n                ref={ref}\n                data-test-id={dataTestId}\n                data-variant={variant}\n                data-size={size}\n                className={styles.root}\n            ></div>\n        );\n    },\n);\nLoadingCircle.displayName = 'LoadingCircle';\n"],"names":["LoadingCircle","forwardRef","variant","size","dataTestId","ref","jsx","styles"],"mappings":";;;AAoBO,MAAMA,IAAgBC;AAAA,EACzB,CACI;AAAA,IACI,SAAAC,IAAU;AAAA,IACV,MAAAC,IAAO;AAAA,IACP,gBAAgBC,IAAa;AAAA,EAAA,GAEjCC,MAGI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAAD;AAAA,MACA,gBAAcD;AAAA,MACd,gBAAcF;AAAA,MACd,aAAWC;AAAA,MACX,WAAWI,EAAO;AAAA,IAAA;AAAA,EAAA;AAIlC;AACAP,EAAc,cAAc;"}

package/dist/fondue-components23.js

@@ -1,73 +1,51 @@
-import { jsx as m, jsxs as x } from "react/jsx-runtime";
-import { AxisModifier as O } from "./fondue-components73.js";
-import { DragDropProvider as g } from "@dnd-kit/react";
-import { forwardRef as A, useMemo as H } from "react";
-import { OrderableListItem as R } from "./fondue-components74.js";
-import { OrderableListItemAction as y } from "./fondue-components75.js";
-import { OrderableListItemDecorator as $ } from "./fondue-components76.js";
-import { OrderableListItemDescription as h } from "./fondue-components77.js";
-import { OrderableItemDragHandle as w, OrderableItemCustomHandle as E } from "./fondue-components78.js";
-import { OrderableListItemTitle as M } from "./fondue-components79.js";
-import { getItemTitle as N } from "./fondue-components80.js";
-import { useAnnounceState as S, OrderableListAnnounceProvider as T } from "./fondue-components81.js";
-import { useOrderedListItems as j } from "./fondue-components82.js";
-import c from "./fondue-components83.js";
-import { isSortable as P } from "./fondue-components84.js";
-const f = ({
-  children: p,
-  spacing: b = "comfortable",
-  direction: e = "vertical",
-  order: r = [],
-  onOrderChange: t,
-  "aria-label": u = "Sortable list"
-}, I) => {
-  const D = j(p, r), { message: L, announce: l } = S(), v = H(
-    () => O.configure({ axis: e === "vertical" ? "x" : "y", value: 0 }),
-    [e]
-  );
-  return /* @__PURE__ */ m(T, { value: l, children: /* @__PURE__ */ x(g, { onDragEnd: (d) => {
-    if (d.canceled)
-      return;
-    const { source: n } = d.operation;
-    if (P(n)) {
-      const { initialIndex: o, index: i } = n;
-      if (o !== i) {
-        const a = [...r], [s] = a.splice(o, 1);
-        s && (a.splice(i, 0, s), t == null || t(a), l(
-          `${N(s)} dropped, moved from position ${o + 1} to ${i + 1} of ${r.length}`
-        ));
-      }
+import { jsxs as p, jsx as a } from "react/jsx-runtime";
+import { IconCross as N } from "@frontify/fondue-icons";
+import { useTranslation as f } from "./fondue-components43.js";
+import t from "./fondue-components77.js";
+const v = ({
+  "aria-label": o,
+  "data-test-id": r = "notice",
+  variant: n = "default",
+  emphasis: d = "default",
+  size: e = "medium",
+  icon: i,
+  action: s,
+  onDismiss: l,
+  className: c = "",
+  children: m
+}) => {
+  const { t: u } = f();
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      "data-component": "notice",
+      "data-variant": n,
+      "data-emphasis": d,
+      "data-size": e,
+      "data-test-id": r,
+      className: [t.root, c].filter(Boolean).join(" "),
+      role: "status",
+      "aria-live": "polite",
+      children: [
+        i ? /* @__PURE__ */ a("div", { className: t.icon, children: i }) : null,
+        /* @__PURE__ */ a("div", { className: t.content, children: m }),
+        s ? /* @__PURE__ */ a("div", { className: t.action, children: s }) : null,
+        l ? /* @__PURE__ */ a(
+          "button",
+          {
+            type: "button",
+            "aria-label": o || u("Notice_dismiss"),
+            className: t.dismiss,
+            onClick: l,
+            children: /* @__PURE__ */ a(N, { size: e === "large" ? "20" : "16" })
+          }
+        ) : null
+      ]
     }
-  }, modifiers: [v], children: [
-    /* @__PURE__ */ m(
-      "ul",
-      {
-        className: c.root,
-        "aria-roledescription": "sortable list",
-        "aria-label": u,
-        "data-spacing": b,
-        "data-direction": e,
-        "data-test-id": "fondue-orderable-list",
-        ref: I,
-        children: D
-      }
-    ),
-    /* @__PURE__ */ m("div", { "aria-live": "polite", "aria-atomic": "true", className: c.visuallyHidden, children: L })
-  ] }) });
-};
-f.displayName = "OrderableList";
-const F = A(f), ee = {
-  Root: F,
-  Item: R,
-  ItemAction: y,
-  CustomHandle: E,
-  DragHandle: w,
-  ItemTitle: M,
-  ItemDescription: h,
-  ItemDecorator: $
+  );
 };
+v.displayName = "Notice";
 export {
-  ee as OrderableList,
-  f as OrderableListRoot
+  v as Notice
 };
 //# sourceMappingURL=fondue-components23.js.map

package/dist/fondue-components23.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components23.js","sources":["../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AxisModifier } from '@dnd-kit/abstract/modifiers';\nimport { DragDropProvider, type DragEndEvent } from '@dnd-kit/react';\nimport { isSortable } from '@dnd-kit/react/sortable';\nimport { forwardRef, useMemo, type ForwardedRef, type ReactNode } from 'react';\n\nimport { OrderableListItem } from './OrderableListItem';\nimport { OrderableListItemAction } from './OrderableListItemAction';\nimport { OrderableListItemDecorator } from './OrderableListItemDecorator';\nimport { OrderableListItemDescription } from './OrderableListItemDescription';\nimport { OrderableItemCustomHandle, OrderableItemDragHandle } from './OrderableListItemDragHandle';\nimport { OrderableListItemTitle } from './OrderableListItemTitle';\nimport { getItemTitle } from './helpers/getItemTitle';\nimport { OrderableListAnnounceProvider, useAnnounceState } from './hooks/useOrderableListAnnounce';\nimport { useOrderedListItems } from './hooks/useOrderedListItems';\nimport styles from './styles/orderable-list.module.scss';\n\ntype OrderableListItemSpacing = 'tight' | 'compact' | 'comfortable';\ntype OrderableListDirection = 'vertical' | 'horizontal';\ntype OrderableListProps = {\n    children: ReactNode;\n    spacing?: OrderableListItemSpacing;\n    direction?: OrderableListDirection;\n    order: string[];\n    onOrderChange?: (order: string[]) => void;\n    'aria-label'?: string;\n};\n\nexport const OrderableListRoot = (\n    {\n        children,\n        spacing = 'comfortable',\n        direction = 'vertical',\n        order = [],\n        onOrderChange,\n        'aria-label': ariaLabel = 'Sortable list',\n    }: OrderableListProps,\n    ref: ForwardedRef<HTMLUListElement>,\n) => {\n    const orderedItems = useOrderedListItems(children, order);\n    const { message, announce } = useAnnounceState();\n\n    // Lock the cross-axis to prevent drift: vertical lists lock x, horizontal lists lock y\n    const axisModifier = useMemo(\n        () => AxisModifier.configure({ axis: direction === 'vertical' ? 'x' : 'y', value: 0 }),\n        [direction],\n    );\n\n    const handleDragEnd: DragEndEvent = (event) => {\n        if (event.canceled) {\n            return;\n        }\n        const { source } = event.operation;\n        if (isSortable(source)) {\n            const { initialIndex, index } = source;\n            if (initialIndex !== index) {\n                const newItems = [...order];\n                const [removed] = newItems.splice(initialIndex, 1);\n                if (removed) {\n                    newItems.splice(index, 0, removed);\n                    onOrderChange?.(newItems);\n                    announce(\n                        `${getItemTitle(removed)} dropped, moved from position ${initialIndex + 1} to ${index + 1} of ${order.length}`,\n                    );\n                }\n            }\n        }\n    };\n\n    return (\n        <OrderableListAnnounceProvider value={announce}>\n            <DragDropProvider onDragEnd={handleDragEnd} modifiers={[axisModifier]}>\n                <ul\n                    className={styles.root}\n                    aria-roledescription=\"sortable list\"\n                    aria-label={ariaLabel}\n                    data-spacing={spacing}\n                    data-direction={direction}\n                    data-test-id=\"fondue-orderable-list\"\n                    ref={ref}\n                >\n                    {orderedItems}\n                </ul>\n                <div aria-live=\"polite\" aria-atomic=\"true\" className={styles.visuallyHidden}>\n                    {message}\n                </div>\n            </DragDropProvider>\n        </OrderableListAnnounceProvider>\n    );\n};\nOrderableListRoot.displayName = 'OrderableList';\nconst ForwardedRefOrderableListRoot = forwardRef<HTMLUListElement, OrderableListProps>(OrderableListRoot);\n\nexport const OrderableList: {\n    Root: typeof ForwardedRefOrderableListRoot;\n    Item: typeof OrderableListItem;\n    ItemAction: typeof OrderableListItemAction;\n    CustomHandle: typeof OrderableItemCustomHandle;\n    DragHandle: typeof OrderableItemDragHandle;\n    ItemTitle: typeof OrderableListItemTitle;\n    ItemDescription: typeof OrderableListItemDescription;\n    ItemDecorator: typeof OrderableListItemDecorator;\n} = {\n    Root: ForwardedRefOrderableListRoot,\n    Item: OrderableListItem,\n    ItemAction: OrderableListItemAction,\n    CustomHandle: OrderableItemCustomHandle,\n    DragHandle: OrderableItemDragHandle,\n    ItemTitle: OrderableListItemTitle,\n    ItemDescription: OrderableListItemDescription,\n    ItemDecorator: OrderableListItemDecorator,\n};\n"],"names":["OrderableListRoot","children","spacing","direction","order","onOrderChange","ariaLabel","ref","orderedItems","useOrderedListItems","message","announce","useAnnounceState","axisModifier","useMemo","AxisModifier","jsx","OrderableListAnnounceProvider","jsxs","DragDropProvider","event","source","isSortable","initialIndex","index","newItems","removed","getItemTitle","styles","ForwardedRefOrderableListRoot","forwardRef","OrderableList","OrderableListItem","OrderableListItemAction","OrderableItemCustomHandle","OrderableItemDragHandle","OrderableListItemTitle","OrderableListItemDescription","OrderableListItemDecorator"],"mappings":";;;;;;;;;;;;;;;AA6BO,MAAMA,IAAoB,CAC7B;AAAA,EACI,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AAAA,EACR,eAAAC;AAAA,EACA,cAAcC,IAAY;AAC9B,GACAC,MACC;AACD,QAAMC,IAAeC,EAAoBR,GAAUG,CAAK,GAClD,EAAE,SAAAM,GAAS,UAAAC,EAAA,IAAaC,EAAA,GAGxBC,IAAeC;AAAA,IACjB,MAAMC,EAAa,UAAU,EAAE,MAAMZ,MAAc,aAAa,MAAM,KAAK,OAAO,GAAG;AAAA,IACrF,CAACA,CAAS;AAAA,EAAA;AAwBd,SACI,gBAAAa,EAACC,GAAA,EAA8B,OAAON,GAClC,UAAA,gBAAAO,EAACC,GAAA,EAAiB,WAvBU,CAACC,MAAU;AAC3C,QAAIA,EAAM;AACN;AAEJ,UAAM,EAAE,QAAAC,MAAWD,EAAM;AACzB,QAAIE,EAAWD,CAAM,GAAG;AACpB,YAAM,EAAE,cAAAE,GAAc,OAAAC,EAAA,IAAUH;AAChC,UAAIE,MAAiBC,GAAO;AACxB,cAAMC,IAAW,CAAC,GAAGrB,CAAK,GACpB,CAACsB,CAAO,IAAID,EAAS,OAAOF,GAAc,CAAC;AACjD,QAAIG,MACAD,EAAS,OAAOD,GAAO,GAAGE,CAAO,GACjCrB,KAAA,QAAAA,EAAgBoB,IAChBd;AAAA,UACI,GAAGgB,EAAaD,CAAO,CAAC,iCAAiCH,IAAe,CAAC,OAAOC,IAAQ,CAAC,OAAOpB,EAAM,MAAM;AAAA,QAAA;AAAA,MAGxH;AAAA,IACJ;AAAA,EACJ,GAIoD,WAAW,CAACS,CAAY,GAChE,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWY,EAAO;AAAA,QAClB,wBAAqB;AAAA,QACrB,cAAYtB;AAAA,QACZ,gBAAcJ;AAAA,QACd,kBAAgBC;AAAA,QAChB,gBAAa;AAAA,QACb,KAAAI;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,gBAAAQ,EAAC,SAAI,aAAU,UAAS,eAAY,QAAO,WAAWY,EAAO,gBACxD,UAAAlB,EAAA,CACL;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;AACAV,EAAkB,cAAc;AAChC,MAAM6B,IAAgCC,EAAiD9B,CAAiB,GAE3F+B,KAST;AAAA,EACA,MAAMF;AAAA,EACN,MAAMG;AAAA,EACN,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,YAAYC;AAAA,EACZ,WAAWC;AAAA,EACX,iBAAiBC;AAAA,EACjB,eAAeC;AACnB;"}
+{"version":3,"file":"fondue-components23.js","sources":["../src/components/Notice/Notice.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\nimport { type MouseEvent, type ReactNode } from 'react';\n\nimport { useTranslation } from '#/hooks/useTranslation';\n\nimport styles from './styles/notice.module.scss';\n\ntype NoticeVariant = 'default' | 'highlight' | 'positive' | 'danger' | 'warning';\n\ntype NoticeEmphasis = 'default' | 'strong' | 'weak';\n\ntype NoticeSize = 'medium' | 'large';\n\nexport type NoticeProps = {\n    /**\n     * @default 'default'\n     */\n    variant?: NoticeVariant;\n    /**\n     * @default 'default'\n     */\n    emphasis?: NoticeEmphasis;\n    /**\n     * @default 'medium'\n     */\n    size?: NoticeSize;\n    /**\n     * Leading icon element\n     */\n    icon?: ReactNode;\n    /**\n     * Action element (typically a button)\n     */\n    action?: ReactNode;\n    /**\n     * Callback when the dismiss button is clicked\n     */\n    onDismiss?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Custom aria-label for the dismiss button\n     */\n    'aria-label'?: string;\n    /**\n     * Test ID for the component\n     */\n    'data-test-id'?: string;\n    /**\n     * Additional CSS class\n     */\n    className?: string;\n    /**\n     * Message content\n     */\n    children: ReactNode;\n};\n\nexport const Notice = ({\n    'aria-label': ariaLabel,\n    'data-test-id': dataTestId = 'notice',\n    variant = 'default',\n    emphasis = 'default',\n    size = 'medium',\n    icon,\n    action,\n    onDismiss,\n    className = '',\n    children,\n}: NoticeProps) => {\n    const { t } = useTranslation();\n\n    return (\n        <div\n            data-component=\"notice\"\n            data-variant={variant}\n            data-emphasis={emphasis}\n            data-size={size}\n            data-test-id={dataTestId}\n            className={[styles.root, className].filter(Boolean).join(' ')}\n            role=\"status\"\n            aria-live=\"polite\"\n        >\n            {icon ? <div className={styles.icon}>{icon}</div> : null}\n            <div className={styles.content}>{children}</div>\n            {action ? <div className={styles.action}>{action}</div> : null}\n            {onDismiss ? (\n                <button\n                    type=\"button\"\n                    aria-label={ariaLabel || t('Notice_dismiss')}\n                    className={styles.dismiss}\n                    onClick={onDismiss}\n                >\n                    <IconCross size={size === 'large' ? '20' : '16'} />\n                </button>\n            ) : null}\n        </div>\n    );\n};\nNotice.displayName = 'Notice';\n"],"names":["Notice","ariaLabel","dataTestId","variant","emphasis","size","icon","action","onDismiss","className","children","t","useTranslation","jsxs","styles","jsx","IconCross"],"mappings":";;;;AA0DO,MAAMA,IAAS,CAAC;AAAA,EACnB,cAAcC;AAAA,EACd,gBAAgBC,IAAa;AAAA,EAC7B,SAAAC,IAAU;AAAA,EACV,UAAAC,IAAW;AAAA,EACX,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AACJ,MAAmB;AACf,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AAEd,SACI,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,kBAAe;AAAA,MACf,gBAAcV;AAAA,MACd,iBAAeC;AAAA,MACf,aAAWC;AAAA,MACX,gBAAcH;AAAA,MACd,WAAW,CAACY,EAAO,MAAML,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC5D,MAAK;AAAA,MACL,aAAU;AAAA,MAET,UAAA;AAAA,QAAAH,sBAAQ,OAAA,EAAI,WAAWQ,EAAO,MAAO,aAAK,IAAS;AAAA,QACpD,gBAAAC,EAAC,OAAA,EAAI,WAAWD,EAAO,SAAU,UAAAJ,GAAS;AAAA,QACzCH,IAAS,gBAAAQ,EAAC,OAAA,EAAI,WAAWD,EAAO,QAAS,aAAO,IAAS;AAAA,QACzDN,IACG,gBAAAO;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,cAAYd,KAAaU,EAAE,gBAAgB;AAAA,YAC3C,WAAWG,EAAO;AAAA,YAClB,SAASN;AAAA,YAET,4BAACQ,GAAA,EAAU,MAAMX,MAAS,UAAU,OAAO,KAAA,CAAM;AAAA,UAAA;AAAA,QAAA,IAErD;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhB;AACAL,EAAO,cAAc;"}

package/dist/fondue-components24.js

@@ -1,77 +1,73 @@
-import { jsx as n } from "react/jsx-runtime";
-import * as m from "@radix-ui/react-radio-group";
-import { useFondueTheme as B } from "./fondue-components39.js";
-import u from "./fondue-components85.js";
-const R = ({
-  asChild: t,
-  children: a,
-  className: i,
-  disabled: e,
-  emphasis: r = "default",
-  onValueChange: s,
-  orientation: o,
-  readOnly: d,
-  required: f,
-  value: p,
-  "data-test-id": L
-}) => {
-  const { dir: N } = B();
-  return /* @__PURE__ */ n(
-    m.Root,
-    {
-      "aria-readonly": d,
-      asChild: t,
-      className: [i, t ? void 0 : u.root].filter(Boolean).join(" "),
-      "data-emphasis": r,
-      "data-readonly": d,
-      "data-test-id": L,
-      dir: N,
-      disabled: e,
-      onValueChange: s,
-      orientation: o,
-      required: f,
-      value: p,
-      onFocus: (l) => {
-        if (d)
-          return l.preventDefault(), l.target.blur(), !1;
-      },
-      children: a
-    }
+import { jsx as m, jsxs as x } from "react/jsx-runtime";
+import { AxisModifier as O } from "./fondue-components78.js";
+import { DragDropProvider as g } from "@dnd-kit/react";
+import { forwardRef as A, useMemo as H } from "react";
+import { OrderableListItem as R } from "./fondue-components79.js";
+import { OrderableListItemAction as y } from "./fondue-components80.js";
+import { OrderableListItemDecorator as $ } from "./fondue-components81.js";
+import { OrderableListItemDescription as h } from "./fondue-components82.js";
+import { OrderableItemDragHandle as w, OrderableItemCustomHandle as E } from "./fondue-components83.js";
+import { OrderableListItemTitle as M } from "./fondue-components84.js";
+import { getItemTitle as N } from "./fondue-components85.js";
+import { useAnnounceState as S, OrderableListAnnounceProvider as T } from "./fondue-components86.js";
+import { useOrderedListItems as j } from "./fondue-components87.js";
+import c from "./fondue-components88.js";
+import { isSortable as P } from "./fondue-components89.js";
+const f = ({
+  children: p,
+  spacing: b = "comfortable",
+  direction: e = "vertical",
+  order: r = [],
+  onOrderChange: t,
+  "aria-label": u = "Sortable list"
+}, I) => {
+  const D = j(p, r), { message: L, announce: l } = S(), v = H(
+    () => O.configure({ axis: e === "vertical" ? "x" : "y", value: 0 }),
+    [e]
   );
+  return /* @__PURE__ */ m(T, { value: l, children: /* @__PURE__ */ x(g, { onDragEnd: (d) => {
+    if (d.canceled)
+      return;
+    const { source: n } = d.operation;
+    if (P(n)) {
+      const { initialIndex: o, index: i } = n;
+      if (o !== i) {
+        const a = [...r], [s] = a.splice(o, 1);
+        s && (a.splice(i, 0, s), t == null || t(a), l(
+          `${N(s)} dropped, moved from position ${o + 1} to ${i + 1} of ${r.length}`
+        ));
+      }
+    }
+  }, modifiers: [v], children: [
+    /* @__PURE__ */ m(
+      "ul",
+      {
+        className: c.root,
+        "aria-roledescription": "sortable list",
+        "aria-label": u,
+        "data-spacing": b,
+        "data-direction": e,
+        "data-test-id": "fondue-orderable-list",
+        ref: I,
+        children: D
+      }
+    ),
+    /* @__PURE__ */ m("div", { "aria-live": "polite", "aria-atomic": "true", className: c.visuallyHidden, children: L })
+  ] }) });
 };
-R.displayName = "RadioList.Root";
-const c = ({
-  readOnly: t,
-  disabled: a,
-  value: i,
-  id: e,
-  "data-test-id": r,
-  ...s
-}) => /* @__PURE__ */ n(
-  m.Item,
-  {
-    onFocus: (o) => {
-      if (t)
-        return o.preventDefault(), o.target.blur(), !1;
-    },
-    "aria-readonly": t,
-    className: u.item,
-    "data-readonly": t,
-    "data-test-id": r,
-    disabled: a,
-    id: e,
-    value: i,
-    ...s,
-    children: /* @__PURE__ */ n(m.Indicator, { className: u.indicator })
-  }
-);
-c.displayName = "RadioList.RadioButton";
-const g = {
-  Root: R,
-  RadioButton: c
+f.displayName = "OrderableList";
+const F = A(f), ee = {
+  Root: F,
+  Item: R,
+  ItemAction: y,
+  CustomHandle: E,
+  DragHandle: w,
+  ItemTitle: M,
+  ItemDescription: h,
+  ItemDecorator: $
 };
 export {
-  g as RadioList,
-  R as RadioListRoot
+  ee as OrderableList,
+  f as OrderableListRoot
 };
 //# sourceMappingURL=fondue-components24.js.map

package/dist/fondue-components24.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components24.js","sources":["../src/components/RadioList/RadioList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadioGroupPrimitve from '@radix-ui/react-radio-group';\nimport { type ReactNode } from 'react';\n\nimport { useFondueTheme } from '#/components/ThemeProvider/ThemeProvider';\n\nimport styles from './styles/radiolist.module.scss';\n\ntype RadioListRootProps = {\n    asChild?: boolean;\n    children?: ReactNode;\n    className?: string;\n    disabled?: boolean;\n    emphasis?: 'default' | 'highlight';\n    onValueChange?: (value: string) => void;\n    orientation?: 'vertical' | 'horizontal';\n    readOnly?: boolean;\n    required?: boolean;\n    value?: string;\n    'data-test-id'?: string;\n};\nexport const RadioListRoot = ({\n    asChild,\n    children,\n    className,\n    disabled,\n    emphasis = 'default',\n    onValueChange,\n    orientation,\n    readOnly,\n    required,\n    value,\n    'data-test-id': dataTestId,\n}: RadioListRootProps) => {\n    const { dir } = useFondueTheme();\n\n    return (\n        <RadioGroupPrimitve.Root\n            aria-readonly={readOnly}\n            asChild={asChild}\n            className={[className, asChild ? undefined : styles.root].filter(Boolean).join(' ')}\n            data-emphasis={emphasis}\n            data-readonly={readOnly}\n            data-test-id={dataTestId}\n            dir={dir}\n            disabled={disabled}\n            onValueChange={onValueChange}\n            orientation={orientation}\n            required={required}\n            value={value}\n            onFocus={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    event.target.blur();\n                    return false;\n                }\n            }}\n        >\n            {children}\n        </RadioGroupPrimitve.Root>\n    );\n};\nRadioListRoot.displayName = 'RadioList.Root';\n\ntype RadioListRadioButtonProps = {\n    disabled?: boolean;\n    id: string;\n    value: string;\n    readOnly?: boolean;\n    'data-test-id'?: string;\n} & React.ComponentProps<typeof RadioGroupPrimitve.Item>;\n\nconst RadioListRadioButton = ({\n    readOnly,\n    disabled,\n    value,\n    id,\n    'data-test-id': dataTestId,\n    ...restProps\n}: RadioListRadioButtonProps) => {\n    return (\n        <RadioGroupPrimitve.Item\n            onFocus={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    event.target.blur();\n                    return false;\n                }\n            }}\n            aria-readonly={readOnly}\n            className={styles.item}\n            data-readonly={readOnly}\n            data-test-id={dataTestId}\n            disabled={disabled}\n            id={id}\n            value={value}\n            {...restProps}\n        >\n            <RadioGroupPrimitve.Indicator className={styles.indicator} />\n        </RadioGroupPrimitve.Item>\n    );\n};\nRadioListRadioButton.displayName = 'RadioList.RadioButton';\n\nexport const RadioList = {\n    Root: RadioListRoot,\n    RadioButton: RadioListRadioButton,\n};\n"],"names":["RadioListRoot","asChild","children","className","disabled","emphasis","onValueChange","orientation","readOnly","required","value","dataTestId","dir","useFondueTheme","jsx","RadioGroupPrimitve","styles","event","RadioListRadioButton","id","restProps","RadioList"],"mappings":";;;;AAsBO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAgBC;AACpB,MAA0B;AACtB,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA;AAEhB,SACI,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACG,iBAAeP;AAAA,MACf,SAAAP;AAAA,MACA,WAAW,CAACE,GAAWF,IAAU,SAAYe,EAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAClF,iBAAeX;AAAA,MACf,iBAAeG;AAAA,MACf,gBAAcG;AAAA,MACd,KAAAC;AAAA,MACA,UAAAR;AAAA,MACA,eAAAE;AAAA,MACA,aAAAC;AAAA,MACA,UAAAE;AAAA,MACA,OAAAC;AAAA,MACA,SAAS,CAACO,MAAU;AAChB,YAAIT;AACA,iBAAAS,EAAM,eAAA,GACNA,EAAM,OAAO,KAAA,GACN;AAAA,MAEf;AAAA,MAEC,UAAAf;AAAA,IAAA;AAAA,EAAA;AAGb;AACAF,EAAc,cAAc;AAU5B,MAAMkB,IAAuB,CAAC;AAAA,EAC1B,UAAAV;AAAA,EACA,UAAAJ;AAAA,EACA,OAAAM;AAAA,EACA,IAAAS;AAAA,EACA,gBAAgBR;AAAA,EAChB,GAAGS;AACP,MAEQ,gBAAAN;AAAA,EAACC,EAAmB;AAAA,EAAnB;AAAA,IACG,SAAS,CAACE,MAAU;AAChB,UAAIT;AACA,eAAAS,EAAM,eAAA,GACNA,EAAM,OAAO,KAAA,GACN;AAAA,IAEf;AAAA,IACA,iBAAeT;AAAA,IACf,WAAWQ,EAAO;AAAA,IAClB,iBAAeR;AAAA,IACf,gBAAcG;AAAA,IACd,UAAAP;AAAA,IACA,IAAAe;AAAA,IACA,OAAAT;AAAA,IACC,GAAGU;AAAA,IAEJ,4BAACL,EAAmB,WAAnB,EAA6B,WAAWC,EAAO,UAAA,CAAW;AAAA,EAAA;AAAA;AAIvEE,EAAqB,cAAc;AAE5B,MAAMG,IAAY;AAAA,EACrB,MAAMrB;AAAA,EACN,aAAakB;AACjB;"}
+{"version":3,"file":"fondue-components24.js","sources":["../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { AxisModifier } from '@dnd-kit/abstract/modifiers';\nimport { DragDropProvider, type DragEndEvent } from '@dnd-kit/react';\nimport { isSortable } from '@dnd-kit/react/sortable';\nimport { forwardRef, useMemo, type ForwardedRef, type ReactNode } from 'react';\n\nimport { OrderableListItem } from './OrderableListItem';\nimport { OrderableListItemAction } from './OrderableListItemAction';\nimport { OrderableListItemDecorator } from './OrderableListItemDecorator';\nimport { OrderableListItemDescription } from './OrderableListItemDescription';\nimport { OrderableItemCustomHandle, OrderableItemDragHandle } from './OrderableListItemDragHandle';\nimport { OrderableListItemTitle } from './OrderableListItemTitle';\nimport { getItemTitle } from './helpers/getItemTitle';\nimport { OrderableListAnnounceProvider, useAnnounceState } from './hooks/useOrderableListAnnounce';\nimport { useOrderedListItems } from './hooks/useOrderedListItems';\nimport styles from './styles/orderable-list.module.scss';\n\ntype OrderableListItemSpacing = 'tight' | 'compact' | 'comfortable';\ntype OrderableListDirection = 'vertical' | 'horizontal';\ntype OrderableListProps = {\n    children: ReactNode;\n    spacing?: OrderableListItemSpacing;\n    direction?: OrderableListDirection;\n    order: string[];\n    onOrderChange?: (order: string[]) => void;\n    'aria-label'?: string;\n};\n\nexport const OrderableListRoot = (\n    {\n        children,\n        spacing = 'comfortable',\n        direction = 'vertical',\n        order = [],\n        onOrderChange,\n        'aria-label': ariaLabel = 'Sortable list',\n    }: OrderableListProps,\n    ref: ForwardedRef<HTMLUListElement>,\n) => {\n    const orderedItems = useOrderedListItems(children, order);\n    const { message, announce } = useAnnounceState();\n\n    // Lock the cross-axis to prevent drift: vertical lists lock x, horizontal lists lock y\n    const axisModifier = useMemo(\n        () => AxisModifier.configure({ axis: direction === 'vertical' ? 'x' : 'y', value: 0 }),\n        [direction],\n    );\n\n    const handleDragEnd: DragEndEvent = (event) => {\n        if (event.canceled) {\n            return;\n        }\n        const { source } = event.operation;\n        if (isSortable(source)) {\n            const { initialIndex, index } = source;\n            if (initialIndex !== index) {\n                const newItems = [...order];\n                const [removed] = newItems.splice(initialIndex, 1);\n                if (removed) {\n                    newItems.splice(index, 0, removed);\n                    onOrderChange?.(newItems);\n                    announce(\n                        `${getItemTitle(removed)} dropped, moved from position ${initialIndex + 1} to ${index + 1} of ${order.length}`,\n                    );\n                }\n            }\n        }\n    };\n\n    return (\n        <OrderableListAnnounceProvider value={announce}>\n            <DragDropProvider onDragEnd={handleDragEnd} modifiers={[axisModifier]}>\n                <ul\n                    className={styles.root}\n                    aria-roledescription=\"sortable list\"\n                    aria-label={ariaLabel}\n                    data-spacing={spacing}\n                    data-direction={direction}\n                    data-test-id=\"fondue-orderable-list\"\n                    ref={ref}\n                >\n                    {orderedItems}\n                </ul>\n                <div aria-live=\"polite\" aria-atomic=\"true\" className={styles.visuallyHidden}>\n                    {message}\n                </div>\n            </DragDropProvider>\n        </OrderableListAnnounceProvider>\n    );\n};\nOrderableListRoot.displayName = 'OrderableList';\nconst ForwardedRefOrderableListRoot = forwardRef<HTMLUListElement, OrderableListProps>(OrderableListRoot);\n\nexport const OrderableList: {\n    Root: typeof ForwardedRefOrderableListRoot;\n    Item: typeof OrderableListItem;\n    ItemAction: typeof OrderableListItemAction;\n    CustomHandle: typeof OrderableItemCustomHandle;\n    DragHandle: typeof OrderableItemDragHandle;\n    ItemTitle: typeof OrderableListItemTitle;\n    ItemDescription: typeof OrderableListItemDescription;\n    ItemDecorator: typeof OrderableListItemDecorator;\n} = {\n    Root: ForwardedRefOrderableListRoot,\n    Item: OrderableListItem,\n    ItemAction: OrderableListItemAction,\n    CustomHandle: OrderableItemCustomHandle,\n    DragHandle: OrderableItemDragHandle,\n    ItemTitle: OrderableListItemTitle,\n    ItemDescription: OrderableListItemDescription,\n    ItemDecorator: OrderableListItemDecorator,\n};\n"],"names":["OrderableListRoot","children","spacing","direction","order","onOrderChange","ariaLabel","ref","orderedItems","useOrderedListItems","message","announce","useAnnounceState","axisModifier","useMemo","AxisModifier","jsx","OrderableListAnnounceProvider","jsxs","DragDropProvider","event","source","isSortable","initialIndex","index","newItems","removed","getItemTitle","styles","ForwardedRefOrderableListRoot","forwardRef","OrderableList","OrderableListItem","OrderableListItemAction","OrderableItemCustomHandle","OrderableItemDragHandle","OrderableListItemTitle","OrderableListItemDescription","OrderableListItemDecorator"],"mappings":";;;;;;;;;;;;;;;AA6BO,MAAMA,IAAoB,CAC7B;AAAA,EACI,UAAAC;AAAA,EACA,SAAAC,IAAU;AAAA,EACV,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ,CAAA;AAAA,EACR,eAAAC;AAAA,EACA,cAAcC,IAAY;AAC9B,GACAC,MACC;AACD,QAAMC,IAAeC,EAAoBR,GAAUG,CAAK,GAClD,EAAE,SAAAM,GAAS,UAAAC,EAAA,IAAaC,EAAA,GAGxBC,IAAeC;AAAA,IACjB,MAAMC,EAAa,UAAU,EAAE,MAAMZ,MAAc,aAAa,MAAM,KAAK,OAAO,GAAG;AAAA,IACrF,CAACA,CAAS;AAAA,EAAA;AAwBd,SACI,gBAAAa,EAACC,GAAA,EAA8B,OAAON,GAClC,UAAA,gBAAAO,EAACC,GAAA,EAAiB,WAvBU,CAACC,MAAU;AAC3C,QAAIA,EAAM;AACN;AAEJ,UAAM,EAAE,QAAAC,MAAWD,EAAM;AACzB,QAAIE,EAAWD,CAAM,GAAG;AACpB,YAAM,EAAE,cAAAE,GAAc,OAAAC,EAAA,IAAUH;AAChC,UAAIE,MAAiBC,GAAO;AACxB,cAAMC,IAAW,CAAC,GAAGrB,CAAK,GACpB,CAACsB,CAAO,IAAID,EAAS,OAAOF,GAAc,CAAC;AACjD,QAAIG,MACAD,EAAS,OAAOD,GAAO,GAAGE,CAAO,GACjCrB,KAAA,QAAAA,EAAgBoB,IAChBd;AAAA,UACI,GAAGgB,EAAaD,CAAO,CAAC,iCAAiCH,IAAe,CAAC,OAAOC,IAAQ,CAAC,OAAOpB,EAAM,MAAM;AAAA,QAAA;AAAA,MAGxH;AAAA,IACJ;AAAA,EACJ,GAIoD,WAAW,CAACS,CAAY,GAChE,UAAA;AAAA,IAAA,gBAAAG;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWY,EAAO;AAAA,QAClB,wBAAqB;AAAA,QACrB,cAAYtB;AAAA,QACZ,gBAAcJ;AAAA,QACd,kBAAgBC;AAAA,QAChB,gBAAa;AAAA,QACb,KAAAI;AAAA,QAEC,UAAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEL,gBAAAQ,EAAC,SAAI,aAAU,UAAS,eAAY,QAAO,WAAWY,EAAO,gBACxD,UAAAlB,EAAA,CACL;AAAA,EAAA,EAAA,CACJ,EAAA,CACJ;AAER;AACAV,EAAkB,cAAc;AAChC,MAAM6B,IAAgCC,EAAiD9B,CAAiB,GAE3F+B,KAST;AAAA,EACA,MAAMF;AAAA,EACN,MAAMG;AAAA,EACN,YAAYC;AAAA,EACZ,cAAcC;AAAA,EACd,YAAYC;AAAA,EACZ,WAAWC;AAAA,EACX,iBAAiBC;AAAA,EACjB,eAAeC;AACnB;"}

package/dist/fondue-components25.js

@@ -1,21 +1,77 @@
-import { jsx as u } from "react/jsx-runtime";
-import { createContext as i, useContext as s, useMemo as m } from "react";
-const e = i({
-  navigate: () => {
-    throw new Error("RouterProvider: `navigate` function is not implemented");
-  },
-  // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix
-  useHref: () => {
-    throw new Error("RouterProvider: `useHref` function is not implemented");
+import { jsx as n } from "react/jsx-runtime";
+import * as m from "@radix-ui/react-radio-group";
+import { useFondueTheme as B } from "./fondue-components40.js";
+import u from "./fondue-components90.js";
+const R = ({
+  asChild: t,
+  children: a,
+  className: i,
+  disabled: e,
+  emphasis: r = "default",
+  onValueChange: s,
+  orientation: o,
+  readOnly: d,
+  required: f,
+  value: p,
+  "data-test-id": L
+}) => {
+  const { dir: N } = B();
+  return /* @__PURE__ */ n(
+    m.Root,
+    {
+      "aria-readonly": d,
+      asChild: t,
+      className: [i, t ? void 0 : u.root].filter(Boolean).join(" "),
+      "data-emphasis": r,
+      "data-readonly": d,
+      "data-test-id": L,
+      dir: N,
+      disabled: e,
+      onValueChange: s,
+      orientation: o,
+      required: f,
+      value: p,
+      onFocus: (l) => {
+        if (d)
+          return l.preventDefault(), l.target.blur(), !1;
+      },
+      children: a
+    }
+  );
+};
+R.displayName = "RadioList.Root";
+const c = ({
+  readOnly: t,
+  disabled: a,
+  value: i,
+  id: e,
+  "data-test-id": r,
+  ...s
+}) => /* @__PURE__ */ n(
+  m.Item,
+  {
+    onFocus: (o) => {
+      if (t)
+        return o.preventDefault(), o.target.blur(), !1;
+    },
+    "aria-readonly": t,
+    className: u.item,
+    "data-readonly": t,
+    "data-test-id": r,
+    disabled: a,
+    id: e,
+    value: i,
+    ...s,
+    children: /* @__PURE__ */ n(m.Indicator, { className: u.indicator })
   }
-});
-e.displayName = "RouterContext";
-const a = () => s(e), x = ({ children: r, navigate: t, useHref: o }) => {
-  const n = m(() => ({ navigate: t, useHref: o }), [t, o]);
-  return /* @__PURE__ */ u(e.Provider, { value: n, children: r });
+);
+c.displayName = "RadioList.RadioButton";
+const g = {
+  Root: R,
+  RadioButton: c
 };
 export {
-  x as RouterProvider,
-  a as useFondueRouter
+  g as RadioList,
+  R as RadioListRoot
 };
 //# sourceMappingURL=fondue-components25.js.map

package/dist/fondue-components25.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components25.js","sources":["../src/components/RouterProvider/RouterProvider.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { createContext, useContext, useMemo, type ReactNode } from 'react';\n\nexport type RouterProviderProps = {\n    children: ReactNode;\n    /**\n     * Function to navigate to a specific path\n     */\n    navigate: (path: string) => void;\n    /**\n     * Function to resolves a URL against the current location.\n     */\n    useHref: (path: string) => string;\n};\n\nconst RouterContext = createContext<{\n    navigate: (path: string) => void;\n    useHref: (path: string) => string;\n}>({\n    navigate: () => {\n        throw new Error('RouterProvider: `navigate` function is not implemented');\n    },\n    // eslint-disable-next-line @eslint-react/no-unnecessary-use-prefix\n    useHref: () => {\n        throw new Error('RouterProvider: `useHref` function is not implemented');\n    },\n});\nRouterContext.displayName = 'RouterContext';\n\nexport const useFondueRouter = () => {\n    return useContext(RouterContext);\n};\n\nexport const RouterProvider = ({ children, navigate, useHref }: RouterProviderProps) => {\n    const contextValue = useMemo(() => ({ navigate, useHref }), [navigate, useHref]);\n\n    return <RouterContext.Provider value={contextValue}>{children}</RouterContext.Provider>;\n};\n"],"names":["RouterContext","createContext","useFondueRouter","useContext","RouterProvider","children","navigate","useHref","contextValue","useMemo"],"mappings":";;AAgBA,MAAMA,IAAgBC,EAGnB;AAAA,EACC,UAAU,MAAM;AACZ,UAAM,IAAI,MAAM,wDAAwD;AAAA,EAC5E;AAAA;AAAA,EAEA,SAAS,MAAM;AACX,UAAM,IAAI,MAAM,uDAAuD;AAAA,EAC3E;AACJ,CAAC;AACDD,EAAc,cAAc;AAErB,MAAME,IAAkB,MACpBC,EAAWH,CAAa,GAGtBI,IAAiB,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,SAAAC,QAAmC;AACpF,QAAMC,IAAeC,EAAQ,OAAO,EAAE,UAAAH,GAAU,SAAAC,MAAY,CAACD,GAAUC,CAAO,CAAC;AAE/E,2BAAQP,EAAc,UAAd,EAAuB,OAAOQ,GAAe,UAAAH,GAAS;AAClE;"}
+{"version":3,"file":"fondue-components25.js","sources":["../src/components/RadioList/RadioList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport * as RadioGroupPrimitve from '@radix-ui/react-radio-group';\nimport { type ReactNode } from 'react';\n\nimport { useFondueTheme } from '#/components/ThemeProvider/ThemeProvider';\n\nimport styles from './styles/radiolist.module.scss';\n\ntype RadioListRootProps = {\n    asChild?: boolean;\n    children?: ReactNode;\n    className?: string;\n    disabled?: boolean;\n    emphasis?: 'default' | 'highlight';\n    onValueChange?: (value: string) => void;\n    orientation?: 'vertical' | 'horizontal';\n    readOnly?: boolean;\n    required?: boolean;\n    value?: string;\n    'data-test-id'?: string;\n};\nexport const RadioListRoot = ({\n    asChild,\n    children,\n    className,\n    disabled,\n    emphasis = 'default',\n    onValueChange,\n    orientation,\n    readOnly,\n    required,\n    value,\n    'data-test-id': dataTestId,\n}: RadioListRootProps) => {\n    const { dir } = useFondueTheme();\n\n    return (\n        <RadioGroupPrimitve.Root\n            aria-readonly={readOnly}\n            asChild={asChild}\n            className={[className, asChild ? undefined : styles.root].filter(Boolean).join(' ')}\n            data-emphasis={emphasis}\n            data-readonly={readOnly}\n            data-test-id={dataTestId}\n            dir={dir}\n            disabled={disabled}\n            onValueChange={onValueChange}\n            orientation={orientation}\n            required={required}\n            value={value}\n            onFocus={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    event.target.blur();\n                    return false;\n                }\n            }}\n        >\n            {children}\n        </RadioGroupPrimitve.Root>\n    );\n};\nRadioListRoot.displayName = 'RadioList.Root';\n\ntype RadioListRadioButtonProps = {\n    disabled?: boolean;\n    id: string;\n    value: string;\n    readOnly?: boolean;\n    'data-test-id'?: string;\n} & React.ComponentProps<typeof RadioGroupPrimitve.Item>;\n\nconst RadioListRadioButton = ({\n    readOnly,\n    disabled,\n    value,\n    id,\n    'data-test-id': dataTestId,\n    ...restProps\n}: RadioListRadioButtonProps) => {\n    return (\n        <RadioGroupPrimitve.Item\n            onFocus={(event) => {\n                if (readOnly) {\n                    event.preventDefault();\n                    event.target.blur();\n                    return false;\n                }\n            }}\n            aria-readonly={readOnly}\n            className={styles.item}\n            data-readonly={readOnly}\n            data-test-id={dataTestId}\n            disabled={disabled}\n            id={id}\n            value={value}\n            {...restProps}\n        >\n            <RadioGroupPrimitve.Indicator className={styles.indicator} />\n        </RadioGroupPrimitve.Item>\n    );\n};\nRadioListRadioButton.displayName = 'RadioList.RadioButton';\n\nexport const RadioList = {\n    Root: RadioListRoot,\n    RadioButton: RadioListRadioButton,\n};\n"],"names":["RadioListRoot","asChild","children","className","disabled","emphasis","onValueChange","orientation","readOnly","required","value","dataTestId","dir","useFondueTheme","jsx","RadioGroupPrimitve","styles","event","RadioListRadioButton","id","restProps","RadioList"],"mappings":";;;;AAsBO,MAAMA,IAAgB,CAAC;AAAA,EAC1B,SAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,eAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,gBAAgBC;AACpB,MAA0B;AACtB,QAAM,EAAE,KAAAC,EAAA,IAAQC,EAAA;AAEhB,SACI,gBAAAC;AAAA,IAACC,EAAmB;AAAA,IAAnB;AAAA,MACG,iBAAeP;AAAA,MACf,SAAAP;AAAA,MACA,WAAW,CAACE,GAAWF,IAAU,SAAYe,EAAO,IAAI,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAClF,iBAAeX;AAAA,MACf,iBAAeG;AAAA,MACf,gBAAcG;AAAA,MACd,KAAAC;AAAA,MACA,UAAAR;AAAA,MACA,eAAAE;AAAA,MACA,aAAAC;AAAA,MACA,UAAAE;AAAA,MACA,OAAAC;AAAA,MACA,SAAS,CAACO,MAAU;AAChB,YAAIT;AACA,iBAAAS,EAAM,eAAA,GACNA,EAAM,OAAO,KAAA,GACN;AAAA,MAEf;AAAA,MAEC,UAAAf;AAAA,IAAA;AAAA,EAAA;AAGb;AACAF,EAAc,cAAc;AAU5B,MAAMkB,IAAuB,CAAC;AAAA,EAC1B,UAAAV;AAAA,EACA,UAAAJ;AAAA,EACA,OAAAM;AAAA,EACA,IAAAS;AAAA,EACA,gBAAgBR;AAAA,EAChB,GAAGS;AACP,MAEQ,gBAAAN;AAAA,EAACC,EAAmB;AAAA,EAAnB;AAAA,IACG,SAAS,CAACE,MAAU;AAChB,UAAIT;AACA,eAAAS,EAAM,eAAA,GACNA,EAAM,OAAO,KAAA,GACN;AAAA,IAEf;AAAA,IACA,iBAAeT;AAAA,IACf,WAAWQ,EAAO;AAAA,IAClB,iBAAeR;AAAA,IACf,gBAAcG;AAAA,IACd,UAAAP;AAAA,IACA,IAAAe;AAAA,IACA,OAAAT;AAAA,IACC,GAAGU;AAAA,IAEJ,4BAACL,EAAmB,WAAnB,EAA6B,WAAWC,EAAO,UAAA,CAAW;AAAA,EAAA;AAAA;AAIvEE,EAAqB,cAAc;AAE5B,MAAMG,IAAY;AAAA,EACrB,MAAMrB;AAAA,EACN,aAAakB;AACjB;"}