@zvoove/unity-ui 2.27.0 → 2.29.0

package/dist/components/Table/Table.styled.d.ts

@@ -0,0 +1,77 @@
+export declare const tableWrapperStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const tableStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const tableHeaderStyles: import('tailwind-variants').TVReturnType<{
+    hasBackgroundColor: {
+        true: string[];
+    };
+}, undefined, string[], {
+    hasBackgroundColor: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    hasBackgroundColor: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const tableRowStyles: import('tailwind-variants').TVReturnType<{
+    isSubRow: {
+        true: string[];
+    };
+    isLastWithSubRow: {
+        true: string[];
+    };
+    isOpen: {
+        true: string[];
+    };
+    isSubRowOpen: {
+        true: string[];
+    };
+}, undefined, string[], {
+    isSubRow: {
+        true: string[];
+    };
+    isLastWithSubRow: {
+        true: string[];
+    };
+    isOpen: {
+        true: string[];
+    };
+    isSubRowOpen: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isSubRow: {
+        true: string[];
+    };
+    isLastWithSubRow: {
+        true: string[];
+    };
+    isOpen: {
+        true: string[];
+    };
+    isSubRowOpen: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const tableCellStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        header: string[];
+    };
+    orderable: {
+        true: string[];
+    };
+}, undefined, string[], {
+    variant: {
+        header: string[];
+    };
+    orderable: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        header: string[];
+    };
+    orderable: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/Table/Table.types.d.ts

@@ -0,0 +1,114 @@
+export declare const direction: {
+    readonly ASC: "asc";
+    readonly DESC: "desc";
+    readonly NONE: "none";
+};
+export declare const align: {
+    readonly LEFT: "left";
+    readonly CENTER: "center";
+    readonly RIGHT: "right";
+};
+export type TableColumnDirection = (typeof direction)[keyof typeof direction];
+export type ColumnAlign = (typeof align)[keyof typeof align];
+export interface TableColumnProps extends React.HTMLAttributes<HTMLTableColElement> {
+    /**
+     * The children of the Table.
+     */
+    label: React.ReactNode;
+    /**
+     * The id of the Table column.
+     */
+    id: string;
+    /**
+     * The alignment of the Table column.
+     */
+    align?: ColumnAlign;
+    /**
+     * The width of the Table column.
+     */
+    width?: string;
+    /**
+     * The minimum width of the Table column.
+     */
+    minWidth?: string;
+    /**
+     * If true, the column is orderable.
+     */
+    orderable?: boolean;
+}
+export type ColumnId<T extends readonly TableColumnProps[]> = T[number]['id'];
+export interface ExpandableRowConfig {
+    id: string;
+    render: React.ReactNode;
+}
+export type TableRowData<T extends readonly TableColumnProps[]> = {
+    [K in ColumnId<T>]: React.ReactNode;
+} & {
+    expandableRow?: ExpandableRowConfig;
+};
+export interface TableProps<T extends readonly TableColumnProps[] = readonly TableColumnProps[]> extends React.HTMLAttributes<HTMLTableElement> {
+    /**
+     * The title of the Table.
+     */
+    title?: string;
+    /**
+     * The subtitle of the Table.
+     */
+    subtitle?: string;
+    /**
+     * The action of the Table.
+     */
+    actions?: React.ReactNode;
+    /**
+     * The filters of the Table.
+     */
+    filters?: React.ReactNode;
+    /**
+     * The data rows of the Table.
+     */
+    data: TableRowData<T>[];
+    /**
+     * The loading state of the Table.
+     */
+    loading?: boolean;
+    /**
+     * The columns of the Table.
+     */
+    columns: T;
+    /**
+     * The hidden columns of the Table.
+     */
+    hiddenColumns?: ColumnId<T>[];
+    /**
+     * The expanded rows of the Table.
+     */
+    expandedRows?: string[];
+    /**
+     * The order by of the Table.
+     */
+    orderBy?: {
+        column: ColumnId<T>;
+        direction: TableColumnDirection;
+    };
+    /**
+     * Callback function to handle order by change.
+     */
+    onOrderByChange?: ({ columnId, direction, }: {
+        columnId: ColumnId<T>;
+        direction: TableColumnDirection;
+    }) => void;
+    /**
+     * The empty state of the Table.
+     * @default 'Keine Daten gefunden'
+     */
+    emptyState?: React.ReactNode;
+    /**
+     * The footer of the Table.
+     */
+    footer?: React.ReactNode;
+    /**
+     * The background color of the table header.
+     * @default false
+     */
+    headerBackgroundColor?: boolean;
+}

package/dist/components/Table/TableDocExample/RowActionButton.d.ts

@@ -0,0 +1,5 @@
+import { ClientStatus } from './TableDocExample';
+declare const RowActionButton: ({ statusType }: {
+    statusType: ClientStatus;
+}) => import("react/jsx-runtime").JSX.Element;
+export default RowActionButton;

package/dist/components/Table/TableDocExample/TableDocExample.constants.d.ts

@@ -0,0 +1,14 @@
+export declare const clientStatusTypes: {
+    readonly KUNDE: "Kunde";
+    readonly INTERESSENT: "Interessent";
+    readonly LIEFERANT: "Lieferant";
+    readonly KONZERN: "Konzern";
+    readonly DEAKTIVIERT: "Deaktiviert";
+};
+export declare const clientStatusColors: {
+    readonly KUNDE: "green";
+    readonly INTERESSENT: "yellow";
+    readonly LIEFERANT: "steel-blue";
+    readonly KONZERN: "primary";
+    readonly DEAKTIVIERT: "error";
+};

package/dist/components/Table/TableDocExample/TableDocExample.d.ts

@@ -0,0 +1,4 @@
+import { clientStatusTypes } from './TableDocExample.constants';
+export type ClientStatus = (typeof clientStatusTypes)[keyof typeof clientStatusTypes];
+declare const TableDocExample: () => import("react/jsx-runtime").JSX.Element;
+export default TableDocExample;

package/dist/components/Table/TableDocExample/index.d.ts

@@ -0,0 +1 @@
+export { default as TableDocExample } from './TableDocExample';

package/dist/components/Table/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Table } from './Table';
+export type { TableProps, TableRowData, TableColumnProps, ColumnAlign, TableColumnDirection, ColumnId, } from './Table.types';

package/dist/components/Tabs/TabItem.d.ts

@@ -0,0 +1,3 @@
+import { TabItemProps } from './Tabs.types';
+declare const TabItem: <T extends React.ElementType = "button">({ item, activeItem, onChange, hasActivity, scrollContainerRef, tabRefs, setTabRef, index, linkComponent: LinkComponent, isActive, }: TabItemProps<T>) => import("react/jsx-runtime").JSX.Element;
+export default TabItem;

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

@@ -0,0 +1,6 @@
+import { TabsProps } from './Tabs.types';
+declare const Tabs: {
+    <T extends React.ElementType = "button">({ items, activeItem, onChange, hideBorder, itemsAlignment, isSticky, panels, linkComponent: LinkComponent, }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default Tabs;

package/dist/components/Tabs/Tabs.styled.d.ts

@@ -0,0 +1,161 @@
+export declare const tabsControllerStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const tabPanelStyles: import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    active: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    active: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const tabsContainerStyles: import('tailwind-variants').TVReturnType<{
+    hasArrows: {
+        true: string[];
+    };
+    hideBorder: {
+        true: string[];
+        false: string[];
+    };
+    isSticky: {
+        true: string[];
+    };
+}, undefined, string[], {
+    hasArrows: {
+        true: string[];
+    };
+    hideBorder: {
+        true: string[];
+        false: string[];
+    };
+    isSticky: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    hasArrows: {
+        true: string[];
+    };
+    hideBorder: {
+        true: string[];
+        false: string[];
+    };
+    isSticky: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const scrollableContainerStyles: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export declare const tabsStyles: import('tailwind-variants').TVReturnType<{
+    hasArrows: {
+        false: string[];
+        true: string[];
+    };
+    itemsAlignment: {
+        left: string[];
+        center: string[];
+        right: string[];
+        between: string[];
+        around: string[];
+        evenly: string[];
+    };
+}, undefined, string[], {
+    hasArrows: {
+        false: string[];
+        true: string[];
+    };
+    itemsAlignment: {
+        left: string[];
+        center: string[];
+        right: string[];
+        between: string[];
+        around: string[];
+        evenly: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    hasArrows: {
+        false: string[];
+        true: string[];
+    };
+    itemsAlignment: {
+        left: string[];
+        center: string[];
+        right: string[];
+        between: string[];
+        around: string[];
+        evenly: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const tabStyles: import('tailwind-variants').TVReturnType<{
+    active: {
+        false: string[];
+        true: string[];
+    };
+    activity: {
+        true: string[];
+    };
+}, undefined, string[], {
+    active: {
+        false: string[];
+        true: string[];
+    };
+    activity: {
+        true: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    active: {
+        false: string[];
+        true: string[];
+    };
+    activity: {
+        true: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const tabActiveTrackerStyles: import('tailwind-variants').TVReturnType<{
+    initial: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    initial: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    initial: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const arrowStyles: import('tailwind-variants').TVReturnType<{
+    direction: {
+        left: string[];
+        right: string[];
+    };
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], {
+    direction: {
+        left: string[];
+        right: string[];
+    };
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    direction: {
+        left: string[];
+        right: string[];
+    };
+    visible: {
+        true: string[];
+        false: string[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

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

@@ -0,0 +1,60 @@
+import { CommonIconNames } from '../../index.ts';
+export type TabItem<T extends React.ElementType = 'button'> = {
+    label: string;
+    icon?: CommonIconNames;
+    iconPosition?: 'left' | 'top';
+    hideLabel?: boolean;
+    hasActivity?: boolean;
+    id: string;
+} & Omit<React.ComponentPropsWithoutRef<T>, 'children'>;
+export type TabItemProps<T extends React.ElementType = 'button'> = {
+    item: TabItem<T>;
+    activeItem: string;
+    onChange: (item: TabItem<T>) => void;
+    hasActivity: boolean;
+    scrollContainerRef: React.RefObject<HTMLDivElement>;
+    tabRefs: React.RefObject<HTMLButtonElement[]>;
+    setTabRef: (index: number, el: HTMLButtonElement | null) => void;
+    index: number;
+    linkComponent: T | 'button' | 'a';
+    isActive: boolean;
+};
+type Panel = {
+    id: string;
+    children: React.ReactNode;
+};
+export interface TabsProps<T extends React.ElementType = 'button'> {
+    /**
+     * The items to display in the tabs.
+     */
+    items: TabItem<T>[];
+    /**
+     * Whether the tabs are sticky.
+     */
+    isSticky?: boolean;
+    /**
+     * The panels to display in the tabs.
+     */
+    panels?: Panel[];
+    /**
+     * The active item in the tabs.
+     */
+    activeItem: string;
+    /**
+     * The callback function to handle the change of the active item.
+     */
+    onChange?: (item: TabItem<T>) => void;
+    /**
+     * Whether to hide the border of the tabs.
+     */
+    hideBorder?: boolean;
+    /**
+     * The link component to use for the tabs.
+     */
+    linkComponent?: T | 'button' | 'a';
+    /**
+     * The alignment of the tabs.
+     */
+    itemsAlignment?: 'left' | 'center' | 'right' | 'between' | 'around' | 'evenly';
+}
+export {};

package/dist/components/Tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tabs';
+export type { TabsProps } from './Tabs.types';

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,3 @@
+import { TagProps } from './Tag.types';
+declare const Tag: import('react').ForwardRefExoticComponent<TagProps & import('react').RefAttributes<HTMLSpanElement>>;
+export default Tag;

package/dist/components/Tag/Tag.styled.d.ts

@@ -0,0 +1,73 @@
+export declare const tagStyles: import('tailwind-variants').TVReturnType<{
+    variant: {
+        solid: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+    size: {
+        large: string[];
+        medium: string[];
+        small: string[];
+    };
+    color: {
+        green: string[];
+        yellow: string[];
+        pink: string[];
+        'steel-blue': string[];
+        error: string[];
+        primary: string[];
+        neutral: string[];
+    };
+    tone: {
+        light: never[];
+        dark: never[];
+    };
+}, undefined, string[], {
+    variant: {
+        solid: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+    size: {
+        large: string[];
+        medium: string[];
+        small: string[];
+    };
+    color: {
+        green: string[];
+        yellow: string[];
+        pink: string[];
+        'steel-blue': string[];
+        error: string[];
+        primary: string[];
+        neutral: string[];
+    };
+    tone: {
+        light: never[];
+        dark: never[];
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        solid: string[];
+        outlined: string[];
+        ghost: string[];
+    };
+    size: {
+        large: string[];
+        medium: string[];
+        small: string[];
+    };
+    color: {
+        green: string[];
+        yellow: string[];
+        pink: string[];
+        'steel-blue': string[];
+        error: string[];
+        primary: string[];
+        neutral: string[];
+    };
+    tone: {
+        light: never[];
+        dark: never[];
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/Tag/Tag.types.d.ts

@@ -0,0 +1,28 @@
+import { CommonIconNames } from '../../index.ts';
+export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The label of the tag.
+     */
+    label: string;
+    /**
+     * The variant of the tag
+     */
+    variant?: 'solid' | 'outlined' | 'ghost';
+    /**
+     * The color of the tag
+     */
+    color?: 'green' | 'yellow' | 'pink' | 'steel-blue' | 'error' | 'primary' | 'neutral';
+    /**
+     * The tone of the tag `color` <br />
+     * Only works with `variant` set to `solid`
+     */
+    tone?: 'dark' | 'light';
+    /**
+     * The size of the tag
+     */
+    size?: 'large' | 'medium' | 'small';
+    /**
+     * The icon of the tag
+     */
+    icon?: CommonIconNames;
+}

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tag } from './Tag';
+export type { TagProps } from './Tag.types';

package/dist/components/TextField/TextField.d.ts

@@ -0,0 +1,3 @@
+import { TextFieldProps } from './TextField.types';
+declare const TextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement>>;
+export default TextField;