@usefui/components 1.6.0 → 1.7.0

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/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/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>
   ),
 };

package/src/text-area/index.tsx

@@ -7,8 +7,10 @@ import {
   IComponentSize,
   IComponentStyling,
   IComponentVariant,
-  TComponentShape,
   ComponentSizeEnum,
+  ComponentShapeEnum,
+  ComponentVariantEnum,
+  IComponentShape,
 } from "../../../../types";
 
 export type ScrollContainerProps = {
@@ -20,12 +22,13 @@ export type ScrollContainerProps = {
 };
 
 export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement>,
+  extends
+    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
     IComponentStyling,
     IComponentSize,
+    IComponentShape,
     IComponentVariant {
   resizable?: boolean;
-  shape?: "square" | "smooth";
 }
 
 /**
@@ -50,7 +53,7 @@ export const Textarea = (props: TextareaProps) => {
       textarea.style.height = "auto";
       textarea.style.height = `${Math.min(
         textarea.scrollHeight,
-        parseInt(getComputedStyle(textarea).maxHeight)
+        parseInt(getComputedStyle(textarea).maxHeight),
       )}px`;
     }
   };
@@ -66,8 +69,8 @@ export const Textarea = (props: TextareaProps) => {
     <TextAreaContainer
       ref={textareaRef}
       onChange={handleChange}
-      data-variant={variant ?? "secondary"}
-      data-shape={shape ?? "smooth"}
+      data-variant={variant ?? ComponentVariantEnum.Secondary}
+      data-shape={shape ?? ComponentShapeEnum.Smooth}
       data-size={sizing ?? ComponentSizeEnum.Medium}
       data-resizable={resizable}
       data-raw={String(Boolean(raw))}

package/src/text-area/styles/index.ts

@@ -7,7 +7,7 @@ import {
   FieldVariantsStyles,
 } from "../../field/styles";
 
-import type { ScrollContainerProps } from "text-area";
+import type { ScrollContainerProps } from "../";
 
 const CustomScrollbar = css<ScrollContainerProps>`
   height: ${({ $height }) => $height ?? "100%"};

package/src/toggle/Toggle.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Toggle } from "..";
+import { Page, Toggle } from "..";
 import { ComponentVariantEnum } from "../../../../types";
 
 const meta = {
@@ -10,9 +10,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Toggle>;

package/src/tree/Tree.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Tree } from "..";
+import { Page, Tree } from "..";
 import { ComponentSizeEnum, ComponentVariantEnum } from "../../../../types";
 
 const meta = {
@@ -10,9 +10,11 @@ const meta = {
   tags: ["autodocs"],
   decorators: [
     (Story) => (
-      <div className="m-medium-30">
-        <Story />
-      </div>
+      <Page>
+        <Page.Content className="p-medium-30">
+          <Story />
+        </Page.Content>
+      </Page>
     ),
   ],
 } satisfies Meta<typeof Tree>;

package/src/privacy-field/PrivacyField.stories.tsx

@@ -1,29 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-import { Page, PrivacyField } from "..";
-
-/**
- * PrivacyFields are used to hide sensitive values typed by users.
- */
-const meta = {
-  title: "Components/PrivacyField",
-  component: PrivacyField,
-  tags: ["autodocs"],
-} satisfies Meta<typeof PrivacyField>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-export const Default: Story = {
-  args: {
-    variant: "secondary",
-    textIcon: <p className="fs-small-60">txt</p>,
-    passwordIcon: <p className="fs-small-60">pwd</p>,
-  },
-  render: ({ ...args }) => (
-    <Page>
-      <Page.Content className="p-large-30">
-        <PrivacyField {...args} />
-      </Page.Content>
-    </Page>
-  ),
-};