@intlayer/design-system 3.2.2 → 3.3.3

package/dist/TabSelector-BmkzVPXl.js

@@ -1,660 +0,0 @@
-"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