@povio/ui 0.0.8 → 0.0.10

package/dist/components/inputs/RadioGroup/radio.cva.js

@@ -0,0 +1,47 @@
+import { cva } from "class-variance-authority";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const radio = cva(
+  ["flex items-center justify-center border-2", "relative size-3-5 rounded-full p-1-5", uiGroupOutlineClass],
+  {
+    variants: {
+      variant: {
+        default: [
+          "border-interactive-contained-secondary-idle",
+          "group-disabled:border-interactive-contained-secondary-disabled",
+          "group-hover:border-interactive-contained-secondary-hover",
+          "group-pressed:border-interactive-contained-secondary-pressed",
+          "group-selected:border-interactive-contained-primary-idle",
+          "group-selected:bg-interactive-contained-primary-idle",
+          "group-selected:group-hover:bg-interactive-contained-primary-hover",
+          "group-selected:group-hover:border-interactive-contained-primary-hover",
+          "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-selected:group-pressed:border-interactive-contained-primary-pressed",
+          "group-indeterminate:border-interactive-contained-primary-idle",
+          "group-indeterminate:bg-interactive-contained-primary-idle",
+          "group-indeterminate:group-hover:bg-interactive-contained-primary-hover",
+          "group-indeterminate:group-hover:border-interactive-contained-primary-hover",
+          "group-indeterminate:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-indeterminate:group-pressed:border-interactive-contained-primary-pressed",
+          "group-invalid:border-interactive-contained-error-idle",
+          "group-focus-visible:outline-interactive-contained-primary-focus"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const radioIndicatorClass = "group flex items-center gap-2";
+const radioTypography = compoundMapper({
+  default: {
+    size: "label-1",
+    variant: "default"
+  }
+});
+export {
+  radio,
+  radioIndicatorClass,
+  radioTypography
+};

package/{src → dist}/components/inputs/Selection/Autocomplete/Autocomplete.d.ts

@@ -1,8 +1,8 @@
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps } from '#ui/components/inputs/Selection/shared/select.types';
-import { OmitDiscriminatedUnion } from '#ui/types/common';
+import { SelectBaseProps } from '../shared/SelectBase';
+import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps } from '../shared/select.types';
+import { OmitDiscriminatedUnion } from '../../../../types/common';
 export type AutocompleteProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "isSearchable">;
 export type ControlledAutocompleteProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<AutocompleteProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey, TInitialSelectItem>;
 export declare const Autocomplete: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledAutocompleteProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { SelectBase } from "../shared/SelectBase.js";
+const Autocomplete = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          SelectBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message,
+            isSearchable: true
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SelectBase,
+    {
+      ...props,
+      isSearchable: true
+    }
+  );
+};
+export {
+  Autocomplete
+};

package/{src → dist}/components/inputs/Selection/Autocomplete/QueryAutocomplete.d.ts

@@ -1,9 +1,9 @@
 import { UseQueryResult } from '@tanstack/react-query';
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { AutocompleteProps } from '#ui/components/inputs/Selection/Autocomplete/Autocomplete';
-import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
-import { OmitDiscriminatedUnion } from '#ui/types/common';
+import { AutocompleteProps } from './Autocomplete';
+import { GroupedSelectControlProps, GroupedSelectProps, SelectItem } from '../shared/select.types';
+import { OmitDiscriminatedUnion } from '../../../../types/common';
 type QueryFn<TSelectItem extends SelectItem = SelectItem> = (...args: any) => UseQueryResult<Array<TSelectItem>>;
 type TKey<TQueryFn extends QueryFn> = Exclude<ReturnType<TQueryFn>["data"], undefined>[0] extends {
     id: infer InferredKey extends Key;

package/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -0,0 +1,25 @@
+import { jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Autocomplete } from "./Autocomplete.js";
+const QueryAutocomplete = ({
+  query,
+  queryParams,
+  queryOptions,
+  ...props
+}) => {
+  const [search, setSearch] = useState("");
+  const { data: items, isLoading } = query({ search, ...queryParams }, queryOptions);
+  return /* @__PURE__ */ jsx(
+    Autocomplete,
+    {
+      ...props,
+      items: items ?? [],
+      onSearchChange: setSearch,
+      isClientSearchDisabled: true,
+      isLoading
+    }
+  );
+};
+export {
+  QueryAutocomplete
+};

package/{src → dist}/components/inputs/Selection/Select/Select.d.ts

@@ -1,8 +1,8 @@
 import { Key } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectAsyncProps } from '#ui/components/inputs/Selection/shared/select.types';
-import { OmitDiscriminatedUnion } from '#ui/types/common';
+import { SelectBaseProps } from '../shared/SelectBase';
+import { DefaultInitialSelectItem, GroupedSelectControlProps, GroupedSelectProps, SelectAsyncProps } from '../shared/select.types';
+import { OmitDiscriminatedUnion } from '../../../../types/common';
 export type SelectProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = OmitDiscriminatedUnion<SelectBaseProps<TKey, TInitialSelectItem>, "initialSelection" | "mapInitialToSelectItem" | keyof SelectAsyncProps>;
 export type ControlledSelectProps<TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = Omit<SelectProps<TKey, TInitialSelectItem>, keyof GroupedSelectProps> & GroupedSelectControlProps<TFieldValues, TKey>;
 export declare const Select: <TFieldValues extends FieldValues, TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>>(props: ControlledSelectProps<TFieldValues, TKey, TInitialSelectItem>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/Selection/Select/Select.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { SelectBase } from "../shared/SelectBase.js";
+const Select = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(
+          SelectBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(SelectBase, { ...props });
+};
+export {
+  Select
+};

package/{src → dist}/components/inputs/Selection/shared/SelectBase.d.ts

@@ -1,9 +1,9 @@
 import { ReactElement, Ref } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { Key } from 'react-aria-components';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { DefaultInitialSelectItem, GroupedSelectProps, SelectAsyncProps, SelectItem, SelectNewItemProps, SelectVirtualizationProps } from '#ui/components/inputs/Selection/shared/select.types';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+import { FormFieldProps } from '../../FormField/FormField';
+import { DefaultInitialSelectItem, GroupedSelectProps, SelectAsyncProps, SelectItem, SelectNewItemProps, SelectVirtualizationProps } from './select.types';
+import { InputVariantProps } from '../../shared/input.cva';
 export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = DefaultInitialSelectItem<TKey>> = FormFieldProps & GroupedSelectProps<TKey, TInitialSelectItem> & SelectNewItemProps & SelectAsyncProps & SelectVirtualizationProps & InputVariantProps & Pick<AriaButtonProps, "onBlur"> & {
     ref?: Ref<HTMLDivElement>;
     className?: string;
@@ -18,6 +18,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     containerClassName?: string;
     customTrigger?: ReactElement;
     selectedTagsType?: "tags" | "list";
+    collapseAfter?: number;
     onInputChange?: (value: string) => void;
     onSearchChange?: (value: string) => void;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;

package/dist/components/inputs/Selection/shared/SelectBase.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { SelectDesktop } from "./SelectDesktop.js";
+import { SelectMobile } from "./SelectMobile.js";
+import { SelectContext } from "./select.context.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
+const SelectBase = (dProps) => {
+  const ui = UIConfig.useConfig();
+  const props = {
+    ...dProps,
+    selectionMode: dProps.selectionMode ?? ui.select.selectionMode,
+    variant: dProps.variant ?? ui.input.variant,
+    as: dProps.as ?? ui.input.as,
+    size: dProps.size ?? ui.input.size,
+    hideLabel: dProps.hideLabel ?? ui.input.hideLabel,
+    isClearable: dProps.isClearable ?? ui.input.isClearable,
+    isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
+    selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType,
+    ignoreTriggerWidth: dProps.virtualizerOptions || dProps.items.length > 100 ? false : dProps.ignoreTriggerWidth ?? false,
+    collapseAfter: dProps.collapseAfter ?? ui.select.collapseAfter
+  };
+  const isDesktop = useBreakpoint("md");
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { ...props, children: isDesktop ? /* @__PURE__ */ jsx(SelectDesktop, { ...props }) : /* @__PURE__ */ jsx(SelectMobile, { ...props }) });
+};
+export {
+  SelectBase
+};

package/{src → dist}/components/inputs/Selection/shared/SelectDesktop.d.ts

@@ -1,5 +1,5 @@
 import { Key } from 'react-aria-components';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
+import { SelectBaseProps } from './SelectBase';
 type SelectDesktopProps<TKey extends Key = Key> = SelectBaseProps<TKey>;
 export declare const SelectDesktop: <TKey extends Key = Key>({ ref, error, ignoreTriggerWidth, showSelectionContent, inputClassName, containerClassName, customTrigger, onBlur, ...props }: SelectDesktopProps<TKey>) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Selection/shared/SelectDesktop.js

@@ -0,0 +1,223 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { useRef, useMemo, Fragment } from "react";
+import { useLabel } from "react-aria";
+import { ComboBox, DialogTrigger, Popover } from "react-aria-components";
+import useMeasure from "react-use-measure";
+import { FormField } from "../../FormField/FormField.js";
+import { SelectInput } from "./SelectInput.js";
+import { SelectListBox } from "./SelectListBox.js";
+import { SelectContext } from "./select.context.js";
+import { SelectAllItemId } from "./useSelectItems.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
+const SelectDesktop = ({
+  ref,
+  error,
+  ignoreTriggerWidth,
+  showSelectionContent,
+  inputClassName,
+  containerClassName,
+  customTrigger,
+  onBlur,
+  ...props
+}) => {
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    headerClassName,
+    errorClassName,
+    placeholder,
+    variant,
+    isDisabled,
+    className,
+    hideLabel,
+    hideDropdownIcon,
+    isSearchable,
+    isClearable,
+    isLoading,
+    as,
+    size,
+    collapseAfter,
+    selectedTagsType
+  } = props;
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  const { labelProps, fieldProps } = useLabel({ label });
+  const triggerRef = useRef(null);
+  const closeComboBoxRef = useRef(null);
+  const [wrapperRef, { width }] = useMeasure();
+  const {
+    fieldState,
+    isOpen,
+    setIsOpen,
+    onInputChange,
+    onChange,
+    onClear,
+    onSelectAll,
+    listItems,
+    selectableListItems,
+    selectedIds,
+    isMultiple
+  } = SelectContext.useSelect();
+  const onSelectionChange = (value) => {
+    if (!value) {
+      return;
+    }
+    if (value === SelectAllItemId) {
+      if (selectedIds.length === selectableListItems.length) {
+        onClear();
+      } else {
+        onSelectAll();
+      }
+      return;
+    }
+    if (!isMultiple) {
+      onChange(value);
+      return;
+    }
+    if (!Array.isArray(fieldState.value)) {
+      onChange([value]);
+      return;
+    }
+    if (fieldState.value.includes(value)) {
+      onChange(fieldState.value.filter((id) => id !== value));
+    } else {
+      onChange(fieldState.value.concat(value));
+    }
+  };
+  const openChangeHandler = (value) => {
+    if (closeComboBoxRef.current && value) {
+      closeComboBoxRef.current.setOpen(false);
+      closeComboBoxRef.current = null;
+    } else {
+      setIsOpen(value);
+    }
+  };
+  const WrapperComponent = isSearchable ? ComboBox : Fragment;
+  const comboBoxProps = {
+    items: listItems,
+    selectedKey: isMultiple ? null : fieldState.value,
+    onSelectionChange,
+    inputValue: fieldState.inputValue,
+    onInputChange,
+    onOpenChange: openChangeHandler,
+    allowsEmptyCollection: true,
+    isDisabled,
+    isInvalid: !!error,
+    menuTrigger: "focus",
+    className: clsx("w-full", containerClassName)
+  };
+  const headerProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps
+  };
+  const dialogTriggerProps = {
+    isOpen,
+    onOpenChange: setIsOpen
+  };
+  const showPopover = useMemo(
+    () => listItems.filter((item) => !item.isSelectAllItem).length > 0 || isLoading,
+    [listItems, isLoading]
+  );
+  return /* @__PURE__ */ jsx(
+    TooltipWrapper,
+    {
+      as,
+      error,
+      children: /* @__PURE__ */ jsx(WrapperComponent, { ...isSearchable ? comboBoxProps : {}, children: /* @__PURE__ */ jsxs(
+        FormField,
+        {
+          ...formFieldProps,
+          ...!isSearchable && {
+            labelProps,
+            className: clsx("w-full", containerClassName)
+          },
+          as,
+          ref: wrapperRef,
+          children: [
+            customTrigger ? /* @__PURE__ */ jsx(DialogTrigger, { ...dialogTriggerProps, children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                ...fieldProps,
+                ref: mergeRefs(ref, triggerRef),
+                children: customTrigger
+              }
+            ) }) : /* @__PURE__ */ jsx(
+              SelectInput,
+              {
+                ref: mergeRefs(ref, triggerRef),
+                placeholder,
+                variant,
+                as,
+                size,
+                isDisabled,
+                isInvalid: !!error,
+                className,
+                hideDropdownIcon,
+                isSearchable,
+                isClearable,
+                showSelectionContent,
+                inputClassName,
+                collapseAfter,
+                selectedTagsType,
+                onBlur,
+                onCloseComboBox: (state) => {
+                  if (isSearchable) {
+                    closeComboBoxRef.current = state;
+                  }
+                },
+                fieldProps,
+                headerProps
+              }
+            ),
+            (!isSearchable || showPopover) && /* @__PURE__ */ jsx(
+              Popover,
+              {
+                triggerRef,
+                isOpen,
+                onOpenChange: setIsOpen,
+                className: "my-4 outline-none",
+                style: { width: !ignoreTriggerWidth ? width : void 0 },
+                offset: 0,
+                children: /* @__PURE__ */ jsx(
+                  SelectListBox,
+                  {
+                    ...props,
+                    className: "max-h-80 rounded-list-rounding-dropdown border border-elevation-outline-default-1 bg-elevation-fill-default-1 shadow-5 [scrollbar-width:thin]",
+                    autoFocus: !isSearchable
+                  }
+                )
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  );
+};
+export {
+  SelectDesktop
+};

package/{src → dist}/components/inputs/Selection/shared/SelectInput.d.ts

@@ -1,15 +1,15 @@
 import { AriaFieldProps } from 'react-aria';
 import { ComboBoxState } from 'react-stately';
-import { FormFieldHeaderProps } from '#ui/components/inputs/FormField/FormFieldHeader';
-import { SelectBaseProps } from '#ui/components/inputs/Selection/shared/SelectBase';
-import { SelectItem } from '#ui/components/inputs/Selection/shared/select.types';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
-interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType"> {
+import { FormFieldHeaderProps } from '../../FormField/FormFieldHeader';
+import { SelectBaseProps } from './SelectBase';
+import { SelectItem } from './select.types';
+import { InputVariantProps } from '../../shared/input.cva';
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType" | "collapseAfter"> {
     isInvalid?: boolean;
     className?: string;
     fieldProps?: AriaFieldProps;
     headerProps?: FormFieldHeaderProps;
     onCloseComboBox?: (state: ComboBoxState<SelectItem> | null) => void;
 }
-export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, onCloseComboBox, onBlur, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInput: ({ ref, placeholder, variant, as, size, isDisabled, isInvalid, className, hideDropdownIcon, isSearchable, isClearable, showSelectionContent, inputClassName, fieldProps, headerProps, selectedTagsType, collapseAfter, onCloseComboBox, onBlur, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};