@usefui/components 1.5.1 → 1.5.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usefui/components",
-  "version": "1.5.1",
+  "version": "1.5.3",
   "description": "Open Source React components library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -24,16 +24,16 @@
     "styled-components": "^5.1.34"
   },
   "devDependencies": {
-    "@types/react": "^18.3.23",
+    "@types/react": "^18.3.26",
     "@types/react-dom": "^18.3.7",
     "@types/styled-components": "^5.1.34",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "styled-components": "^5.3.11",
-    "typescript": "^5.9.2",
-    "@usefui/core": "^1.3.3",
-    "@usefui/hooks": "^1.3.3",
-    "@usefui/tokens": "^1.5.2"
+    "typescript": "^5.9.3",
+    "@usefui/core": "^1.3.4",
+    "@usefui/hooks": "^1.3.4",
+    "@usefui/tokens": "^1.5.4"
   },
   "scripts": {
     "test": "vitest run --coverage --logHeapUsage",

package/src/avatar/index.tsx

@@ -34,7 +34,7 @@ export interface IAvatarProperties
  *
  * @param {IAvatarProperties} props - The props for the Avatar component.
  * @param {boolean} props.raw - Whether the avatar is styled or not.
- * @param {ComponentSizeEnum} props.sizing - The size of the avatar. Defaults to ComponentSizeEnum.Medium.
+ * @param {ComponentSizeEnum} props.sizing - The size of the avatar. Defaults to "medium".
  * @param {string} props.status - The status of the user represented by the avatar.
  * @param {string} props.src - The source URL of the image to be displayed in the avatar.
  * @param {string} props.alt - The alternative text for the image in the avatar.

package/src/badge/index.tsx

@@ -3,7 +3,7 @@
 import React from "react";
 import { BadgeWrapper } from "./styles";
 
-import { IComponentStyling } from "../../../../types";
+import type { IComponentStyling, TComponentShape } from "../../../../types";
 
 interface IBadgeProperties
   extends IComponentStyling,
@@ -16,7 +16,7 @@ interface IBadgeProperties
     | "warning"
     | "success"
     | "meta";
-  shape?: "square" | "smooth" | "round";
+  shape?: TComponentShape;
 }
 
 /**
@@ -29,7 +29,7 @@ interface IBadgeProperties
  *
  * @param {IBadgeProperties} props - The props for the Badge component.
  * @param {boolean} props.raw - Define whether the component is styled or not.
- * @param {ComponentSizeEnum} props.shape - The shape of the component. Defaults to `smooth`.
+ * @param {TComponentShape} props.shape - The shape of the component. Defaults to `smooth`.
  * @param {string} props.variant - The style definition used by the component.
  * @param {ReactNode} props.children - The content to be rendered inside the Badge.
  * @returns {ReactElement} The Badge component.

package/src/breadcrumb/Breadcrumb.stories.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import { Page, Breadcrumb } from "..";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+/**
+ *
+ */
+const meta = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Breadcrumb>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const navigate = (href: string) => {
+  console.log(href);
+};
+export const Default: Story = {
+  args: {
+    path: "",
+  },
+  render: ({ ...args }) => (
+    <Page>
+      <Page.Content>
+        <div className="flex align-center justify-center h-100">
+          <Breadcrumb path={"/test/demo-path/current-path"} navigate={navigate}>
+            <Breadcrumb.Item>Home</Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
+      </Page.Content>
+    </Page>
+  ),
+};

package/src/breadcrumb/index.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import React from "react";
+
+import { ItemWrapper, SeparatorItem } from "./styles";
+import { Button, type IButtonProperties } from "../";
+
+const SEGMENT_SEPARATOR = "/";
+
+interface BreadcrumbProps extends React.ComponentProps<"div"> {
+  navigate?: (href: string) => void;
+  capitalizeItems?: boolean;
+  path: string;
+}
+interface BreadcrumbItemProps extends IButtonProperties {
+  isLastItem?: boolean;
+}
+export interface BreadcrumbComposition {
+  Item: typeof BreadcrumbItem;
+  Separator: typeof BreadcrumbSeparator;
+}
+
+/**
+ * Breadcrumb Item are used to display the path to the current resource.
+ *
+ * @param {BreadcrumbItemProps} props - The props for the Breadcrumb Item component.
+ * @param {boolean} props.isLastItem - Render the item as latest on the links hierarchy.
+ * @returns {ReactElement} The Breadcrumb Item component.
+ */
+const BreadcrumbItem = (props: BreadcrumbItemProps) => {
+  const { isLastItem = false, children, ...restProps } = props;
+
+  return (
+    <Button sizing="small" variant="ghost" {...restProps}>
+      <ItemWrapper data-current={isLastItem}>{children}</ItemWrapper>
+    </Button>
+  );
+};
+BreadcrumbItem.displayName = "Breadcrumb.Item";
+
+/**
+ * Breadcrumb Separators are used to display hierarchy of links.
+ *
+ * @param {React.ComponentProps<"span">} props - The props for the Breadcrumb Separators component.
+ * @returns {ReactElement} The Breadcrumb Separators component.
+ */
+const BreadcrumbSeparator = (props: React.ComponentProps<"span">) => {
+  const { children } = props;
+
+  return <SeparatorItem>{children ?? SEGMENT_SEPARATOR}</SeparatorItem>;
+};
+BreadcrumbSeparator.displayName = "Breadcrumb.Separator";
+
+/**
+ * Breadcrumbs are used to display the path to the current resource using a hierarchy of links.
+ *
+ * @param {BreadcrumbProps} props - The props for the Breadcrumb component.
+ * @param {boolean} props.capitalizeItems - Render the current path with a capitalized case. Defaults to 'true'.
+ * @param {string} props.path - The current path.
+ * @param {function} props.navigate - The function used to redirect to the path route.
+ * @returns {ReactElement} The Breadcrumb component.
+ */
+const Breadcrumb = (props: BreadcrumbProps) => {
+  const { path, navigate, capitalizeItems = true, children } = props;
+
+  const segments = path.split(SEGMENT_SEPARATOR).filter(Boolean);
+  const items = segments.map((segment, index) => {
+    const href = `/${segments.slice(0, index + 1).join(SEGMENT_SEPARATOR)}`;
+    const isLastItem = index === segments.length - 1;
+
+    return {
+      href,
+      label: segment,
+      isLastItem,
+    };
+  });
+
+  const breadcrumbLabel = (segment: string) => {
+    return capitalizeItems
+      ? segment.charAt(0).toUpperCase() + segment.slice(1).replace(/-/g, " ")
+      : segment.replace(/-/g, " ");
+  };
+
+  const handleNavigate = React.useCallback((href: string) => {
+    if (navigate) navigate(href);
+  }, []);
+
+  if (path === SEGMENT_SEPARATOR) return null;
+  return (
+    <div className="flex align-center g-medium-30">
+      {children && (
+        <React.Fragment>
+          {children}
+          <Breadcrumb.Separator />
+        </React.Fragment>
+      )}
+      {items.map((item, key) => (
+        <React.Fragment key={key}>
+          <Breadcrumb.Item
+            isLastItem={item.isLastItem}
+            disabled={!navigate}
+            onClick={() => handleNavigate(item.href)}
+          >
+            {breadcrumbLabel(item.label)}
+          </Breadcrumb.Item>
+          {!item.isLastItem && <Breadcrumb.Separator />}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+Breadcrumb.displayName = "Breadcrumb";
+
+Breadcrumb.Item = BreadcrumbItem;
+Breadcrumb.Separator = BreadcrumbSeparator;
+
+export { Breadcrumb, BreadcrumbItem, BreadcrumbSeparator };

package/src/breadcrumb/styles/index.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import styled from "styled-components";
+
+export const ItemWrapper = styled.span`
+  width: 100%;
+  line-clamp: 2;
+  word-break: break-all;
+
+  &[data-current="true"] {
+    opacity: 1 !important;
+  }
+`;
+
+export const SeparatorItem = styled.span`
+  color: var(--font-color-alpha-10) !important;
+  user-select: none;
+  pointer-events: none;
+`;

package/src/button/Button.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
-import { Button } from "..";
+import { Button, Page } from "..";
 
 const meta = {
   title: "Components/Button",
@@ -31,17 +31,89 @@ export const Sizes: Story = {
     );
   },
 };
-export const Variants: Story = {
+export const Shapes: 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>
+        <Button shape="square">Square</Button>
+        <Button shape="smooth">Smooth</Button>
+        <Button shape="round">Round</Button>
       </div>
     );
   },
 };
+export const Variants: Story = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content className="flex align-center justify-center">
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button variant="primary">Primary</Button>
+            <Button variant="secondary">Secondary</Button>
+            <Button variant="tertiary">Tertiary</Button>
+            <Button variant="danger">Danger</Button>
+            <Button variant="warning">Warning</Button>
+            <Button variant="mono">Mono</Button>
+            <Button variant="border">Border</Button>
+            <Button variant="ghost">Ghost</Button>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};
+export const Animations: Story = {
+  render: ({ ...args }) => {
+    return (
+      <Page>
+        <Page.Content className="flex flex-column g-medium-30 align-center justify-center">
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button animation="reflective" variant="primary">
+              Primary
+            </Button>
+            <Button animation="reflective" variant="secondary">
+              Secondary
+            </Button>
+            <Button animation="reflective" variant="tertiary">
+              Tertiary
+            </Button>
+            <Button animation="reflective" variant="danger">
+              Danger
+            </Button>
+            <Button animation="reflective" variant="warning">
+              Warning
+            </Button>
+            <Button animation="reflective" variant="mono">
+              Mono
+            </Button>
+            <Button animation="reflective" variant="border">
+              Border
+            </Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button animation="reflective" variant="border" sizing="small">
+              Small
+            </Button>
+            <Button animation="reflective" variant="border" sizing="medium">
+              Medium
+            </Button>
+            <Button animation="reflective" variant="border" sizing="large">
+              Large
+            </Button>
+          </div>
+          <div className="flex align-center justify-center g-medium-30 flex-wrap">
+            <Button animation="reflective" variant="border" shape="square">
+              Square
+            </Button>
+            <Button animation="reflective" variant="border" shape="smooth">
+              Smooth
+            </Button>
+            <Button animation="reflective" variant="border" shape="round">
+              Round
+            </Button>
+          </div>
+        </Page.Content>
+      </Page>
+    );
+  },
+};

package/src/button/index.tsx

@@ -1,21 +1,25 @@
 "use client";
 
 import React from "react";
-import { ButtonWrapper } from "./styles";
+
+import { ButtonWrapper, ButtonMaskElement, ButtonOverlay } from "./styles";
 import {
   IComponentStyling,
   ComponentSizeEnum,
   IComponentSize,
   ComponentVariantEnum,
-  IComponentVariant,
+  TComponentVariant,
+  TComponentShape,
 } from "../../../../types";
 
 export interface IButtonProperties
   extends IComponentStyling,
     IComponentSize,
-    IComponentVariant,
     React.ComponentPropsWithRef<"button"> {
   rawicon?: boolean;
+  variant?: TComponentVariant | "danger" | "warning";
+  shape?: TComponentShape;
+  animation?: "reflective";
 }
 
 /**
@@ -29,8 +33,10 @@ export interface IButtonProperties
  * @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 {ComponentSizeEnum} props.sizing - The size of the component. Defaults to "medium".
+ * @param {TComponentShape} props.shape - The size of the component. Defaults to `smooth`.
  * @param {string} props.variant - The style definition used by the component.
+ * @param {string} props.animation - The animation that comes with the variant.
  * @param {ReactNode} props.children - The content to be rendered inside the button.
  * @returns {ReactElement} The Button component.
  */
@@ -38,10 +44,15 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
   (props, forwardedRef): React.ReactElement => {
     const {
       name,
-      variant = ComponentVariantEnum.Mono,
+      variant = ComponentVariantEnum.Primary,
       sizing = ComponentSizeEnum.Medium,
+      shape = "smooth",
+      animation,
       raw,
       rawicon,
+      onMouseMove,
+      onMouseEnter,
+      onMouseLeave,
       children,
       ...restProps
     } = props;
@@ -55,6 +66,43 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
     const buttonStateDescription = `disabled:${disabledState}`;
     const ButtonFullDesc = `${buttonDescription}/${buttonStateDescription}`;
 
+    const isReflective = animation === "reflective" && variant !== "ghost";
+
+    const [position, setPosition] = React.useState({ x: 0, y: 0 });
+    const [isHovering, setIsHovering] = React.useState(false);
+
+    const handleMouseMove = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (onMouseMove) onMouseMove(e);
+        if (!isReflective) return;
+
+        const rect = e.currentTarget.getBoundingClientRect();
+        setPosition({
+          x: ((e.clientX - rect.left) / rect.width) * 100,
+          y: ((e.clientY - rect.top) / rect.height) * 100,
+        });
+      },
+      []
+    );
+    const handleMouseEnter = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (onMouseEnter) onMouseEnter(e);
+        if (!isReflective) return;
+
+        setIsHovering(true);
+      },
+      []
+    );
+    const handleMouseLeave = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (onMouseLeave) onMouseLeave(e);
+        if (!isReflective) return;
+
+        setIsHovering(false);
+      },
+      []
+    );
+
     return (
       <ButtonWrapper
         ref={forwardedRef}
@@ -66,11 +114,25 @@ export const Button = React.forwardRef<HTMLButtonElement, IButtonProperties>(
         aria-disabled={disabledState}
         data-variant={variant}
         data-size={sizing}
+        data-shape={shape}
+        data-animation={animation}
         data-raw={Boolean(raw)}
         data-rawicon={Boolean(rawicon)}
         tabIndex={0}
+        onMouseMove={handleMouseMove}
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
         {...restProps}
       >
+        {isReflective && (
+          <ButtonOverlay $isHovering={isHovering} data-shape={shape}>
+            <ButtonMaskElement
+              $mouseX={position.x}
+              $mouseY={position.y}
+              data-shape={shape}
+            />
+          </ButtonOverlay>
+        )}
         {children}
       </ButtonWrapper>
     );

package/src/button/styles/index.ts

@@ -1,5 +1,14 @@
 import styled, { css } from "styled-components";
 
+interface OverlayProps {
+  $isHovering: boolean;
+}
+
+interface MaskProps {
+  $mouseX: number;
+  $mouseY: number;
+}
+
 const ButtonDefaultStyles = css`
   cursor: pointer;
   position: relative;
@@ -26,6 +35,11 @@ const ButtonDefaultStyles = css`
     opacity: 0.6;
   }
 
+  svg,
+  span {
+    transition: all 0.2s ease-in-out;
+  }
+
   &:hover,
   &:focus,
   &:active {
@@ -78,19 +92,19 @@ const ButtonVariantsStyles = css`
   }
   &[data-variant="secondary"] {
     color: var(--font-color-alpha-60);
-    background-color: var(--body-color);
+    background-color: transparent;
     border-color: var(--font-color-alpha-10);
 
     &:hover,
     &:focus,
     &:active {
       color: var(--font-color);
-      border-color: var(--font-color-alpha-30);
+      background-color: var(--font-color-alpha-10);
+      border-color: transparent;
     }
   }
   &[data-variant="tertiary"] {
-    color: var(--font-color-alpha-60);
-    border-color: var(--font-color-alpha-10);
+    color: var(--font-color-alpha-80);
     background-color: transparent;
 
     &:hover,
@@ -98,7 +112,6 @@ const ButtonVariantsStyles = css`
     &:active {
       color: var(--font-color);
       background-color: var(--font-color-alpha-10);
-      border-color: transparent;
     }
   }
   &[data-variant="border"] {
@@ -110,6 +123,27 @@ const ButtonVariantsStyles = css`
     &:focus,
     &:active {
       color: var(--font-color);
+      border-color: var(--font-color-alpha-20);
+    }
+  }
+  &[data-variant="danger"] {
+    color: var(--color-mono-white);
+    background-color: var(--color-red);
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--shade-red-10);
+    }
+  }
+  &[data-variant="warning"] {
+    color: var(--color-mono-dark);
+    background-color: var(--color-orange);
+
+    &:hover,
+    &:focus,
+    &:active {
+      background-color: var(--shade-orange-10);
     }
   }
   &[data-variant="mono"] {
@@ -140,8 +174,7 @@ const ButtonVariantsStyles = css`
 `;
 const ButtonSizeStyles = css`
   &[data-size="small"] {
-    border-radius: var(--measurement-medium-20);
-    font-size: var(--fontsize-medium-10);
+    font-size: var(--fontsize-small-60);
 
     gap: var(--measurement-medium-10);
     padding: var(--measurement-medium-10) var(--measurement-medium-30);
@@ -154,27 +187,66 @@ const ButtonSizeStyles = css`
     }
   }
   &[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);
   }
 `;
+const ButtonShapeStyles = 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 ButtonWrapper = styled.button`
   &[data-raw="false"] {
     ${ButtonDefaultStyles}
     ${ButtonSizeStyles}
+    ${ButtonShapeStyles}
     ${ButtonVariantsStyles}
-
       &[data-rawIcon="false"] {
       ${ButtonIconStyles}
     }
   }
 `;
+export const ButtonOverlay = styled.div<OverlayProps>`
+  position: absolute;
+  inset: -1px;
+  pointer-events: none;
+  opacity: ${(props) => (props.$isHovering ? 1 : 0)};
+  background: transparent;
+  transition: opacity 0.2s ease-in-out;
+
+  ${ButtonShapeStyles}
+`;
+export const ButtonMaskElement = styled.div<MaskProps>`
+  position: absolute;
+  inset: 0;
+  background: transparent;
+  border: var(--measurement-small-10) solid var(--font-color-alpha-20);
+  clip-path: inset(0 round var(--measurement-medium-30));
+
+  mask-image: radial-gradient(
+    circle at ${(props) => props.$mouseX}% ${(props) => props.$mouseY}%,
+    var(--body-color),
+    transparent 100%
+  );
+  -webkit-mask-image: radial-gradient(
+    circle at ${(props) => props.$mouseX}% ${(props) => props.$mouseY}%,
+    var(--body-color),
+    transparent 100%
+  );
+
+  ${ButtonShapeStyles}
+`;

package/src/card/Card.stories.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Page, Card, Button } from "..";
+
+import type { Meta } from "@storybook/react";
+
+/**
+ *
+ */
+const meta = {
+  title: "Components/Card",
+  component: Card,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Card>;
+export default meta;
+
+export const Default = {
+  render: () => (
+    <Page>
+      <Page.Content className="p-medium-60">
+        <Card.Grid sizing="medium">
+          <Card>
+            <Card.Meta>
+              <p className="fs-medium-10 opacity-default-30">Header</p>
+            </Card.Meta>
+            <Card.Body>
+              <header className="flex align-start justify-between g-medium-30 w-100">
+                <div>
+                  <p className="fs-medium-30">Title</p>
+                  <p className="fs-medium-20 opacity-default-30">
+                    Lorem ipsum dolor sit amet consectetur.
+                  </p>
+                </div>
+                <div>
+                  <Button variant="border" sizing="small">
+                    Action
+                  </Button>
+                </div>
+              </header>
+
+              <p className="fs-medium-20">
+                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
+                Repellat a corporis exercitationem.
+              </p>
+
+              <div className="w-100 grid g-medium-10">
+                <Button sizing="large">Primary</Button>
+              </div>
+            </Card.Body>
+            <Card.Meta>
+              <p className="fs-medium-10 opacity-default-30">Footer</p>
+            </Card.Meta>
+          </Card>
+        </Card.Grid>
+      </Page.Content>
+    </Page>
+  ),
+};