@intlayer/design-system 3.1.0 → 3.2.0

package/dist/TabSelector-BmkzVPXl.js

@@ -0,0 +1,660 @@
+"use client";
+import { j as jsxRuntimeExports } from "./jsx-runtime-BgSF1HG2.js";
+import { cva } from "class-variance-authority";
+import { forwardRef, useState, useRef, createElement, cloneElement } from "react";
+import "./hooks/useScrollBlockage/useScrollBlockageStore.mjs";
+import "./hooks/useAsync/useAsyncStateStore.mjs";
+import { cn } from "./utils/cn.mjs";
+import { X } from "lucide-react";
+import { Container } from "./components/Container/index.mjs";
+import "zustand";
+import "./components/DictionaryEditor/useEditedContentStore.mjs";
+import "./components/DictionaryEditor/useEditionPanelStore.mjs";
+import "@intlayer/core";
+import { Button } from "./components/Button/Button.mjs";
+import { EditableFieldInput } from "./components/EditableField/EditableFieldInput.mjs";
+import { EditableFieldTextArea } from "./components/EditableField/EditableFieldTextArea.mjs";
+import "react-intlayer";
+import { Form as Form$1 } from "./components/Form/FormBase.mjs";
+import { useFormField, FormField } from "./components/Form/FormField.mjs";
+import { useFormContext } from "react-hook-form";
+import { FormLabelLayout } from "./components/Form/layout/FormLabelLayout.mjs";
+import "clsx";
+import "tailwind-merge";
+import "./components/Form/FormLabel.mjs";
+import { Input } from "./components/Input/Input.mjs";
+import { InputPassword } from "./components/Input/InputPassword.mjs";
+import { Checkbox } from "./components/Input/Checkbox.mjs";
+import { TextArea } from "./components/TextArea/TextArea.mjs";
+import { MultiSelect } from "./components/Select/Multiselect.mjs";
+import { Select } from "./components/Select/Select.mjs";
+import "./components/Toaster/Toast.mjs";
+import "./components/DictionaryEditor/validDictionaryChangeButtons.content.mjs";
+import "zod";
+import "./libs/intlayer-api/auth.mjs";
+import "./libs/intlayer-api/dictionary.mjs";
+import "./libs/intlayer-api/organization.mjs";
+import "./libs/intlayer-api/project.mjs";
+import "./libs/intlayer-api/user.mjs";
+import { motion } from "framer-motion";
+import { createPortal } from "react-dom";
+import { useGetElementOrWindow } from "./hooks/useGetElementOrWindow.mjs";
+import { useScrollBlockage } from "./hooks/useScrollBlockage/index.mjs";
+import { H3 } from "./components/Headers/index.mjs";
+import "./components/Auth/AuthProvider/index.mjs";
+import "./components/DictionaryFieldEditor/DictionaryDetails/dictionaryDetails.content.mjs";
+import "./components/DictionaryFieldEditor/dictionaryFieldEditor.content.mjs";
+import "./components/Label/index.mjs";
+import "./components/DictionaryFieldEditor/editorView.content.mjs";
+import "@intlayer/config/client";
+import "./components/DictionaryFieldEditor/nodeTypeSelector.content.mjs";
+import "./components/TextArea/AutoSizeTextArea.mjs";
+import "./components/DictionaryFieldEditor/NavigationView/navigationViewNode.content.mjs";
+import "./components/Link/Link.mjs";
+import "./components/DictionaryFieldEditor/SaveForm/saveForm.content.mjs";
+import "./components/DictionaryFieldEditor/DictionariesSelector/dictionariesSelector.content.mjs";
+import "./components/DictionaryFieldEditor/DictionaryCreationForm/dictionaryCreationForm.content.mjs";
+import "./components/DropDown/index.mjs";
+import "./components/IDE/CodeRender.mjs";
+import "markdown-to-jsx";
+import "./components/Flags/Flag.mjs";
+import "./components/Badge/index.mjs";
+import "./components/Command/index.mjs";
+import { useItemSelector } from "./hooks/useItemSelector.mjs";
+import "@intlayer/dictionaries-entry";
+import "deepmerge";
+import { FormControl } from "./components/Form/FormControl.mjs";
+import { FormDescription } from "./components/Form/FormDescription.mjs";
+import { FormItem } from "./components/Form/FormItem.mjs";
+import { FormMessage } from "./components/Form/FormMessage.mjs";
+const FormItemLayout = ({
+  label,
+  description,
+  isRequired,
+  info,
+  children,
+  showErrorMessage = true,
+  htmlFor
+}) => /* @__PURE__ */ jsxRuntimeExports.jsxs(Form.Item, { className: "w-full space-y-2", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-1 leading-none", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(FormLabelLayout, { isRequired, info, htmlFor, children: label }),
+    description && /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Description, { children: description })
+  ] }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Control, { children }),
+  showErrorMessage && /* @__PURE__ */ jsxRuntimeExports.jsx(Form.Message, { "data-testid": "error-message" })
+] });
+const FormFieldElement = ({
+  field,
+  name,
+  label,
+  Element,
+  isRequired = false,
+  info,
+  description,
+  showErrorMessage = true,
+  ...props
+}) => {
+  const { error } = useFormField();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    FormItemLayout,
+    {
+      htmlFor: name,
+      label,
+      description,
+      isRequired,
+      info,
+      showErrorMessage,
+      "aria-invalid": !!error,
+      children: /* @__PURE__ */ jsxRuntimeExports.jsx(Element, { "data-testid": "element", id: name, ...field, ...props, children: props.children })
+    }
+  );
+};
+const FormElement = (props) => {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Form.Field,
+    {
+      control,
+      name: props.name,
+      render: ({ field }) => /* @__PURE__ */ jsxRuntimeExports.jsx(FormFieldElement, { ...props, field })
+    }
+  );
+};
+const InputElement = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  FormElement,
+  {
+    id: props.name,
+    "data-testid": props.name,
+    Element: Input,
+    ...props
+  }
+);
+const InputPasswordElement = ({
+  autoComplete,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  FormElement,
+  {
+    Element: InputPassword,
+    id: props.name,
+    "data-testid": props.name,
+    autoComplete,
+    minLength: 6,
+    maxLength: 255,
+    ...props
+  }
+);
+const TextAreaElement = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  FormElement,
+  {
+    Element: TextArea,
+    id: props.name,
+    "data-testid": props.name,
+    ...props
+  }
+);
+const EditableFieldInputElement = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  FormElement,
+  {
+    id: props.name,
+    "data-testid": props.name,
+    Element: EditableFieldInput,
+    ...props
+  }
+);
+const EditableFieldTextAreaElement = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  FormElement,
+  {
+    id: props.name,
+    "data-testid": props.name,
+    Element: EditableFieldTextArea,
+    ...props
+  }
+);
+const CheckboxComponent = forwardRef(
+  ({ inputLabel, ...props }, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx(Checkbox, { ref, ...props, label: inputLabel })
+);
+CheckboxComponent.displayName = "CheckboxComponent";
+const CheckboxElement = ({
+  autoComplete,
+  ...props
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+  FormElement,
+  {
+    Element: CheckboxComponent,
+    id: props.name,
+    "data-testid": props.name,
+    autoComplete,
+    minLength: 6,
+    maxLength: 255,
+    ...props
+  }
+);
+const MultiSelectElement = ({
+  name,
+  description,
+  label,
+  isRequired,
+  info,
+  showErrorMessage,
+  children,
+  ...props
+}) => {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Form.Field,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        const { error } = useFormField();
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FormItemLayout,
+          {
+            htmlFor: name,
+            label,
+            description,
+            isRequired,
+            info,
+            showErrorMessage,
+            "aria-invalid": !!error,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              MultiSelect,
+              {
+                onValueChange: field.onChange,
+                values: field.value,
+                ...props,
+                children
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+};
+const SelectElement = ({
+  name,
+  description,
+  label,
+  isRequired,
+  info,
+  showErrorMessage,
+  children,
+  ...props
+}) => {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Form.Field,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        const { error } = useFormField();
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FormItemLayout,
+          {
+            htmlFor: name,
+            label,
+            description,
+            isRequired,
+            info,
+            showErrorMessage,
+            "aria-invalid": !!error,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+              Select,
+              {
+                onValueChange: field.onChange,
+                defaultValue: field.value,
+                ...props,
+                children
+              }
+            )
+          }
+        );
+      }
+    }
+  );
+};
+const defaultChoices = [
+  { content: "Off", value: false },
+  { content: "On", value: true }
+];
+const switchSelectorVariant = cva(
+  "flex flex-row gap-2 rounded-full w-fit border-[1.5px] p-[1.5px]",
+  {
+    variants: {
+      color: {
+        primary: "border-primary text-primary dark:border-primary-dark dark:text-primary-dark",
+        secondary: "border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark",
+        destructive: "border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark",
+        neutral: "border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark",
+        light: "border-white text-white",
+        dark: "border-neutral-800 text-neutral-800",
+        text: "border-text text-text dark:border-text-dark dark:text-text-dark"
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  }
+);
+const choiceVariant = cva(
+  "z-1 text-sm font-medium transition-all duration-300 ease-in-out aria-selected:cursor-default aria-selected:text-text-dark motion-reduce:transition-none dark:aria-selected:text-text",
+  {
+    variants: {
+      size: {
+        sm: "py-1 px-2 text-xs",
+        md: "p-2 text-sm",
+        lg: "p-4 text-base"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+const indicatorVariant$1 = cva(
+  "absolute top-0 z-[-1] h-full w-auto rounded-full transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
+  {
+    variants: {
+      color: {
+        primary: "bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark",
+        secondary: "bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark",
+        destructive: "bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark",
+        neutral: "bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text",
+        light: "bg-white aria-selected:text-black",
+        dark: "bg-neutral-800 aria-selected:text-white",
+        text: "bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text"
+      }
+    }
+  }
+);
+const SwitchSelector = ({
+  choices = defaultChoices,
+  value,
+  defaultValue,
+  onChange,
+  color = "primary",
+  size = "md",
+  className
+}) => {
+  const [valueState, setValue] = useState(
+    value ?? defaultValue ?? choices[0].value
+  );
+  const optionsRefs = useRef([]);
+  const indicatorRef = useRef(null);
+  const { choiceIndicatorPosition } = useItemSelector(optionsRefs);
+  const handleChange = (newValue) => {
+    setValue(newValue);
+    onChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: switchSelectorVariant({
+        color,
+        className
+      }),
+      role: "tablist",
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative flex size-full flex-row items-center justify-center", children: [
+        choices.map((choice, index) => {
+          const { content, value: value2, ...buttonProps } = choice;
+          const isKeyOfKey = typeof value2 === "string" || typeof value2 === "number";
+          const isSelected = value2 === valueState;
+          return /* @__PURE__ */ createElement(
+            "button",
+            {
+              ...buttonProps,
+              className: cn(
+                choiceVariant({
+                  size
+                })
+              ),
+              key: isKeyOfKey ? value2 : index,
+              role: "tab",
+              onClick: () => handleChange(value2),
+              "aria-selected": isSelected,
+              disabled: isSelected,
+              ref: (el) => {
+                optionsRefs.current[index] = el;
+              }
+            },
+            content
+          );
+        }),
+        choiceIndicatorPosition && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: cn(
+              indicatorVariant$1({
+                color
+              })
+            ),
+            style: choiceIndicatorPosition,
+            ref: indicatorRef
+          }
+        )
+      ] })
+    }
+  );
+};
+const SwitchSelectorElement = ({
+  name,
+  description,
+  label,
+  isRequired,
+  info,
+  showErrorMessage,
+  children,
+  ...props
+}) => {
+  const { control } = useFormContext();
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Form.Field,
+    {
+      control,
+      name,
+      render: ({ field }) => {
+        const { error } = useFormField();
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FormItemLayout,
+          {
+            htmlFor: name,
+            label,
+            description,
+            isRequired,
+            info,
+            showErrorMessage,
+            "aria-invalid": !!error,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(SwitchSelector, { ...field, ...props, children })
+          }
+        );
+      }
+    }
+  );
+};
+const Form = Form$1;
+Form.Description = FormDescription;
+Form.Control = FormControl;
+Form.Field = FormField;
+Form.Item = FormItem;
+Form.Label = FormLabelLayout;
+Form.Message = FormMessage;
+Form.Element = FormElement;
+Form.Input = InputElement;
+Form.InputPassword = InputPasswordElement;
+Form.Checkbox = CheckboxElement;
+Form.TextArea = TextAreaElement;
+Form.Button = Button;
+Form.Select = SelectElement;
+Form.MultiSelect = MultiSelectElement;
+Form.EditableFieldInput = EditableFieldInputElement;
+Form.EditableFieldTextArea = EditableFieldTextAreaElement;
+Form.SwitchSelector = SwitchSelectorElement;
+const modalVariants = cva(
+  "cursor-default overflow-auto p-3 shadow justify-center",
+  {
+    variants: {
+      variant: {
+        sm: "w-full max-h-[30vh] max-w-[30vw]",
+        md: "w-full max-h-[50vh] max-w-[50vw]",
+        lg: "w-full max-h-[70vh] max-w-[70vw]",
+        xl: "w-full max-h-[95vh] max-w-[95vw]",
+        unset: "max-h-[95vh] max-w-[95vw]"
+      }
+    },
+    defaultVariants: {
+      variant: "unset"
+    }
+  }
+);
+const MotionModal = motion.create(Container);
+const Modal = ({
+  children,
+  isOpen,
+  container,
+  disableScroll = false,
+  onClose,
+  hasCloseButton = false,
+  title,
+  size = "unset",
+  ...props
+}) => {
+  const containerElement = useGetElementOrWindow(container);
+  useScrollBlockage({ key: "modal", disableScroll: isOpen && disableScroll });
+  if (!containerElement) return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+  const hasTitle = typeof title === "string";
+  return createPortal(
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      motion.div,
+      {
+        className: cn(
+          "bg-background/40 dark:bg-background-dark/40 fixed left-0 top-0 z-50 flex size-full cursor-pointer items-center justify-center overflow-auto backdrop-blur",
+          isOpen ? "visible" : "hidden"
+        ),
+        initial: { opacity: isOpen ? 0 : 1 },
+        animate: { opacity: isOpen ? 1 : 0 },
+        transition: { duration: 0.1 },
+        onClick: (e) => {
+          e.stopPropagation();
+          onClose();
+        },
+        "aria-hidden": !isOpen,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          MotionModal,
+          {
+            onClick: (e) => e.stopPropagation(),
+            initial: { scale: isOpen ? 0.5 : 1 },
+            animate: { scale: isOpen ? 1 : 0.5 },
+            transition: { duration: 0.3 },
+            className: cn(
+              modalVariants({
+                variant: size
+              })
+            ),
+            role: "dialog",
+            "aria-modal": true,
+            roundedSize: "2xl",
+            ...props,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                "div",
+                {
+                  className: cn(
+                    hasCloseButton && hasTitle ? `flex items-center justify-center` : hasCloseButton ? `flex items-center justify-end` : hasTitle ? `items-center` : `hidden`
+                  ),
+                  children: [
+                    hasTitle && /* @__PURE__ */ jsxRuntimeExports.jsx(H3, { className: "flex items-center justify-center text-lg font-bold", children: title }),
+                    hasCloseButton && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                      X,
+                      {
+                        role: "button",
+                        "aria-label": "Close modal",
+                        className: "right-2 top-2 ml-auto cursor-pointer",
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          onClose();
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-2 my-4 flex flex-1 flex-col items-center overflow-auto", children })
+            ]
+          }
+        )
+      }
+    ),
+    containerElement
+  );
+};
+const tabSelectorVariant = cva(
+  "relative flex size-full flex-row items-center gap-2",
+  {
+    variants: {
+      color: {
+        primary: "border-primary text-primary dark:border-primary-dark dark:text-primary-dark",
+        secondary: "border-secondary text-secondary dark:border-secondary-dark dark:text-secondary-dark",
+        destructive: "border-destructive bg-destructive text-destructive dark:border-destructive-dark dark:bg-destructive-dark",
+        neutral: "border-neutral text-neutral dark:border-neutral-dark dark:text-neutral-dark",
+        light: "border-white text-white",
+        dark: "border-neutral-800 text-neutral-800",
+        text: "border-text text-text dark:border-text-dark dark:text-text-dark"
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  }
+);
+const indicatorVariant = cva(
+  "absolute top-0 z-[-1] h-full w-auto rounded-lg opacity-10 transition-[left,width] duration-300 ease-in-out motion-reduce:transition-none",
+  {
+    variants: {
+      color: {
+        primary: "bg-primary aria-selected:text-text dark:bg-primary-dark dark:aria-selected:text-text-dark",
+        secondary: "bg-secondary aria-selected:text-text dark:bg-secondary-dark dark:aria-selected:text-text-dark",
+        destructive: "bg-destructive aria-selected:text-text dark:bg-destructive-dark dark:aria-selected:text-text-dark",
+        neutral: "bg-neutral aria-selected:text-white dark:bg-neutral-dark dark:aria-selected:text-text",
+        light: "bg-white aria-selected:text-black",
+        dark: "bg-neutral-800 aria-selected:text-white",
+        text: "bg-text aria-selected:text-text-dark dark:bg-text-dark dark:aria-selected:text-text"
+      }
+    }
+  }
+);
+const TabSelector = ({
+  tabs,
+  selectedChoice,
+  onTabClick,
+  color = "primary",
+  hoverable = false,
+  className
+}) => {
+  const optionsRefs = useRef([]);
+  const indicatorRef = useRef(null);
+  const { choiceIndicatorPosition } = useItemSelector(
+    optionsRefs,
+    void 0,
+    hoverable
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "div",
+    {
+      className: cn(
+        tabSelectorVariant({
+          color
+        }),
+        className
+      ),
+      "aria-orientation": "horizontal",
+      "aria-multiselectable": "false",
+      role: "tablist",
+      children: [
+        tabs.map((Tab, index) => {
+          const key = Tab.key;
+          const isSelected = selectedChoice === key;
+          return cloneElement(Tab, {
+            key: key ?? index,
+            role: "tab",
+            onClick: () => onTabClick?.(key),
+            "aria-selected": isSelected,
+            ref: (el) => {
+              optionsRefs.current[index] = el;
+            }
+          });
+        }),
+        choiceIndicatorPosition && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            className: indicatorVariant({
+              color
+            }),
+            style: choiceIndicatorPosition,
+            ref: indicatorRef
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  CheckboxElement as C,
+  EditableFieldInputElement as E,
+  Form as F,
+  InputElement as I,
+  Modal as M,
+  SwitchSelector as S,
+  TabSelector as T,
+  FormItemLayout as a,
+  FormElement as b,
+  InputPasswordElement as c,
+  TextAreaElement as d,
+  EditableFieldTextAreaElement as e,
+  MultiSelectElement as f,
+  SelectElement as g,
+  SwitchSelectorElement as h
+};
+//# sourceMappingURL=TabSelector-BmkzVPXl.js.map