@usefui/components 1.5.3 → 1.7.0

package/src/skeleton/index.tsx

@@ -4,16 +4,17 @@ import React from "react";
 import { SkeletonLoader } from "./styles";
 
 import {
+  ComponentShapeEnum,
   ComponentSizeEnum,
+  type IComponentShape,
   type IComponentSize,
-  type TComponentShape,
 } from "../../../../types";
 
 export interface SkeletonProperties
-  extends IComponentSize,
-    React.ComponentPropsWithRef<"span"> {
-  shape?: TComponentShape;
-}
+  extends
+    IComponentSize,
+    IComponentShape,
+    React.ComponentPropsWithRef<"span"> {}
 
 /**
  * Skeletons are used to convoy a loading state information.
@@ -26,7 +27,7 @@ export interface SkeletonProperties
 export const Skeleton = (props: SkeletonProperties): React.ReactElement => {
   const {
     sizing = ComponentSizeEnum.Medium,
-    shape = "smooth",
+    shape = ComponentShapeEnum.Smooth,
     ...restProps
   } = props;
 

package/src/spinner/Spinner.stories.tsx

@@ -8,6 +8,17 @@ import { Page, Spinner } from "..";
 const meta = {
   title: "Components/Spinner",
   component: Spinner,
+  decorators: [
+    (Story) => (
+      <Page>
+        <Page.Content className="p-medium-30">
+          <div className="flex flex-column align-center justify-center h-100 g-medium-30">
+            <Story />
+          </div>
+        </Page.Content>
+      </Page>
+    ),
+  ],
   tags: ["autodocs"],
 } satisfies Meta<typeof Spinner>;
 export default meta;
@@ -16,12 +27,26 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {},
   render: ({ ...args }) => (
-    <Page>
-      <Page.Content className="g-medium-60 flex align-center justify-center h-100 w-100">
+    <React.Fragment>
+      <div className="flex align-center g-medium-30">
         <Spinner sizing="small" {...args} />
         <Spinner sizing="medium" {...args} />
         <Spinner sizing="large" {...args} />
-      </Page.Content>
-    </Page>
+      </div>
+    </React.Fragment>
+  ),
+};
+export const Variants: Story = {
+  args: {},
+  render: ({ ...args }) => (
+    <React.Fragment>
+      {["circle", "circle-filled"].map((variant) => (
+        <div className="flex align-center g-medium-30" key={variant}>
+          <Spinner sizing="small" variant={variant} />
+          <Spinner sizing="medium" variant={variant} />
+          <Spinner sizing="large" variant={variant} />
+        </div>
+      ))}
+    </React.Fragment>
   ),
 };

package/src/spinner/index.tsx

@@ -2,18 +2,28 @@
 
 import React from "react";
 
-import { RotatingSpinner } from "./styles";
+import { AnimatedSpinner } from "./styles";
 import type { IComponentSize } from "../../../../types";
 
-interface SpinnerProperties extends IComponentSize {}
+type SpinnerVariant = "circle" | "circle-filled";
+
+interface SpinnerProperties extends IComponentSize {
+  variant?: SpinnerVariant;
+}
 
 /**
- * Spinners are used to convoy a loading state information.
+ * Spinners are used to convey a loading state information.
  *
- * @param {TextareaProps} props - The props for the Spinner component.
- * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {SpinnerProperties} props - The props for the Spinner component.
+ * @param {string} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {SpinnerVariant} props.variant - The spinner animation variant. Defaults to `circle`.
  * @returns {ReactElement} The Spinner component.
  */
 export const Spinner = (props: SpinnerProperties) => {
-  return <RotatingSpinner data-size={props.sizing ?? "medium"} />;
+  return (
+    <AnimatedSpinner
+      data-variant={props?.variant ?? "circle"}
+      data-size={props?.sizing ?? "medium"}
+    />
+  );
 };

package/src/spinner/styles/index.ts

@@ -3,41 +3,60 @@
 import styled, { css, keyframes } from "styled-components";
 
 const Rotate = keyframes`
-    0% {
-        transform: rotate(0deg);
-    }
-    100% {
-        transform: rotate(360deg);
-    }
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
 `;
 
-const FieldSizeStyles = css`
+const SpinnerSizeStyles = css`
   &[data-size="small"] {
-    width: var(--measurement-medium-40);
-    height: var(--measurement-medium-40);
+    width: 12px;
+    height: 12px;
   }
   &[data-size="medium"] {
-    width: var(--measurement-medium-50);
-    height: var(--measurement-medium-50);
+    width: 18px;
+    height: 18px;
   }
   &[data-size="large"] {
-    width: var(--measurement-medium-60);
-    height: var(--measurement-medium-60);
+    width: 24px;
+    height: 24px;
   }
 `;
+const CircleStyles = css`
+  border: var(--measurement-small-80) solid var(--font-color-alpha-10);
+  border-bottom-color: transparent;
+  border-radius: var(--measurement-large-90);
 
-export const RotatingSpinner = styled.span`
-  padding: 0;
-  margin: 0;
-
-  display: inline-block;
-  box-sizing: border-box;
-
+  animation: ${Rotate} 0.8s linear infinite;
+`;
+const CircleFilledStyles = css`
   border: var(--measurement-small-60) solid var(--font-color-alpha-30);
+
+  border-top-color: transparent;
+  border-right-color: transparent;
   border-bottom-color: transparent;
+
   border-radius: var(--measurement-large-90);
+  background-color: var(--font-color-alpha-10);
+
+  &::before {
+    position: absolute;
+    content: "";
+    width: 100%;
+    height: 100%;
+    background-color: var(--body-color);
+    border-radius: var(--measurement-large-90);
+  }
+
+  animation: ${Rotate} 0.8s linear infinite;
+`;
 
-  animation: ${Rotate} 1s linear infinite;
+export const AnimatedSpinner = styled.div`
+  ${SpinnerSizeStyles}
 
-  ${FieldSizeStyles}
+  &[data-variant="circle"] {
+    ${CircleStyles}
+  }
+  &[data-variant="circle-filled"] {
+    ${CircleFilledStyles}
+  }
 `;

package/src/switch/Switch.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Switch } from "..";
+import { Field, Page, Switch } from "..";
 import { ComponentSizeEnum, ComponentVariantEnum } from "../../../../types";
 
 // Duplicated doc: The JSDoc content isn't rendering on Storybook.
@@ -20,9 +20,13 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <div className="flex flex-column align-center justify-center h-100 g-medium-30">
+            <Story />
+          </div>
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Switch>;
@@ -67,12 +71,26 @@ export const DefaultChecked: Story = {
 };
 export const Sizes: Story = {
   render: ({ ...args }) => (
-    <div className="flex g-medium-30">
-      {["large", "medium", "small"].map((item) => (
+    <div className="flex flex-column g-medium-30">
+      {["small", "medium", "large"].map((item) => (
         <Switch.Root key={item}>
-          <Switch sizing={item}>
-            <Switch.Thumb />
-          </Switch>
+          <Field.Label
+            id={`${item}-label`}
+            htmlFor={item}
+            className="flex align-center g-medium-30"
+            optional
+          >
+            <Switch name={item} sizing={item}>
+              <Switch.Thumb />
+            </Switch>
+
+            <div className="flex flex-column">
+              <Field.Meta variant="emphasis">{item}</Field.Meta>
+              <Field.Meta variant="hint" className="fs-small-60">
+                The {item} Checkbox sizing
+              </Field.Meta>
+            </div>
+          </Field.Label>
         </Switch.Root>
       ))}
     </div>
@@ -80,15 +98,26 @@ export const Sizes: Story = {
 };
 export const Variants: Story = {
   render: ({ ...args }) => (
-    <div className="flex g-medium-30">
-      {["primary", "ghost"].map((item) => (
+    <div className="flex flex-column g-medium-30">
+      {["accent", "primary"].map((item) => (
         <Switch.Root key={item}>
-          <Switch name={item} variant={item}>
-            <Switch.Thumb />
-          </Switch>
-          <label htmlFor={item}>
-            <small>{item}</small>
-          </label>
+          <Field.Label
+            id={`${item}-label`}
+            htmlFor={item}
+            className="flex align-center g-medium-30"
+            optional
+          >
+            <Switch name={item} variant={item}>
+              <Switch.Thumb />
+            </Switch>
+
+            <div className="flex flex-column">
+              <Field.Meta variant="emphasis">{item}</Field.Meta>
+              <Field.Meta variant="hint" className="fs-small-60">
+                The {item} Checkbox variant
+              </Field.Meta>
+            </div>
+          </Field.Label>
         </Switch.Root>
       ))}
     </div>

package/src/switch/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { useState, createContext, useContext } from "react";
 import { IReactChildren, IComponentAPI } from "../../../../../types";
 
@@ -9,7 +11,9 @@ const defaultComponentAPI = {
 const SwitchContext = createContext<IComponentAPI>(defaultComponentAPI);
 export const useSwitch = () => useContext(SwitchContext);
 
-export const SwitchProvider = ({ children }: IReactChildren): JSX.Element => {
+export const SwitchProvider = ({
+  children,
+}: IReactChildren): React.JSX.Element => {
   const context = useSwitchProvider();
 
   return (

package/src/switch/index.tsx

@@ -17,17 +17,14 @@ export interface ISwitchComposition {
   Thumb: typeof SwitchThumb;
 }
 
+type SwitchVariants = "primary" | "accent";
 export interface ISwitchProperties
-  extends React.ComponentProps<"button">,
-    IComponentSize,
-    IComponentVariant,
-    IComponentStyling {
+  extends React.ComponentProps<"button">, IComponentSize, IComponentStyling {
   defaultChecked?: boolean;
+  variant?: SwitchVariants;
 }
 export interface ISwitchThumbProperties
-  extends React.ComponentProps<"span">,
-    IComponentSize,
-    IComponentStyling {}
+  extends React.ComponentProps<"span">, IComponentSize, IComponentStyling {}
 
 /**
  * Switch are toggle components that allows the user to turn a setting on or off.
@@ -40,7 +37,7 @@ export interface ISwitchThumbProperties
  * @param {ISwitchProperties} props - The props for the Switch component.
  * @param {boolean} props.raw - Whether the switch should be rendered without any styles.
  * @param {ComponentSizeEnum} props.sizing - The size of the switch.
- * @param {ComponentVariantEnum} props.variant - The variant of the switch.
+ * @param {SwitchVariants} props.variant - The variant of the switch.
  * @param {boolean} props.defaultChecked - The initial state of the switch.
  * @param {ReactNode} props.children - The content to be rendered inside the switch.
  * @returns {ReactElement} The Switch component.

package/src/switch/styles/index.ts

@@ -15,81 +15,79 @@ const SwitchDefaultStyles = css`
   }
 `;
 const SwitchVariantsStyles = css`
-  &[data-variant="primary"] {
+  &[data-variant="accent"] {
     &[aria-checked="true"] {
-      background-color: var(--color-green);
-      border-color: var(--font-color-alpha-10);
+      background-color: var(--color-accent);
+      border-color: var(--alpha-accent-10);
     }
     &[aria-checked="false"] {
       background-color: var(--font-color-alpha-10);
       border-color: var(--font-color-alpha-10);
     }
   }
-  &[data-variant="secondary"] {
-    &[aria-checked="true"] {
-      background-color: var(--font-color-alpha-10);
-      border-color: var(--font-color-alpha-10);
-    }
-    &[aria-checked="false"] {
-      background-color: var(--body-color-alpha-10);
-    }
-  }
-
-  &[data-variant="ghost"] {
+  &[data-variant="primary"] {
     &[aria-checked="true"] {
+      background-color: var(--color-green);
       border-color: var(--font-color-alpha-10);
-      background-color: var(--body-color-alpha-10);
     }
     &[aria-checked="false"] {
+      background-color: var(--font-color-alpha-10);
       border-color: var(--font-color-alpha-10);
     }
   }
 `;
 const SwitchSizeStyles = css`
   &[data-size="small"] {
-    width: calc(var(--measurement-medium-60) * 1.33);
-    height: var(--measurement-medium-50);
+    --thumb-size: calc(
+      var(--measurement-medium-40) - var(--measurement-small-10)
+    );
+
+    padding: 0 var(--measurement-small-10);
+    width: calc(var(--thumb-size) * 2);
+    height: var(--measurement-medium-40);
 
     span {
-      width: var(--measurement-medium-40);
-      height: var(--measurement-medium-40);
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+
       &[data-checked="true"] {
-        transform: translateX(var(--measurement-medium-40));
-      }
-      &[data-checked="false"] {
-        transform: translateX(var(--measurement-small-60));
+        transform: translateX(var(--thumb-size));
       }
     }
   }
-
   &[data-size="medium"] {
-    width: calc(var(--measurement-medium-60) * 1.66);
+    --thumb-size: calc(
+      var(--measurement-medium-60) - var(--measurement-small-10)
+    );
+
+    padding: 0 var(--measurement-small-10);
+    width: calc(var(--thumb-size) * 2);
     height: var(--measurement-medium-60);
 
     span {
-      width: var(--measurement-medium-50);
-      height: var(--measurement-medium-50);
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+
       &[data-checked="true"] {
-        transform: translateX(var(--measurement-medium-50));
-      }
-      &[data-checked="false"] {
-        transform: translateX(var(--measurement-small-60));
+        transform: translateX(var(--thumb-size));
       }
     }
   }
-
   &[data-size="large"] {
-    width: calc(var(--measurement-medium-60) * 2.33);
+    --thumb-size: calc(
+      var(--measurement-medium-70) - var(--measurement-small-30)
+    );
+
+    padding: 0 var(--measurement-small-30);
+    width: calc(var(--thumb-size) * 2);
     height: var(--measurement-medium-70);
 
     span {
-      width: var(--measurement-medium-60);
-      height: var(--measurement-medium-60);
+      width: var(--thumb-size);
+      height: var(--thumb-size);
+
       &[data-checked="true"] {
-        transform: translateX(calc(var(--measurement-medium-60) * 1.133));
-      }
-      &[data-checked="false"] {
-        transform: translateX(var(--measurement-small-80));
+        transform: translateX(var(--thumb-size));
       }
     }
   }
@@ -107,12 +105,14 @@ export const Thumb = styled.span<any>`
     all: unset;
     display: block;
 
-    background: var(--font-color-alpha-60);
-    border-radius: 100%;
-    transition: all 0.1s ease-in-out 0.2s;
+    background: white;
+    border-radius: var(--measurement-large-90);
+    box-shadow:
+      0 var(--measurement-small-30) var(--measurement-small-80)
+        var(--alpha-mono-darkest-10),
+      0 var(--measurement-small-30) var(--measurement-small-60)
+        calc(var(--measurement-small-30) * -1) var(--alpha-mono-darkest-10);
 
-    &[data-checked="true"] {
-      background: var(--font-color);
-    }
+    transition: all 0.1s ease-in-out 0.2s;
   }
 `;

package/src/tabs/Tabs.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Tabs } from "..";
+import { Page, Tabs } from "..";
 import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
 
 // Duplicated doc: The JSDoc content isn't rendering on Storybook.
@@ -22,9 +22,13 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <div className="flex flex-column  g-medium-30">
+            <Story />
+          </div>
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Tabs>;
@@ -61,27 +65,51 @@ export const Default: Story = {
   render: ({ ...args }) => (
     <Tabs.Root>
       <Tabs>
-        <div className="flex g-medium-30">
-          <Tabs.Trigger value="🐻‍❄️">🐻‍❄️</Tabs.Trigger>
-          <Tabs.Trigger value="🐻">🐻</Tabs.Trigger>
+        <div className="flex g-medium-30 p-b-medium-30">
+          <Tabs.Trigger value="eng" variant="link">
+            Engineering
+          </Tabs.Trigger>
+          <Tabs.Trigger value="design" variant="link">
+            Design
+          </Tabs.Trigger>
         </div>
+        <Tabs.Content value="eng">
+          Iste nam quasi quam. Ullam numquam reiciendis ratione rem consequatur
+          vero suscipit ut dicta, ducimus magni doloribus est, accusantium
+          explicabo quae fuga.
+        </Tabs.Content>
+        <Tabs.Content value="design">
+          Fuga aut reiciendis porro! Aspernatur autem voluptatibus, quis
+          assumenda consectetur, qui ipsam placeat cum harum animi
+          necessitatibus! Error nisi dolore numquam neque.
+        </Tabs.Content>
       </Tabs>
-      <Tabs.Content value="🐻‍❄️">🐻‍❄️</Tabs.Content>
-      <Tabs.Content value="🐻">🐻</Tabs.Content>
     </Tabs.Root>
   ),
 };
 export const DefaultOpen: Story = {
   render: ({ ...args }) => (
     <Tabs.Root>
-      <Tabs defaultOpen="🐻">
-        <div className="flex g-medium-30">
-          <Tabs.Trigger value="🐻‍❄️">🐻‍❄️</Tabs.Trigger>
-          <Tabs.Trigger value="🐻">🐻</Tabs.Trigger>
+      <Tabs defaultOpen="eng">
+        <div className="flex g-medium-30 p-b-medium-30">
+          <Tabs.Trigger value="eng" variant="link">
+            Engineering
+          </Tabs.Trigger>
+          <Tabs.Trigger value="design" variant="link">
+            Design
+          </Tabs.Trigger>
         </div>
+        <Tabs.Content value="eng">
+          Iste nam quasi quam. Ullam numquam reiciendis ratione rem consequatur
+          vero suscipit ut dicta, ducimus magni doloribus est, accusantium
+          explicabo quae fuga.
+        </Tabs.Content>
+        <Tabs.Content value="design">
+          Fuga aut reiciendis porro! Aspernatur autem voluptatibus, quis
+          assumenda consectetur, qui ipsam placeat cum harum animi
+          necessitatibus! Error nisi dolore numquam neque.
+        </Tabs.Content>
       </Tabs>
-      <Tabs.Content value="🐻‍❄️">🐻‍❄️</Tabs.Content>
-      <Tabs.Content value="🐻">🐻</Tabs.Content>
     </Tabs.Root>
   ),
 };

package/src/tabs/hooks/index.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React, { createContext, useContext, useState } from "react";
 import { IReactChildren, IComponentAPI } from "../../../../../types";
 
@@ -9,7 +11,9 @@ const defaultComponentAPI = {
 const TabsContext = createContext<IComponentAPI>(defaultComponentAPI);
 export const useTabs = () => useContext(TabsContext);
 
-export const TabsProvider = ({ children }: IReactChildren): JSX.Element => {
+export const TabsProvider = ({
+  children,
+}: IReactChildren): React.JSX.Element => {
   const context = useTabsProvider();
 
   return (

package/src/text-area/Textarea.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Page, Textarea } from "..";
+import { Field, Page, Textarea } from "..";
 import { TComponentSize } from "../../../../types";
 
 /**
@@ -11,6 +11,15 @@ const meta = {
   title: "Components/Textarea",
   component: Textarea,
   tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
+    ),
+  ],
 } satisfies Meta<typeof Textarea>;
 export default meta;
 
@@ -21,12 +30,40 @@ export const Default: Story = {
     resizable: false,
   },
   render: ({ ...args }) => (
-    <Page>
-      <Page.Content className="p-large-30 flex flex-column g-large-10">
-        {["small", "medium", "large"].map((size) => (
-          <Textarea key={size} sizing={size as TComponentSize} {...args} />
-        ))}
-      </Page.Content>
-    </Page>
+    <div className="flex flex-column align-center justify-center h-100 g-medium-30">
+      <Field.Wrapper style={{ width: 325 }}>
+        <Textarea />
+      </Field.Wrapper>
+    </div>
+  ),
+};
+export const Sizes: Story = {
+  args: {
+    variant: "secondary",
+    resizable: false,
+  },
+  render: ({ ...args }) => (
+    <div className="flex flex-column align-center justify-center h-100 g-medium-30">
+      {["small", "medium", "large"].map((item) => (
+        <Field.Wrapper key={item} style={{ width: 325 }}>
+          <Textarea sizing={item} />
+        </Field.Wrapper>
+      ))}
+    </div>
+  ),
+};
+export const Variants: Story = {
+  args: {
+    variant: "secondary",
+    resizable: false,
+  },
+  render: ({ ...args }) => (
+    <div className="flex flex-column align-center justify-center h-100 g-medium-30">
+      {["primary", "secondary", "ghost"].map((item) => (
+        <Field.Wrapper key={item} style={{ width: 325 }}>
+          <Textarea variant={item} />
+        </Field.Wrapper>
+      ))}
+    </div>
   ),
 };