@fpkit/acss 0.5.9 → 0.5.11

package/src/components/layout/main.stories.tsx

@@ -1,38 +1,35 @@
-import { StoryObj, Meta } from '@storybook/react'
+import { StoryObj, Meta } from "@storybook/react-vite";
 /**
  * Import testing library dependencies
  */
-import { within, userEvent, expect } from '@storybook/test'
+import { within, expect } from "storybook/test";
 
 /**
  * Import jest matchers
  */
 
-
-import { Main } from './landmarks'
+import { Main } from "./landmarks";
 
 const meta: Meta<typeof Main> = {
-  title: 'FP.React Components/Layout/Landmarks',
+  title: "FP.React Components/Layout/Landmarks",
   component: Main,
   args: {
-    // @ts-ignore
     children: (
       <section>
         The main HTML element represents the dominant content of the body of a
         document.
       </section>
     ),
-    // @ts-ignore
-    'data-testid': 'main',
+    "data-testid": "main",
   },
   decorators: [
     (Story) => (
-      <div style={{ minHeight: '80vh', display: 'flex' }}>
+      <div style={{ minHeight: "80vh", display: "flex" }}>
         <Story />
       </div>
     ),
   ],
-} as Meta
+} as Meta;
 
 const mainChildren = () => (
   <>
@@ -61,30 +58,29 @@ const mainChildren = () => (
       </aside>
     </section>
   </>
-)
+);
 
-export default meta
-type Story = StoryObj<typeof Main>
+export default meta;
+type Story = StoryObj<typeof Main>;
 
 export const MainLandmark: Story = {
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const main = canvas.getByRole('main')
-    expect(main).toBeInTheDocument()
+    const canvas = within(canvasElement);
+    const main = canvas.getByRole("main");
+    expect(main).toBeInTheDocument();
   },
-}
+};
 
 export const MainArticles: Story = {
   args: {
-    // @ts-ignore
     children: mainChildren(),
   },
   play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-    const main = canvas.getByRole('main')
-    expect(main).toBeInTheDocument()
-    const title = canvas.getByRole('heading')
-    expect(title).toBeInTheDocument()
-    expect(title).toHaveTextContent('Header Title')
+    const canvas = within(canvasElement);
+    const main = canvas.getByRole("main");
+    expect(main).toBeInTheDocument();
+    const title = canvas.getByRole("heading");
+    expect(title).toBeInTheDocument();
+    expect(title).toHaveTextContent("Header Title");
   },
-}
+};

package/src/components/link/link.stories.tsx

@@ -1,6 +1,6 @@
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react-vite";
 
-import { within, expect } from "@storybook/test";
+import { within, expect } from "storybook/test";
 
 import Link from "./link";
 import "../../styles/link/link.css";

package/src/components/list/list.stories.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react-vite";
 
-// import { within, userEvent } from "@storybook/test";
+// import { within, userEvent } from "storybook/test";
 
 import List from "./list";
 

package/src/components/nav/nav.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import React from "react";
 

package/src/components/popover/popover.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect, userEvent } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect, userEvent } from "storybook/test";
 
 import Popover from "./popover";
 

package/src/components/progress/progress.stories.tsx

@@ -1,4 +1,4 @@
-import { StoryObj, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react-vite";
 
 import "../../styles/progress/progress.css";
 

package/src/components/tag/tag.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Tag from "./tag";
 import "./tag.scss";

package/src/components/text/text.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-import { within, expect } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+import { within, expect } from "storybook/test";
 
 import Text from "./text";
 

package/src/components/text/text.tsx

@@ -1,53 +1,54 @@
 // import FP from '../fp'
-import React from "react";
-import UI from "#components/ui";
+import React from 'react'
+import UI from '#components/ui'
 
-type InheritedProps = React.ComponentProps<typeof UI>;
+type InheritedProps = React.ComponentProps<typeof UI>
 
 type TextElements =
-  | "a"
-  | "b"
-  | "blockquote"
-  | "b"
-  | "blockquote"
-  | "cite"
-  | "code"
-  | "em"
-  | "i"
-  | "em"
-  | "i"
-  | "kbd"
-  | "mark"
-  | "p"
-  | "s"
-  | "small"
-  | "span"
-  | "span"
-  | "strong"
-  | "mark"
-  | "p"
-  | "s"
-  | "small"
-  | "span"
-  | "span"
-  | "strong"
-  | "sub"
-  | "sup"
-  | "time"
-  | "time"
-  | "u";
+  | 'a'
+  | 'b'
+  | 'blockquote'
+  | 'b'
+  | 'blockquote'
+  | 'cite'
+  | 'code'
+  | 'em'
+  | 'i'
+  | 'em'
+  | 'i'
+  | 'kbd'
+  | 'mark'
+  | 'p'
+  | 's'
+  | 'small'
+  | 'span'
+  | 'span'
+  | 'strong'
+  | 'mark'
+  | 'p'
+  | 's'
+  | 'small'
+  | 'span'
+  | 'span'
+  | 'strong'
+  | 'sub'
+  | 'sup'
+  | 'time'
+  | 'time'
+  | 'u'
 
 export type TextProps = {
   /**
-   * Pass a text element
+   * Text element to to use
+   * Text element to to use
    */
-  elm?: TextElements;
+  elm?: TextElements
   /** Pass a text element or string */
-  text?: string;
-} & InheritedProps;
+  text?: string
+} & InheritedProps
 
 export const Text = ({
-  elm = "p",
+  elm = 'p',
   id,
   text,
   styles,
@@ -61,18 +62,18 @@ export const Text = ({
         {children || text}
       </UI>
     </UI>
-  );
-};
+  )
+}
 
 type TitleProps = {
   /**
    * HTML headings
    */
-  elm?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-} & InheritedProps;
+  elm?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+} & InheritedProps
 
 export const Title = ({
-  elm = "h3",
+  elm = 'h3',
   id,
   children,
   styles,
@@ -83,10 +84,10 @@ export const Title = ({
     <Text as={elm} id={id} styles={styles} className={classes} {...props}>
       {children}
     </Text>
-  );
-};
+  )
+}
 
-export default Text;
+export default Text
 
-Text.displayName = "Text";
-Title.displayName = "Title";
+Text.displayName = 'Text'
+Title.displayName = 'Title'

package/src/components/text-to-speech/TextToSpeech.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react-vite";
 import TextToSpeech from "./TextToSpeech";
 import "./text-to-speech.scss";
 

package/src/decorators/instructions.tsx

@@ -1,4 +1,4 @@
-import { StoryFn } from "@storybook/react";
+import { StoryFn } from "@storybook/react-vite";
 import UI from "#components/ui";
 
 /**
@@ -42,3 +42,4 @@ export const WithInstructions =
   };
 
 export default WithInstructions;
+WithInstructions.displayName = "WithInstructions";

package/src/patterns/page/page-header.stories.tsx

@@ -1,5 +1,5 @@
-import { StoryObj, Meta } from "@storybook/react";
-// import { within, userEvent, screen } from "@storybook/test";
+import { StoryObj, Meta } from "@storybook/react-vite";
+// import { within, userEvent, screen } from "storybook/test";
 
 import PageHeader, { HeaderVariants } from "./page-header.js";
 import { Img } from "#components/images/img";

package/src/styles/buttons/button.css

@@ -1,20 +1,20 @@
 button {
-  --btn-xs: 0.6rem;
-  --btn-sm: 0.7rem;
-  --btn-md: 0.85rem;
+  --btn-xs: 0.7rem;
+  --btn-sm: 0.8rem;
+  --btn-md: 0.95rem;
   --btn-lg: 1.3125rem;
   --btn-pill: 100rem;
-  --btn-height: 2.5rem;
+  --btn-height: 1.8rem;
   --fs: 0.95rem;
   --btn-fs: 0.9375rem;
   --btn-bg: lightgray;
   --btn-width: max-content;
-  --btn-calc-height: var(--btn-height, calc(40rem / 16));
+  --btn-calc-height: var(--btn-height, calc(36rem / 16));
   font-size: var(--btn-fs);
   font-weight: var(--btn-fw, 500);
-  height: var(--btn-height, 2.5rem);
+  height: var(--btn-height, 1.55rem);
   max-height: var(--btn-calc-height);
-  min-height: 1.5rem;
+  min-height: 0.8rem;
   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%));
@@ -75,20 +75,20 @@ button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill] {
 button[data-btn~=xs] {
   padding-inline: var(--btn-xs);
   --btn-fs: var(--btn-xs);
-  --btn-height: 1.5rem;
+  --btn-height: 0.5rem;
   text-transform: uppercase;
 }
 button[data-btn~=sm] {
   --btn-fs: var(--btn-sm);
-  --btn-height: 1.75rem;
+  --btn-height: 0.8rem;
 }
 button[data-btn~=md] {
   --btn-fs: var(--btn-md);
-  --btn-height: 2rem;
+  --btn-height: 1.3rem;
 }
 button[data-btn~=lg] {
   --btn-fs: var(--btn-lg);
-  --btn-height: 2.5rem;
+  --btn-height: 1.8rem;
 }
 button[data-btn~=icon] {
   padding: unset;

package/src/styles/index.css

@@ -428,22 +428,22 @@ h6:has(span:first-of-type) > span {
 }
 
 button {
-  --btn-xs: 0.6rem;
-  --btn-sm: 0.7rem;
-  --btn-md: 0.85rem;
+  --btn-xs: 0.7rem;
+  --btn-sm: 0.8rem;
+  --btn-md: 0.95rem;
   --btn-lg: 1.3125rem;
   --btn-pill: 100rem;
-  --btn-height: 2.5rem;
+  --btn-height: 1.8rem;
   --fs: 0.95rem;
   --btn-fs: 0.9375rem;
   --btn-bg: lightgray;
   --btn-width: max-content;
-  --btn-calc-height: var(--btn-height, calc(40rem / 16));
+  --btn-calc-height: var(--btn-height, calc(36rem / 16));
   font-size: var(--btn-fs);
   font-weight: var(--btn-fw, 500);
-  height: var(--btn-height, 2.5rem);
+  height: var(--btn-height, 1.55rem);
   max-height: var(--btn-calc-height);
-  min-height: 1.5rem;
+  min-height: 0.8rem;
   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%));
@@ -504,20 +504,20 @@ button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill] {
 button[data-btn~=xs] {
   padding-inline: var(--btn-xs);
   --btn-fs: var(--btn-xs);
-  --btn-height: 1.5rem;
+  --btn-height: 0.5rem;
   text-transform: uppercase;
 }
 button[data-btn~=sm] {
   --btn-fs: var(--btn-sm);
-  --btn-height: 1.75rem;
+  --btn-height: 0.8rem;
 }
 button[data-btn~=md] {
   --btn-fs: var(--btn-md);
-  --btn-height: 2rem;
+  --btn-height: 1.3rem;
 }
 button[data-btn~=lg] {
   --btn-fs: var(--btn-lg);
-  --btn-height: 2.5rem;
+  --btn-height: 1.8rem;
 }
 button[data-btn~=icon] {
   padding: unset;

package/src/components/cards/README.mdx

@@ -1,133 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="FP.REACT Components/Card/Readme" />
-
-# Card Component
-
-The Card component is a versatile and reusable React component for creating
-card-like UI elements. It's part of the FPKit React component library.
-
-## Usage
-
-```tsx
-import Card from "@fpkit/cards";
-
-<Card elm="div">
-  <Card.Title>Card Title</Card.Title>
-  <Card.Content
-    className="custom-card-content"
-    styles={{ color: "blue", padding: "1rem" }}
-  >
-    This is the content of the card.
-  </Card.Content>
-</Card>;
-```
-
-## Components
-
-### Card
-
-The main container component for the card.
-
-#### Props
-
-- `elm?: 'div' | 'aside' | 'section' | 'article'` - HTML element to render as
-  (default: 'div')
-- `title?: React.ReactNode` - Card title
-- `footer?: React.ReactNode` - Card footer
-- `styles?: React.CSSProperties` - Inline styles
-- `classes?: string` - Additional CSS classes
-- `id?: string` - Unique ID for the card
-
-All other props, such as `aria-*` attributes, `data-*` attributes, and event
-handlers (e.g., `onClick`, `onMouseEnter`), are passed through to the underlying
-UI component. This allows you to customize the behavior and accessibility of the
-Card component as needed.
-
-### Card.Title
-
-A sub-component for rendering the card's title.
-
-#### Props
-
-- `as?: React.ElementType` - HTML element to render as (default: 'h3')
-- `className?: string` - Additional CSS classes
-- `styles?: React.CSSProperties` - Inline styles
-
-#### Example
-
-### Card.Content
-
-A sub-component for rendering the card's main content.
-
-#### Props
-
-- `className?: string` - Additional CSS classes
-- `styles?: React.CSSProperties` - Inline styles
-
-## Styling
-
-The component uses CSS classes for styling:
-
-- `.card-title` for the title
-- `.card-content` for the content
-
-To integrate these styles with CSS Modules or SASS/SCSS:
-
-1. Create a CSS Module file (e.g., `Card.module.scss`) or a SASS/SCSS file
-   (e.g., `Card.scss`).
-
-## Accessibility
-
-The Card component is designed with accessibility in mind:
-
-- It uses semantic HTML elements (`div`, `aside`, `section`, or `article`) for
-  the main container.
-- The Title component defaults to using an `h3` element, which can be changed if
-  needed.
-- The Content component uses an `article` element for semantic structure.
-
-### Example with ARIA Attributes
-
-```tsx
-<Card classes={styles.card}>
-  <Card.Title className={styles.cardTitle}>Card Title</Card.Title>
-  <Card.Content className={styles.cardContent}>
-    This is the content of the card.
-  </Card.Content>
-</Card>
-```
-
-You can override these classes or provide additional styling through the
-`className` and `styles` props.
-
-## Accessibility
-
-The Card component is designed with accessibility in mind:
-
-- It uses semantic HTML elements (`div`, `aside`, `section`, or `article`) for
-  the main container.
-- The Title component defaults to using an `h3` element, which can be changed if
-  needed.
-- The Content component uses an `article` element for semantic structure.
-
-## TypeScript
-
-This component is written in TypeScript and provides type definitions for all
-props and sub-components.
-
-## Contributing
-
-When contributing to this component, please follow the established code style
-and conventions. Ensure all changes are well-tested using **Vitest** and
-documented. Additionally, use **ESLint** and **Prettier** for code formatting
-and linting to maintain consistency.
-
-This README provides an overview of the Card component, its usage, available
-props, styling information, and accessibility considerations. It also mentions
-that the component is written in TypeScript and provides guidance for
-contributors.
-
-```
-
-```

package/src/components/text/README.mdx

@@ -1,98 +0,0 @@
-import { Meta } from "@storybook/blocks";
-
-<Meta title="FP.REACT Components/Text/Readme" />
-
-# Text Component
-
-## Summary
-
-The `Text` component is a flexible wrapper for rendering various text elements
-such as paragraphs, spans, and other inline or block-level elements. It supports
-customization through props like `elm`, `text`, and additional styles or
-classes.
-
-The `Title` component is a specialized version of `Text` for rendering HTML
-headings (`h1` to `h6`).
-
-## Features
-
-- Render any valid HTML text element.
-- Pass text content directly or use children for nested elements.
-- Fully customizable with styles and classes.
-- Supports accessibility with `id` and other attributes.
-
-## Props
-
-### Text Props
-
-| Name       | Type                  | Default | Description                         |
-| ---------- | --------------------- | ------- | ----------------------------------- |
-| `elm`      | `TextElements`        | `'p'`   | The HTML element to render.         |
-| `text`     | `string`              | `''`    | Text content to display.            |
-| `id`       | `string`              | `''`    | Unique identifier for the element.  |
-| `styles`   | `React.CSSProperties` | `null`  | Inline styles for the element.      |
-| `classes`  | `string`              | `''`    | Additional CSS classes for styling. |
-| `children` | `React.ReactNode`     | `null`  | Nested content inside the element.  |
-
-### Title Props
-
-| Name       | Type                                           | Default | Description                         |
-| ---------- | ---------------------------------------------- | ------- | ----------------------------------- |
-| `elm`      | `'h1' \| 'h2' \| 'h3' \| 'h4' \| 'h5' \| 'h6'` | `'h3'`  | The HTML heading element to render. |
-| `id`       | `string`                                       | `''`    | Unique identifier for the element.  |
-| `styles`   | `React.CSSProperties`                          | `null`  | Inline styles for the element.      |
-| `classes`  | `string`                                       | `''`    | Additional CSS classes for styling. |
-| `children` | `React.ReactNode`                              | `null`  | Nested content inside the element.  |
-
-## Technical Details
-
-- The `Text` component uses the `UI` component internally to render the
-  specified element.
-- The `Title` component is a wrapper around `Text` with default settings for
-  headings.
-- Both components support additional props inherited from the `UI` component.
-
-## Usage Examples
-
-### Basic Usage
-
-```tsx
-import { Text, Title } from "./text";
-
-const App = () => (
-  <>
-    <Text elm="p" text="This is a paragraph." />
-    <Text elm="span" text="This is a span." />
-    <Title elm="h1">This is a heading</Title>
-  </>
-);
-```
-
-### Advanced Usage
-
-```tsx
-import { Text, Title } from "./text";
-
-const App = () => (
-  <>
-    <Text
-      elm="blockquote"
-      styles={{ fontStyle: "italic", color: "gray" }}
-      text="This is a blockquote."
-    />
-    <Title
-      elm="h2"
-      classes="custom-heading"
-      styles={{ fontWeight: "bold", fontSize: "2rem" }}
-    >
-      Custom Heading
-    </Title>
-  </>
-);
-```
-
-### Additional Notes
-
-- Use the `elm` prop to specify the desired HTML element.
-- Combine `styles` and `classes` for advanced styling.
-- Use `children` for nested content when `text` is not sufficient.