@qasa/qds-ui 0.1.0

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

@@ -0,0 +1,409 @@
+/**
+ * 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: {
+        core: {
+            black: string;
+            white: string;
+            gray90: string;
+            gray80: string;
+            gray70: string;
+            gray60: string;
+            gray50: string;
+            gray40: string;
+            gray30: string;
+            gray20: string;
+            gray10: string;
+            brand90: string;
+            brand80: string;
+            brand70: string;
+            brand60: string;
+            brand50: string;
+            brand40: string;
+            brand30: string;
+            brand20: string;
+            brand10: 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;
+            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;
+            onColor: string;
+        };
+        icon: {
+            default: string;
+            strong: string;
+            subtle: string;
+            disabled: string;
+            negative: string;
+            warning: string;
+            success: string;
+            onColor: 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;
+        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: {
+            lg: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: string;
+            };
+            md: {
+                fontFamily: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                letterSpacing: 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; /**
+                 * If the `svg` has a single path, simply copy the path's `d` attribute
+                 */
+                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;
+            };
+        };
+        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 {
+}
+export interface CreateIconOptions {
+    /**
+     * The `svg`'s `viewBox` attribute
+     */
+    viewBox: string;
+    /**
+     * If the `svg` has a single path, simply copy the path's `d` attribute
+     */
+    d?: string;
+    /**
+     * The `svg` path or group element
+     *
+     * @example
+     * ```jsx
+     *  createIcon({
+     *    viewBox: '0 0 512 512',
+     *    path: [
+     *      <circle cx="50" cy="50" r="50" />,
+     *      <path d="M10 10" />,
+     *    ],
+     *    displayName: 'ExampleIcon',
+     * })
+     * ```
+     */
+    path?: React.ReactElement | React.ReactElement[];
+    /**
+     * The display name of the icon. Useful for debugging
+     * and internal use.
+     */
+    displayName?: string;
+}
+export declare const createIcon: (options: CreateIconOptions) => import("react").ForwardRefExoticComponent<IconProps & import("react").RefAttributes<SVGSVGElement>>;
+export {};

package/dist/esm/types/components/icon/icons/arrow-down.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ArrowDownIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/arrow-left.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ArrowLeftIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/arrow-right.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ArrowRightIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/arrow-up.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ArrowUpIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/bell-slash.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const BellSlashIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const BellIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CalendarIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const CheckIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/chevron-down.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ChevronDownIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/chevron-left.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ChevronLeftIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/chevron-right.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ChevronRightIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/chevron-up.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ChevronUpIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/ellipsis-vertical.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EllipsisVerticalIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const EllipsisIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/heart-filled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HeartFilledIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const HeartIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ImageIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,27 @@
+export { ArrowDownIcon } from './arrow-down';
+export { ArrowLeftIcon } from './arrow-left';
+export { ArrowRightIcon } from './arrow-right';
+export { ArrowUpIcon } from './arrow-up';
+export { BellSlashIcon } from './bell-slash';
+export { BellIcon } from './bell';
+export { CalendarIcon } from './calendar';
+export { CheckIcon } from './check';
+export { ChevronDownIcon } from './chevron-down';
+export { ChevronLeftIcon } from './chevron-left';
+export { ChevronRightIcon } from './chevron-right';
+export { ChevronUpIcon } from './chevron-up';
+export { EllipsisVerticalIcon } from './ellipsis-vertical';
+export { EllipsisIcon } from './ellipsis';
+export { HeartFilledIcon } from './heart-filled';
+export { HeartIcon } from './heart';
+export { ImageIcon } from './image';
+export { LocationDotIcon } from './location-dot';
+export { MapIcon } from './map';
+export { PlusIcon } from './plus';
+export { SearchIcon } from './search';
+export { SettingsIcon } from './settings';
+export { StarFilledIcon } from './star-filled';
+export { StarIcon } from './star';
+export { TrashIcon } from './trash';
+export { UserIcon } from './user';
+export { XmarkIcon } from './xmark';

package/dist/esm/types/components/icon/icons/location-dot.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const LocationDotIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const MapIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const PlusIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SearchIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const SettingsIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

package/dist/esm/types/components/icon/icons/star-filled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StarFilledIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StarIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TrashIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const UserIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const XmarkIcon: import("react").ForwardRefExoticComponent<import("../create-icon").IconProps & import("react").RefAttributes<SVGSVGElement>>;

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

@@ -0,0 +1,2 @@
+export * from './create-icon';
+export * from './icons';