@povio/ui 0.0.7 → 0.0.9

package/dist/components/inputs/File/shared/InputUploadContent.js

@@ -1,15 +1,20 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { FileTrigger, DropZone } from "react-aria-components";
 import { useTranslation } from "react-i18next";
 import { UploadIcon } from "../../../../assets/icons/Upload.js";
 import { Button } from "../../../buttons/Button/Button.js";
 import { TextButton } from "../../../buttons/TextButton/TextButton.js";
+import { inputSize } from "../../shared/input.cva.js";
 import { Typography } from "../../../text/Typography/Typography.js";
 import { ns } from "../../../../config/i18n.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 import { inputUploadButton, inputUploadDropZone } from "./inputUploadButton.cva.js";
 const InputUploadContent = (props) => {
   const { variant, isDisabled, error, ...rest } = props;
   const { t } = useTranslation(ns);
+  const uiStyle = UIStyle.useConfig();
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
   return /* @__PURE__ */ jsx(FileTrigger, { ...rest, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -26,7 +31,7 @@ const InputUploadContent = (props) => {
           {
             ...rest,
             isDisabled,
-            className: inputUploadDropZone({ variant }),
+            className: clsx(inputUploadDropZone({ variant }), inputSizeCva({ size: "default" })),
             children: [
               /* @__PURE__ */ jsx(
                 Typography,
@@ -34,7 +39,7 @@ const InputUploadContent = (props) => {
                   variant: "default",
                   size: "label-1",
                   as: "span",
-                  className: "flex-fill select-none overflow-hidden text-ellipsis text-text-default-3",
+                  className: "min-w-0 flex-fill select-none truncate text-text-default-3",
                   children: t(($) => $.ui.fileUpload.emptyText)
                 }
               ),
@@ -43,7 +48,7 @@ const InputUploadContent = (props) => {
                 {
                   isDisabled,
                   icon: UploadIcon,
-                  className: "!p-0",
+                  className: "p-0!",
                   children: t(($) => $.ui.fileUpload.upload)
                 }
               )
@@ -53,9 +58,10 @@ const InputUploadContent = (props) => {
         variant !== "nested" && /* @__PURE__ */ jsx(
           Button,
           {
-            size: "s",
+            size: "m",
             width: "hug",
             isDisabled,
+            className: "truncate",
             children: t(($) => $.ui.fileUpload.uploadFile)
           }
         )

package/dist/components/inputs/File/shared/InputUploadFilled.js

@@ -1,30 +1,44 @@
 import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
 import { CloseIcon } from "../../../../assets/icons/Close.js";
 import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { inputSize } from "../../shared/input.cva.js";
 import { Typography } from "../../../text/Typography/Typography.js";
+import { UIStyle } from "../../../../config/uiStyle.context.js";
 const InputUploadFilled = ({ files, onRemove, isDisabled }) => {
-  return /* @__PURE__ */ jsxs("div", { className: "flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-default", children: [
-    /* @__PURE__ */ jsx(
-      Typography,
-      {
-        variant: "default",
-        size: "label-1",
-        as: "span",
-        className: "flex-fill select-none truncate text-ellipsis text-text-default-1",
-        children: files.map((file) => file.name).join(", ")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      InlineIconButton,
-      {
-        label: "Remove files",
-        color: "secondary",
-        icon: CloseIcon,
-        isDisabled,
-        onPress: onRemove
-      }
-    )
-  ] });
+  const uiStyle = UIStyle.useConfig();
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: clsx(
+        "flex items-center rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle",
+        inputSizeCva({ size: "default" })
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "default",
+            size: "label-1",
+            as: "span",
+            className: "flex-fill select-none truncate text-ellipsis text-text-default-1",
+            children: files.map((file) => file.name).join(", ")
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          InlineIconButton,
+          {
+            label: "Remove files",
+            color: "secondary",
+            icon: CloseIcon,
+            isDisabled,
+            onPress: onRemove
+          }
+        )
+      ]
+    }
+  );
 };
 export {
   InputUploadFilled

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

@@ -1,4 +1,5 @@
-import { cx, cva } from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
 const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-default"], {
   variants: {
     variant: {
@@ -38,7 +39,7 @@ const fileUploadDropZoneBase = cva(["relative w-full rounded-input-rounding-defa
 });
 const fileUploadDropZone = (props) => {
   const { className, ...rest } = props;
-  return cx(fileUploadDropZoneBase(rest), className);
+  return clsx(fileUploadDropZoneBase(rest), className);
 };
 cva(["flex gap-3"], {
   variants: {

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

@@ -1,4 +1,5 @@
-import { cva, cx } from "class-variance-authority";
+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"],
   {
@@ -15,11 +16,11 @@ const inputUploadButtonBase = cva(
 );
 const inputUploadButton = (props) => {
   const { className, ...rest } = props;
-  return cx(inputUploadButtonBase(rest), className);
+  return clsx(inputUploadButtonBase(rest), className);
 };
 const inputUploadDropZone = cva(
   [
-    "flex-1",
+    "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",
@@ -29,10 +30,10 @@ const inputUploadDropZone = cva(
     variants: {
       variant: {
         default: [
-          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle px-input-side-default py-input-height-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 px-input-side-default py-input-height-default"
+          "rounded-input-rounding-default border border-input-outlined-outline-idle border-solid bg-input-outlined-idle"
         ]
       }
     },

package/dist/components/inputs/FormField/FormFieldLabel.d.ts

@@ -1,11 +1,12 @@
 import { DOMAttributes } from '@react-types/shared';
 import { RefCallback } from 'react';
+import { InputSizeProps } from '../shared/input.cva';
 import { LabelBaseProps } from '../shared/label.cva';
-export interface FormFieldLabelProps extends LabelBaseProps {
+export interface FormFieldLabelProps extends LabelBaseProps, InputSizeProps {
     label: string;
     isRequired?: boolean;
     isDisabled?: boolean;
     ref?: RefCallback<HTMLOrSVGElement>;
     labelProps?: DOMAttributes<HTMLLabelElement>;
 }
-export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const FormFieldLabel: ({ ref, as, label, isRequired, isDisabled, labelProps, size }: FormFieldLabelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,15 @@
 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 }) => {
+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,
     {
@@ -18,7 +20,11 @@ const FormFieldLabel = ({ ref, as, label, isRequired, isDisabled, labelProps })
         variant: "prominent-1",
         ...labelTypographyMap({ as })
       },
-      className: clsx(labelBaseCva({ as }), labelProps?.className),
+      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: "*" })

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

@@ -8,11 +8,14 @@ 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 { 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,
@@ -72,7 +75,7 @@ const TextAreaBase = (props) => {
     className: headerClassName,
     labelProps
   };
-  const showClear = isClearable && value != null && value !== "";
+  const showClear = isClearable && !!value;
   return /* @__PURE__ */ jsx(
     FormField,
     {
@@ -107,13 +110,7 @@ const TextAreaBase = (props) => {
                 ref
               }
             ),
-            showClear && /* @__PURE__ */ jsx(
-              InputClear,
-              {
-                onClear: () => onChange?.(""),
-                className: "absolute top-input-side-default right-input-side-default"
-              }
-            )
+            showClear && /* @__PURE__ */ jsx("span", { className: clsx("absolute top-0 right-0", inputSizeCva({ size: "default" })), children: /* @__PURE__ */ jsx(InputClear, { onClear: () => onChange?.("") }) })
           ]
         }
       )

package/dist/components/inputs/Input/TextInput/TextInput.d.ts

@@ -11,6 +11,7 @@ interface TextInputBaseProps extends FormFieldProps, InputVariantProps, Omit<Inp
     ref?: Ref<HTMLInputElement>;
     inputClassName?: string;
     type?: AllowedHTMLInputTypeAttribute;
+    todayIcon?: boolean;
 }
 export interface TextInputProps extends TextInputBaseProps {
 }

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

@@ -8,7 +8,24 @@ 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 { Tooltip } from "../../../overlays/Tooltip/Tooltip.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
+const TooltipWrapper = (props) => {
+  if (props.as !== "inline") {
+    return props.children;
+  }
+  return /* @__PURE__ */ jsx(
+    Tooltip,
+    {
+      text: props.error || void 0,
+      placement: "bottom",
+      color: "error",
+      hidden: !props.error,
+      isNonInteractiveTrigger: true,
+      children: /* @__PURE__ */ jsx("div", { children: props.children })
+    }
+  );
+};
 const TextInputBase = (props) => {
   const ui = UIConfig.useConfig();
   const inputCva = useInputCva();
@@ -88,13 +105,19 @@ const TextInputBase = (props) => {
     className: headerClassName,
     labelProps
   };
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(TooltipWrapper, { ...props, children: /* @__PURE__ */ jsx(
     FormField,
     {
       ...formFieldProps,
       as,
       labelProps,
-      className: clsx("group w-full", className),
+      className: clsx(
+        "group w-full",
+        {
+          "h-full": as === "inline"
+        },
+        className
+      ),
       children: /* @__PURE__ */ jsx(
         InputContent,
         {
@@ -115,7 +138,7 @@ const TextInputBase = (props) => {
         }
       )
     }
-  );
+  ) });
 };
 const TextInput = (props) => {
   if ("formControl" in props && props.formControl) {

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

@@ -39,67 +39,75 @@ const InputContent = ({
       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" })
+  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: 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(style),
+        LeadingIcon && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: leadingContentRef,
+            className: clsx(
+              "-translate-y-1/2 absolute top-1/2",
+              !isLeadingIconElement && "pointer-events-none",
+              inputSideCva({ size, type: "left" })
+            ),
+            children: isLeadingIconElement ? LeadingIcon : /* @__PURE__ */ jsx(LeadingIcon, { className: "size-6 text-interactive-text-secondary-idle" })
+          }
         ),
-        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" }))
-        ]
-      }
-    )
-  ] });
+        /* @__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/Selection/shared/SelectBase.d.ts

@@ -2,9 +2,9 @@ import { ReactElement, Ref } from 'react';
 import { AriaButtonProps } from 'react-aria';
 import { Key } from 'react-aria-components';
 import { FormFieldProps } from '../../FormField/FormField';
-import { DefaultInitialSelectItem, GroupedSelectProps, SelectAsyncProps, SelectItem, SelectNewItemProps } from './select.types';
+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 & InputVariantProps & Pick<AriaButtonProps, "onBlur"> & {
+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;
     placeholder?: string;
@@ -17,6 +17,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     inputClassName?: string;
     containerClassName?: string;
     customTrigger?: ReactElement;
+    selectedTagsType?: "tags" | "list";
     onInputChange?: (value: string) => void;
     onSearchChange?: (value: string) => void;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;

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

@@ -14,7 +14,8 @@ const SelectBase = (dProps) => {
     size: dProps.size ?? ui.input.size,
     hideLabel: dProps.hideLabel ?? ui.input.hideLabel,
     isClearable: dProps.isClearable ?? ui.input.isClearable,
-    isSearchable: dProps.isSearchable ?? ui.select.isSearchable
+    isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
+    selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType
   };
   const isDesktop = useBreakpoint("md");
   return /* @__PURE__ */ jsx(SelectContext.Provider, { ...props, children: isDesktop ? /* @__PURE__ */ jsx(SelectDesktop, { ...props }) : /* @__PURE__ */ jsx(SelectMobile, { ...props }) });

package/dist/components/inputs/Selection/shared/SelectInput.d.ts

@@ -4,12 +4,12 @@ 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"> {
+interface SelectInputProps extends InputVariantProps, Pick<SelectBaseProps, "ref" | "placeholder" | "isDisabled" | "hideDropdownIcon" | "isSearchable" | "isClearable" | "onBlur" | "showSelectionContent" | "inputClassName" | "selectedTagsType"> {
     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, 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, onCloseComboBox, onBlur, ...props }: SelectInputProps) => import("react/jsx-runtime").JSX.Element;
 export {};