@povio/ui 2.1.22 → 2.2.1

package/dist/{TextEditor.js → components/inputs/TextEditor/TextEditor.js}

@@ -1,8 +1,8 @@
-import { uiOutlineClass } from "./outline.clsx.js";
-import { isEqual } from "./isEqual.js";
-import { FormFieldLabel } from "./FormFieldLabel.js";
-import { FormField } from "./FormField.js";
-import { TextEditorToolbar } from "./TextEditorToolbar.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { isEqual } from "../../../utils/isEqual.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { FormField } from "../FormField/FormField.js";
+import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useRef, useState } from "react";
@@ -124,7 +124,7 @@ var TextEditorBase = ({ ref, as = "default", placeholder, label, hideLabel, tool
 };
 const TextEditor = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{ColorPickerDropdown.js → components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js}

@@ -1,11 +1,11 @@
-import { ArrowDropDownIcon } from "./ArrowDropDown.js";
-import { Typography } from "./Typography.js";
-import { useInputCva } from "./input.cva.js";
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { useInputCva } from "../../shared/input.cva.js";
 import { ColorPicker } from "./ColorPicker.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
-import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 import { useState } from "react";
+import { Button, Dialog, DialogTrigger, Popover } from "react-aria-components";
 const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
 	const inputCva = useInputCva();
 	const [isOpen, setIsOpen] = useState(false);

package/dist/{HyperlinkAction.js → components/inputs/TextEditor/Toolbar/HyperlinkAction.js}

@@ -1,9 +1,9 @@
-import { LinkIcon } from "./Link.js";
-import { Button } from "./Button.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
-import { TextInput } from "./TextInput.js";
-import { ResponsivePopover } from "./ResponsivePopover.js";
+import { LinkIcon } from "../../../../assets/icons/Link.js";
+import { Button } from "../../../buttons/Button/Button.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
+import { TextInput } from "../../Input/TextInput/TextInput.js";
+import { ResponsivePopover } from "../../../overlays/ResponsivePopover/ResponsivePopover.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useEffect, useState } from "react";

package/dist/{TextAlignSelect.js → components/inputs/TextEditor/Toolbar/TextAlignSelect.js}

@@ -1,9 +1,9 @@
-import { AlignCenterIcon } from "./AlignCenter.js";
-import { AlignLeftIcon } from "./AlignLeft.js";
-import { AlignLeftRightIcon } from "./AlignLeftRight.js";
-import { AlignRightIcon } from "./AlignRight.js";
-import { ns } from "./i18n.js";
-import { Select } from "./Select.js";
+import { AlignCenterIcon } from "../../../../assets/icons/AlignCenter.js";
+import { AlignLeftIcon } from "../../../../assets/icons/AlignLeft.js";
+import { AlignLeftRightIcon } from "../../../../assets/icons/AlignLeftRight.js";
+import { AlignRightIcon } from "../../../../assets/icons/AlignRight.js";
+import { ns } from "../../../../config/i18n.js";
+import { Select } from "../../Selection/Select/Select.js";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 const TextAlignSelect = ({ editor }) => {

package/dist/{TextColorSelect.js → components/inputs/TextEditor/Toolbar/TextColorSelect.js}

@@ -1,6 +1,6 @@
-import { TextColorIcon } from "./TextColor.js";
+import { TextColorIcon } from "../../../../assets/icons/TextColor.js";
 import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
-import { defaultColors } from "./textEditor.types.js";
+import { defaultColors } from "../textEditor.types.js";
 import { jsx } from "react/jsx-runtime";
 const TextColorSelect = ({ editor }) => {
 	if (!editor.extensionManager.extensions.some((extension) => extension.name === "color")) return null;

package/dist/{TextHighlightSelect.js → components/inputs/TextEditor/Toolbar/TextHighlightSelect.js}

@@ -1,7 +1,7 @@
-import { HighlightIcon } from "./Highlight.js";
-import { HighlightOnIcon } from "./HighlightOn.js";
+import { HighlightIcon } from "../../../../assets/icons/Highlight.js";
+import { HighlightOnIcon } from "../../../../assets/icons/HighlightOn.js";
 import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
-import { defaultColors } from "./textEditor.types.js";
+import { defaultColors } from "../textEditor.types.js";
 import { jsx } from "react/jsx-runtime";
 const TextHighlightSelect = ({ editor }) => {
 	if (!editor.extensionManager.extensions.some((extension) => extension.name === "highlight")) return null;

package/dist/{TextListActions.js → components/inputs/TextEditor/Toolbar/TextListActions.js}

@@ -1,7 +1,7 @@
-import { BulletedListIcon } from "./BulletedList.js";
-import { NumberedListIcon } from "./NumberedList.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
+import { BulletedListIcon } from "../../../../assets/icons/BulletedList.js";
+import { NumberedListIcon } from "../../../../assets/icons/NumberedList.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";

package/dist/{TextMarksActions.js → components/inputs/TextEditor/Toolbar/TextMarksActions.js}

@@ -1,9 +1,9 @@
-import { BoldIcon } from "./Bold.js";
-import { ItalicIcon } from "./Italic.js";
-import { StrikethroughIcon } from "./Strikethrough.js";
-import { UnderlinedIcon } from "./Underlined.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
+import { BoldIcon } from "../../../../assets/icons/Bold.js";
+import { ItalicIcon } from "../../../../assets/icons/Italic.js";
+import { StrikethroughIcon } from "../../../../assets/icons/Strikethrough.js";
+import { UnderlinedIcon } from "../../../../assets/icons/Underlined.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";

package/dist/{TextStyleSelect.js → components/inputs/TextEditor/Toolbar/TextStyleSelect.js}

@@ -1,6 +1,6 @@
-import { Typography } from "./Typography.js";
-import { ns } from "./i18n.js";
-import { Select } from "./Select.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+import { Select } from "../../Selection/Select/Select.js";
 import { jsx } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 const TextStyleSelect = ({ editor }) => {

package/dist/{Toggle.js → components/inputs/Toggle/Toggle.js}

@@ -1,7 +1,7 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { FormFieldError } from "./FormFieldError.js";
-import { CheckContent } from "./CheckContent.js";
-import { UIConfig } from "./uiConfig.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { FormFieldError } from "../FormField/FormFieldError.js";
+import { CheckContent } from "../shared/CheckContent.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
 import { toggle, toggleTypography } from "./toggle.cva.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { clsx } from "clsx";
@@ -13,7 +13,7 @@ var ToggleBase = (props) => {
 	const uiStyle = UIStyle.useConfig();
 	const toggleCva = uiStyle?.toggle?.cva ?? toggle;
 	const toggleTypographyMap = uiStyle?.toggle?.typography ?? toggleTypography;
-	const { className, children, isDisabled, error, variant = ui.toggle.variant,...rest } = props;
+	const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
 	const formFieldErrorProps = {
 		error,
 		isDisabled
@@ -38,7 +38,7 @@ var ToggleBase = (props) => {
 };
 const Toggle = (props) => {
 	if ("formControl" in props && props.formControl) {
-		const { formControl, ref,...innerProps } = props;
+		const { formControl, ref, ...innerProps } = props;
 		return /* @__PURE__ */ jsx(Controller, {
 			control: formControl.control,
 			name: formControl.name,

package/dist/{toggle.cva.js → components/inputs/Toggle/toggle.cva.js}

@@ -1,5 +1,5 @@
-import { uiGroupOutlineClass } from "./outline.clsx.js";
-import { compoundMapper } from "./compoundMapper.js";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
 const toggle = cva(["h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4", uiGroupOutlineClass], {
 	variants: { variant: { default: [

package/dist/{CheckContent.js → components/inputs/shared/CheckContent.js}

@@ -1,8 +1,8 @@
-import { typography } from "./typography.cva.js";
-import { UIStyle } from "./uiStyle.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { typography } from "../../text/Typography/typography.cva.js";
 import { jsx } from "react/jsx-runtime";
 import clsx$1 from "clsx";
-const CheckContent = ({ children, className,...props }) => {
+const CheckContent = ({ children, className, ...props }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: clsx$1((UIStyle.useConfig()?.typography?.cva ?? typography)({
 			size: "label-1",

package/dist/{InputClear.js → components/inputs/shared/InputClear.js}

@@ -1,6 +1,6 @@
-import { CloseIcon } from "./Close.js";
-import { InlineIconButton } from "./InlineIconButton.js";
-import { ns } from "./i18n.js";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../config/i18n.js";
 import { jsx } from "react/jsx-runtime";
 import { clsx } from "clsx";
 import { useTranslation } from "react-i18next";

package/dist/{TooltipWrapper.js → components/inputs/shared/TooltipWrapper.js}

@@ -1,4 +1,4 @@
-import { Tooltip } from "./Tooltip.js";
+import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
 import { jsx } from "react/jsx-runtime";
 const TooltipWrapper = (props) => {
 	if (props.as !== "inline") return props.children;

package/dist/components/inputs/shared/input.cva.d.ts

@@ -2,18 +2,18 @@ import { VariantProps } from 'class-variance-authority';
 import { ClassProp } from 'class-variance-authority/types';
 export declare const inputBase: (props?: ({
     variant?: "outlined" | "filled" | null | undefined;
-    as?: "default" | "filter" | "inline" | "floating" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 } & ClassProp) | undefined) => string;
 export interface InputBaseProps extends VariantProps<typeof inputBase> {
 }
 export declare const inputSize: (props?: ({
-    size?: "default" | "small" | "extra-small" | "large" | null | undefined;
-    as?: "default" | "filter" | "inline" | "floating" | null | undefined;
+    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 } & ClassProp) | undefined) => string;
 export interface InputSizeProps extends VariantProps<typeof inputSize> {
 }
 export declare const inputSide: (props?: ({
-    size?: "default" | "small" | "extra-small" | "large" | null | undefined;
+    size?: "small" | "default" | "extra-small" | "large" | null | undefined;
     type?: "left" | "right" | "var" | null | undefined;
 } & ClassProp) | undefined) => string;
 export interface InputSideProps extends VariantProps<typeof inputSide> {

package/dist/{input.cva.js → components/inputs/shared/input.cva.js}

@@ -1,5 +1,5 @@
-import { UIStyle } from "./uiStyle.context.js";
-import { uiOutlineClass } from "./outline.clsx.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
 import { clsx } from "clsx";
 import { cva } from "class-variance-authority";
 const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
@@ -89,7 +89,7 @@ const inputBase = cva([uiOutlineClass, "flex w-full not-[textarea]:truncate"], {
 			]
 		},
 		{
-			variant: "outlined",
+			variant: "filled",
 			as: "filter",
 			className: [
 				"border border-transparent border-solid bg-input-filled-idle text-text-default-1",
@@ -118,20 +118,20 @@ const inputSize = cva("", {
 		as: {
 			default: "",
 			floating: [
-				"px-input-side-default",
+				"px-input-side-m",
 				"py-floating-label-input-height-empty!",
-				"group-has-[input:not(:placeholder-shown)]/input-content:pb-floating-label-input-height-filled!",
-				"group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"group-has-[input:not(:placeholder-shown)]/select-content:pb-floating-label-input-height-filled!",
-				"group-has-[input:not(:placeholder-shown)]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"group-data-[has-selection]/select-content:pb-floating-label-input-height-filled!",
-				"group-data-[has-selection]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"group-data-[has-search]/select-content:pb-floating-label-input-height-filled!",
-				"group-data-[has-search]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"data-[datetime-input]:data-[has-selection]:pb-floating-label-input-height-filled!",
-				"data-[datetime-input]:data-[has-selection]:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!",
-				"data-[datetime-input]:data-[focus-within]:pb-floating-label-input-height-filled!",
-				"data-[datetime-input]:data-[focus-within]:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--text-label-3--line-height)*var(--text-label-3))]!"
+				"group-has-[input:not(:placeholder-shown)]/input-content:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
+				"group-has-[input:not(:placeholder-shown)]/input-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"group-has-[input:not(:placeholder-shown)]/select-content:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
+				"group-has-[input:not(:placeholder-shown)]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"group-data-[has-selection]/select-content:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
+				"group-data-[has-selection]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"group-data-[has-search]/select-content:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
+				"group-data-[has-search]/select-content:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"data-[datetime-input]:data-[has-selection]:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
+				"data-[datetime-input]:data-[has-selection]:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!",
+				"data-[datetime-input]:data-[focus-within]:pb-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-bottom))]!",
+				"data-[datetime-input]:data-[focus-within]:pt-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top)+var(--text-label-3--line-height)*var(--text-label-3))]!"
 			],
 			filter: "",
 			inline: ""
@@ -145,7 +145,7 @@ const inputSize = cva("", {
 				"inline"
 			],
 			size: "extra-small",
-			className: "px-input-side-default py-input-height-default text-label-1"
+			className: "px-input-side-xs py-input-height-xs"
 		},
 		{
 			as: [
@@ -154,7 +154,7 @@ const inputSize = cva("", {
 				"inline"
 			],
 			size: "small",
-			className: "px-input-side-default py-input-height-default text-label-1"
+			className: "px-input-side-s py-input-height-s"
 		},
 		{
 			as: [
@@ -163,7 +163,7 @@ const inputSize = cva("", {
 				"inline"
 			],
 			size: "default",
-			className: "px-input-side-default py-input-height-default text-label-1"
+			className: "px-input-side-m py-input-height-m"
 		},
 		{
 			as: [
@@ -172,7 +172,7 @@ const inputSize = cva("", {
 				"inline"
 			],
 			size: "large",
-			className: "px-input-side-default py-input-height-default text-label-1"
+			className: "px-input-side-l py-input-height-l"
 		}
 	],
 	defaultVariants: {
@@ -198,62 +198,62 @@ const inputSide = cva("", {
 		{
 			type: "left",
 			size: "extra-small",
-			className: "left-input-side-default"
+			className: "left-input-side-xs"
 		},
 		{
 			type: "right",
 			size: "extra-small",
-			className: "right-input-side-default"
+			className: "right-input-side-xs"
 		},
 		{
 			type: "var",
 			size: "extra-small",
-			className: "--spacing-input-side-default"
+			className: "--spacing-input-side-xs"
 		},
 		{
 			type: "left",
 			size: "small",
-			className: "left-input-side-default"
+			className: "left-input-side-s"
 		},
 		{
 			type: "right",
 			size: "small",
-			className: "right-input-side-default"
+			className: "right-input-side-s"
 		},
 		{
 			type: "var",
 			size: "small",
-			className: "--spacing-input-side-default"
+			className: "--spacing-input-side-s"
 		},
 		{
 			type: "left",
 			size: "default",
-			className: "left-input-side-default"
+			className: "left-input-side-m"
 		},
 		{
 			type: "right",
 			size: "default",
-			className: "right-input-side-default"
+			className: "right-input-side-m"
 		},
 		{
 			type: "var",
 			size: "default",
-			className: "--spacing-input-side-default"
+			className: "--spacing-input-side-m"
 		},
 		{
 			type: "left",
 			size: "large",
-			className: "left-input-side-default"
+			className: "left-input-side-l"
 		},
 		{
 			type: "right",
 			size: "large",
-			className: "right-input-side-default"
+			className: "right-input-side-l"
 		},
 		{
 			type: "var",
 			size: "large",
-			className: "--spacing-input-side-default"
+			className: "--spacing-input-side-l"
 		}
 	],
 	defaultVariants: { size: "default" }
@@ -262,7 +262,7 @@ const useInputCva = () => {
 	const uiStyle = UIStyle.useConfig();
 	const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
 	const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
-	return ({ className,...rest }) => {
+	return ({ className, ...rest }) => {
 		return clsx(inputBaseCva(rest), inputSizeCva(rest), className);
 	};
 };

package/dist/components/inputs/shared/label.cva.d.ts

@@ -1,10 +1,10 @@
 import { VariantProps } from 'class-variance-authority';
 import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 export declare const labelBase: (props?: ({
-    as?: "default" | "filter" | "inline" | "floating" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface LabelBaseProps extends VariantProps<typeof labelBase> {
 }
 export declare const labelTypography: (props: {
-    as?: "default" | "filter" | "inline" | "floating" | null | undefined;
+    as?: "filter" | "default" | "floating" | "inline" | null | undefined;
 }) => TypographyVariantProps | undefined;

package/dist/{label.cva.js → components/inputs/shared/label.cva.js}

@@ -1,4 +1,4 @@
-import { compoundMapper } from "./compoundMapper.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
 import { cva } from "class-variance-authority";
 const labelBase = cva("", {
 	variants: { as: {
@@ -16,7 +16,7 @@ const labelBase = cva("", {
 			"group-has-[textarea:disabled]/text-area:text-interactive-text-secondary-disabled",
 			"group-data-[text-area]/text-area:top-floating-label-input-height-empty group-data-[text-area]/text-area:translate-y-0",
 			"group-data-[text-editor]/text-editor:top-floating-label-input-height-empty group-data-[text-editor]/text-editor:left-input-side-default group-data-[text-editor]/text-editor:translate-y-0",
-			"group-has-[input:not(:placeholder-shown)]/input-content:top-floating-label-input-height-filled group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
+			"group-has-[input:not(:placeholder-shown)]/input-content:top-[calc(var(--spacing-floating-label-input-height-filled)+var(--spacing-floating-label-input-offset-top))] group-has-[input:not(:placeholder-shown)]/input-content:translate-y-0",
 			"group-has-[textarea:not(:placeholder-shown)]/text-area:hidden",
 			"group-has-[textarea:placeholder-shown]/text-area:text-text-default-3",
 			"group-has-[textarea:placeholder-shown]/text-area:font-medium!",

package/dist/components/navigation/Accordion/Accordion.d.ts

@@ -0,0 +1,3 @@
+import { AccordionProps } from './accordion.types';
+export declare const Accordion: ({ items, variant, actionPosition, allowsMultipleExpanded, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled, }: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export type { AccordionItemProps, AccordionProps } from './accordion.types';

package/dist/components/navigation/Accordion/Accordion.js

@@ -0,0 +1,32 @@
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { accordionCva } from "./accordion.cva.js";
+import { AccordionItem } from "./AccordionItem.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { DisclosureGroup } from "react-aria-components";
+const Accordion = ({ items, variant = "filled", actionPosition = "right", allowsMultipleExpanded = false, expandedKeys, defaultExpandedKeys, onExpandedChange, className, disabled }) => {
+	return /* @__PURE__ */ jsx(DisclosureGroup, {
+		allowsMultipleExpanded,
+		expandedKeys,
+		defaultExpandedKeys,
+		onExpandedChange,
+		className: clsx((UIStyle.useConfig()?.accordion?.cva ?? accordionCva)({
+			className,
+			variant,
+			singleItem: items.length === 1
+		})),
+		isDisabled: disabled,
+		children: items.map((item) => /* @__PURE__ */ jsx(AccordionItem, {
+			id: item.id,
+			heading: item.heading,
+			subheading: item.subheading,
+			icon: item.icon,
+			variant,
+			actionPosition,
+			disabled: item.disabled || disabled,
+			isSingle: items.length === 1,
+			children: item.children
+		}, item.id))
+	});
+};
+export { Accordion };

package/dist/components/navigation/Accordion/AccordionItem.d.ts

@@ -0,0 +1,2 @@
+import { AccordionItemProps } from './accordion.types';
+export declare const AccordionItem: ({ id, disabled, heading, subheading, children, icon: Icon, variant, actionPosition, isSingle, }: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/Accordion/AccordionItem.js

@@ -0,0 +1,62 @@
+import { ChevronDownIcon } from "../../../assets/icons/ChevronDown.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { accordionChevronCva, accordionHeadingCva, accordionHeadingSubtitleCva, accordionHeadingTitleCva, accordionIconCva, accordionItemCva, accordionPanelContentCva, accordionPanelCva, accordionTriggerCva } from "./accordion.cva.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";
+const AccordionItem = ({ id, disabled, heading, subheading, children, icon: Icon, variant = "filled", actionPosition = "right", isSingle }) => {
+	const uiStyle = UIStyle.useConfig();
+	const itemCva = uiStyle?.accordion?.itemCva ?? accordionItemCva;
+	const triggerCva = uiStyle?.accordion?.triggerCva ?? accordionTriggerCva;
+	const headingCva = uiStyle?.accordion?.headingCva ?? accordionHeadingCva;
+	const headingTitleCva = uiStyle?.accordion?.headingTitleCva ?? accordionHeadingTitleCva;
+	const headingSubtitleCva = uiStyle?.accordion?.headingSubtitleCva ?? accordionHeadingSubtitleCva;
+	const chevronCva = uiStyle?.accordion?.chevronCva ?? accordionChevronCva;
+	const iconCva = uiStyle?.accordion?.iconCva ?? accordionIconCva;
+	const panelCva = uiStyle?.accordion?.panelCva ?? accordionPanelCva;
+	const panelContentCva = uiStyle?.accordion?.panelContentCva ?? accordionPanelContentCva;
+	return /* @__PURE__ */ jsx(Disclosure, {
+		id,
+		className: itemCva({
+			variant,
+			singleItem: isSingle
+		}),
+		isDisabled: disabled,
+		children: ({ isExpanded }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(Button, {
+			slot: "trigger",
+			className: triggerCva({
+				variant,
+				actionPosition,
+				disabled
+			}),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: headingCva({}),
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 items-center gap-accordion-gap-icon-to-text",
+					children: [
+						Icon && /* @__PURE__ */ jsx(Icon, { className: iconCva({}) }),
+						/* @__PURE__ */ jsx(Typography, {
+							size: "label-2",
+							variant: "default",
+							className: headingTitleCva({}),
+							children: heading
+						}),
+						subheading && /* @__PURE__ */ jsx(Typography, {
+							size: "label-3",
+							variant: "default",
+							className: headingSubtitleCva({}),
+							children: subheading
+						})
+					]
+				})
+			}), /* @__PURE__ */ jsx(ChevronDownIcon, { className: chevronCva({ isExpanded }) })]
+		}) }), /* @__PURE__ */ jsx(DisclosurePanel, {
+			className: panelCva({ isExpanded }),
+			children: /* @__PURE__ */ jsx("div", {
+				className: panelContentCva({}),
+				children
+			})
+		})] })
+	});
+};
+export { AccordionItem };

package/dist/components/navigation/Accordion/accordion.cva.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from 'class-variance-authority';
+export declare const accordionCva: (props?: ({
+    variant?: "outlined" | "filled" | null | undefined;
+    singleItem?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionVariantProps extends VariantProps<typeof accordionCva> {
+}
+export declare const accordionItemCva: (props?: ({
+    variant?: "outlined" | "filled" | null | undefined;
+    singleItem?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionItemVariantProps extends VariantProps<typeof accordionItemCva> {
+}
+export declare const accordionTriggerCva: (props?: ({
+    variant?: "outlined" | "filled" | null | undefined;
+    actionPosition?: "left" | "right" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionTriggerVariantProps extends VariantProps<typeof accordionTriggerCva> {
+}
+export declare const accordionHeadingCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionHeadingVariantProps extends VariantProps<typeof accordionHeadingCva> {
+}
+export declare const accordionHeadingTitleCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionHeadingTitleVariantProps extends VariantProps<typeof accordionHeadingTitleCva> {
+}
+export declare const accordionHeadingSubtitleCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionHeadingSubtitleVariantProps extends VariantProps<typeof accordionHeadingSubtitleCva> {
+}
+export declare const accordionChevronCva: (props?: ({
+    isExpanded?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionChevronVariantProps extends VariantProps<typeof accordionChevronCva> {
+}
+export declare const accordionIconCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionIconVariantProps extends VariantProps<typeof accordionIconCva> {
+}
+export declare const accordionPanelCva: (props?: ({
+    isExpanded?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionPanelVariantProps extends VariantProps<typeof accordionPanelCva> {
+}
+export declare const accordionPanelContentCva: (props?: ({} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface AccordionPanelContentVariantProps extends VariantProps<typeof accordionPanelContentCva> {
+}