@udixio/ui-react 0.4.2 → 1.0.0

package/src/stories/navigation/tabs/tabs.stories.tsx

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  faCircleUser,
+  faHeart,
+  faMagnifyingGlass,
+  faMessage,
+  faPlane,
+} from '@fortawesome/free-solid-svg-icons';
+import { ReactProps, Tab, Tabs, TabsInterface, TabsVariant } from '../../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Navigation/Tabs',
+  component: Tabs,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createTabStory = (
+  variant?: TabsVariant,
+  args?: Partial<ReactProps<TabsInterface>>,
+) => {
+  const tabStory: Story = (args: ReactProps<TabsInterface>) => (
+    <div className="w-full flex flex-col gap-8">
+      <Tabs {...args} onTabSelected={(tab: any) => console.log(tab)}>
+        {
+          // @ts-ignore
+          args.children.map((child) => child)
+        }
+      </Tabs>
+      <Tabs scrollable {...args} onTabSelected={(tab: any) => console.log(tab)}>
+        {
+          // @ts-ignore
+          args.children.map((child) => child)
+        }
+        {
+          // @ts-ignore
+          args.children.slice(1).map((child) => child)
+        }
+      </Tabs>
+    </div>
+  );
+
+  tabStory.args = {
+    variant,
+    children: [
+      <Tab label={'Explorer'} selected></Tab>,
+      <Tab label={'Favoris'}></Tab>,
+      <Tab label={'Voyages'}></Tab>,
+      <Tab label={'Messages'}></Tab>,
+      <Tab label={'Profil'}></Tab>,
+    ],
+    ...args,
+  };
+
+  return tabStory;
+};
+
+export const PrimaryLabelOnly = createTabStory('primary');
+
+export const PrimaryIconAndLabel = createTabStory('primary', {
+  children: [
+    <Tab label={'Explorer'} icon={faMagnifyingGlass} selected />,
+    <Tab label={'Favoris'} icon={faHeart} />,
+    <Tab label={'Voyages'} icon={faPlane} />,
+    <Tab label={'Messages'} icon={faMessage} />,
+    <Tab label={'Profil'} icon={faCircleUser} />,
+  ],
+});
+
+export const PrimaryIconOnly = createTabStory('primary', {
+  children: [
+    <Tab icon={faMagnifyingGlass} selected />,
+    <Tab icon={faHeart} />,
+    <Tab icon={faPlane} />,
+    <Tab icon={faMessage} />,
+    <Tab icon={faCircleUser} />,
+  ],
+});
+
+export const SecondaryLabelOnly = createTabStory('secondary');
+
+export const SecondaryIconAndLabel = createTabStory('secondary', {
+  children: [
+    <Tab label={'Explorer'} icon={faMagnifyingGlass} selected />,
+    <Tab label={'Favoris'} icon={faHeart} />,
+    <Tab label={'Voyages'} icon={faPlane} />,
+    <Tab label={'Messages'} icon={faMessage} />,
+    <Tab label={'Profil'} icon={faCircleUser} />,
+  ],
+});

package/src/stories/selection/slider.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactProps, Slider, SliderInterface } from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Selection/Slider',
+  component: Slider,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta<typeof Slider>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createSliderStory = (args?: Partial<ReactProps<SliderInterface>>) => {
+  const sliderStory: Story = (args: ReactProps<SliderInterface>) => (
+    <div className="">
+      <div className="flex flex-col m-4 gap-4 items-center">
+        <Slider value={0} min={0} max={100} step={1} {...args} />
+        <Slider value={50} min={0} max={100} step={1} {...args} />
+        <Slider value={100} min={0} max={100} step={1} {...args} />
+      </div>
+    </div>
+  );
+  sliderStory.args = {
+    name: 'test',
+    ...args,
+  };
+  return sliderStory;
+};
+export const continuousSlider = createSliderStory({});
+export const discreteSlider = createSliderStory({
+  marks: [
+    {
+      value: 0,
+      label: '0%',
+    },
+    {
+      value: 10,
+      label: '10%',
+    },
+    {
+      value: 20,
+      label: '20%',
+    },
+    {
+      value: 30,
+      label: '30%',
+    },
+    {
+      value: 40,
+      label: '40%',
+    },
+    {
+      value: 50,
+      label: '50%',
+    },
+    {
+      value: 60,
+      label: '60%',
+    },
+    {
+      value: 70,
+      label: '70%',
+    },
+    {
+      value: 80,
+      label: '80%',
+    },
+    {
+      value: 90,
+      label: '90%',
+    },
+    {
+      value: 100,
+      label: '100%',
+    },
+  ],
+});

package/src/stories/selection/switch.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ReactProps, Switch, SwitchInterface } from '../../';
+import { faCheck, faXmark } from '@fortawesome/free-solid-svg-icons';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Selection/Switch',
+  component: Switch,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+} satisfies Meta<typeof Switch>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createSwitchStory = (args?: Partial<ReactProps<SwitchInterface>>) => {
+  const switchStory: Story = (args: ReactProps<SwitchInterface>) => (
+    <div className="">
+      <div className="flex m-4 gap-4 items-center">
+        <Switch {...args} />
+        <Switch disabled {...args} />
+      </div>
+      <div className="flex m-4 gap-4 items-center">
+        <Switch activeIcon={faCheck} inactiveIcon={faXmark} {...args} />
+        <Switch
+          activeIcon={faCheck}
+          inactiveIcon={faXmark}
+          disabled
+          {...args}
+        />
+      </div>
+    </div>
+  );
+  switchStory.args = {
+    ...args,
+  };
+  return switchStory;
+};
+export const switchSelected = createSwitchStory({ selected: true });
+export const switchUnselected = createSwitchStory({ selected: false });

package/src/stories/text-inputs/text-field.stories.tsx

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+
+import { v4 as uuidv4 } from 'uuid';
+import {
+  faCircleXmark,
+  faMagnifyingGlass,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  IconButton,
+  ReactProps,
+  TextField,
+  TextFieldInterface,
+  TextFieldVariant,
+} from '../../';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Text Inputs/TextField',
+  component: TextField,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+} satisfies Meta<typeof TextField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// Function to create TextField stories
+const createTextFieldStory = (
+  variant: TextFieldVariant,
+  args?: Partial<ReactProps<TextFieldInterface>>,
+) => {
+  const TextFieldStory: Story = (args: ReactProps<TextFieldInterface>) => (
+    <div className="">
+      <div className="flex m-4 gap-4 items-center">
+        <TextField {...args} name={'example' + uuidv4()} value="Input" />
+        <TextField
+          {...args}
+          name={'example' + uuidv4()}
+          value="Input"
+          errorText="invalid value"
+        />
+        <TextField
+          {...args}
+          name={'example' + uuidv4()}
+          value="Input"
+          disabled
+        />
+      </div>
+      <div className="flex m-4 gap-4 items-center">
+        <TextField {...args} name={'example' + uuidv4()} />
+        <TextField
+          {...args}
+          name={'example' + uuidv4()}
+          errorText="invalid value"
+        />
+        <TextField {...args} name={'example' + uuidv4()} disabled />
+      </div>
+    </div>
+  );
+  TextFieldStory.args = {
+    variant: variant,
+    label: 'Label',
+    placeholder: 'Placeholder',
+    supportingText: 'Supporting text',
+    ...args,
+  };
+  return TextFieldStory;
+};
+
+export const Filled = createTextFieldStory('filled');
+
+export const FilledTrailingIcon = createTextFieldStory('filled', {
+  trailingIcon: (
+    <IconButton
+      onClick={() => console.log('clicked')}
+      arialLabel="Action description"
+      icon={faCircleXmark}
+    />
+  ),
+});
+
+export const FilledLealingIconAndTrailingIcon = createTextFieldStory('filled', {
+  leadingIcon: faMagnifyingGlass,
+  trailingIcon: (
+    <IconButton
+      onClick={() => console.log('clicked')}
+      arialLabel="Action description"
+      icon={faCircleXmark}
+    />
+  ),
+});
+
+export const FilledLealingIcon = createTextFieldStory('filled', {
+  leadingIcon: faMagnifyingGlass,
+});
+
+export const Outlined = createTextFieldStory('outlined');
+
+export const OutlinedTrailingIcon = createTextFieldStory('outlined', {
+  trailingIcon: (
+    <IconButton
+      onClick={() => console.log('clicked')}
+      arialLabel="Action description"
+      icon={faCircleXmark}
+    />
+  ),
+});
+
+export const OutlinedLealingIconAndTrailingIcon = createTextFieldStory(
+  'outlined',
+  {
+    leadingIcon: faMagnifyingGlass,
+    trailingIcon: (
+      <IconButton
+        onClick={() => console.log('clicked')}
+        arialLabel="Action description"
+        icon={faCircleXmark}
+      />
+    ),
+  },
+);
+
+export const OutlinedLealingIcon = createTextFieldStory('outlined', {
+  leadingIcon: faMagnifyingGlass,
+  className: () => ({
+    textField: 'w-full md:w-fit md:flex-1 ',
+    content: 'rounded-full overflow-hidden bg-surface',
+  }),
+});

package/src/tests/Button.spec.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import { Button } from '../lib/index.js';
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
+describe('Button', () => {
+  it('renders correctly with default props', () => {
+    render(<Button label="Test Button" />);
+
+    const button = screen.getByText('Test Button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('disables the button when disabled prop is true', () => {
+    render(<Button label="Test Button" disabled />);
+
+    const button = screen.getByText('Test Button').closest('button');
+    expect(button).toBeDisabled();
+  });
+
+  it('calls onClick handler when clicked', () => {
+    const handleClick = vi.fn();
+    render(<Button label="Test Button" onClick={handleClick} />);
+
+    const button = screen.getByText('Test Button');
+    fireEvent.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClick handler when disabled', () => {
+    const handleClick = vi.fn();
+    render(<Button label="Test Button" onClick={handleClick} disabled />);
+
+    const button = screen.getByText('Test Button');
+    fireEvent.click(button);
+
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+
+  it('renders with an icon when icon prop is provided', () => {
+    render(<Button label="Test Button" icon={faPlus} />);
+
+    // This is a mock test, so we're not actually checking for the icon
+    // In a real test, you would check for the icon element
+    const button = screen.getByText('Test Button').closest('button');
+    expect(button).toBeInTheDocument();
+  });
+
+  it('renders as an anchor tag when href is provided', () => {
+    render(<Button label="Test Button" href="https://example.com" />);
+
+    const link = screen.getByText('Test Button').closest('a');
+    expect(link).toHaveAttribute('href', 'https://example.com');
+  });
+
+  it('shows loading indicator when loading prop is true', () => {
+    render(<Button label="Test Button" loading />);
+
+    // This is a mock test, so we're not actually checking for the loading indicator
+    // In a real test, you would check for the ProgressIndicator component
+    const button = screen.getByText('Test Button').closest('button');
+    expect(button).toBeInTheDocument();
+  });
+});

package/src/udixio.css

@@ -0,0 +1,120 @@
+
+@plugin "@udixio/tailwind" {
+  colorKeys: surface, surface-dim, surface-bright, surface-container-lowest, surface-container-low, surface-container, surface-container-high, surface-container-highest, on-surface, on-surface-variant, outline, outline-variant, inverse-surface, inverse-on-surface, primary, primary-dim, on-primary, primary-container, on-primary-container, primary-fixed, primary-fixed-dim, on-primary-fixed, on-primary-fixed-variant, inverse-primary, secondary, secondary-dim, on-secondary, secondary-container, on-secondary-container, secondary-fixed, secondary-fixed-dim, on-secondary-fixed, on-secondary-fixed-variant, tertiary, tertiary-dim, on-tertiary, tertiary-container, on-tertiary-container, tertiary-fixed, tertiary-fixed-dim, on-tertiary-fixed, on-tertiary-fixed-variant, error, error-dim, on-error, error-container, on-error-container, surface-variant, surface-tint, background, on-background;
+  fontStyles: display-large fontWeight[400] fontSize[3.5625] lineHeight[4] letterSpacing[-0.015625] fontFamily[expressive], display-medium fontWeight[400] fontSize[2.8125] lineHeight[3.25] fontFamily[expressive], display-small fontWeight[400] fontSize[2.25] lineHeight[2.75] fontFamily[expressive], headline-large fontWeight[400] fontSize[2] lineHeight[2.5] fontFamily[expressive], headline-medium fontWeight[400] fontSize[1.75] lineHeight[2.25] fontFamily[expressive], headline-small fontWeight[400] fontSize[1.5] lineHeight[2] fontFamily[expressive], title-large fontWeight[400] fontSize[1.375] lineHeight[1.75] fontFamily[neutral], title-medium fontWeight[500] fontSize[1] lineHeight[1.5] fontFamily[neutral] letterSpacing[0.009375], title-small fontWeight[500] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.00625], label-large fontWeight[500] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.00625], label-medium fontWeight[500] fontSize[0.75] lineHeight[1] fontFamily[neutral] letterSpacing[0.03125], label-small fontWeight[500] fontSize[0.6875] lineHeight[1] fontFamily[neutral] letterSpacing[0.03125], body-large fontWeight[400] fontSize[1] lineHeight[1.5625] fontFamily[neutral] letterSpacing[0.03125], body-medium fontWeight[400] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.015625], body-small fontWeight[400] fontSize[0.75] lineHeight[1] fontFamily[neutral] letterSpacing[0.025];
+  responsiveBreakPoints: lg 1.125;
+}
+@custom-variant dark (&:where(.dark, .dark *));
+@theme {
+  --color-*: initial;
+  --color-surface: #fdf7fe;
+  --color-surface-dim: #ded8e4;
+  --color-surface-bright: #fdf7fe;
+  --color-surface-container-lowest: #ffffff;
+  --color-surface-container-low: #f8f1fa;
+  --color-surface-container: #f2ecf5;
+  --color-surface-container-high: #ece6f0;
+  --color-surface-container-highest: #e7e0ec;
+  --color-on-surface: #34313a;
+  --color-on-surface-variant: #625c6f;
+  --color-outline: #7e788c;
+  --color-outline-variant: #b6aec4;
+  --color-inverse-surface: #0f0d12;
+  --color-inverse-on-surface: #f5eff5;
+  --color-primary: #655789;
+  --color-primary-dim: #594b7c;
+  --color-on-primary: #fdf7ff;
+  --color-primary-container: #d4c3fd;
+  --color-on-primary-container: #493c6c;
+  --color-primary-fixed: #d4c3fd;
+  --color-primary-fixed-dim: #c6b6ee;
+  --color-on-primary-fixed: #352857;
+  --color-on-primary-fixed-variant: #524576;
+  --color-inverse-primary: #d4c3fd;
+  --color-secondary: #625c71;
+  --color-secondary-dim: #565065;
+  --color-on-secondary: #fdf7ff;
+  --color-secondary-container: #e8def8;
+  --color-on-secondary-container: #554f63;
+  --color-secondary-fixed: #e8def8;
+  --color-secondary-fixed-dim: #dad0ea;
+  --color-on-secondary-fixed: #423c50;
+  --color-on-secondary-fixed-variant: #5f586e;
+  --color-tertiary: #7b5270;
+  --color-tertiary-dim: #6e4664;
+  --color-on-tertiary: #fff7f9;
+  --color-tertiary-container: #f4bfe3;
+  --color-on-tertiary-container: #5f3956;
+  --color-tertiary-fixed: #f4bfe3;
+  --color-tertiary-fixed-dim: #e5b2d5;
+  --color-on-tertiary-fixed: #4a2642;
+  --color-on-tertiary-fixed-variant: #694260;
+  --color-error: #a8364b;
+  --color-error-dim: #6b0221;
+  --color-on-error: #fff7f7;
+  --color-error-container: #f97386;
+  --color-on-error-container: #6e0523;
+  --color-surface-variant: #e7e0ec;
+  --color-surface-tint: #655789;
+  --color-background: #fdf7fe;
+  --color-on-background: #34313a;
+}
+@layer theme {
+  .dark {
+  --color-surface: #0f0d12;
+  --color-surface-dim: #0f0d12;
+  --color-surface-bright: #2e2b34;
+  --color-surface-container-lowest: #000000;
+  --color-surface-container-low: #141218;
+  --color-surface-container: #1b181f;
+  --color-surface-container-high: #211e26;
+  --color-surface-container-highest: #27242d;
+  --color-on-surface: #eae3ef;
+  --color-on-surface-variant: #afa8bd;
+  --color-outline: #797286;
+  --color-outline-variant: #4b4557;
+  --color-inverse-surface: #fdf7fe;
+  --color-inverse-on-surface: #322f34;
+  --color-primary: #cdc0ec;
+  --color-primary-dim: #bfb2de;
+  --color-on-primary: #443a5f;
+  --color-primary-container: #574d72;
+  --color-on-primary-container: #e9deff;
+  --color-primary-fixed: #ded0fe;
+  --color-primary-fixed-dim: #d0c3ef;
+  --color-on-primary-fixed: #3c3256;
+  --color-on-primary-fixed-variant: #594e74;
+  --color-inverse-primary: #645980;
+  --color-secondary: #cbc2db;
+  --color-secondary-dim: #beb5cd;
+  --color-on-secondary: #433d51;
+  --color-secondary-container: #3e384c;
+  --color-on-secondary-container: #c4bbd4;
+  --color-secondary-fixed: #e8def8;
+  --color-secondary-fixed-dim: #dad0ea;
+  --color-on-secondary-fixed: #423c50;
+  --color-on-secondary-fixed-variant: #5f586e;
+  --color-tertiary: #ffcfef;
+  --color-tertiary-dim: #f4bfe3;
+  --color-on-tertiary: #69415f;
+  --color-tertiary-container: #f4bfe3;
+  --color-on-tertiary-container: #5f3956;
+  --color-tertiary-fixed: #f4bfe3;
+  --color-tertiary-fixed-dim: #e5b2d5;
+  --color-on-tertiary-fixed: #4a2642;
+  --color-on-tertiary-fixed-variant: #694260;
+  --color-error: #f97386;
+  --color-error-dim: #c44b5f;
+  --color-on-error: #490013;
+  --color-error-container: #871c34;
+  --color-on-error-container: #ff97a3;
+  --color-surface-variant: #27242d;
+  --color-surface-tint: #cdc0ec;
+  --color-background: #0f0d12;
+  --color-on-background: #eae3ef;
+  }
+}
+@theme {
+  --font-expressive: "Roboto", "sans-serif";
+  --font-neutral: "Roboto", "sans-serif";
+}

package/theme.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig, FontPlugin } from '@udixio/theme';
+import { TailwindPlugin } from '@udixio/tailwind';
+
+export default defineConfig({
+  sourceColor: '#6750A4',
+  plugins: [new FontPlugin({}), new TailwindPlugin({})],
+});

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "../tailwind"
+    },
+    {
+      "path": "../theme"
+    },
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,51 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "rootDir": "src",
+    "outDir": "dist",
+    "tsBuildInfoFile": "dist/tsconfig.lib.tsbuildinfo",
+    "emitDeclarationOnly": true,
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx",
+    "types": [
+      "node",
+      "vite/client"
+    ],
+    "lib": [
+      "es2022",
+      "dom",
+      "dom.iterable"
+    ]
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx"
+  ],
+  "references": [
+    {
+      "path": "../tailwind/tsconfig.lib.json"
+    },
+    {
+      "path": "../theme/tsconfig.lib.json"
+    }
+  ],
+  "exclude": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
+  ]
+}

package/tsconfig.spec.json

@@ -0,0 +1,37 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/vitest",
+    "types": [
+      "vitest/globals",
+      "vitest/importMeta",
+      "vite/client",
+      "node",
+      "vitest"
+    ],
+    "module": "nodenext",
+    "moduleResolution": "nodenext",
+    "forceConsistentCasingInFileNames": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "vite.config.ts",
+    "vite.config.mts",
+    "vitest.config.ts",
+    "vitest.config.mts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}