@nexxtmove/ui 1.32.0 → 1.34.0

package/dist/components/atoms/FloatingPanel/FloatingPanel.vue.d.ts

@@ -6,29 +6,67 @@ export interface NexxtFloatingPanelProps {
     offsetDistance?: number;
     /** Stretch the panel to at least the trigger's width. */
     matchWidth?: boolean;
-    /** Wrap the content slot in the shared panel surface (rounded, bordered, white, shadowed). */
-    surface?: boolean;
+    /**
+     * Wrap the content slot in the shared panel surface. `true` is the surface for small
+     * dropdowns (gray-200 border, `shadow-sm`). `'raised'` is for large panels over a white page,
+     * such as a picker: heavier border and `shadow-lg`, so the panel reads as a layer above the
+     * page instead of part of it.
+     */
+    surface?: boolean | 'raised';
+    /**
+     * Limit the content to the room on the roomiest side of the trigger (top or bottom), minus the
+     * offset and an 8px viewport margin. The value reaches the content as the `availableHeight`
+     * slot prop and as the CSS variable `--floating-panel-available-height` on the positioning
+     * element. The panel sets no height itself: the content decides how to use it. Follows
+     * scroll and resize while open.
+     */
+    fitHeight?: boolean;
+    /**
+     * Render the panel at the end of `<body>` instead of next to the trigger, so it is no longer in
+     * the stacking context of the trigger's ancestors (a sibling with the same z-index can paint
+     * over a non-teleported panel). Keyboard order stays as if the panel followed the trigger.
+     * Costs: the panel no longer inherits font, colour or CSS variables from around the trigger,
+     * and DOM events from the panel no longer bubble through the trigger's ancestors.
+     * Ignored inside a `role="dialog"` (e.g. `NexxtModal`): Reka makes everything outside the
+     * dialog `pointer-events: none` and traps focus inside it. The panel stays in place there;
+     * `position: fixed` already escapes the dialog's overflow. Whether the panel was actually
+     * teleported is the `teleported` slot prop of `#content`, and `teleported` on the instance.
+     *
+     * Keyboard order is kept by invisible focus guards: one at the end of the trigger wrapper, and
+     * one at the start and end of the panel. A consumer that closes on `focusout` therefore sees
+     * focus land on a guard first and on its real target right after; check `relatedTarget` against
+     * the panel and the trigger, not against a list of expected elements. Listen on the exposed
+     * `floatingRef`, not on the slot content: the guards sit outside the content, so the final step
+     * out of the panel is a `focusout` of a guard that the content never sees. Focus inside the panel
+     * goes back to the trigger when it closes. Known limitation: with two teleported panels open at
+     * once, Tab from one can end up in the other.
+     */
+    teleport?: boolean;
 }
 declare var __VLS_1: {
     isOpen: boolean;
     toggle: () => void | Promise<void>;
     open: () => Promise<void>;
     close: () => void;
-}, __VLS_11: {
+}, __VLS_31: {
     isOpen: true;
     close: () => void;
     toggle: () => void | Promise<void>;
-}, __VLS_13: {
+    availableHeight: number | null;
+    teleported: boolean;
+}, __VLS_33: {
     isOpen: true;
     close: () => void;
     toggle: () => void | Promise<void>;
+    availableHeight: number | null;
+    teleported: boolean;
 };
 type __VLS_Slots = {} & {
     trigger?: (props: typeof __VLS_1) => any;
 } & {
-    content?: (props: typeof __VLS_11) => any;
+    content?: (props: typeof __VLS_31) => any;
 } & {
-    content?: (props: typeof __VLS_13) => any;
+    content?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import('vue').DefineComponent<NexxtFloatingPanelProps, {
     isOpen: import('vue').Ref<boolean, boolean>;
@@ -37,6 +75,7 @@ declare const __VLS_base: import('vue').DefineComponent<NexxtFloatingPanelProps,
     toggle: () => void | Promise<void>;
     triggerRef: Readonly<import('vue').ShallowRef<HTMLSpanElement | null, HTMLSpanElement | null>>;
     floatingRef: Readonly<import('vue').ShallowRef<HTMLDivElement | null, HTMLDivElement | null>>;
+    teleported: Readonly<import('vue').Ref<boolean, boolean>>;
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     close: () => any;
     open: () => any;
@@ -47,7 +86,9 @@ declare const __VLS_base: import('vue').DefineComponent<NexxtFloatingPanelProps,
     placement: Placement;
     offsetDistance: number;
     matchWidth: boolean;
-    surface: boolean;
+    surface: boolean | "raised";
+    fitHeight: boolean;
+    teleport: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/atoms/PickerItem/PickerItem.vue.d.ts

@@ -0,0 +1,40 @@
+import { NexxtIconName } from '../Icon/Icon.vue';
+interface NexxtPickerItemProps {
+    /** DOM id of the option; the listbox points `aria-activedescendant` at it. `NexxtPickerList` generates it. */
+    id: string;
+    /** Visible label, and the accessible name of the option. */
+    label: string;
+    /** Icon in front of the label. */
+    icon?: NexxtIconName;
+    /**
+     * Whether this is the active option. Tints the row; inside a focused listbox named
+     * `group/listbox` it also gets a ring. Outside such a listbox the item never shows a ring.
+     */
+    highlighted?: boolean;
+    /**
+     * The option stays reachable with the keyboard and the pointer, but never emits `select`.
+     * Give a `description` that names the reason: a disabled option without one is a dead end.
+     */
+    disabled?: boolean;
+    /** One line of extra context. Not shown; screen readers get it through `aria-describedby`. */
+    description?: string;
+}
+type __VLS_Slots = {
+    /** Replaces icon and label. The option element, its id and its aria stay the item's own. */
+    default?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<NexxtPickerItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: () => any;
+    highlight: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtPickerItemProps> & Readonly<{
+    onSelect?: (() => any) | undefined;
+    onHighlight?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/atoms/PickerPreview/PickerPreview.vue.d.ts

@@ -0,0 +1,29 @@
+interface NexxtPickerPreviewProps {
+    /** Heading under the frame. Without it and without default-slot content the preview is empty. */
+    title?: string;
+    /** Explanation under the title, clamped to two lines. */
+    description?: string;
+    /** Centred in the frame while the preview is empty; the `empty` slot replaces it. */
+    emptyText?: string;
+    /**
+     * Identifies what the preview shows. When it changes, the new content fades in (90ms) and the
+     * old content is gone at once: no crossfade. A change within 150ms of the previous one, as with
+     * a held arrow key, swaps without a fade. Without a key the content swaps without a fade.
+     */
+    contentKey?: string | number;
+}
+type __VLS_Slots = {
+    /** Content of the 16:10 frame, e.g. an illustration or a screenshot. */
+    default?(): unknown;
+    /** Replaces `emptyText` in the frame while the preview is empty. */
+    empty?(): unknown;
+};
+declare const __VLS_base: import('vue').DefineComponent<NexxtPickerPreviewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NexxtPickerPreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/editor/molecules/EditorRadius/EditorRadius.vue.d.ts

@@ -10,7 +10,7 @@
  * `full` is last and carries no px: it is a pill, not a size on the scale, so
  * the readout names it instead of measuring it.
  */
-declare const RADIUS_STEPS: readonly [{
+export declare const EDITOR_RADIUS_STEPS: readonly [{
     readonly token: "none";
     readonly px: 0;
 }, {
@@ -45,7 +45,7 @@ declare const RADIUS_STEPS: readonly [{
  * The radius as the editor needs it: the Tailwind class itself, so the consumer
  * can put the model value straight on the element it styles.
  */
-export type EditorRadiusValue = `rounded-${(typeof RADIUS_STEPS)[number]['token']}`;
+export type EditorRadiusValue = `rounded-${(typeof EDITOR_RADIUS_STEPS)[number]['token']}`;
 /** Overridable copy of the value readout. Every key is optional. */
 export interface EditorRadiusMessages {
     /** Unit shown behind the value. Defaults to `'px'`. */
@@ -75,10 +75,10 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorRadiusProps
     /** The selected radius, as the Tailwind class to apply. */
     modelValue: EditorRadiusValue;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: "rounded-none" | "rounded-sm" | "rounded-md" | "rounded-lg" | "rounded-xs" | "rounded-xl" | "rounded-2xl" | "rounded-3xl" | "rounded-4xl" | "rounded-full") => any;
+    "update:modelValue": (value: "rounded-full" | "rounded-lg" | "rounded-none" | "rounded-sm" | "rounded-md" | "rounded-xs" | "rounded-xl" | "rounded-2xl" | "rounded-3xl" | "rounded-4xl") => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorRadiusProps & {
     /** The selected radius, as the Tailwind class to apply. */
     modelValue: EditorRadiusValue;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: "rounded-none" | "rounded-sm" | "rounded-md" | "rounded-lg" | "rounded-xs" | "rounded-xl" | "rounded-2xl" | "rounded-3xl" | "rounded-4xl" | "rounded-full") => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "rounded-full" | "rounded-lg" | "rounded-none" | "rounded-sm" | "rounded-md" | "rounded-xs" | "rounded-xl" | "rounded-2xl" | "rounded-3xl" | "rounded-4xl") => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/molecules/PickerGroup/PickerGroup.vue.d.ts

@@ -0,0 +1,32 @@
+interface NexxtPickerGroupProps {
+    /** Heading of the group, and the accessible name of its `role="group"`. */
+    label: string;
+    /**
+     * Whether the heading folds the group. `false` turns the heading into a plain label: no
+     * chevron, no click handler, no `aria-expanded`.
+     */
+    collapsible?: boolean;
+}
+type __VLS_Props = NexxtPickerGroupProps;
+type __VLS_Slots = {
+    /** The options: `NexxtPickerItem`s, or anything else with `role="option"`. */
+    default(): unknown;
+};
+type __VLS_ModelProps = {
+    /** Whether the options are shown. A closed group has its options out of the DOM. */
+    'open'?: boolean;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:open": (value: boolean) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:open"?: ((value: boolean) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/molecules/PickerList/PickerList.vue.d.ts

@@ -0,0 +1,107 @@
+import { NexxtIconName } from '../../atoms/Icon/Icon.vue';
+export interface NexxtPickerItemData {
+    /** Stable id; also the base of the option's DOM id that `aria-activedescendant` points at. */
+    id: string;
+    /** Visible label and accessible name of the option; searched and matched by type-ahead. */
+    label: string;
+    /** Icon in front of the label, also passed to the `preview` slot. */
+    icon: NexxtIconName;
+    /** Id of a group in `groups`. Missing, or not in `groups`: ungrouped, rendered at the top. */
+    group?: string;
+    /** Extra search terms (synonyms, old names). Matched, never shown. */
+    keywords?: string[];
+    /** One line, shown in the preview and read out as the option's description. */
+    description?: string;
+    /**
+     * Reachable with the arrows, type-ahead and the pointer, but never selected. Give a
+     * `description` that names the reason.
+     */
+    disabled?: boolean;
+}
+export interface NexxtPickerGroupData {
+    /** Stable id; items join the group through their `group` field. */
+    id: string;
+    /** Heading of the group, and the accessible name of its `role="group"`. */
+    label: string;
+    /** Initial state, default `true`. After that the list keeps its own open/closed state. */
+    defaultOpen?: boolean;
+}
+interface NexxtPickerListProps {
+    /** All items; `search` filters them. */
+    items: NexxtPickerItemData[];
+    /** Groups in display order. Ungrouped items come first. */
+    groups?: NexxtPickerGroupData[];
+    /** Search term from outside; the list renders no field of its own. Trimmed before matching. */
+    search?: string;
+    /** Whether group headings fold their group. While searching every group is open regardless. */
+    collapsible?: boolean;
+    /** Accessible name of the listbox. Required for an accessible name. */
+    ariaLabel?: string;
+    /** Heading of the empty state, shown when the search has no results. */
+    emptyTitle?: string;
+    /** Line under the empty heading. A function receives the trimmed search term. */
+    emptyDescription?: string | ((search: string) => string);
+    /** Label of the button in the empty state that clears the search. Without it there is no button. */
+    clearLabel?: string;
+    /**
+     * Text announced in a polite live region 500ms after the search changes, e.g.
+     * `(n) => \`${n} resultaten\``. Without it the region stays empty.
+     */
+    resultsAnnouncement?: (count: number) => string;
+}
+type __VLS_Props = NexxtPickerListProps;
+type __VLS_Slots = {
+    /** Content of an option; the option element and its aria stay the list's own. */
+    item?(props: {
+        item: NexxtPickerItemData;
+        highlighted: boolean;
+    }): unknown;
+    /** Replaces the content of the empty state. */
+    empty?(props: {
+        search: string;
+        clear: () => void;
+    }): unknown;
+};
+type __VLS_ModelProps = {
+    /**
+     * Id of the highlighted item. The list owns the effective value: an id that is not visible, or
+     * `null` while items are visible, is replaced by the first enabled visible item right away.
+     */
+    'highlighted'?: string | null;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+    move: (delta: number) => void;
+    highlightFirst: () => void;
+    highlightLast: () => void;
+    selectHighlighted: () => void;
+    /** DOM id of the listbox, for `aria-controls` on a field that drives it. */
+    listboxId: string;
+    /** DOM id of the highlighted option, for `aria-activedescendant` on a field that drives it. */
+    activeDescendantId: import('vue').ComputedRef<string | undefined>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: NexxtPickerItemData) => any;
+    close: () => any;
+    clear: () => any;
+    highlight: (item: NexxtPickerItemData | null) => any;
+    "update:highlighted": (value: string | null) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: NexxtPickerItemData) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onClear?: (() => any) | undefined;
+    onHighlight?: ((item: NexxtPickerItemData | null) => any) | undefined;
+    "onUpdate:highlighted"?: ((value: string | null) => any) | undefined;
+}>, {
+    search: string;
+    collapsible: boolean;
+    groups: NexxtPickerGroupData[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/organisms/ColorPicker/ColorPicker.vue.d.ts

@@ -20,11 +20,11 @@ declare const __VLS_export: import('vue').DefineComponent<__VLS_PublicProps, {},
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
+    fullWidth: boolean;
     matchWidth: boolean;
     placeholder: string;
     showAlpha: boolean;
     formats: ColorFormat[];
-    fullWidth: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/organisms/PickerPanel/PickerPanel.vue.d.ts

@@ -0,0 +1,93 @@
+import { NexxtPickerGroupData, NexxtPickerItemData } from '../../molecules/PickerList/PickerList.vue';
+interface NexxtPickerPanelProps {
+    /** All items; the search field filters them. */
+    items: NexxtPickerItemData[];
+    /** Groups in display order. Ungrouped items come first. */
+    groups?: NexxtPickerGroupData[];
+    /** Render the search field. Without it the listbox takes focus on mount. */
+    searchable?: boolean;
+    /** Placeholder of the search field. */
+    searchPlaceholder?: string;
+    /** Accessible name of the search field. Required for an accessible name; the placeholder is only a fallback. */
+    searchLabel?: string;
+    /** Accessible name of the panel (`role="group"`). Required for an accessible name. */
+    ariaLabel?: string;
+    /** Accessible name of the listbox. Required for an accessible name. */
+    listLabel?: string;
+    /** Panel width; a number is in pixels. The columns never shrink with it. */
+    width?: number | string;
+    /** Panel height; a number is in pixels. Clamped to `calc(100dvh - 5rem)`, and only the list gives way. */
+    height?: number | string;
+    /** Below this height of the column row (the panel minus the header), in pixels, the preview column is left out and the list takes the full width. */
+    hidePreviewBelow?: number;
+    /** Whether group headings fold their group. */
+    collapsible?: boolean;
+    /** Heading of the empty state, shown when the search has no results. */
+    emptyTitle?: string;
+    /** Line under the empty heading. A function receives the trimmed search term. */
+    emptyDescription?: string | ((search: string) => string);
+    /** Label of the button in the empty state that clears the search. Without it there is no button. */
+    clearLabel?: string;
+    /** Text in the preview frame while nothing is highlighted; the `preview-empty` slot replaces it. */
+    previewEmptyText?: string;
+    /** Text announced 500ms after the search changes, e.g. `(n) => \`${n} resultaten\``. */
+    resultsAnnouncement?: (count: number) => string;
+}
+type __VLS_Props = NexxtPickerPanelProps;
+type __VLS_Slots = {
+    /** Above both columns, e.g. `NexxtTabs`. */
+    header?(): unknown;
+    /** Content of the preview frame for the highlighted item. */
+    preview?(props: {
+        item: NexxtPickerItemData;
+    }): unknown;
+    /** Replaces `previewEmptyText` in the preview frame. */
+    'preview-empty'?(): unknown;
+    /** Content of an option. */
+    item?(props: {
+        item: NexxtPickerItemData;
+        highlighted: boolean;
+    }): unknown;
+    /** Replaces the content of the empty search state. */
+    empty?(props: {
+        search: string;
+        clear: () => void;
+    }): unknown;
+};
+type __VLS_ModelProps = {
+    /** Id of the highlighted item; the list keeps it on a visible item. Drives the preview. */
+    'highlighted'?: string | null;
+    /** The search term. Bind it to reset or prefill the search; unbound, the panel keeps its own. */
+    'search'?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
+    focus: () => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    select: (item: NexxtPickerItemData) => any;
+    close: () => any;
+    highlight: (item: NexxtPickerItemData | null) => any;
+    "update:highlighted": (value: string | null) => any;
+    "update:search": (value: string) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((item: NexxtPickerItemData) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onHighlight?: ((item: NexxtPickerItemData | null) => any) | undefined;
+    "onUpdate:highlighted"?: ((value: string | null) => any) | undefined;
+    "onUpdate:search"?: ((value: string) => any) | undefined;
+}>, {
+    width: number | string;
+    collapsible: boolean;
+    groups: NexxtPickerGroupData[];
+    height: number | string;
+    searchable: boolean;
+    hidePreviewBelow: number;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export type { CustomIconName } from './components/atoms/Icon/customIcons';
 export type { NexxtTabItem } from './components/molecules/Tabs/Tabs.vue';
 export type { NexxtPageCardProps, NexxtPageCardSlots, } from './components/molecules/PageCard/PageCard.vue';
 export type { NexxtPageMockupType } from './components/molecules/PageMockup/PageMockup.vue';
+export type { NexxtPickerGroupData, NexxtPickerItemData, } from './components/molecules/PickerList/PickerList.vue';
 export type { NexxtTreeNode, NexxtTreeProps, NexxtTreeSlots, } from './components/molecules/Tree/Tree.vue';
 export type { NexxtPlaceholderGroup, NexxtPlaceholderInputMessages, NexxtPlaceholderInputProps, } from './components/molecules/PlaceholderInput/PlaceholderInput.vue';
 export type { EditorAlignItemsMessages, EditorAlignItemsValue, } from './components/editor/molecules/EditorAlignItems/EditorAlignItems.vue';
@@ -16,6 +17,7 @@ export type { EditorGapMessages, EditorGapValue, } from './components/editor/mol
 export type { EditorColorMessages, EditorColorProperty, EditorColorValue, } from './components/editor/molecules/EditorColor/EditorColor.vue';
 export type { EditorBorderMessages, EditorBorderWidth, } from './components/editor/molecules/EditorBorder/EditorBorder.vue';
 export type { EditorHeadingTypeMessages, EditorHeadingTypeValue, } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue';
+export { EDITOR_RADIUS_STEPS } from './components/editor/molecules/EditorRadius/EditorRadius.vue';
 export type { EditorRadiusMessages, EditorRadiusValue, } from './components/editor/molecules/EditorRadius/EditorRadius.vue';
 export type { EditorTextAlignMessages, EditorTextAlignValue, } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue';
 export type { EditorJustifyContentMessages, EditorJustifyContentValue, } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue';
@@ -68,6 +70,11 @@ export { default as NexxtPageContainer } from './components/molecules/PageContai
 export { default as NexxtPageMockup } from './components/molecules/PageMockup/PageMockup.vue';
 export { default as NexxtPageTypeTile } from './components/molecules/PageTypeTile/PageTypeTile.vue';
 export { default as NexxtPagination } from './components/molecules/Pagination/Pagination.vue';
+export { default as NexxtPickerGroup } from './components/molecules/PickerGroup/PickerGroup.vue';
+export { default as NexxtPickerItem } from './components/atoms/PickerItem/PickerItem.vue';
+export { default as NexxtPickerList } from './components/molecules/PickerList/PickerList.vue';
+export { default as NexxtPickerPanel } from './components/organisms/PickerPanel/PickerPanel.vue';
+export { default as NexxtPickerPreview } from './components/atoms/PickerPreview/PickerPreview.vue';
 export { default as NexxtPlaceholderInput } from './components/molecules/PlaceholderInput/PlaceholderInput.vue';
 export { default as NexxtPresenceIndicator } from './components/atoms/PresenceIndicator/PresenceIndicator.vue';
 export { default as NexxtProgressBar } from './components/organisms/ProgressBar/ProgressBar.vue';