@eleven-labs/design-system 0.5.3

package/dist/constants/tokenVariables.d.ts

@@ -0,0 +1,393 @@
+/**
+ * Do not edit directly
+ * Generated on Thu, 02 Mar 2023 12:57:56 GMT
+ */
+export declare const tokenVariables: {
+    asset: {
+        font: {
+            'WorkSans-Regular': {
+                value: string;
+                family: string;
+                weight: string;
+                extensions: string[];
+            };
+            'WorkSans-Medium': {
+                value: string;
+                family: string;
+                weight: string;
+                extensions: string[];
+            };
+            'WorkSans-Bold': {
+                value: string;
+                family: string;
+                weight: string;
+                extensions: string[];
+            };
+        };
+        icon: {
+            'access-time': {
+                value: string;
+            };
+            'arrow-back': {
+                value: string;
+            };
+            calendar: {
+                value: string;
+            };
+            close: {
+                value: string;
+            };
+            facebook: {
+                value: string;
+            };
+            language: {
+                value: string;
+            };
+            link: {
+                value: string;
+            };
+            linkedin: {
+                value: string;
+            };
+            rss: {
+                value: string;
+            };
+            message: {
+                value: string;
+            };
+            person: {
+                value: string;
+            };
+            search: {
+                value: string;
+            };
+            twitter: {
+                value: string;
+            };
+            welcometothejungle: {
+                value: string;
+            };
+        };
+        logo: {
+            website: {
+                value: string;
+            };
+            blog: {
+                value: string;
+            };
+        };
+    };
+    breakpoint: {
+        xs: {
+            value: string;
+            description: string;
+        };
+        sm: {
+            value: string;
+            description: string;
+        };
+        md: {
+            value: string;
+            description: string;
+        };
+        lg: {
+            value: string;
+            description: string;
+        };
+    };
+    color: {
+        primary: {
+            azure: {
+                value: string;
+            };
+            navy: {
+                value: string;
+            };
+        };
+        secondary: {
+            lavender: {
+                value: string;
+            };
+            amaranth: {
+                value: string;
+            };
+            yellow: {
+                value: string;
+            };
+        };
+        greyscale: {
+            'ultra-light-grey': {
+                value: string;
+            };
+            'light-grey': {
+                value: string;
+            };
+            grey: {
+                value: string;
+            };
+            'dark-grey': {
+                value: string;
+            };
+            'ultra-dark-grey': {
+                value: string;
+            };
+            black: {
+                value: string;
+            };
+            white: {
+                value: string;
+            };
+        };
+    };
+    height: {
+        full: {
+            value: string;
+        };
+        screen: {
+            value: string;
+        };
+    };
+    spacing: {
+        '0': {
+            value: string;
+        };
+        'xxs-3': {
+            value: string;
+        };
+        'xxs-2': {
+            value: string;
+        };
+        xxs: {
+            value: string;
+        };
+        xs: {
+            value: string;
+        };
+        s: {
+            value: string;
+        };
+        m: {
+            value: string;
+        };
+        l: {
+            value: string;
+        };
+        xl: {
+            value: string;
+        };
+        xxl: {
+            value: string;
+        };
+        'xxl-2': {
+            value: string;
+        };
+        'xxl-3': {
+            value: string;
+        };
+    };
+    'font-family': {
+        base: {
+            value: string;
+        };
+        'work-sans': {
+            value: string;
+        };
+    };
+    'font-size': {
+        xxs: {
+            value: string;
+        };
+        xs: {
+            value: string;
+        };
+        s: {
+            value: string;
+        };
+        m: {
+            value: string;
+        };
+        l: {
+            value: string;
+        };
+        xl: {
+            value: string;
+        };
+        xxl: {
+            value: string;
+        };
+        'xxl-2': {
+            value: string;
+        };
+        'xxl-3': {
+            value: string;
+        };
+    };
+    'font-weight': {
+        regular: {
+            value: string;
+        };
+        medium: {
+            value: string;
+        };
+        bold: {
+            value: string;
+        };
+    };
+    typography: {
+        heading: {
+            base: {
+                'line-height': {
+                    value: string;
+                };
+                'font-weight': {
+                    value: string;
+                };
+            };
+            xl: {
+                'font-weight': {
+                    value: string;
+                };
+            };
+        };
+        text: {
+            base: {
+                'line-height': {
+                    value: string;
+                };
+            };
+            xs: {
+                'line-height': {
+                    value: string;
+                };
+            };
+            m: {
+                'line-height': {
+                    value: string;
+                };
+            };
+        };
+    };
+    mobile: {
+        typography: {
+            heading: {
+                s: {
+                    'font-size': {
+                        value: string;
+                    };
+                };
+                m: {
+                    'font-size': {
+                        value: string;
+                    };
+                };
+                l: {
+                    'font-size': {
+                        value: string;
+                    };
+                };
+                xl: {
+                    'font-size': {
+                        value: string;
+                    };
+                };
+            };
+            text: {
+                xs: {
+                    'font-size': {
+                        value: string;
+                    };
+                    'icon-size': {
+                        value: string;
+                    };
+                };
+                s: {
+                    'font-size': {
+                        value: string;
+                    };
+                    'icon-size': {
+                        value: string;
+                    };
+                };
+                m: {
+                    'font-size': {
+                        value: string;
+                    };
+                    'icon-size': {
+                        value: string;
+                    };
+                };
+            };
+        };
+    };
+    desktop: {
+        typography: {
+            heading: {
+                s: {
+                    'font-size': {
+                        value: string;
+                    };
+                };
+                m: {
+                    'font-size': {
+                        value: string;
+                    };
+                };
+                l: {
+                    'font-size': {
+                        value: string;
+                    };
+                };
+                xl: {
+                    'font-size': {
+                        value: string;
+                    };
+                };
+            };
+            text: {
+                xs: {
+                    'font-size': {
+                        value: string;
+                    };
+                    'icon-size': {
+                        value: string;
+                    };
+                };
+                s: {
+                    'font-size': {
+                        value: string;
+                    };
+                    'icon-size': {
+                        value: string;
+                    };
+                };
+                m: {
+                    'font-size': {
+                        value: string;
+                    };
+                    'icon-size': {
+                        value: string;
+                    };
+                };
+            };
+        };
+    };
+    'line-height': {
+        base: {
+            value: string;
+        };
+        medium: {
+            value: string;
+        };
+        large: {
+            value: string;
+        };
+    };
+    width: {
+        full: {
+            value: string;
+        };
+        screen: {
+            value: string;
+        };
+    };
+};

package/dist/documentations/imgs/logo.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 117 21">
+    <g fill="#3767B6" fill-rule="evenodd" clip-path="url(#logo)" clip-rule="evenodd">
+    <path d="M16.956 8.038a.556.556 0 0 1-.78-.053.551.551 0 0 1 .053-.777l2.277-1.924a.556.556 0 0 1 .78.054c.2.228.176.578-.053.776l-2.277 1.924Zm-.091 3.702c.06-.39.257-.745.554-1.004l1.03-.886c1.285-1.117 3.46-4.692 4.743-6.905.367-.633-.262-1.376-.949-1.123-2.413.886-6.322 2.424-7.618 3.524-.02.015-.822.704-1.032.883a1.684 1.684 0 0 1-1.078.398c-3.48.041-4.507 1.398-4.507 1.398l.452.47s2.02-.291 3.162 1.032l-.963.82.581.672-.669.575 1.25 1.494.13-.16-.577-1.572 1.445 1.655.34-.29-.426-1.83s.723.78 1.152 1.274c1.143 1.32.525 3.295.525 3.295l.4.515s1.5-.811 2.055-4.235Z"/><path d="M10.99 19.915a9.533 9.533 0 0 1-8.256-3.938c-.094-.13.063-.288.195-.199 2.316 1.591 5.994 1.116 8.37-3.196C-.684 15.906.803.792 10.466.93c3.383.047 6.357 1.766 8.05 4.42l.033-.027a.567.567 0 0 1 .704-.04.554.554 0 0 1 .038.856l-.225.194a9.43 9.43 0 0 1 .93 4.321c-.115 4.928-4.066 8.997-9.006 9.262M10.466 0C4.694 0 0 4.678 0 10.43c0 5.75 4.694 10.428 10.465 10.428 5.77 0 10.465-4.678 10.465-10.429C20.93 4.68 16.236 0 10.466 0"/></g>
+    <path fill="#3767B6" d="M29.47 15V5.1h7.17v1.38h-5.565v2.85h4.35v1.35h-4.35v2.94h5.775V15h-7.38ZM40.341 4.125V12.9c0 .37.065.625.195.765s.345.21.645.21c.18 0 .33-.01.45-.03.13-.03.29-.08.48-.15l-.18 1.2c-.17.08-.365.14-.585.18-.22.05-.44.075-.66.075-.67 0-1.165-.17-1.485-.51-.31-.35-.465-.885-.465-1.605v-8.91h1.605Zm6.413 11.025c-.75 0-1.41-.155-1.98-.465a3.3 3.3 0 0 1-1.335-1.335c-.31-.59-.465-1.29-.465-2.1s.155-1.505.465-2.085c.32-.59.76-1.04 1.32-1.35.56-.31 1.195-.465 1.905-.465.73 0 1.35.15 1.86.45.51.3.9.71 1.17 1.23.27.52.405 1.11.405 1.77 0 .18-.005.35-.015.51-.01.16-.025.3-.045.42h-6.03V10.5h5.325l-.795.24c0-.68-.17-1.2-.51-1.56-.34-.37-.805-.555-1.395-.555-.43 0-.805.1-1.125.3-.32.2-.565.5-.735.9-.17.39-.255.87-.255 1.44 0 .56.09 1.035.27 1.425.18.39.435.685.765.885.33.2.72.3 1.17.3.5 0 .905-.095 1.215-.285.31-.19.555-.455.735-.795l1.275.6c-.18.36-.425.675-.735.945-.3.26-.66.46-1.08.6-.42.14-.88.21-1.38.21ZM56.841 7.5h1.68L55.536 15h-1.755l-3-7.5h1.755l2.13 6.105L56.841 7.5Zm6.305 7.65c-.75 0-1.41-.155-1.98-.465a3.3 3.3 0 0 1-1.335-1.335c-.31-.59-.465-1.29-.465-2.1s.155-1.505.465-2.085c.32-.59.76-1.04 1.32-1.35.56-.31 1.195-.465 1.905-.465.73 0 1.35.15 1.86.45.51.3.9.71 1.17 1.23.27.52.405 1.11.405 1.77 0 .18-.005.35-.015.51-.01.16-.025.3-.045.42H60.4V10.5h5.325l-.795.24c0-.68-.17-1.2-.51-1.56-.34-.37-.805-.555-1.395-.555-.43 0-.805.1-1.125.3-.32.2-.565.5-.735.9-.17.39-.255.87-.255 1.44 0 .56.09 1.035.27 1.425.18.39.435.685.765.885.33.2.72.3 1.17.3.5 0 .905-.095 1.215-.285.31-.19.555-.455.735-.795l1.275.6c-.18.36-.425.675-.735.945-.3.26-.66.46-1.08.6-.42.14-.88.21-1.38.21Zm5.371-.15V7.5h1.425l.106 1.95-.21-.21c.14-.43.34-.785.6-1.065.27-.29.584-.5.944-.63.37-.13.76-.195 1.17-.195.53 0 1.005.105 1.425.315.43.2.77.505 1.02.915.25.41.376.93.376 1.56V15h-1.606v-4.365c0-.74-.154-1.25-.465-1.53-.3-.29-.68-.435-1.14-.435-.33 0-.65.08-.96.24-.31.15-.57.395-.78.735-.2.34-.3.795-.3 1.365V15h-1.605Zm15.996-1.38h5.46V15h-7.066V5.1h1.606v8.52Zm11.484-3.435c0-.5-.14-.885-.42-1.155-.27-.28-.645-.42-1.125-.42-.45 0-.835.105-1.155.315-.32.21-.555.55-.705 1.02l-1.35-.57a2.7 2.7 0 0 1 1.11-1.47c.56-.37 1.28-.555 2.16-.555.6 0 1.13.1 1.59.3.46.19.82.48 1.08.87.27.39.405.89.405 1.5v3.345c0 .37.185.555.555.555.18 0 .355-.025.525-.075l-.09 1.11c-.23.11-.52.165-.87.165-.32 0-.61-.055-.87-.165-.25-.12-.45-.295-.6-.525-.14-.24-.21-.535-.21-.885v-.105l.33-.015c-.09.39-.275.715-.555.975-.28.25-.605.44-.975.57-.37.12-.745.18-1.125.18-.47 0-.895-.075-1.275-.225a2.003 2.003 0 0 1-.885-.675c-.21-.31-.315-.69-.315-1.14 0-.56.18-1.02.54-1.38.37-.36.89-.605 1.56-.735l2.91-.57-.015 1.125-2.115.435c-.42.08-.735.195-.945.345-.21.15-.315.37-.315.66 0 .28.105.505.315.675.22.16.51.24.87.24.25 0 .49-.03.72-.09.24-.06.455-.155.645-.285.19-.14.335-.315.435-.525.11-.22.165-.48.165-.78v-2.04Zm8.24 4.965c-.44 0-.845-.085-1.215-.255a2.646 2.646 0 0 1-.915-.705 3.142 3.142 0 0 1-.555-1.035l.195-.255-.12 2.1h-1.41V4.125h1.605V9.39l-.18-.255c.19-.52.515-.945.975-1.275.46-.34 1.015-.51 1.665-.51.6 0 1.15.155 1.65.465.51.31.91.755 1.2 1.335.29.58.435 1.285.435 2.115 0 .81-.15 1.505-.45 2.085-.29.58-.69 1.025-1.2 1.335-.5.31-1.06.465-1.68.465Zm-.345-1.29c.65 0 1.155-.23 1.515-.69.37-.47.555-1.11.555-1.92 0-.81-.18-1.445-.54-1.905-.36-.46-.865-.69-1.515-.69-.42 0-.785.11-1.095.33-.31.21-.555.51-.735.9-.17.39-.255.855-.255 1.395 0 .53.085.99.255 1.38.17.38.41.675.72.885.32.21.685.315 1.095.315Zm8.579 1.29a4.79 4.79 0 0 1-2.055-.435c-.62-.29-1.11-.7-1.47-1.23l1.11-.96c.22.41.535.74.945.99.42.24.92.36 1.5.36.46 0 .825-.08 1.095-.24.27-.16.405-.385.405-.675a.704.704 0 0 0-.195-.495c-.12-.15-.355-.265-.705-.345l-1.575-.33c-.8-.16-1.37-.415-1.71-.765-.34-.36-.51-.815-.51-1.365 0-.41.12-.79.36-1.14.24-.35.59-.63 1.05-.84.47-.22 1.03-.33 1.68-.33.75 0 1.39.135 1.92.405.53.26.935.635 1.215 1.125l-1.11.93c-.19-.4-.47-.695-.84-.885-.37-.2-.755-.3-1.155-.3-.32 0-.595.04-.825.12-.23.08-.405.19-.525.33a.736.736 0 0 0-.18.495c0 .2.075.375.225.525.15.15.42.265.81.345l1.71.36c.72.14 1.225.38 1.515.72.3.33.45.735.45 1.215 0 .48-.125.905-.375 1.275-.25.36-.61.64-1.08.84-.47.2-1.03.3-1.68.3Z"/>
+    <defs>
+        <clipPath id="logo"><path fill="#3767B6" d="M0 0h24v21H0z"/></clipPath>
+    </defs>
+</svg>

package/dist/helpers/stringHelper.d.ts

@@ -0,0 +1,3 @@
+export declare const kebabCase: (str: string) => string;
+export declare const pascalCase: (str: string) => string;
+export declare const capitalize: (str: string) => string;

package/dist/helpers/systemPropsHelper/classNameWithModifier.d.ts

@@ -0,0 +1,5 @@
+export declare const classNameWithModifier: <TPropValue extends string | number | boolean>(options: {
+    className: string;
+    defaultModifier: string;
+    propValue?: TPropValue | undefined;
+}) => string | undefined;

package/dist/helpers/systemPropsHelper/classNamesWithModifiers.d.ts

@@ -0,0 +1,6 @@
+import { TypeWithModifierType } from '../../types';
+export declare const classNamesWithModifiers: <TModifierType extends string, TPropValue extends string | number | boolean>(options: {
+    className: string;
+    defaultModifier?: string | undefined;
+    propValue?: TPropValue | Partial<Record<TModifierType, TPropValue>> | undefined;
+}) => string[];

package/dist/helpers/systemPropsHelper/colorSystemClassName.d.ts

@@ -0,0 +1,2 @@
+import type { ColorSystemProps } from '../../types';
+export declare const colorSystemClassName: <TProps extends ColorSystemProps>(props: TProps) => string;

package/dist/helpers/systemPropsHelper/flexBoxSystemClassName.d.ts

@@ -0,0 +1,2 @@
+import type { FlexBoxSystemProps } from '../../types';
+export declare const flexBoxSystemClassName: <TProps extends FlexBoxSystemProps>(props: TProps) => string;

package/dist/helpers/systemPropsHelper/forwardRef.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { As, ComponentWithAs, PropsOf, RightJoinProps } from '../../types';
+export declare function forwardRef<Props extends object, Component extends As>(component: React.ForwardRefRenderFunction<any, // eslint-disable-line @typescript-eslint/no-explicit-any
+// eslint-disable-line @typescript-eslint/no-explicit-any
+RightJoinProps<PropsOf<Component>, Props> & {
+    as?: As;
+}>): ComponentWithAs<Component, Props>;

package/dist/helpers/systemPropsHelper/hiddenSystemClassName.d.ts

@@ -0,0 +1,2 @@
+import { HiddenSystemProps } from '../../types';
+export declare const hiddenSystemClassName: <TProps extends HiddenSystemProps>(props: TProps) => string;

package/dist/helpers/systemPropsHelper/index.d.ts

@@ -0,0 +1,11 @@
+export * from './classNameWithModifier';
+export * from './classNamesWithModifiers';
+export * from './colorSystemClassName';
+export * from './flexBoxSystemClassName';
+export * from './layoutSystemClassName';
+export * from './spacingSystemClassName';
+export * from './typographySystemClassName';
+export * from './hiddenSystemClassName';
+export * from './omitSystemProps';
+export * from './systemClassName';
+export * from './forwardRef';

package/dist/helpers/systemPropsHelper/layoutSystemClassName.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutSystemProps } from '../../types';
+export declare const layoutSystemClassName: <TProps extends LayoutSystemProps>(props: TProps) => string;

package/dist/helpers/systemPropsHelper/omitSystemProps.d.ts

@@ -0,0 +1,4 @@
+export declare const omitSystemProps: <TProps extends Record<string, unknown>>(options: {
+    props: TProps;
+    systemPropNames: string[];
+}) => Record<string, unknown>;

package/dist/helpers/systemPropsHelper/spacingSystemClassName.d.ts

@@ -0,0 +1,2 @@
+import type { SpacingSystemProps } from '../../types';
+export declare const spacingSystemClassName: <TProps extends SpacingSystemProps>(props: TProps) => string;

package/dist/helpers/systemPropsHelper/systemClassName.d.ts

@@ -0,0 +1,2 @@
+import { SystemProps } from '../../types';
+export declare const systemClassName: <TProps extends SystemProps = SystemProps>(props: TProps) => string;

package/dist/helpers/systemPropsHelper/typographySystemClassName.d.ts

@@ -0,0 +1,2 @@
+import { TypographySystemProps } from '../../types';
+export declare const typographySystemClassName: <TProps extends TypographySystemProps>({ textAlign, ...props }: TProps) => string;

package/dist/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useLayoutEffect';
+export * from './useMediaQuery';

package/dist/hooks/useLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const useLayoutEffect: typeof React.useLayoutEffect;

package/dist/hooks/useMediaQuery.d.ts

@@ -0,0 +1,2 @@
+import type { MatchBreakpointsType } from '../types';
+export declare const useMediaQuery: (query: MatchBreakpointsType) => boolean;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components';
+export * from './hooks';
+export * from './types';
+export * from './helpers/systemPropsHelper/forwardRef';