@fpkit/acss 6.0.0 → 6.2.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": "6.0.0",
+  "version": "6.2.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": "e2b6bacdd039449151941bcd9e04fe1980c2a632"
+  "gitHead": "6bdffe9311776c02c96d2592d65123b4b6c0e92a"
 }

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:

package/src/components/form/CHECKBOX-STYLES.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/addon-docs/blocks";
 
-<Meta title="FP.REACT Forms/Checkbox/Styles" />
+<Meta title="FP.REACT Forms/Inputs/Checkbox/Styles" />
 
 # Checkbox CSS Documentation
 

package/src/components/form/CHECKBOX.mdx

@@ -1,7 +1,7 @@
 import { Meta, Canvas, Story, Controls } from "@storybook/addon-docs/blocks";
 import * as CheckboxStories from "./input.stories";
 
-<Meta title="FP.REACT Forms/Checkbox/Guide" />
+<Meta title="FP.REACT Forms/Inputs/Checkbox/Guide" />
 
 # Checkbox Component
 

package/src/components/form/form.scss

@@ -1,5 +1,7 @@
 // Import checkbox wrapper component styles
 @use "./checkbox";
+// Import select component styles
+@use "./select";
 
 :root {
   --input-border-color: var(--color-border);
@@ -9,9 +11,9 @@
   --input-outline: thin solid var(--input-border-color);
   --input-padding-inline: 0.6rem;
   --input-padding-block: 0.4rem;
-  --input-radius: --var(--radius);
+  --input-radius: var(--radius);
   --input-fs: var(--fs);
-  --input-width: clamp(200px, 100%, 500px);
+  --input-width: clamp(12.5rem, 100%, 31.25rem);
 
   // Focus state variables (NEW - for accessibility)
   --input-focus-outline: medium solid var(--input-border-color);
@@ -28,7 +30,6 @@
   --placeholder-fs: smaller;
 
   --form-direction: column;
-  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20'><polyline points='6,9 10,13 14,9' stroke='%23000000' stroke-width='1.5' fill='none' /></svg>");
 
   /* ==========================================================================
      Size Tokens
@@ -145,14 +146,3 @@ input[type="checkbox"] {
       no-repeat center center;
   }
 }
-
-select {
-  border: var(--input-outline);
-  outline: none;
-  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
-  -moz-appearance: none; /* Remove default arrow in Firefox */
-  appearance: none; /* Remove default arrow in other browsers */
-  background: var(--select-arrow) no-repeat;
-  background-position: right 0.5rem top 50%;
-  padding-inline-end: 0;
-}

package/src/components/form/form.stories.tsx

@@ -10,7 +10,7 @@ import "./form.scss";
 const FormComponent = Form as unknown as typeof Form;
 
 const meta: Meta<typeof FormComponent> = {
-  title: "FP.REACT Forms/Form",
+  title: "FP.React Forms/Form",
   tags: ["stable", "autodocs"],
   component: FormComponent,
   parameters: {

package/src/components/form/input.stories.tsx

@@ -7,7 +7,7 @@ import { Checkbox as CheckboxComponent } from "./checkbox";
 import "./form.scss";
 
 const meta: Meta<typeof Input> = {
-  title: "FP.REACT  Forms/Inputs",
+  title: "FP.React Forms/Inputs",
   component: Input,
   tags: ["stable"],
   args: {},

package/src/components/form/select.scss

@@ -0,0 +1,97 @@
+// Select Component Styles
+
+:root {
+  // Select arrow color (themeable)
+  --select-arrow-color: var(--color-text);
+
+  // Select width (responsive)
+  --select-width-mobile: 18.75rem; /* 300px minimum on mobile */
+  --select-width-desktop: 100%; /* Full width on larger screens */
+}
+
+select {
+  // Match input component styling
+  border: var(--input-outline);
+  border-radius: var(--input-radius);
+  outline: none;
+  background-color: var(--input-bg, var(--color-surface));
+
+  // Remove default browser select styling
+  -webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
+  -moz-appearance: none; /* Remove default arrow in Firefox */
+  appearance: none; /* Remove default arrow in other browsers */
+
+  // Create themeable arrow using CSS gradients
+  background-image: linear-gradient(45deg, transparent 50%, var(--select-arrow-color, currentColor) 50%),
+                    linear-gradient(135deg, var(--select-arrow-color, currentColor) 50%, transparent 50%);
+  background-position: calc(100% - 1.25rem) center,
+                       calc(100% - 1rem) center;
+  background-size: 0.3125rem 0.3125rem,
+                   0.3125rem 0.3125rem;
+  background-repeat: no-repeat;
+
+  // Match input component height using shared padding variables
+  padding-inline-start: var(--input-padding-inline);
+  padding-inline-end: 2.5rem; // Extra space for arrow
+  padding-block: var(--input-padding-block);
+
+  // Responsive width: uses larger of 300px or 100% of container
+  width: max(var(--select-width-mobile), var(--select-width-desktop));
+}
+
+/* ==========================================================================
+   Option Styling with Data Attributes
+   ========================================================================== */
+
+// Example: Variant-based option styling
+// Uncomment and customize for your design system
+/*
+option[data-option="primary"] {
+  background-color: var(--color-primary-light, #dbeafe);
+  color: var(--color-primary, #2563eb);
+  font-weight: 600;
+}
+
+option[data-option="success"] {
+  background-color: var(--color-success-bg, #dcfce7);
+  color: var(--color-success, #16a34a);
+}
+
+option[data-option="error"] {
+  background-color: var(--color-error-bg, #fee2e2);
+  color: var(--color-error, #dc2626);
+}
+
+option[data-option="warning"] {
+  background-color: var(--color-warning-bg, #fef3c7);
+  color: var(--color-warning, #d97706);
+}
+*/
+
+// Example: Size-based option styling
+/*
+option[data-size="sm"] {
+  font-size: 0.875rem; // 14px
+  padding: 0.25rem 0.5rem;
+}
+
+option[data-size="lg"] {
+  font-size: 1.125rem; // 18px
+  padding: 0.75rem 1rem;
+  font-weight: 500;
+}
+*/
+
+// Example: Custom data attribute styling
+/*
+option[data-featured="true"] {
+  font-weight: 700;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+option[data-category="premium"] {
+  background-color: #fef3c7;
+  font-style: italic;
+}
+*/

package/src/components/form/select.stories.tsx

@@ -2,24 +2,26 @@ import { StoryObj, Meta } from "@storybook/react-vite";
 import { within, expect } from "storybook/test";
 
 import Select from "./select";
+import "./select.scss";
 import React from "react";
+
 const meta: Meta<typeof Select> = {
-  title: "FP.REACT Forms/Select",
+  title: "FP.React Forms/Select",
   tags: ["stable"],
   component: Select,
   parameters: {
     docs: {
       description: {
-        component: "Base select/Combobox component",
+        component: "Accessible select dropdown component with themeable arrow and validation support. Follows fpkit component conventions with ref forwarding and custom styling options.",
       },
     },
   },
   args: {
     children: (
       <>
-        <Select.Option selectValue="value" selectLabel="Option 1" />
-        <Select.Option selectValue="value" selectLabel="Option 2" />
-        <Select.Option selectValue="value" selectLabel="Option 3" />
+        <Select.Option value="option1" label="Option 1" />
+        <Select.Option value="option2" label="Option 2" />
+        <Select.Option value="option3" label="Option 3" />
       </>
     ),
   },
@@ -28,18 +30,232 @@ const meta: Meta<typeof Select> = {
 export default meta;
 type Story = StoryObj<typeof Select>;
 
+/**
+ * Default select component with standard options using the new API
+ */
 export const SelectComponent: Story = {
   args: {
+    id: "default-select",
+    name: "defaultSelect",
     children: (
       <>
-        <Select.Option selectValue="value" selectLabel="Option 1" />
-        <Select.Option selectValue="value" selectLabel="Option 2" />
-        <Select.Option selectValue="value" selectLabel="Option 3" />
+        <Select.Option value="us" label="United States" />
+        <Select.Option value="uk" label="United Kingdom" />
+        <Select.Option value="ca" label="Canada" />
+        <Select.Option value="au" label="Australia" />
       </>
     ),
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    expect(canvas.getByRole("combobox")).toBeInTheDocument();
+    const select = canvas.getByRole("combobox");
+    expect(select).toBeInTheDocument();
+    expect(select).toHaveAttribute("id", "default-select");
+  },
+} as Story;
+
+/**
+ * Select with label prop for display text
+ */
+export const WithLabels: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="sm" label="Small (SM)" />
+        <Select.Option value="md" label="Medium (MD)" />
+        <Select.Option value="lg" label="Large (LG)" />
+        <Select.Option value="xl" label="Extra Large (XL)" />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Select with children instead of label prop
+ */
+export const WithChildren: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="react">⚛️ React</Select.Option>
+        <Select.Option value="vue">💚 Vue</Select.Option>
+        <Select.Option value="angular">🔺 Angular</Select.Option>
+        <Select.Option value="svelte">🧡 Svelte</Select.Option>
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Select with disabled options
+ */
+export const WithDisabledOptions: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="available" label="Available Option" />
+        <Select.Option value="disabled1" label="Disabled Option" disabled />
+        <Select.Option value="active" label="Active Option" />
+        <Select.Option value="disabled2" label="Another Disabled" disabled />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Required select field
+ */
+export const Required: Story = {
+  args: {
+    id: "required-select",
+    name: "requiredSelect",
+    required: true,
+    children: (
+      <>
+        <Select.Option value="" label="-- Select an option --" />
+        <Select.Option value="option1" label="Option 1" />
+        <Select.Option value="option2" label="Option 2" />
+        <Select.Option value="option3" label="Option 3" />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Disabled select component
+ */
+export const Disabled: Story = {
+  args: {
+    disabled: true,
+    children: (
+      <>
+        <Select.Option value="option1" label="Option 1" />
+        <Select.Option value="option2" label="Option 2" />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Select with custom styling
+ */
+export const CustomStyling: Story = {
+  args: {
+    styles: {
+      "--select-arrow-color": "#0066cc",
+      "--input-border-color": "#0066cc",
+      "--input-radius": "1rem",
+    } as React.CSSProperties,
+    classes: "custom-select",
+    children: (
+      <>
+        <Select.Option value="option1" label="Styled Option 1" />
+        <Select.Option value="option2" label="Styled Option 2" />
+        <Select.Option value="option3" label="Styled Option 3" />
+      </>
+    ),
+  },
+} as Story;
+
+/**
+ * Styled options with variant data attributes
+ */
+export const StyledWithVariants: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="default" label="Default Option" />
+        <Select.Option value="primary" label="Primary Option" variant="primary" />
+        <Select.Option value="success" label="Success Option" variant="success" />
+        <Select.Option value="error" label="Error Option" variant="error" />
+        <Select.Option value="warning" label="Warning Option" variant="warning" />
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Options with variant data attributes for CSS targeting: `option[data-option=\"primary\"]`",
+      },
+    },
+  },
+} as Story;
+
+/**
+ * Options with size variants
+ */
+export const WithSizes: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option value="sm" label="Small Option" size="sm" />
+        <Select.Option value="md" label="Medium Option" size="md" />
+        <Select.Option value="lg" label="Large Option" size="lg" />
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Options with size data attributes: `option[data-size=\"sm\"]`",
+      },
+    },
+  },
+} as Story;
+
+/**
+ * Options with custom data attributes
+ */
+export const WithCustomDataAttributes: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option
+          value="premium"
+          label="Premium Plan"
+          dataAttributes={{ 'data-category': 'premium', 'data-featured': true }}
+        />
+        <Select.Option
+          value="standard"
+          label="Standard Plan"
+          dataAttributes={{ 'data-category': 'standard' }}
+        />
+        <Select.Option
+          value="basic"
+          label="Basic Plan"
+          dataAttributes={{ 'data-category': 'basic', 'data-price': 0 }}
+        />
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Options with custom data attributes for advanced styling: `option[data-category=\"premium\"]`",
+      },
+    },
+  },
+} as Story;
+
+/**
+ * Legacy API - backwards compatibility with selectValue and selectLabel
+ * @deprecated Use `value` and `label` props instead
+ */
+export const LegacyAPI: Story = {
+  args: {
+    children: (
+      <>
+        <Select.Option selectValue="legacy1" selectLabel="Legacy Option 1" />
+        <Select.Option selectValue="legacy2" selectLabel="Legacy Option 2" />
+        <Select.Option selectValue="legacy3" selectLabel="Legacy Option 3" />
+      </>
+    ),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: "Example using deprecated `selectValue` and `selectLabel` props. Use `value` and `label` instead.",
+      },
+    },
   },
 } as Story;