@frontify/fondue-components 23.0.0-rc.1 → 23.0.0

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';
 
@@ -780,6 +780,26 @@ declare type DropdownTriggerProps = {
 
 declare type DropdownViewportCollisionPadding = 'compact' | 'spacious';
 
+declare const enUS: {
+    ColorPicker_selectColor: string;
+    ColorPicker_selectFormat: string;
+    ColorPicker_hexValue: string;
+    ColorPicker_redChannel: string;
+    ColorPicker_greenChannel: string;
+    ColorPicker_blueChannel: string;
+    ColorPicker_opacity: string;
+    Dialog_close: string;
+    Flyout_close: string;
+    Select_clear: string;
+    Select_toggleMenu: string;
+    Switch_defaultLabel: string;
+    Table_sortByDescending: string;
+    Table_sortByAscending: string;
+    Table_sortDescending: string;
+    Table_sortAscending: string;
+    Badge_dismiss: string;
+};
+
 declare type ExtraAction = {
     icon: ReactElement;
     title: string;
@@ -1236,105 +1256,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 = {
@@ -1419,20 +1340,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;
@@ -1871,6 +1778,19 @@ declare type TableRootProps = {
      * @default 'small'
      */
     fontSize?: 'small' | 'medium';
+    /**
+     * Additional spacing between table cells (both horizontal and vertical)
+     *
+     * This value is added to the default cell spacing. For example, with `gutter="48px"`,
+     * cells will have 48px of additional space between them in both directions
+     * (24px added to each side).
+     *
+     * Accepts any CSS length value with units (e.g., '16px', '1rem', '48px')
+     *
+     * **Important:** Always include a unit, even for zero (use '0px', not '0')
+     * @default '0px'
+     */
+    gutter?: CSSProperties['borderSpacing'];
     /**
      * Whether header should stick to the top when scrolling
      * @deprecated Use `Table.Header sticky` prop instead. For sticky columns, use `Table.Body firstColumnSticky` or `lastColumnSticky` props
@@ -2354,9 +2274,15 @@ declare type TextSize = 'x-small' | 'small' | 'medium' | 'large';
 
 declare type TextWeight = 'default' | 'strong' | 'x-strong';
 
-export declare const ThemeContext: Context<Pick<ThemeProviderProps, "dir" | "theme">>;
+export declare const ThemeContext: Context<ThemeContextValue>;
 
-export declare const ThemeProvider: ({ children, theme, dir, asChild }: ThemeProviderProps) => JSX_2.Element;
+declare type ThemeContextValue = {
+    theme: AvailableTheme;
+    dir: 'ltr' | 'rtl';
+    translations: Translations;
+};
+
+export declare const ThemeProvider: ({ children, theme, dir, translations, asChild, }: ThemeProviderProps) => JSX_2.Element;
 
 declare type ThemeProviderProps = {
     children: ReactNode;
@@ -2370,6 +2296,18 @@ declare type ThemeProviderProps = {
      * @default "ltr"
      */
     dir?: 'ltr' | 'rtl';
+    /**
+     * Translations object to use for component strings.
+     * Import from '@frontify/fondue/components/locales' or provide your own.
+     * Must be a complete Translations object.
+     * @default "enUS"
+     * @example
+     * ```tsx
+     * import { deDE } from '@frontify/fondue/components/locales';
+     * <ThemeProvider translations={deDE}>...</ThemeProvider>
+     * ```
+     */
+    translations?: Translations;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
@@ -2428,7 +2366,9 @@ declare type TooltipTriggerProps = {
     'data-test-id'?: string;
 };
 
-export declare const useFondueTheme: () => Pick<ThemeProviderProps, "dir" | "theme">;
+declare type Translations = typeof enUS;
+
+export declare const useFondueTheme: () => ThemeContextValue;
 
 export { }