@udixio/ui-react 2.10.13 → 2.10.14

package/src/stories/containment/carousel.stories.tsx

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Carousel, CarouselInterface, CarouselItem, ReactProps } from '../../';
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'containment/Carousel',
-  component: Carousel,
-  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 Carousel>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
-const src: string[] = [
-  'https://images.unsplash.com/photo-1738694237335-a537515c0b7b?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1738189669835-61808a9d5981?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1737995720044-8d9bd388ff4f?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1737625751736-49f5d69fe450?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1737099049906-fdf13033c12b?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1736182792109-2db1c298a703?q=80&w=2340&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://plus.unsplash.com/premium_photo-1727342635651-6695593ee0d6?q=80&w=2487&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1734249201319-e7227b1b4f54?q=80&w=2427&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1733392898848-72e6a57df7fe?q=80&w=2342&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-  'https://images.unsplash.com/photo-1512389136781-65f9031df878?q=80&w=2500&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
-];
-
-const createCarouselStory = (args?: Partial<ReactProps<CarouselInterface>>) => {
-  const carouselStory: Story = (args: ReactProps<CarouselInterface>) => (
-    <div className="">
-      <div className="flex m-4 gap-4 items-center">
-        <Carousel
-          className={'md:h-[600px] h-[200px]'}
-          outputRange={[40, 500]}
-          {...args}
-        >
-          {Array.from({ length: 10 }).map((_, index) => (
-            <CarouselItem key={index}>
-              <img
-                className={'object-cover  h-full w-full'}
-                alt={'illustration'}
-                src={src[index]}
-              />
-            </CarouselItem>
-          ))}
-        </Carousel>
-      </div>
-    </div>
-  );
-  carouselStory.args = {
-    onChange: (e) => console.log(e),
-    ...args,
-  };
-  return carouselStory;
-};
-export const hero = createCarouselStory();
-export const centerAlignedHero = createCarouselStory();
-export const multiBrowse = createCarouselStory();
-export const unContained = createCarouselStory();
-export const fullScreen = createCarouselStory();

package/src/stories/containment/divider.stories.tsx

@@ -1,35 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Divider, DividerInterface, ReactProps } from '../../';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'Data Display/Divider',
-  component: Divider,
-  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 Divider>;
-
-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 = (args?: Partial<ReactProps<DividerInterface>>) => {
-  const tabStory: Story = (args: ReactProps<DividerInterface>) => (
-    <div className="h-96 w-96 flex">
-      <Divider {...args} />
-    </div>
-  );
-  tabStory.args = {
-    ...args,
-  };
-  return tabStory;
-};
-
-export const Horizontal = createTabStory();
-export const Vertical = createTabStory({ orientation: 'vertical' });

package/src/stories/containment/slide-sheet.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { MotionProps, ReactProps, SideSheet, SideSheetInterface } from '../../';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'containment/SlideSheet',
-  component: SideSheet,
-  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 SideSheet>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
-const createSlideSheetStory = (
-  variant: ReactProps<SideSheetInterface>['variant'],
-) => {
-  const SlideSheetStory: Story = (args: MotionProps<SideSheetInterface>) => (
-    <>
-      <div
-        className={
-          'bg-surface-container-highest h-screen w-full flex justify-between'
-        }
-      >
-        <SideSheet position={'left'} {...args}></SideSheet>
-        <SideSheet position={'right'} {...args}></SideSheet>
-      </div>
-    </>
-  );
-  SlideSheetStory.args = {
-    children: <div className={'h-96 w-96 bg-secondary-container'}></div>,
-    variant: variant,
-    title: 'SlideSheet',
-  };
-  return SlideSheetStory;
-};
-export const Standard = createSlideSheetStory('standard');
-export const Modal = createSlideSheetStory('modal');

package/src/stories/effect/smooth-scroll.stories.tsx

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { SmoothScroll } from '../../';
-import { JSX } from 'react/jsx-runtime';
-
-const meta = {
-  title: 'effect/SmoothScroll',
-  component: SmoothScroll,
-  parameters: {},
-  tags: ['autodocs'],
-  argTypes: {
-    transition: {
-      control: { type: 'text' },
-      description: 'Duration of the scroll animation (e.g., "1s", "500ms", or number in seconds)',
-    },
-    orientation: {
-      control: { type: 'select' },
-      options: ['vertical', 'horizontal'],
-    },
-    smoothTouch: {
-      control: { type: 'boolean' },
-      description: 'Enable smooth scrolling on touch devices',
-    },
-    touchMultiplier: {
-      control: { type: 'number' },
-      description: 'Multiplier for touch scroll sensitivity',
-    },
-  },
-} satisfies Meta<typeof SmoothScroll>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-const createSmoothScrollStory = () => {
-  const SmoothScrollStory: () => JSX.Element = () => (
-    <>
-      <SmoothScroll transition="1s" />
-      <div className="h-52 bg-primary" />
-      <div className="h-52 bg-secondary" />
-      <div className="h-52 bg-tertiary" />
-      <div className="h-52 bg-primary" />
-      <div className="h-52 bg-secondary" />
-      <div className="h-52 bg-tertiary" />
-      <div className="h-52 bg-primary" />
-      <div className="h-52 bg-secondary" />
-      <div className="h-52 bg-tertiary" />
-      <div className="h-52 bg-primary" />
-      <div className="h-52 bg-secondary" />
-      <div className="h-52 bg-tertiary" />
-    </>
-  );
-
-  return SmoothScrollStory;
-};
-export const SmoothScrollStory = createSmoothScrollStory();

package/src/stories/navigation/navigation-rail/navigation-rail-item.stories.tsx

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import {
-  NavigationRailItem,
-  NavigationRailItemInterface,
-  ReactProps,
-} from '../../../';
-import { faCircleUser as fasCircleUser } from '@fortawesome/free-solid-svg-icons';
-import { faCircleUser as farCircleUser } from '@fortawesome/free-regular-svg-icons';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'Navigation/Navigation rail item',
-  component: NavigationRailItem,
-  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: {
-    type: { table: { disable: true } },
-    icon: { table: { disable: true } },
-  },
-} satisfies Meta<typeof NavigationRailItem>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
-const createNavigationRailItemStory = (
-  args?: Partial<ReactProps<NavigationRailItemInterface>>,
-) => {
-  const navigationRailItemStory: Story = (
-    args: ReactProps<NavigationRailItemInterface>,
-  ) => (
-    <div className="">
-      <div className="flex m-4 gap-4 items-center">
-        <NavigationRailItem {...args} />
-        <NavigationRailItem {...args} selected />
-      </div>
-    </div>
-  );
-  navigationRailItemStory.args = {
-    ...args,
-
-    icon: farCircleUser,
-    iconSelected: fasCircleUser,
-  };
-  return navigationRailItemStory;
-};
-export const VerticalIconAndLabel = createNavigationRailItemStory({
-  variant: 'vertical',
-  label: 'Label',
-});
-export const VerticalIconOnly = createNavigationRailItemStory({
-  variant: 'vertical',
-});
-export const HorizontalIconAndLabel = createNavigationRailItemStory({
-  variant: 'horizontal',
-  label: 'Label',
-});
-export const HorizontalLabelOnly = createNavigationRailItemStory({
-  variant: 'vertical',
-});

package/src/stories/navigation/navigation-rail/navigation-rail.stories.tsx

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { faCircleUser as fasCircleUser } from '@fortawesome/free-solid-svg-icons';
-import {
-  Fab,
-  NavigationRail,
-  NavigationRailItem,
-  NavigationRailSection,
-  ReactProps,
-} from '../../../';
-import { NavigationRailInterface } from '../../..//interfaces/navigation-rail.interface';
-import { faCircleUser as farCircleUser } from '@fortawesome/free-regular-svg-icons';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'Navigation/Navigation rail',
-  component: NavigationRail,
-  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 NavigationRail>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
-const createStory = (args?: Partial<ReactProps<NavigationRailInterface>>) => {
-  const story: Story = (
-    args?: Partial<ReactProps<NavigationRailInterface>>,
-  ) => (
-    <div className="w-full h-[90vh] flex bg-surface">
-      <NavigationRail alignment={'middle'} {...args}>
-        <Fab icon={farCircleUser} label={'Add Timer'} />
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Explorer'}
-          selected
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Favoris'}
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Voyages'}
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Messages'}
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Profil'}
-        ></NavigationRailItem>
-        <NavigationRailSection label={'Section Header'}></NavigationRailSection>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Explorer'}
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Favoris'}
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Voyages'}
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Messages'}
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Profil'}
-        ></NavigationRailItem>
-        <NavigationRailSection label={'Section Header'}></NavigationRailSection>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Explorer'}
-        ></NavigationRailItem>
-        <NavigationRailItem
-          icon={farCircleUser}
-          iconSelected={fasCircleUser}
-          label={'Favoris'}
-        ></NavigationRailItem>
-      </NavigationRail>
-      <div className={'flex-1 bg-surface-container'}></div>
-    </div>
-  );
-
-  story.args = {
-    ...(args as any),
-  };
-
-  return story;
-};
-
-export const PrimaryLabelOnly = createStory();
-
-export const PrimaryIconAndLabel = createStory();
-
-export const PrimaryIconOnly = createStory();
-
-export const SecondaryLabelOnly = createStory();
-
-export const SecondaryIconAndLabel = createStory();

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

@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { faHome } from '@fortawesome/free-solid-svg-icons';
-import { Tab, TabProps, TabsVariant } from '../../../';
-import { fn } from '@storybook/test';
-
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-const meta = {
-  title: 'Navigation/Tab',
-  component: Tab,
-  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: {
-    type: { table: { disable: true } },
-    icon: { table: { disable: true } },
-  },
-} satisfies Meta<typeof Tab>;
-
-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<TabProps>) => {
-  const tabStory: Story = (args: TabProps) => (
-    <div className="">
-      <div className="flex m-4 gap-4 items-center">
-        <Tab {...args} />
-        <Tab {...args} selected />
-      </div>
-    </div>
-  );
-  tabStory.args = {
-    label: 'Tab',
-    variant: variant,
-    onClick: fn(),
-    onTabSelected: fn(),
-    ...args,
-  };
-  return tabStory;
-};
-export const PrimaryIconAndLabel = createTabStory('primary', {
-  icon: faHome,
-});
-export const PrimaryIconOnly = createTabStory('primary', {
-  label: undefined,
-  icon: faHome,
-});
-export const PrimaryLabelOnly = createTabStory('primary');
-export const SecondaryLabelOnly = createTabStory('secondary');
-export const SecondaryIconAndLabel = createTabStory('secondary', {
-  icon: faHome,
-});

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

@@ -1,102 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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 });