@justanarthur/modo-ui 0.0.0-stage → 0.2.0

package/dist/components/inputs/select/index.d.ts

@@ -0,0 +1,105 @@
+import { VariantProps } from "class-variance-authority";
+import { HTMLAttributes, ReactNode as ReactNode2 } from "react";
+import { ComponentType } from "react";
+interface IconComponentProps {
+	size?: number | string;
+	strokeWidth?: number | string;
+	className?: string;
+}
+type IconComponent = ComponentType<IconComponentProps>;
+type SizeVariant = "default" | "compact";
+import { JSX as JSX_1kxb2 } from "react";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+import { ClassProp as ClassProp_wz9o0r } from "class-variance-authority/types";
+interface SelectProps {
+	/** `Select.Trigger` and `Select.Content`. */
+	children: ReactNode2;
+	/** Controlled selected value. Pair with `onValueChange`. */
+	value?: string;
+	/** Uncontrolled default value — the select then keeps the selection itself. */
+	defaultValue?: string;
+	/** Called when the selected value changes. */
+	onValueChange?: (value: string) => void;
+	/** Disables the entire select. Defaults to `false`. */
+	disabled?: boolean;
+	/** Name for form submission (renders a hidden native input). */
+	name?: string;
+	/** Marks the select as required in forms. Defaults to `false`. */
+	required?: boolean;
+	/** Pins trigger and popup to one step of the size ladder (default 36px, compact 28px — see Sizes). Omitted, both follow the surrounding SizeProvider. */
+	size?: SizeVariant;
+}
+type Element_12xgc2 = JSX_1kxb2["Element"];
+/**
+* An animated select menu: fluid hover on the rows, a popup that oozes out of
+* its trigger, and a checkmark that draws itself as the selection lands.
+*
+* Built on Base UI's Select — positioning and collision flipping, dismissal,
+* typeahead, combobox ARIA and the hidden form input all come from the
+* primitive. This layer adds the magnetic hover background, the selected
+* background that springs from the old row to the picked one, a keyboard
+* focus ring that only appears once you actually use the keyboard, and the
+* popup's open and close through the shared morph (see Morph), goo by
+* default. A pick holds the popup open for 300ms so that acknowledgment is
+* seen; Escape and outside presses close at once. Uncontrolled through
+* `defaultValue`, controlled through `value` + `onValueChange`.
+*
+* Statics: Select.Trigger (variant, icon, placeholder, error),
+* Select.Content (the popup: the morph options from, effect, hideSource,
+* tier), Select.Item (index, value, icon, disabled), Select.Group,
+* Select.Label and Select.Separator.
+*
+* @example {@include ./examples.mdx}
+*/
+declare function Select({ children, value, defaultValue, onValueChange, disabled, name, required, size }: SelectProps): Element_12xgc2;
+declare const triggerVariants: (props?: ({
+	variant?: "borderless" | "bordered" | null | undefined;
+} & ClassProp_wz9o0r) | undefined) => string;
+interface SelectTriggerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "children">, VariantProps<typeof triggerVariants> {
+	/** Visual style of the trigger. Defaults to `"bordered"`. */
+	variant?: "bordered" | "borderless";
+	/** Optional icon displayed before the value. */
+	icon?: IconComponent;
+	/** Text shown when no value is selected. Defaults to `"Select…"`. */
+	placeholder?: string;
+	/** Error message shown below the trigger; also tints the border and sets `aria-invalid`. */
+	error?: string;
+	/** Size override for the trigger alone. Prefer the `size` prop on `<Select>` (or a surrounding SizeProvider) so the popup matches. */
+	size?: SizeVariant;
+	/** Extra classes for the trigger button. */
+	className?: string;
+}
+declare const SelectTrigger: ForwardRefExoticComponent_tcubfn<SelectTriggerProps & RefAttributes_miuf56<HTMLButtonElement>>;
+interface SelectContentProps {
+	/** Where the menu grows from (see Morph): the trigger, the pointer, its own center, a viewport edge, or a ref to any element. Defaults to `'trigger'`. */
+	from?: "trigger" | "pointer" | "center" | "top" | "right" | "bottom" | "left" | React.RefObject<HTMLElement | null>;
+	/** How it grows (see Morph): with the liquid goo neck, a plain morph, a slide or a fade. Defaults to `'goo'`. */
+	effect?: "goo" | "morph" | "slide" | "fade";
+	/** Hide the trigger while open, so it reads as turning into the menu. Defaults to `false`. */
+	hideSource?: boolean;
+	/** Spring tier of a plain morph, slide or fade; goo runs on its own `spring.goo`. Defaults to `'moderate'`. */
+	tier?: "moderate" | "slow";
+	/** Additional classes for the menu container. */
+	className?: string;
+	/** `Select.Item`, `Select.Group`, `Select.Label`, `Select.Separator`. */
+	children: ReactNode2;
+}
+declare const SelectContent: ForwardRefExoticComponent_tcubfn<SelectContentProps & RefAttributes_miuf56<HTMLDivElement>>;
+interface SelectItemProps extends HTMLAttributes<HTMLDivElement> {
+	/** Optional icon displayed before the label. */
+	icon?: IconComponent;
+	/** Position index within the content — what fluid hover measures rows by. */
+	index: number;
+	/** Unique value for this option. */
+	value: string;
+	/** Disables this individual item. Defaults to `false`. */
+	disabled?: boolean;
+	/** The row label. A string label is also what the trigger shows for this value. */
+	children?: ReactNode2;
+}
+declare const SelectItem: ForwardRefExoticComponent_tcubfn<SelectItemProps & RefAttributes_miuf56<HTMLDivElement>>;
+declare function SelectGroup({ children, className,...props }: HTMLAttributes<HTMLDivElement>): Element_12xgc2;
+declare const SelectLabel: ForwardRefExoticComponent_tcubfn<HTMLAttributes<HTMLDivElement> & RefAttributes_miuf56<HTMLDivElement>>;
+declare const SelectSeparator: ForwardRefExoticComponent_tcubfn<HTMLAttributes<HTMLDivElement> & RefAttributes_miuf56<HTMLDivElement>>;
+export { Select, SelectContent, SelectContentProps, SelectGroup, SelectItem, SelectItemProps, SelectLabel, SelectProps, SelectSeparator, SelectTrigger, SelectTriggerProps, Select as default, triggerVariants };

package/dist/components/inputs/select/index.js

@@ -0,0 +1,34 @@
+import {
+  Select2,
+  triggerVariants2,
+  SelectTrigger2,
+  SelectContent2,
+  SelectItem2,
+  SelectGroup2,
+  SelectLabel2,
+  SelectSeparator2,
+  select_default
+} from "../../../shared/components-62ybc7t2.js";
+import"../../../shared/components-0q0sqfh4.js";
+import"../../../shared/components-kvr7f9hy.js";
+import"../../../shared/components-59efxjd9.js";
+import"../../../shared/components-chacnk61.js";
+import"../../../shared/components-hqeq3w9q.js";
+import"../../../shared/components-jjw69c4c.js";
+import"../../../shared/components-men63rwj.js";
+import"../../../shared/components-0sn7ypjw.js";
+import"../../../shared/components-hawvy2qz.js";
+import"../../../shared/components-cv16mryv.js";
+import"../../../shared/components-zx6b6yby.js";
+import"../../../shared/components-ezxhrmer.js";
+export {
+  Select2 as Select,
+  SelectContent2 as SelectContent,
+  SelectGroup2 as SelectGroup,
+  SelectItem2 as SelectItem,
+  SelectLabel2 as SelectLabel,
+  SelectSeparator2 as SelectSeparator,
+  SelectTrigger2 as SelectTrigger,
+  select_default as default,
+  triggerVariants2 as triggerVariants
+};

package/dist/components/inputs/slider/index.d.ts

@@ -0,0 +1,108 @@
+import { CSSProperties, HTMLAttributes } from "react";
+type SizeVariant = "default" | "compact";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+type SliderValue = number | [number, number];
+type ValuePosition = "left" | "right" | "top" | "bottom" | "tooltip";
+/** Props of the compact engine — the feature-rich design (ranges, discrete
+*  step lists, value display) that renders the ladder's compact step. The
+*  public <Slider> accepts these plus `variant` and `size`. */
+interface SliderEngineProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+	value: SliderValue;
+	onChange: (value: SliderValue) => void;
+	min?: number;
+	max?: number;
+	step?: number;
+	/**
+	* Discrete list of allowed values, e.g. [0.1, 0.5, 0.7, 1.1, 1.3].
+	*
+	* When set, the thumb snaps only to these values (positioned proportionally
+	* along the track) and arrow keys walk the list. `min`/`max` derive from the
+	* list's extremes and `step` is ignored.
+	*/
+	steps?: number[];
+	showSteps?: boolean;
+	showValue?: boolean;
+	valuePosition?: ValuePosition;
+	formatValue?: (v: number) => string;
+	label?: string;
+	disabled?: boolean;
+	trackClassName?: string;
+	trackStyle?: CSSProperties;
+	fillClassName?: string;
+	fillStyle?: CSSProperties;
+	hideFill?: boolean;
+	thumbColor?: string;
+	thumbBorderColor?: string;
+}
+interface SliderComfortableProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue" | "onDrag" | "onDragStart" | "onDragEnd" | "onDragOver" | "onAnimationStart"> {
+	value: number;
+	onChange: (value: number) => void;
+	min?: number;
+	max?: number;
+	step?: number;
+	variant?: "pips" | "scrubber";
+	label?: string;
+	formatValue?: (v: number) => string;
+	disabled?: boolean;
+}
+interface SliderProps extends Omit<SliderEngineProps, "value" | "onChange"> {
+	/** Step on the size ladder (see Sizes). Default renders the pip/scrubber design; compact renders the dense design. Defaults to the surrounding SizeProvider, else `"default"`. */
+	size?: SizeVariant;
+	/** Default-step layout. "pips" shows discrete dot indicators; "scrubber" drags anywhere in the row for a continuous value. Ignored when the compact design renders. Defaults to `"pips"`. */
+	variant?: "pips" | "scrubber";
+	/** Current value (controlled). Pass an array to enable range mode with two thumbs. Omit it to let the slider keep its own state, seeded from `defaultValue`. */
+	value?: SliderValue;
+	/** Initial value when uncontrolled. An array starts the slider in range mode. Defaults to the lowest of `steps`, else `min`, else `0`. */
+	defaultValue?: SliderValue;
+	/** Called when the value changes via drag, click, or keyboard. */
+	onChange?: (value: SliderValue) => void;
+	/** Minimum value. Defaults to `0`. */
+	min?: number;
+	/** Maximum value. Defaults to `100`. */
+	max?: number;
+	/** Step increment. Thumb snaps to the nearest step during drag. Defaults to `1`. */
+	step?: number;
+	/** Discrete list of allowed values, e.g. 0.1, 0.5, 0.7, 1.1, 1.3. The thumb snaps only to these values and arrow keys walk the list; min/max derive from the list's extremes and step is ignored. */
+	steps?: number[];
+	/** Render dot indicators at each step position on the track. Defaults to `false`. */
+	showSteps?: boolean;
+	/** Whether to display the current value label. Defaults to `true`. */
+	showValue?: boolean;
+	/** Position of the value label. "tooltip" shows above the thumb during interaction. Defaults to `"left"`. */
+	valuePosition?: ValuePosition;
+	/** Custom formatter for the value label. Defaults to `String`. */
+	formatValue?: (v: number) => string;
+	/** Accessible label for the slider, also shown as prefix in the value display. */
+	label?: string;
+	/** Disables all interaction. Defaults to `false`. */
+	disabled?: boolean;
+}
+/**
+* One slider, two ladder steps: the default step's pip/scrubber design, and
+* the compact step's dense design with track fill, range mode, and value
+* display.
+*
+* One component: the default step renders the pip/scrubber design, the
+* compact step the dense one. Compact-only props (an array value, steps,
+* showSteps, showValue, valuePosition, track styling) always render the
+* compact design so no capability is lost. Either design snaps to the step
+* grid while dragging, previews the value you are about to pick as a filled
+* bar plus a tooltip, and carries an invisible Base UI slider underneath for
+* the ARIA roles and arrow-key navigation. In the dense design the value
+* label is click-to-edit.
+*
+* Works controlled (`value` + `onChange`, exactly as upstream) or
+* uncontrolled (`defaultValue`, with `onChange` reporting each change).
+* Track styling props are inherited from the compact engine:
+* `trackClassName`, `trackStyle`, `fillClassName`, `fillStyle`, `hideFill`,
+* `thumbColor` and `thumbBorderColor` — each one also forces the dense
+* design.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Slider: ForwardRefExoticComponent_tcubfn<SliderProps & RefAttributes_miuf56<HTMLDivElement>>;
+/** @deprecated The comfortable design is now the ladder's default step —
+*  render <Slider> (optionally with `variant`) instead. */
+declare const SliderComfortable: ForwardRefExoticComponent_tcubfn<SliderComfortableProps & RefAttributes_miuf56<HTMLDivElement>>;
+export { Slider, SliderComfortable, SliderComfortableProps, SliderProps, SliderValue, ValuePosition, Slider as default };

package/dist/components/inputs/slider/index.js

@@ -0,0 +1,14 @@
+import {
+  Slider2,
+  SliderComfortable2,
+  slider_default
+} from "../../../shared/components-wvp1m52g.js";
+import"../../../shared/components-n7mjr357.js";
+import"../../../shared/components-0sn7ypjw.js";
+import"../../../shared/components-cv16mryv.js";
+import"../../../shared/components-ezxhrmer.js";
+export {
+  Slider2 as Slider,
+  SliderComfortable2 as SliderComfortable,
+  slider_default as default
+};

package/dist/components/inputs/switch/index.d.ts

@@ -0,0 +1,43 @@
+import { Transition } from "motion/react";
+import { HTMLAttributes } from "react";
+type SizeVariant = "default" | "compact";
+import { ForwardRefExoticComponent as ForwardRefExoticComponent_tcubfn } from "react";
+import { RefAttributes as RefAttributes_miuf56 } from "react";
+interface SwitchProps extends HTMLAttributes<HTMLDivElement> {
+	/** Text label displayed next to the switch. */
+	label: string;
+	/** Whether the switch is on (controlled). Omit it to let the switch keep its own state, seeded from `defaultChecked`. */
+	checked?: boolean;
+	/** Whether the switch starts on when uncontrolled. Defaults to `false`. */
+	defaultChecked?: boolean;
+	/** Called when the switch is toggled. */
+	onToggle?: () => void;
+	/** Called with the new state whenever the switch is toggled, controlled or not. */
+	onCheckedChange?: (checked: boolean) => void;
+	/** Disables the switch. Defaults to `false`. */
+	disabled?: boolean;
+	/** Transition for the thumb's slide and hover/press stretch. Defaults to the `spring.moderate` motion token. */
+	thumbTransition?: Transition;
+	/** Pins the switch to one step of the size ladder (see Sizes). Defaults to the surrounding SizeProvider, else `"default"`. */
+	size?: SizeVariant;
+}
+/**
+* Toggle switch with animated thumb and label.
+*
+* The whole row — track and label — is the hit target: click anywhere to
+* toggle, or grab the thumb and drag it across the midpoint. The thumb
+* stretches into a pill on hover, squashes on press and melts across the
+* track like a drop when it toggles (see Morph), springing with the motion
+* tokens; a Base UI switch underneath carries the role, keyboard
+* toggling (Space/Enter) and focus ring. The label brightens when the switch
+* is on.
+*
+* Works controlled (`checked` + `onToggle`, exactly as upstream) or
+* uncontrolled (`defaultChecked`, with `onCheckedChange` reporting each
+* change). `size` pins it to one step of the size ladder; otherwise it
+* follows the surrounding SizeProvider.
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Switch: ForwardRefExoticComponent_tcubfn<SwitchProps & RefAttributes_miuf56<HTMLDivElement>>;
+export { Switch, SwitchProps, Switch as default };

package/dist/components/inputs/switch/index.js

@@ -0,0 +1,14 @@
+import {
+  Switch2,
+  switch_default
+} from "../../../shared/components-asr5pg50.js";
+import"../../../shared/components-chacnk61.js";
+import"../../../shared/components-hqeq3w9q.js";
+import"../../../shared/components-n7mjr357.js";
+import"../../../shared/components-men63rwj.js";
+import"../../../shared/components-0sn7ypjw.js";
+import"../../../shared/components-ezxhrmer.js";
+export {
+  Switch2 as Switch,
+  switch_default as default
+};

package/dist/components/navigation/accordion/index.d.ts

@@ -0,0 +1,117 @@
+import { ForwardRefExoticComponent, HTMLAttributes, ReactNode, RefAttributes } from "react";
+type SizeVariant = "default" | "compact";
+type AccordionGroupSingleProps = {
+	/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
+	type?: "single";
+	/** Controlled expanded value. */
+	value?: string;
+	/** Initially expanded item value — uncontrolled. */
+	defaultValue?: string;
+	/** Callback when expanded state changes. */
+	onValueChange?: (value: string) => void;
+	/** Allow collapsing all items when type is single. Defaults to `true`. */
+	collapsible?: boolean;
+};
+type AccordionGroupMultipleProps = {
+	/** Whether one or multiple items can be expanded. */
+	type: "multiple";
+	/** Controlled expanded values. */
+	value?: string[];
+	/** Initially expanded item values — uncontrolled. */
+	defaultValue?: string[];
+	/** Callback when expanded state changes. */
+	onValueChange?: (value: string[]) => void;
+};
+type AccordionGroupProps = HTMLAttributes<HTMLDivElement> & {
+	children: ReactNode;
+	/** Pins the group's rows to one step of the size ladder (default 36px,
+	*  compact 28px — see /docs/sizes). Omitted, they follow the surrounding
+	*  SizeProvider. */
+	size?: SizeVariant;
+	/** What an open item tints. "item" paints the row and its panel as one
+	*  block, and holds while it stays open. "trigger" scopes the fill to the
+	*  row and shows it on hover only, leaving the panel on the page's own
+	*  surface — the way a sidebar row highlights without colouring its
+	*  sub-tree. @default "item" */
+	highlight?: "trigger" | "item";
+} & (AccordionGroupSingleProps | AccordionGroupMultipleProps);
+declare const AccordionGroup: ForwardRefExoticComponent<AccordionGroupProps & RefAttributes<HTMLDivElement>>;
+interface AccordionProps extends HTMLAttributes<HTMLDivElement> {
+	/** The accordion's items (`Accordion.Item`). */
+	children: ReactNode;
+	/** Whether one or multiple items can be expanded. Defaults to `"single"`. */
+	type?: "single" | "multiple";
+	/** Allow collapsing all items when type is single. Defaults to `true` (Base UI's single mode is always collapsible). */
+	collapsible?: boolean;
+	/** Initially expanded item value(s) — uncontrolled. A string for `type="single"`, an array for `type="multiple"`. */
+	defaultValue?: string | string[];
+	/** Controlled expanded value(s). Pair with `onValueChange`. */
+	value?: string | string[];
+	/** Callback when expanded state changes. Receives a string in single mode, an array in multiple mode. */
+	onValueChange?: ((value: string) => void) | ((value: string[]) => void);
+	/** What an open item tints: `item` holds a block across the row and its panel, `trigger` scopes it to the row and shows it on hover. Same prop on `Accordion.Group` and on a standalone `Accordion.Item`. Defaults to `"item"`. */
+	highlight?: "trigger" | "item";
+	/** Pins the accordion's rows to one step of the size ladder (default 36px, compact 28px). Omitted, they follow the surrounding SizeProvider. */
+	size?: SizeVariant;
+}
+type AccordionComponent = ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> & {
+	Group: typeof AccordionGroup;
+	Item: typeof AccordionItem;
+	Trigger: typeof AccordionTrigger;
+	Content: typeof AccordionContent;
+};
+/**
+* Collapsible sections with animated expand/collapse and fluid hover in
+* grouped mode.
+*
+* Accordion is the standalone form: every row carries its own hover fill.
+* Accordion.Group takes the same props and adds one magnetic highlight that
+* glides between rows, so give each item inside it an `index`. Built on Base
+* UI Accordion (WAI-ARIA wiring, keyboard navigation, focus management).
+* Uncontrolled through `defaultValue`, controlled through `value` +
+* `onValueChange`.
+*
+* The panel grows out of its row (see Morph): a shape drips from where the
+* row was pressed (its middle, from the keyboard), widens into the whole
+* item, and the content is revealed by a clip from the same shape. Under the
+* default `highlight="item"` that shape is the open tint, melted into the
+* row through a liquid goo neck; closing folds it back into the row. The
+* rows below ride the shape's bottom edge, so nothing jumps.
+*
+* Statics: Accordion.Group (the grouped root: type, collapsible,
+* defaultValue, value, onValueChange, highlight, size), Accordion.Item (value,
+* index, disabled), Accordion.Trigger (the row that toggles its item) and
+* Accordion.Content (the collapsible panel: `effect` — `'goo'` or a plain
+* `'morph'` — and the spring `tier`, `'slow'` or `'moderate'`).
+*
+* @example {@include ./examples.mdx}
+*/
+declare const Accordion: AccordionComponent;
+interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+	/** Unique identifier for this item. */
+	value: string;
+	/** Position index for fluid hover. Required inside `Accordion.Group`, omit for standalone. */
+	index?: number;
+	/** Whether this item is disabled. Defaults to `false`. */
+	disabled?: boolean;
+	/** Standalone equivalent of the group's prop: what an open item tints. Ignored inside a group, which decides for all its rows. Defaults to the standalone root's `highlight`, else `"item"`. */
+	highlight?: "trigger" | "item";
+	/** The item's `Accordion.Trigger` and `Accordion.Content`. */
+	children: ReactNode;
+}
+declare const AccordionItem: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;
+interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+	/** Trigger label content. */
+	children: ReactNode;
+}
+declare const AccordionTrigger: ForwardRefExoticComponent<AccordionTriggerProps & RefAttributes<HTMLButtonElement>>;
+interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+	/** Collapsible content. */
+	children: ReactNode;
+	/** How the panel grows out of its row (see Morph): `goo` melts the open tint out of the row through a liquid neck, `morph` grows it without one. Defaults to `'goo'`. */
+	effect?: "goo" | "morph";
+	/** Spring tier the panel opens on; it closes on the tier's faster exit tween. Defaults to `'slow'`. */
+	tier?: "moderate" | "slow";
+}
+declare const AccordionContent: ForwardRefExoticComponent<AccordionContentProps & RefAttributes<HTMLDivElement>>;
+export { Accordion, AccordionContent, AccordionGroup, AccordionItem, AccordionTrigger, Accordion as default };

package/dist/components/navigation/accordion/index.js

@@ -0,0 +1,28 @@
+import {
+  AccordionGroup2,
+  Accordion2,
+  AccordionItem2,
+  AccordionTrigger2,
+  AccordionContent2,
+  accordion_default
+} from "../../../shared/components-3wk0w46f.js";
+import"../../../shared/components-zrkzcayz.js";
+import"../../../shared/components-0q0sqfh4.js";
+import"../../../shared/components-kvr7f9hy.js";
+import"../../../shared/components-59efxjd9.js";
+import"../../../shared/components-chacnk61.js";
+import"../../../shared/components-hqeq3w9q.js";
+import"../../../shared/components-jjw69c4c.js";
+import"../../../shared/components-n7mjr357.js";
+import"../../../shared/components-men63rwj.js";
+import"../../../shared/components-0sn7ypjw.js";
+import"../../../shared/components-cv16mryv.js";
+import"../../../shared/components-ezxhrmer.js";
+export {
+  Accordion2 as Accordion,
+  AccordionContent2 as AccordionContent,
+  AccordionGroup2 as AccordionGroup,
+  AccordionItem2 as AccordionItem,
+  AccordionTrigger2 as AccordionTrigger,
+  accordion_default as default
+};