@povio/ui 0.0.7 → 0.0.8

package/dist/components/inputs/FormField/FormFieldLabel.js

@@ -1,31 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { Label } from "react-aria-components";
-import { labelTypography, labelBase } from "../shared/label.cva.js";
-import { Typography } from "../../text/Typography/Typography.js";
-import { UIStyle } from "../../../config/uiStyle.context.js";
-const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps }) => {
-  const uiStyle = UIStyle.useConfig();
-  const labelTypographyMap = uiStyle?.label?.typography ?? labelTypography;
-  const labelBaseCva = uiStyle?.label?.cva ?? labelBase;
-  return /* @__PURE__ */ jsx(Label, { ...labelProps, children: /* @__PURE__ */ jsxs(
-    Typography,
-    {
-      ref,
-      as: "span",
-      ...{
-        size: "label-2",
-        variant: "prominent-1",
-        ...labelTypographyMap({ as })
-      },
-      className: clsx(labelBaseCva({ as }), labelProps?.className),
-      children: [
-        label,
-        isRequired && /* @__PURE__ */ jsx("span", { className: clsx(!isDisabled && "text-text-error-1"), children: "*" })
-      ]
-    }
-  ) });
-};
-export {
-  FormFieldLabel
-};

package/dist/components/inputs/Input/NumberInput/NumberInput.js

@@ -1,157 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { useRef } from "react";
-import { useNumberField } from "react-aria";
-import { useLocale, Input } from "react-aria-components";
-import { Controller } from "react-hook-form";
-import { useNumberFieldState } from "react-stately";
-import { FormField } from "../../FormField/FormField.js";
-import { InputContent } from "../shared/InputContent.js";
-import { useInputCva } from "../../shared/input.cva.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-const NumberInputBase = (props) => {
-  const ui = UIConfig.useConfig();
-  const inputCva = useInputCva();
-  const {
-    ref,
-    inputClassName,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    error,
-    className,
-    unit,
-    isLoading,
-    action,
-    leadingIcon,
-    trailingIcon,
-    value,
-    onChange,
-    onBlur,
-    formatOptions = ui.numberInput.formatOptions,
-    variant = ui.input.variant,
-    as = ui.input.as,
-    size = ui.input.size,
-    hideLabel = ui.input.hideLabel,
-    isClearable = ui.input.isClearable,
-    ...rest
-  } = props;
-  const numberFieldRef = useRef(null);
-  const { locale } = useLocale();
-  const numberProps = {
-    ...rest,
-    value: value ?? void 0,
-    label,
-    isDisabled,
-    isInvalid: !!error,
-    isRequired,
-    onChange,
-    onBlur,
-    locale,
-    formatOptions
-  };
-  const state = useNumberFieldState(numberProps);
-  const { labelProps, inputProps } = useNumberField(numberProps, state, numberFieldRef);
-  const formFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  const inputContentProps = {
-    unit,
-    isLoading,
-    isDisabled,
-    action,
-    leadingIcon,
-    trailingIcon,
-    isClearable
-  };
-  const headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  return /* @__PURE__ */ jsx(
-    FormField,
-    {
-      ...formFieldProps,
-      as,
-      labelProps,
-      className: clsx("group w-full", className),
-      children: /* @__PURE__ */ jsx(
-        InputContent,
-        {
-          ...inputContentProps,
-          headerProps,
-          as,
-          size,
-          children: (style) => /* @__PURE__ */ jsx(
-            Input,
-            {
-              ...inputProps,
-              ref,
-              placeholder: as === "floating" ? "" : inputProps.placeholder,
-              className: inputCva({
-                variant,
-                as,
-                size,
-                ...rest,
-                className: inputClassName
-              }),
-              style
-            }
-          )
-        }
-      )
-    }
-  );
-};
-const NumberInput = (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(
-          NumberInputBase,
-          {
-            ...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(NumberInputBase, { ...props });
-};
-export {
-  NumberInput
-};

package/dist/components/inputs/Input/PasswordInput/PasswordInput.js

@@ -1,26 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { useState } from "react";
-import { useTranslation } from "react-i18next";
-import { ViewIcon } from "../../../../assets/icons/View.js";
-import { ViewOffIcon } from "../../../../assets/icons/ViewOff.js";
-import { TextInput } from "../TextInput/TextInput.js";
-import { ns } from "../../../../config/i18n.js";
-const PasswordInput = (props) => {
-  const { t } = useTranslation(ns);
-  const [isRevealed, setIsRevealed] = useState(false);
-  return /* @__PURE__ */ jsx(
-    TextInput,
-    {
-      ...props,
-      type: isRevealed ? "text" : "password",
-      action: {
-        icon: isRevealed ? ViewIcon : ViewOffIcon,
-        altText: t(($) => isRevealed ? $.ui.password.hide : $.ui.password.reveal),
-        onClick: () => setIsRevealed(!isRevealed)
-      }
-    }
-  );
-};
-export {
-  PasswordInput
-};

package/dist/components/inputs/Input/TextArea/TextArea.js

@@ -1,149 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { useRef } from "react";
-import { useTextField } from "react-aria";
-import { TextArea as TextArea$1 } from "react-aria-components";
-import { Controller } from "react-hook-form";
-import { FormField } from "../../FormField/FormField.js";
-import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
-import { InputClear } from "../../shared/InputClear.js";
-import { useInputCva } from "../../shared/input.cva.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-const TextAreaBase = (props) => {
-  const ui = UIConfig.useConfig();
-  const inputCva = useInputCva();
-  const {
-    ref,
-    className,
-    inputClassName,
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    value,
-    onChange,
-    onBlur,
-    as = ui.input.as,
-    hideLabel = ui.input.hideLabel,
-    variant = ui.input.variant,
-    isClearable = ui.input.isClearable,
-    ...rest
-  } = props;
-  const textFieldRef = useRef(null);
-  const textFieldProps = {
-    ...rest,
-    label,
-    isDisabled,
-    isInvalid: !!error,
-    isRequired,
-    value,
-    onChange,
-    onBlur
-  };
-  const { labelProps, inputProps } = useTextField(textFieldProps, textFieldRef);
-  const formFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  const headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  const showClear = isClearable && value != null && value !== "";
-  return /* @__PURE__ */ jsx(
-    FormField,
-    {
-      ...formFieldProps,
-      as,
-      labelProps,
-      className: clsx("w-full", className),
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: "group/text-area relative h-full",
-          "data-text-area": true,
-          children: [
-            as === "floating" && headerProps && /* @__PURE__ */ jsx(
-              FormFieldLabel,
-              {
-                as,
-                ...headerProps
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TextArea$1,
-              {
-                ...inputProps,
-                placeholder: as === "floating" ? "" : inputProps.placeholder,
-                className: inputCva({
-                  variant,
-                  as,
-                  ...rest,
-                  className: clsx("block h-full min-h-8", inputClassName)
-                }),
-                ref
-              }
-            ),
-            showClear && /* @__PURE__ */ jsx(
-              InputClear,
-              {
-                onClear: () => onChange?.(""),
-                className: "absolute top-input-side-default right-input-side-default"
-              }
-            )
-          ]
-        }
-      )
-    }
-  );
-};
-const TextArea = (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(
-          TextAreaBase,
-          {
-            ...innerProps,
-            ref: mergeRefs(ref, field.ref),
-            value: field.value ?? "",
-            onChange: field.onChange,
-            isDisabled: field.disabled || props.isDisabled,
-            error: props.error ?? error?.message
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(TextAreaBase, { ...props });
-};
-export {
-  TextArea
-};

package/dist/components/inputs/Input/TextInput/TextInput.js

@@ -1,147 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { mergeRefs } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { useRef } from "react";
-import { useTextField } from "react-aria";
-import { Input } from "react-aria-components";
-import { Controller } from "react-hook-form";
-import { FormField } from "../../FormField/FormField.js";
-import { InputContent } from "../shared/InputContent.js";
-import { useInputCva } from "../../shared/input.cva.js";
-import { UIConfig } from "../../../../config/uiConfig.context.js";
-const TextInputBase = (props) => {
-  const ui = UIConfig.useConfig();
-  const inputCva = useInputCva();
-  const {
-    ref,
-    inputClassName,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    error,
-    className,
-    unit,
-    isLoading,
-    action,
-    leadingIcon,
-    trailingIcon,
-    value,
-    onChange,
-    onBlur,
-    as = ui.input.as,
-    hideLabel = ui.input.hideLabel,
-    variant = ui.input.variant,
-    size = ui.input.size,
-    isClearable = ui.input.isClearable,
-    ...rest
-  } = props;
-  const textFieldRef = useRef(null);
-  const textFieldProps = {
-    ...rest,
-    label,
-    isDisabled,
-    isInvalid: !!error,
-    isRequired,
-    value,
-    onChange,
-    onBlur
-  };
-  const { labelProps, inputProps } = useTextField(textFieldProps, textFieldRef);
-  const formFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
-    hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  const inputContentProps = {
-    unit,
-    isLoading,
-    isDisabled,
-    action,
-    leadingIcon,
-    trailingIcon,
-    isClearable,
-    value,
-    onChange
-  };
-  const headerProps = {
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    rightContent,
-    isHeaderHidden: hideLabel || isHeaderHidden,
-    isDisabled,
-    className: headerClassName,
-    labelProps
-  };
-  return /* @__PURE__ */ jsx(
-    FormField,
-    {
-      ...formFieldProps,
-      as,
-      labelProps,
-      className: clsx("group w-full", className),
-      children: /* @__PURE__ */ jsx(
-        InputContent,
-        {
-          ...inputContentProps,
-          headerProps,
-          as,
-          size,
-          children: (style) => /* @__PURE__ */ jsx(
-            Input,
-            {
-              ...inputProps,
-              ref,
-              placeholder: as === "floating" ? "" : inputProps.placeholder,
-              className: inputCva({ variant, as, size, ...rest, className: inputClassName }),
-              style
-            }
-          )
-        }
-      )
-    }
-  );
-};
-const TextInput = (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(
-          TextInputBase,
-          {
-            ...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(TextInputBase, { ...props });
-};
-export {
-  TextInput
-};

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

@@ -1,106 +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: "group/input-content relative", children: [
-    as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
-      FormFieldLabel,
-      {
-        ref: labelContentRef,
-        as,
-        ...headerProps
-      }
-    ),
-    children(style),
-    LeadingIcon && /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: leadingContentRef,
-        className: clsx(
-          "-translate-y-1/2 absolute top-1/2 left-input-side-default",
-          !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(
-          "-translate-y-1/2 absolute top-1/2 flex 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
-};