@povio/ui 0.0.8 → 0.0.9

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

@@ -0,0 +1,73 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { BoldIcon } from "../../../../assets/icons/Bold.js";
+import { ItalicIcon } from "../../../../assets/icons/Italic.js";
+import { StrikethroughIcon } from "../../../../assets/icons/Strikethrough.js";
+import { UnderlinedIcon } from "../../../../assets/icons/Underlined.js";
+import { InlineIconButton } from "../../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../../config/i18n.js";
+const TextMarksActions = ({ editor }) => {
+  const { t } = useTranslation(ns);
+  const actions = [
+    {
+      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bold"),
+      isEnabled: () => editor.isEditable && editor.can().toggleBold(),
+      label: t(($) => $.ui.textEditor.marks.bold),
+      icon: BoldIcon,
+      onPress: () => {
+        editor.chain().focus().toggleBold().run();
+      },
+      isActive: () => editor.isActive("bold")
+    },
+    {
+      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "italic"),
+      isEnabled: () => editor.isEditable && editor.can().toggleItalic(),
+      label: t(($) => $.ui.textEditor.marks.italic),
+      icon: ItalicIcon,
+      onPress: () => {
+        editor.chain().focus().toggleItalic().run();
+      },
+      isActive: () => editor.isActive("italic")
+    },
+    {
+      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "strike"),
+      isEnabled: () => editor.isEditable && editor.can().toggleStrike(),
+      label: t(($) => $.ui.textEditor.marks.strikethrough),
+      icon: StrikethroughIcon,
+      onPress: () => {
+        editor.chain().focus().toggleStrike().run();
+      },
+      isActive: () => editor.isActive("strike")
+    },
+    {
+      can: !!editor.extensionManager.extensions.find((extension) => extension.name === "underline"),
+      isEnabled: () => editor.isEditable && editor.can().toggleUnderline(),
+      label: t(($) => $.ui.textEditor.marks.underline),
+      icon: UnderlinedIcon,
+      onPress: () => {
+        editor.chain().focus().toggleUnderline().run();
+      },
+      isActive: () => editor.isActive("underline")
+    }
+  ];
+  const enabledActions = actions.filter((action) => action.can);
+  if (enabledActions.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "flex h-full items-center gap-3", children: enabledActions.map((action) => /* @__PURE__ */ jsx(
+    InlineIconButton,
+    {
+      color: "secondary",
+      label: action.label,
+      onPress: action.onPress,
+      icon: action.icon,
+      isDisabled: !action.isEnabled(),
+      className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
+    },
+    action.label
+  )) });
+};
+export {
+  TextMarksActions
+};

package/{src → dist}/components/inputs/TextEditor/Toolbar/TextStyleSelect.d.ts

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

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

@@ -0,0 +1,61 @@
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { Select } from "../../Selection/Select/Select.js";
+import { Typography } from "../../../text/Typography/Typography.js";
+import { ns } from "../../../../config/i18n.js";
+const TextStyleSelect = ({ editor }) => {
+  const { t } = useTranslation(ns);
+  const isHeadingEnabled = !!editor.extensionManager.extensions.find((extension) => extension.name === "heading");
+  if (!isHeadingEnabled) {
+    return null;
+  }
+  const getItem = (level) => {
+    return {
+      id: level,
+      label: t(($) => $.ui.textEditor.textStyle[`heading${level}`]),
+      content: /* @__PURE__ */ jsx(Typography, { size: `title-${level}`, children: t(($) => $.ui.textEditor.textStyle[`heading${level}`]) })
+    };
+  };
+  const onChange = (val) => {
+    if (!val) {
+      const currentLevel = editor.getAttributes("heading")?.level;
+      if (!currentLevel) {
+        return;
+      }
+      editor.chain().focus().toggleHeading({ level: currentLevel }).run();
+      return;
+    }
+    if (!editor.can().setHeading({ level: val })) {
+      return;
+    }
+    editor.chain().focus().setHeading({ level: val }).run();
+  };
+  return /* @__PURE__ */ jsx(
+    Select,
+    {
+      as: "inline",
+      placeholder: t(($) => $.ui.textEditor.textStyle.label),
+      label: t(($) => $.ui.textEditor.textStyle.label),
+      hideLabel: true,
+      ignoreTriggerWidth: true,
+      onChange,
+      items: [
+        {
+          id: 0,
+          label: t(($) => $.ui.textEditor.textStyle.normal)
+        },
+        ...editor.can().toggleHeading({ level: 1 }) ? [getItem(1)] : [],
+        ...editor.can().toggleHeading({ level: 2 }) ? [getItem(2)] : [],
+        ...editor.can().toggleHeading({ level: 3 }) ? [getItem(3)] : [],
+        ...editor.can().toggleHeading({ level: 4 }) ? [getItem(4)] : [],
+        ...editor.can().toggleHeading({ level: 5 }) ? [getItem(5)] : [],
+        ...editor.can().toggleHeading({ level: 6 }) ? [getItem(6)] : []
+      ],
+      value: editor.getAttributes("heading")?.level || 0,
+      isDisabled: !editor.isEditable
+    }
+  );
+};
+export {
+  TextStyleSelect
+};

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

@@ -0,0 +1,40 @@
+const defaultColors = [
+  "#000000",
+  "#e60000",
+  "#ff9900",
+  "#ffff00",
+  "#008a00",
+  "#0066cc",
+  "#9933ff",
+  "#ffffff",
+  "#facccc",
+  "#ffebcc",
+  "#ffffcc",
+  "#cce8cc",
+  "#cce0f5",
+  "#ebd6ff",
+  "#bbbbbb",
+  "#f06666",
+  "#ffc266",
+  "#ffff66",
+  "#66b966",
+  "#66a3e0",
+  "#c285ff",
+  "#888888",
+  "#a10000",
+  "#b26b00",
+  "#b2b200",
+  "#006100",
+  "#0047b2",
+  "#6b24b2",
+  "#444444",
+  "#5c0000",
+  "#663d00",
+  "#666600",
+  "#003700",
+  "#002966",
+  "#3d1466"
+];
+export {
+  defaultColors
+};

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

@@ -1,9 +1,9 @@
 import { Ref } from 'react';
 import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
 import { FieldValues } from 'react-hook-form';
-import { FormFieldErrorProps } from '#ui/components/inputs/FormField/FormFieldError';
-import { ControlProps } from '#ui/components/inputs/shared/form.types';
-import { ToggleVariantProps } from '#ui/components/inputs/Toggle/toggle.cva';
+import { FormFieldErrorProps } from '../FormField/FormFieldError';
+import { ControlProps } from '../shared/form.types';
+import { ToggleVariantProps } from './toggle.cva';
 interface ToggleBaseProps extends FormFieldErrorProps, ToggleVariantProps, Omit<AriaSwitchProps, "className"> {
     ref?: Ref<HTMLLabelElement>;
     children?: string;

package/dist/components/inputs/Toggle/Toggle.js

@@ -0,0 +1,65 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { Switch } from "react-aria-components";
+import { Controller } from "react-hook-form";
+import { FormFieldError } from "../FormField/FormFieldError.js";
+import { CheckContent } from "../shared/CheckContent.js";
+import { toggle, toggleTypography } from "./toggle.cva.js";
+import { UIConfig } from "../../../config/uiConfig.context.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const ToggleBase = (props) => {
+  const ui = UIConfig.useConfig();
+  const uiStyle = UIStyle.useConfig();
+  const toggleCva = uiStyle?.toggle?.cva ?? toggle;
+  const toggleTypographyMap = uiStyle?.toggle?.typography ?? toggleTypography;
+  const { className, children, isDisabled, error, variant = ui.toggle.variant, ...rest } = props;
+  const formFieldErrorProps = {
+    error,
+    isDisabled
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Switch,
+      {
+        ...rest,
+        isDisabled,
+        className: clsx("group flex items-center gap-2", !isDisabled && "cursor-pointer", className),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: toggleCva({ variant, ...rest }) }),
+          /* @__PURE__ */ jsx(CheckContent, { typography: toggleTypographyMap({ variant, ...rest }), children })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(FormFieldError, { ...formFieldErrorProps })
+  ] });
+};
+const Toggle = (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(
+          ToggleBase,
+          {
+            ...innerProps,
+            ref: mergeRefs(ref, field.ref),
+            isSelected: field.value,
+            onChange: field.onChange,
+            onBlur: field.onBlur,
+            name: field.name,
+            isDisabled: field.disabled || props.isDisabled,
+            error: props.error ?? error?.message
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ToggleBase, { ...props });
+};
+export {
+  Toggle
+};

package/{src → dist}/components/inputs/Toggle/toggle.cva.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 export declare const toggle: (props?: ({
     variant?: "default" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

package/dist/components/inputs/Toggle/toggle.cva.js

@@ -0,0 +1,44 @@
+import { cva } from "class-variance-authority";
+import { uiGroupOutlineClass } from "../../outline.clsx.js";
+import { compoundMapper } from "../../../utils/compoundMapper.js";
+const toggle = cva(
+  [
+    "h-6 w-10 rounded-full before:m-0-5 before:block before:aspect-square before:h-5 before:rounded-full before:transition-transform before:content-[''] group-selected:before:translate-x-4",
+    uiGroupOutlineClass
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-interactive-contained-secondary-idle",
+          "group-disabled:bg-interactive-contained-secondary-disabled",
+          "group-hover:bg-interactive-contained-secondary-hover",
+          "group-pressed:bg-interactive-contained-secondary-pressed",
+          "group-selected:bg-interactive-contained-primary-idle",
+          "group-selected:group-hover:bg-interactive-contained-primary-hover",
+          "group-selected:group-pressed:bg-interactive-contained-primary-pressed",
+          "group-focus-visible:outline-interactive-text-secondary-focus",
+          "before:bg-interactive-contained-secondary-on-idle",
+          "group-hover:before:bg-interactive-contained-secondary-on-hover",
+          "group-disabled:before:bg-interactive-contained-secondary-on-disabled",
+          "group-selected:before:bg-interactive-contained-primary-on-idle",
+          "group-selected:group-hover:before:bg-interactive-contained-primary-on-hover",
+          "group-selected:group-pressed:before:bg-interactive-contained-primary-on-pressed"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+const toggleTypography = compoundMapper({
+  default: {
+    size: "label-1",
+    variant: "default"
+  }
+});
+export {
+  toggle,
+  toggleTypography
+};

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

@@ -1,5 +1,5 @@
 import { PropsWithChildren } from 'react';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 interface CheckContentProps {
     typography?: TypographyVariantProps;
 }

package/dist/components/inputs/shared/CheckContent.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import { typography } from "../../text/Typography/typography.cva.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const CheckContent = ({ children, ...props }) => {
+  const uiStyle = UIStyle.useConfig();
+  const typographyCva = uiStyle?.typography?.cva ?? typography;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: typographyCva({
+        size: "label-1",
+        variant: "default",
+        ...props.typography,
+        className: "text-text-default-2"
+      }),
+      children
+    }
+  );
+};
+export {
+  CheckContent
+};

package/dist/components/inputs/shared/InputClear.js

@@ -0,0 +1,27 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+import { CloseIcon } from "../../../assets/icons/Close.js";
+import { InlineIconButton } from "../../buttons/InlineIconButton/InlineIconButton.js";
+import { ns } from "../../../config/i18n.js";
+const InputClear = ({ onClear, className, style }) => {
+  const { t } = useTranslation(ns);
+  return /* @__PURE__ */ jsx(
+    InlineIconButton,
+    {
+      color: "secondary",
+      className: clsx(
+        "group-hover/date-picker-content:flex! group-hover/select-content:flex! hidden! items-center group-focus-within:flex group-hover:flex",
+        className
+      ),
+      label: t(($) => $.ui.clearAlt),
+      icon: CloseIcon,
+      onPress: onClear,
+      excludeFromTabOrder: true,
+      style
+    }
+  );
+};
+export {
+  InputClear
+};

package/dist/components/inputs/shared/input.cva.js

@@ -0,0 +1,168 @@
+import { cva } from "class-variance-authority";
+import { clsx } from "clsx";
+import { uiOutlineClass } from "../../outline.clsx.js";
+import { UIStyle } from "../../../config/uiStyle.context.js";
+const inputBase = cva([uiOutlineClass, "flex w-full truncate"], {
+  variants: {
+    variant: {
+      outlined: "",
+      filled: ""
+    },
+    as: {
+      default: "rounded-input-rounding-default",
+      floating: "rounded-input-rounding-default",
+      filter: "rounded-input-rounding-default",
+      inline: [
+        "h-full",
+        "border-transparent border-b-0 bg-transparent text-text-default-1",
+        "hover:border-input-outlined-outline-hover",
+        "focus:border-input-outlined-outline-active",
+        "invalid:border-input-outlined-outline-error",
+        "disabled:hover:border-transparent"
+      ]
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "outlined",
+      as: "default",
+      className: [
+        "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+        "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
+    },
+    {
+      variant: "filled",
+      as: "default",
+      className: [
+        "bg-input-filled-idle text-text-default-1",
+        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+        "disabled:bg-input-filled-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
+    },
+    {
+      variant: "outlined",
+      as: "floating",
+      className: [
+        "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+        "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
+    },
+    {
+      variant: "filled",
+      as: "floating",
+      className: [
+        "bg-input-filled-idle text-text-default-1",
+        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-idle focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+        "disabled:bg-input-filled-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
+    },
+    {
+      variant: "outlined",
+      as: "filter",
+      className: [
+        "border border-input-outlined-outline-idle border-solid bg-input-outlined-idle text-text-default-1",
+        "hover:border-input-outlined-outline-hover hover:border-solid hover:bg-input-outlined-hover hover:text-text-default-1",
+        "focus-within:border-input-outlined-outline-active focus-within:border-solid focus-within:bg-input-outlined-active focus-within:text-text-default-1",
+        "invalid:border-input-outlined-outline-error invalid:border-solid invalid:bg-input-outlined-error invalid:text-text-default-1",
+        "disabled:border-input-outlined-outline-disabled disabled:border-solid disabled:bg-input-outlined-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
+    },
+    {
+      variant: "outlined",
+      as: "filter",
+      className: [
+        "bg-input-filled-idle text-text-default-1",
+        "hover:border hover:border-input-filled-outline-hover hover:border-solid hover:bg-input-filled-hover hover:text-text-default-1",
+        "focus-within:border focus-within:border-input-filled-outline-active focus-within:border-solid focus-within:bg-input-filled-active focus-within:text-text-default-1",
+        "invalid:border invalid:border-input-filled-outline-error invalid:border-solid invalid:bg-input-filled-error invalid:text-text-default-1",
+        "disabled:bg-input-filled-disabled disabled:text-text-default-1",
+        "placeholder:text-text-default-3",
+        "focus-visible:outline-interactive-contained-primary-focus"
+      ]
+    }
+  ],
+  defaultVariants: {
+    variant: "outlined",
+    as: "default"
+  }
+});
+const inputSize = cva("", {
+  variants: {
+    size: {
+      "extra-small": "px-input-side-xs py-input-height-extra-small text-label-1",
+      small: "px-input-side-s py-input-height-small text-label-1",
+      default: "px-input-side-m py-input-height-default text-label-1",
+      large: "px-input-side-l py-input-height-large text-label-1"
+    }
+  },
+  defaultVariants: {
+    size: "default"
+  }
+});
+const inputSide = cva("", {
+  variants: {
+    size: {
+      "extra-small": "",
+      small: "",
+      default: "",
+      large: ""
+    },
+    type: {
+      left: "",
+      right: "",
+      var: ""
+    }
+  },
+  compoundVariants: [
+    { type: "left", size: "extra-small", className: "left-input-side-xs" },
+    { type: "right", size: "extra-small", className: "right-input-side-xs" },
+    { type: "var", size: "extra-small", className: "--spacing-input-side-xs" },
+    { type: "left", size: "small", className: "left-input-side-s" },
+    { type: "right", size: "small", className: "right-input-side-s" },
+    { type: "var", size: "small", className: "--spacing-input-side-s" },
+    { type: "left", size: "default", className: "left-input-side-m" },
+    { type: "right", size: "default", className: "right-input-side-m" },
+    { type: "var", size: "default", className: "--spacing-input-side-m" },
+    { type: "left", size: "large", className: "left-input-side-l" },
+    { type: "right", size: "large", className: "right-input-side-l" },
+    { type: "var", size: "large", className: "--spacing-input-side-l" }
+  ],
+  defaultVariants: {
+    size: "default"
+  }
+});
+const useInputCva = () => {
+  const uiStyle = UIStyle.useConfig();
+  const inputBaseCva = uiStyle?.input?.baseCva ?? inputBase;
+  const inputSizeCva = uiStyle?.input?.sizeCva ?? inputSize;
+  return ({ className, ...rest }) => {
+    return clsx(inputBaseCva(rest), inputSizeCva(rest), className);
+  };
+};
+export {
+  inputBase,
+  inputSide,
+  inputSize,
+  useInputCva
+};

package/{src → dist}/components/inputs/shared/label.cva.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from 'class-variance-authority';
-import { TypographyVariantProps } from '#ui/components/text/Typography/typography.cva';
+import { TypographyVariantProps } from '../../text/Typography/typography.cva';
 export declare const labelBase: (props?: ({
     as?: "default" | "filter" | "inline" | "floating" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;