@fpkit/acss 3.1.0 → 3.2.0

package/src/components/tables/table-elements.tsx

@@ -35,7 +35,7 @@ export const Td = ({ children, ...props }: ComponentProps) => (
   </FP>
 )
 
-export const Table = ({ id, dataStyle, children, ...props }: ComponentProps) => {
+export const Table = ({ id, children, ...props }: ComponentProps) => {
   return (
     <FP
       as="section"

package/src/components/tables/table.tsx

@@ -1,4 +1,4 @@
-import { Table, Caption, Thead, Tbody, Td, Tr } from './table-elements'
+import { Table, Caption, Thead, Tbody, Tr } from './table-elements'
 import { ComponentProps } from '../../types'
 
 import React from 'react'
@@ -24,7 +24,7 @@ export const RenderHead = (data: []) => {
 /**
  * Render the table body `tr`, `td` with the data provided
  */
-export const RenderBody = (data: {}[]) => {
+export const RenderBody = (data: Record<string, unknown>[]) => {
   const rec = data.map((item, index) => {
     return (
       <tr key={index}>

package/src/components/tag/STYLES.mdx

@@ -0,0 +1,105 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="FP.REACT Components/Tag/Styles" />
+
+# Tag Styles
+
+Status indicator tag styling with semantic variants and WCAG 2.1 AA compliance.
+
+## Overview
+
+The fpkit tag system provides visual status indicators using role-based
+selectors with support for alpha, beta, stable, and production variants.
+
+### Key Features
+
+- **Four semantic variants** - Alpha, beta, stable, production
+- **Visual indicators** - Icons beyond color for accessibility
+- **WCAG compliant** - Color contrast meets AA standards
+- **Pill shape** - Fully rounded borders
+- **CSS custom properties** - Full theming control
+- **Rem-based sizing** - All measurements use rem units (1rem = 16px)
+
+## CSS Custom Properties
+
+```css
+[data-tag] {
+  /* Variant colors */
+  --beta: #fbbf24; /* Amber */
+  --stable: #0f7c3e; /* Dark green */
+  --production: #1e3a8a; /* Dark blue */
+
+  /* Tag styling */
+  --tag-padding-inline: 0.7rem; /* 11.2px */
+  --tag-padding-block: 0.2rem; /* 3.2px */
+  --tag-fs: 0.8rem; /* 12.8px */
+  --tag-radius: 99rem; /* Pill shape */
+  --tag-bg: lightgray;
+  --tag-fw: 500;
+  --tag-color: currentColor;
+  --tag-display: inline-block;
+}
+```
+
+## Tag Variants
+
+### Alpha Tag
+
+```html
+<span data-tag="alpha">Alpha</span>
+```
+
+**Displays:** ⚠ Alpha (amber background, warning symbol)
+
+### Beta Tag
+
+```html
+<span data-tag="beta">Beta</span>
+```
+
+**Displays:** ⚠ Beta (amber background, warning symbol)
+
+### Stable Tag
+
+```html
+<span data-tag="stable">Stable</span>
+```
+
+**Displays:** ✓ Stable (green background, checkmark symbol)
+
+### Production Tag
+
+```html
+<span data-tag="production">Production</span>
+```
+
+**Displays:** ● Production (blue background, live indicator)
+
+## Real-World Examples
+
+### Feature Status
+
+```html
+<h3>
+  New Dashboard
+  <span data-tag="beta">Beta</span>
+</h3>
+```
+
+### API Endpoint Status
+
+```html
+<code>/api/users</code> <span data-tag="stable">Stable</span>
+```
+
+### Environment Indicator
+
+```html
+<span data-tag="production">Production Environment</span>
+```
+
+## Related Resources
+
+- **React Component** - See README for React Tag component API
+- **WCAG 2.1: Color Contrast** -
+  https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum

package/src/components/text-to-speech/STYLES.mdx

@@ -0,0 +1,80 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+
+<Meta title="FP.REACT Components/Text-to-Speech/Styles" />
+
+# Text-to-Speech Styles
+
+Text-to-speech control styling with button and display components using CSS
+custom properties.
+
+## Overview
+
+The fpkit text-to-speech (TTS) system provides styling for TTS control panels
+with play/pause buttons and text display areas.
+
+### Key Features
+
+- **Flexbox layout** - Centered controls and text
+- **Pill-shaped container** - Rounded borders
+- **Button styling** - Integrated button controls
+- **CSS custom properties** - Full theming control
+- **Rem-based sizing** - All measurements use rem units (1rem = 16px)
+
+## CSS Custom Properties
+
+```css
+[data-tts] {
+  /* Layout */
+  --tts-gap: 0.5rem; /* 8px */
+  --tts-align-items: center;
+  --tts-justify-content: center;
+
+  /* Colors */
+  --tts-bg: #fff;
+  --tts-border-color: currentColor;
+
+  /* Borders */
+  --tts-border-width: 0.125rem; /* 2px */
+  --tts-border-style: solid;
+  --tts-radius: 99rem; /* Pill shape */
+
+  /* Spacing */
+  --tts-padding: 0.5rem; /* 8px */
+
+  /* Dimensions */
+  --tts-min-width: 20.3125rem; /* 325px */
+}
+```
+
+## Basic Structure
+
+```html
+<div data-tts>
+  <button data-btn="tts-btn" aria-label="Play">▶</button>
+  <span>Text to be spoken</span>
+  <button data-btn="tts-btn" aria-label="Pause">⏸</button>
+</div>
+```
+
+## Real-World Example
+
+### Article Reader
+
+```html
+<article>
+  <h2>Article Title</h2>
+
+  <div data-tts>
+    <button data-btn="tts-btn" aria-label="Read article aloud">🔊</button>
+    <span>Listen to this article</span>
+  </div>
+
+  <p>Article content...</p>
+</article>
+```
+
+## Related Resources
+
+- **React Component** - See README for React TTS component API
+- **Web Speech API** -
+  https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API

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

@@ -37,7 +37,6 @@ export const TextToSpeech: React.FC<TextToSpeechComponentProps> = ({
   voice,
   pitch = 1,
   rate = 1,
-  language,
   label,
   onEnd,
 }) => {
@@ -48,11 +47,8 @@ export const TextToSpeech: React.FC<TextToSpeechComponentProps> = ({
     cancel,
     isSpeaking,
     isPaused,
-    getAvailableLanguages,
-    availableVoices,
   } = useTextToSpeech()
   const [text, setText] = useState<string>(initialText)
-  console.log(getAvailableLanguages())
 
   useEffect(() => {
     setText(initialText)

package/src/components/text-to-speech/useTextToSpeech.tsx

@@ -32,9 +32,6 @@ export const useTextToSpeech = (initialVoice?: SpeechSynthesisVoice) => {
 
   const [isSpeaking, setIsSpeaking] = useState<boolean>(false)
   const [isPaused, setIsPaused] = useState<boolean>(false)
-  const [utterance, setUtterance] = useState<SpeechSynthesisUtterance | null>(
-    null,
-  )
 
   useEffect(() => {
     const updateVoices = () => {
@@ -103,12 +100,11 @@ export const useTextToSpeech = (initialVoice?: SpeechSynthesisVoice) => {
 
     if ('speechSynthesis' in window) {
       window.speechSynthesis.speak(utterance)
-      setUtterance(utterance)
       setIsSpeaking(true)
       setIsPaused(false)
     } else {
-      console.error('Speech synthesis not supported')
-      // Handle the error appropriately
+      // Speech synthesis not supported - silently skip
+      setIsSpeaking(false)
     }
   }
 

package/src/components/ui.tsx

@@ -307,15 +307,15 @@ type UIComponent = (<C extends React.ElementType = "div">(
  */
 const UI: UIComponent = React.forwardRef(
   <C extends React.ElementType>(
-    { as, styles, classes, children, defaultStyles, ...props }: UIProps<C>,
+    { as, styles, style, classes, children, defaultStyles, ...props }: UIProps<C>,
     ref?: PolymorphicRef<C>
   ) => {
     const Component = as ?? "div";
 
-    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles };
+    const styleObj: React.CSSProperties = { ...defaultStyles, ...styles, ...style };
 
     return (
-      <Component ref={ref} style={styleObj} className={classes} {...props}>
+      <Component {...props} ref={ref} style={styleObj} className={classes}>
         {children}
       </Component>
     );

package/src/decorators/instructions.tsx

@@ -21,24 +21,28 @@ import UI from "#components/ui";
  * ```
  */
 export const WithInstructions =
-  (instructions?: React.ReactNode, title?: string) => (Story: StoryFn) => {
-    return (
-      <UI
-        style={{
-          paddingBlock: "2rem",
-          display: "flex",
-          flexDirection: "column",
-          gap: "3rem",
-          width: "max(320px, 90%)",
-        }}
-      >
-        <Story />
-        <div style={{ paddingInline: "1rem" }}>
-          <h3>{title || "Story Instructions"}</h3>
-          {instructions}
-        </div>
-      </UI>
-    );
+  (instructions?: React.ReactNode, title?: string) => {
+    const DecoratorComponent = (Story: StoryFn) => {
+      return (
+        <UI
+          style={{
+            paddingBlock: "2rem",
+            display: "flex",
+            flexDirection: "column",
+            gap: "3rem",
+            width: "max(320px, 90%)",
+          }}
+        >
+          <Story />
+          <div style={{ paddingInline: "1rem" }}>
+            <h3>{title || "Story Instructions"}</h3>
+            {instructions}
+          </div>
+        </UI>
+      );
+    };
+    DecoratorComponent.displayName = 'WithInstructionsDecorator';
+    return DecoratorComponent;
   };
 
 export default WithInstructions;

package/src/hooks/popover/popover.tsx

@@ -28,7 +28,7 @@ export type PopoverProps = {
  *
  * Transforms and opacity animate the popover enter/exit.
  */
-export const Popover = ({ children, ...props }: PopoverProps) => {
+export const Popover = ({ children }: PopoverProps) => {
   const hoverRef = React.useRef(null)
   const popOverRef = React.useRef(null)
   const { isVisible, popoverPosition, handlePointerEvent, handlePointerLeave } =

package/src/index.scss

@@ -13,8 +13,12 @@
 @use "./components/details/details.scss";
 @use "./components/link/link.scss";
 @use "./components/layout/landmarks.scss";
+@use "./components/box/box.scss";
+@use "./components/stack/stack.scss";
+@use "./components/cluster/cluster.scss";
+@use "./components/grid/grid.scss";
 @use "./components/dialog/dialog.scss";
-@use "./sass/_grid.scss";
+@use "./sass/_grid.scss" as grid-legacy;
 @use "./components/badge/badge.scss";
 @use "./components/nav/nav.scss";
 @use "./components/form/form.scss";