@povio/ui 0.0.7 → 0.0.8

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

@@ -1,186 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { Time } from "@internationalized/date";
-import { useTimeFieldState } from "@react-stately/datepicker";
-import { clsx } from "clsx";
-import { useRef, useEffect } from "react";
-import { useLocale, useTimeField, useDateSegment } from "react-aria";
-import { ChevronDownIcon } from "../../../../assets/icons/ChevronDown.js";
-import { ChevronUpIcon } from "../../../../assets/icons/ChevronUp.js";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { getPlaceholder } from "./DateSegmentItem.js";
-import { Typography } from "../../../text/Typography/Typography.js";
-import { useBreakpoint } from "../../../../hooks/useBreakpoint.js";
-import { useLongPressRepeat } from "../../../../hooks/useLongPressRepeat.js";
-const INCREMENT_STEP_SIZE = 5;
-const TimePickerForm = ({ state, datePickerState }) => {
-  const isDesktop = useBreakpoint("md");
-  const { locale } = useLocale();
-  const fieldState = useTimeFieldState({
-    locale,
-    defaultValue: datePickerState?.timeValue,
-    onChange: (value) => {
-      datePickerState?.setTimeValue(value ?? new Time(0, 0));
-    },
-    hideTimeZone: true
-  });
-  const ref = useRef(null);
-  const innerState = state ?? fieldState;
-  const { fieldProps } = useTimeField({ "aria-label": "Time Picker" }, innerState, ref);
-  const getAutoFocus = (index) => {
-    if (!isDesktop) {
-      return false;
-    }
-    return index === innerState.segments.findIndex(({ type }) => ["hour", "minute", "dayPeriod"].includes(type));
-  };
-  return /* @__PURE__ */ jsxs("div", { className: "w-full p-8", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-4", children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
-      TimeSegmentButton,
-      {
-        segment,
-        state: innerState,
-        type: "increment"
-      },
-      i
-    )) }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        ...fieldProps,
-        className: "flex items-center justify-center gap-4 py-2",
-        children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
-          TimeSegmentInput,
-          {
-            segment,
-            state: innerState,
-            autoFocus: getAutoFocus(i)
-          },
-          i
-        ))
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center gap-4", children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(
-      TimeSegmentButton,
-      {
-        segment,
-        state: innerState,
-        type: "decrement"
-      },
-      i
-    )) })
-  ] });
-};
-const TimeSegmentInput = ({ segment, state, autoFocus }) => {
-  const ref = useRef(null);
-  const { segmentProps } = useDateSegment(segment, state, ref);
-  const isDesktop = useBreakpoint("md");
-  useEffect(() => {
-    if (autoFocus) {
-      ref.current?.focus();
-    }
-  }, [autoFocus]);
-  if (!["literal", "hour", "minute", "dayPeriod"].includes(segment.type)) {
-    return null;
-  }
-  if (segment.type === "literal") {
-    if (!showSegmentText(segment.text)) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "flex flex-col text-center",
-        ref,
-        children: /* @__PURE__ */ jsx(
-          Typography,
-          {
-            as: "span",
-            variant: "prominent-1",
-            size: "label-2",
-            className: "text-text-default-2",
-            children: segment.text
-          }
-        )
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center justify-center gap-2", children: /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      ...isDesktop && segmentProps,
-      className: clsx(
-        "w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center",
-        "font-labels-default text-text-default-3",
-        "border border-input-filled-idle border-solid",
-        "hover:border-interactive-contained-primary-hover",
-        "focus-within:border-interactive-contained-primary-idle focus-within:outline-none"
-      ),
-      children: getPlaceholder(segment) ?? segment.text
-    }
-  ) });
-};
-const TimeSegmentButton = ({ segment, state, type }) => {
-  const stateRef = useRef(state);
-  useEffect(() => {
-    stateRef.current = state;
-  }, [state]);
-  const onPress = (isLongPress) => {
-    if (isLongPress && segment.type === "minute") {
-      const currentValue = stateRef.current.segments.find((item) => item.type === "minute")?.value ?? 0;
-      const diff = type === "increment" ? INCREMENT_STEP_SIZE : -INCREMENT_STEP_SIZE;
-      const newValue = Math.round((currentValue + diff) / INCREMENT_STEP_SIZE) * INCREMENT_STEP_SIZE;
-      const normalizedValue = (newValue % 60 + 60) % 60;
-      stateRef.current.setSegment(segment.type, normalizedValue);
-    } else {
-      stateRef.current[type](segment.type);
-    }
-  };
-  const { onPressStart, onPressEnd } = useLongPressRepeat({
-    onPress,
-    enabled: segment.type !== "dayPeriod",
-    timeout: 300,
-    interval: 300
-  });
-  if (!["literal", "hour", "minute", "dayPeriod"].includes(segment.type)) {
-    return null;
-  }
-  if (segment.type === "literal") {
-    if (!showSegmentText(segment.text)) {
-      return null;
-    }
-    return /* @__PURE__ */ jsx("div", { className: "flex shrink-0", children: /* @__PURE__ */ jsx(
-      Typography,
-      {
-        as: "span",
-        variant: "prominent-1",
-        size: "label-2",
-        className: "invisible text-text-default-2",
-        "aria-hidden": true,
-        children: segment.text
-      }
-    ) });
-  }
-  const Icon = type === "increment" ? ChevronUpIcon : ChevronDownIcon;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "flex w-11 select-none items-center justify-center",
-      onContextMenu: (e) => e.preventDefault(),
-      children: /* @__PURE__ */ jsx(
-        InlineIconButton,
-        {
-          label: "",
-          color: "secondary",
-          onPressStart,
-          onPressEnd,
-          icon: Icon
-        }
-      )
-    }
-  );
-};
-const showSegmentText = (text) => !/[\u2066\u2069]/.test(text);
-export {
-  TimePickerForm
-};

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

@@ -1,107 +0,0 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { clsx } from "clsx";
-import { useState, useMemo } from "react";
-import { useHover, useFocusWithin, useFocusVisible } from "react-aria";
-import useMeasure from "react-use-measure";
-import { ClockIcon } from "../../../../assets/icons/Clock.js";
-import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
-import { TimeField } from "./TimeField.js";
-import { FormFieldLabel } from "../../FormField/FormFieldLabel.js";
-import { InputClear } from "../../shared/InputClear.js";
-import { useInputCva } from "../../shared/input.cva.js";
-const TimePickerInput = ({
-  ref,
-  as,
-  fieldProps,
-  state,
-  isDisabled,
-  isInvalid,
-  disableDropdown,
-  variant,
-  size,
-  isClearable,
-  headerProps,
-  onPress,
-  ...props
-}) => {
-  const inputCva = useInputCva();
-  const { hoverProps, isHovered } = useHover({ isDisabled });
-  const [isFocused, setIsFocused] = useState(false);
-  const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setIsFocused });
-  const { isFocusVisible } = useFocusVisible();
-  const [labelContentRef, { width: labelWidth }] = useMeasure();
-  const hidePlaceholder = (as === "floating" || as === "filter") && !state.value && !isFocused;
-  const style = useMemo(() => {
-    const leftPadding = as === "filter" ? `var(--spacing-input-side-default) + ${labelWidth}` : "0";
-    return {
-      paddingLeft: `calc(${leftPadding}px)`
-    };
-  }, [labelWidth, as]);
-  const canClear = state.segments.some((segment) => segment.type !== "literal" && segment.isPlaceholder === false);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref,
-      className: inputCva({
-        variant,
-        as,
-        size,
-        ...props,
-        className: clsx("group/date-picker-content relative flex items-center justify-between gap-2")
-      }),
-      "data-rac": "",
-      "data-hovered": isHovered || void 0,
-      "data-disabled": isDisabled || void 0,
-      "data-invalid": isInvalid || void 0,
-      "data-focus-within": isFocused || void 0,
-      "data-focus-visible": isFocused && isFocusVisible || void 0,
-      "data-has-selection": state.value !== null || void 0,
-      ...fieldProps,
-      ...focusWithinProps,
-      ...hoverProps,
-      children: [
-        as && ["filter", "floating"].includes(as) && headerProps && /* @__PURE__ */ jsx(
-          FormFieldLabel,
-          {
-            ref: labelContentRef,
-            as,
-            ...headerProps
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { style, children: /* @__PURE__ */ jsx(
-          TimeField,
-          {
-            fieldProps,
-            state,
-            isDisabled,
-            hidePlaceholder
-          }
-        ) }),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: clsx("flex items-center gap-2", {
-              "-mt-4": as === "floating"
-            }),
-            children: [
-              isClearable && canClear && /* @__PURE__ */ jsx(InputClear, { onClear: () => state.setValue(null) }),
-              !disableDropdown && /* @__PURE__ */ jsx(
-                InlineIconButton,
-                {
-                  label: "",
-                  color: "secondary",
-                  onPress,
-                  icon: ClockIcon,
-                  isDisabled
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  TimePickerInput
-};

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

@@ -1,89 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { today } from "@internationalized/date";
-import { useDateFormatter } from "@react-aria/i18n";
-import { clsx } from "clsx";
-import { useMemo } from "react";
-import { ListBox, ListBoxItem } from "react-aria-components";
-import { Typography } from "../../../text/Typography/Typography.js";
-import { useScrollableListBox } from "../../../../hooks/useScrollableListBox.js";
-const YearPicker = ({ state, onSelectionChange }) => {
-  const formatter = useDateFormatter({
-    year: "numeric",
-    timeZone: state.timeZone
-  });
-  const years = useMemo(() => {
-    const arr = [];
-    for (let i = -100; i <= 100; i++) {
-      const date = today(state.timeZone).add({ years: i });
-      arr.push({
-        value: date.year,
-        formatted: formatter.format(date.toDate(state.timeZone))
-      });
-    }
-    return arr;
-  }, [state.timeZone, formatter]);
-  const isYearDisabled = (year) => {
-    if (state.minValue && year < state.minValue.year) {
-      return true;
-    }
-    if (state.maxValue && year > state.maxValue.year) {
-      return true;
-    }
-    return false;
-  };
-  const selectedYear = years.findIndex((year) => year.value === state.focusedDate.year);
-  const { ref } = useScrollableListBox();
-  return /* @__PURE__ */ jsx(
-    ListBox,
-    {
-      ref,
-      autoFocus: true,
-      "aria-label": "Year",
-      selectionMode: "single",
-      selectedKeys: [selectedYear],
-      onSelectionChange: (key) => {
-        if (key === "all") {
-          return;
-        }
-        const index = [...key][0];
-        if (typeof index === "number") {
-          const date = state.focusedDate.set({ year: years[index].value });
-          state.setFocusedDate(date);
-        }
-        onSelectionChange(key);
-      },
-      className: "h-80 max-h-full min-h-0 w-full shrink-0 overflow-y-auto md:h-72 md:w-80",
-      children: years.map((year, index) => {
-        const isDisabled = isYearDisabled(year.value);
-        return /* @__PURE__ */ jsx(
-          ListBoxItem,
-          {
-            id: index,
-            textValue: year.formatted,
-            isDisabled,
-            className: clsx(
-              "flex px-4 py-2 text-interactive-text-secondary-idle outline-none",
-              "border-elevation-outline-default-1 border-b border-solid bg-elevation-fill-default-1 last:border-b-0",
-              "hover:text-interactive-text-secondary-hover",
-              "selected:bg-interactive-contained-primary-idle selected:text-interactive-text-secondary-idle-inverted",
-              "focus-visible:bg-interactive-contained-primary-focus focus-visible:text-interactive-text-secondary-idle-inverted",
-              isDisabled ? "cursor-default opacity-50" : "cursor-pointer"
-            ),
-            children: /* @__PURE__ */ jsx(
-              Typography,
-              {
-                as: "span",
-                size: "label-2",
-                children: year.formatted
-              }
-            )
-          },
-          index
-        );
-      })
-    }
-  );
-};
-export {
-  YearPicker
-};

package/dist/components/inputs/File/FileUpload.js

@@ -1,254 +0,0 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { mergeRefs, useLabels } from "@react-aria/utils";
-import { clsx } from "clsx";
-import { useState, useCallback } from "react";
-import { DropZone } from "react-aria-components";
-import { Controller } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { FormField } from "../FormField/FormField.js";
-import { ns } from "../../../config/i18n.js";
-import { UIConfig } from "../../../config/uiConfig.context.js";
-import { FileUtils } from "../../../utils/file.utils.js";
-import { FileCardList } from "./shared/FileCardList.js";
-import { FileUploadContent } from "./shared/FileUploadContent.js";
-import { FileUploadContentEmpty } from "./shared/FileUploadContentEmpty.js";
-import { fileUploadDropZone } from "./shared/fileUpload.cva.js";
-const FileUploadBase = (props) => {
-  const { t } = useTranslation(ns);
-  const {
-    ref,
-    label,
-    tooltipText,
-    variant = "vertical",
-    as = "button",
-    helperText,
-    isRequired,
-    isDisabled,
-    headerClassName,
-    errorClassName,
-    isHeaderHidden,
-    error,
-    className,
-    allowsMultiple = false,
-    hideLabel,
-    acceptedFileTypes,
-    emptyText = t(($) => $.ui.fileUpload.emptyText),
-    uploadText = t(($) => $.ui.fileUpload.uploadText),
-    browseText = t(($) => $.ui.fileUpload.browse),
-    fileUpload,
-    fileRemove,
-    children,
-    listRenderer,
-    ...rest
-  } = props;
-  const ui = UIConfig.useConfig();
-  const [uploadState, setUploadState] = useState(props.value ?? []);
-  const formFieldProps = {
-    error,
-    label,
-    tooltipText,
-    helperText,
-    isRequired,
-    isHeaderHidden,
-    hideLabel: hideLabel ?? ui.input.hideLabel,
-    isDisabled,
-    headerClassName,
-    errorClassName
-  };
-  const labelProps = useLabels({ "aria-label": label });
-  const handleUpload = useCallback(
-    async (inputFiles) => {
-      const acceptedFiles = inputFiles.filter((file) => FileUtils.isFileTypeAccepted(file, acceptedFileTypes));
-      if (acceptedFiles.length === 0 || !fileUpload) {
-        return;
-      }
-      if (!allowsMultiple) {
-        setUploadState([]);
-      }
-      const newUploadState = [];
-      acceptedFiles.forEach((file) => {
-        newUploadState.push({ state: "uploading", progress: 0, file, abortController: new AbortController() });
-      });
-      const startIndex = allowsMultiple ? uploadState.length : 0;
-      setUploadState((prev) => [...prev, ...newUploadState]);
-      const promises = [];
-      acceptedFiles.forEach(async (file, index) => {
-        promises.push(
-          fileUpload(
-            {
-              data: {
-                resourceName: file.name,
-                fileName: file.name,
-                fileSize: file.size,
-                method: "put"
-              }
-            },
-            file,
-            {
-              onUploadProgress: ({ loaded, total }) => {
-                if (total == null) {
-                  return;
-                }
-                const progress = Math.round(loaded / total * 100);
-                setUploadState(
-                  (prev) => prev.map((state, i) => i === startIndex + index ? { ...state, progress } : state)
-                );
-              },
-              abortController: newUploadState[index]?.abortController
-            }
-          )
-        );
-      });
-      const response = await Promise.all(promises);
-      response.forEach((res, index) => {
-        setUploadState(
-          (prev) => prev.map((state, i) => i === startIndex + index ? { ...state, state: "uploaded", id: res.id } : state)
-        );
-      });
-    },
-    [fileUpload, acceptedFileTypes, setUploadState, allowsMultiple, uploadState.length]
-  );
-  const handleSelect = useCallback(
-    (inputFiles) => {
-      if (!inputFiles) {
-        return;
-      }
-      const filesArray = Array.from(inputFiles);
-      handleUpload(filesArray);
-    },
-    [handleUpload]
-  );
-  const handleDrop = async (e) => {
-    if (!e.items) {
-      return;
-    }
-    const promises = [];
-    e.items.forEach((item) => {
-      if (item.kind === "file") {
-        promises.push(item.getFile());
-      }
-    });
-    const inputFiles = await Promise.all(promises);
-    handleUpload(inputFiles);
-  };
-  const handleRemove = useCallback(
-    (id) => {
-      fileRemove?.({ id });
-      setUploadState((prev) => prev.filter((state) => state.id !== id));
-    },
-    [fileRemove]
-  );
-  const handleCancelUpload = useCallback(
-    (index) => {
-      const findState = uploadState[index];
-      if (findState) {
-        findState.abortController?.abort("canceled by user");
-        setUploadState((prev) => prev.filter((_, i) => i !== index));
-      }
-    },
-    [uploadState]
-  );
-  return /* @__PURE__ */ jsxs(
-    FormField,
-    {
-      ...formFieldProps,
-      labelProps,
-      className: clsx("w-full", className),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: "flex w-full items-center justify-between gap-file-upload-input-gap-input-to-button-gap", children: /* @__PURE__ */ jsx(
-          DropZone,
-          {
-            ...rest,
-            "data-rac": "",
-            "data-disabled": isDisabled || void 0,
-            "data-invalid": !!error || void 0,
-            "data-multiple": allowsMultiple || void 0,
-            "data-has-files": uploadState.length > 0 || void 0,
-            isDisabled,
-            onDrop: handleDrop,
-            className: fileUploadDropZone({ variant, isContainer: !!children, className: "group/file-upload-drop-zone" }),
-            children: children ? /* @__PURE__ */ jsxs(Fragment, { children: [
-              children({
-                files: uploadState,
-                onRemove: handleRemove,
-                onCancel: handleCancelUpload
-              }),
-              /* @__PURE__ */ jsx(
-                FileUploadContentEmpty,
-                {
-                  as,
-                  variant,
-                  singleFile: true,
-                  hideButton: true,
-                  isDisabled,
-                  title: emptyText,
-                  uploadText,
-                  browseText,
-                  className: "-translate-x-1/2 -translate-y-1/2 group-data-[drop-target]/file-upload-drop-zone:!flex absolute top-1/2 left-1/2 z-50 hidden flex-col"
-                }
-              )
-            ] }) : /* @__PURE__ */ jsx(
-              FileUploadContent,
-              {
-                ...rest,
-                variant,
-                as,
-                isDisabled,
-                browseText,
-                uploadText,
-                emptyText,
-                uploadState,
-                handleSelect,
-                handleCancelUpload,
-                handleRemove,
-                acceptedFileTypes,
-                allowsMultiple
-              }
-            )
-          }
-        ) }),
-        !children && allowsMultiple && uploadState.length > 0 && (listRenderer ? listRenderer({
-          files: uploadState,
-          onRemove: handleRemove,
-          onCancel: handleCancelUpload
-        }) : /* @__PURE__ */ jsx(
-          FileCardList,
-          {
-            as,
-            uploadState,
-            isDisabled,
-            onRemove: handleRemove,
-            onCancel: handleCancelUpload
-          }
-        ))
-      ]
-    }
-  );
-};
-const FileUpload = (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(
-          FileUploadBase,
-          {
-            ...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(FileUploadBase, { ...props });
-};
-export {
-  FileUpload
-};

package/dist/components/inputs/File/FileUploadContainer.js

@@ -1,17 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { FileUpload } from "./FileUpload.js";
-const FileUploadContainer = (props) => {
-  return /* @__PURE__ */ jsx(
-    FileUpload,
-    {
-      label: "",
-      hideLabel: true,
-      variant: "vertical",
-      as: "button",
-      ...props
-    }
-  );
-};
-export {
-  FileUploadContainer
-};