@frontify/fondue-components 20.0.0-rc.0 → 20.0.0

package/dist/fondue-components88.js

@@ -1,8 +1,43 @@
-const o = "_root_e5fqt_2", t = {
-  root: o
+import { Children as a, isValidElement as u, cloneElement as f } from "react";
+import { ForwardedRefSelectItem as E } from "./fondue-components67.js";
+const g = ({
+  children: o,
+  value: r,
+  label: s
+}) => o && typeof o == "string" ? {
+  value: r || o,
+  label: s || o
+} : {
+  value: r || "",
+  label: s || r || "",
+  ...o ? { children: o } : null
+}, w = (o, r) => u(o) && o.type === r, y = (o, r, s, p = 0) => {
+  const n = [];
+  let t = 0;
+  return a.forEach(o, (e) => {
+    if (w(e, E) && u(e))
+      g(e.props).label.toLowerCase().includes((s == null ? void 0 : s.toLowerCase()) || "") && (n.push(r(e, p + t)), t++);
+    else if (u(e) && (e != null && e.props.children)) {
+      const { parsedChildren: m, subElementCount: C } = y(
+        e.props.children,
+        r,
+        "",
+        p + t
+      );
+      e = f(e, {
+        children: m,
+        key: `group-${p + t}`
+      }), n.push(e), t += C;
+    } else
+      n.push(e);
+  }), {
+    parsedChildren: n,
+    subElementCount: t
+  };
 };
 export {
-  t as default,
-  o as root
+  g as getSelectOptionValue,
+  w as isReactLeaf,
+  y as recursiveMap
 };
 //# sourceMappingURL=fondue-components88.js.map

package/dist/fondue-components88.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components88.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"fondue-components88.js","sources":["../src/components/Select/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    Children,\n    cloneElement,\n    isValidElement,\n    type JSXElementConstructor,\n    type ReactElement,\n    type ReactNode,\n} from 'react';\n\nimport { ForwardedRefSelectItem, type SelectItemProps } from './SelectItem';\n\n/**\n * Extracts and returns an object containing `value` and `label` from a given SelectItemProps object.\n * It prioritizes explicit `value` and `label` properties but will fall back to using `children` as the value or label if necessary.\n *\n * @param {SelectItemProps} props - The properties of a select item, which include potential children, value, and label.\n * @returns {{ value: string; label: string, children?: ReactNode }} An object containing `value` and `label` as strings.\n *\n * @example\n * // Returns { value: 'option1', label: 'Option 1' }\n * getSelectOptionValue({ value: 'option1', label: 'Option 1' });\n *\n * @example\n * // Uses children as the value and label when they are not explicitly provided\n * // Returns { value: 'Default', label: 'Default' }\n * getSelectOptionValue({ children: 'Default' });\n */\nexport const getSelectOptionValue = ({\n    children,\n    value,\n    label,\n}: SelectItemProps): {\n    value: string;\n    label: string;\n    children?: ReactNode;\n} => {\n    if (children && typeof children === 'string') {\n        return {\n            value: value ? value : children,\n            label: label ? label : children,\n        };\n    }\n\n    return {\n        value: value || '',\n        label: label ? label : value || '',\n        ...(children ? { children } : null),\n    };\n};\n/**\n * Determines if the child is a leaf node of React, meaning it has one final child of a native type;\n *\n * @param {ReactNode} child - The React child node to check.\n * @param {JSXElementConstructor<never>} Component - The React component constructor used for comparison.\n * @returns {boolean} Returns true if the `child` is a valid React element of the specified `Component` type.\n *\n * @example\n * // Assuming ForwardedRefSelectItem is a component that renders an <input> element\n * // Returns true\n * isReactLeaf(<ForwardedRefSelectItem />, ForwardedRefSelectItem);\n *\n * @example\n * // Returns false for non-matching types or non-leaf components\n * isReactLeaf(<div><ForwardedRefSelectItem /></div>, ForwardedRefSelectItem);\n */\nexport const isReactLeaf = (child: ReactNode, Component: JSXElementConstructor<never>): child is ReactElement =>\n    isValidElement(child) && child.type === Component;\n\n/**\n * Recursively maps through React children, applying a callback to each child that meets the specified conditions.\n * This function is useful for deeply nested structures where modifications or checks are needed at multiple levels.\n *\n * @param {ReactNode} children - The children to be recursively processed.\n * @param {function(ReactNode, number): ReactNode} callback - A function that is called for each child that meets the condition. It receives the child and its index, and returns a React node.\n * @param {string} [filterText=''] - Optional text used to filter children based on their properties.\n * @param {number} [nextIndex=0] - The starting index for numbering children, defaults to 0.\n * @returns {{ parsedChildren: ReactNode[], subElementCount: number }} An object containing the transformed children array and the count of all processed sub-elements.\n *\n * @example\n * // Example usage in a select component where only items containing a certain text are modified\n * recursiveMap(children, (child, index) => React.cloneElement(child, { extraProp: 'value' }), 'specific text');\n *\n * @example\n * // Nested structure transformation, adding class names based on index\n * recursiveMap(children, (child, index) => React.cloneElement(child, { className: `item-${index}` }));\n */\nexport const recursiveMap = (\n    children: ReactNode,\n    callback: (child: ReactNode, nextIndex: number) => ReactNode,\n    filterText?: string,\n    nextIndex: number = 0,\n): {\n    parsedChildren: ReactNode[];\n    subElementCount: number;\n} => {\n    const resultingChildren: ReactNode[] = [];\n    let itemCounter = 0;\n    Children.forEach(children, (child) => {\n        if (isReactLeaf(child, ForwardedRefSelectItem) && isValidElement<SelectItemProps>(child)) {\n            if (\n                getSelectOptionValue(child.props)\n                    .label.toLowerCase()\n                    .includes(filterText?.toLowerCase() || '')\n            ) {\n                resultingChildren.push(callback(child, nextIndex + itemCounter));\n                itemCounter++;\n            }\n        } else if (isValidElement<{ children: ReactNode }>(child) && child?.props.children) {\n            const { parsedChildren, subElementCount } = recursiveMap(\n                child.props.children,\n                callback,\n                '',\n                nextIndex + itemCounter,\n            );\n            child = cloneElement(child, {\n                children: parsedChildren,\n                key: `group-${nextIndex + itemCounter}`,\n            });\n            resultingChildren.push(child);\n            itemCounter += subElementCount;\n        } else {\n            resultingChildren.push(child);\n        }\n    });\n    return {\n        parsedChildren: resultingChildren,\n        subElementCount: itemCounter,\n    };\n};\n"],"names":["getSelectOptionValue","children","value","label","isReactLeaf","child","Component","isValidElement","recursiveMap","callback","filterText","nextIndex","resultingChildren","itemCounter","Children","ForwardedRefSelectItem","parsedChildren","subElementCount","cloneElement"],"mappings":";;AA6BO,MAAMA,IAAuB,CAAC;AAAA,EACjC,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC;AACJ,MAKQF,KAAY,OAAOA,KAAa,WACzB;AAAA,EACH,OAAOC,KAAgBD;AAAA,EACvB,OAAOE,KAAgBF;AAAA,IAIxB;AAAA,EACH,OAAOC,KAAS;AAAA,EAChB,OAAOC,KAAgBD,KAAS;AAAA,EAChC,GAAID,IAAW,EAAE,UAAAA,MAAa;AAAA,GAmBzBG,IAAc,CAACC,GAAkBC,MAC1CC,EAAeF,CAAK,KAAKA,EAAM,SAASC,GAoB/BE,IAAe,CACxBP,GACAQ,GACAC,GACAC,IAAoB,MAInB;AACD,QAAMC,IAAiC,CAAA;AACvC,MAAIC,IAAc;AAClB,SAAAC,EAAS,QAAQb,GAAU,CAACI,MAAU;AAClC,QAAID,EAAYC,GAAOU,CAAsB,KAAKR,EAAgCF,CAAK;AACnF,MACIL,EAAqBK,EAAM,KAAK,EAC3B,MAAM,cACN,UAASK,KAAA,gBAAAA,EAAY,kBAAiB,EAAE,MAE7CE,EAAkB,KAAKH,EAASJ,GAAOM,IAAYE,CAAW,CAAC,GAC/DA;AAAA,aAEGN,EAAwCF,CAAK,MAAKA,KAAA,QAAAA,EAAO,MAAM,WAAU;AAChF,YAAM,EAAE,gBAAAW,GAAgB,iBAAAC,EAAA,IAAoBT;AAAA,QACxCH,EAAM,MAAM;AAAA,QACZI;AAAA,QACA;AAAA,QACAE,IAAYE;AAAA,MAAA;AAEhB,MAAAR,IAAQa,EAAab,GAAO;AAAA,QACxB,UAAUW;AAAA,QACV,KAAK,SAASL,IAAYE,CAAW;AAAA,MAAA,CACxC,GACDD,EAAkB,KAAKP,CAAK,GAC5BQ,KAAeI;AAAA,IACnB;AACI,MAAAL,EAAkB,KAAKP,CAAK;AAAA,EAEpC,CAAC,GACM;AAAA,IACH,gBAAgBO;AAAA,IAChB,iBAAiBC;AAAA,EAAA;AAEzB;"}

package/dist/fondue-components89.js

@@ -1,8 +1,9 @@
-const r = (e) => {
-  if (e)
-    return `rgba(${e.red}, ${e.green}, ${e.blue}, ${e.alpha ?? 1})`;
-};
+import { jsx as e } from "react/jsx-runtime";
+import { IconCross as s } from "@frontify/fondue-icons";
+import { Button as o } from "./fondue-components6.js";
+import t from "./fondue-components70.js";
+const c = ({ onClear: r }) => /* @__PURE__ */ e(o, { "aria-label": "clear input", type: "button", size: "small", emphasis: "weak", aspect: "square", onPress: r, children: /* @__PURE__ */ e(s, { className: t.clearIcon, size: 16 }) });
 export {
-  r as colorToCss
+  c as SelectClear
 };
 //# sourceMappingURL=fondue-components89.js.map

package/dist/fondue-components89.js.map

@@ -1 +1 @@
-{"version":3,"file":"fondue-components89.js","sources":["../src/components/Badge/utils.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { type RgbaColor } from './types';\n\nexport const DEFAULT_COLOR = { red: 255, green: 255, blue: 255, alpha: 1, name: '' };\n\n/**\n * Converts a color object to a CSS color string.\n * @param {RgbaColor} color - The color object to be converted.\n * @returns {string}\n * @example\n * colorToCss({ red: 255, green: 255, blue: 255, alpha: 1 }); // 'rgba(255, 255, 255, 1)'\n * @example\n * colorToCss({ red: 255, green: 87, blue: 51, alpha: 1 }); // 'rgba(255, 87, 51, 1)'\n * @example\n * colorToCss({ red: 0, green: 0, blue: 0, alpha: 0 }); // 'rgba(0, 0, 0, 0)'\n */\nexport const colorToCss = (color?: RgbaColor) => {\n    if (!color) {\n        return undefined;\n    }\n    return `rgba(${color.red}, ${color.green}, ${color.blue}, ${color.alpha ?? 1})`;\n};\n"],"names":["colorToCss","color"],"mappings":"AAiBO,MAAMA,IAAa,CAACC,MAAsB;AAC7C,MAAKA;AAGL,WAAO,QAAQA,EAAM,GAAG,KAAKA,EAAM,KAAK,KAAKA,EAAM,IAAI,KAAKA,EAAM,SAAS,CAAC;AAChF;"}
+{"version":3,"file":"fondue-components89.js","sources":["../src/components/Select/SelectClear.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCross } from '@frontify/fondue-icons';\n\nimport { Button } from '../Button/Button';\n\nimport styles from './styles/select.module.scss';\n\nexport const SelectClear = ({ onClear }: { onClear?: () => void }) => {\n    return (\n        <Button aria-label=\"clear input\" type=\"button\" size=\"small\" emphasis=\"weak\" aspect=\"square\" onPress={onClear}>\n            <IconCross className={styles.clearIcon} size={16} />\n        </Button>\n    );\n};\n"],"names":["SelectClear","onClear","jsx","Button","IconCross","styles"],"mappings":";;;;AAQO,MAAMA,IAAc,CAAC,EAAE,SAAAC,QAEtB,gBAAAC,EAACC,KAAO,cAAW,eAAc,MAAK,UAAS,MAAK,SAAQ,UAAS,QAAO,QAAO,UAAS,SAASF,GACjG,UAAA,gBAAAC,EAACE,GAAA,EAAU,WAAWC,EAAO,WAAW,MAAM,GAAA,CAAI,EAAA,CACtD;"}

package/dist/fondue-components9.js

@@ -2,10 +2,10 @@ import { jsx as o, jsxs as O } from "react/jsx-runtime";
 import { IconCross as P } from "@frontify/fondue-icons";
 import * as d from "@radix-ui/react-dialog";
 import { createContext as j, forwardRef as l, useRef as q, useContext as B, useMemo as z } from "react";
-import { useSyncRefs as E } from "./fondue-components50.js";
-import { addShowFocusRing as L, addAutoFocusAttribute as $ } from "./fondue-components51.js";
-import { useFondueTheme as k, ThemeProvider as G } from "./fondue-components33.js";
-import n from "./fondue-components52.js";
+import { useSyncRefs as E } from "./fondue-components48.js";
+import { addShowFocusRing as L, addAutoFocusAttribute as $ } from "./fondue-components49.js";
+import { useFondueTheme as k, ThemeProvider as G } from "./fondue-components31.js";
+import n from "./fondue-components50.js";
 const m = j({ isModal: !1 });
 m.displayName = "DialogContext";
 const y = ({ children: t, modal: e, onOpenChange: a, open: i }) => {

package/dist/fondue-components90.js

@@ -1,20 +1,20 @@
-const o = "_root_1xnv8_5", c = "_clearIcon_1xnv8_35", t = "_caret_1xnv8_52", n = "_colorName_1xnv8_70", _ = "_colorIndicator_1xnv8_73", r = "_button_1xnv8_94", a = "_actions_1xnv8_126", s = {
+const o = "_root_x0mxj_5", c = "_clearIcon_x0mxj_35", t = "_caret_x0mxj_52", _ = "_colorName_x0mxj_70", n = "_button_x0mxj_91", r = "_colorIndicator_x0mxj_104", a = "_actions_x0mxj_123", x = {
   root: o,
   clearIcon: c,
   caret: t,
-  colorName: n,
-  colorIndicator: _,
-  button: r,
+  colorName: _,
+  button: n,
+  colorIndicator: r,
   actions: a
 };
 export {
   a as actions,
-  r as button,
+  n as button,
   t as caret,
   c as clearIcon,
-  _ as colorIndicator,
-  n as colorName,
-  s as default,
+  r as colorIndicator,
+  _ as colorName,
+  x as default,
   o as root
 };
 //# sourceMappingURL=fondue-components90.js.map

package/dist/index.d.ts

@@ -4,7 +4,7 @@ import { ChangeEventHandler } from 'react';
 import { CommonAriaAttrs } from '../../utilities/types';
 import { Context } from 'react';
 import { CSSProperties } from 'react';
-import { default as default_2 } from '@frontify/fondue-tokens/themes';
+import { default as default_2 } from '@frontify/fondue-tokens/theme-tokens';
 import { FocusEvent as FocusEvent_2 } from 'react';
 import { FocusEventHandler } from 'react';
 import { FormEvent } from 'react';
@@ -598,7 +598,7 @@ declare type DialogTriggerProps = {
 
 export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
 
-declare type DividerColor = 'weak' | 'default' | 'strong';
+declare type DividerColor = 'weak' | 'default' | 'strong' | 'x-strong';
 
 declare type DividerDirection = 'horizontal' | 'vertical';
 
@@ -1231,105 +1231,6 @@ declare type LayoutComponentProps = {
     left?: Responsive<SpacingValue>;
 };
 
-export declare const Link: ForwardRefExoticComponent<LinkProps & RefAttributes<HTMLAnchorElement>>;
-
-declare type LinkColor = 'primary' | 'secondary' | 'error' | 'success' | 'warning' | 'highlight';
-
-declare type LinkOnContainerColor = 'secondary' | 'disabled' | 'error' | 'success' | 'warning' | 'highlight';
-
-declare type LinkProps = {
-    children?: ReactNode;
-    /**
-     * The link to navigate to when clicked
-     */
-    href: string;
-    /**
-     * Id of the element
-     */
-    id?: string;
-    /**
-     * Size of the text
-     *
-     * @default 'medium'
-     */
-    size?: LinkSize;
-    /**
-     * Weight of the font
-     *
-     * @default 'regular'
-     */
-    weight?: LinkWeight;
-    /**
-     * Color of the text
-     *
-     * @default 'primary'
-     */
-    color?: LinkColor;
-    /**
-     * The texts color when used within a container
-     *
-     * @description optional color prop that uses the inverse container color when accessibility contrast is needed
-     **/
-    onContainer?: LinkOnContainerColor;
-    /**
-     * Truncate the text if it overflows
-     */
-    truncate?: boolean;
-    /**
-     * Wrap the text if it overflows
-     * @default 'nowrap'
-     */
-    wrap?: LinkWrap;
-    /**
-     * Underline behavior of the link
-     * @default 'auto'
-     */
-    underline?: LinkUnderline;
-    /**
-     * The target attribute for the link
-     * @default '_self'
-     */
-    target?: string;
-    /**
-     * The rel attribute for the link
-     * @default 'noopener noreferrer'
-     */
-    rel?: string;
-    className?: string;
-    onPress?: (event: MouseEvent_2<HTMLAnchorElement>) => void;
-    'data-test-id'?: string;
-    /**
-     * Aria label for the component.
-     */
-    'aria-label'?: string;
-    /**
-     * Aria labelled by for the component.
-     */
-    'aria-labelledby'?: string;
-    /**
-     * Aria described by for the component.
-     */
-    'aria-describedby'?: string;
-    /**
-     * Aria details for extend description of the component.
-     */
-    'aria-details'?: string;
-    /**
-     * Disable the link
-     *
-     * @default false
-     */
-    disabled?: boolean;
-};
-
-declare type LinkSize = 'xx-small' | 'x-small' | 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
-
-declare type LinkUnderline = 'auto' | 'always' | 'hover' | 'none';
-
-declare type LinkWeight = 'regular' | 'medium' | 'bold';
-
-declare type LinkWrap = 'wrap' | 'nowrap';
-
 export declare const LoadingBar: ForwardRefExoticComponent<LoadingBarProps & RefAttributes<HTMLDivElement>>;
 
 declare type LoadingBarProps = {
@@ -1414,20 +1315,6 @@ declare type RgbaColor_2 = {
     name?: string;
 };
 
-export declare const RouterProvider: ({ children, navigate, useHref }: RouterProviderProps) => JSX_2.Element;
-
-export declare type RouterProviderProps = {
-    children: ReactNode;
-    /**
-     * Function to navigate to a specific path
-     */
-    navigate: (path: string) => void;
-    /**
-     * Function to resolves a URL against the current location.
-     */
-    useHref: (path: string) => string;
-};
-
 declare const screens: {
     xs: string;
     sm: string;
@@ -2328,7 +2215,7 @@ declare type TextSize = 'x-small' | 'small' | 'medium' | 'large';
 
 declare type TextWeight = 'default' | 'strong' | 'x-strong';
 
-export declare const ThemeContext: Context<"base" | "dark" | "light">;
+export declare const ThemeContext: Context<"dark" | "light">;
 
 export declare const ThemeProvider: ({ children, theme, asChild }: ThemeProviderProps) => JSX_2.Element;
 
@@ -2397,7 +2284,7 @@ declare type TooltipTriggerProps = {
     'data-test-id'?: string;
 };
 
-export declare const useFondueTheme: () => "base" | "dark" | "light";
+export declare const useFondueTheme: () => "dark" | "light";
 
 export { }