@soroush.tech/design-system 2.0.0-rc.3 → 2.0.0-rc.5

package/README.md

@@ -91,22 +91,27 @@ import { catalog } from '@soroush.tech/design-system/catalog'
 
 SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in concern most apps never need - that's what `CacheProvider` and its paired `styleCache` instance are for.
 
+Under a strict Content Security Policy, bring your own cache with the response's nonce - `createCache({ key: 'app', nonce })` from `@emotion/cache`, given to `CacheProvider` above `ThemeProvider` - and every style tag the engine inserts carries it. The shipped `styleCache` has no nonce.
+
+The Emotion packages are regular dependencies of this package, not peers, on purpose: nothing of Emotion is on the public surface, so an app installs nothing extra and has no version to keep in step. An app that brings its own `@emotion/react` of another major gets two copies - the components keep working, as they style through their own copy and `ThemeProvider` - at the cost of the duplicate in the bundle and Emotion's one-time development warning.
+
 ---
 
 ## Component inventory
 
 ### Layout & surfaces
 
-| Component | Purpose                                           |
-| --------- | ------------------------------------------------- |
-| `View`    | Styled `div` primitive - the base building block  |
-| `Flex`    | `View` with flexbox defaults                      |
-| `Grid`    | CSS grid container                                |
-| `Paper`   | Elevated surface with background and shadow       |
-| `Card`    | Content container built on `Paper`                |
-| `Quote`   | Bordered quote / terminal-panel surface on `View` |
-| `AppBar`  | Top application bar                               |
-| `Drawer`  | Slide-in side panel                               |
+| Component    | Purpose                                                                 |
+| ------------ | ----------------------------------------------------------------------- |
+| `ScrollArea` | A scrolling area with scrollbars drawn over its content, shown on hover |
+| `View`       | Styled `div` primitive - the base building block                        |
+| `Flex`       | `View` with flexbox defaults                                            |
+| `Grid`       | CSS grid container                                                      |
+| `Paper`      | Elevated surface with background and shadow                             |
+| `Card`       | Content container built on `Paper`                                      |
+| `Quote`      | Bordered quote / terminal-panel surface on `View`                       |
+| `AppBar`     | Top application bar                                                     |
+| `Drawer`     | Slide-in side panel                                                     |
 
 ### Content & data display
 
@@ -118,17 +123,20 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 | `Image`      | Image with styled-system props                                                                                                                                                                                                               |
 | `Avatar`     | User/entity avatar                                                                                                                                                                                                                           |
 | `Table`      | Compound data table - exports `TableContainer`, `TableHead`, `TableBody`, `TableFooter`, `TableRow`, `TableCell`, `TablePagination`, `TablePaginationActions`, `TableSortLabel`, and `TableControl` from `@soroush.tech/design-system/Table` |
+| `Accordion`  | A heading that opens and closes a region - exports `AccordionSummary`, `AccordionDetails`, `AccordionActions` and `AccordionGroup` from `@soroush.tech/design-system/Accordion`                                                              |
 
 ### Inputs & forms
 
 | Component                                            | Purpose                                                                                   |
 | ---------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `Autocomplete`                                       | A field whose text finds an option in a list - one, several as chips, or free text        |
+| `Fab`                                                | A floating action button: the one main action of a page, circular or extended             |
 | `Button`, `ButtonGroup`, `ToggleButton`              | Actions and toggles                                                                       |
 | `TextInput`                                          | Text field                                                                                |
 | `Checkbox`, `Radio`, `Switch`                        | Selection controls                                                                        |
-| `InputRange`                                         | A slider - one value on a range, or two or more thumbs for a range of values              |
+| `RangeInput`                                         | A slider - one value on a range, or two or more thumbs for a range of values              |
 | `TransferList`                                       | Two lists and the buttons that move the checked items from one to the other               |
-| `NumberField`                                        | A field for a number - read in its locale, clamped to a range, stepped by keys or buttons |
+| `NumberInput`                                        | A field for a number - read in its locale, clamped to a range, stepped by keys or buttons |
 | `Rating`                                             | A row of icons the user sets as a rating, or a read-only display of one                   |
 | `NativeSelect`                                       | Low-level platform `<select>` - not recommended; use `Select native`                      |
 | `Select`                                             | The select to use - custom listbox, or `native` for the platform picker                   |
@@ -140,27 +148,41 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 | Component     | Purpose                                                                                                                                                                                                                                                                         |
 | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `NavTree`     | A tree of links to the pages of a site - groups of links, which can fold                                                                                                                                                                                                        |
 | `Breadcrumbs` | The trail of links from a site's root to the current page - a long one collapses behind a button that shows it all                                                                                                                                                              |
 | `Menu`        | A trigger and the list of commands it opens - exports `MenuList` (the `role="menu"` list that owns the keyboard), `MenuDivider`, `MenuItems` (rows from data) and `ContextMenu` (the same list, opened at the pointer by a right-click) from `@soroush.tech/design-system/Menu` |
 | `Tabs`        | A row of tabs - exports `Tab`, `TabContext` (holds the value for a `TabList` and its panels), `TabList` (the `Tabs` of a `TabContext`), `TabPanel` (the content a tab shows) and `TabScrollButton` from `@soroush.tech/design-system/Tabs`                                      |
 
 ### Feedback
 
-| Component                            | Purpose                                        |
-| ------------------------------------ | ---------------------------------------------- |
-| `CircularProgress`, `LinearProgress` | Determinate/indeterminate progress indicators  |
-| `Skeleton`                           | Loading placeholder with pulse/wave animations |
-| `Backdrop`                           | Dimmed overlay behind modal surfaces           |
+| Component                            | Purpose                                                                                                                           |
+| ------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------- |
+| `FabMenu`                            | A fab that opens a stack of actions from the corner of a page                                                                     |
+| `Snackbar`                           | A transient message in a corner of the window, with auto-hide and an action                                                       |
+| `Alert`                              | An inline message with a severity, an icon, a title and an action - exports `AlertTitle` from `@soroush.tech/design-system/Alert` |
+| `Badge`                              | A count or a dot anchored over another element                                                                                    |
+| `Chip`                               | A compact tag: a label, an icon or avatar, a click and a delete                                                                   |
+| `CircularProgress`, `LinearProgress` | Determinate/indeterminate progress indicators                                                                                     |
+| `Skeleton`                           | Loading placeholder with pulse/wave animations                                                                                    |
+| `Backdrop`                           | Dimmed overlay behind modal surfaces                                                                                              |
+
+### Transitions
+
+| Component                       | Purpose                                                            |
+| ------------------------------- | ------------------------------------------------------------------ |
+| `Collapse`                      | Opens and closes its content by its height, or its width           |
+| `Fade`, `Grow`, `Slide`, `Zoom` | Show and hide one child by opacity, scale, an edge or from nothing |
 
 ### Overlay & behavior primitives
 
-| Component       | Purpose                                                          |
-| --------------- | ---------------------------------------------------------------- |
-| `Portal`        | Renders children into a DOM node outside the parent hierarchy    |
-| `FocusTrap`     | Keeps focus inside a subtree                                     |
-| `Modal`         | Dialog primitive composing `Portal`, `Backdrop`, and `FocusTrap` |
-| `Popover`       | Anchored floating surface built on `Modal`                       |
-| `ThemeProvider` | Supplies the theme and global styles to the app                  |
+| Component       | Purpose                                                                             |
+| --------------- | ----------------------------------------------------------------------------------- |
+| `Tooltip`       | A short description of one element, shown on hover, keyboard focus and a long touch |
+| `Portal`        | Renders children into a DOM node outside the parent hierarchy                       |
+| `FocusTrap`     | Keeps focus inside a subtree                                                        |
+| `Modal`         | Dialog primitive composing `Portal`, `Backdrop`, and `FocusTrap`                    |
+| `Popover`       | Anchored floating surface built on `Modal`                                          |
+| `ThemeProvider` | Supplies the theme and global styles to the app                                     |
 
 ---
 
@@ -168,14 +190,14 @@ SSR critical-CSS extraction (e.g. with `@emotion/server`) is a separate, opt-in
 
 Components never hardcode colors or sizes - props resolve against scales on the `Theme` object:
 
-| Group              | Scales                                                                                                 |
-| ------------------ | ------------------------------------------------------------------------------------------------------ |
-| Color              | `palette` (main/light/dark/contrastText per color) · `text` · `background` · `border` · `colorScheme`  |
-| Typography         | `typography` (variant map) · `fonts` · `fontSizes` · `fontWeights` · `lineHeights` · `letterSpacings`  |
-| Space & shape      | `space` · `sizes` · `radii` · `borderWidths` · `shadows`                                               |
-| Layout             | `breakpoints` (xs/sm/md/lg/xl window classes) · `layout` (columns, margins, panels, top bar per class) |
-| Component scales   | `avatar` (size steps) · `skeleton` (wave highlight)                                                    |
-| Layering & effects | `zOrder` (appBar/drawer/modal) · `blur` · `logoFilter` · `portraitBlend` · `portraitOpacity`           |
+| Group              | Scales                                                                                                        |
+| ------------------ | ------------------------------------------------------------------------------------------------------------- |
+| Color              | `palette` (main/light/dark/contrastText per color) · `text` · `background` · `border` · `colorScheme`         |
+| Typography         | `typography` (variant map) · `fonts` · `fontSizes` · `fontWeights` · `lineHeights` · `letterSpacings`         |
+| Space & shape      | `space` · `sizes` · `radii` · `borderWidths` · `shadows`                                                      |
+| Layout             | `breakpoints` (xs/sm/md/lg/xl window classes) · `layout` (columns, margins, panels, top bar per class)        |
+| Component scales   | `avatar` (size steps) · `skeleton` (wave highlight)                                                           |
+| Layering & effects | `zOrder` (appBar/drawer/modal/snackbar/tooltip) · `blur` · `logoFilter` · `portraitBlend` · `portraitOpacity` |
 
 Prop types are derived from the interface (`keyof Theme['text']`), so adding a token to `themes.ts` propagates everywhere automatically. See [`design-system.md`](./design-system.md) for the full scale table and the palette rules.
 
@@ -233,6 +255,7 @@ Components carry visible literal fallbacks (`size = 'md'`, `variant = 'outside'`
 | `borderRadius` / `surfaceRadius`             | `'md'` / `'sq'`                    | grouped controls / surfaces            |
 | `avatarSize` / `borderColor` / `borderWidth` | `'md'` / `'primary'` / `'thin'`    | avatars and rings                      |
 | `iconSize`                                   | `'lg'`                             | Icon default glyph size (`theme.icon`) |
+| `inputMinWidth`                              | `'12rem'`                          | least width of an input not full width |
 | `buttonVariant` / `switchVariant`            | `'contained'` / `'outside'`        | Button / Switch visual variants        |
 | `inputVariant`                               | `'default'`                        | TextInput, Select, NativeSelect frames |
 | `avatarVariant` / `cardVariant`              | `'circular'` / `'paper'`           | Avatar shape / Card treatment          |

package/dist/Accordion/Accordion.cjs

@@ -0,0 +1,99 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_theme = require("../theme-XJvMdOnY.cjs");
+const require_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
+const require_getSurfaceRadius = require("../getSurfaceRadius-DwOn3ALC.cjs");
+const require_Collapse = require("../Collapse.cjs");
+const require_useControlled = require("../useControlled-CzCxM4J3.cjs");
+const require_AccordionContext = require("../AccordionContext-CpSLhcF6.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+// src/Accordion/Accordion/Accordion.tsx
+const AccordionRoot = require_src.styled("div", {
+	name: "Accordion",
+	label: "Accordion",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+		..._soroush_tech_styled_system_should_forward_prop.props,
+		"borderRadius",
+		"bg",
+		"textColor"
+	]),
+	systemProps: [require_src.src_exports.space]
+})(({ theme, borderRadius, bg, textColor }) => ({
+	overflow: "hidden",
+	backgroundColor: (0, require_src.src_exports.get)(theme, `background.${bg ?? require_themeDefault.themeDefault(theme, "surfaceBg", "paper")}`),
+	color: (0, require_src.src_exports.get)(theme, `text.${textColor ?? require_themeDefault.themeDefault(theme, "textColor", "initial")}`),
+	border: `${theme.borderWidths.thin} solid ${(0, require_src.src_exports.get)(theme, "border.default")}`,
+	borderRadius: require_getSurfaceRadius.getSurfaceRadius(theme, borderRadius)
+}));
+const AccordionRegion = require_src.styled("div", {
+	name: "Accordion",
+	slot: "region",
+	label: "AccordionRegion"
+})({});
+/**
+* @description A heading that opens and closes a region. The first child is the
+* `AccordionSummary`, a button in a heading; the rest is the region it opens - a
+* `role="region"` named by the summary, which in turn `aria-expanded` and `aria-controls` it.
+* Open or closed it owns, until `isExpanded` takes it over. In an `AccordionGroup` the arrows,
+* Home and End move between the summaries, and the group may keep one open at a time.
+*/
+function Accordion({ children, isExpanded: isExpandedProp, defaultExpanded = false, onChange, disabled = false, hasGutters: hasGuttersProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, transition: Transition = require_Collapse.Collapse, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = require_theme.useDefaultProps("Accordion");
+	const hasGutters = hasGuttersProp ?? dp.hasGutters ?? true;
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const bg = bgProp ?? dp.bg;
+	const textColor = textColorProp ?? dp.textColor;
+	const baseId = (0, react.useId)();
+	const group = (0, react.useContext)(require_AccordionContext.AccordionGroupContext);
+	const [ownExpanded, setOwnExpanded] = require_useControlled.useControlled({
+		controlled: isExpandedProp,
+		default: defaultExpanded
+	});
+	const isInGroup = group?.isExclusive && group.openId !== void 0;
+	const isExpanded = isExpandedProp ?? (isInGroup ? group.openId === baseId : ownExpanded);
+	const context = (0, react.useMemo)(() => ({
+		baseId,
+		isExpanded,
+		disabled,
+		hasGutters,
+		toggle: (event) => {
+			const next = !isExpanded;
+			setOwnExpanded(next);
+			group?.setOpenId(next ? baseId : null);
+			onChange?.(event, next);
+		}
+	}), [
+		baseId,
+		isExpanded,
+		disabled,
+		hasGutters,
+		setOwnExpanded,
+		group,
+		onChange
+	]);
+	const [summary, ...region] = react.Children.toArray(children);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_AccordionContext.AccordionContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(AccordionRoot, {
+			borderRadius,
+			bg,
+			textColor,
+			className,
+			"data-testid": dataTestid,
+			...spaceProps,
+			children: [summary, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Transition, {
+				isShown: isExpanded,
+				shouldAppear: false,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionRegion, {
+					role: "region",
+					id: require_AccordionContext.getRegionId(baseId),
+					"aria-labelledby": require_AccordionContext.getSummaryId(baseId),
+					children: region
+				})
+			})]
+		})
+	});
+}
+exports.Accordion = Accordion;

package/dist/Accordion/Accordion.d.cts

@@ -0,0 +1,39 @@
+import { nt as Theme } from "../index-Lsm4v8fB.cjs";
+import { r as CollapseProps } from "../index-CLTFsCYC.cjs";
+import { ComponentType, ReactNode, SyntheticEvent } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+/** What an `Accordion` hands the transition that opens and closes its region. */
+type AccordionTransitionProps = Pick<CollapseProps, 'isShown' | 'children' | 'shouldAppear' | 'shouldMountOnEnter' | 'shouldUnmountOnExit' | 'timeout' | 'easing'>;
+interface AccordionProps extends SpaceProps<Theme> {
+  /** An `AccordionSummary`, then what it opens - `AccordionDetails`, `AccordionActions`. */
+  children: ReactNode;
+  /** Whether it is open. Controlled with `onChange`. */
+  isExpanded?: boolean;
+  /** Whether it is open at first, when uncontrolled. Default: `false`. */
+  defaultExpanded?: boolean;
+  /** Fired when the summary is pressed, with the state it asks for. */
+  onChange?: (event: SyntheticEvent, isExpanded: boolean) => void;
+  /** Stays as it is, and its summary is off. Default: `false`. */
+  disabled?: boolean;
+  /** Side padding on the summary, the details and the actions. Default: `true`. */
+  hasGutters?: boolean;
+  /** Corner radius, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. */
+  borderRadius?: keyof Theme['radii'];
+  /** Background, resolves against `theme.background`. Default: `'paper'`. */
+  bg?: keyof Theme['background'];
+  /** Text color, resolves against `theme.text`. Default: `theme.defaults.textColor`, else `'initial'`. */
+  textColor?: keyof Theme['text'];
+  /** The transition that opens and closes the region. Default: `Collapse`. */
+  transition?: ComponentType<AccordionTransitionProps>;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A heading that opens and closes a region. The first child is the
+ * `AccordionSummary`, a button in a heading; the rest is the region it opens - a
+ * `role="region"` named by the summary, which in turn `aria-expanded` and `aria-controls` it.
+ * Open or closed it owns, until `isExpanded` takes it over. In an `AccordionGroup` the arrows,
+ * Home and End move between the summaries, and the group may keep one open at a time.
+ */
+declare function Accordion({ children, isExpanded: isExpandedProp, defaultExpanded, onChange, disabled, hasGutters: hasGuttersProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, transition: Transition, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionProps>): import("react").JSX.Element;
+export { Accordion, AccordionProps, AccordionTransitionProps };

package/dist/Accordion/Accordion.d.mts

@@ -0,0 +1,39 @@
+import { nt as Theme } from "../index-CR8qkP8U.mjs";
+import { r as CollapseProps } from "../index-B3Bdupj3.mjs";
+import { SpaceProps } from "@soroush.tech/styled-system";
+import { ComponentType, ReactNode, SyntheticEvent } from "react";
+/** What an `Accordion` hands the transition that opens and closes its region. */
+type AccordionTransitionProps = Pick<CollapseProps, 'isShown' | 'children' | 'shouldAppear' | 'shouldMountOnEnter' | 'shouldUnmountOnExit' | 'timeout' | 'easing'>;
+interface AccordionProps extends SpaceProps<Theme> {
+  /** An `AccordionSummary`, then what it opens - `AccordionDetails`, `AccordionActions`. */
+  children: ReactNode;
+  /** Whether it is open. Controlled with `onChange`. */
+  isExpanded?: boolean;
+  /** Whether it is open at first, when uncontrolled. Default: `false`. */
+  defaultExpanded?: boolean;
+  /** Fired when the summary is pressed, with the state it asks for. */
+  onChange?: (event: SyntheticEvent, isExpanded: boolean) => void;
+  /** Stays as it is, and its summary is off. Default: `false`. */
+  disabled?: boolean;
+  /** Side padding on the summary, the details and the actions. Default: `true`. */
+  hasGutters?: boolean;
+  /** Corner radius, resolves against `theme.radii`. Default: `theme.defaults.surfaceRadius`, else square. */
+  borderRadius?: keyof Theme['radii'];
+  /** Background, resolves against `theme.background`. Default: `'paper'`. */
+  bg?: keyof Theme['background'];
+  /** Text color, resolves against `theme.text`. Default: `theme.defaults.textColor`, else `'initial'`. */
+  textColor?: keyof Theme['text'];
+  /** The transition that opens and closes the region. Default: `Collapse`. */
+  transition?: ComponentType<AccordionTransitionProps>;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A heading that opens and closes a region. The first child is the
+ * `AccordionSummary`, a button in a heading; the rest is the region it opens - a
+ * `role="region"` named by the summary, which in turn `aria-expanded` and `aria-controls` it.
+ * Open or closed it owns, until `isExpanded` takes it over. In an `AccordionGroup` the arrows,
+ * Home and End move between the summaries, and the group may keep one open at a time.
+ */
+declare function Accordion({ children, isExpanded: isExpandedProp, defaultExpanded, onChange, disabled, hasGutters: hasGuttersProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, transition: Transition, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<AccordionProps>): import("react").JSX.Element;
+export { Accordion, AccordionProps, AccordionTransitionProps };

package/dist/Accordion/Accordion.mjs

@@ -0,0 +1,97 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { n as useDefaultProps } from "../theme-DyyZQFzQ.mjs";
+import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
+import { t as getSurfaceRadius } from "../getSurfaceRadius-B1QE_VLa.mjs";
+import { Collapse } from "../Collapse.mjs";
+import { t as useControlled } from "../useControlled-B4uQ9Bj6.mjs";
+import { i as getSummaryId, n as AccordionGroupContext, r as getRegionId, t as AccordionContext } from "../AccordionContext-CBiu9CIa.mjs";
+import { Children, useContext, useId, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/Accordion/Accordion/Accordion.tsx
+const AccordionRoot = styled("div", {
+	name: "Accordion",
+	label: "Accordion",
+	shouldForwardProp: createShouldForwardProp([
+		...props,
+		"borderRadius",
+		"bg",
+		"textColor"
+	]),
+	systemProps: [src_exports.space]
+})(({ theme, borderRadius, bg, textColor }) => ({
+	overflow: "hidden",
+	backgroundColor: (0, src_exports.get)(theme, `background.${bg ?? themeDefault(theme, "surfaceBg", "paper")}`),
+	color: (0, src_exports.get)(theme, `text.${textColor ?? themeDefault(theme, "textColor", "initial")}`),
+	border: `${theme.borderWidths.thin} solid ${(0, src_exports.get)(theme, "border.default")}`,
+	borderRadius: getSurfaceRadius(theme, borderRadius)
+}));
+const AccordionRegion = styled("div", {
+	name: "Accordion",
+	slot: "region",
+	label: "AccordionRegion"
+})({});
+/**
+* @description A heading that opens and closes a region. The first child is the
+* `AccordionSummary`, a button in a heading; the rest is the region it opens - a
+* `role="region"` named by the summary, which in turn `aria-expanded` and `aria-controls` it.
+* Open or closed it owns, until `isExpanded` takes it over. In an `AccordionGroup` the arrows,
+* Home and End move between the summaries, and the group may keep one open at a time.
+*/
+function Accordion({ children, isExpanded: isExpandedProp, defaultExpanded = false, onChange, disabled = false, hasGutters: hasGuttersProp, borderRadius: borderRadiusProp, bg: bgProp, textColor: textColorProp, transition: Transition = Collapse, className, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("Accordion");
+	const hasGutters = hasGuttersProp ?? dp.hasGutters ?? true;
+	const borderRadius = borderRadiusProp ?? dp.borderRadius;
+	const bg = bgProp ?? dp.bg;
+	const textColor = textColorProp ?? dp.textColor;
+	const baseId = useId();
+	const group = useContext(AccordionGroupContext);
+	const [ownExpanded, setOwnExpanded] = useControlled({
+		controlled: isExpandedProp,
+		default: defaultExpanded
+	});
+	const isInGroup = group?.isExclusive && group.openId !== void 0;
+	const isExpanded = isExpandedProp ?? (isInGroup ? group.openId === baseId : ownExpanded);
+	const context = useMemo(() => ({
+		baseId,
+		isExpanded,
+		disabled,
+		hasGutters,
+		toggle: (event) => {
+			const next = !isExpanded;
+			setOwnExpanded(next);
+			group?.setOpenId(next ? baseId : null);
+			onChange?.(event, next);
+		}
+	}), [
+		baseId,
+		isExpanded,
+		disabled,
+		hasGutters,
+		setOwnExpanded,
+		group,
+		onChange
+	]);
+	const [summary, ...region] = Children.toArray(children);
+	return /* @__PURE__ */ jsx(AccordionContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsxs(AccordionRoot, {
+			borderRadius,
+			bg,
+			textColor,
+			className,
+			"data-testid": dataTestid,
+			...spaceProps,
+			children: [summary, /* @__PURE__ */ jsx(Transition, {
+				isShown: isExpanded,
+				shouldAppear: false,
+				children: /* @__PURE__ */ jsx(AccordionRegion, {
+					role: "region",
+					id: getRegionId(baseId),
+					"aria-labelledby": getSummaryId(baseId),
+					children: region
+				})
+			})]
+		})
+	});
+}
+export { Accordion };

package/dist/Accordion/AccordionActions.cjs

@@ -0,0 +1,28 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_AccordionContext = require("../AccordionContext-CpSLhcF6.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+// src/Accordion/AccordionActions/AccordionActions.tsx
+const ActionsRoot = require_src.styled("div", {
+	name: "AccordionActions",
+	label: "AccordionActions",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["hasGutters"])
+})(({ theme, hasGutters }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "flex-end",
+	gap: theme.space[1],
+	padding: `${theme.space[1]} ${hasGutters ? theme.space[2] : "0"}`
+}));
+/** @description The foot of an `Accordion` region: its buttons, at the end of a row. */
+function AccordionActions({ children, className, "data-testid": dataTestid }) {
+	const { hasGutters } = require_AccordionContext.useAccordion("AccordionActions");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ActionsRoot, {
+		hasGutters,
+		className,
+		"data-testid": dataTestid,
+		children
+	});
+}
+exports.AccordionActions = AccordionActions;

package/dist/Accordion/AccordionActions.d.cts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface AccordionActionsProps {
+  /** The buttons at the foot of the region. */
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/** @description The foot of an `Accordion` region: its buttons, at the end of a row. */
+declare function AccordionActions({ children, className, 'data-testid': dataTestid }: Readonly<AccordionActionsProps>): import("react").JSX.Element;
+export { AccordionActions, AccordionActionsProps };

package/dist/Accordion/AccordionActions.d.mts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface AccordionActionsProps {
+  /** The buttons at the foot of the region. */
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/** @description The foot of an `Accordion` region: its buttons, at the end of a row. */
+declare function AccordionActions({ children, className, 'data-testid': dataTestid }: Readonly<AccordionActionsProps>): import("react").JSX.Element;
+export { AccordionActions, AccordionActionsProps };

package/dist/Accordion/AccordionActions.mjs

@@ -0,0 +1,26 @@
+import { o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { a as useAccordion } from "../AccordionContext-CBiu9CIa.mjs";
+import { jsx } from "react/jsx-runtime";
+// src/Accordion/AccordionActions/AccordionActions.tsx
+const ActionsRoot = styled("div", {
+	name: "AccordionActions",
+	label: "AccordionActions",
+	shouldForwardProp: createShouldForwardProp(["hasGutters"])
+})(({ theme, hasGutters }) => ({
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "flex-end",
+	gap: theme.space[1],
+	padding: `${theme.space[1]} ${hasGutters ? theme.space[2] : "0"}`
+}));
+/** @description The foot of an `Accordion` region: its buttons, at the end of a row. */
+function AccordionActions({ children, className, "data-testid": dataTestid }) {
+	const { hasGutters } = useAccordion("AccordionActions");
+	return /* @__PURE__ */ jsx(ActionsRoot, {
+		hasGutters,
+		className,
+		"data-testid": dataTestid,
+		children
+	});
+}
+export { AccordionActions };

package/dist/Accordion/AccordionDetails.cjs

@@ -0,0 +1,22 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("../src-yC1f5WR2.cjs");
+const require_AccordionContext = require("../AccordionContext-CpSLhcF6.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
+// src/Accordion/AccordionDetails/AccordionDetails.tsx
+const DetailsRoot = require_src.styled("div", {
+	name: "AccordionDetails",
+	label: "AccordionDetails",
+	shouldForwardProp: (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)(["hasGutters"])
+})(({ theme, hasGutters }) => ({ padding: `${theme.space[1]} ${hasGutters ? theme.space[2] : "0"} ${theme.space[2]}` }));
+/** @description What an `Accordion` opens: the padded body of its region. */
+function AccordionDetails({ children, className, "data-testid": dataTestid }) {
+	const { hasGutters } = require_AccordionContext.useAccordion("AccordionDetails");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DetailsRoot, {
+		hasGutters,
+		className,
+		"data-testid": dataTestid,
+		children
+	});
+}
+exports.AccordionDetails = AccordionDetails;

package/dist/Accordion/AccordionDetails.d.cts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface AccordionDetailsProps {
+  /** What the accordion opens. */
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/** @description What an `Accordion` opens: the padded body of its region. */
+declare function AccordionDetails({ children, className, 'data-testid': dataTestid }: Readonly<AccordionDetailsProps>): import("react").JSX.Element;
+export { AccordionDetails, AccordionDetailsProps };

package/dist/Accordion/AccordionDetails.d.mts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface AccordionDetailsProps {
+  /** What the accordion opens. */
+  children?: ReactNode;
+  className?: string;
+  'data-testid'?: string;
+}
+/** @description What an `Accordion` opens: the padded body of its region. */
+declare function AccordionDetails({ children, className, 'data-testid': dataTestid }: Readonly<AccordionDetailsProps>): import("react").JSX.Element;
+export { AccordionDetails, AccordionDetailsProps };

package/dist/Accordion/AccordionDetails.mjs

@@ -0,0 +1,20 @@
+import { o as styled, t as createShouldForwardProp } from "../src-B-rNjHIL.mjs";
+import { a as useAccordion } from "../AccordionContext-CBiu9CIa.mjs";
+import { jsx } from "react/jsx-runtime";
+// src/Accordion/AccordionDetails/AccordionDetails.tsx
+const DetailsRoot = styled("div", {
+	name: "AccordionDetails",
+	label: "AccordionDetails",
+	shouldForwardProp: createShouldForwardProp(["hasGutters"])
+})(({ theme, hasGutters }) => ({ padding: `${theme.space[1]} ${hasGutters ? theme.space[2] : "0"} ${theme.space[2]}` }));
+/** @description What an `Accordion` opens: the padded body of its region. */
+function AccordionDetails({ children, className, "data-testid": dataTestid }) {
+	const { hasGutters } = useAccordion("AccordionDetails");
+	return /* @__PURE__ */ jsx(DetailsRoot, {
+		hasGutters,
+		className,
+		"data-testid": dataTestid,
+		children
+	});
+}
+export { AccordionDetails };