@fpkit/acss 0.5.7 → 0.5.9

package/src/components/alert/alert.scss

@@ -74,7 +74,7 @@
   button {
     &[data-btn~="icon"] {
       --btn-bg: transparent;
-      max-height: fit-content;
+      // max-height: 1.5rem;
     }
   }
 }

package/src/components/alert/alert.stories.tsx

@@ -118,13 +118,13 @@ export const InteractionTest: Story = {
         expect(dismissButton).toBeInTheDocument();
       }
     );
-    // await step(
-    //   "Tab through the alert and check if the button gets focused",
-    //   async () => {
-    //     userEvent.tab({ delay: 500 });
-    //     expect(dismissButton).toHaveFocus();
-    //   }
-    // );
+    await step(
+      "Tab through the alert and check if the button gets focused",
+      async () => {
+        await userEvent.tab({ delay: 500 });
+        expect(dismissButton).toHaveFocus();
+      }
+    );
     await step("Click the button to dismiss the alert", async () => {
       await userEvent.click(dismissButton, { delay: 500 });
       expect(alert).not.toBeInTheDocument();

package/src/components/alert/alert.tsx

@@ -44,6 +44,11 @@ export type AlertProps = {
    */
   iconSize?: number;
 
+  /**
+   * Whether to hide the icon.
+   */
+  hideIcon?: boolean;
+
   /**
    * Additional props to pass to the Icon component.
    */
@@ -75,7 +80,9 @@ export type AlertProps = {
  * ```
  *
  * @see {@link AlertProps} for available configuration options
- */ const Alert: React.FC<AlertProps> = ({
+ */
+
+const Alert: React.FC<AlertProps> = ({
   open,
   severity = "default",
   children,
@@ -84,6 +91,7 @@ export type AlertProps = {
   onDismiss,
   iconSize,
   iconProps,
+  hideIcon,
   ...props
 }) => {
   const [isVisible, setIsVisible] = React.useState(open);
@@ -137,7 +145,7 @@ export type AlertProps = {
       data-alert={severity}
       {...props}
     >
-      <UI aria-hidden="true">{severityIcons[severity]}</UI>
+      {!hideIcon && <UI aria-hidden="true">{severityIcons[severity]}</UI>}
       <UI as="div" className="alert-message">
         {title && (
           <UI as="h3" className="alert-title">

package/src/components/badge/badge.tsx

@@ -1,17 +1,25 @@
-import UI from '#components/ui'
-import React from 'react'
+import UI from "#components/ui";
+import React from "react";
 
-export type BadgeProps = {
-  children: React.ReactNode
-} & React.ComponentProps<typeof UI>
+export interface BadgeProps extends React.ComponentProps<typeof UI> {
+  id?: string;
+  styles?: React.CSSProperties;
+  className?: string;
+  children: React.ReactNode;
+}
 
-const Badge = ({ id, styles, classes, children, ...props }: BadgeProps) => {
+const Badge: React.FC<BadgeProps> = ({
+  id,
+  styles,
+  className,
+  children,
+  ...props
+}) => {
   return (
-    <UI as="sup" id={id} styles={styles} className={classes} {...props}>
+    <UI as="sup" id={id} styles={styles} className={className} {...props}>
       <UI as="span">{children}</UI>
     </UI>
-  )
-}
+  );
+};
 
-export default Badge
-Badge.displayName = 'Badge'
+export default Badge;

package/src/components/breadcrumbs/README.mdx

@@ -0,0 +1,91 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="FP.REACT Components/Breadcrumb/Readme" />
+
+# Breadcrumb Component
+
+## Summary
+
+The `Breadcrumb` component is used to display a breadcrumb navigation for the
+current page. It supports custom routes, starting routes, and truncation of long
+breadcrumb names.
+
+## Features
+
+- Customizable routes and starting route
+- Truncation of long breadcrumb names
+- Customizable spacer between breadcrumb items
+- Accessible with ARIA labels
+
+## Props
+
+```ts
+type customRoute = {
+  path?: string;
+  name: string;
+  url?: string;
+};
+
+type BreadcrumbProps = {
+  routes?: customRoute[];
+  startRoute?: React.ReactNode;
+  startRouteUrl?: string;
+  spacer?: React.ReactNode;
+  currentRoute?: string;
+  ariaLabelPrefix?: string;
+  truncateLength?: number;
+  linkProps?: React.ComponentProps<typeof Link>;
+} & React.ComponentProps<typeof UI>;
+```
+
+## Technical Details
+
+The `Breadcrumb` component uses the `UI` and `Link` components for rendering the
+breadcrumb items and links. It also uses the `Truncate` utility to truncate long
+breadcrumb names.
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import Breadcrumb from './breadcrumb'
+
+const routes = [
+  { path: '/home', name: 'Home' },
+  { path: '/about', name: 'About' },
+  { path: '/contact', name: 'Contact' },
+]
+
+<Breadcrumb routes={routes} currentRoute="/about" />
+```
+
+### Advanced Usage
+
+```tsx
+import Breadcrumb from './breadcrumb'
+
+const routes = [
+  { path: '/home', name: 'Home' },
+  { path: '/about', name: 'About Us', url: '/about-us' },
+  { path: '/contact', name: 'Contact Us', url: '/contact-us' },
+]
+
+<Breadcrumb
+  routes={routes}
+  currentRoute="/contact"
+  startRoute="Dashboard"
+  startRouteUrl="/dashboard"
+  spacer={<span className="mx-2">/</span>}
+  ariaLabelPrefix="You are here:"
+  truncateLength={10}
+  linkProps={{ className: 'text-blue-500 hover:underline' }}
+/>
+```
+
+### Additional Notes
+
+- Ensure to provide meaningful names for the routes to enhance accessibility.
+- Customize the `spacer` prop to match your design requirements.
+- Use the `truncateLength` prop to control the maximum length of breadcrumb
+  names.

package/src/components/breadcrumbs/breadcrumb.tsx

@@ -1,38 +1,38 @@
 // Code: Breadcrumb component
-import React from 'react'
-import UI from '#components/ui'
-import { Truncate } from '#libs/content'
-import Link from '#components/link/link'
+import React from "react";
+import UI from "#components/ui";
+import { Truncate } from "#libs/content";
+import Link from "#components/link/link";
 
 // TYPES
 
 type customRoute = {
   /** The path or id for routing */
-  path?: string
+  path?: string;
   /** The display name */
-  name: string
+  name: string;
   /** The url if linking out */
-  url?: string
-}
+  url?: string;
+};
 
 type BreadcrumbProps = {
   /** Array of custom route objects */
-  routes?: customRoute[]
+  routes?: customRoute[];
   /** Starting route node */
-  startRoute?: React.ReactNode
+  startRoute?: React.ReactNode;
   /* Starting route url */
-  startRouteUrl?: string
+  startRouteUrl?: string;
   /** Spacer node between routes */
-  spacer?: React.ReactNode
+  spacer?: React.ReactNode;
   /** String representing current route */
-  currentRoute?: string
+  currentRoute?: string;
   /** Prefix breadcrumb aria-label - "prefix breadcrumb" */
-  ariaLabelPrefix?: string
+  ariaLabelPrefix?: string;
   /** Truncate breadcrumb text after this length */
-  truncateLength?: number
+  truncateLength?: number;
   /** Link props for breadcrumb links */
-  linkProps?: React.ComponentProps<typeof Link>
-} & React.ComponentProps<typeof UI>
+  linkProps?: React.ComponentProps<typeof Link>;
+} & React.ComponentProps<typeof UI>;
 
 // Components
 
@@ -53,11 +53,17 @@ const Items = ({
   ...props
 }: React.ComponentProps<typeof UI>) => {
   return (
-    <li data-list="unstyled inline" {...props}>
+    <li
+      id={id}
+      style={styles}
+      className={classes}
+      data-list="unstyled inline"
+      {...props}
+    >
       {children}
     </li>
-  )
-}
+  );
+};
 
 /**
  * List component.
@@ -70,8 +76,8 @@ const List = ({ children, ...props }: React.ComponentProps<typeof UI>) => {
     <UI as="ol" data-list="unstyled inline" {...props}>
       {children}
     </UI>
-  )
-}
+  );
+};
 
 /**
  * Nav component.
@@ -93,8 +99,8 @@ const Nav = ({
     <UI as="nav" id={id} styles={styles} className={classes} {...props}>
       <List>{children}</List>
     </UI>
-  )
-}
+  );
+};
 
 /**
  * Navigation component for breadcrumbs.
@@ -110,7 +116,7 @@ const Nav = ({
  * @param props.children - Child components.
  */
 export const Breadcrumb = ({
-  startRoute = 'Home',
+  startRoute = "Home",
   startRouteUrl = "/",
   currentRoute,
   spacer = <>&#47;</>,
@@ -123,13 +129,13 @@ export const Breadcrumb = ({
   linkProps,
   ...props
 }: BreadcrumbProps): React.JSX.Element => {
-  const [currentPath, setCurrentPath] = React.useState('')
+  const [currentPath, setCurrentPath] = React.useState("");
   React.useEffect(() => {
-    const path = currentRoute || window.location.pathname
+    const path = currentRoute || window.location.pathname;
     if (path.length) {
-      setCurrentPath(path)
+      setCurrentPath(path);
     }
-  }, [currentRoute])
+  }, [currentRoute]);
 
   /**
    * Gets the path name for the given path segment.
@@ -138,23 +144,22 @@ export const Breadcrumb = ({
    * @returns The path name object for the given path segment.
    */
   const getPathName = (pathSegment: string): customRoute => {
-    const route = routes?.find((route) => route.path === pathSegment)
+    const route = routes?.find((route) => route.path === pathSegment);
 
     return {
       path: route?.path || pathSegment,
       name: route?.name || pathSegment,
       url: route?.url || pathSegment,
-    }
-  }
+    };
+  };
 
   /** Array of path segments from current path */
-  const segments = currentPath.split('/').filter((segment) => segment)
+  const segments = currentPath.split("/").filter((segment) => segment);
   /** Index of last item in segments array */
-  const lastSegment = segments.length - 1
+  const lastSegment = segments.length - 1;
 
   /** Unique id for breadcrumb */
-  const uuid = React.useId()
-
+  const uuid = React.useId();
 
   return currentPath.length ? (
     <Nav
@@ -165,62 +170,62 @@ export const Breadcrumb = ({
       aria-label={ariaLabelPrefix}
     >
       <Items key={`${startRoute}-${uuid}`}>
-        <Link href={startRouteUrl} {...linkProps}>{startRoute}</Link>
+        <Link href={startRouteUrl} {...linkProps}>
+          {startRoute}
+        </Link>
       </Items>
       <>
-      {segments.length ? (
-        segments.map((segment: any, index: number) => {
-          const currentSegment = getPathName(segment)
-          const { name, url, path } = currentSegment
-          return index === lastSegment ? (
-            <>
-              {typeof segments[lastSegment] === 'string' &&
-                segments[lastSegment].length > 3 &&
-                segments[lastSegment] !== segments[lastSegment - 1] && (
-                  <Items  key={`${path || index}-${uuid}`}>
-                     
-                      <span aria-hidden="true">{spacer}</span>
-                      <a
-                      href="#"
-                        aria-current="page"
-                        aria-label={
-                          name.length > truncateLength ? name : undefined
-                        }
-                      >
-                        {Truncate(decodeURIComponent(name), truncateLength)}
-                      </a>
-                     
-                  </Items>
-                )}
-            </>
-          ) : (
-            <Items key={`${currentSegment?.name}-${uuid}`}>
-              <span aria-hidden="true">{spacer}</span>
-              <span>
-                <Link
-                  href={url}
-                  aria-label={name.length > truncateLength ? name : undefined}
-                 {...linkProps}
-                >
-                  {Truncate(decodeURIComponent(name), truncateLength)}
-                </Link>
-              </span>
-            </Items>
-          );
-        })
-      ) : (
-        null
-      )}
+        {segments.length
+          ? segments.map((segment: string, index: number) => {
+              const currentSegment = getPathName(segment);
+              const { name, url, path } = currentSegment;
+              return index === lastSegment ? (
+                <>
+                  {typeof segments[lastSegment] === "string" &&
+                    segments[lastSegment].length > 3 &&
+                    segments[lastSegment] !== segments[lastSegment - 1] && (
+                      <Items key={`${path || index}-${uuid}`}>
+                        <span aria-hidden="true">{spacer}</span>
+                        <a
+                          href="#"
+                          aria-current="page"
+                          aria-label={
+                            name.length > truncateLength ? name : undefined
+                          }
+                        >
+                          {Truncate(decodeURIComponent(name), truncateLength)}
+                        </a>
+                      </Items>
+                    )}
+                </>
+              ) : (
+                <Items key={`${currentSegment?.name}-${uuid}`}>
+                  <span aria-hidden="true">{spacer}</span>
+                  <span>
+                    <Link
+                      href={url}
+                      aria-label={
+                        name.length > truncateLength ? name : undefined
+                      }
+                      {...linkProps}
+                    >
+                      {Truncate(decodeURIComponent(name), truncateLength)}
+                    </Link>
+                  </span>
+                </Items>
+              );
+            })
+          : null}
       </>
     </Nav>
   ) : (
     <></>
-  )
-}
+  );
+};
 
-export default Breadcrumb
+export default Breadcrumb;
 
-Breadcrumb.displayName = 'BreadCrumb'
-Breadcrumb.Nav = Nav
-Breadcrumb.List = List
-Breadcrumb.Items = Items
+Breadcrumb.displayName = "BreadCrumb";
+Breadcrumb.Nav = Nav;
+Breadcrumb.List = List;
+Breadcrumb.Items = Items;

package/src/components/buttons/README.mdx

@@ -0,0 +1,96 @@
+import { Meta } from "@storybook/blocks";
+
+<Meta title="FP.REACT Components/Buttons/Readme" />
+
+# Button
+
+## Summary
+
+The `Button` component is a versatile and customizable button element that
+supports various types and styles. It is designed to be reusable and accessible.
+
+## Features
+
+- Supports `button`, `submit`, and `reset` types
+- Customizable styles and classes
+- Handles various pointer events
+- Accessible with `aria-disabled` attribute
+
+## Props
+
+| Name             | Type                                                 | Default    | Description                            |
+| ---------------- | ---------------------------------------------------- | ---------- | -------------------------------------- |
+| `type`           | `'button' \| 'submit' \| 'reset'`                    | `'button'` | The button type                        |
+| `styles`         | `React.CSSProperties`                                | -          | Inline styles for the button           |
+| `disabled`       | `boolean`                                            | `false`    | Disables the button when set to `true` |
+| `classes`        | `string`                                             | -          | Additional CSS classes for the button  |
+| `onPointerDown`  | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer down event        |
+| `onPointerOver`  | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer over event        |
+| `onPointerLeave` | `(e: React.PointerEvent<HTMLButtonElement>) => void` | -          | Callback for pointer leave event       |
+| `onClick`        | `(e: React.MouseEvent<HTMLButtonElement>) => void`   | -          | Callback for click event               |
+
+## Technical Details
+
+The `Button` component uses the `UI` component from the `#components/ui`
+library. It handles various pointer events and ensures accessibility by using
+the `aria-disabled` attribute.
+
+## Usage Example
+
+### Basic Usage
+
+```tsx
+import React from "react";
+import Button from "#components/buttons/button";
+
+const handleClick = () => {
+  console.log("Button clicked");
+};
+
+const BasicButton = () => (
+  <Button type="button" onClick={handleClick}>
+    Click Me
+  </Button>
+);
+
+export default BasicButton;
+```
+
+### Advanced Usage
+
+```tsx
+import React from "react";
+import Button from "#components/buttons/button";
+
+const handlePointerDown = (e: React.PointerEvent<HTMLButtonElement>) => {
+  console.log("Pointer down", e);
+};
+
+const handlePointerOver = (e: React.PointerEvent<HTMLButtonElement>) => {
+  console.log("Pointer over", e);
+};
+
+const handlePointerLeave = (e: React.PointerEvent<HTMLButtonElement>) => {
+  console.log("Pointer leave", e);
+};
+
+const AdvancedButton = () => (
+  <Button
+    type="submit"
+    styles={{ backgroundColor: "blue", color: "white" }}
+    onPointerDown={handlePointerDown}
+    onPointerOver={handlePointerOver}
+    onPointerLeave={handlePointerLeave}
+  >
+    Submit
+  </Button>
+);
+
+export default AdvancedButton;
+```
+
+## Additional Notes
+
+- Ensure the `type` prop is set to one of `'button'`, `'submit'`, or `'reset'`.
+- The `styles` prop can be used to apply inline styles to the button.
+- The `disabled` prop can be used to disable the button.

package/src/components/buttons/button.scss

@@ -2,18 +2,20 @@ button {
   --btn-xs: 0.6rem;
   --btn-sm: 0.7rem;
   --btn-md: 0.85rem;
-  --btn-lg: calc(21rem / 16);
+  --btn-lg: 1.3125rem;
   --btn-pill: 100rem;
   --btn-height: 2.5rem;
   --fs: 0.95rem;
   --btn-fs: 0.9375rem;
   --btn-bg: lightgray;
   --btn-width: max-content;
+  --btn-calc-height: var(--btn-height, calc(40rem / 16));
 
   font-size: var(--btn-fs);
   font-weight: var(--btn-fw, 500);
   height: var(--btn-height, calc(40rem / 16));
-  min-height: var(--btn-height);
+  max-height: var(--btn-calc-height);
+  min-height: 1.5rem;
   place-items: var(--btn-place, center);
   padding-inline: var(--btn-px, calc(var(--btn-fs) + 1.1%));
   padding-block: var(--btn-py, calc(var(--btn-fs) + 0.75%));