@povio/ui 2.1.14 → 2.1.15

package/dist/components/inputs/Input/shared/InputContent.js

@@ -1,114 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { isValidElement, useMemo } from "react";
-import useMeasure from "react-use-measure";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
-import { InputClear } from "../../shared/InputClear.js";
-import { inputSide } from "../../shared/input.cva.js";
-import { Loader } from "../../../status/Loader/Loader.js";
-import { Typography } from "../../../text/Typography/Typography.js";
-import { UIStyle } from "../../../../config/uiStyle.context.js";
-const InputContent = ({
-  leadingIcon: LeadingIcon,
-  trailingIcon: TrailingIcon,
-  unit,
-  isLoading,
-  isDisabled,
-  action,
-  isClearable,
-  value,
-  onChange,
-  children,
-  headerProps,
-  as,
-  size
-}) => {
-  const uiStyle = UIStyle.useConfig();
-  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
-  const [leadingContentRef, { width: leadingWidth }] = useMeasure();
-  const [trailingContentRef, { width: trailingWidth }] = useMeasure();
-  const [labelContentRef, { width: labelWidth }] = useMeasure();
-  const isLeadingIconElement = LeadingIcon && isValidElement(LeadingIcon);
-  const isTrailingIconElement = TrailingIcon && isValidElement(TrailingIcon);
-  const showClear = isClearable && !!value;
-  const style = useMemo(() => {
-    const leftPadding = as === "filter" ? labelWidth + leadingWidth : leadingWidth;
-    return {
-      paddingLeft: `calc(var(${inputSideCva({ size, type: "var" })}) + ${leftPadding}px + ${leftPadding > 0 ? "var(--spacing-2)" : "0px"})`,
-      paddingRight: `calc(var(${inputSideCva({ size, type: "var" })}) + ${trailingWidth}px + ${trailingWidth > 0 ? "var(--spacing-2)" : "0px"})`
-    };
-  }, [leadingWidth, trailingWidth, labelWidth, as, size, inputSideCva]);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: clsx("group/input-content relative", {
-        "h-full": as === "inline"
-      }),
-      children: [
-        as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
-          FormFieldLabel,
-          {
-            ref: labelContentRef,
-            as,
-            ...headerProps
-          }
-        ),
-        children(style),
-        LeadingIcon && /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref: leadingContentRef,
-            className: clsx(
-              "absolute top-1/2 -translate-y-1/2",
-              !isLeadingIconElement && "pointer-events-none",
-              inputSideCva({ size, type: "left" })
-            ),
-            children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            ref: trailingContentRef,
-            className: clsx(
-              "absolute top-1/2 flex -translate-y-1/2 items-center gap-2",
-              !isTrailingIconElement && !action && !showClear && "pointer-events-none",
-              inputSideCva({ size, type: "right" })
-            ),
-            children: [
-              showClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => onChange?.("") }),
-              unit && /* @__PURE__ */ jsx(
-                Typography,
-                {
-                  as: "span",
-                  size: "label-2",
-                  variant: "prominent-1",
-                  className: "text-text-default-3",
-                  children: unit
-                }
-              ),
-              isLoading && /* @__PURE__ */ jsx("div", { className: "inline-flex", children: /* @__PURE__ */ jsx(Loader, {}) }),
-              !isLoading && action && /* @__PURE__ */ jsx(
-                InlineIconButton,
-                {
-                  color: "secondary",
-                  icon: action.icon,
-                  isDisabled,
-                  onPress: action.onClick,
-                  excludeFromTabOrder: true,
-                  label: action.altText,
-                  className: action.className
-                }
-              ),
-              !isLoading && !action && TrailingIcon && (isTrailingIconElement ? TrailingIcon : /* @__PURE__ */ jsx(TrailingIcon, { className: "size-6 text-interactive-text-secondary-idle" }))
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  InputContent
-};

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

@@ -1,68 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
-import { z } from "zod";
-import { InputItem } from "./InputItem.js";
-import { getDefaultInputComponentType } from "../../../helpers/dynamicInputs.js";
-import { StringUtils } from "../../../utils/string.utils.js";
-import { ZodUtils } from "../../../utils/zod.utils.js";
-const createFieldComponent = (field, schemaKeyType, form) => {
-  return function FieldComponent({
-    inputType,
-    label,
-    placeholder,
-    ...inputProps
-  }) {
-    const name = field;
-    const type = inputType ?? getDefaultInputComponentType(schemaKeyType);
-    const unwrappedKeyType = ZodUtils.unwrapZodType(schemaKeyType);
-    const defaultProps = unwrappedKeyType instanceof z.ZodArray ? { selectionMode: "multiple" } : {};
-    const inputDef = {
-      name,
-      type,
-      label,
-      placeholder,
-      props: { ...defaultProps, ...inputProps }
-    };
-    return /* @__PURE__ */ jsx(
-      InputItem,
-      {
-        form,
-        inputDef
-      }
-    );
-  };
-};
-function Form({
-  form,
-  schema,
-  onSubmit,
-  onError,
-  className,
-  children
-}) {
-  const components = useMemo(() => {
-    const fieldComponents = {};
-    const fields = Object.keys(schema.shape);
-    for (const field of fields) {
-      const componentName = StringUtils.capitalize(String(field));
-      const schemaKeyType = schema.shape[field];
-      fieldComponents[componentName] = createFieldComponent(
-        field,
-        schemaKeyType,
-        form
-      );
-    }
-    return fieldComponents;
-  }, [schema.shape, form]);
-  return /* @__PURE__ */ jsx(
-    "form",
-    {
-      onSubmit: form.handleSubmit(onSubmit, onError),
-      className,
-      children: children(components)
-    }
-  );
-}
-export {
-  Form
-};

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

@@ -1,61 +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 { 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,
-  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,103 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-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
-                })
-              }
-            ),
-            /* @__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,57 +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",
-    "before:absolute before:hidden before:size-1 before:rounded-full",
-    uiGroupOutlineClass
-  ],
-  {
-    variants: {
-      variant: {
-        default: [
-          "border-interactive-outlined-secondary-on-idle",
-          "group-disabled:border-interactive-outlined-secondary-on-disabled",
-          "group-hover:border-interactive-outlined-secondary-on-hover",
-          "group-pressed:border-interactive-outlined-secondary-on-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-selected:group-disabled:bg-interactive-contained-primary-disabled",
-          "group-selected:group-disabled:border-interactive-contained-primary-disabled",
-          "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-outlined-error-on-idle",
-          "group-focus-visible:outline-interactive-contained-primary-focus",
-          "before:bg-interactive-contained-primary-on-idle",
-          "group-hover:before:bg-interactive-contained-primary-on-hover",
-          "group-selected:before:block"
-        ]
-      }
-    },
-    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,27 +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,
-    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
-};