@konstructio/ui 0.1.0-alpha.2 → 0.1.0-alpha.20

package/dist/{index-G_6jG4Qc.js → index-Dm-ooN_M.js}

@@ -1,16 +1,16 @@
 import * as a from "react";
-import { u as T } from "./index-Bk324h27.js";
-import { u as A } from "./index-bYyfdsls.js";
+import { u as T } from "./index-B5MIi2tR.js";
+import { u as A } from "./index-Cq1I1cG9.js";
 function E(n, e) {
   return a.useReducer((r, t) => e[r][t] ?? r, n);
 }
 var R = (n) => {
-  const { present: e, children: r } = n, t = P(e), o = typeof r == "function" ? r({ present: t.isPresent }) : a.Children.only(r), c = T(t.ref, v(o));
-  return typeof r == "function" || t.isPresent ? a.cloneElement(o, { ref: c }) : null;
+  const { present: e, children: r } = n, t = P(e), i = typeof r == "function" ? r({ present: t.isPresent }) : a.Children.only(r), c = T(t.ref, v(i));
+  return typeof r == "function" || t.isPresent ? a.cloneElement(i, { ref: c }) : null;
 };
 R.displayName = "Presence";
 function P(n) {
-  const [e, r] = a.useState(), t = a.useRef({}), o = a.useRef(n), c = a.useRef("none"), p = n ? "mounted" : "unmounted", [N, s] = E(p, {
+  const [e, r] = a.useState(), t = a.useRef(null), i = a.useRef(n), c = a.useRef("none"), p = n ? "mounted" : "unmounted", [N, s] = E(p, {
     mounted: {
       UNMOUNT: "unmounted",
       ANIMATION_OUT: "unmountSuspended"
@@ -24,22 +24,22 @@ function P(n) {
     }
   });
   return a.useEffect(() => {
-    const i = l(t.current);
-    c.current = N === "mounted" ? i : "none";
+    const o = l(t.current);
+    c.current = N === "mounted" ? o : "none";
   }, [N]), A(() => {
-    const i = t.current, m = o.current;
+    const o = t.current, m = i.current;
     if (m !== n) {
-      const f = c.current, u = l(i);
-      n ? s("MOUNT") : u === "none" || (i == null ? void 0 : i.display) === "none" ? s("UNMOUNT") : s(m && f !== u ? "ANIMATION_OUT" : "UNMOUNT"), o.current = n;
+      const f = c.current, u = l(o);
+      n ? s("MOUNT") : u === "none" || (o == null ? void 0 : o.display) === "none" ? s("UNMOUNT") : s(m && f !== u ? "ANIMATION_OUT" : "UNMOUNT"), i.current = n;
     }
   }, [n, s]), A(() => {
     if (e) {
-      let i;
+      let o;
       const m = e.ownerDocument.defaultView ?? window, d = (u) => {
         const g = l(t.current).includes(u.animationName);
-        if (u.target === e && g && (s("ANIMATION_END"), !o.current)) {
+        if (u.target === e && g && (s("ANIMATION_END"), !i.current)) {
           const O = e.style.animationFillMode;
-          e.style.animationFillMode = "forwards", i = m.setTimeout(() => {
+          e.style.animationFillMode = "forwards", o = m.setTimeout(() => {
             e.style.animationFillMode === "forwards" && (e.style.animationFillMode = O);
           });
         }
@@ -47,14 +47,14 @@ function P(n) {
         u.target === e && (c.current = l(t.current));
       };
       return e.addEventListener("animationstart", f), e.addEventListener("animationcancel", d), e.addEventListener("animationend", d), () => {
-        m.clearTimeout(i), e.removeEventListener("animationstart", f), e.removeEventListener("animationcancel", d), e.removeEventListener("animationend", d);
+        m.clearTimeout(o), e.removeEventListener("animationstart", f), e.removeEventListener("animationcancel", d), e.removeEventListener("animationend", d);
       };
     } else
       s("ANIMATION_END");
   }, [e, s]), {
     isPresent: ["mounted", "unmountSuspended"].includes(N),
-    ref: a.useCallback((i) => {
-      i && (t.current = getComputedStyle(i)), r(i);
+    ref: a.useCallback((o) => {
+      t.current = o ? getComputedStyle(o) : null, r(o);
     }, [])
   };
 }
@@ -62,9 +62,9 @@ function l(n) {
   return (n == null ? void 0 : n.animationName) || "none";
 }
 function v(n) {
-  var t, o;
+  var t, i;
   let e = (t = Object.getOwnPropertyDescriptor(n.props, "ref")) == null ? void 0 : t.get, r = e && "isReactWarning" in e && e.isReactWarning;
-  return r ? n.ref : (e = (o = Object.getOwnPropertyDescriptor(n, "ref")) == null ? void 0 : o.get, r = e && "isReactWarning" in e && e.isReactWarning, r ? n.props.ref : n.props.ref || n.ref);
+  return r ? n.ref : (e = (i = Object.getOwnPropertyDescriptor(n, "ref")) == null ? void 0 : i.get, r = e && "isReactWarning" in e && e.isReactWarning, r ? n.props.ref : n.props.ref || n.ref);
 }
 export {
   R as P

package/dist/index-DwYXX2sM.js

@@ -0,0 +1,13 @@
+import * as r from "react";
+function n(t) {
+  const e = r.useRef(t);
+  return r.useEffect(() => {
+    e.current = t;
+  }), r.useMemo(() => (...s) => {
+    var u;
+    return (u = e.current) == null ? void 0 : u.call(e, ...s);
+  }, []);
+}
+export {
+  n as u
+};

package/dist/{index-C5psggHV.js → index-h-Ul0anl.js}

@@ -663,6 +663,5 @@ function Ce() {
 var we = /* @__PURE__ */ Ce();
 const Ie = /* @__PURE__ */ ge(we);
 export {
-  Ie as P,
-  we as p
+  Ie as P
 };

package/dist/{index-D9BbbgUq.js → index-rUBNhTeF.js}

@@ -1,6 +1,6 @@
 import r from "react";
-import { c as y } from "./index-bYyfdsls.js";
-import { u as M, c as x } from "./index-Bk324h27.js";
+import { c as y } from "./index-Cq1I1cG9.js";
+import { u as M, c as x } from "./index-B5MIi2tR.js";
 import { jsx as d } from "react/jsx-runtime";
 function D(s) {
   const f = s + "CollectionProvider", [A, N] = y(f), [_, m] = A(

package/dist/index.d.ts

@@ -1,13 +1,21 @@
+import { AlertDialogProps as AlertDialogProps_2 } from '@radix-ui/react-alert-dialog';
 import { ButtonHTMLAttributes } from 'react';
+import { CheckboxProps as CheckboxProps_2 } from '@radix-ui/react-checkbox';
 import { ClassProp } from 'class-variance-authority/types';
 import { Context } from 'react';
+import { DayPickerProps } from 'react-day-picker';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { FunctionComponent } from 'react';
+import { getAllTimezones } from 'countries-and-timezones';
 import { HTMLAttributes } from 'react';
 import { HtmlHTMLAttributes } from 'react';
 import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
 import { PropsWithChildren } from 'react';
 import { ReactNode } from 'react';
+import * as ReactTabs from '@radix-ui/react-tabs';
+import { Ref } from 'react';
 import { RefAttributes } from 'react';
 import { SliderProps } from '@radix-ui/react-slider';
 import { VariantProps } from 'class-variance-authority';
@@ -16,17 +24,17 @@ export declare const Alert: FC<AlertProps>;
 
 export declare const AlertDialog: FC<AlertDialogProps>;
 
-declare interface AlertDialogProps extends PropsWithChildren {
-    buttonCancelClassName?: string;
-    buttonCancelText?: string;
-    buttonConfirmClassName?: string;
-    buttonConfirmText?: string;
-    buttonText?: string;
+declare interface AlertDialogProps extends PropsWithChildren, AlertDialogProps_2 {
+    buttonCancel?: ButtonCancelProps;
+    buttonConfirm?: ButtonConfirmProps;
+    buttonTriggerText?: string;
     buttonTriggerClassName?: string;
     className?: string;
-    description?: string;
+    description?: string | ReactNode;
+    showCancelButton?: boolean;
     theme?: Theme;
-    title?: string;
+    title?: string | ReactNode;
+    wrapperClassName?: string;
     onConfirm?: () => void;
 }
 
@@ -63,6 +71,31 @@ declare const autocompleteVariants: (props?: ({
     variant?: "default" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Badge: FC<BadgeProps>;
+
+export declare const BadgeMultiSelect: FC<BadgeMultiSelectProps>;
+
+declare type BadgeMultiSelectProps = {
+    label: string;
+    options: Option_5[];
+    position?: 'left' | 'right';
+    onApply?: (selectedOptions: Option_5[]) => void;
+};
+
+declare type BadgeProps = VariantProps<typeof badgeVariants> & {
+    label: string;
+    className?: string;
+    loading?: boolean;
+    dismissible?: true;
+    onClick?: VoidFunction;
+    onDismiss?: VoidFunction;
+};
+
+declare const badgeVariants: (props?: ({
+    variant?: "info" | "warning" | "danger" | "default" | "success" | null | undefined;
+    size?: "default" | null | undefined;
+} & ClassProp) | undefined) => string;
+
 declare interface BodyProps extends React.HTMLAttributes<HTMLTableSectionElement>, PropsWithChildren, VariantProps<typeof bodyVariants> {
 }
 
@@ -76,23 +109,33 @@ declare interface BreadcrumbProps extends VariantProps<typeof breadcrumbVariants
     theme?: Theme;
 }
 
-declare const breadcrumbVariants: (props?: ({
-    size?: "base" | "sm" | "lg" | "xl" | null | undefined;
-} & ClassProp) | undefined) => string;
+declare const breadcrumbVariants: (props?: ClassProp | undefined) => string;
 
 export declare const Button: FC<ButtonProps>;
 
+declare type ButtonBaseProps = Partial<ButtonProps> & {
+    className?: string;
+    text?: string;
+};
+
+declare type ButtonCancelProps = ButtonBaseProps;
+
+declare type ButtonConfirmProps = ButtonBaseProps;
+
 declare interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, VariantProps<typeof buttonVariants> {
+    ref?: Ref<HTMLButtonElement>;
     asChild?: boolean;
     disabled?: boolean;
     theme?: Theme;
 }
 
 declare const buttonVariants: (props?: ({
-    variant?: "danger" | "circle" | "text" | "primary" | "secondary" | null | undefined;
+    variant?: "danger" | "text" | "primary" | "secondary" | null | undefined;
+    shape?: "circle" | null | undefined;
     version?: "default" | "alternate" | null | undefined;
     disabled?: boolean | null | undefined;
     size?: "medium" | "large" | null | undefined;
+    appearance?: "compact" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Card: FC<CardProps>;
@@ -111,7 +154,7 @@ declare const cardVariants: (props?: ({
 
 export declare const Checkbox: FC<CheckboxProps>;
 
-declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'checked'>, VariantProps<typeof checkboxVariants> {
+declare interface CheckboxProps extends Omit<CheckboxProps_2, 'onChange'>, Omit<VariantProps<typeof checkboxVariants>, 'checked'> {
     ariaLabelledBy?: string;
     className?: string;
     defaultChecked?: boolean;
@@ -121,7 +164,7 @@ declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElemen
     labelClassName?: string;
     name?: string;
     theme?: Theme;
-    onChange?: () => void;
+    onChange?: (checked: boolean) => void;
 }
 
 declare const checkboxVariants: (props?: ({
@@ -129,26 +172,71 @@ declare const checkboxVariants: (props?: ({
     checked?: boolean | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const Content: ({ children, className, ...rest }: ReactTabs.TabsContentProps) => JSX.Element;
+
+export declare const DateFilterDropdown: FC<DateFilterDropdownProps>;
+
+declare type DateFilterDropdownProps = {
+    label: string;
+    position?: 'left' | 'right';
+    onApply?: (date?: Date) => void;
+};
+
+export declare const DatePicker: FC<DatePickerProps>;
+
+declare type DatePickerProps = Omit<DayPickerProps, 'mode'> & VariantProps<typeof datePickerVariants> & {
+    arrowClassName?: string;
+    monthsClassName?: string;
+    timeZone?: TimeZone;
+    defaultSelected?: Date;
+    onSelect?: (date: Date) => void;
+};
+
+declare const datePickerVariants: (props?: ClassProp | undefined) => string;
+
 export declare const Divider: FC<HTMLAttributes<HTMLDivElement>>;
 
 export declare const Dropdown: FC<DropdownProps>;
 
+export declare const DropdownButton: FC<Props>;
+
 declare interface DropdownProps extends VariantProps<typeof dropdownVariants>, Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'> {
+    className?: string;
+    iconClassName?: string;
     isLoading?: boolean;
     label?: string;
     labelClassName?: string;
+    listClassName?: string;
+    listItemClassName?: string;
     options: Option_3[];
+    searchable?: boolean;
     theme?: Theme;
     value?: string;
+    wrapperClassName?: string;
     onChange?: OnChangeFn;
 }
 
 declare const dropdownVariants: (props?: ClassProp | undefined) => string;
 
-declare interface FilterProps extends React.InputHTMLAttributes<HTMLInputElement>, PropsWithChildren {
+export declare const Filter: FilterComponentProps;
+
+declare type FilterComponentProps = FC<FilterProps> & {
+    BadgeMultiSelect: FC<BadgeMultiSelectProps>;
+    DateFilterDropdown: FC<DateFilterDropdownProps>;
+    ResetButton: FC<ResetButtonProps>;
+};
+
+declare type FilterProps = VariantProps<typeof filterVariants> & PropsWithChildren & {
+    className?: string;
+    theme?: Theme;
+};
+
+declare interface FilterProps_2 extends React.InputHTMLAttributes<HTMLInputElement>, PropsWithChildren {
     placeholder?: string;
 }
 
+declare const filterVariants: (props?: ClassProp | undefined) => string;
+
 export declare const Footer: FC<FooterProps>;
 
 declare interface FooterProps extends PropsWithChildren, VariantProps<typeof footerVariants> {
@@ -171,12 +259,21 @@ declare interface InputProps extends InputHTMLAttributes<HTMLInputElement>, Vari
     label?: string | ReactNode;
     labelClassName?: string;
     theme?: Theme;
+    isRequired?: boolean;
+    isSearch?: boolean;
+    helperText?: string;
 }
 
 declare const inputVariants: (props?: ({
     variant?: "error" | "default" | null | undefined;
 } & ClassProp) | undefined) => string;
 
+export declare const List: FunctionComponent<ListProps>;
+
+declare interface ListProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithChildren {
+    orientation: 'horizontal' | 'vertical';
+}
+
 export declare const Loading: FC<LoadingProps>;
 
 declare type LoadingProps = InputHTMLAttributes<SVGSVGElement> & VariantProps<typeof loadingVariants> & {
@@ -313,6 +410,19 @@ declare type Option_3 = {
     value: string;
 };
 
+declare type Option_4 = {
+    label: string | ReactNode;
+    onClick?: VoidFunction;
+};
+
+declare type Option_5 = {
+    id: string;
+    label: string;
+    variant?: BadgeProps['variant'];
+};
+
+export declare const PieChart: FC<Props_2>;
+
 export declare const ProgressBar: FC<ProgressBarProps>;
 
 declare interface ProgressBarProps extends VariantProps<typeof progressBarVariants> {
@@ -325,6 +435,92 @@ declare interface ProgressBarProps extends VariantProps<typeof progressBarVarian
 
 declare const progressBarVariants: (props?: ClassProp | undefined) => string;
 
+declare type Props = {
+    buttonClassName?: string;
+    className?: string;
+    itemClassName?: string;
+    listClassName?: string;
+    options: Option_4[];
+};
+
+/**
+ * Props for the PieChart component
+ */
+declare type Props_2 = {
+    /**
+     * Array of hexadecimal colors for the borders of the pie chart segments
+     * @default ['#FFFFFF', '#FFFFFF']
+     */
+    borderColors?: HexColor[];
+    /**
+     * Width of the border for pie chart segments in pixels
+     * @default 0
+     */
+    borderWidth?: number;
+    /**
+     * Array of hexadecimal colors for filling the pie chart segments
+     * @default ['#525252', '#00D492']
+     */
+    colors?: HexColor[];
+    /**
+     * Percentage of the pie chart's center that should be cut out, creating a donut chart effect
+     * @default 80
+     */
+    cutoutPercentage?: number;
+    /**
+     * Whether to redraw the entire chart when props change
+     * @default true
+     */
+    redraw?: boolean;
+    /**
+     * Hexadecimal color for the subtitle text
+     * @default '#6B7280'
+     */
+    subtitleColor?: HexColor;
+    /**
+     * Font size for the subtitle in pixels
+     * @default 14
+     */
+    subtitleFontSize?: number;
+    /**
+     * Font weight for the subtitle
+     * @default 'normal'
+     */
+    subtitleFontWeight?: 'bold' | 'normal';
+    /**
+     * Hexadecimal color for the title text
+     * @default '#111827'
+     */
+    titleColor?: HexColor;
+    /**
+     * Font size for the title in pixels
+     * @default 16
+     */
+    titleFontSize?: number;
+    /**
+     * Font weight for the title
+     * @default 'bold'
+     */
+    titleFontWeight?: 'bold' | 'normal';
+    /**
+     * Array of numeric values representing data for each segment of the pie chart
+     * @required
+     */
+    values: number[];
+} & 
+/**
+* Union type that enforces either:
+* - No title and no subtitle
+* - Title with optional subtitle
+*/
+({
+    title?: undefined;
+    subtitle?: never;
+} | {
+    title: string;
+    subtitle?: string;
+});
+
 export declare const Radio: FC<RadioProps>;
 
 export declare const RadioCard: FC<RadioCardProps>;
@@ -343,7 +539,7 @@ declare type RadioCardGroupProps = {
     onValueChange?: (value: string) => void;
 };
 
-declare type RadioCardProps = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName'> & {
+declare type RadioCardProps = Omit<CardProps, 'canHover' | 'isActive'> & Pick<RadioProps, 'name' | 'value' | 'checked' | 'onChange' | 'label' | 'disabled' | 'defaultChecked' | 'labelTextClassName' | 'description' | 'descriptionClassName'> & {
     labelWrapperClassName?: string;
     theme?: Theme;
 };
@@ -370,6 +566,8 @@ declare interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     label?: string | ReactNode;
     labelTextClassName?: string;
     name: string;
+    description?: string | ReactNode;
+    descriptionClassName?: string;
     value: string;
     wrapperClassName?: string;
     theme?: Theme;
@@ -398,6 +596,11 @@ declare interface RangeProps extends VariantProps<typeof rangeVariants> {
 
 declare const rangeVariants: (props?: ClassProp | undefined) => string;
 
+declare type ResetButtonProps = {
+    disabled?: boolean;
+    onClick?: VoidFunction;
+};
+
 declare interface RowProps extends React.HTMLAttributes<HTMLTableRowElement>, PropsWithChildren, VariantProps<typeof rowVariants> {
     width?: string;
     isSelected?: boolean;
@@ -448,6 +651,7 @@ declare type Step = {
     to?: string;
     target?: '_self' | '_blank';
     isActive?: boolean;
+    component?: FC<any>;
 };
 
 export declare const Switch: FC<SwitchProps>;
@@ -469,7 +673,7 @@ declare const switchVariants: (props?: ClassProp | undefined) => string;
 export declare const Table: FC<TableProps> & {
     Head: FC<HeadProps>;
     Row: FC<RowProps>;
-    Filter: FC<FilterProps>;
+    Filter: FC<FilterProps_2>;
     Body: FC<BodyProps>;
 };
 
@@ -479,6 +683,16 @@ declare interface TableProps extends React.HTMLAttributes<HTMLTableElement>, Pro
 
 declare const tableVariants: (props?: ClassProp | undefined) => string;
 
+export declare const Tabs: FunctionComponent<TabsProps> & {
+    List: FunctionComponent<ListProps>;
+    Trigger: FunctionComponent<TriggerProps>;
+    Content: FunctionComponent<ReactTabs.TabsContentProps>;
+};
+
+declare interface TabsProps extends ReactTabs.TabsProps, PropsWithChildren {
+    theme?: Theme;
+}
+
 export declare const Tag: FC<TagProps>;
 
 declare type TagProps = {
@@ -538,6 +752,25 @@ declare type ThemeProps = {
 
 export declare const ThemeProvider: FC<ThemeContextProps>;
 
+export declare const TimePicker: FC<TimePickerProps>;
+
+declare type TimePickerProps = VariantProps<typeof timePickerVariants> & {
+    format?: '12' | '24';
+    scrollBehavior?: 'smooth' | 'auto';
+    time?: Date;
+    name?: string;
+    label?: string;
+    required?: boolean;
+    className?: string;
+    listClassName?: string;
+    listItemClassName?: string;
+    listItemButtonClassName?: string;
+};
+
+declare const timePickerVariants: (props?: ClassProp | undefined) => string;
+
+declare type TimeZone = keyof ReturnType<typeof getAllTimezones>;
+
 export declare const Toast: FC<ToastProps>;
 
 declare interface ToastProps extends PropsWithChildren, VariantProps<typeof toastVariants> {
@@ -566,7 +799,19 @@ declare interface TooltipProps extends PropsWithChildren, VariantProps<typeof to
 }
 
 declare const tooltipVariants: (props?: ({
-    position?: "left" | "right" | "top" | "bottom" | null | undefined;
+    position?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & ClassProp) | undefined) => string;
+
+export declare const Trigger: FunctionComponent<TriggerProps>;
+
+declare interface TriggerProps extends VariantProps<typeof triggerVariants>, React.HTMLAttributes<HTMLDivElement> {
+    tab: string;
+    label: string;
+    isActive: boolean;
+}
+
+declare const triggerVariants: (props?: ({
+    variant?: "default" | "active" | "inactive" | null | undefined;
 } & ClassProp) | undefined) => string;
 
 export declare const Typography: FC<TypographyProps>;