@fpkit/acss 5.0.0 → 6.1.0

package/libs/{list.types-d26de310.d.ts → list.types-bf2c44c1.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { U as UI } from './ui-d01b50d4.js';
+import { U as UI } from './ui-993fc2e2.js';
 
 /**
  * Props for the List component.

package/libs/{ui-d01b50d4.d.ts → ui-993fc2e2.d.ts}

@@ -101,7 +101,8 @@ type PolymorphicComponentPropWithRef<C extends React.ElementType, Props = {}> =
  *   Styles are always rendered regardless of this prop value.
  * @property {React.CSSProperties} [styles] - Inline styles to apply (overrides defaultStyles)
  * @property {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop
- * @property {string} [classes] - CSS class names to apply to the element
+ * @property {string} [classes] - CSS class names to apply to the element (custom prop)
+ * @property {string} [className] - CSS class names to apply to the element (React standard prop)
  * @property {string} [id] - HTML id attribute
  * @property {React.ReactNode} [children] - Child elements to render
  *
@@ -119,6 +120,7 @@ type UIProps<C extends React.ElementType> = PolymorphicComponentPropWithRef<C, {
     styles?: React.CSSProperties;
     defaultStyles?: React.CSSProperties;
     classes?: string;
+    className?: string;
     id?: string;
     children?: React.ReactNode;
 }>;
@@ -166,7 +168,8 @@ type UIComponent = (<C extends React.ElementType = "div">(props: UIProps<C>) =>
  *
  * @param {C} [as='div'] - The HTML element type to render. Defaults to 'div'.
  * @param {React.CSSProperties} [styles] - Inline styles to apply. Overrides defaultStyles.
- * @param {string} [classes] - CSS class names to apply to the element.
+ * @param {string} [classes] - CSS class names to apply (custom prop). Takes precedence over className.
+ * @param {string} [className] - CSS class names to apply (React standard). Used if classes is not provided.
  * @param {React.CSSProperties} [defaultStyles] - Base styles that can be overridden by styles prop.
  * @param {React.ReactNode} [children] - Child elements to render inside the component.
  * @param {PolymorphicRef<C>} [ref] - Forwarded ref with proper typing for the element type.

package/package.json

@@ -2,7 +2,7 @@
   "name": "@fpkit/acss",
   "description": "A lightweight React UI library for building modern and accessible components that leverage CSS custom properties for reactive Styles.",
   "private": false,
-  "version": "5.0.0",
+  "version": "6.1.0",
   "engines": {
     "node": ">=22.12.0",
     "npm": ">=8.0.0"
@@ -24,8 +24,8 @@
     "test:coverage": "vitest --coverage",
     "test:ui:coverage": "vitest --coverage --ui",
     "test:snapshot": "vitest --run --update",
-    "lint": "eslint . --ext .jsx,.tsx",
-    "lint-fix": "eslint . --ext .jsx,.tsx"
+    "lint": "eslint .",
+    "lint-fix": "eslint . --fix"
   },
   "dependencies": {
     "focus-trap": "^7.5.2",
@@ -47,9 +47,6 @@
     "@vitest/ui": "^0.33.0",
     "autoprefixer": "^10.4.16",
     "c8": "^8.0.0",
-    "eslint": "^8.56.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
     "happy-dom": "^10.5.2",
     "jsdom": "^22.1.0",
     "npm-run-all": "^4.1.5",
@@ -126,5 +123,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "79600c132b52299259f087d029847acfcb2196e1"
+  "gitHead": "bc68a8f70b20f347add9535dd661682f7aeff13a"
 }

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

@@ -35,7 +35,7 @@ const instructions = (
 );
 
 const meta: Meta<typeof Alert> = {
-  title: "FP.REACT Components/Alert",
+  title: "FP.React Components/Alert",
   component: Alert,
   tags: ["beta"],
   parameters: {

package/src/components/alert/elements/dismiss-button.stories.tsx

@@ -3,11 +3,10 @@ import { within, expect } from "storybook/test";
 import DismissButton from "./dismiss-button";
 
 const meta: Meta<typeof DismissButton> = {
-  title: "FP.REACT Elements/DismissButton",
+  title: "FP.React Elements/DismissButton",
   component: DismissButton,
   tags: ["new"],
   parameters: {
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component: "A button component used to dismiss alerts.",

package/src/components/badge/badge.stories.tsx

@@ -5,7 +5,7 @@ import Badge from "./badge";
 import "./badge.scss";
 
 const meta: Meta<typeof Badge> = {
-  title: "FP.REACT Components/Badge",
+  title: "FP.React Components/Badge",
   component: Badge,
   tags: ["beta", "accessible"],
   parameters: {

package/src/components/breadcrumbs/breadcrumb.stories.tsx

@@ -6,11 +6,10 @@ import Breadcrumb from "./breadcrumb";
 const linkClicked = fn();
 
 const meta: Meta<typeof Breadcrumb> = {
-  title: "FP.REACT Components/Breadcrumb",
+  title: "FP.React Components/Breadcrumb",
   component: Breadcrumb,
   tags: ["autodocs"],
   parameters: {
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component: `A WCAG 2.1 AA compliant breadcrumb navigation component that helps users understand their current location within a site hierarchy.

package/src/components/buttons/button.stories.tsx

@@ -14,9 +14,7 @@ const meta = {
     children: "Click me",
     onClick: buttonClicked,
   },
-  parameters: {
-    actions: { argTypesRegex: "^on.*" },
-  },
+  parameters: {},
 } as Meta;
 
 export default meta;

package/src/components/cards/card.stories.tsx

@@ -5,7 +5,7 @@ const content =
   "Enim aliquip excepteur veniam esse culpa. Et exercitation incididunt occaecat incididunt proident consectetur. Voluptate elit reprehenderit nulla reprehenderit excepteur tempor adipisicing officia eiusmod est id aute. Nisi do et nulla fugiat enim id pariatur ex. Culpa aliquip excepteur velit fugiat qui magna deserunt adipisicing dolore quis. Esse proident qui consectetur Lorem id fugiat elit amet proident enim deserunt dolore sit.";
 
 const meta: Meta<typeof Card> = {
-  title: "FP.REACT Components/Card",
+  title: "FP.React Components/Card",
   tags: ["stable", "autodocs"],
   component: Card,
   args: {

package/src/components/cards/card.test.tsx

@@ -50,7 +50,7 @@ describe('Card', () => {
     it('applies default shadow class', () => {
       render(<Card data-testid="card">Content</Card>)
       const card = screen.getByTestId('card')
-      expect(card).toHaveClass('shadow')
+      expect(card).toHaveClass('shadow-sm')
     })
   })
 

package/src/components/details/details.stories.tsx

@@ -29,7 +29,7 @@ const content = (
 const icon = <Icons.Add />;
 
 const meta: Meta<typeof Details> = {
-  title: "FP.REACT Components/Details",
+  title: "FP.React Components/Details",
   component: Details,
   tags: ["stable"],
   parameters: {
@@ -77,7 +77,6 @@ const meta: Meta<typeof Details> = {
     icon: icon,
     summary: <>Summary Section</>,
   },
-  actions: { argTypesRegex: "^on.*" },
   decorators: [
     (Story) => (
       <div className="container" style={{ minWidth: "50vw" }}>

package/src/components/dialog/dialog-modal.stories.tsx

@@ -4,11 +4,10 @@ import { within, expect, userEvent, waitFor } from "storybook/test";
 import DialogModal from "./dialog-modal";
 import WithInstructions from "#/decorators/instructions";
 const meta: Meta<typeof DialogModal> = {
-  title: "FP.REACT Components/Dialog/DialogModal",
+  title: "FP.React Components/Dialog/DialogModal",
   component: DialogModal,
   tags: ["autodocs", "experimental"],
   parameters: {
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component:

package/src/components/dialog/dialog.stories.tsx

@@ -28,7 +28,7 @@ const buttonDecorator = [
 ];
 
 const meta: Meta<typeof Dialog> = {
-  title: "FP.REACT Components/Dialog/Dialogs",
+  title: "FP.React Components/Dialog/Dialogs",
   component: Dialog,
   tags: ["alpha"],
   parameters: {

package/src/components/dialog/views/dialog-header.stories.tsx

@@ -4,11 +4,10 @@ import { within, expect } from "storybook/test";
 import DialogHeader from "./dialog-header";
 
 const meta: Meta<typeof DialogHeader> = {
-  title: "FP.REACT Components/Dialog/Views/DialogHeader",
+  title: "FP.React Components/Dialog/Views/DialogHeader",
   component: DialogHeader,
   parameters: {
     layout: "centered",
-    actions: { argTypesRegex: "^on.*" },
     docs: {
       description: {
         component: