@prokodo/ui 0.1.12 → 0.1.14

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/checkbox/Checkbox.client.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxProps } from "./Checkbox.model";
+declare function CheckboxClient<T extends string = string>(props: CheckboxProps<T>): import("react").JSX.Element;
+declare const _default: typeof CheckboxClient;
+export default _default;

package/dist/types/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,18 @@
+export declare const Checkbox: import("react").ComponentType<Omit<import("react").HTMLAttributes<HTMLInputElement>, "title" | "onChange"> & {
+    name: string;
+    value: string;
+    title: import("react").ReactNode;
+    description?: import("react").ReactNode | null;
+    icon?: Omit<import("../icon").IconProps, "label"> | null;
+    iconLabel?: string | null;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    showRequiredMark?: boolean;
+    disabled?: boolean;
+    variant?: import("./Checkbox.model").CheckboxVariant;
+    onChange?: (event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    className?: string;
+} & {
+    priority?: boolean;
+}>;

package/dist/types/components/checkbox/Checkbox.lazy.d.ts

@@ -0,0 +1,19 @@
+declare const _default: import("react").ComponentType<Omit<import("react").HTMLAttributes<HTMLInputElement>, "title" | "onChange"> & {
+    name: string;
+    value: string;
+    title: import("react").ReactNode;
+    description?: import("react").ReactNode | null;
+    icon?: Omit<import("../icon").IconProps, "label"> | null;
+    iconLabel?: string | null;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    showRequiredMark?: boolean;
+    disabled?: boolean;
+    variant?: import("./Checkbox.model").CheckboxVariant;
+    onChange?: (event: import("react").ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    className?: string;
+} & {
+    priority?: boolean;
+}>;
+export default _default;

package/dist/types/components/checkbox/Checkbox.model.d.ts

@@ -0,0 +1,23 @@
+import type { IconProps } from "@/components/icon";
+import type { ChangeEvent, HTMLAttributes, ReactNode } from "react";
+export type CheckboxVariant = "plain" | "card";
+export type CheckboxProps<T extends string = string> = Omit<HTMLAttributes<HTMLInputElement>, "onChange" | "title"> & {
+    name: string;
+    value: T;
+    title: ReactNode;
+    description?: ReactNode | null;
+    icon?: Omit<IconProps, "label"> | null;
+    iconLabel?: string | null;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    required?: boolean;
+    showRequiredMark?: boolean;
+    disabled?: boolean;
+    variant?: CheckboxVariant;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;
+    className?: string;
+};
+export type CheckboxViewProps<T extends string = string> = CheckboxProps<T> & {
+    isChecked: boolean;
+    onChangeInternal?: (event: ChangeEvent<HTMLInputElement>) => void;
+};

package/dist/types/components/checkbox/Checkbox.server.d.ts

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

package/dist/types/components/checkbox/Checkbox.view.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxViewProps } from "./Checkbox.model";
+import type { JSX } from "react";
+export declare function CheckboxView<T extends string = string>({ className, name, value, title, description, icon, iconLabel, required, showRequiredMark, disabled, variant, isChecked, onChangeInternal, }: CheckboxViewProps<T>): JSX.Element;

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

@@ -0,0 +1,2 @@
+export * from "./Checkbox";
+export type { CheckboxProps, CheckboxVariant } from "./Checkbox.model";

package/dist/types/components/checkbox-group/CheckboxGroup.client.d.ts

@@ -0,0 +1,4 @@
+import type { CheckboxGroupProps } from "./CheckboxGroup.model";
+declare function CheckboxGroupClient<T extends string>(props: CheckboxGroupProps<T>): import("react").JSX.Element;
+declare const _default: typeof CheckboxGroupClient;
+export default _default;

package/dist/types/components/checkbox-group/CheckboxGroup.d.ts

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

package/dist/types/components/checkbox-group/CheckboxGroup.lazy.d.ts

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

package/dist/types/components/checkbox-group/CheckboxGroup.model.d.ts

@@ -0,0 +1,38 @@
+import type { IconProps } from "@/components/icon";
+import type { HTMLAttributes } from "react";
+export type CheckboxGroupOption<T extends string> = {
+    value: T;
+    title: string;
+    description?: string | null;
+    icon?: Omit<IconProps, "label"> | null;
+    iconLabel?: string | null;
+    required?: boolean;
+    disabled?: boolean;
+};
+export type CheckboxGroupVariant = "plain" | "card";
+export type CheckboxGroupLayout = "stack" | "grid";
+export type CheckboxGroupTranslations = {
+    ariaLabel?: string;
+};
+export type CheckboxGroupProps<T extends string> = {
+    ariaLabel?: string;
+    legend?: string | null;
+    hideLegend?: boolean;
+    legendProps?: HTMLAttributes<HTMLLegendElement>;
+    name: string;
+    disabled?: boolean;
+    required?: boolean;
+    values?: T[];
+    defaultValues?: T[];
+    options: CheckboxGroupOption<T>[];
+    onChange?: (next: T[]) => void;
+    hiddenInputName?: string;
+    layout?: CheckboxGroupLayout;
+    variant?: CheckboxGroupVariant;
+    translations?: CheckboxGroupTranslations;
+};
+export type CheckboxGroupViewProps<T extends string> = CheckboxGroupProps<T> & {
+    selectedValues: T[];
+    isChecked: (value: T) => boolean;
+    onToggle?: (value: T) => void;
+};

package/dist/types/components/checkbox-group/CheckboxGroup.server.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxGroupProps } from "./CheckboxGroup.model";
+import type { JSX } from "react";
+export default function CheckboxGroupServer<T extends string>(props: CheckboxGroupProps<T>): JSX.Element | null;

package/dist/types/components/checkbox-group/CheckboxGroup.view.d.ts

@@ -0,0 +1,3 @@
+import type { CheckboxGroupViewProps } from "./CheckboxGroup.model";
+import type { JSX } from "react";
+export declare function CheckboxGroupView<T extends string>({ ariaLabel, legend, hideLegend, legendProps, name, disabled, required, options, selectedValues, hiddenInputName, layout, variant, translations: t, isChecked, onToggle, }: CheckboxGroupViewProps<T>): JSX.Element | null;

package/dist/types/components/checkbox-group/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./CheckboxGroup";
+export type { CheckboxGroupProps, CheckboxGroupOption, CheckboxGroupVariant, CheckboxGroupLayout, CheckboxGroupTranslations, } from "./CheckboxGroup.model";

package/dist/types/components/dialog/Dialog.model.d.ts

@@ -30,6 +30,7 @@ export type DialogViewProps = HTMLAttributes<HTMLDivElement> & {
     contentRef?: Ref<HTMLDivElement>;
     containerChildren?: ReactNode;
     classNameHeader?: string;
+    actionsClassName?: string;
     scroll?: "paper" | "body";
     fullScreen?: boolean;
     onClose?: () => void;

package/dist/types/components/dialog/Dialog.view.d.ts

@@ -1,3 +1,3 @@
 import type { DialogViewProps } from "./Dialog.model";
 import type { JSX } from "react";
-export declare function DialogView({ open, title, containerRef, hideTitle, renderHeader, hideCloseButton, translations, actions, contentProps, contentRef, containerChildren, className, classNameHeader, height, scroll, fullScreen, titleProps, children, onClose, onCloseKeyDown, wrapperProps, closeOnBackdropClick, closeButtonProps, closeButtonRef, ...rest }: DialogViewProps): JSX.Element;
+export declare function DialogView({ open, title, containerRef, hideTitle, renderHeader, hideCloseButton, translations, actions, contentProps, contentRef, containerChildren, className, classNameHeader, actionsClassName, height, scroll, fullScreen, titleProps, children, onClose, onCloseKeyDown, wrapperProps, closeOnBackdropClick, closeButtonProps, closeButtonRef, ...rest }: DialogViewProps): JSX.Element;

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/index.d.ts

@@ -1,12 +1,15 @@
 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";
 export { Calendly } from "./components/calendly";
 export { Card } from "./components/card";
 export { Carousel } from "./components/carousel";
+export { Checkbox } from "./components/checkbox";
+export { CheckboxGroup } from "./components/checkbox-group";
 export { Chip } from "./components/chip";
 export { DatePicker } from "./components/datePicker";
 export { Dialog } from "./components/dialog";
@@ -44,6 +47,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.12",
+  "version": "0.1.14",
   "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"
@@ -74,6 +79,16 @@
       "types": "./dist/types/components/carousel/index.d.ts"
     },
     "./carousel.css": "./dist/components/carousel/Carousel.css",
+    "./checkbox": {
+      "import": "./dist/components/checkbox/index.js",
+      "types": "./dist/types/components/checkbox/index.d.ts"
+    },
+    "./checkbox.css": "./dist/components/checkbox/Checkbox.css",
+    "./checkbox-group": {
+      "import": "./dist/components/checkbox-group/index.js",
+      "types": "./dist/types/components/checkbox-group/index.d.ts"
+    },
+    "./checkbox-group.css": "./dist/components/checkbox-group/CheckboxGroup.css",
     "./chip": {
       "import": "./dist/components/chip/index.js",
       "types": "./dist/types/components/chip/index.d.ts"
@@ -251,6 +266,11 @@
       "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"