@eleven-labs/design-system 0.5.3

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Rohan Chandra
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/Readme.md

@@ -0,0 +1,35 @@
+# Welcome to the Eleven Labs Design System
+
+## What is a Design System ?
+
+An ecosystem, including graphic and visual elements but also typography, color codes and common rules of use.
+
+Fundamentals:
+- Must contain only presentation components
+- Does not contain business logic
+- Independent of the data and its loading
+- Documentations and examples of use
+
+## Why create a Design System ?
+
+Its role is to improve the UI and especially to have a graphic and functional consistency. It should be the reference and the source of truth for the brand.
+
+Subsequently, it should also allow to be faster in the developments and thus limit the expenses in the Design.
+
+
+## Install
+
+Using NPM:
+```
+npm install @eleven-labs/design-system
+
+```
+
+Using Yarn:
+```
+yarn add @eleven-labs/design-system
+```
+
+## Documentation of Design System
+
+To see the different components of the Design System please visit [website](https://eleven-labs.github.io/design-system/).

package/dist/components/Atoms/Button/Button.d.ts

@@ -0,0 +1,9 @@
+import { As, AsProps, SpacingSystemProps } from '../../../types';
+export declare const buttonVariant: readonly ["primary", "secondary"];
+export type ButtonVariantType = (typeof buttonVariant)[number];
+export type ButtonOptions = {
+    variant?: ButtonVariantType;
+    isChoiceChip?: boolean;
+};
+export type ButtonProps<T extends As = 'button'> = AsProps<T> & SpacingSystemProps & ButtonOptions;
+export declare const Button: import('../../../types').ComponentWithAs<"button", ButtonProps<"button">>;

package/dist/components/Atoms/Button/index.d.ts

@@ -0,0 +1 @@
+export * from './Button';

package/dist/components/Atoms/Icon/Icon.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ColorSystemProps, IconNameType, MarginSystemProps } from '../../../types';
+export type IconProps = Omit<React.SVGProps<SVGSVGElement>, 'color'> & MarginSystemProps & Pick<ColorSystemProps, 'color'> & {
+    name: IconNameType;
+    size?: string | number;
+};
+export declare const Icon: React.FC<IconProps>;

package/dist/components/Atoms/Icon/index.d.ts

@@ -0,0 +1 @@
+export * from './Icon';

package/dist/components/Atoms/Layout/Box/Box.d.ts

@@ -0,0 +1,3 @@
+import { As, AsProps, SystemProps } from '../../../../types';
+export type BoxProps<T extends As = 'div'> = AsProps<T> & SystemProps;
+export declare const Box: import('../../../../types').ComponentWithAs<"div", BoxProps<"div">>;

package/dist/components/Atoms/Layout/Box/index.d.ts

@@ -0,0 +1 @@
+export * from './Box';

package/dist/components/Atoms/Layout/Flex/Flex.d.ts

@@ -0,0 +1,6 @@
+import { BoxProps } from '../../../../components';
+import { As, DisplayType, TypeWithMediaQueriesType } from '../../../../types';
+export type FlexProps<T extends As = 'div'> = Omit<BoxProps<T>, 'display'> & {
+    display?: TypeWithMediaQueriesType<Extract<DisplayType, 'flex' | 'inline-flex'>>;
+};
+export declare const Flex: import('../../../../types').ComponentWithAs<"div", FlexProps<"div">>;

package/dist/components/Atoms/Layout/Flex/index.d.ts

@@ -0,0 +1 @@
+export * from './Flex';

package/dist/components/Atoms/Layout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Box';
+export * from './Flex';

package/dist/components/Atoms/Logo/Logo.d.ts

@@ -0,0 +1,6 @@
+import { AsProps, ColorSystemProps, LogoNameType, MarginSystemProps } from '../../../types';
+export type LogoProps = AsProps<'div'> & MarginSystemProps & Pick<ColorSystemProps, 'color'> & {
+    name: LogoNameType;
+    size?: string | number;
+};
+export declare const Logo: import('../../../types').ComponentWithAs<"div", LogoProps>;

package/dist/components/Atoms/Logo/index.d.ts

@@ -0,0 +1 @@
+export * from './Logo';

package/dist/components/Atoms/Svgs/AccessTime.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgAccessTime: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgAccessTime;

package/dist/components/Atoms/Svgs/ArrowBack.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgArrowBack: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgArrowBack;

package/dist/components/Atoms/Svgs/BlogLogo.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgBlogLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgBlogLogo;

package/dist/components/Atoms/Svgs/Calendar.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgCalendar: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgCalendar;

package/dist/components/Atoms/Svgs/Close.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgClose: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgClose;

package/dist/components/Atoms/Svgs/Facebook.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgFacebook: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgFacebook;

package/dist/components/Atoms/Svgs/Language.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgLanguage: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgLanguage;

package/dist/components/Atoms/Svgs/Link.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgLink: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgLink;

package/dist/components/Atoms/Svgs/Linkedin.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgLinkedin: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgLinkedin;

package/dist/components/Atoms/Svgs/Logo.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgLogo;

package/dist/components/Atoms/Svgs/Message.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgMessage: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgMessage;

package/dist/components/Atoms/Svgs/Person.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgPerson: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgPerson;

package/dist/components/Atoms/Svgs/Reddit.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgReddit: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgReddit;

package/dist/components/Atoms/Svgs/Rss.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgRss: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgRss;

package/dist/components/Atoms/Svgs/Search.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgSearch: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgSearch;

package/dist/components/Atoms/Svgs/Twitter.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgTwitter: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgTwitter;

package/dist/components/Atoms/Svgs/WebsiteLogo.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWebsiteLogo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWebsiteLogo;

package/dist/components/Atoms/Svgs/Welcometothejungle.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWelcometothejungle: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWelcometothejungle;

package/dist/components/Atoms/Svgs/index.d.ts

@@ -0,0 +1,18 @@
+export { default as AccessTime } from "./AccessTime";
+export { default as ArrowBack } from "./ArrowBack";
+export { default as BlogLogo } from "./BlogLogo";
+export { default as Calendar } from "./Calendar";
+export { default as Close } from "./Close";
+export { default as Facebook } from "./Facebook";
+export { default as Language } from "./Language";
+export { default as Link } from "./Link";
+export { default as Linkedin } from "./Linkedin";
+export { default as Logo } from "./Logo";
+export { default as Message } from "./Message";
+export { default as Person } from "./Person";
+export { default as Reddit } from "./Reddit";
+export { default as Rss } from "./Rss";
+export { default as Search } from "./Search";
+export { default as Twitter } from "./Twitter";
+export { default as WebsiteLogo } from "./WebsiteLogo";
+export { default as Welcometothejungle } from "./Welcometothejungle";

package/dist/components/Atoms/Typography/Heading/Heading.d.ts

@@ -0,0 +1,6 @@
+import { As, AsProps, ColorSystemProps, HeadingSizeType, SpacingSystemProps, TypographySystemProps } from '../../../../types';
+export interface HeadingOptions {
+    size?: HeadingSizeType;
+}
+export type HeadingProps<T extends As = 'h1'> = AsProps<T> & HeadingOptions & Omit<TypographySystemProps, 'textSize' | 'fontWeight'> & Pick<ColorSystemProps, 'color'> & SpacingSystemProps;
+export declare const Heading: import('../../../../types').ComponentWithAs<"h1", HeadingProps<"h1">>;

package/dist/components/Atoms/Typography/Heading/index.d.ts

@@ -0,0 +1 @@
+export * from './Heading';

package/dist/components/Atoms/Typography/Text/Text.d.ts

@@ -0,0 +1,6 @@
+import { As, AsProps, ColorSystemProps, HiddenSystemProps, SpacingSystemProps, TextSizeType, TypographySystemProps } from '../../../../types';
+export interface TextOptions {
+    size?: TextSizeType;
+}
+export type TextProps<T extends As = 'p'> = AsProps<T> & TextOptions & Omit<TypographySystemProps, 'textSize'> & Pick<ColorSystemProps, 'color'> & SpacingSystemProps & HiddenSystemProps;
+export declare const Text: import('../../../../types').ComponentWithAs<"p", TextProps<"p">>;

package/dist/components/Atoms/Typography/Text/index.d.ts

@@ -0,0 +1 @@
+export * from './Text';

package/dist/components/Atoms/Typography/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Heading';
+export * from './Text';

package/dist/components/Atoms/index.d.ts

@@ -0,0 +1,6 @@
+export * from './Layout';
+export * from './Typography';
+export * as Svgs from './Svgs';
+export * from './Icon';
+export * from './Logo';
+export * from './Button';

package/dist/components/Molecules/Link/Link.d.ts

@@ -0,0 +1,7 @@
+import { TextProps } from '../../../components';
+import { As, IconNameType } from '../../../types';
+export type LinkOptions = {
+    icon?: IconNameType;
+};
+export type LinkProps<T extends As = 'a'> = Omit<TextProps<T>, 'color' | 'underline' | 'fontWeight'> & LinkOptions;
+export declare const Link: import('../../../types').ComponentWithAs<"a", LinkProps<"a">>;

package/dist/components/Molecules/Link/index.d.ts

@@ -0,0 +1 @@
+export * from './Link';

package/dist/components/Molecules/SearchField/SearchField.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { BoxProps } from '../../../components';
+import { AsProps } from '../../../types';
+export type SearchFieldOptions = {
+    input: React.ComponentPropsWithRef<'input'>;
+    buttonSearch: AsProps<'button'>;
+    buttonClose?: AsProps<'button'>;
+};
+export type SearchFieldProps = BoxProps & SearchFieldOptions;
+export declare const SearchField: import('../../../types').ComponentWithAs<"div", SearchFieldProps>;

package/dist/components/Molecules/SearchField/index.d.ts

@@ -0,0 +1 @@
+export * from './SearchField';

package/dist/components/Molecules/TextHighlight/TextHighlight.d.ts

@@ -0,0 +1,8 @@
+import { TextOptions } from '../../../components';
+import { As, AsProps, HiddenSystemProps, MarginSystemProps } from '../../../types';
+export type TextHighlightOptions = {
+    text: string;
+    textQuery?: string;
+};
+export type TextHighlightProps<T extends As = 'p'> = AsProps<T> & MarginSystemProps & HiddenSystemProps & TextOptions & TextHighlightOptions;
+export declare const TextHighlight: import('../../../types').ComponentWithAs<"p", TextHighlightProps<"p">>;

package/dist/components/Molecules/TextHighlight/index.d.ts

@@ -0,0 +1 @@
+export * from './TextHighlight';

package/dist/components/Molecules/index.d.ts

@@ -0,0 +1,3 @@
+export * from './Link';
+export * from './SearchField';
+export * from './TextHighlight';

package/dist/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Atoms';
+export * from './Molecules';

package/dist/constants/cssProperties.d.ts

@@ -0,0 +1,195 @@
+export declare const cssProperties: {
+    display: {
+        block: {
+            value: string;
+        };
+        'inline-block': {
+            value: string;
+        };
+        inline: {
+            value: string;
+        };
+        flex: {
+            value: string;
+        };
+        'inline-flex': {
+            value: string;
+        };
+        grid: {
+            value: string;
+        };
+        'inline-grid': {
+            value: string;
+        };
+    };
+    'align-content': {
+        start: {
+            value: string;
+        };
+        end: {
+            value: string;
+        };
+        center: {
+            value: string;
+        };
+        between: {
+            value: string;
+        };
+        around: {
+            value: string;
+        };
+        evenly: {
+            value: string;
+        };
+        stretch: {
+            value: string;
+        };
+    };
+    'align-items': {
+        start: {
+            value: string;
+        };
+        end: {
+            value: string;
+        };
+        center: {
+            value: string;
+        };
+        baseline: {
+            value: string;
+        };
+        stretch: {
+            value: string;
+        };
+    };
+    'align-self': {
+        auto: {
+            value: string;
+        };
+        start: {
+            value: string;
+        };
+        end: {
+            value: string;
+        };
+        center: {
+            value: string;
+        };
+        stretch: {
+            value: string;
+        };
+        baseline: {
+            value: string;
+        };
+    };
+    'flex-basis': {
+        '0': {
+            value: string;
+        };
+        '25': {
+            value: string;
+        };
+        '33': {
+            value: string;
+        };
+        '50': {
+            value: string;
+        };
+        '75': {
+            value: string;
+        };
+        '100': {
+            value: string;
+        };
+        auto: {
+            value: string;
+        };
+    };
+    'flex-direction': {
+        column: {
+            value: string;
+        };
+        row: {
+            value: string;
+        };
+        'column-reverse': {
+            value: string;
+        };
+        'row-reverse': {
+            value: string;
+        };
+    };
+    'flex-wrap': {
+        wrap: {
+            value: string;
+        };
+        'wrap-reverse': {
+            value: string;
+        };
+        'no-wrap': {
+            value: string;
+        };
+    };
+    flex: {
+        '1': {
+            value: string;
+        };
+        auto: {
+            value: string;
+        };
+        initial: {
+            value: string;
+        };
+        none: {
+            value: string;
+        };
+    };
+    'justify-content': {
+        start: {
+            value: string;
+        };
+        end: {
+            value: string;
+        };
+        center: {
+            value: string;
+        };
+        between: {
+            value: string;
+        };
+        around: {
+            value: string;
+        };
+        evenly: {
+            value: string;
+        };
+        stretch: {
+            value: string;
+        };
+    };
+    'text-align': {
+        left: {
+            value: string;
+        };
+        center: {
+            value: string;
+        };
+        right: {
+            value: string;
+        };
+        justify: {
+            value: string;
+        };
+    };
+    'text-transform': {
+        capitalize: {
+            value: string;
+        };
+        uppercase: {
+            value: string;
+        };
+        lowercase: {
+            value: string;
+        };
+    };
+};

package/dist/constants/cssPropertyNameList.d.ts

@@ -0,0 +1,11 @@
+export declare const textAlignCssPropertyNameList: readonly ("center" | "left" | "right" | "justify")[];
+export declare const textTransformCssPropertyNameList: readonly ("capitalize" | "uppercase" | "lowercase")[];
+export declare const displayCssPropertyNameList: readonly ("block" | "inline-block" | "inline" | "flex" | "inline-flex" | "grid" | "inline-grid")[];
+export declare const alignContentCssPropertyNameList: readonly ("start" | "end" | "center" | "between" | "around" | "evenly" | "stretch")[];
+export declare const alignItemsCssPropertyNameList: readonly ("start" | "end" | "center" | "stretch" | "baseline")[];
+export declare const alignSelfCssPropertyNameList: readonly ("start" | "end" | "center" | "stretch" | "baseline" | "auto")[];
+export declare const flexBasisCssPropertyNameList: readonly ("auto" | "0" | "25" | "33" | "50" | "75" | "100")[];
+export declare const flexDirectionCssPropertyNameList: readonly ("column" | "row" | "column-reverse" | "row-reverse")[];
+export declare const flexWrapCssPropertyNameList: readonly ("wrap" | "wrap-reverse" | "no-wrap")[];
+export declare const flexCssPropertyNameList: readonly ("auto" | "none" | "1" | "initial")[];
+export declare const justifyContentCssPropertyNameList: readonly ("start" | "end" | "center" | "between" | "around" | "evenly" | "stretch")[];

package/dist/constants/index.d.ts

@@ -0,0 +1,7 @@
+export * from './tokenVariables';
+export * from './tokenNameList';
+export * from './cssProperties';
+export * from './cssPropertyNameList';
+export * from './systemProps';
+export * from './mediaQueriesList';
+export * from './matchMediaQueryList';

package/dist/constants/matchMediaQueryList.d.ts

@@ -0,0 +1,9 @@
+export declare const matchMediaQueryList: {
+    mobile: string;
+    aboveMobile: string;
+    tablet: string;
+    aboveTablet: string;
+    desktop: string;
+    aboveDesktop: string;
+    large: string;
+};

package/dist/constants/mediaQueriesList.d.ts

@@ -0,0 +1,2 @@
+export declare const mediaQueriesList: readonly ["xs", "sm", "md", "lg"];
+export type MediaQueryType = (typeof mediaQueriesList)[number];

package/dist/constants/systemProps/colorSystemProps.d.ts

@@ -0,0 +1,2 @@
+import type { ColorSystemProps } from '../../types';
+export declare const colorSystemProps: Record<keyof ColorSystemProps, readonly string[]>;

package/dist/constants/systemProps/flexBoxSystemProps.d.ts

@@ -0,0 +1,2 @@
+import type { FlexBoxSystemProps } from '../../types';
+export declare const flexBoxSystemProps: Record<keyof FlexBoxSystemProps, readonly string[]>;

package/dist/constants/systemProps/hiddenSystemProps.d.ts

@@ -0,0 +1,2 @@
+import type { HiddenSystemProps } from '../../types';
+export declare const hiddenSystemProps: Record<keyof HiddenSystemProps, readonly string[]>;

package/dist/constants/systemProps/index.d.ts

@@ -0,0 +1,7 @@
+export * from './colorSystemProps';
+export * from './spacingSystemProps';
+export * from './systemProps';
+export * from './typographySystemProps';
+export * from './flexBoxSystemProps';
+export * from './layoutSystemProps';
+export * from './hiddenSystemProps';

package/dist/constants/systemProps/layoutSystemProps.d.ts

@@ -0,0 +1,2 @@
+import type { LayoutSystemProps } from '../../types';
+export declare const layoutSystemProps: Record<keyof LayoutSystemProps, readonly string[]>;

package/dist/constants/systemProps/spacingSystemProps.d.ts

@@ -0,0 +1,4 @@
+import type { MarginSystemProps, PaddingSystemProps, SpacingSystemProps } from '../../types';
+export declare const paddingSystemProps: Record<keyof PaddingSystemProps, readonly string[]>;
+export declare const marginSystemProps: Record<keyof MarginSystemProps, readonly string[]>;
+export declare const spacingSystemProps: Record<keyof SpacingSystemProps, readonly string[]>;

package/dist/constants/systemProps/systemProps.d.ts

@@ -0,0 +1,2 @@
+import { SystemProps } from '../../types';
+export declare const systemProps: Record<keyof SystemProps, readonly string[]>;

package/dist/constants/systemProps/typographySystemProps.d.ts

@@ -0,0 +1,2 @@
+import type { TypographySystemProps } from '../../types';
+export declare const typographySystemProps: Record<keyof TypographySystemProps, readonly string[]>;

package/dist/constants/tokenNameList.d.ts

@@ -0,0 +1,10 @@
+import type { ColorType } from '../types';
+export declare const colorTokenNameList: readonly ColorType[];
+export declare const spacingTokenNameList: readonly ("0" | "xs" | "xxs-3" | "xxs-2" | "xxs" | "s" | "m" | "l" | "xl" | "xxl" | "xxl-2" | "xxl-3")[];
+export declare const widthTokenNameList: readonly ("full" | "screen")[];
+export declare const heightTokenNameList: readonly ("full" | "screen")[];
+export declare const fontWeightTokenNameList: readonly ("regular" | "medium" | "bold")[];
+export declare const iconTokenNameList: readonly ("access-time" | "arrow-back" | "calendar" | "close" | "facebook" | "language" | "link" | "linkedin" | "rss" | "message" | "person" | "search" | "twitter" | "welcometothejungle")[];
+export declare const logoTokenNameList: readonly ("website" | "blog")[];
+export declare const headingSizeTokenNameList: readonly ("s" | "m" | "l" | "xl")[];
+export declare const textSizeTokenNameList: readonly ("xs" | "s" | "m")[];