@qasa/qds-ui 0.8.1 → 0.9.0-next.1

package/dist/cjs/types/components/icon/create-icon.d.ts

@@ -2,452 +2,8 @@
  * This function is heavily inspired by the `createIcon` function from
  * Chakra UI (https://chakra-ui.com/).
  */
-import type { SVGAttributes } from 'react';
-import type { VariantProps } from '../../styles';
-import type { Theme } from '../../theme';
-declare const getSizeStyles: (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: {
-        /**
-         * The `svg`'s `viewBox` attribute
-         */
-        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; /**
-             * The size of the icon.
-             *
-             * @default 16
-             */
-            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;
-            success: string;
-            onBrandPrimary: string;
-            onBrandSecondary: string;
-            onBrandTertiary: string;
-        };
-        border: {
-            default: string;
-            defaultHover: string;
-            defaultSelected: string;
-            strong: string;
-            subtle: string;
-            negative: string;
-            warning: string;
-            success: 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;
-    }; /**
-     * The size of the icon.
-     *
-     * @default 16
-     */
-    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;
-            };
-        };
-    };
-}) => {
-    32: {
-        fontSize: string;
-    };
-    24: {
-        fontSize: string;
-    };
-    20: {
-        fontSize: string;
-    };
-    16: {
-        fontSize: string;
-    };
-    12: {
-        fontSize: string;
-    };
-};
-declare type IconSize = VariantProps<typeof getSizeStyles>;
-declare type IconColor = keyof Theme['colors']['icon'] | 'inherit';
-interface IconOptions {
-    /**
-     * The size of the icon.
-     *
-     * @default 16
-     */
-    size?: IconSize;
-    /**
-     * The color of the icon.
-     */
-    color?: IconColor;
-}
-declare type OmittedProps = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
-export interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps>, IconOptions {
-}
+/// <reference types="react" />
+import type { IconProps } from './icon.types';
 export interface CreateIconOptions {
     /**
      * The `svg`'s `viewBox` attribute
@@ -479,5 +35,7 @@ export interface CreateIconOptions {
      */
     displayName?: string;
 }
+/**
+ * Helper function to create an icon component.
+ */
 export declare const createIcon: (options: CreateIconOptions) => import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
-export {};

package/dist/cjs/types/components/icon/create-lucide-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { LucideIcon } from 'lucide-react';
+import type { IconProps } from './icon.types';
+export declare const createLucideIcon: (Icon: LucideIcon) => import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,20 @@
+import type { Theme } from '@emotion/react';
+import type { SVGAttributes } from 'react';
+declare type IconSize = 12 | 16 | 20 | 24 | 32;
+declare type IconColor = keyof Theme['colors']['icon'] | 'currentColor';
+export interface IconOptions {
+    /**
+     * The size of the icon.
+     *
+     * @default 16
+     */
+    size?: IconSize;
+    /**
+     * The color of the icon.
+     */
+    color?: IconColor;
+}
+declare type OmittedProps = 'color' | 'onClick' | 'width' | 'height' | 'fontSize';
+export interface IconProps extends Omit<SVGAttributes<SVGElement>, OmittedProps>, IconOptions {
+}
+export {};

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

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+export declare const AlertCircleIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const AlertTriangleIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowLeftIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowRightIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const BellOffIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const BellIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CalendarIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CameraIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const CheckIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const GlobeIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const HeartFilledIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const HeartIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const HelpCircleIcon: 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 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>>;
+export declare const MapPinIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const MapIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const MessageCircleIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const MinusIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const MoreHorizontalIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const MoreVerticalIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const PlusIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const SearchIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const SettingsIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const ShareIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const StarFilledIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const StarIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const TrashIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const UserIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export declare const XIcon: import("react").ForwardRefExoticComponent<import("./icon.types").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -1,2 +1,4 @@
 export * from './create-icon';
+export * from './create-lucide-icon';
 export * from './icons';
+export type { IconProps } from './icon.types';