@povio/ui 0.0.8 → 0.0.9

package/dist/components/inputs/File/shared/inputUploadButton.cva.js

@@ -0,0 +1,49 @@
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+const inputUploadButtonBase = cva(
+  ["flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap"],
+  {
+    variants: {
+      variant: {
+        default: [],
+        nested: []
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const inputUploadButton = (props) => {
+  const { className, ...rest } = props;
+  return clsx(inputUploadButtonBase(rest), className);
+};
+const inputUploadDropZone = cva(
+  [
+    "min-w-0 flex-1",
+    "flex items-center",
+    "group-data-[invalid]/input-upload:border group-data-[invalid]/input-upload:border-input-outlined-outline-error",
+    "data-[drop-target]:border-input-outlined-outline-hover",
+    "hover:border-input-outlined-outline-hover"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"
+        ],
+        nested: [
+          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+export {
+  inputUploadButton,
+  inputUploadButtonBase,
+  inputUploadDropZone
+};

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

@@ -1,7 +1,7 @@
 import { PropsWithChildren, Ref } from 'react';
-import { FormFieldErrorProps } from '#ui/components/inputs/FormField/FormFieldError';
-import { FormFieldHeaderProps } from '#ui/components/inputs/FormField/FormFieldHeader';
-import { TextInputProps } from '#ui/components/inputs/Input/TextInput/TextInput';
+import { FormFieldErrorProps } from './FormFieldError';
+import { FormFieldHeaderProps } from './FormFieldHeader';
+import { TextInputProps } from '../Input/TextInput/TextInput';
 export interface FormFieldProps extends Omit<FormFieldHeaderProps, "className" | "labelProps">, Omit<FormFieldErrorProps, "className"> {
     hideLabel?: boolean;
     headerClassName?: string;

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

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { FormFieldError } from "./FormFieldError.js";
+import { FormFieldHeader } from "./FormFieldHeader.js";
+const FormField = ({
+  ref,
+  as,
+  label,
+  tooltipText,
+  helperText,
+  isRequired,
+  rightContent,
+  isDisabled,
+  error,
+  hideLabel,
+  headerClassName,
+  errorClassName,
+  children,
+  className,
+  labelProps,
+  isHeaderHidden
+}) => {
+  const headerProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps
+  };
+  const errorProps = {
+    error,
+    isDisabled,
+    isHidden: isHeaderHidden,
+    className: errorClassName
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className,
+      children: [
+        !["filter", "floating"].includes(as ?? "") && /* @__PURE__ */ jsx(FormFieldHeader, { ...headerProps }),
+        children,
+        /* @__PURE__ */ jsx(FormFieldError, { ...errorProps })
+      ]
+    }
+  );
+};
+export {
+  FormField
+};

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

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Typography } from "../../text/Typography/Typography.js";
+const FormFieldError = ({ error, isDisabled, isHidden, className }) => {
+  return /* @__PURE__ */ jsx(
+    Typography,
+    {
+      className: clsx("text-text-error-1", !error || isDisabled || isHidden ? "sr-only" : "mt-1-5", className),
+      size: "label-3",
+      children: error
+    }
+  );
+};
+export {
+  FormFieldError
+};

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

@@ -0,0 +1,57 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Focusable } from "react-aria-components";
+import { InfoIcon } from "../../../assets/icons/Info.js";
+import { FormFieldLabel } from "./FormFieldLabel.js";
+import { Tooltip } from "../../overlays/Tooltip/Tooltip.js";
+import { Typography } from "../../text/Typography/Typography.js";
+const FormFieldHeader = ({
+  label,
+  tooltipText,
+  helperText,
+  isRequired,
+  rightContent,
+  isHeaderHidden,
+  isDisabled,
+  className,
+  labelProps
+}) => {
+  return /* @__PURE__ */ jsxs("div", { className: clsx(isHeaderHidden ? "sr-only" : "mb-1", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-1", children: [
+        /* @__PURE__ */ jsx(
+          FormFieldLabel,
+          {
+            label,
+            isRequired,
+            isDisabled,
+            labelProps
+          }
+        ),
+        tooltipText && /* @__PURE__ */ jsx(Tooltip, { text: tooltipText, children: /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(
+          InfoIcon,
+          {
+            className: clsx(
+              "size-6",
+              isDisabled ? "text-interactive-text-secondary-disabled" : "text-interactive-text-secondary-idle hover:text-interactive-text-secondary-hover"
+            ),
+            tabIndex: 0
+          }
+        ) }) })
+      ] }),
+      rightContent
+    ] }),
+    helperText && /* @__PURE__ */ jsx(
+      Typography,
+      {
+        slot: "description",
+        size: "label-2",
+        className: clsx(isDisabled ? "text-interactive-3" : "text-text-default-2"),
+        children: helperText
+      }
+    )
+  ] });
+};
+export {
+  FormFieldHeader
+};

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

@@ -0,0 +1,20 @@
+import { jsx } from "react/jsx-runtime";
+import { Button } from "react-aria-components";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { ns } from "../../../config/i18n.js";
+const FormFieldHeaderClose = ({ onClose }) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      onPress: onClose,
+      "aria-label": t(($) => $.ui.closeAlt),
+      className: "shrink-0 focus-visible:outline-interactive-text-secondary-focus",
+      children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+    }
+  );
+};
+export {
+  FormFieldHeaderClose
+};

package/{src → dist}/components/inputs/FormField/FormFieldLabel.d.ts

@@ -1,7 +1,7 @@
 import { DOMAttributes } from '@react-types/shared';
 import { RefCallback } from 'react';
-import { InputSizeProps } from '#ui/components/inputs/shared/input.cva';
-import { LabelBaseProps } from '#ui/components/inputs/shared/label.cva';
+import { InputSizeProps } from '../shared/input.cva';
+import { LabelBaseProps } from '../shared/label.cva';
 export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     label: string;
     isRequired?: boolean;

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

@@ -0,0 +1,37 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Label } from "react-aria-components";
+import { inputSide } from "../shared/input.cva.js";
+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, size }) => {
+  const uiStyle = UIStyle.useConfig();
+  const labelTypographyMap = uiStyle?.label?.typography ?? labelTypography;
+  const labelBaseCva = uiStyle?.label?.cva ?? labelBase;
+  const inputSideCva = uiStyle?.input?.sideCva ?? inputSide;
+  return /* @__PURE__ */ jsx(Label, { ...labelProps, children: /* @__PURE__ */ jsxs(
+    Typography,
+    {
+      ref,
+      as: "span",
+      ...{
+        size: "label-2",
+        variant: "prominent-1",
+        ...labelTypographyMap({ as })
+      },
+      className: clsx(
+        labelBaseCva({ as }),
+        as && ["filter", "floating"].includes(as) && inputSideCva({ size, type: "left" }),
+        labelProps?.className
+      ),
+      children: [
+        label,
+        isRequired && /* @__PURE__ */ jsx("span", { className: clsx(!isDisabled && "text-text-error-1"), children: "*" })
+      ]
+    }
+  ) });
+};
+export {
+  FormFieldLabel
+};

package/{src → dist}/components/inputs/Input/NumberInput/NumberInput.d.ts

@@ -1,10 +1,10 @@
 import { Ref } from 'react';
 import { NumberFieldProps as AriaNumberFieldProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { InputContentProps } from '#ui/components/inputs/Input/shared/InputContent';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+import { FormFieldProps } from '../../FormField/FormField';
+import { InputContentProps } from '../shared/InputContent';
+import { ControlProps } from '../../shared/form.types';
+import { InputVariantProps } from '../../shared/input.cva';
 interface NumberInputBaseProps extends FormFieldProps, InputVariantProps, Omit<InputContentProps, "ref" | "value" | "onChange">, Omit<AriaNumberFieldProps, "value" | "onChange" | "className"> {
     ref?: Ref<HTMLInputElement>;
     placeholder?: string;

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

@@ -0,0 +1,157 @@
+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/{src → dist}/components/inputs/Input/PasswordInput/PasswordInput.d.ts

@@ -1,6 +1,6 @@
 import { FieldValues } from 'react-hook-form';
-import { TextInputProps } from '#ui/components/inputs/Input/TextInput/TextInput';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
+import { TextInputProps } from '../TextInput/TextInput';
+import { ControlProps } from '../../shared/form.types';
 export interface PasswordInputProps extends Omit<TextInputProps, "type" | "action" | "trailingIcon" | "unit"> {
 }
 export type ControlledPasswordInputProps<TFieldValues extends FieldValues> = ControlProps<PasswordInputProps, TFieldValues>;

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

@@ -0,0 +1,26 @@
+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/{src → dist}/components/inputs/Input/TextArea/TextArea.d.ts

@@ -2,9 +2,9 @@ import { Ref } from 'react';
 import { AriaTextFieldProps } from 'react-aria';
 import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+import { FormFieldProps } from '../../FormField/FormField';
+import { ControlProps } from '../../shared/form.types';
+import { InputVariantProps } from '../../shared/input.cva';
 interface TextAreaBaseProps extends FormFieldProps, InputVariantProps, Omit<AriaTextAreaProps, "value" | "defaultValue" | "onChange" | "disabled" | "required" | "className" | keyof AriaTextFieldProps>, Omit<AriaTextFieldProps<HTMLTextAreaElement>, "label"> {
     ref?: Ref<HTMLTextAreaElement>;
     isClearable?: boolean;

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

@@ -0,0 +1,146 @@
+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, inputSize } from "../../shared/input.cva.js";
+import { UIConfig } from "../../../../config/uiConfig.context.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
+const TextAreaBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const inputCva = useInputCva();
+  const uiStyle = UIStyle.useConfig();
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+  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;
+  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("span", { className: clsx("absolute top-0 right-0", inputSizeCva({ size: "default" })), children: /* @__PURE__ */ jsx(InputClear, { onClear: () => onChange?.("") }) })
+          ]
+        }
+      )
+    }
+  );
+};
+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/{src → dist}/components/inputs/Input/TextInput/TextInput.d.ts

@@ -2,10 +2,10 @@ import { Ref } from 'react';
 import { AriaTextFieldProps } from 'react-aria';
 import { InputProps as AriaInputProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldProps } from '#ui/components/inputs/FormField/FormField';
-import { InputContentProps } from '#ui/components/inputs/Input/shared/InputContent';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
-import { InputVariantProps } from '#ui/components/inputs/shared/input.cva';
+import { FormFieldProps } from '../../FormField/FormField';
+import { InputContentProps } from '../shared/InputContent';
+import { ControlProps } from '../../shared/form.types';
+import { InputVariantProps } from '../../shared/input.cva';
 type AllowedHTMLInputTypeAttribute = "email" | "hidden" | "tel" | "text" | "url";
 interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<InputContentProps, "ref" | "value" | "onChange">, Omit<AriaInputProps, "value" | "defaultValue" | "onChange" | "disabled" | "required" | "type" | "size" | "className" | keyof AriaTextFieldProps>, Omit<AriaTextFieldProps<HTMLInputElement>, "label"> {
     ref?: Ref<HTMLInputElement>;