@povio/ui 0.0.5 → 0.0.7

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

@@ -0,0 +1,94 @@
+import { useMemo } from "react";
+import { useFilter } from "react-aria-components";
+const SelectAllItemId = "all-item-id";
+const SelectAllItem = (inputValue) => ({
+  id: SelectAllItemId,
+  label: inputValue,
+  isSelectAllItem: true
+});
+const NewItemId = "new-item-id";
+const NewItem = (inputValue) => ({
+  id: NewItemId,
+  label: inputValue,
+  isNewItem: true
+});
+const LoadingItemId = "loading-item-id";
+const LoadingItem = (inputValue) => ({
+  id: LoadingItemId,
+  label: inputValue,
+  isLoadingItem: true
+});
+const ReservedItemIds = [SelectAllItemId, NewItemId, LoadingItemId];
+function useSelectItems({
+  initialSelectedItems,
+  selectedItems,
+  cachedItems,
+  inputValue,
+  showAll,
+  isMultiple,
+  showSelectAllOption,
+  showNewItemOption,
+  newItemMinLength = 3,
+  isLoading,
+  hasLoadMore,
+  isClientSearchDisabled
+}) {
+  const { contains } = useFilter({ sensitivity: "base" });
+  const allListItems = useMemo(() => {
+    const showSelectAllItem = isMultiple && showSelectAllOption && inputValue.length === 0 && !hasLoadMore;
+    const showNewItem = showNewItemOption && inputValue.length >= newItemMinLength && !cachedItems.find((item) => contains(item.label, inputValue));
+    const showLoadingItem = isLoading || hasLoadMore;
+    return [
+      ...showSelectAllItem ? [SelectAllItem(inputValue)] : [],
+      ...cachedItems,
+      ...showNewItem ? [NewItem(inputValue)] : [],
+      ...showLoadingItem ? [LoadingItem(inputValue)] : []
+    ];
+  }, [
+    isMultiple,
+    showNewItemOption,
+    inputValue,
+    newItemMinLength,
+    cachedItems,
+    contains,
+    isLoading,
+    hasLoadMore,
+    showSelectAllOption
+  ]);
+  const allItems = useMemo(() => {
+    const items = [
+      ...Array.isArray(initialSelectedItems) ? initialSelectedItems : [initialSelectedItems],
+      ...Array.isArray(selectedItems) ? selectedItems : [selectedItems],
+      ...allListItems
+    ].filter((item) => !!item);
+    const allItemsMap = /* @__PURE__ */ new Map();
+    items.forEach((item) => allItemsMap.set(item.id, item));
+    return Array.from(allItemsMap.values());
+  }, [allListItems, initialSelectedItems, selectedItems]);
+  const filteredListItems = useMemo(
+    () => allListItems.filter((item) => contains(item.label, inputValue)),
+    [allListItems, contains, inputValue]
+  );
+  const listItems = useMemo(
+    () => showAll || isClientSearchDisabled ? allListItems : filteredListItems,
+    [showAll, isClientSearchDisabled, allListItems, filteredListItems]
+  );
+  const selectableListItems = useMemo(
+    () => listItems.filter((item) => !item.isDisabled && !ReservedItemIds.includes(String(item.id))),
+    [listItems]
+  );
+  return {
+    allItems,
+    allListItems,
+    filteredListItems,
+    listItems,
+    selectableListItems
+  };
+}
+export {
+  LoadingItemId,
+  NewItemId,
+  ReservedItemIds,
+  SelectAllItemId,
+  useSelectItems
+};

package/dist/components/inputs/Slider/Slider.d.ts

@@ -0,0 +1,18 @@
+import { Ref } from 'react';
+import { SliderProps as AriaSliderProps } from 'react-aria-components';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldProps } from '../FormField/FormField';
+import { ControlProps } from '../shared/form.types';
+type SliderValue<IsRange extends boolean = false> = IsRange extends false ? number : number[];
+interface SliderBaseProps<IsRange extends boolean = false> extends FormFieldProps, Omit<AriaSliderProps, "value" | "defaultValue" | "onChange" | "className"> {
+    ref?: Ref<HTMLDivElement>;
+    unit?: string;
+    isRange?: IsRange;
+    defaultValue?: SliderValue<IsRange>;
+    value?: SliderValue<IsRange>;
+    onChange?: (value: SliderValue<IsRange>) => void;
+}
+export type SliderProps<IsRange extends boolean = false> = SliderBaseProps<IsRange>;
+export type ControlledSliderProps<TFieldValues extends FieldValues, IsRange extends boolean = false> = ControlProps<SliderProps<IsRange>, TFieldValues>;
+export declare const Slider: <TFieldValues extends FieldValues, IsRange extends boolean = false>(props: ControlledSliderProps<TFieldValues, IsRange>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/Slider/Slider.js

@@ -0,0 +1,137 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { Slider as Slider$1, SliderTrack, SliderThumb } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { FormField } from "../FormField/FormField.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { Typography } from "../../text/Typography/Typography.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+const SliderBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    unit,
+    hideLabel = ui.input.hideLabel,
+    minValue = ui.slider.minValue,
+    maxValue = ui.slider.maxValue,
+    ...rest
+  } = props;
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden,
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  const defaultValue = props.defaultValue ?? (props.isRange ? [minValue, minValue] : minValue);
+  const getTrackFillStyle = (state) => {
+    const p0 = state.getThumbPercent(0);
+    const p1 = state.getThumbPercent(1);
+    return {
+      left: props.isRange ? `${p0 * 100}%` : 0,
+      width: props.isRange ? `${(p1 - p0) * 100}%` : `${p0 * 100}%`
+    };
+  };
+  return /* @__PURE__ */ jsx(
+    Slider$1,
+    {
+      ...rest,
+      defaultValue,
+      minValue,
+      maxValue,
+      isDisabled,
+      children: /* @__PURE__ */ jsx(FormField, { ...formFieldProps, children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
+            size: "label-2",
+            children: [
+              minValue,
+              unit
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(SliderTrack, { className: "relative mx-2 h-6 w-full", children: ({ state }) => /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "-translate-y-1/2 absolute top-1/2 h-1 w-full overflow-hidden rounded-full bg-elevation-outline-default-1", children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: clsx(
+                "absolute top-0 h-1 rounded-full",
+                props.isDisabled ? "bg-interactive-contained-primary-disabled" : "bg-interactive-contained-primary-idle"
+              ),
+              style: getTrackFillStyle(state)
+            }
+          ) }),
+          state.values.map((_, i) => /* @__PURE__ */ jsx(
+            SliderThumb,
+            {
+              index: i,
+              className: clsx(
+                "absolute top-1/2 size-4 cursor-pointer rounded-full bg-interactive-contained-primary-idle disabled:cursor-default",
+                "dragging:bg-interactive-contained-primary-pressed hover:bg-interactive-contained-primary-hover focus-visible:outline-interactive-contained-primary-focus disabled:bg-interactive-contained-primary-disabled",
+                uiOutlineClass
+              ),
+              isDisabled
+            },
+            i
+          ))
+        ] }) }),
+        /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            className: "min-w-10 px-slider-side-leading-and-trailing py-slider-height-leading-and-trailing text-text-default-3",
+            size: "label-2",
+            children: [
+              maxValue,
+              unit
+            ]
+          }
+        )
+      ] }) })
+    }
+  );
+};
+const Slider = (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(
+          SliderBase,
+          {
+            ...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(SliderBase, { ...props });
+};
+export {
+  Slider
+};

package/dist/components/inputs/TextEditor/TextEditor.d.ts

@@ -0,0 +1,20 @@
+import { JSONContent } from '@tiptap/react';
+import { Ref } from 'react';
+import { FieldValues } from 'react-hook-form';
+import { FormFieldProps } from '../FormField/FormField';
+import { ControlProps } from '../shared/form.types';
+export interface TextEditorValue {
+    html?: string | null;
+    json?: JSONContent | null;
+}
+export interface TextEditorBaseProps extends FormFieldProps {
+    ref?: Ref<HTMLDivElement>;
+    placeholder?: string;
+    value?: TextEditorValue | null;
+    onChange?: (value: TextEditorValue | null) => void;
+    onBlur?: () => void;
+    as?: "default" | "filter" | "floating" | "inline" | null;
+}
+export type TextEditorProps = TextEditorBaseProps;
+export type ControlledTextEditorProps<TFieldValues extends FieldValues> = ControlProps<TextEditorProps, TFieldValues>;
+export declare const TextEditor: <TFieldValues extends FieldValues>(props: ControlledTextEditorProps<TFieldValues>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/inputs/TextEditor/TextEditor.js

@@ -0,0 +1,223 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { Color } from "@tiptap/extension-color";
+import { Highlight } from "@tiptap/extension-highlight";
+import { Link } from "@tiptap/extension-link";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { TextAlign } from "@tiptap/extension-text-align";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Underline } from "@tiptap/extension-underline";
+import { useEditor, EditorContent } from "@tiptap/react";
+import { StarterKit } from "@tiptap/starter-kit";
+import { clsx } from "clsx";
+import { useRef, useState, useEffect } from "react";
+import { useHover, useFocusWithin, useFocusVisible, useLabel } from "react-aria";
+import { Controller } from "react-hook-form";
+import { FormField } from "../FormField/FormField.js";
+import { FormFieldLabel } from "../FormField/FormFieldLabel.js";
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { isEqual } from "../../../utils/isEqual.js";
+import { TextEditorToolbar } from "./Toolbar/TextEditorToolbar.js";
+const extensions = [
+  StarterKit.configure({
+    heading: {
+      levels: [1, 2, 3]
+    }
+  }),
+  TextAlign.configure({
+    types: ["heading", "paragraph"]
+  }),
+  Underline,
+  TextStyle,
+  Color,
+  Highlight.configure({
+    multicolor: true
+  }),
+  Link.configure({
+    openOnClick: false,
+    defaultProtocol: "https"
+  })
+];
+const TextEditorBase = ({
+  ref,
+  as = "default",
+  placeholder,
+  label,
+  hideLabel,
+  tooltipText,
+  helperText,
+  isRequired,
+  rightContent,
+  isDisabled,
+  headerClassName,
+  errorClassName,
+  isHeaderHidden,
+  error,
+  value,
+  className,
+  onChange,
+  onBlur
+}) => {
+  const contentRef = useRef(null);
+  const { hoverProps, isHovered } = useHover({ isDisabled });
+  const [isFocused, setIsFocused] = useState(false);
+  const { focusWithinProps } = useFocusWithin({
+    onFocusWithinChange: setIsFocused
+  });
+  const { isFocusVisible } = useFocusVisible();
+  const formFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName
+  };
+  const { labelProps, fieldProps } = useLabel({ label });
+  const editor = useEditor(
+    {
+      extensions: [...extensions, Placeholder.configure({ placeholder: as === "floating" ? "" : placeholder })],
+      editorProps: {
+        attributes: {
+          class: "min-h-40 rounded-b-sm p-2 outline-none"
+        }
+      },
+      onUpdate: (event) => {
+        onChange?.({
+          json: event.editor.getJSON(),
+          html: event.editor.getHTML()
+        });
+      },
+      immediatelyRender: false,
+      editable: !isDisabled,
+      onBlur
+    },
+    [isDisabled]
+  );
+  useEffect(() => {
+    const content = value?.json ?? null;
+    if (editor) {
+      const isSame = isEqual(content, editor.getJSON());
+      if (!isSame) {
+        editor.commands.setContent(content);
+      }
+    } else {
+      const isSame = isEqual(content, contentRef.current);
+      if (!isSame) {
+        contentRef.current = content ?? null;
+      }
+    }
+  }, [value]);
+  useEffect(() => {
+    if (editor && contentRef.current) {
+      editor.commands.setContent(contentRef.current);
+      contentRef.current = null;
+    }
+  }, [editor]);
+  const headerProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps
+  };
+  return /* @__PURE__ */ jsx(
+    FormField,
+    {
+      ...formFieldProps,
+      ref,
+      as,
+      labelProps,
+      className: clsx("w-full", className),
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: clsx(
+            "group/text-editor relative",
+            "w-full rounded-sm border border-elevation-outline-default-2 border-solid bg-elevation-fill-default-1",
+            uiOutlineClass,
+            "focus-within:border focus-within:border-input-outlined-outline-active",
+            "focus-visible:outline-interactive-contained-primary-focus",
+            "hover:border hover:border-input-outlined-outline-hover"
+          ),
+          "data-text-editor": true,
+          "data-rac": "",
+          "data-hovered": isHovered || void 0,
+          "data-disabled": isDisabled || void 0,
+          "data-focus-within": isFocused || void 0,
+          "data-focus-visible": isFocused && isFocusVisible || void 0,
+          "data-is-filled": !editor?.isEmpty,
+          ...hoverProps,
+          ...focusWithinProps,
+          ...fieldProps,
+          children: [
+            /* @__PURE__ */ jsx(TextEditorToolbar, { editor }),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: clsx("relative", {
+                  "pt-3": as === "floating"
+                }),
+                children: [
+                  as === "floating" && headerProps && /* @__PURE__ */ jsx(
+                    FormFieldLabel,
+                    {
+                      as,
+                      ...headerProps
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    EditorContent,
+                    {
+                      editor,
+                      placeholder: as === "floating" ? "" : placeholder,
+                      className: clsx({
+                        "[&_p:before]:opacity-0": as === "floating" && editor?.isEmpty
+                      })
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+const TextEditor = (props) => {
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+    return /* @__PURE__ */ jsx(
+      Controller,
+      {
+        control: formControl.control,
+        name: formControl.name,
+        render: ({ field }) => /* @__PURE__ */ jsx(
+          TextEditorBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            value: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            isDisabled: field.disabled || props.isDisabled
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(TextEditorBase, { ...props });
+};
+export {
+  TextEditor
+};

package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.d.ts

@@ -0,0 +1,7 @@
+interface ColorPickerProps {
+    colors: string[];
+    value: string | undefined;
+    onChange: (value: string) => void;
+}
+export declare const ColorPicker: ({ colors, value, onChange }: ColorPickerProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/TextEditor/Toolbar/ColorPicker.js

@@ -0,0 +1,34 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { ColorSwatchPicker, ColorSwatchPickerItem, ColorSwatch } from "react-aria-components";
+const ColorPicker = ({ colors, value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    ColorSwatchPicker,
+    {
+      value,
+      onChange: (color) => onChange(color.toString("hex")),
+      className: "grid w-full grid-cols-[repeat(auto-fit,minmax(1rem,1fr))] gap-1",
+      children: colors.map((color) => /* @__PURE__ */ jsx(
+        ColorSwatchPickerItem,
+        {
+          color,
+          className: "group",
+          children: /* @__PURE__ */ jsx(
+            ColorSwatch,
+            {
+              className: clsx(
+                "size-4 rounded-xs border border-interactive-outlined-secondary-outline-idle border-solid",
+                "group-selected:border-interactive-outlined-primary-outline-pressed group-selected:shadow-2",
+                "cursor-pointer"
+              )
+            }
+          )
+        },
+        color
+      ))
+    }
+  );
+};
+export {
+  ColorPicker
+};

package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.d.ts

@@ -0,0 +1,10 @@
+import { ReactElement } from 'react';
+interface ColorPickerDropdownProps {
+    colors: string[];
+    value: string | undefined;
+    onChange: (color: string) => void;
+    isDisabled?: boolean;
+    children: ReactElement;
+}
+export declare const ColorPickerDropdown: ({ colors, value, onChange, isDisabled, children }: ColorPickerDropdownProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/inputs/TextEditor/Toolbar/ColorPickerDropdown.js

@@ -0,0 +1,80 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useState } from "react";
+import { DialogTrigger, Button, Popover, Dialog } from "react-aria-components";
+import { ArrowDropDownIcon } from "../../../../assets/icons/ArrowDropDown.js";
+import { useInputCva } from "../../shared/input.cva.js";
+import { ColorPicker } from "./ColorPicker.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+const ColorPickerDropdown = ({ colors, value, onChange, isDisabled, children }) => {
+  const inputCva = useInputCva();
+  const [isOpen, setIsOpen] = useState(false);
+  const handleChange = (color) => {
+    onChange(color);
+    setIsOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    DialogTrigger,
+    {
+      isOpen,
+      onOpenChange: setIsOpen,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Button,
+          {
+            className: inputCva({
+              as: "inline",
+              className: clsx("flex items-center justify-between gap-2")
+            }),
+            isDisabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  size: "label-1",
+                  className: "truncate",
+                  children
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ArrowDropDownIcon,
+                {
+                  className: clsx("size-6 shrink-0", isOpen && "rotate-180"),
+                  "aria-hidden": "true"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Popover,
+          {
+            className: "my-4 w-40 outline-none",
+            offset: 0,
+            placement: "bottom start",
+            children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none", children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: clsx(
+                  "flex justify-center overflow-hidden p-2 shadow-5 outline-none",
+                  "rounded-input-rounding-default border border-elevation-outline-default-1 bg-elevation-fill-default-1"
+                ),
+                children: /* @__PURE__ */ jsx(
+                  ColorPicker,
+                  {
+                    colors,
+                    value,
+                    onChange: handleChange
+                  }
+                )
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  ColorPickerDropdown
+};

package/dist/components/inputs/TextEditor/Toolbar/HyperlinkAction.d.ts

@@ -0,0 +1,2 @@
+import { TextEditorSharedProps } from '../textEditor.types';
+export declare const HyperlinkAction: ({ editor }: TextEditorSharedProps) => import("react/jsx-runtime").JSX.Element | null;