@qasa/qds-ui 0.11.0 → 0.12.0

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

@@ -17,7 +17,8 @@ interface AvatarOptions {
      */
     src?: string;
     /**
-     * Name of the user. Important for accessibility.
+     * Name of the user. Used to generate the initials
+     * if no image is provided, but also for accessibility.
      */
     name?: string;
     /**

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

@@ -108,6 +108,7 @@ export declare const getSizeStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -565,6 +566,7 @@ export declare const getVariantStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

package/dist/esm/types/components/icon/icons.d.ts

@@ -23,6 +23,7 @@ export declare const HelpCircleIcon: import("react").ForwardRefExoticComponent<i
 export declare const HistoryIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const HomeIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const ImageIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const InfoIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const ListIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const ListFilterIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
 export declare const LogOutIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon-button/icon-button-styles.d.ts

@@ -107,6 +107,7 @@ export declare const getSizeStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -525,6 +526,7 @@ export declare const getVariantStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

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

@@ -111,6 +111,7 @@ declare const getSizeStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

package/dist/esm/types/components/loading-dots/loading-dots.d.ts

@@ -111,6 +111,7 @@ declare const getSizeStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

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

@@ -111,6 +111,7 @@ declare const getSizeStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

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

@@ -108,6 +108,7 @@ export declare const getVariantStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

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

@@ -1,6 +1,5 @@
 export * from './use-breakpoint';
 export * from './use-breakpoint-value';
-export * from './use-image';
 export * from './use-form-field';
 export * from './use-stable-id';
 export * from './use-safe-layout-effect';

package/dist/esm/types/styles/common-styles.d.ts

@@ -107,6 +107,7 @@ export declare const getFormFieldBaseStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

package/dist/esm/types/theme/foundations/colors.d.ts

@@ -60,6 +60,7 @@ export declare const colors: {
         yellow30: string;
         yellow20: string;
         yellow10: string;
+        blackAlpha5: string;
         blackAlpha20: string;
     };
     bg: {

package/dist/esm/types/theme/foundations/index.d.ts

@@ -112,6 +112,7 @@ export declare const foundations: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

package/dist/esm/types/theme/theme-tools.d.ts

@@ -264,6 +264,7 @@ export declare const overrideTheme: (overrides: ThemeOverrides) => {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

package/dist/esm/types/theme/theme.d.ts

@@ -107,6 +107,7 @@ export declare const theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {

package/dist/index.d.ts

@@ -121,6 +121,7 @@ declare const theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -688,6 +689,7 @@ declare const overrideTheme: (overrides: ThemeOverrides) => {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -875,7 +877,8 @@ interface AvatarOptions {
      */
     src?: string;
     /**
-     * Name of the user. Important for accessibility.
+     * Name of the user. Used to generate the initials
+     * if no image is provided, but also for accessibility.
      */
     name?: string;
     /**
@@ -1010,6 +1013,7 @@ declare const HelpCircleIcon: react.ForwardRefExoticComponent<IconProps & react.
 declare const HistoryIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const HomeIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const ImageIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
+declare const InfoIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const ListIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const ListFilterIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
 declare const LogOutIcon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<SVGSVGElement>>;
@@ -1164,6 +1168,7 @@ declare const getFormFieldBaseStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -1615,6 +1620,7 @@ declare const getSizeStyles$4: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -2072,6 +2078,7 @@ declare const getVariantStyles$1: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -2836,6 +2843,7 @@ declare const getSizeStyles$3: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -3254,6 +3262,7 @@ declare const getVariantStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -3791,6 +3800,7 @@ declare const getSizeStyles$2: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -4245,6 +4255,7 @@ declare const getSizeStyles$1: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -4665,6 +4676,7 @@ declare const getSizeStyles: (theme: {
             yellow30: string;
             yellow20: string;
             yellow10: string;
+            blackAlpha5: string;
             blackAlpha20: string;
         };
         bg: {
@@ -5341,15 +5353,6 @@ type UseBreakpointValueProps<T> = BreakpointsConfig<T>;
  */
 declare function useBreakpointValue<T>(values: UseBreakpointValueProps<T>, options?: UseBreakpointOptions): T;
 
-type LoadingStatus = 'loading' | 'loaded' | 'error' | 'pending';
-interface UseImageProps {
-    src?: string;
-    loading?: HTMLQdsProps<'img'>['loading'];
-}
-declare const useImage: ({ src, loading }: UseImageProps) => {
-    loadingStatus: LoadingStatus;
-};
-
 type FormFieldElement = 'input' | 'select' | 'textarea';
 type PropGetter<T extends ElementType = LegitimateAny> = (props?: HTMLQdsProps<T>) => Record<string, unknown>;
 interface FormFieldOptions {
@@ -5411,4 +5414,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, Checkbox, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, DisplayText, DisplayTextProps, 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, Switch, 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 };
+export { AlertCircleIcon, AlertTriangleIcon, ArrowDownIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, Avatar, AvatarProps, BellIcon, BellOffIcon, BookmarkIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CheckCircleIcon, CheckIcon, Checkbox, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CreateIconOptions, DisplayText, DisplayTextProps, 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, InfoIcon, 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, Switch, TextField, TextFieldProps, Textarea, TextareaBase, TextareaBaseOptions, TextareaBaseProps, TextareaProps, Theme, ThemeOverrides, TrashIcon, UseBreakpointOptions, UseBreakpointValueProps, UseFormFieldProps, UserIcon, VariantProps, XCircleIcon, XIcon, createIcon, createLucideIcon, createStyle, createStyleVariants, getFormFieldBaseStyles, overrideTheme, pxToRem, theme, toast, useBreakpoint, useBreakpointValue, useFormField, useSafeLayoutEffect, useStableId };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qasa/qds-ui",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "license": "UNLICENSED",
   "repository": {
     "type": "git",
@@ -68,8 +68,8 @@
     "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-testing-library": "^6.2.0",
-    "jest": "^29.1.1",
     "framer-motion": "^11.0.3",
+    "jest": "^29.1.1",
     "jest-axe": "^6.0.0",
     "jest-environment-jsdom": "^29.1.1",
     "jest-matchmedia-mock": "^1.1.0",
@@ -101,6 +101,7 @@
     "node": ">=20"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-radio-group": "^1.1.3",

package/dist/cjs/types/hooks/use-image.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLQdsProps } from '../types';
-type LoadingStatus = 'loading' | 'loaded' | 'error' | 'pending';
-export interface UseImageProps {
-    src?: string;
-    loading?: HTMLQdsProps<'img'>['loading'];
-}
-export declare const useImage: ({ src, loading }: UseImageProps) => {
-    loadingStatus: LoadingStatus;
-};
-export {};

package/dist/esm/types/hooks/use-image.d.ts

@@ -1,10 +0,0 @@
-import type { HTMLQdsProps } from '../types';
-type LoadingStatus = 'loading' | 'loaded' | 'error' | 'pending';
-export interface UseImageProps {
-    src?: string;
-    loading?: HTMLQdsProps<'img'>['loading'];
-}
-export declare const useImage: ({ src, loading }: UseImageProps) => {
-    loadingStatus: LoadingStatus;
-};
-export {};