@prokodo/ui 0.1.11 → 0.1.13

package/dist/types/components/RTE/RTE.utils.d.ts

@@ -1,4 +1,5 @@
 export declare const bem: (element?: string, modifiers?: import("react-bem-helper").WordSet, extra?: import("react-bem-helper").WordSet) => string;
 export declare function addClasses(el: Element | null, className: string): void;
 export declare function decorateToolbar(toolbarEl: HTMLElement): void;
+export declare function syncPickerSelected(toolbarEl: HTMLElement): void;
 export declare function cleanupQuill(surfaceEl: HTMLDivElement | null, mountEl: HTMLDivElement | null): void;

package/dist/types/components/accordion/Accordion.d.ts

@@ -1,5 +1,8 @@
 export declare const Accordion: import("react").ComponentType<{
     id: string;
+    type?: "card" | "panel";
+    headerWrapperClassName?: string;
+    headerToggleClassName?: string;
     expanded?: number | null;
     className?: string;
     variant?: import("../../types/variants").Variants;

package/dist/types/components/accordion/Accordion.lazy.d.ts

@@ -1,5 +1,8 @@
 declare const _default: import("react").ComponentType<{
     id: string;
+    type?: "card" | "panel";
+    headerWrapperClassName?: string;
+    headerToggleClassName?: string;
     expanded?: number | null;
     className?: string;
     variant?: import("../../types/variants").Variants;

package/dist/types/components/accordion/Accordion.model.d.ts

@@ -18,6 +18,9 @@ export type AccordionItem = {
 };
 export type AccordionProps = {
     id: string;
+    type?: "card" | "panel";
+    headerWrapperClassName?: string;
+    headerToggleClassName?: string;
     expanded?: number | null;
     className?: string;
     variant?: Variants;

package/dist/types/components/accordion/Accordion.view.d.ts

@@ -1,3 +1,3 @@
 import type { AccordionViewProps } from "./Accordion.model";
 import type { JSX } from "react";
-export declare function AccordionView({ id, variant, className, items, expandedIndex, onToggle, titleOptions, iconProps, ...domRest }: AccordionViewProps): JSX.Element;
+export declare function AccordionView({ id, type, headerWrapperClassName, headerToggleClassName, variant, className, items, expandedIndex, onToggle, titleOptions, iconProps, ...domRest }: AccordionViewProps): JSX.Element;

package/dist/types/components/autocomplete/Autocomplete.client.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+import type { AutocompleteProps } from "./Autocomplete.model";
+declare function AutocompleteClient({ name, value, items, minQueryLength, onChange, onSelect, ...rest }: AutocompleteProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof AutocompleteClient>;
+export default _default;

package/dist/types/components/autocomplete/Autocomplete.d.ts

@@ -0,0 +1,4 @@
+import type { AutocompleteProps } from "./Autocomplete.model";
+export declare const Autocomplete: import("react").ComponentType<AutocompleteProps & {
+    priority?: boolean;
+}>;

package/dist/types/components/autocomplete/Autocomplete.lazy.d.ts

@@ -0,0 +1,5 @@
+import type { AutocompleteProps } from "./Autocomplete.model";
+declare const _default: import("react").ComponentType<AutocompleteProps & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/autocomplete/Autocomplete.model.d.ts

@@ -0,0 +1,58 @@
+import type { InputProps } from "../input";
+import type { KeyboardEventHandler } from "react";
+type AutocompleteInputProps = Omit<Extract<InputProps, {
+    multiline?: false;
+}>, "id" | "name" | "value" | "onChange" | "onFocus" | "onKeyDown" | "label" | "disabled" | "required" | "fullWidth" | "readOnly" | "autoComplete" | "aria-describedby" | "aria-labelledby" | "placeholder">;
+export type AutocompleteItem = {
+    value: string;
+    label: string;
+    description?: string;
+};
+export type AutocompleteChangeEvent = {
+    query: string;
+};
+export type AutocompleteClientState = {
+    open: boolean;
+    listTop?: number;
+    activeIndex: number;
+    onInputChange: (query: string) => void;
+    onInputFocus: () => void;
+    onInputKeyDown: KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onSelectItem: (item: AutocompleteItem) => void;
+};
+export type AutocompleteProps = {
+    id?: string;
+    name: string;
+    label?: string;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    fullWidth?: boolean;
+    readOnly?: boolean;
+    autoComplete?: string;
+    "aria-describedby"?: string;
+    "aria-labelledby"?: string;
+    value?: string;
+    items?: AutocompleteItem[];
+    loading?: boolean;
+    loadingText?: string;
+    emptyText?: string;
+    minQueryLength?: number;
+    minQueryLengthText?: string;
+    className?: string;
+    inputClassName?: string;
+    listClassName?: string;
+    itemClassName?: string;
+    inputProps?: AutocompleteInputProps & {
+        hideLabel?: boolean;
+    };
+    onChange?: (event: AutocompleteChangeEvent) => void;
+    onSelect?: (item: AutocompleteItem) => void;
+};
+export type AutocompleteViewProps = Omit<AutocompleteProps, "onChange" | "onSelect"> & {
+    open?: boolean;
+    _clientState?: AutocompleteClientState;
+    onChange?: (event: AutocompleteChangeEvent) => void;
+    onSelect?: (item: AutocompleteItem) => void;
+};
+export {};

package/dist/types/components/autocomplete/Autocomplete.server.d.ts

@@ -0,0 +1,3 @@
+import type { AutocompleteProps } from "./Autocomplete.model";
+import type { JSX } from "react";
+export default function AutocompleteServer(props: AutocompleteProps): JSX.Element;

package/dist/types/components/autocomplete/Autocomplete.view.d.ts

@@ -0,0 +1,3 @@
+import type { AutocompleteViewProps } from "./Autocomplete.model";
+import type { JSX } from "react";
+export declare function AutocompleteView({ id, name, label, placeholder, required, disabled, fullWidth, readOnly, autoComplete, "aria-describedby": ariaDescribedBy, "aria-labelledby": ariaLabelledBy, value, items, loading, loadingText, emptyText, minQueryLength, minQueryLengthText, className, inputClassName, listClassName, itemClassName, inputProps, _clientState, onChange, onSelect, }: AutocompleteViewProps): JSX.Element;

package/dist/types/components/autocomplete/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Autocomplete";
+export type { AutocompleteProps, AutocompleteItem, AutocompleteChangeEvent, } from "./Autocomplete.model";

package/dist/types/components/card/Card.model.d.ts

@@ -5,7 +5,7 @@ import type { SkeletonProps } from "../skeleton";
 import type { Variants } from "@/types/variants";
 import type { StaticImageData } from "next/image";
 import type { Ref, ReactNode, KeyboardEvent } from "react";
-export type CardVariant = Variants;
+export type CardVariant = Variants | "panel";
 export type CardBackgroundProps = {
     src?: string | StaticImageData;
     alt?: string;

package/dist/types/components/grid/Grid.model.d.ts

@@ -1,17 +1,47 @@
-import type { HTMLAttributes, ReactNode } from "react";
-export type GridProps = HTMLAttributes<HTMLDivElement> & {
+import type { CSSProperties, ReactNode } from "react";
+export type ResponsiveGridValue = number | {
+    [key: string]: number;
+};
+export type GridGap = "xs" | "sm" | "md" | "lg" | "xl" | "none";
+export type GridBreakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+export type GridColumns = number | ResponsiveGridValue;
+export type GridItemSize = number | ResponsiveGridValue;
+export type GridRowHeight = number | "auto";
+export interface GridProps {
+    columns?: GridColumns;
+    gap?: GridGap | {
+        [key in GridBreakpoint]?: GridGap;
+    };
+    rowHeight?: GridRowHeight;
+    justifyItems?: CSSProperties["justifyItems"];
+    alignItems?: CSSProperties["alignItems"];
+    alignContent?: CSSProperties["alignContent"];
+    autoFlow?: CSSProperties["gridAutoFlow"];
     spacing?: number;
     className?: string;
+    style?: CSSProperties;
     children?: ReactNode;
-};
-export type GridRowProps = HTMLAttributes<HTMLDivElement> & {
-    spacing?: number;
-    align?: "left" | "center" | "right";
+}
+export interface GridItemProps {
+    columns?: number | {
+        [key in GridBreakpoint]?: number;
+    };
+    rows?: number;
+    size?: GridItemSize;
+    justifySelf?: CSSProperties["justifySelf"];
+    alignSelf?: CSSProperties["alignSelf"];
     className?: string;
+    style?: CSSProperties;
     children?: ReactNode;
+}
+export interface GridRowProps {
+    align?: "left" | "center" | "right";
     xs?: number;
     sm?: number;
     md?: number;
     lg?: number;
     xl?: number;
-};
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}

package/dist/types/components/pagination/Pagination.client.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+import type { PaginationProps } from "./Pagination.model";
+declare function PaginationClient(p: PaginationProps): JSX.Element | null;
+declare const _default: import("react").MemoExoticComponent<typeof PaginationClient>;
+export default _default;

package/dist/types/components/pagination/Pagination.d.ts

@@ -0,0 +1,4 @@
+import type { PaginationProps } from "./Pagination.model";
+export declare const Pagination: import("react").ComponentType<PaginationProps & {
+    priority?: boolean;
+}>;

package/dist/types/components/pagination/Pagination.lazy.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationProps } from "./Pagination.model";
+declare const _default: import("react").ComponentType<PaginationProps & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/pagination/Pagination.model.d.ts

@@ -0,0 +1,22 @@
+export type PaginationTranslations = {
+    pagination?: string;
+    prev?: string;
+    next?: string;
+    pageGoTo?: string;
+    pageCurrent?: string;
+};
+export type PaginationPageChangeHandler = (page: number) => void;
+export type PaginationProps = {
+    translations?: PaginationTranslations;
+    page: number;
+    totalPages: number;
+    disabled?: boolean;
+    isPending?: boolean;
+    onPrev?: () => void;
+    onNext?: () => void;
+    onPageChange?: PaginationPageChangeHandler;
+    siblingCount?: number;
+    boundaryCount?: number;
+    readOnly?: boolean;
+    className?: string;
+};

package/dist/types/components/pagination/Pagination.server.d.ts

@@ -0,0 +1,3 @@
+import type { PaginationProps } from "./Pagination.model";
+import type { JSX } from "react";
+export default function PaginationServer(p: PaginationProps): JSX.Element | null;

package/dist/types/components/pagination/Pagination.utils.d.ts

@@ -0,0 +1,13 @@
+export type PaginationItem = {
+    type: "page";
+    value: number;
+} | {
+    type: "ellipsis";
+    key: string;
+};
+export declare function buildPaginationItems(args: {
+    page: number;
+    totalPages: number;
+    siblingCount: number;
+    boundaryCount: number;
+}): PaginationItem[];

package/dist/types/components/pagination/Pagination.view.d.ts

@@ -0,0 +1,3 @@
+import type { PaginationProps } from "./Pagination.model";
+import type { JSX } from "react";
+export declare function PaginationView({ className, page, totalPages, disabled, isPending, siblingCount, boundaryCount, onPrev, onNext, onPageChange, readOnly, translations: t, }: PaginationProps): JSX.Element | null;

package/dist/types/components/pagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Pagination";
+export type { PaginationProps, PaginationTranslations, PaginationPageChangeHandler, } from "./Pagination.model";

package/dist/types/components/select/Select.model.d.ts

@@ -1,5 +1,5 @@
 import type { LabelProps } from "../label";
-import type { ChangeEvent, RefObject, ReactNode, Ref, MouseEventHandler, KeyboardEventHandler } from "react";
+import type { ChangeEvent, RefObject, ReactNode, Ref, MouseEventHandler, KeyboardEventHandler, CSSProperties, JSX } from "react";
 export type SelectEvent = {
     target: {
         dataset?: Record<string, unknown>;
@@ -41,6 +41,21 @@ type SelectClientState<V extends string = string> = {
     onButtonClick: MouseEventHandler<HTMLButtonElement>;
     onButtonKey: KeyboardEventHandler<HTMLButtonElement>;
     onOptionClick: (v: V | null) => void;
+    renderListbox?: (args: {
+        id: string;
+        className: string;
+        open: boolean;
+        style?: CSSProperties;
+        required?: boolean;
+        multiple?: boolean;
+        placeholder?: string;
+        items: SelectItem<V>[];
+        value: SelectValue<V>;
+        onOptionClick: (v: V | null) => void;
+        iconVisible?: boolean;
+        bemItem: (mods?: Record<string, boolean>) => string;
+        bemCheckbox: (mods?: Record<string, boolean>) => string;
+    }) => JSX.Element | null;
 };
 export type SelectViewProps<V extends string = string> = SelectProps<V> & {
     _clientState?: SelectClientState<V>;

package/dist/types/components/tabs/Tabs.client.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+import type { TabsProps } from "./Tabs.model";
+declare function TabsClient<Value extends string = string>({ items, value, defaultValue, activationMode, disabled, onChange, ...rest }: TabsProps<Value>): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TabsClient>;
+export default _default;

package/dist/types/components/tabs/Tabs.d.ts

@@ -0,0 +1,4 @@
+import type { TabsProps } from "./Tabs.model";
+export declare const Tabs: import("react").ComponentType<TabsProps & {
+    priority?: boolean;
+}>;

package/dist/types/components/tabs/Tabs.lazy.d.ts

@@ -0,0 +1,5 @@
+import type { TabsProps } from "./Tabs.model";
+declare const _default: import("react").ComponentType<TabsProps & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/tabs/Tabs.model.d.ts

@@ -0,0 +1,43 @@
+import type { ChipProps } from "../chip";
+import type { KeyboardEvent, MouseEvent, ReactNode, RefObject } from "react";
+export type TabsBadgeChipProps = Omit<ChipProps, "label">;
+export type TabsItem<Value extends string = string> = {
+    value: Value;
+    label: ReactNode;
+    badge?: ReactNode;
+    badgeChipProps?: TabsBadgeChipProps;
+    disabled?: boolean;
+    className?: string;
+    content: ReactNode;
+};
+export type TabsChangeEvent<Value extends string = string> = {
+    value: Value;
+    index: number;
+};
+export type TabsProps<Value extends string = string> = {
+    id: string;
+    ariaLabel?: string;
+    items: TabsItem<Value>[];
+    value?: Value;
+    defaultValue?: Value;
+    activationMode?: "automatic" | "manual";
+    orientation?: "horizontal" | "vertical";
+    disabled?: boolean;
+    fullWidth?: boolean;
+    className?: string;
+    listClassName?: string;
+    tabClassName?: string;
+    panelsClassName?: string;
+    badgeChipProps?: TabsBadgeChipProps;
+    onChange?: (event: TabsChangeEvent<Value>) => void;
+};
+export type TabsClientState<Value extends string = string> = {
+    activeValue: Value;
+    focusIndex: number;
+    tabsRef: RefObject<Array<HTMLButtonElement | null>>;
+    onTabClick: (index: number, event: MouseEvent<HTMLButtonElement>) => void;
+    onTabKeyDown: (index: number, event: KeyboardEvent<HTMLButtonElement>) => void;
+};
+export type TabsViewProps<Value extends string = string> = TabsProps<Value> & {
+    _clientState?: TabsClientState<Value>;
+};

package/dist/types/components/tabs/Tabs.server.d.ts

@@ -0,0 +1,3 @@
+import type { TabsProps } from "./Tabs.model";
+import type { JSX } from "react";
+export default function TabsServer<Value extends string = string>(props: TabsProps<Value>): JSX.Element;

package/dist/types/components/tabs/Tabs.view.d.ts

@@ -0,0 +1,3 @@
+import type { TabsViewProps } from "./Tabs.model";
+import type { JSX } from "react";
+export declare function TabsView<Value extends string = string>({ id, ariaLabel, items, value, defaultValue, orientation, disabled, fullWidth, className, listClassName, tabClassName, panelsClassName, badgeChipProps, _clientState, }: TabsViewProps<Value>): JSX.Element | null;

package/dist/types/components/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tabs";
+export type { TabsChangeEvent, TabsItem, TabsProps } from "./Tabs.model";

package/dist/types/components/tooltip/Tooltip.client.d.ts

@@ -0,0 +1,5 @@
+import { type JSX } from "react";
+import type { TooltipProps } from "./Tooltip.model";
+declare function TooltipClient(props: TooltipProps): JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof TooltipClient>;
+export default _default;

package/dist/types/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from "./Tooltip.model";
+export declare const Tooltip: import("react").ComponentType<TooltipProps & {
+    priority?: boolean;
+}>;

package/dist/types/components/tooltip/Tooltip.lazy.d.ts

@@ -0,0 +1,5 @@
+import type { TooltipProps } from "./Tooltip.model";
+declare const _default: import("react").ComponentType<TooltipProps & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/tooltip/Tooltip.model.d.ts

@@ -0,0 +1,47 @@
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+export type TooltipAnchor = "element" | "pointer";
+export type TooltipPlacement = "top" | "bottom" | "left" | "right";
+export type TooltipOpenChangeEvent = (open: boolean) => void;
+export type TooltipTriggerElement = ReactElement<HTMLAttributes<HTMLElement>>;
+export type TooltipProps = {
+    anchor?: TooltipAnchor;
+    content: ReactNode;
+    children: TooltipTriggerElement;
+    id?: string;
+    placement?: TooltipPlacement;
+    preventOverflow?: boolean;
+    portal?: boolean;
+    overlayRootId?: string;
+    zIndex?: number;
+    offset?: number;
+    mobileBreakpoint?: number;
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: TooltipOpenChangeEvent;
+    delay?: number;
+    closeDelay?: number;
+    openOnHover?: boolean;
+    openOnFocus?: boolean;
+    className?: string;
+    tooltipClassName?: string;
+    triggerClassName?: string;
+    triggerProps?: HTMLAttributes<HTMLElement>;
+};
+export type TooltipViewBubbleStyle = React.CSSProperties & {
+    ["--pk-tt-x"]?: string;
+    ["--pk-tt-y"]?: string;
+    ["--pk-tt-arrow-x"]?: string;
+    ["--pk-tt-arrow-y"]?: string;
+    ["--pk-tt-z"]?: string;
+};
+export type TooltipViewProps = TooltipProps & {
+    __rootRef?: React.RefObject<HTMLSpanElement | null>;
+    __triggerRef?: React.RefObject<HTMLElement | null>;
+    __bubbleRef?: React.RefObject<HTMLSpanElement | null>;
+    __bubbleStyle?: TooltipViewBubbleStyle;
+    __renderVisualBubble?: boolean;
+    __open?: boolean;
+    __placement?: TooltipPlacement;
+    __tooltipId?: string;
+};

package/dist/types/components/tooltip/Tooltip.server.d.ts

@@ -0,0 +1,3 @@
+import type { TooltipProps } from "./Tooltip.model";
+import type { JSX } from "react";
+export default function TooltipServer(props: TooltipProps): JSX.Element;

package/dist/types/components/tooltip/Tooltip.view.d.ts

@@ -0,0 +1,3 @@
+import { type JSX } from "react";
+import type { TooltipViewProps } from "./Tooltip.model";
+export declare function TooltipView(props: TooltipViewProps): JSX.Element;

package/dist/types/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Tooltip";
+export type { TooltipProps, TooltipAnchor, TooltipPlacement, TooltipOpenChangeEvent, TooltipTriggerElement, } from "./Tooltip.model";

package/dist/types/index.d.ts

@@ -1,6 +1,7 @@
 export { Accordion } from "./components/accordion";
 export { Animated } from "./components/animated";
 export { AnimatedText } from "./components/animatedText";
+export { Autocomplete } from "./components/autocomplete";
 export { Avatar } from "./components/avatar";
 export { BaseLink } from "./components/base-link";
 export { Button } from "./components/button";
@@ -26,6 +27,7 @@ export { List } from "./components/list";
 export { Loading } from "./components/loading";
 export { Lottie } from "./components/lottie";
 export { Map } from "./components/map";
+export { Pagination } from "./components/pagination";
 export { PostItem } from "./components/post-item";
 export { PostTeaser } from "./components/post-teaser";
 export { PostWidget } from "./components/post-widget";
@@ -43,5 +45,7 @@ export { Snackbar } from "./components/snackbar";
 export { Stepper } from "./components/stepper";
 export { Switch } from "./components/switch";
 export { Table } from "./components/table";
+export { Tabs } from "./components/tabs";
 export { Teaser } from "./components/teaser";
+export { Tooltip } from "./components/tooltip";
 export { UIRuntimeProvider, useUIRuntime } from "./helpers/runtime.client";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@prokodo/ui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "type": "module",
   "description": "UI components for production-grade Next.js + Headless CMS (Strapi, Contentful, Headless WordPress) websites by prokodo – built for Core Web Vitals & SEO.",
   "sideEffects": [
@@ -46,6 +46,11 @@
       "import": "./dist/components/animatedText/index.js",
       "types": "./dist/types/components/animatedText/index.d.ts"
     },
+    "./autocomplete": {
+      "import": "./dist/components/autocomplete/index.js",
+      "types": "./dist/types/components/autocomplete/index.d.ts"
+    },
+    "./autocomplete.css": "./dist/components/autocomplete/Autocomplete.css",
     "./avatar": {
       "import": "./dist/components/avatar/index.js",
       "types": "./dist/types/components/avatar/index.d.ts"
@@ -166,6 +171,11 @@
       "import": "./dist/components/map/index.js",
       "types": "./dist/types/components/map/index.d.ts"
     },
+    "./pagination": {
+      "import": "./dist/components/pagination/index.js",
+      "types": "./dist/types/components/pagination/index.d.ts"
+    },
+    "./pagination.css": "./dist/components/pagination/Pagination.css",
     "./post-item": {
       "import": "./dist/components/post-item/index.js",
       "types": "./dist/types/components/post-item/index.d.ts"
@@ -246,11 +256,21 @@
       "types": "./dist/types/components/table/index.d.ts"
     },
     "./table.css": "./dist/components/table/Table.css",
+    "./tabs": {
+      "import": "./dist/components/tabs/index.js",
+      "types": "./dist/types/components/tabs/index.d.ts"
+    },
+    "./tabs.css": "./dist/components/tabs/Tabs.css",
     "./teaser": {
       "import": "./dist/components/teaser/index.js",
       "types": "./dist/types/components/teaser/index.d.ts"
     },
-    "./teaser.css": "./dist/components/teaser/Teaser.css"
+    "./teaser.css": "./dist/components/teaser/Teaser.css",
+    "./tooltip": {
+      "import": "./dist/components/tooltip/index.js",
+      "types": "./dist/types/components/tooltip/index.d.ts"
+    },
+    "./tooltip.css": "./dist/components/tooltip/Tooltip.css"
   },
   "repository": {
     "type": "git",
@@ -320,6 +340,7 @@
     "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.5.0",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.6.1",
     "@types/google.maps": "^3.55.11",
     "@types/hast": "^3.0.4",
     "@types/jest": "^29.5.13",