@x4b/design-system 28.4.0

package/README.md

@@ -0,0 +1,30 @@
+# X4B design system
+
+X4B design system is a collection of reusable components for building X4B web applications.
+
+## Getting Started
+
+We use Storybook as a playground for developing components. It's also a fantastic tool for documentation.
+Run Storybook:
+
+```bash
+pnpm storybook
+```
+
+Run unit tests:
+
+```bash
+pnpm test
+```
+
+Run lint:
+
+```bash
+pnpm lint
+```
+
+Run type checks:
+
+```bash
+pnpm typecheck
+```

package/dist/AnchorLink/AnchorLink.d.ts

@@ -0,0 +1,7 @@
+declare type AnchorLinkProps<Type extends React.ElementType> = {
+    children: React.ReactNode;
+    size?: 'sm' | 'base' | 'lg' | 'xl';
+    as?: Type;
+};
+declare function AnchorLink<Type extends React.ElementType = 'a'>({ as, children, size, ...props }: AnchorLinkProps<Type> & Omit<React.ComponentPropsWithoutRef<Type>, keyof AnchorLinkProps<Type>>): JSX.Element;
+export default AnchorLink;

package/dist/AnchorLink/index.d.ts

@@ -0,0 +1 @@
+export { default } from './AnchorLink';

package/dist/BlurrableImage/BlurrableImage.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function BlurrableImage({ img, blurDataUrl, ...rest }: {
+    img: JSX.Element & React.ReactElement<React.ImgHTMLAttributes<HTMLImageElement>>;
+    blurDataUrl?: string;
+} & React.HTMLAttributes<HTMLDivElement>): JSX.Element;
+export default BlurrableImage;

package/dist/BlurrableImage/index.d.ts

@@ -0,0 +1 @@
+export { default } from './BlurrableImage';

package/dist/Button/Button.d.ts

@@ -0,0 +1,16 @@
+import React, { ElementType } from 'react';
+declare type ButtonProps<T extends ElementType> = {
+    children: React.ReactNode;
+    as?: T;
+    variant?: 'solid' | 'outline' | 'ghost' | 'link';
+    colorScheme?: 'primary' | 'accent' | 'gray' | 'red' | 'green';
+    size?: 'sm' | 'base' | 'lg' | 'xl';
+    isLoading?: boolean;
+    loadingLabel?: string;
+    compact?: boolean;
+    rounded?: boolean;
+    ref?: React.Ref<T>;
+};
+declare type ButtonComponent = <T extends ElementType = 'button'>(props: ButtonProps<T> & Omit<React.ComponentPropsWithRef<T>, keyof ButtonProps<T>>) => React.ReactElement | null;
+declare const Button: ButtonComponent;
+export default Button;

package/dist/Button/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Button';

package/dist/Icons/RightArrow.d.ts

@@ -0,0 +1,2 @@
+declare function RightArrow(props: React.HTMLAttributes<HTMLOrSVGElement>): JSX.Element;
+export default RightArrow;

package/dist/Icons/index.d.ts

@@ -0,0 +1 @@
+export { default as RightArrow } from './RightArrow';

package/dist/Images/Images.d.ts

@@ -0,0 +1,22 @@
+import type { TransformerOption } from '@cld-apis/types';
+export declare type ImageBuilder = {
+    (transformations?: TransformerOption): string;
+    alt: string;
+    id: string;
+};
+export declare function getImageBuilder(id: string, alt?: string): ImageBuilder;
+export declare function getImgProps(imageBuilder: ImageBuilder, { widths, sizes, transformations, }: {
+    widths: Array<number>;
+    sizes: Array<string>;
+    transformations?: TransformerOption;
+}): {
+    alt: string;
+    src: string;
+    srcSet: string;
+    sizes: string;
+};
+export declare const createImages: <ImageType extends Record<string, {
+    id: string;
+    prefix: string;
+    alt: string;
+}>>(images: ImageType) => { [Name in keyof ImageType]: ImageBuilder; };

package/dist/Images/index.d.ts

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

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,4 @@
+declare function Spinner({ label, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+    label?: string;
+}): JSX.Element;
+export default Spinner;

package/dist/Spinner/index.d.ts

@@ -0,0 +1 @@
+export { default } from './Spinner';

package/dist/constants.d.ts

@@ -0,0 +1,130 @@
+export declare const FONT_FAMILY = "var(--x4b-font-family, 'Open Sans', sans-serif)";
+export declare const COLORS: {
+    white: string;
+    black: string;
+    primary: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    accent: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    yellow: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    green: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    red: {
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+    gray: {
+        50: string;
+        100: string;
+        200: string;
+        300: string;
+        400: string;
+        500: string;
+        600: string;
+        700: string;
+        800: string;
+        900: string;
+    };
+};
+export declare const SPACES: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+    8: string;
+    9: string;
+    10: string;
+    11: string;
+    12: string;
+    13: string;
+    14: string;
+    15: string;
+};
+export declare const BREAKPOINTS: {
+    phone: number;
+    tablet: number;
+    laptop: number;
+};
+export declare const QUERIES: {
+    phoneAndSmaller: string;
+    tabletAndSmaller: string;
+    laptopAndSmaller: string;
+};
+export declare const TEXT: {
+    xs: string;
+    sm: string;
+    base: string;
+    lg: string;
+    xl: string;
+    '2xl': string;
+    '3xl': string;
+    '4xl': string;
+    '5xl': string;
+    '6xl': string;
+};
+export declare const WEIGHTS: {
+    light: number;
+    normal: number;
+    medium: number;
+    bold: number;
+};
+export declare const BORDERS: {
+    rounded: {
+        none: string;
+        sm: string;
+        default: string;
+        md: string;
+        lg: string;
+        xl: string;
+    };
+};