@usefui/components 1.5.1

package/src/badge/styles/index.ts

@@ -0,0 +1,109 @@
+import styled, { css } from "styled-components";
+
+const BadgeBaseStyles = css`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--measurement-medium-10);
+  min-width: var(--measurement-medium-60);
+  min-height: var(--measurement-medium-60);
+  width: fit-content;
+
+  border: var(--measurement-small-10) solid transparent;
+
+  font-size: var(--fontsize-small-60);
+  padding: var(--measurement-medium-10) var(--measurement-medium-30);
+  font-weight: 500;
+  transition: all ease-in-out 0.2s;
+`;
+
+const BadgeVariantStyles = css`
+  border: var(--measurement-small-10) solid transparent;
+
+  &[data-variant="primary"] {
+    background-color: var(--font-color);
+    color: var(--body-color);
+
+    &:hover,
+    &:focus {
+      border-color: var(--font-color-alpha-10);
+    }
+  }
+  &[data-variant="secondary"] {
+    background-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-60);
+
+    &:hover,
+    &:focus {
+      color: var(--font-color);
+    }
+  }
+  &[data-variant="border"] {
+    background-color: transparent;
+    border-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-60);
+
+    &:hover,
+    &:focus {
+      color: var(--font-color);
+    }
+  }
+  &[data-variant="error"] {
+    background-color: var(--alpha-red-10);
+    color: var(--alpha-red-80);
+
+    &:hover,
+    &:focus {
+      background-color: var(--alpha-red-10);
+      color: var(--color-red);
+    }
+  }
+  &[data-variant="warning"] {
+    background-color: var(--alpha-orange-10);
+    color: var(--alpha-orange-80);
+
+    &:hover,
+    &:focus {
+      background-color: var(--alpha-orange-10);
+      color: var(--color-orange);
+    }
+  }
+  &[data-variant="success"] {
+    background-color: var(--alpha-green-10);
+    color: var(--alpha-green-80);
+
+    &:hover,
+    &:focus {
+      background-color: var(--alpha-green-10);
+      color: var(--color-green);
+    }
+  }
+  &[data-variant="meta"] {
+    background-color: var(--alpha-blue-10);
+    color: var(--alpha-blue-80);
+
+    &:hover,
+    &:focus {
+      background-color: var(--alpha-blue-10);
+      color: var(--color-blue);
+    }
+  }
+`;
+const BadgeShapeStyles = css`
+  &[data-shape="square"] {
+    border-radius: 0;
+  }
+  &[data-shape="smooth"] {
+    border-radius: var(--measurement-medium-20);
+  }
+  &[data-shape="round"] {
+    border-radius: var(--measurement-large-90);
+  }
+`;
+export const BadgeWrapper = styled.div<any>`
+  &[data-raw="false"] {
+    ${BadgeBaseStyles}
+    ${BadgeVariantStyles}
+    ${BadgeShapeStyles}
+  }
+`;

package/src/button/Button.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "..";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  render: ({ ...args }) => <Button {...args} />,
+};
+export const Sizes: Story = {
+  render: ({ ...args }) => {
+    return (
+      <div className="flex g-medium-30">
+        <Button sizing="large">Large</Button>
+        <Button sizing="medium">Medium</Button>
+        <Button sizing="small">Small</Button>
+      </div>
+    );
+  },
+};
+export const Variants: Story = {
+  render: ({ ...args }) => {
+    return (
+      <div className="flex g-medium-30">
+        <Button variant="primary">Primary</Button>
+        <Button variant="secondary">Secondary</Button>
+        <Button variant="tertiary">Tertiary</Button>
+        <Button variant="mono">Mono</Button>
+        <Button variant="border">Border</Button>
+        <Button variant="ghost">Ghost</Button>
+      </div>
+    );
+  },
+};

package/src/button/index.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import React from "react";
+import { ButtonWrapper } from "./styles";
+import {
+  IComponentStyling,
+  ComponentSizeEnum,
+  IComponentSize,
+  ComponentVariantEnum,
+  IComponentVariant,
+} from "../../../../types";
+
+export interface IButtonProperties
+  extends IComponentStyling,
+    IComponentSize,
+    IComponentVariant,
+    React.ComponentPropsWithRef<"button"> {
+  rawicon?: boolean;
+}
+
+/**
+ * Buttons are used to initialize an action.
+ *
+ * **Best practices:**
+ *
+ * - Define the hierarchy of buttons with different variants.
+ * - Button label must be short and understandable.
+ *
+ * @param {IButtonProperties} props - The props for the Button component.
+ * @param {boolean} props.raw - Define whether the component is styled or not.
+ * @param {boolean} props.rawicon - Define whether the component is styles its svg children.
+ * @param {ComponentSizeEnum} props.sizing - The size of the component. Defaults to `medium`.
+ * @param {string} props.variant - The style definition used by the component.
+ * @param {ReactNode} props.children - The content to be rendered inside the button.
+ * @returns {ReactElement} The Button component.
+ */
+export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
+  (props, forwardedRef): React.ReactElement => {
+    const {
+      name,
+      variant = ComponentVariantEnum.Mono,
+      sizing = ComponentSizeEnum.Medium,
+      raw,
+      rawicon,
+      children,
+      ...restProps
+    } = props;
+
+    const defaultName = "button";
+    const ariaLabel = `${name ?? defaultName}-action`;
+    const disabledState = props.disabled ?? false;
+    const buttonType = props.type ?? "button";
+
+    const buttonDescription = `${ariaLabel}:${buttonType}`;
+    const buttonStateDescription = `disabled:${disabledState}`;
+    const ButtonFullDesc = `${buttonDescription}/${buttonStateDescription}`;
+
+    return (
+      <ButtonWrapper
+        ref={forwardedRef}
+        role="button"
+        type={buttonType}
+        name={name ?? defaultName}
+        aria-label={ariaLabel}
+        aria-description={ButtonFullDesc}
+        aria-disabled={disabledState}
+        data-variant={variant}
+        data-size={sizing}
+        data-raw={Boolean(raw)}
+        data-rawicon={Boolean(rawicon)}
+        tabIndex={0}
+        {...restProps}
+      >
+        {children}
+      </ButtonWrapper>
+    );
+  }
+);
+Button.displayName = "Button";

package/src/button/styles/index.ts

@@ -0,0 +1,180 @@
+import styled, { css } from "styled-components";
+
+const ButtonDefaultStyles = css`
+  cursor: pointer;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--measurement-medium-30);
+  font-size: var(--fontsize-medium-20);
+  height: fit-content;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: calc(
+    var(--fontsize-small-10) - ((var(--fontsize-small-10) * 1.066))
+  );
+
+  border: var(--measurement-small-10) solid transparent;
+  backdrop-filter: blur(var(--measurement-small-10));
+
+  width: fit-content;
+  transition: all ease-in-out 0.2s;
+
+  span,
+  img {
+    opacity: 0.6;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    span,
+    img {
+      opacity: 1;
+    }
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+  }
+`;
+const ButtonIconStyles = css`
+  svg {
+    width: var(--fontsize-medium-20);
+    height: var(--fontsize-medium-20);
+    fill: currentColor;
+  }
+
+  svg {
+    opacity: 0.6;
+  }
+
+  &:hover,
+  &:focus,
+  &:active {
+    svg {
+      opacity: 1;
+    }
+  }
+
+  &[data-variant="primary"] {
+    svg {
+      fill: var(--body-color);
+    }
+  }
+`;
+const ButtonVariantsStyles = css`
+  &[data-variant="primary"] {
+    color: var(--body-color) !important;
+    background-color: var(--font-color);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--body-color);
+    }
+  }
+  &[data-variant="secondary"] {
+    color: var(--font-color-alpha-60);
+    background-color: var(--body-color);
+    border-color: var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+      border-color: var(--font-color-alpha-30);
+    }
+  }
+  &[data-variant="tertiary"] {
+    color: var(--font-color-alpha-60);
+    border-color: var(--font-color-alpha-10);
+    background-color: transparent;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+      background-color: var(--font-color-alpha-10);
+      border-color: transparent;
+    }
+  }
+  &[data-variant="border"] {
+    color: var(--font-color-alpha-60);
+    background-color: transparent;
+    border-color: var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+    }
+  }
+  &[data-variant="mono"] {
+    color: var(--font-color-alpha-80);
+    background-color: var(--font-color-alpha-10);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+      border-color: var(--font-color-alpha-10);
+    }
+  }
+  &[data-variant="ghost"] {
+    border: none;
+    padding: 0;
+    background-color: transparent;
+    min-width: fit-content;
+    min-height: var(--measurement-medium-60);
+    color: var(--font-color-alpha-60);
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: var(--font-color);
+    }
+  }
+`;
+const ButtonSizeStyles = css`
+  &[data-size="small"] {
+    border-radius: var(--measurement-medium-20);
+    font-size: var(--fontsize-medium-10);
+
+    gap: var(--measurement-medium-10);
+    padding: var(--measurement-medium-10) var(--measurement-medium-30);
+    min-width: var(--measurement-medium-60);
+    min-height: var(--measurement-medium-60);
+
+    svg {
+      width: var(--fontsize-medium-10);
+      height: var(--fontsize-medium-10);
+    }
+  }
+  &[data-size="medium"] {
+    border-radius: var(--measurement-medium-30);
+    padding: var(--measurement-medium-10) var(--measurement-medium-60);
+    min-width: var(--measurement-medium-90);
+    min-height: var(--measurement-medium-80);
+  }
+  &[data-size="large"] {
+    border-radius: var(--measurement-medium-30);
+    padding: var(--measurement-medium-10) var(--measurement-medium-60);
+    min-width: var(--measurement-medium-90);
+    min-height: var(--measurement-medium-90);
+  }
+`;
+
+export const ButtonWrapper = styled.button`
+  &[data-raw="false"] {
+    ${ButtonDefaultStyles}
+    ${ButtonSizeStyles}
+    ${ButtonVariantsStyles}
+
+      &[data-rawIcon="false"] {
+      ${ButtonIconStyles}
+    }
+  }
+`;

package/src/checkbox/Checkbox.stories.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { Checkbox } from "..";
+import { ComponentVariantEnum, ComponentSizeEnum } from "../../../../types";
+
+const meta = {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="m-medium-30">
+        <Story />
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Checkbox>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {
+  argTypes: {
+    variant: {
+      options: [
+        ComponentVariantEnum.Primary,
+        ComponentVariantEnum.Mono,
+        ComponentVariantEnum.Border,
+        ComponentVariantEnum.Ghost,
+      ],
+      control: { type: "radio" },
+    },
+    sizing: {
+      options: [
+        ComponentSizeEnum.Small,
+        ComponentSizeEnum.Medium,
+        ComponentSizeEnum.Large,
+      ],
+      control: { type: "radio" },
+    },
+  },
+  render: ({ ...args }) => (
+    <Checkbox.Root>
+      <Checkbox>
+        <Checkbox.Indicator />
+      </Checkbox>
+    </Checkbox.Root>
+  ),
+};
+export const DefaultChecked: Story = {
+  render: ({ ...args }) => (
+    <Checkbox.Root>
+      <Checkbox defaultChecked onChange={() => null}>
+        <Checkbox.Indicator />
+      </Checkbox>
+    </Checkbox.Root>
+  ),
+};
+export const Group: Story = {
+  render: ({ ...args }) => (
+    <div className="flex g-medium-30">
+      {[false, false, true].map((item: boolean, key: number) => (
+        <Checkbox.Root key={`${item}-${key}`}>
+          <Checkbox defaultChecked={item} onChange={() => null}>
+            <Checkbox.Indicator />
+          </Checkbox>
+        </Checkbox.Root>
+      ))}
+    </div>
+  ),
+};
+export const Sizes: Story = {
+  render: ({ ...args }) => (
+    <div className="flex g-medium-30">
+      {["large", "medium", "small"].map((item: string) => (
+        <Checkbox.Root key={item}>
+          <Checkbox sizing={item} onChange={() => null}>
+            <Checkbox.Indicator />
+          </Checkbox>
+        </Checkbox.Root>
+      ))}
+    </div>
+  ),
+};
+export const Variants: Story = {
+  render: ({ ...args }) => (
+    <div className="flex g-medium-30">
+      {["primary", "mono", "border", "ghost"].map((item: string) => (
+        <Checkbox.Root key={item}>
+          <Checkbox name={item} variant={item}>
+            <Checkbox.Indicator />
+          </Checkbox>
+          <label id={`${item}-label`} htmlFor={item}>
+            <small>{item}</small>
+          </label>
+        </Checkbox.Root>
+      ))}
+    </div>
+  ),
+};

package/src/checkbox/hooks/index.tsx

@@ -0,0 +1,40 @@
+import React, { useState, createContext, useContext } from "react";
+import {
+  IReactChildren,
+  IComponentAPI,
+  TComponentAPI,
+} from "../../../../../types";
+
+const defaultComponentAPI = {
+  id: "",
+  states: {},
+  methods: {},
+};
+const CheckboxContext = createContext<IComponentAPI>(defaultComponentAPI);
+export const useCheckbox = () => useContext(CheckboxContext);
+
+export const CheckboxProvider = ({ children }: IReactChildren): JSX.Element => {
+  const context = useCheckboxProvider();
+
+  return (
+    <CheckboxContext.Provider value={context}>
+      {children}
+    </CheckboxContext.Provider>
+  );
+};
+
+function useCheckboxProvider(): IComponentAPI {
+  const [checked, setChecked] = useState<boolean>(false);
+  const checkboxId = React.useId();
+
+  return {
+    id: checkboxId,
+    states: {
+      checked,
+    },
+    methods: {
+      toggleChecked: () => setChecked(!checked),
+      applyChecked: (state: TComponentAPI) => setChecked(Boolean(state)),
+    },
+  };
+}

package/src/checkbox/index.tsx

@@ -0,0 +1,147 @@
+"use client";
+
+import React from "react";
+import { CheckboxProvider, useCheckbox } from "./hooks";
+import { CheckboxWrapper, NativeInput, Indicator } from "./styles";
+import {
+  IReactChildren,
+  IComponentStyling,
+  ComponentSizeEnum,
+  IComponentSize,
+  ComponentVariantEnum,
+  IComponentVariant,
+} from "../../../../types";
+
+export interface ICheckboxComposition {
+  Root: typeof CheckboxRoot;
+  Indicator: typeof CheckboxIndicator;
+}
+
+export interface ICheckboxProperties
+  extends IComponentStyling,
+    IComponentSize,
+    IComponentVariant,
+    React.ComponentProps<"input"> {}
+
+/**
+ * Checkbox are used to select one or more options from a set.
+ *
+ * **Best practices:**
+ *
+ * - Use a clear and descriptive label for each checkbox.
+ *
+ * @param {ICheckboxProperties} props - The props for the Checkbox component.
+ * @param {boolean} props.raw - Whether the checkbox is styled or not. Defaults to `false`.
+ * @param {ComponentSizeEnum} props.sizing - The size of the checkbox. Defaults to `medium`.
+ * @param {ComponentVariantEnum} props.variant - The styles used by the checkbox. Defaults to `tertiary`.
+ * @param {boolean} props.defaultChecked - The initial checked state of the checkbox..
+ * @param {ReactNode} props.children - The content to be rendered inside the checkbox.
+ * @returns {ReactElement} The Checkbox component.
+ */
+const Checkbox = (props: ICheckboxProperties) => {
+  const { states, methods } = useCheckbox();
+  const { applyChecked, toggleChecked } = methods;
+  const {
+    raw,
+    sizing = ComponentSizeEnum.Medium,
+    variant = ComponentVariantEnum.Mono,
+    name,
+    disabled,
+    required,
+    defaultChecked,
+    value,
+    onClick,
+    children,
+    ...restProps
+  } = props;
+  const defaultValue = states.checked ? "checked" : "unchecked";
+
+  const handleClick = (event: React.MouseEvent<HTMLInputElement>) => {
+    if (toggleChecked) toggleChecked();
+    if (onClick) onClick(event);
+  };
+
+  React.useEffect(() => {
+    if (defaultChecked && applyChecked) applyChecked(defaultChecked);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <CheckboxWrapper
+      role="checkbox"
+      aria-hidden="true"
+      data-state={value ?? defaultValue}
+      data-disabled={disabled}
+      data-raw={Boolean(raw)}
+      data-size={sizing}
+      data-variant={variant}
+      aria-label={props["aria-label"] ?? `${name}-checkbox`}
+    >
+      <NativeInput
+        type="checkbox"
+        tabIndex={0}
+        name={name}
+        value={value ?? defaultValue}
+        defaultChecked={Boolean(states.checked)}
+        required={required}
+        disabled={disabled}
+        onInput={handleClick}
+        data-state={defaultValue}
+        data-raw={Boolean(raw)}
+        aria-disabled={Boolean(disabled)}
+        aria-required={Boolean(required)}
+        aria-checked={Boolean(states.checked)}
+        aria-label={props["aria-label"] ?? `${name}-native-checkbox`}
+        {...restProps}
+      />
+      {children}
+    </CheckboxWrapper>
+  );
+};
+Checkbox.displayName = "Checkbox";
+
+const CheckboxRoot = (props: IReactChildren) => {
+  const { children, ...restProps } = props;
+  return <CheckboxProvider {...restProps}>{children}</CheckboxProvider>;
+};
+CheckboxRoot.displayName = "Checkbox.Root";
+
+const CheckboxIndicator = (props: React.ComponentProps<"span">) => {
+  const { states } = useCheckbox();
+  const { children, ...restProps } = props;
+
+  return (
+    <>
+      {states.checked && (
+        <Indicator {...restProps}>
+          {children ?? (
+            <svg
+              tabIndex={-1}
+              aria-hidden="true"
+              aria-label="checked-icon"
+              focusable="false"
+              width="10"
+              height="10"
+              viewBox="0 0 10 10"
+              fill="none"
+            >
+              <title>Checked</title>
+              <path
+                d="M2 5.5L4.12132 7.62132L8.36396 3.37868"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          )}
+        </Indicator>
+      )}
+    </>
+  );
+};
+CheckboxIndicator.displayName = "Checkbox.Indicator";
+
+Checkbox.Root = CheckboxRoot;
+Checkbox.Indicator = CheckboxIndicator;
+
+export { Checkbox, CheckboxRoot, CheckboxIndicator };