@povio/ui 0.0.9 → 0.1.0

package/dist/components/inputs/DateTime/shared/DatePickerInput.js

@@ -92,6 +92,7 @@ const DatePickerInput = ({
       "data-hovered": isHovered || void 0,
       "data-disabled": isDisabled || void 0,
       "data-invalid": isInvalid || void 0,
+      "data-is-empty": fieldProps.value === null || void 0,
       "data-focus-within": isFocused || void 0,
       "data-focus-visible": isFocused && isFocusVisible || void 0,
       "data-has-selection": fieldProps.value !== null || void 0,

package/dist/components/inputs/DateTime/shared/TimePickerInput.js

@@ -58,6 +58,7 @@ const TimePickerInput = ({
       "data-hovered": isHovered || void 0,
       "data-disabled": isDisabled || void 0,
       "data-invalid": isInvalid || void 0,
+      "data-is-empty": state.value === null || void 0,
       "data-focus-within": isFocused || void 0,
       "data-focus-visible": isFocused && isFocusVisible || void 0,
       "data-has-selection": state.value !== null || void 0,

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

@@ -70,7 +70,7 @@ const FileUploadContentEmpty = ({
                   children: uploadText
                 }
               ),
-              !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(TextButton, { className: "[&>span>span]:!font-medium text-interactive-text-primary-idle lowercase", children: browseText }) : /* @__PURE__ */ jsx(
+              !hideButton && browseText && (as === "link" ? /* @__PURE__ */ jsx(TextButton, { className: "text-interactive-text-primary-idle lowercase", children: browseText }) : /* @__PURE__ */ jsx(
                 Button,
                 {
                   variant: "outlined",

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

@@ -9,6 +9,7 @@ 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 { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 const NumberInputBase = (props) => {
   const ui = UIConfig.useConfig();
@@ -93,33 +94,41 @@ const NumberInputBase = (props) => {
     labelProps
   };
   return /* @__PURE__ */ jsx(
-    FormField,
+    TooltipWrapper,
     {
-      ...formFieldProps,
       as,
-      labelProps,
-      className: clsx("group w-full", className),
+      error,
       children: /* @__PURE__ */ jsx(
-        InputContent,
+        FormField,
         {
-          ...inputContentProps,
-          headerProps,
+          ...formFieldProps,
           as,
-          size,
-          children: (style) => /* @__PURE__ */ jsx(
-            Input,
+          labelProps,
+          className: clsx("group w-full", className),
+          children: /* @__PURE__ */ jsx(
+            InputContent,
             {
-              ...inputProps,
-              ref,
-              placeholder: as === "floating" ? "" : inputProps.placeholder,
-              className: inputCva({
-                variant,
-                as,
-                size,
-                ...rest,
-                className: inputClassName
-              }),
-              style
+              ...inputContentProps,
+              headerProps,
+              as,
+              size,
+              children: (style) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...inputProps,
+                  ref,
+                  "data-is-empty": value === null || value === void 0 || void 0,
+                  placeholder: as === "floating" ? "" : inputProps.placeholder,
+                  className: inputCva({
+                    variant,
+                    as,
+                    size,
+                    ...rest,
+                    className: inputClassName
+                  }),
+                  style
+                }
+              )
             }
           )
         }

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

@@ -9,6 +9,7 @@ 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 { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 import { UIConfig } from "../../../../config/uiConfig.context.js";
 import { UIStyle } from "../../../../config/uiStyle.context.js";
 const TextAreaBase = (props) => {
@@ -77,41 +78,49 @@ const TextAreaBase = (props) => {
   };
   const showClear = isClearable && !!value;
   return /* @__PURE__ */ jsx(
-    FormField,
+    TooltipWrapper,
     {
-      ...formFieldProps,
       as,
-      labelProps,
-      className: clsx("w-full", className),
-      children: /* @__PURE__ */ jsxs(
-        "div",
+      error,
+      children: /* @__PURE__ */ jsx(
+        FormField,
         {
-          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?.("") }) })
-          ]
+          ...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,
+                    "data-is-empty": value?.trim() === "" || value === null || value === void 0 || void 0,
+                    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?.("") }) })
+              ]
+            }
+          )
         }
       )
     }

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

@@ -8,24 +8,8 @@ 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 { TooltipWrapper } from "../../shared/TooltipWrapper.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();
@@ -105,40 +89,48 @@ const TextInputBase = (props) => {
     className: headerClassName,
     labelProps
   };
-  return /* @__PURE__ */ jsx(TooltipWrapper, { ...props, children: /* @__PURE__ */ jsx(
-    FormField,
+  return /* @__PURE__ */ jsx(
+    TooltipWrapper,
     {
-      ...formFieldProps,
       as,
-      labelProps,
-      className: clsx(
-        "group w-full",
-        {
-          "h-full": as === "inline"
-        },
-        className
-      ),
+      error,
       children: /* @__PURE__ */ jsx(
-        InputContent,
+        FormField,
         {
-          ...inputContentProps,
-          headerProps,
+          ...formFieldProps,
           as,
-          size,
-          children: (style) => /* @__PURE__ */ jsx(
-            Input,
+          labelProps,
+          className: clsx(
+            "group w-full",
             {
-              ...inputProps,
-              ref,
-              placeholder: as === "floating" ? "" : inputProps.placeholder,
-              className: inputCva({ variant, as, size, ...rest, className: inputClassName }),
-              style
+              "h-full": as === "inline"
+            },
+            className
+          ),
+          children: /* @__PURE__ */ jsx(
+            InputContent,
+            {
+              ...inputContentProps,
+              headerProps,
+              as,
+              size,
+              children: (style) => /* @__PURE__ */ jsx(
+                Input,
+                {
+                  ...inputProps,
+                  ref,
+                  "data-is-empty": value === "" || value === null || value === void 0 || void 0,
+                  placeholder: as === "floating" ? "" : inputProps.placeholder,
+                  className: inputCva({ variant, as, size, ...rest, className: inputClassName }),
+                  style
+                }
+              )
             }
           )
         }
       )
     }
-  ) });
+  );
 };
 const TextInput = (props) => {
   if ("formControl" in props && props.formControl) {

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

@@ -18,6 +18,7 @@ export type SelectBaseProps<TKey extends Key = Key, TInitialSelectItem = Default
     containerClassName?: string;
     customTrigger?: ReactElement;
     selectedTagsType?: "tags" | "list";
+    collapseAfter?: number;
     onInputChange?: (value: string) => void;
     onSearchChange?: (value: string) => void;
     mapInitialToSelectItem?: (item: TInitialSelectItem) => SelectItem<TKey>;

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

@@ -15,7 +15,9 @@ const SelectBase = (dProps) => {
     hideLabel: dProps.hideLabel ?? ui.input.hideLabel,
     isClearable: dProps.isClearable ?? ui.input.isClearable,
     isSearchable: dProps.isSearchable ?? ui.select.isSearchable,
-    selectedTagsType: dProps.selectedTagsType ?? ui.select.selectedTagsType
+    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 }) });

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

@@ -10,6 +10,7 @@ import { SelectInput } from "./SelectInput.js";
 import { SelectListBox } from "./SelectListBox.js";
 import { SelectContext } from "./select.context.js";
 import { SelectAllItemId } from "./useSelectItems.js";
+import { TooltipWrapper } from "../../shared/TooltipWrapper.js";
 const SelectDesktop = ({
   ref,
   error,
@@ -40,7 +41,9 @@ const SelectDesktop = ({
     isClearable,
     isLoading,
     as,
-    size
+    size,
+    collapseAfter,
+    selectedTagsType
   } = props;
   const formFieldProps = {
     error,
@@ -139,72 +142,81 @@ const SelectDesktop = ({
     () => listItems.filter((item) => !item.isSelectAllItem).length > 0 || isLoading,
     [listItems, isLoading]
   );
-  return /* @__PURE__ */ jsx(WrapperComponent, { ...isSearchable ? comboBoxProps : {}, children: /* @__PURE__ */ jsxs(
-    FormField,
+  return /* @__PURE__ */ jsx(
+    TooltipWrapper,
     {
-      ...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;
+      error,
+      children: /* @__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,
+                collapseAfter,
+                selectedTagsType,
+                onBlur,
+                onCloseComboBox: (state) => {
+                  if (isSearchable) {
+                    closeComboBoxRef.current = state;
+                  }
+                },
+                fieldProps,
+                headerProps
               }
-            },
-            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,
+            ),
+            (!isSearchable || showPopover) && /* @__PURE__ */ jsx(
+              Popover,
               {
-                ...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
+                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

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

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

@@ -31,6 +31,7 @@ const SelectInput = ({
   fieldProps,
   headerProps,
   selectedTagsType,
+  collapseAfter,
   onCloseComboBox,
   onBlur,
   ...props
@@ -113,6 +114,7 @@ const SelectInput = ({
       "data-has-selection": !isEmpty || void 0,
       "data-has-search": fieldState.searchValue !== "" || void 0,
       "data-invalid": isInvalid || void 0,
+      "data-is-empty": isEmpty || void 0,
       ...hoverProps,
       ...focusWithinProps,
       children: [
@@ -137,6 +139,7 @@ const SelectInput = ({
                   {
                     selectedItems,
                     isDisabled,
+                    collapseAfter,
                     selectedTagsType,
                     onRemove
                   }

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

@@ -5,7 +5,8 @@ interface SelectInputTagsProps {
     selectedItems: SelectItem[];
     isDisabled: SelectBaseProps["isDisabled"];
     selectedTagsType: SelectBaseProps["selectedTagsType"];
+    collapseAfter?: SelectBaseProps["collapseAfter"];
     onRemove: (id: Key) => void;
 }
-export declare const SelectInputTags: ({ selectedItems, isDisabled, selectedTagsType, onRemove }: SelectInputTagsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectInputTags: ({ selectedItems, isDisabled, selectedTagsType, collapseAfter, onRemove, }: SelectInputTagsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,21 +1,48 @@
-import { jsx, Fragment } from "react/jsx-runtime";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
 import { Tag } from "../../../text/Tag/Tag.js";
-const SelectInputTags = ({ selectedItems, isDisabled, selectedTagsType, onRemove }) => {
-  if (selectedTagsType !== "tags") {
-    return /* @__PURE__ */ jsx("p", { children: selectedItems.map((item) => item.label).join(", ") });
+const SelectInputTags = ({
+  selectedItems,
+  isDisabled,
+  selectedTagsType,
+  collapseAfter,
+  onRemove
+}) => {
+  const { displayedItems, remainingCount } = useMemo(() => {
+    if (!collapseAfter || selectedItems.length <= collapseAfter) {
+      return { displayedItems: selectedItems, remainingCount: 0 };
+    }
+    return {
+      displayedItems: selectedItems.slice(0, collapseAfter - 1),
+      remainingCount: selectedItems.length - (collapseAfter - 1)
+    };
+  }, [selectedItems, collapseAfter]);
+  if (selectedTagsType === "tags") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      displayedItems.map((item) => /* @__PURE__ */ jsx(
+        Tag,
+        {
+          dismissable: true,
+          isDisabled,
+          onDismiss: () => onRemove(item.id),
+          excludeFromTabOrder: true,
+          className: "z-1",
+          children: item.label
+        },
+        item.id
+      )),
+      remainingCount > 0 && /* @__PURE__ */ jsx(
+        Tag,
+        {
+          isDisabled,
+          excludeFromTabOrder: true,
+          children: `+${remainingCount} more`
+        },
+        "remaining-count"
+      )
+    ] });
   }
-  return /* @__PURE__ */ jsx(Fragment, { children: selectedItems.map((item) => /* @__PURE__ */ jsx(
-    Tag,
-    {
-      dismissable: true,
-      isDisabled,
-      onDismiss: () => onRemove(item.id),
-      excludeFromTabOrder: true,
-      className: "z-1",
-      children: item.label
-    },
-    item.id
-  )) });
+  return /* @__PURE__ */ jsx("p", { children: selectedItems.map((item) => item.label).join(", ") });
 };
 export {
   SelectInputTags