UI Component docs (Display & Feedback components) (#2453)

* ui docs

* UI docs for display components

* docs for display and feedback components

* minor edits

* minor changes

* cleaned up code

* Move telemetry

* Revised Feedback/Display UI docs & added input UI docs

* Docs for Input components

* updated icons

* docs for input/components

* minor edits based on feedback

* add css to ui components

* Fixed spacing issue in button groups

---------

Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>

docs/src/theme/icons.js

@@ -38,5 +38,24 @@ export {
   TbBrandGraphql,
   TbApi,
   TbUsers,
+  TbCheck,
+  TbPill,
+  TbAppWindow,
+  TbTooltip,
+  TbTag,
+  TbLayoutList,
+  TbAddressBook,
+  TbLoader2,
+  TbInputSearch,
+  TbIcons,
+  TbSquareRoundedPlusFilled,
+  TbLayoutGrid,
+  TbColorFilter,
+  TbTextSize,
+  TbComponents,
+  TbCheckbox,
+  TbColorPicker,
+  TbCircleDot,
+  TbUpload,
   TbVariable
 } from "react-icons/tb";

docs/src/ui/SandpackEditor.js

@@ -1,10 +1,11 @@
 import { SandpackProvider, SandpackLayout, SandpackCodeEditor, SandpackPreview } from "@codesandbox/sandpack-react";
 import uiModule from "!!raw-loader!@site/src/ui/generated/index.js";
+import uiComponentsCSS from '!!raw-loader!@site/src/ui/uiComponents.css'
 
 export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
   const fakePackagesJson = availableComponentPaths.reduce((acc, componentPath, index) => {
     acc[`/node_modules/${componentPath}/package.json`] = {
-      hidden: false,
+      hidden: true,
       code: JSON.stringify({
         name: componentPath,
         main: "./index.js",
@@ -15,7 +16,7 @@ export const SandpackEditor = ({ availableComponentPaths, componentCode}) => {
 
   const fakeIndexesJs = availableComponentPaths.reduce((acc, componentPath, index) => {
     acc[`/node_modules/${componentPath}/index.js`] = {
-      hidden: false,
+      hidden: true,
       code: uiModule,
     };
     return acc;
@@ -46,6 +47,10 @@ root.render(
 import { lightTheme, darkTheme } from "${availableComponentPaths[0]}";
 import { MyComponent } from "./MyComponent.tsx";
 
+import './uiComponents.css'
+
+console.log("lightTheme", lightTheme);
+
 export default function App() {
 return (<ThemeProvider theme={lightTheme}>
  <MyComponent />
@@ -55,6 +60,10 @@ return (<ThemeProvider theme={lightTheme}>
         "/MyComponent.tsx": {
           code: componentCode,
         },
+        "/uiComponents.css": {
+          code: uiComponentsCSS,
+          hidden: true,
+        },
         ...fakePackagesJson,
         ...fakeIndexesJs,
       }}
@@ -65,19 +74,31 @@ return (<ThemeProvider theme={lightTheme}>
           "react-dom": "latest",
           "react-scripts": "^5.0.0",
           "@emotion/react": "^11.10.6",
-          '@emotion/styled': "latest",
-          '@tabler/icons-react': "latest",
-          'hex-rgb': "latest"
+          "@emotion/styled": "latest",
+          "@tabler/icons-react": "latest",
+          "hex-rgb": "latest",
+          "framer-motion": "latest",
+          uuid: "latest",
+          "react-tooltip": "latest",
+          "react-router-dom": "latest",
+          "@sniptt/guards": "latest",
+          "react-router": "latest",
+          "@apollo/client": "latest",
+          graphql: "latest",
+          "react-textarea-autosize": "latest",
+          "react-hotkeys-hook": "latest",
+          recoil: "latest",
+          "@floating-ui/react": "latest",
+          "ts-key-enum": "latest",
+          "deep-equal": "latest",
+          "lodash.debounce": "latest",
+          "react-loading-skeleton": "latest",
         },
       }}
     >
-     <SandpackLayout>
-        <SandpackCodeEditor
-          style={{ minWidth: "100%", height: "auto" }}
-        />
-        <SandpackPreview 
-          style={{ minWidth: "100%", height: "auto" }}
-        />
+      <SandpackLayout>
+        <SandpackCodeEditor style={{ minWidth: "100%", height: "auto" }} />
+        <SandpackPreview style={{ minWidth: "100%", height: "auto" }} />
       </SandpackLayout>
     </SandpackProvider>
   );

docs/src/ui/display/animatedCheckmarkCode.js

@@ -0,0 +1,14 @@
+import { AnimatedCheckmark } from "@/ui/display/checkmark/components/AnimatedCheckmark";
+
+export const MyComponent = () => {
+  return (
+    <AnimatedCheckmark
+      isAnimating={true}
+      color="green"
+      duration={0.5}
+      size={30}
+    />
+  );
+  
+  
+};

docs/src/ui/display/appTooltipCode.js

@@ -0,0 +1,22 @@
+import { AppTooltip } from "@/ui/display/tooltip/AppTooltip";
+
+export const MyComponent = () => {
+  return (
+    <>
+      <p id="hoverText" style={{ display: "inline-block" }}>
+        Customer Insights
+      </p>
+      <AppTooltip
+        className
+        anchorSelect="#hoverText"
+        content="Explore customer behavior and preferences"
+        delayHide={0}
+        offset={6}
+        noArrow={false}
+        isOpen={true}
+        place="bottom"
+        positionStrategy="absolute"
+      />
+    </>
+  );
+};

docs/src/ui/display/checkmarkCode.js

@@ -0,0 +1,5 @@
+import { Checkmark } from "@/ui/display/checkmark/components/Checkmark";
+
+export const MyComponent = () => {
+  return <Checkmark />;
+};

docs/src/ui/display/chipCode.js

@@ -0,0 +1,17 @@
+import { Chip } from "@/ui/display/chip/components/Chip";
+
+export const MyComponent = () => {
+  return (
+    <Chip
+      size="large"
+      label="Clickable Chip"
+      clickable={true}
+      variant="highlighted"
+      accent="text-primary"
+      leftComponent
+      rightComponent
+      maxWidth="200px"
+      className
+    />
+  );
+};

docs/src/ui/display/entityChipCode.js

@@ -0,0 +1,19 @@
+import { BrowserRouter as Router } from "react-router-dom";
+import { EntityChip } from "@/ui/display/chip/components/EntityChip";
+import { IconComponent } from "@/ui/display/icon/types/IconComponent";
+
+export const MyComponent = () => {
+  return (
+    <Router>
+      <EntityChip
+        linkToEntity="/entity-link"
+        entityId="entityTest"
+        name="Entity name"
+        pictureUrl=""
+        avatarType="rounded"
+        variant="regular"
+        LeftIcon={IconComponent}
+      />
+    </Router>
+  );
+};

docs/src/ui/display/iconAddressBookCode.js

@@ -0,0 +1,5 @@
+import { IconAddressBook } from "@/ui/display/icon/components/IconAddressBook";
+
+export const MyComponent = () => {
+  return <IconAddressBook size={24} stroke={2} />;
+};

docs/src/ui/display/overflowingTextWithTooltipCode.js

@@ -0,0 +1,8 @@
+import { OverflowingTextWithTooltip } from "@/ui/display/tooltip/OverflowingTextWithTooltip";
+
+export const MyComponent = () => {
+  const crmTaskDescription =
+    "Follow up with client regarding their recent product inquiry. Discuss pricing options, address any concerns, and provide additional product information. Record the details of the conversation in the CRM for future reference.";
+
+  return <OverflowingTextWithTooltip text={crmTaskDescription} />;
+};

docs/src/ui/display/soonPillCode.js

@@ -0,0 +1,5 @@
+import { SoonPill } from "@/ui/display/pill/components/SoonPill";
+
+export const MyComponent = () => {
+  return <SoonPill />;
+};

docs/src/ui/display/tablerIconExampleCode.js

@@ -0,0 +1,5 @@
+import { IconArrowLeft } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return <IconArrowLeft color="red" size={48} />;
+};

docs/src/ui/display/tagCode.js

@@ -0,0 +1,12 @@
+import { Tag } from "@/ui/display/tag/components/Tag";
+
+export const MyComponent = () => {
+  return (
+    <Tag
+      className
+      color="red"
+      text="Urgent"
+      onClick={() => console.log("click")}
+    />
+  );
+};

docs/src/ui/feedback/circularProgressBarCode.js

@@ -0,0 +1,5 @@
+import { CircularProgressBar } from "@/ui/feedback/progress-bar/components/CircularProgressBar";
+
+export const MyComponent = () => {
+  return <CircularProgressBar size={80} barWidth={6} barColor="green" />;
+};

docs/src/ui/feedback/progressBarCode.js

@@ -0,0 +1,14 @@
+import { ProgressBar } from "@/ui/feedback/progress-bar/components/ProgressBar";
+
+export const MyComponent = () => {
+  return (
+    <ProgressBar
+      duration={6000}
+      delay={0}
+      easing="easeInOut"
+      barHeight={10}
+      barColor="#4bb543"
+      autoStart={true}
+    />
+  );
+};

docs/src/ui/generated/index.d.ts

@@ -1,6 +1,10 @@
 export { ThemeProvider } from '@emotion/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { FunctionComponent } from 'react';
+import * as React$1 from 'react';
+import React__default, { ReactNode, MouseEvent, FunctionComponent, ComponentProps } from 'react';
+import { motion, AnimationControls } from 'framer-motion';
+import { TablerIconsProps } from '@tabler/icons-react';
+import { PlacesType, PositionStrategy } from 'react-tooltip';
 
 declare const lightTheme: {
     accent: {
@@ -56,6 +60,7 @@ declare const lightTheme: {
         extraLight: string;
         light: string;
         strong: string;
+        underline: string;
     };
     font: {
         size: {
@@ -279,15 +284,143 @@ declare const lightTheme: {
 type ThemeType = typeof lightTheme;
 declare const darkTheme: ThemeType;
 
-type CheckmarkProps = React.ComponentPropsWithoutRef<'div'>;
+type CheckmarkProps = React__default.ComponentPropsWithoutRef<'div'>;
 declare const Checkmark: (_props: CheckmarkProps) => react_jsx_runtime.JSX.Element;
 
+type AnimatedCheckmarkProps = React.ComponentProps<typeof motion.path> & {
+    isAnimating?: boolean;
+    color?: string;
+    duration?: number;
+    size?: number;
+};
+declare const AnimatedCheckmark: ({ isAnimating, color, duration, size, }: AnimatedCheckmarkProps) => react_jsx_runtime.JSX.Element;
+
+declare enum ChipSize {
+    Large = "large",
+    Small = "small"
+}
+declare enum ChipAccent {
+    TextPrimary = "text-primary",
+    TextSecondary = "text-secondary"
+}
+declare enum ChipVariant {
+    Highlighted = "highlighted",
+    Regular = "regular",
+    Transparent = "transparent",
+    Rounded = "rounded"
+}
+type ChipProps = {
+    size?: ChipSize;
+    disabled?: boolean;
+    clickable?: boolean;
+    label: string;
+    maxWidth?: string;
+    variant?: ChipVariant;
+    accent?: ChipAccent;
+    leftComponent?: ReactNode;
+    rightComponent?: ReactNode;
+    className?: string;
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+};
+declare const Chip: ({ size, label, disabled, clickable, variant, leftComponent, rightComponent, accent, maxWidth, className, onClick, }: ChipProps) => react_jsx_runtime.JSX.Element;
+
 type IconComponent = FunctionComponent<{
     color?: string;
     size?: number;
     stroke?: number;
 }>;
 
+type AvatarType = 'squared' | 'rounded';
+
+type EntityChipProps = {
+    linkToEntity?: string;
+    entityId: string;
+    name: string;
+    pictureUrl?: string;
+    avatarType?: AvatarType;
+    variant?: EntityChipVariant;
+    LeftIcon?: IconComponent;
+};
+declare enum EntityChipVariant {
+    Regular = "regular",
+    Transparent = "transparent"
+}
+declare const EntityChip: ({ linkToEntity, entityId, name, pictureUrl, avatarType, variant, LeftIcon, }: EntityChipProps) => react_jsx_runtime.JSX.Element;
+
+type IconAddressBookProps = TablerIconsProps;
+declare const IconAddressBook: (props: IconAddressBookProps) => JSX.Element;
+
+declare const SoonPill: () => react_jsx_runtime.JSX.Element;
+
+declare const mainColors: {
+    yellow: string;
+    green: string;
+    turquoise: string;
+    sky: string;
+    blue: string;
+    purple: string;
+    pink: string;
+    red: string;
+    orange: string;
+    gray: string;
+};
+type ThemeColor = keyof typeof mainColors;
+
+declare const tagColors: string[];
+type TagColor = (typeof tagColors)[number];
+declare const castToTagColor: (color: string) => TagColor;
+type TagProps = {
+    className?: string;
+    color: ThemeColor;
+    text: string;
+    onClick?: () => void;
+};
+declare const Tag: ({ className, color, text, onClick }: TagProps) => react_jsx_runtime.JSX.Element;
+
+declare enum TooltipPosition {
+    Top = "top",
+    Left = "left",
+    Right = "right",
+    Bottom = "bottom"
+}
+type AppTooltipProps = {
+    className?: string;
+    anchorSelect?: string;
+    content?: string;
+    delayHide?: number;
+    offset?: number;
+    noArrow?: boolean;
+    isOpen?: boolean;
+    place?: PlacesType;
+    positionStrategy?: PositionStrategy;
+};
+declare const AppTooltip: ({ anchorSelect, className, content, delayHide, isOpen, noArrow, offset, place, positionStrategy, }: AppTooltipProps) => react_jsx_runtime.JSX.Element;
+
+declare const OverflowingTextWithTooltip: ({ text, }: {
+    text: string | null | undefined;
+}) => react_jsx_runtime.JSX.Element;
+
+type ProgressBarProps = {
+    duration?: number;
+    delay?: number;
+    easing?: string;
+    barHeight?: number;
+    barColor?: string;
+    autoStart?: boolean;
+};
+type ProgressBarControls = AnimationControls & {
+    start: () => Promise<any>;
+    pause: () => Promise<any>;
+};
+declare const ProgressBar: React$1.ForwardRefExoticComponent<ProgressBarProps & React$1.RefAttributes<ProgressBarControls>>;
+
+interface CircularProgressBarProps {
+    size?: number;
+    barWidth?: number;
+    barColor?: string;
+}
+declare const CircularProgressBar: ({ size, barWidth, barColor, }: CircularProgressBarProps) => react_jsx_runtime.JSX.Element;
+
 type ButtonSize = 'medium' | 'small';
 type ButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
 type ButtonVariant = 'primary' | 'secondary' | 'tertiary';
@@ -304,13 +437,248 @@ type ButtonProps = {
     soon?: boolean;
     disabled?: boolean;
     focus?: boolean;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
 };
 declare const Button: ({ className, Icon, title, fullWidth, variant, size, accent, position, soon, disabled, focus, onClick, }: ButtonProps) => react_jsx_runtime.JSX.Element;
 
+type ButtonGroupProps = Pick<ButtonProps, 'variant' | 'size' | 'accent'> & {
+    className?: string;
+    children: ReactNode[];
+};
+declare const ButtonGroup: ({ className, children, variant, size, accent, }: ButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingButtonSize = 'small' | 'medium';
+type FloatingButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type FloatingButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    title?: string;
+    size?: FloatingButtonSize;
+    position?: FloatingButtonPosition;
+    applyShadow?: boolean;
+    applyBlur?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+};
+declare const FloatingButton: ({ className, Icon, title, size, applyBlur, applyShadow, disabled, focus, }: FloatingButtonProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingButtonGroupProps = Pick<FloatingButtonProps, 'size'> & {
+    children: React__default.ReactElement[];
+};
+declare const FloatingButtonGroup: ({ children, size, }: FloatingButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingIconButtonSize = 'small' | 'medium';
+type FloatingIconButtonPosition = 'standalone' | 'left' | 'middle' | 'right';
+type FloatingIconButtonProps = {
+    className?: string;
+    Icon?: IconComponent;
+    size?: FloatingIconButtonSize;
+    position?: FloatingIconButtonPosition;
+    applyShadow?: boolean;
+    applyBlur?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
+    isActive?: boolean;
+};
+declare const FloatingIconButton: ({ className, Icon, size, position, applyShadow, applyBlur, disabled, focus, onClick, isActive, }: FloatingIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type FloatingIconButtonGroupProps = Pick<FloatingIconButtonProps, 'className' | 'size'> & {
+    iconButtons: {
+        Icon: IconComponent;
+        onClick?: (event: MouseEvent<any>) => void;
+        isActive?: boolean;
+    }[];
+};
+declare const FloatingIconButtonGroup: ({ iconButtons, size, className, }: FloatingIconButtonGroupProps) => react_jsx_runtime.JSX.Element;
+
+type LightButtonAccent = 'secondary' | 'tertiary';
+type LightButtonProps = {
+    className?: string;
+    icon?: React__default.ReactNode;
+    title?: string;
+    accent?: LightButtonAccent;
+    active?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+declare const LightButton: ({ className, icon: initialIcon, title, active, accent, disabled, focus, onClick, }: LightButtonProps) => react_jsx_runtime.JSX.Element;
+
+type LightIconButtonAccent = 'secondary' | 'tertiary';
+type LightIconButtonSize = 'small' | 'medium';
+type LightIconButtonProps = {
+    className?: string;
+    testId?: string;
+    Icon?: IconComponent;
+    title?: string;
+    size?: LightIconButtonSize;
+    accent?: LightIconButtonAccent;
+    active?: boolean;
+    disabled?: boolean;
+    focus?: boolean;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+} & Pick<ComponentProps<'button'>, 'aria-label' | 'title'>;
+declare const LightIconButton: ({ "aria-label": ariaLabel, className, testId, Icon, active, size, accent, disabled, focus, onClick, title, }: LightIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+type Variant = 'primary' | 'secondary';
+type Props = {
+    title: string;
+    fullWidth?: boolean;
+    variant?: Variant;
+    soon?: boolean;
+} & React__default.ComponentProps<'button'>;
+type MainButtonProps = Props & {
+    Icon?: IconComponent;
+};
+declare const MainButton: ({ Icon, title, fullWidth, variant, type, onClick, disabled, }: MainButtonProps) => react_jsx_runtime.JSX.Element;
+
+type RoundedIconButtonProps = {
+    Icon: IconComponent;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+declare const RoundedIconButton: ({ Icon, onClick, disabled, }: RoundedIconButtonProps) => react_jsx_runtime.JSX.Element;
+
+declare enum ColorScheme$1 {
+    Dark = "Dark",
+    Light = "Light",
+    System = "System"
+}
+
+type ColorSchemeSegmentProps = {
+    variant: `${Lowercase<ColorScheme$1.Dark | ColorScheme$1.Light>}`;
+    controls: AnimationControls;
+} & React__default.ComponentPropsWithoutRef<'div'>;
+type ColorSchemeCardProps = {
+    variant: `${Lowercase<ColorScheme$1>}`;
+    selected?: boolean;
+} & React__default.ComponentPropsWithoutRef<'div'>;
+declare const ColorSchemeCard: ({ variant, selected, onClick, }: ColorSchemeCardProps) => react_jsx_runtime.JSX.Element;
+
+type ColorScheme = 'Dark' | 'Light' | 'System';
+
+type ColorSchemePickerProps = {
+    value: ColorScheme;
+    onChange: (value: ColorScheme) => void;
+};
+declare const ColorSchemePicker: ({ value, onChange, }: ColorSchemePickerProps) => react_jsx_runtime.JSX.Element;
+
+declare enum AutosizeTextInputVariant {
+    Default = "default",
+    Icon = "icon",
+    Button = "button"
+}
+type AutosizeTextInputProps = {
+    onValidate?: (text: string) => void;
+    minRows?: number;
+    placeholder?: string;
+    onFocus?: () => void;
+    variant?: AutosizeTextInputVariant;
+    buttonTitle?: string;
+    value?: string;
+};
+declare const AutosizeTextInput: ({ placeholder, onValidate, minRows, onFocus, variant, buttonTitle, value, }: AutosizeTextInputProps) => react_jsx_runtime.JSX.Element;
+
+declare enum CheckboxVariant {
+    Primary = "primary",
+    Secondary = "secondary",
+    Tertiary = "tertiary"
+}
+declare enum CheckboxShape {
+    Squared = "squared",
+    Rounded = "rounded"
+}
+declare enum CheckboxSize {
+    Large = "large",
+    Small = "small"
+}
+type CheckboxProps = {
+    checked: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (value: boolean) => void;
+    variant?: CheckboxVariant;
+    size?: CheckboxSize;
+    shape?: CheckboxShape;
+};
+declare const Checkbox: ({ checked, onChange, onCheckedChange, indeterminate, variant, size, shape, }: CheckboxProps) => react_jsx_runtime.JSX.Element;
+
+type EntityTitleDoubleTextInputProps = {
+    firstValue: string;
+    secondValue: string;
+    firstValuePlaceholder: string;
+    secondValuePlaceholder: string;
+    onChange: (firstValue: string, secondValue: string) => void;
+};
+declare const EntityTitleDoubleTextInput: ({ firstValue, secondValue, firstValuePlaceholder, secondValuePlaceholder, onChange, }: EntityTitleDoubleTextInputProps) => react_jsx_runtime.JSX.Element;
+
+type IconButtonVariant = 'primary' | 'secondary' | 'tertiary';
+
+type IconPickerProps = {
+    disabled?: boolean;
+    dropdownScopeId?: string;
+    onChange: (params: {
+        iconKey: string;
+        Icon: IconComponent;
+    }) => void;
+    selectedIconKey?: string;
+    onClickOutside?: () => void;
+    onClose?: () => void;
+    onOpen?: () => void;
+    variant?: IconButtonVariant;
+};
+declare const IconPicker: ({ disabled, dropdownScopeId, onChange, selectedIconKey, onClickOutside, onClose, onOpen, variant, }: IconPickerProps) => react_jsx_runtime.JSX.Element;
+
+type ImageInputProps = Omit<React__default.ComponentProps<'div'>, 'children'> & {
+    picture: string | null | undefined;
+    onUpload?: (file: File) => void;
+    onRemove?: () => void;
+    onAbort?: () => void;
+    isUploading?: boolean;
+    errorMessage?: string | null;
+    disabled?: boolean;
+};
+declare const ImageInput: ({ picture, onUpload, onRemove, onAbort, isUploading, errorMessage, disabled, }: ImageInputProps) => react_jsx_runtime.JSX.Element;
+
+declare enum RadioSize {
+    Large = "large",
+    Small = "small"
+}
+declare enum LabelPosition {
+    Left = "left",
+    Right = "right"
+}
+type RadioProps = {
+    style?: React$1.CSSProperties;
+    className?: string;
+    checked?: boolean;
+    value?: string;
+    onChange?: (event: React$1.ChangeEvent<HTMLInputElement>) => void;
+    onCheckedChange?: (checked: boolean) => void;
+    size?: RadioSize;
+    disabled?: boolean;
+    labelPosition?: LabelPosition;
+};
+declare const Radio: {
+    ({ checked, value, onChange, onCheckedChange, size, labelPosition, disabled, }: RadioProps): react_jsx_runtime.JSX.Element;
+    Group: ({ value, onChange, onValueChange, children, }: {
+        children?: React$1.ReactNode;
+    } & {
+        value?: string | undefined;
+        onChange?: ((event: React$1.ChangeEvent<HTMLInputElement>) => void) | undefined;
+        onValueChange?: ((value: string) => void) | undefined;
+    }) => react_jsx_runtime.JSX.Element;
+};
+
+type RadioGroupProps = React__default.PropsWithChildren & {
+    value?: string;
+    onChange?: (event: React__default.ChangeEvent<HTMLInputElement>) => void;
+    onValueChange?: (value: string) => void;
+};
+declare const RadioGroup: ({ value, onChange, onValueChange, children, }: RadioGroupProps) => react_jsx_runtime.JSX.Element;
+
 declare module '@emotion/react' {
     interface Theme extends ThemeType {
     }
 }
 
-export { Button, ButtonAccent, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkmark, CheckmarkProps, darkTheme, lightTheme };
+export { AnimatedCheckmark, AnimatedCheckmarkProps, AppTooltip, AppTooltipProps, AutosizeTextInput, AutosizeTextInputVariant, Button, ButtonAccent, ButtonGroup, ButtonGroupProps, ButtonPosition, ButtonProps, ButtonSize, ButtonVariant, Checkbox, CheckboxShape, CheckboxSize, CheckboxVariant, Checkmark, CheckmarkProps, Chip, ChipAccent, ChipSize, ChipVariant, CircularProgressBar, ColorSchemeCard, ColorSchemeCardProps, ColorSchemePicker, ColorSchemePickerProps, ColorSchemeSegmentProps, EntityChip, EntityChipProps, EntityChipVariant, EntityTitleDoubleTextInput, EntityTitleDoubleTextInputProps, FloatingButton, FloatingButtonGroup, FloatingButtonGroupProps, FloatingButtonPosition, FloatingButtonProps, FloatingButtonSize, FloatingIconButton, FloatingIconButtonGroup, FloatingIconButtonGroupProps, FloatingIconButtonPosition, FloatingIconButtonProps, FloatingIconButtonSize, IconAddressBook, IconPicker, ImageInput, LabelPosition, LightButton, LightButtonAccent, LightButtonProps, LightIconButton, LightIconButtonAccent, LightIconButtonProps, LightIconButtonSize, MainButton, OverflowingTextWithTooltip, ProgressBar, ProgressBarControls, ProgressBarProps, Radio, RadioGroup, RadioProps, RadioSize, RoundedIconButton, SoonPill, Tag, TagColor, TagProps, TooltipPosition, castToTagColor, darkTheme, lightTheme };

docs/src/ui/input/button/buttonCode.js

@@ -0,0 +1,20 @@
+import { Button } from "@/ui/input/button/components/Button";
+
+export const MyComponent = () => {
+  return (
+    <Button
+      className
+      Icon={null}
+      title="Click Me"
+      fullWidth={false}
+      variant="primary"
+      size="medium"
+      position="standalone"
+      accent="default"
+      soon={false}
+      disabled={false}
+      focus={true}
+      onClick={() => console.log("click")}
+    />
+  );
+};

docs/src/ui/input/button/buttonGroupCode.js

@@ -0,0 +1,51 @@
+import { Button } from "@/ui/input/button/components/Button";
+import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";
+
+export const MyComponent = () => {
+  return (
+    <ButtonGroup variant="primary" size="large" accent="blue" className>
+      <Button
+        className
+        Icon={null}
+        title="Button 1"
+        fullWidth={false}
+        variant="primary"
+        size="medium"
+        position="standalone"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={true}
+        onClick={() => console.log("click")}
+      />
+      <Button
+        className
+        Icon={null}
+        title="Button 2"
+        fullWidth={false}
+        variant="secondary"
+        size="medium"
+        position="left"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={true}
+        onClick={() => console.log("click")}
+      />
+      <Button
+        className
+        Icon={null}
+        title="Button 3"
+        fullWidth={false}
+        variant="tertiary"
+        size="medium"
+        position="right"
+        accent="blue"
+        soon={false}
+        disabled={false}
+        focus={true}
+        onClick={() => console.log("click")}
+      />
+    </ButtonGroup>
+  );
+};

docs/src/ui/input/button/floatingButtonCode.js

@@ -0,0 +1,18 @@
+import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingButton
+      className
+      Icon={IconSearch}
+      title="Click Me"
+      size="medium"
+      position="standalone"
+      applyShadow={true}
+      applyBlur={true}
+      disabled={false}
+      focus={true}
+    />
+  );
+};

docs/src/ui/input/button/floatingButtonGroupCode.js

@@ -0,0 +1,32 @@
+import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
+import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
+import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingButtonGroup size="small">
+      <FloatingButton
+        className
+        Icon={IconClipboardText}
+        title
+        size="small"
+        position="standalone"
+        applyShadow={true}
+        applyBlur={true}
+        disabled={false}
+        focus={true}
+      />
+      <FloatingButton
+        className
+        Icon={IconCheckbox}
+        title
+        size="small"
+        position="standalone"
+        applyShadow={true}
+        applyBlur={true}
+        disabled={false}
+        focus={true}
+      />
+    </FloatingButtonGroup>
+  );
+};

docs/src/ui/input/button/floatingIconButtonCode.js

@@ -0,0 +1,19 @@
+import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <FloatingIconButton
+      className
+      Icon={IconSearch}
+      size="small"
+      position="standalone"
+      applyShadow={true}
+      applyBlur={true}
+      disabled={false}
+      focus={false}
+      onClick={() => console.log("click")}
+      isActive={true}
+    />
+  );
+};

docs/src/ui/input/button/floatingIconButtonGroupCode.js

@@ -0,0 +1,24 @@
+import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
+import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  const iconButtons = [
+    {
+      Icon: IconClipboardText,
+      onClick: () => console.log("Button 1 clicked"),
+      isActive: true,
+    },
+    {
+      Icon: IconCheckbox,
+      onClick: () => console.log("Button 2 clicked"),
+      isActive: true,
+    },
+  ];
+
+  return (
+    <FloatingIconButtonGroup 
+    className 
+    size="small" 
+    iconButtons={iconButtons} />
+  );
+};

docs/src/ui/input/button/lightButtonCode.js

@@ -0,0 +1,14 @@
+import { LightButton } from "@/ui/input/button/components/LightButton";
+
+export const MyComponent = () => {
+  return <LightButton
+  className
+  icon={null}
+  title="Click Me"
+  accent="secondary"
+  active={false}
+  disabled={false}
+  focus={true}
+  onClick={()=>console.log('click')} 
+  />;
+};

docs/src/ui/input/button/lightIconButtonCode.js

@@ -0,0 +1,19 @@
+import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <LightIconButton
+      className
+      testId="test1"
+      Icon={IconSearch}
+      title="Click Me"
+      size="small"
+      accent="secondary"
+      active={true}
+      disabled={false}
+      focus={true}
+      onClick={() => console.log("click")}
+    />
+  );
+};

docs/src/ui/input/button/mainButtonCode.js

@@ -0,0 +1,14 @@
+import { MainButton } from "@/ui/input/button/components/MainButton";
+import { IconCheckbox } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <MainButton
+      title="Checkbox"
+      fullWidth={false}
+      variant="primary"
+      soon={false}
+      Icon={IconCheckbox}
+    />
+  );
+};

docs/src/ui/input/button/roundedIconButtonCode.js

@@ -0,0 +1,10 @@
+import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
+import { IconSearch } from "@tabler/icons-react";
+
+export const MyComponent = () => {
+  return (
+    <RoundedIconButton
+      Icon={IconSearch}
+    />
+  );
+};

docs/src/ui/input/color-scheme/colorSchemeCardCode.js

@@ -0,0 +1,10 @@
+import { ColorSchemeCard } from "@/ui/input/color-scheme/components/ColorSchemeCard";
+
+export const MyComponent = () => {
+  return (
+      <ColorSchemeCard
+      variant="dark"
+      selected={true}
+      />
+  );
+};

docs/src/ui/input/color-scheme/colorSchemePickerCode.js

@@ -0,0 +1,8 @@
+import { ColorSchemePicker } from "@/ui/input/color-scheme/components/ColorSchemePicker";
+
+export const MyComponent = () => {
+  return <ColorSchemePicker
+  value
+  onChange
+  />;
+};

docs/src/ui/input/components/autosizeTextInputCode.js

@@ -0,0 +1,18 @@
+import { RecoilRoot } from "recoil";
+import { AutosizeTextInput } from "@/ui/input/components/AutosizeTextInput";
+
+export const MyComponent = () => {
+  return (
+    <RecoilRoot>
+      <AutosizeTextInput
+        onValidate={() => console.log("onValidate function fired")}
+        minRows={1}
+        placeholder="Write a comment"
+        onFocus={() => console.log("onFocus function fired")}
+        variant="icon"
+        buttonTitle
+        value="Task: "
+      />
+    </RecoilRoot>
+  );
+};

docs/src/ui/input/components/checkboxCode.js

@@ -0,0 +1,15 @@
+import { Checkbox } from "@/ui/input/components/Checkbox";
+
+export const MyComponent = () => {
+  return (
+    <Checkbox
+      checked={true}
+      indeterminate={false}
+      onChange={() => console.log("onChange function fired")}
+      onCheckedChange={() => console.log("onCheckedChange function fired")}
+      variant="primary"
+      size="small"
+      shape="squared"
+    />
+  );
+};

docs/src/ui/input/components/entityTitleDoubleTextInputCode.js

@@ -0,0 +1,27 @@
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { EntityTitleDoubleTextInput } from "@/ui/input/components/EntityTitleDoubleTextInput";
+
+export const MyComponent = () => {
+
+    const [firstValue, setFirstValue] = useState("First Value");
+    const [secondValue, setSecondValue] = useState("This is a long long test text");
+
+    const handleInputChange = (newFirstValue, newSecondValue) => {
+      setFirstValue(newFirstValue);
+      setSecondValue(newSecondValue);
+    };
+
+
+  return (
+    <RecoilRoot>
+      <EntityTitleDoubleTextInput
+        firstValue={firstValue}
+        secondValue={secondValue}
+        firstValuePlaceholder="Enter First Value"
+        secondValuePlaceholder="Enter Second Value"
+        onChange={handleInputChange}
+      />
+    </RecoilRoot>
+  );
+};

docs/src/ui/input/components/iconPickerCode.js

@@ -0,0 +1,23 @@
+import { RecoilRoot } from "recoil";
+import React, { useState } from "react";
+import { IconPicker } from "@/ui/input/components/IconPicker";
+
+export const MyComponent = () => {
+
+   const [selectedIcon, setSelectedIcon] = useState("");
+   const handleIconChange = ({ iconKey, Icon }) => {
+     console.log("Selected Icon:", iconKey);
+     setSelectedIcon(iconKey);
+   };
+
+  return (
+    <RecoilRoot>
+      <IconPicker
+        disabled={false}
+        onChange={handleIconChange}
+        selectedIconKey={selectedIcon}
+        variant="primary"
+      />
+    </RecoilRoot>
+  );
+};

docs/src/ui/input/components/imageInputCode.js

@@ -0,0 +1,5 @@
+import { ImageInput } from "@/ui/input/components/ImageInput";
+
+export const MyComponent = () => {
+  return <ImageInput/>;
+};

docs/src/ui/input/components/radioCode.js

@@ -0,0 +1,25 @@
+import { Radio } from "@/ui/input/components/Radio";
+
+export const MyComponent = () => {
+
+  const handleRadioChange = (event) => {
+    console.log("Radio button changed:", event.target.checked);
+  };
+
+  const handleCheckedChange = (checked) => {
+    console.log("Checked state changed:", checked);
+  };
+
+
+  return (
+    <Radio
+      checked={true}
+      value="Option 1"
+      onChange={handleRadioChange}
+      onCheckedChange={handleCheckedChange}
+      size="large"
+      disabled={false}
+      labelPosition="right"
+    />
+  );
+};

docs/src/ui/input/components/radioGroupCode.js

@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { Radio } from "@/ui/input/components/Radio";
+import { RadioGroup } from "@/ui/input/components/RadioGroup";
+
+export const MyComponent = () => {
+
+  const [selectedValue, setSelectedValue] = useState("Option 1");
+
+  const handleChange = (event) => {
+    setSelectedValue(event.target.value);
+  };
+  
+  return (
+    <RadioGroup value={selectedValue} onChange={handleChange}>
+      <Radio value="Option 1" />
+      <Radio value="Option 2" />
+      <Radio value="Option 3" />
+    </RadioGroup>
+  );
+};

docs/src/ui/uiComponents.css

@@ -0,0 +1,9 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+
+body {
+  font-family: 'Inter', sans-serif;
+}
+ html {
+  font-size: 13px;
+}