@povio/ui 0.0.6 → 0.0.8

package/dist/components/inputs/Inputs/InputItem.js

@@ -1,63 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { Checkbox } from "../Checkbox/Checkbox.js";
-import { DatePicker } from "../DateTime/DatePicker/DatePicker.js";
-import { DateRangePicker } from "../DateTime/DateRangePicker/DateRangePicker.js";
-import { DateTimePicker } from "../DateTime/DateTimePicker/DateTimePicker.js";
-import { TimePicker } from "../DateTime/TimePicker/TimePicker.js";
-import { NumberInput } from "../Input/NumberInput/NumberInput.js";
-import { PasswordInput } from "../Input/PasswordInput/PasswordInput.js";
-import { TextArea } from "../Input/TextArea/TextArea.js";
-import { TextInput } from "../Input/TextInput/TextInput.js";
-import { Autocomplete } from "../Selection/Autocomplete/Autocomplete.js";
-import { QueryAutocomplete } from "../Selection/Autocomplete/QueryAutocomplete.js";
-import { Select } from "../Selection/Select/Select.js";
-import { Slider } from "../Slider/Slider.js";
-import { TextEditor } from "../TextEditor/TextEditor.js";
-import { Toggle } from "../Toggle/Toggle.js";
-import { Segment } from "../../segment/Segment.js";
-const componentRegistry = {
-  toggle: Toggle,
-  checkbox: Checkbox,
-  numberInput: NumberInput,
-  slider: Slider,
-  textInput: TextInput,
-  passwordInput: PasswordInput,
-  textArea: TextArea,
-  select: Select,
-  autocomplete: Autocomplete,
-  queryAutocomplete: QueryAutocomplete,
-  segment: Segment,
-  datePicker: DatePicker,
-  dateTimePicker: DateTimePicker,
-  timePicker: TimePicker,
-  dateRangePicker: DateRangePicker,
-  textEditor: TextEditor,
-  unknown: null
-};
-function InputItem({ form, inputDef }) {
-  const { name, label, placeholder, props, inputWrapper, render, type } = inputDef;
-  const formControl = { control: form.control, name };
-  if (render) {
-    return render(formControl, form);
-  }
-  if (!type) {
-    return null;
-  }
-  const Component = componentRegistry[type];
-  const usesChildrenAsLabel = ["toggle", "checkbox"].includes(type);
-  const inputProps = props ?? {};
-  const inputComponent = /* @__PURE__ */ jsx(
-    Component,
-    {
-      ...inputProps,
-      label: usesChildrenAsLabel ? void 0 : label,
-      placeholder,
-      formControl,
-      children: usesChildrenAsLabel ? label : void 0
-    }
-  );
-  return inputWrapper ? inputWrapper(inputComponent, label) : inputComponent;
-}
-export {
-  InputItem
-};

package/dist/components/inputs/Inputs/Inputs.js

@@ -1,32 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { InputItem } from "./InputItem.js";
-function Inputs({
-  form,
-  inputDefs,
-  children
-}) {
-  if (!children) {
-    return inputDefs.map((inputDef) => /* @__PURE__ */ jsx(
-      InputItem,
-      {
-        form,
-        inputDef
-      },
-      String(inputDef.name)
-    ));
-  }
-  const childrenParams = {};
-  for (const inputDef of inputDefs) {
-    childrenParams[inputDef.name] = /* @__PURE__ */ jsx(
-      InputItem,
-      {
-        form,
-        inputDef
-      }
-    );
-  }
-  return children(childrenParams);
-}
-export {
-  Inputs
-};

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

@@ -1,113 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { RadioGroup as RadioGroup$1, Radio } from "react-aria-components";
-import { Controller } from "react-hook-form";
-import { FormField } from "../FormField/FormField.js";
-import { radio, radioTypography, radioIndicatorClass } from "./radio.cva.js";
-import { CheckContent } from "../shared/CheckContent.js";
-import { UIConfig } from "../../../config/uiConfig.context.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-const RadioGroupBase = (props) => {
-  const ui = UIConfig.useConfig();
-  const uiStyle = UIStyle.useConfig();
-  const radioCva = uiStyle?.radio?.cva ?? radio;
-  const radioTypographyMap = uiStyle?.radio?.typography ?? radioTypography;
-  const {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    error,
-    className,
-    options,
-    variant = ui.radioGroup.variant,
-    hideLabel = ui.radioGroup.hideLabel,
-    ...rest
-  } = props;
-  const formFieldProps = {
-    className,
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden,
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  return /* @__PURE__ */ jsx(
-    RadioGroup$1,
-    {
-      ...rest,
-      isDisabled,
-      isInvalid: !!error,
-      children: /* @__PURE__ */ jsx(FormField, { ...formFieldProps, children: /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: options.map((option) => /* @__PURE__ */ jsxs(
-        Radio,
-        {
-          value: option.value,
-          className: radioIndicatorClass,
-          children: [
-            /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: radioCva({
-                  variant,
-                  ...rest
-                }),
-                children: /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: clsx(
-                      "absolute hidden size-1 rounded-full group-selected:block",
-                      "bg-interactive-contained-primary-on-idle group-hover:bg-interactive-contained-primary-on-hover"
-                    )
-                  }
-                )
-              }
-            ),
-            /* @__PURE__ */ jsx(CheckContent, { typography: radioTypographyMap({ variant, ...rest }), children: option.label })
-          ]
-        },
-        option.value
-      )) }) })
-    }
-  );
-};
-const RadioGroup = (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(
-          RadioGroupBase,
-          {
-            ...innerProps,
-            ref: mergeRefs(ref, field.ref),
-            value: field.value,
-            onChange: field.onChange,
-            onBlur: field.onBlur,
-            name: field.name,
-            isDisabled: field.disabled || props.isDisabled,
-            error: props.error ?? error?.message
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(RadioGroupBase, { ...props });
-};
-export {
-  RadioGroup
-};

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

@@ -1,47 +0,0 @@
-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/dist/components/inputs/Selection/Autocomplete/Autocomplete.js

@@ -1,39 +0,0 @@
-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/dist/components/inputs/Selection/Autocomplete/QueryAutocomplete.js

@@ -1,25 +0,0 @@
-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/dist/components/inputs/Selection/Select/Select.js

@@ -1,32 +0,0 @@
-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/dist/components/inputs/Selection/shared/SelectBase.js

@@ -1,24 +0,0 @@
-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
-  };
-  const isDesktop = useBreakpoint("md");
-  return /* @__PURE__ */ jsx(SelectContext.Provider, { ...props, children: isDesktop ? /* @__PURE__ */ jsx(SelectDesktop, { ...props }) : /* @__PURE__ */ jsx(SelectMobile, { ...props }) });
-};
-export {
-  SelectBase
-};

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

@@ -1,211 +0,0 @@
-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";
-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
-  } = 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(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,
-            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
-};