@qasa/qds-ui 0.10.0-next.2 → 0.10.0-next.4

package/dist/esm/types/components/index.d.ts

@@ -1,6 +1,7 @@
 export * from './avatar';
 export * from './button';
 export * from './divider';
+export * from './dropdown-menu';
 export * from './heading';
 export * from './hint-box';
 export * from './icon';
@@ -16,3 +17,4 @@ export * from './select';
 export * from './spacer';
 export * from './stack';
 export * from './textarea';
+export * from './toast';

package/dist/esm/types/components/toast/index.d.ts

@@ -0,0 +1 @@
+export { toast } from './toast-store';

package/dist/esm/types/components/toast/toast-provider.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): JSX.Element;

package/dist/esm/types/components/toast/toast-store.d.ts

@@ -0,0 +1,44 @@
+import type { ToastVariant } from './toast-styles';
+declare type Id = number | string;
+interface Toast {
+    id: Id;
+    /**
+     * The text for the toast
+     */
+    text: string;
+    /**
+     * Sets the style variant of the toast, currently supports 'neutral' and 'negative'
+     * @default 'neutral'
+     */
+    variant?: ToastVariant;
+}
+interface ToastOptions {
+    /**
+     * Unique identifier for the toast (can be used for removing it prematurely). If a toast with this
+     * identifier already exists it will be removed before the new toast is added.
+     * @default a random unique id will be set and returned
+     */
+    id?: Id;
+}
+declare type Subscriber = () => void;
+declare class ToastStore {
+    toasts: Toast[];
+    subscribers: Subscriber[];
+    id: number;
+    constructor();
+    subscribe: (subscriber: Subscriber) => () => void;
+    notify: () => void;
+    add: (toast: Omit<Toast, 'id'> & ToastOptions) => Id;
+    addNeutral: (text: string, options?: ToastOptions) => Id;
+    addError: (text: string, options?: ToastOptions) => Id;
+    remove: (id: Id) => void;
+    removeAll: () => void;
+    getSnapshot: () => Toast[];
+}
+export declare const toastStore: ToastStore;
+export declare const toast: ((text: string, options?: ToastOptions) => Id) & {
+    error: (text: string, options?: ToastOptions) => Id;
+    remove: (id: Id) => void;
+    removeAll: () => void;
+};
+export {};

package/dist/esm/types/components/toast/toast-styles.d.ts

@@ -0,0 +1,410 @@
+import type { VariantProps } from '../../styles';
+export declare const getVariantStyles: (theme: {
+    mediaQueries: {
+        readonly smUp: "@media(min-width: 480px)";
+        readonly mdUp: "@media(min-width: 768px)";
+        readonly lgUp: "@media(min-width: 1024px)";
+        readonly xlUp: "@media(min-width: 1280px)";
+        readonly '2xlUp': "@media(min-width: 1536px)";
+    };
+    spacing: {
+        '0x': string;
+        '1x': string;
+        '2x': string;
+        '3x': string;
+        '4x': string;
+        '5x': string;
+        '6x': string;
+        '8x': string;
+        '12x': string;
+        '16x': string;
+        '20x': string;
+        '24x': string;
+    };
+    breakpoints: {
+        readonly base: 0;
+        readonly sm: 480;
+        readonly md: 768;
+        readonly lg: 1024;
+        readonly xl: 1280;
+        readonly '2xl': 1536;
+    };
+    zIndices: {
+        hide: number;
+        auto: string;
+        base: number;
+        docked: number;
+        dropdown: number;
+        sticky: number;
+        banner: number;
+        overlay: number;
+        modal: number;
+        popover: number;
+        skipLink: number;
+        toast: number;
+        tooltip: number;
+    };
+    colors: {
+        core: {
+            black: string;
+            white: string;
+            gray90: string;
+            gray80: string;
+            gray70: string;
+            gray60: string;
+            gray50: string;
+            gray40: string;
+            gray30: string;
+            gray20: string;
+            gray10: string;
+            uiPink: string;
+            uiPinkDark: string;
+            uiPinkLight: string;
+            brown: string;
+            brownDark: string;
+            brownLight: string;
+            offWhite: string;
+            offWhiteDark: string;
+            offWhiteLight: string;
+            softPink: string;
+            warmYellow: string;
+            softYellow: string;
+            red10: string;
+            red20: string;
+            red30: string;
+            red40: string;
+            red50: string;
+            red60: string;
+            red70: string;
+            red80: string;
+            red90: string;
+            green90: string;
+            green80: string;
+            green70: string;
+            green60: string;
+            green50: string;
+            green40: string;
+            green30: string;
+            green20: string;
+            green10: string;
+            blue90: string;
+            blue80: string;
+            blue70: string;
+            blue60: string;
+            blue50: string;
+            blue40: string;
+            blue30: string;
+            blue20: string;
+            blue10: string;
+            yellow90: string;
+            yellow80: string;
+            yellow70: string;
+            yellow60: string;
+            yellow50: string;
+            yellow40: string;
+            yellow30: string;
+            yellow20: string;
+            yellow10: string;
+            blackAlpha20: string;
+        };
+        bg: {
+            default: string;
+            brandPrimary: string;
+            brandPrimaryHover: string;
+            brandPrimaryActive: string;
+            brandSecondary: string;
+            brandSecondaryHover: string;
+            brandSecondaryActive: string;
+            brandTertiary: string;
+            brandTertiaryHover: string;
+            brandTertiaryActive: string;
+            negative: string;
+            warning: string;
+            positive: string;
+            inset: string;
+            backdrop: string;
+        };
+        text: {
+            strong: string;
+            default: string;
+            subtle: string;
+            disabled: string;
+            negative: string;
+            warning: string;
+            positive: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
+        };
+        icon: {
+            default: string;
+            strong: string;
+            subtle: string;
+            disabled: string;
+            negative: string;
+            warning: string;
+            positive: string;
+            onBrandPrimary: string;
+            onBrandSecondary: string;
+            onBrandTertiary: string;
+        };
+        border: {
+            default: string;
+            defaultHover: string;
+            defaultSelected: string;
+            strong: string;
+            subtle: string;
+            negative: string;
+            warning: string;
+            positive: string;
+        };
+    };
+    sizes: {
+        112: string;
+        128: string;
+        144: string;
+        160: string;
+        176: string;
+        192: string;
+        224: string;
+        256: string;
+        288: string;
+        320: string;
+        384: string;
+        448: string;
+        512: string;
+        576: string;
+        672: string;
+        768: string;
+        896: string;
+        1024: string;
+        '0x': string;
+        '1x': string;
+        '2x': string;
+        '3x': string;
+        '4x': string;
+        '5x': string;
+        '6x': string;
+        '8x': string;
+        '12x': string;
+        '16x': string;
+        '20x': string;
+        '24x': string;
+    };
+    radii: {
+        none: string;
+        '2xs': string;
+        xs: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    shadows: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+    typography: {
+        display: {
+            '3xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            '2xl': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            lg: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+                fontFeatureSettings: string;
+            };
+        };
+        title: {
+            lg: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            '2xs': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            '3xs': {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+        body: {
+            xl: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            lg: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            xs: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+        label: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+        button: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+        caption: {
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            sm: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+        };
+    };
+}) => {
+    neutral: {
+        background: string;
+        color: string;
+    };
+    negative: {
+        background: string;
+        color: string;
+    };
+};
+export declare type ToastVariant = VariantProps<typeof getVariantStyles>;

package/dist/esm/types/components/toast/toast.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import * as ToastPrimitive from '@radix-ui/react-toast';
+import type { HTMLQdsProps } from '../../types';
+import type { ToastVariant } from './toast-styles';
+interface ToastOptions {
+    text: string;
+    variant?: ToastVariant;
+}
+declare type OmittedProps = 'children';
+interface ToastProps extends Omit<HTMLQdsProps<'div'>, OmittedProps>, ToastOptions {
+}
+export declare function Toast(props: ToastProps & ToastPrimitive.ToastProps): JSX.Element;
+export {};

package/dist/index.d.ts

@@ -4,6 +4,7 @@ import { ElementType, ComponentPropsWithoutRef, ReactNode, SVGAttributes, useLay
 import { Options } from '@emotion/cache';
 import * as _emotion_react from '@emotion/react';
 import { CSSObject } from '@emotion/react';
+import * as DropdownPrimitive from '@radix-ui/react-dropdown-menu';
 import * as _emotion_styled from '@emotion/styled';
 import { LucideIcon } from 'lucide-react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -2430,6 +2431,122 @@ interface DividerProps extends HTMLQdsProps<'span'>, DividerOptions {
 }
 declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
 
+declare type PrimitiveContentProps = DropdownPrimitive.MenuContentProps;
+interface DropdownMenuContentOptions {
+    /**
+     * Event handler called when focus moves to the trigger after closing.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onCloseAutofocus?: PrimitiveContentProps['onCloseAutoFocus'];
+    /**
+     * Event handler called when the escape key is down.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onEscapeKeyDown?: PrimitiveContentProps['onEscapeKeyDown'];
+    /**
+     * Event handler called when a pointer event occurs outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onPointerDownOutside?: PrimitiveContentProps['onPointerDownOutside'];
+    /**
+     * Event handler called when focus moves outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onFocusOutside?: PrimitiveContentProps['onFocusOutside'];
+    /**
+     * Event handler called when an interaction (pointer or focus event) happens outside the bounds of the component.
+     * It can be prevented by calling `event.preventDefault`.
+     */
+    onInteractOutside?: PrimitiveContentProps['onInteractOutside'];
+    /**
+     * The preferred side of the trigger to render against when open.
+     * Will be reversed when collisions occur and `avoidCollisions` is enabled.
+     *
+     * @default "bottom"
+     */
+    side?: PrimitiveContentProps['side'];
+    /**
+     * The distance in pixels from the trigger.
+     *
+     * @default 8
+     */
+    sideOffset?: PrimitiveContentProps['sideOffset'];
+    /**
+     * The preferred alignment against the trigger. May change when collisions occur.
+     *
+     * @default "center"
+     */
+    align?: PrimitiveContentProps['align'];
+    /**
+     * The element used as the collision boundary.
+     * By default this is the viewport, though you can provide additional element(s) to be included in this check.
+     *
+     * @default []
+     */
+    collisionBoundary?: PrimitiveContentProps['collisionBoundary'];
+    /**
+     * Whether to hide the content when the trigger becomes fully occluded.
+     *
+     * @default false
+     */
+    hideWhenDetached?: PrimitiveContentProps['hideWhenDetached'];
+}
+interface DropdownMenuContentProps extends HTMLQdsProps<'div'>, DropdownMenuContentOptions {
+}
+
+declare type DropdownMenuDividerProps = HTMLQdsProps<'div'>;
+
+interface DropdownMenuItemOptions {
+    /**
+     * If `true`, the item will be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Event handler called when the user selects an item (via mouse or keyboard).
+     * Calling `event.preventDefault` in this handler will prevent the dropdown from closing when selecting that item.
+     */
+    onSelect?: (event: Event) => void;
+    /**
+     * Optional text used for typeahead purposes.
+     * By default the typeahead behavior will use the `.textContent` of the item.
+     * Use this when the content is complex, or you have non-textual content inside.
+     */
+    textValue?: string;
+    /**
+     * Optional icon to display on the left side of the item content.
+     */
+    icon?: ElementType<IconProps>;
+}
+interface DropdownMenuItemProps extends Omit<DropdownPrimitive.DropdownMenuItemProps, 'asChild' | keyof DropdownMenuItemOptions>, DropdownMenuItemOptions {
+}
+
+declare type DropdownTriggerComponent = ForwardRefComponent<'button'>;
+declare type DropdownMenuTriggerProps = PropsOf<DropdownTriggerComponent>;
+
+interface DropdownMenuRootProps {
+    children: ReactNode;
+    /**
+     * If `true` the dropdown menu will be open
+     */
+    isOpen?: boolean;
+    /**
+     * The open state of the submenu when it is initially rendered.
+     * Use when you do not need to control its open state.
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback invoked open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+declare function DropdownMenuRoot(props: DropdownMenuRootProps): JSX.Element;
+declare const DropdownMenu: typeof DropdownMenuRoot & {
+    Trigger: ForwardRefComponent<"button", {}>;
+    Content: react.ForwardRefExoticComponent<DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>>;
+    Divider: react.ForwardRefExoticComponent<Pick<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof react.HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>>;
+};
+
 declare const getSizeStyles$4: (theme: {
     mediaQueries: {
         readonly smUp: "@media(min-width: 480px)";
@@ -5407,6 +5524,21 @@ interface TextareaProps extends Omit<HTMLQdsProps<'textarea'>, OmittedProps$1>,
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
 
+declare type Id = number | string;
+interface ToastOptions {
+    /**
+     * Unique identifier for the toast (can be used for removing it prematurely). If a toast with this
+     * identifier already exists it will be removed before the new toast is added.
+     * @default a random unique id will be set and returned
+     */
+    id?: Id;
+}
+declare const toast: ((text: string, options?: ToastOptions) => Id) & {
+    error: (text: string, options?: ToastOptions) => Id;
+    remove: (id: Id) => void;
+    removeAll: () => void;
+};
+
 interface UseBreakpointOptions {
     /**
      * If `true` the initial value will be `base` instead of the current breakpoint.
@@ -5506,4 +5638,4 @@ declare function useStableId(fixedId?: string | null): string;
  */
 declare const useSafeLayoutEffect: typeof useLayoutEffect;
 
-export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };
+export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, Divider, DividerProps, DropdownMenu, DropdownMenuContentProps, DropdownMenuDividerProps, DropdownMenuItemProps, DropdownMenuRootProps, DropdownMenuTriggerProps, ForwardRefComponent, GlobalStyles, GlobeIcon, Heading, HeadingProps, HeartFilledIcon, HeartIcon, HelpCircleIcon, HintBox, HintBoxProps, HintBoxTitleProps, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconProps, ImageIcon, InputBase, InputBaseOptions, InputBaseProps, IntrinsicElement, Label, LabelProps, Link, LinkProps, ListFilterIcon, ListIcon, LoadingDots, LoadingDotsProps, LogOutIcon, MapIcon, MapPinIcon, MenuIcon, MessageCircleIcon, MinusIcon, MoreHorizontalIcon, MoreVerticalIcon, OwnProps, Paragraph, ParagraphProps, PenIcon, PlusIcon, PropsOf, QdsProvider, RadioCardProps, RadioGroup, RadioGroupLabelProps, RadioGroupProps, SearchIcon, Select, SelectBase, SelectBaseOptions, SelectOptionProps, SelectProps, SettingsIcon, ShareIcon, SlidersIcon, Spacer, SpacerProps, Stack, StackProps, StarFilledIcon, StarIcon, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UseImageProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useImage, useSafeLayoutEffect, useStableId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qasa/qds-ui",
-  "version": "0.10.0-next.2",
+  "version": "0.10.0-next.4",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -70,6 +70,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-testing-library": "^5.7.0",
+    "framer-motion": "^11.0.3",
     "husky": "^8.0.1",
     "jest": "^29.1.1",
     "jest-axe": "^6.0.0",
@@ -97,6 +98,7 @@
   "peerDependencies": {
     "@emotion/react": ">= 11.0.0",
     "@emotion/styled": ">= 11.0.0",
+    "framer-motion": ">=11.0.3",
     "react": ">=17.0.0",
     "react-dom": ">=17.0.0"
   },
@@ -105,6 +107,7 @@
   },
   "dependencies": {
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.0.6"
   }
 }