@up42/up-components 5.0.0-tokens.1 → 5.0.0-tokens.3

package/dist/cjs/types/components/Banner/Banner.d.ts

@@ -23,6 +23,14 @@ export type BannerProps = {
      */
     onDismiss?: ButtonProps['onClick'];
     title: string;
+    /**
+     * The size(height) of the banner.
+     * - 'default': Standard banner height.
+     * - 'slim': Reduced height, intended for use only with the 'inline' variant.
+     *
+     * Note: 'slim' size has a fixed height of '32px' and should be used exclusively with variant='inline' and probably text ellipsis to ensure proper layout and appearance.
+     */
+    size?: 'default' | 'slim';
 } & Omit<AlertProps, 'title' | 'closeText' | 'icon' | 'role' | 'onClose'>;
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/feedback-banner--docs
@@ -49,4 +57,12 @@ export declare const Banner: React.ForwardRefExoticComponent<Omit<{
      */
     onDismiss?: ButtonProps['onClick'];
     title: string;
+    /**
+     * The size(height) of the banner.
+     * - 'default': Standard banner height.
+     * - 'slim': Reduced height, intended for use only with the 'inline' variant.
+     *
+     * Note: 'slim' size has a fixed height of '32px' and should be used exclusively with variant='inline' and probably text ellipsis to ensure proper layout and appearance.
+     */
+    size?: "default" | "slim" | undefined;
 } & Omit<AlertProps, "title" | "role" | "onClose" | "closeText" | "icon">, "ref"> & React.RefAttributes<unknown>>;

package/dist/cjs/types/components/EditTagsButton/EditTagsButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type EditTagsButtonProps = {
+    tags: string[];
+    tagPool?: string[];
+    onSave: (tags: string[]) => Promise<void>;
+    label?: string;
+    tooltip?: string;
+    isUpdatingTags?: boolean;
+};
+export declare function EditTagsButton({ tags, tagPool, onSave, label, tooltip, isUpdatingTags }: EditTagsButtonProps): React.JSX.Element;

package/dist/cjs/types/components/EditTagsButton/EditTagsButton.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/components/EditTagsButton/SearchTags.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export type SearchTagsProps = {
+    tags: string[];
+    onAddTag: (tag: string) => void;
+};
+export declare const SearchTags: ({ tags, onAddTag }: SearchTagsProps) => React.JSX.Element;

package/dist/cjs/types/components/EditTagsButton/SearchTags.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/components/EditTagsButton/TagsManager.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type TagsManagerProps = {
+    currentTags: string[];
+    setCurrentTags: (tags: string[]) => void;
+    tagPool?: string[];
+};
+export declare const TagsManager: ({ currentTags, setCurrentTags, tagPool }: TagsManagerProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/components/EditTagsButton/TagsManager.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/components/FeatureCard/FeatureCard.d.ts

@@ -1,7 +1,8 @@
 import React, { ReactNode } from 'react';
 import { CardProps } from '@mui/material';
+import { BannerProps } from '../Banner/Banner';
 export type FeatureCardProps = CardProps & {
-    banner?: ReactNode;
+    bannerProps?: Omit<BannerProps, 'title' | 'variant'>;
     header?: {
         title: ReactNode;
         actions?: ReactNode;
@@ -27,4 +28,4 @@ export type FeatureCardProps = CardProps & {
      */
     hovered?: boolean;
 };
-export declare const FeatureCard: ({ children, header, footer, banner, isSelectable, selected, isHoverable, hovered, ...props }: FeatureCardProps) => React.JSX.Element;
+export declare const FeatureCard: ({ children, header, footer, bannerProps, isSelectable, selected, isHoverable, hovered, ...props }: FeatureCardProps) => React.JSX.Element;

package/dist/cjs/types/components/FeatureCard/PlaceholderArea.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const PlaceholderArea: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;

package/dist/cjs/types/components/FeatureCardHeader/FeatureCardHeader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { CheckboxProps } from '../Checkbox/Checkbox';
+export type FeatureCardHeaderProps = {
+    header: string;
+    subheader?: string;
+    imageUrl?: string;
+    selected?: boolean;
+    onSelectChange?: CheckboxProps['onChange'];
+    isLoading?: boolean;
+};
+export declare const FeatureCardHeader: ({ header, subheader, imageUrl, selected, onSelectChange, isLoading, }: FeatureCardHeaderProps) => React.JSX.Element;

package/dist/cjs/types/components/FeatureCardHeaderActions/FeatureCardHeaderActions.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { SxProps } from '@mui/material';
+import { IconProps } from 'components/Icon/Icon';
+export type IconAction = {
+    name: IconProps['name'];
+    tooltip?: string;
+    isActive?: boolean;
+    onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    isDisabled?: boolean;
+    sx?: SxProps;
+};
+export type MenuAction = {
+    label: string;
+    onClick: (event: React.MouseEvent<HTMLLIElement>) => void;
+    sx?: SxProps;
+};
+export type FeatureCardHeaderActionsProps = {
+    iconActions?: IconAction[];
+    menuActions?: MenuAction[];
+};
+export declare const FeatureCardHeaderActions: ({ iconActions, menuActions }: FeatureCardHeaderActionsProps) => React.JSX.Element;

package/dist/cjs/types/components/FeatureFlagCheckbox/FeatureFlagCheckbox.d.ts

@@ -0,0 +1,25 @@
+import React, { SyntheticEvent } from 'react';
+export type FeatureFlagCheckboxProps = {
+    label: string;
+    checked: boolean;
+    /**
+     * Defines if the component should be rendered or not.
+     * Use this prop to indicate if the application is in a development environment.
+     */
+    isDevelopment: boolean;
+    onChange: (event: SyntheticEvent, checked: boolean) => void;
+    onClose?: () => void;
+};
+/**
+ *
+ * Development-only feature toggle component (not for production use).
+ *
+ * **Important**: This component is intended *strictly* for development environments and should not be included in production builds.
+ *
+ * The `FeatureFlagCheckbox` is a temporary UI component used by developers to enable or disable feature flags manually. It renders a labeled checkbox and an optional close button to dismiss the control.
+ *
+ * **Note**: The component is rendered only when the `isDevelopment` prop is set to `true`. It is the responsibility of the consuming application to ensure the provided value is correct so that is only rendered in non-production environments.
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/development-featureflagcheckbox--docs
+ */
+export declare function FeatureFlagCheckbox({ label, checked, isDevelopment, onChange, onClose }: FeatureFlagCheckboxProps): React.JSX.Element;

package/dist/cjs/types/components/FeatureFlagCheckbox/FeatureFlagCheckbox.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/components/Logo/Logo.d.ts

@@ -1,12 +1,12 @@
 import React from 'react';
 import { SvgIconProps } from '@mui/material';
 export type LogoProps = {
-    variant?: 'dark' | 'light';
+    variant?: 'dark' | 'light' | 'vertical';
     /**
      * use isKSA to toggle between KSA and INT logo versions
      */
     isKSA?: boolean;
-    size?: 'small' | 'medium';
+    size?: 'small' | 'medium' | 'large';
 } & Omit<SvgIconProps, 'children' | 'inheritViewBox' | 'shapeRendering' | 'viewBox' | 'fontSize'>;
 /**
  * Documentation: https://up-components.up42.com/?path=/docs/data-display-logos--docs

package/dist/cjs/types/components/StatusLight/StatusLight.d.ts

@@ -0,0 +1,46 @@
+import { SxProps, Theme } from '@mui/material';
+import React from 'react';
+declare const COLORS: {
+    primary: string;
+    secondary: string;
+    success: string;
+    warning: string;
+    error: string;
+    info: string;
+    neutral: string;
+};
+declare const SIZES: {
+    small: {
+        circle: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    medium: {
+        circle: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+    large: {
+        circle: string;
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+    };
+};
+type Variant = 'filled' | 'half';
+type Color = keyof typeof COLORS;
+type Size = keyof typeof SIZES;
+export type StatusLightProps = {
+    label: string;
+    variant?: Variant;
+    color?: Color;
+    size?: Size;
+    sx?: SxProps<Theme>;
+};
+/**
+ * Documentation: https://up-components.up42.com/?path=/docs/data-display-status-light--docs
+ */
+export declare const StatusLight: ({ label, variant, color, size, sx, }: StatusLightProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/components/StatusLight/StatusLight.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/components/TagsList/MoreTags.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MoreTags: ({ tags }: {
+    tags: string[];
+}) => React.JSX.Element | null;

package/dist/cjs/types/components/TagsList/MoreTags.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/components/TagsList/Tags.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type TagsProps = {
+    tags: string[];
+    setHiddenTagCount: (count: number) => void;
+    hiddenTagCount: number;
+};
+export declare const Tags: ({ tags, setHiddenTagCount, hiddenTagCount }: TagsProps) => React.JSX.Element;
+export {};

package/dist/cjs/types/components/TagsList/Tags.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/components/TagsList/TagsList.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export type TagsListProps = {
+    tags: string[];
+    onTagsUpdate?: (tags: string[]) => Promise<void>;
+    isUpdatingTags?: boolean;
+};
+export declare const TagsList: ({ tags: tagsProp, onTagsUpdate, isUpdatingTags }: TagsListProps) => React.JSX.Element;

package/dist/cjs/types/components/TagsList/TagsList.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/types/global/icons/index.d.ts

@@ -103,6 +103,7 @@ export { default as Map } from './Map.svg';
 export { default as MapPin } from './MapPin.svg';
 export { default as MapSearch } from './MapSearch.svg';
 export { default as Marketplace } from './Marketplace.svg';
+export { default as MarketplaceExternal } from './MarketplaceExternal.svg';
 export { default as MenuCircleFilledHorizontal } from './MenuCircleFilledHorizontal.svg';
 export { default as MenuCircleFilledVertical } from './MenuCircleFilledVertical.svg';
 export { default as MenuOpenHorizontal } from './MenuOpenHorizontal.svg';

package/dist/cjs/types/global/logos/index.d.ts

@@ -2,3 +2,4 @@ export { default as INTDark } from './int-dark.svg';
 export { default as INTLight } from './int-light.svg';
 export { default as KSADark } from './ksa-dark.svg';
 export { default as KSALight } from './ksa-light.svg';
+export { default as KSALightVertical } from './ksa-light-vertical.svg';

package/dist/cjs/types/index.d.ts

@@ -46,6 +46,12 @@ export { Tag, type TagProps } from './components/Tag/Tag';
 export { DateTime, type DateTimeProps } from './components/DateTime/DateTime';
 export { Divider, type DividerProps } from './components/Divider/Divider';
 export { FeatureCard, type FeatureCardProps } from './components/FeatureCard/FeatureCard';
+export { FeatureCardHeader, type FeatureCardHeaderProps } from './components/FeatureCardHeader/FeatureCardHeader';
+export { FeatureCardHeaderActions, type IconAction, type MenuAction, type FeatureCardHeaderActionsProps, } from './components/FeatureCardHeaderActions/FeatureCardHeaderActions';
+export { StatusLight, type StatusLightProps } from './components/StatusLight/StatusLight';
+export { TagsList, type TagsListProps } from './components/TagsList/TagsList';
+export { EditTagsButton, type EditTagsButtonProps } from './components/EditTagsButton/EditTagsButton';
+export { FeatureFlagCheckbox, type FeatureFlagCheckboxProps, } from './components/FeatureFlagCheckbox/FeatureFlagCheckbox';
 export { DocumentationPopover, type DocumentationPopoverProps, } from './components/DocumentationPopover/DocumentationPopover';
 export { CodeInline, type CodeInlineProps } from './components/CodeInline/CodeInline';
 export { CodeSnippet, type CodeSnippetProps, type CodeSnippetItemProps } from './components/CodeSnippet/CodeSnippet';
@@ -60,5 +66,6 @@ export { formatFileSize } from './utils/helpers/formatFileSize';
 export { useQueryParams } from './utils/hooks/useQueryParams';
 export { useRemotePagination, type PaginatedResponse } from './utils/hooks/useRemotePagination';
 export { useCursorPagination, type CursorPaginatedResponse } from './utils/hooks/useCursorPagination';
+export { useToggle, type UseToggleResult } from './utils/hooks/useToggle';
 export { useDebounce } from './utils/hooks/useDebounce';
 export { useAlert, type CreateAlertProps, type CreateSnackbarProps, } from './global/providers/AlertProvider/AlertProvider';

package/dist/cjs/types/utils/hooks/useToggle.d.ts

@@ -0,0 +1,24 @@
+export type UseToggleResult = [
+    boolean,
+    {
+        on: () => void;
+        off: () => void;
+        flip: () => void;
+    }
+];
+/**
+ * A custom hook that provides a boolean state with convenient toggle actions.
+ *
+ * This hook returns a boolean value and an object with three methods to control the state:
+ * - `on`: Sets the value to `true`
+ * - `off`: Sets the value to `false`
+ * - `flip`: Toggles the current value (true becomes false, false becomes true)
+ *
+ * @param initialState - The initial boolean value. Can be a boolean or a function that returns a boolean.
+ * @returns A tuple containing:
+ *   - The current boolean value
+ *   - An object with `on`, `off`, and `flip` methods to control the state
+ *
+ * Documentation: https://up-components.up42.com/?path=/docs/utils--docs#usetoggle
+ */
+export declare function useToggle(initialState: boolean | (() => boolean)): UseToggleResult;

package/dist/cjs/types/utils/hooks/useToggle.test.d.ts

@@ -0,0 +1 @@
+export {};