@mercurjs/admin 2.0.0 → 2.0.1

package/dist/attribute-create-IRJTPQCF.js

@@ -0,0 +1,996 @@
+import {
+  AttributeUIComponent,
+  CreateAttributeSchema,
+  UpdateAttributeSchema
+} from "./chunk-4ZTZTIIM.js";
+import {
+  RouteFocusModal,
+  useRouteModal
+} from "./chunk-OV7R2AH5.js";
+import {
+  Form
+} from "./chunk-3QSRE5LS.js";
+import "./chunk-3MDRW5MA.js";
+import "./chunk-MFL2TZ3W.js";
+import "./chunk-YNIIYGL4.js";
+import "./chunk-CBHNHLUZ.js";
+import "./chunk-VME3CJER.js";
+import {
+  useCreateAttribute
+} from "./chunk-XMVTX2EN.js";
+import "./chunk-5PUHROK4.js";
+import "./chunk-TPPONKYW.js";
+import "./chunk-DF3OGJAK.js";
+import "./chunk-XRDP2SYY.js";
+import "./chunk-FNBKEF54.js";
+import "./chunk-EHQESDH2.js";
+import "./chunk-XKVXLDSJ.js";
+import "./chunk-XDZGOUCR.js";
+import "./chunk-K4BGK3CO.js";
+import "./chunk-YYTI5JIC.js";
+import "./chunk-HAFZQK53.js";
+import "./chunk-IJWG755C.js";
+import "./chunk-M3YP3NX4.js";
+import "./chunk-UU2RQMXS.js";
+import "./chunk-O4STPJR2.js";
+import "./chunk-R74OHYTB.js";
+import "./chunk-22XJUSMM.js";
+import "./chunk-OFKUNYQJ.js";
+import "./chunk-W5UPPL3W.js";
+import "./chunk-LC6TM5OT.js";
+import "./chunk-7SJC6BWZ.js";
+import "./chunk-N4JU7GWK.js";
+import {
+  useProductCategories
+} from "./chunk-52BRBQMY.js";
+import "./chunk-BA2HXHTW.js";
+import "./chunk-RHKRREUU.js";
+import "./chunk-ZA2KFUFR.js";
+import "./chunk-RIN4CBRB.js";
+import "./chunk-NBMM2TZK.js";
+
+// src/pages/attributes/attribute-create/attribute-create.tsx
+import { useRef as useRef2, useState as useState3 } from "react";
+import { Button as Button2, Heading, ProgressTabs, Text as Text3, toast } from "@medusajs/ui";
+import { useTranslation as useTranslation4 } from "react-i18next";
+
+// src/pages/attributes/attribute-edit/components/attribute-form.tsx
+import { forwardRef, useEffect as useEffect2, useMemo, useImperativeHandle, useState as useState2 } from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  InlineTip,
+  Input as Input2,
+  Select,
+  Switch,
+  Text as Text2,
+  Textarea
+} from "@medusajs/ui";
+import { FormProvider, useForm, useWatch } from "react-hook-form";
+import { useTranslation as useTranslation3 } from "react-i18next";
+
+// src/pages/attributes/attribute-create/components/multi-select-category.tsx
+import { useEffect, useRef, useState } from "react";
+import {
+  ArrowUturnLeft,
+  TriangleRightMini,
+  TrianglesMini,
+  XMarkMini
+} from "@medusajs/icons";
+import { Badge, Text } from "@medusajs/ui";
+import { useTranslation } from "react-i18next";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MultiSelectCategory = ({
+  categories,
+  value,
+  onChange
+}) => {
+  const { t } = useTranslation();
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+  const triggerRef = useRef(null);
+  const [currentParentId, setCurrentParentId] = useState(null);
+  const [pathHistory, setPathHistory] = useState([]);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target) && triggerRef.current && !triggerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, []);
+  const handleToggle = () => {
+    setIsOpen((prev) => !prev);
+  };
+  const hasChildren = (categoryId) => {
+    return categories.some((cat) => cat.parent_category_id === categoryId);
+  };
+  const handleDrillDown = (category, event) => {
+    event.stopPropagation();
+    setPathHistory([...pathHistory, currentParentId]);
+    setCurrentParentId(category.id);
+  };
+  const handleGoBack = () => {
+    const newPathHistory = [...pathHistory];
+    const previousParentId = newPathHistory.pop();
+    setPathHistory(newPathHistory);
+    setCurrentParentId(previousParentId || null);
+  };
+  const handleItemClick = (categoryId) => {
+    const isSelected = value.includes(categoryId);
+    if (isSelected) {
+      onChange(value.filter((id) => id !== categoryId));
+    } else {
+      onChange([...value, categoryId]);
+    }
+  };
+  const currentCategories = categories.filter(
+    (cat) => cat.parent_category_id === currentParentId
+  );
+  const getBackButtonText = () => {
+    const parentCategory = categories.find((cat) => cat.id === currentParentId);
+    return parentCategory?.name || "";
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "relative",
+      "data-testid": "attribute-form-category-multiselect",
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: triggerRef,
+            className: "focus-within:ring-ui-ring-interactive relative flex h-10 w-full cursor-pointer items-center justify-between overflow-hidden rounded-md border border-ui-border-base bg-ui-bg-field text-ui-fg-base shadow-sm transition-colors duration-150 ease-in-out focus-within:border-ui-border-interactive focus-within:ring-1 hover:bg-ui-bg-field-hover",
+            onClick: handleToggle,
+            "data-testid": "attribute-form-category-multiselect-trigger",
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "flex items-center gap-2 px-3 py-2",
+                  "data-testid": "attribute-form-category-multiselect-trigger-content",
+                  children: value.length > 0 ? /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (e) => {
+                        e.stopPropagation();
+                        onChange([]);
+                      },
+                      "data-testid": "attribute-form-category-multiselect-clear-button",
+                      children: /* @__PURE__ */ jsxs(
+                        Badge,
+                        {
+                          size: "small",
+                          className: "w-fit",
+                          "data-testid": "attribute-form-category-multiselect-badge",
+                          children: [
+                            value.length,
+                            /* @__PURE__ */ jsx(XMarkMini, {})
+                          ]
+                        }
+                      )
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      className: "text-ui-fg-subtle",
+                      "data-testid": "attribute-form-category-multiselect-placeholder",
+                      children: t("attributes.fields.categories", "Select categories")
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "flex h-full w-10 items-center justify-center border-l border-ui-border-base",
+                  "data-testid": "attribute-form-category-multiselect-icon",
+                  children: /* @__PURE__ */ jsx(TrianglesMini, {})
+                }
+              )
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: dropdownRef,
+            className: "absolute z-10 mt-1 max-h-60 w-full overflow-y-auto rounded-md border border-ui-border-base bg-ui-bg-base shadow-lg",
+            "data-testid": "attribute-form-category-multiselect-dropdown",
+            children: [
+              currentParentId !== null && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "flex cursor-pointer items-center gap-3 border-b border-ui-border-base px-3 py-2 text-ui-fg-subtle hover:bg-ui-bg-base-hover",
+                  onClick: handleGoBack,
+                  "data-testid": "attribute-form-category-multiselect-back-button",
+                  children: [
+                    /* @__PURE__ */ jsx(ArrowUturnLeft, {}),
+                    /* @__PURE__ */ jsx(Text, { "data-testid": "attribute-form-category-multiselect-back-text", children: getBackButtonText() })
+                  ]
+                }
+              ),
+              currentCategories.length === 0 ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "p-3 text-ui-fg-subtle",
+                  "data-testid": "attribute-form-category-multiselect-empty",
+                  children: t("general.noResultsTitle", "No categories found.")
+                }
+              ) : currentCategories.map((category) => {
+                const isSelected = value.includes(category.id);
+                const hasChildrenNode = hasChildren(category.id);
+                return /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: "flex cursor-pointer items-center justify-between px-1 py-1",
+                    onClick: () => handleItemClick(category.id),
+                    "data-testid": `attribute-form-category-multiselect-item-${category.id}`,
+                    children: [
+                      /* @__PURE__ */ jsxs(
+                        "div",
+                        {
+                          className: "relative mr-2 flex flex-1 items-center rounded-md px-2 py-1.5 hover:bg-ui-bg-base-hover",
+                          "data-testid": `attribute-form-category-multiselect-item-${category.id}-content`,
+                          children: [
+                            isSelected && /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "absolute left-3 top-1/2 h-1 w-1 -translate-y-1/2 rounded-full bg-ui-fg-base",
+                                "data-testid": `attribute-form-category-multiselect-item-${category.id}-selected-indicator`
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              Text,
+                              {
+                                className: "ml-6",
+                                "data-testid": `attribute-form-category-multiselect-item-${category.id}-name`,
+                                children: category.name
+                              }
+                            )
+                          ]
+                        }
+                      ),
+                      hasChildrenNode && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          onClick: (e) => handleDrillDown(category, e),
+                          className: "rounded-md p-2 hover:bg-ui-bg-base-hover",
+                          "data-testid": `attribute-form-category-multiselect-item-${category.id}-drill-down`,
+                          children: /* @__PURE__ */ jsx(TriangleRightMini, { className: "mr-1" })
+                        }
+                      )
+                    ]
+                  },
+                  category.id
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/pages/attributes/attribute-create/components/possible-values-list.tsx
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { DotsSix, XMark } from "@medusajs/icons";
+import { Button, Hint, IconButton, Input, Label } from "@medusajs/ui";
+import { useFieldArray, useFormContext } from "react-hook-form";
+import { useTranslation as useTranslation2 } from "react-i18next";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var SortableItem = ({ id, index, onRemove }) => {
+  const {
+    register,
+    formState: { errors }
+  } = useFormContext();
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+  const possibleValuesErrors = errors?.possible_values;
+  const fieldError = Array.isArray(possibleValuesErrors) ? possibleValuesErrors[index]?.value : void 0;
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        ref: setNodeRef,
+        style,
+        className: "flex items-center gap-2 p-2 bg-ui-bg-component border border-ui-border-base rounded-xl mb-2",
+        "data-testid": `attribute-form-possible-value-item-${index}`,
+        children: [
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: "cursor-grab active:cursor-grabbing",
+              ...attributes,
+              ...listeners,
+              "data-testid": `attribute-form-possible-value-drag-handle-${index}`,
+              children: /* @__PURE__ */ jsx2(DotsSix, { className: "text-ui-fg-subtle" })
+            }
+          ),
+          /* @__PURE__ */ jsx2("div", { className: "flex-1", children: /* @__PURE__ */ jsx2(
+            Input,
+            {
+              className: "flex-1",
+              "aria-invalid": !!fieldError,
+              placeholder: "Enter value",
+              ...register(`possible_values.${index}.value`),
+              "data-testid": `attribute-form-possible-value-input-${index}`
+            }
+          ) }),
+          /* @__PURE__ */ jsx2(
+            IconButton,
+            {
+              variant: "transparent",
+              size: "small",
+              type: "button",
+              onClick: onRemove,
+              "data-testid": `attribute-form-possible-value-remove-button-${index}`,
+              children: /* @__PURE__ */ jsx2(XMark, {})
+            }
+          )
+        ]
+      }
+    ),
+    fieldError && /* @__PURE__ */ jsx2(
+      Hint,
+      {
+        variant: "error",
+        className: "mb-2",
+        "data-testid": `attribute-form-possible-value-error-${index}`,
+        children: fieldError.message
+      }
+    )
+  ] });
+};
+var PossibleValuesList = () => {
+  const { t } = useTranslation2();
+  const { control, getValues, formState } = useFormContext();
+  const { fields, append, remove, update } = useFieldArray({
+    control,
+    name: "possible_values"
+  });
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates
+    })
+  );
+  const handleDragEnd = (event) => {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      const oldIndex = fields.findIndex((field) => field.id === active.id);
+      const newIndex = fields.findIndex((field) => field.id === over.id);
+      const currentValues = getValues("possible_values");
+      const reorderedValues = arrayMove(currentValues, oldIndex, newIndex);
+      reorderedValues.forEach((value, index) => {
+        update(index, {
+          value: value.value,
+          rank: index,
+          metadata: value.metadata || {}
+        });
+      });
+    }
+  };
+  const handleAddValue = (e) => {
+    e.preventDefault();
+    append({
+      value: "",
+      rank: fields.length,
+      metadata: {}
+    });
+  };
+  const possibleValuesError = formState.errors.possible_values;
+  const shouldShowListError = possibleValuesError && !Array.isArray(possibleValuesError);
+  return /* @__PURE__ */ jsxs2("div", { className: "space-y-2", "data-testid": "attribute-form-possible-values-list", children: [
+    /* @__PURE__ */ jsxs2(
+      "div",
+      {
+        className: "flex items-center justify-between pb-1",
+        "data-testid": "attribute-form-possible-values-header",
+        children: [
+          /* @__PURE__ */ jsx2(Label, { "data-testid": "attribute-form-possible-values-label", children: t("attributes.fields.possibleValues", "Possible Values") }),
+          /* @__PURE__ */ jsx2(
+            Button,
+            {
+              type: "button",
+              variant: "secondary",
+              size: "small",
+              onClick: handleAddValue,
+              "data-testid": "attribute-form-possible-values-add-button",
+              children: t("actions.add", "Add")
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      DndContext,
+      {
+        sensors,
+        collisionDetection: closestCenter,
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsx2(
+          SortableContext,
+          {
+            items: fields.map((field) => field.id),
+            strategy: verticalListSortingStrategy,
+            children: fields.map((field, index) => /* @__PURE__ */ jsx2(
+              SortableItem,
+              {
+                id: field.id,
+                index,
+                onRemove: () => remove(index)
+              },
+              field.id
+            ))
+          }
+        )
+      }
+    ),
+    shouldShowListError && /* @__PURE__ */ jsx2(
+      Hint,
+      {
+        variant: "error",
+        "data-testid": "attribute-form-possible-values-list-error",
+        children: possibleValuesError.message
+      }
+    )
+  ] });
+};
+
+// src/pages/attributes/attribute-edit/components/attribute-form.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var UI_COMPONENT_LABELS = {
+  select: "Single Select",
+  multivalue: "Multi Select",
+  unit: "Unit",
+  toggle: "Toggle",
+  text_area: "Text"
+};
+var AttributeForm = forwardRef(
+  ({
+    initialData,
+    onSubmit,
+    categories,
+    mode = "create",
+    activeTab = "details",
+    onFormStateChange
+  }, ref) => {
+    const { t } = useTranslation3();
+    const [showCategorySection, setShowCategorySection] = useState2(
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      (initialData?.product_categories?.length || 0) > 0
+    );
+    const form = useForm({
+      resolver: zodResolver(
+        mode === "create" ? CreateAttributeSchema : UpdateAttributeSchema
+      ),
+      defaultValues: {
+        name: initialData?.name ?? "",
+        description: initialData?.description ?? "",
+        handle: initialData?.handle ?? "",
+        ui_component: initialData?.ui_component ?? AttributeUIComponent.SELECT,
+        is_filterable: initialData?.is_filterable ?? false,
+        is_required: initialData?.is_required ?? false,
+        possible_values: initialData?.possible_values?.map((v) => ({
+          id: v.id,
+          value: v.value,
+          rank: v.rank
+        })) ?? [],
+        product_category_ids: [],
+        metadata: {}
+      }
+    });
+    const handleSubmit = form.handleSubmit(async (data) => {
+      try {
+        await onSubmit(data);
+      } catch (error) {
+        console.error(error);
+      }
+    });
+    useImperativeHandle(ref, () => ({
+      validateFields: async (fields) => {
+        const result = await form.trigger(
+          fields
+        );
+        return result;
+      }
+    }));
+    const [name, description, handle, uiComponent, possibleValues] = useWatch({
+      control: form.control,
+      name: [
+        "name",
+        "description",
+        "handle",
+        "ui_component",
+        "possible_values"
+      ]
+    });
+    const formStateKey = useMemo(() => {
+      return JSON.stringify({
+        name,
+        description,
+        handle,
+        uiComponent,
+        valuesCount: possibleValues?.length ?? 0
+      });
+    }, [name, description, handle, uiComponent, possibleValues]);
+    useEffect2(() => {
+      if (!onFormStateChange) return;
+      const hasName = name?.trim();
+      const hasDetailsData = description?.trim() || handle?.trim();
+      const detailsStatus = hasName ? "completed" : hasDetailsData ? "in-progress" : "not-started";
+      const hasTypeData = uiComponent && (possibleValues?.length ?? 0) > 0;
+      const typeStatus = hasTypeData ? "completed" : "not-started";
+      onFormStateChange({
+        detailsStatus,
+        typeStatus
+      });
+    }, [formStateKey, onFormStateChange]);
+    const renderDetailsTab = () => /* @__PURE__ */ jsxs3("div", { className: "grid gap-6", "data-testid": "attribute-form-details-tab", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-4 md:grid-cols-2", children: [
+        /* @__PURE__ */ jsx3(
+          Form.Field,
+          {
+            control: form.control,
+            name: "name",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-name-field", children: [
+              /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-name-label", children: t("attributes.fields.name", "Name") }),
+              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-name-control", children: /* @__PURE__ */ jsx3(
+                Input2,
+                {
+                  ...field,
+                  size: "small",
+                  "data-testid": "attribute-form-name-input"
+                }
+              ) }),
+              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-name-error" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Form.Field,
+          {
+            control: form.control,
+            name: "handle",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-handle-field", children: [
+              /* @__PURE__ */ jsx3(Form.Label, { optional: true, "data-testid": "attribute-form-handle-label", children: t("attributes.fields.handle", "Handle") }),
+              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-handle-control", children: /* @__PURE__ */ jsxs3("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx3(
+                  Input2,
+                  {
+                    ...field,
+                    size: "small",
+                    className: "pl-9",
+                    "data-testid": "attribute-form-handle-input"
+                  }
+                ),
+                /* @__PURE__ */ jsx3("div", { className: "z-100 absolute bottom-0 left-0 top-0 flex w-7 items-center justify-center border-r border-ui-border-base px-2 text-ui-fg-muted", children: "/" })
+              ] }) }),
+              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-handle-error" })
+            ] })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs3("div", { className: "grid grid-cols-1 gap-4", children: [
+        /* @__PURE__ */ jsx3(
+          Form.Field,
+          {
+            control: form.control,
+            name: "description",
+            render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-description-field", children: [
+              /* @__PURE__ */ jsx3(
+                Form.Label,
+                {
+                  optional: true,
+                  "data-testid": "attribute-form-description-label",
+                  children: t("attributes.fields.description", "Description")
+                }
+              ),
+              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-description-control", children: /* @__PURE__ */ jsx3(
+                Textarea,
+                {
+                  ...field,
+                  "data-testid": "attribute-form-description-input"
+                }
+              ) }),
+              /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-description-error" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Form.Field,
+          {
+            control: form.control,
+            name: "is_filterable",
+            render: ({ field }) => /* @__PURE__ */ jsx3(Form.Item, { "data-testid": "attribute-form-filterable-field", children: /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-filterable-control", children: /* @__PURE__ */ jsx3(
+                Switch,
+                {
+                  checked: field.value,
+                  onCheckedChange: field.onChange,
+                  className: "mt-1",
+                  "data-testid": "attribute-form-filterable-switch"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { children: [
+                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-filterable-label", children: t(
+                  "attributes.fields.isFilterable",
+                  "Yes, this is a filterable attribute"
+                ) }),
+                /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
+                  "attributes.fields.isFilterableHint",
+                  "If checked, buyers will be able to filter products using this attribute."
+                ) })
+              ] })
+            ] }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Form.Field,
+          {
+            control: form.control,
+            name: "is_required",
+            render: ({ field }) => /* @__PURE__ */ jsx3(Form.Item, { "data-testid": "attribute-form-required-field", children: /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+              /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-required-control", children: /* @__PURE__ */ jsx3(
+                Switch,
+                {
+                  checked: field.value,
+                  onCheckedChange: field.onChange,
+                  className: "mt-1",
+                  "data-testid": "attribute-form-required-switch"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs3("div", { children: [
+                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-required-label", children: t(
+                  "attributes.fields.isRequired",
+                  "Yes, this is a required attribute"
+                ) }),
+                /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
+                  "attributes.fields.isRequiredHint",
+                  "If checked, vendors must set a value to this attribute."
+                ) })
+              ] })
+            ] }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          Form.Field,
+          {
+            control: form.control,
+            name: "product_category_ids",
+            render: ({ field }) => {
+              const categoryIds = field.value ?? [];
+              const isGlobal = categoryIds.length === 0 && !showCategorySection;
+              return /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-global-field", children: [
+                /* @__PURE__ */ jsx3("div", { className: "rounded-lg bg-ui-bg-component p-4 shadow-elevation-card-rest", children: /* @__PURE__ */ jsxs3("div", { className: "flex gap-3", children: [
+                  /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-global-control", children: /* @__PURE__ */ jsx3(
+                    Switch,
+                    {
+                      checked: isGlobal,
+                      onCheckedChange: (checked) => {
+                        if (checked) {
+                          field.onChange([]);
+                          setShowCategorySection(false);
+                        } else {
+                          setShowCategorySection(true);
+                        }
+                      },
+                      className: "mt-1",
+                      "data-testid": "attribute-form-global-switch"
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsxs3("div", { children: [
+                    /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-global-label", children: t(
+                      "attributes.fields.global",
+                      "Yes, this is a global attribute"
+                    ) }),
+                    /* @__PURE__ */ jsx3(Text2, { className: "mt-1 text-xs text-ui-fg-subtle", children: t(
+                      "attributes.hints.global",
+                      "When enabled, this attribute applies to all products regardless of category."
+                    ) })
+                  ] })
+                ] }) }),
+                (showCategorySection || categoryIds.length > 0) && /* @__PURE__ */ jsxs3("div", { className: "mt-4", "data-testid": "attribute-form-category-field", children: [
+                  /* @__PURE__ */ jsx3(
+                    Form.Label,
+                    {
+                      optional: true,
+                      "data-testid": "attribute-form-category-label",
+                      children: t("attributes.fields.categories", "Product Categories")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3("div", { className: "mt-1", children: /* @__PURE__ */ jsx3(
+                    MultiSelectCategory,
+                    {
+                      categories: categories ?? [],
+                      value: categoryIds,
+                      onChange: (value) => field.onChange(value)
+                    }
+                  ) }),
+                  /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-category-error" }),
+                  /* @__PURE__ */ jsx3("div", { className: "mt-3", children: /* @__PURE__ */ jsx3(InlineTip, { label: "Warning", variant: "warning", children: t(
+                    "attributes.hints.categoryInheritance",
+                    "Child categories will inherit this attribute."
+                  ) }) })
+                ] })
+              ] });
+            }
+          }
+        )
+      ] })
+    ] });
+    const renderTypeTab = () => /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "grid w-full gap-6",
+        "data-testid": "attribute-form-type-tab",
+        children: [
+          /* @__PURE__ */ jsx3(
+            Form.Field,
+            {
+              control: form.control,
+              name: "ui_component",
+              render: ({ field }) => /* @__PURE__ */ jsxs3(Form.Item, { "data-testid": "attribute-form-ui-component-field", children: [
+                /* @__PURE__ */ jsx3(Form.Label, { "data-testid": "attribute-form-ui-component-label", children: t("attributes.fields.type", "Type") }),
+                /* @__PURE__ */ jsx3(Form.Control, { "data-testid": "attribute-form-ui-component-control", children: /* @__PURE__ */ jsxs3(
+                  Select,
+                  {
+                    value: field.value,
+                    onValueChange: field.onChange,
+                    "data-testid": "attribute-form-ui-component-select",
+                    children: [
+                      /* @__PURE__ */ jsx3(
+                        Select.Trigger,
+                        {
+                          className: "mt-1",
+                          "data-testid": "attribute-form-ui-component-trigger",
+                          children: /* @__PURE__ */ jsx3(
+                            Select.Value,
+                            {
+                              placeholder: t(
+                                "attributes.fields.typePlaceholder",
+                                "Select Type"
+                              )
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx3(Select.Content, { "data-testid": "attribute-form-ui-component-content", children: Object.values(AttributeUIComponent).map((component) => /* @__PURE__ */ jsx3(
+                        Select.Item,
+                        {
+                          value: component,
+                          "data-testid": `attribute-form-ui-component-option-${component}`,
+                          children: UI_COMPONENT_LABELS[component] ?? component
+                        },
+                        component
+                      )) })
+                    ]
+                  }
+                ) }),
+                /* @__PURE__ */ jsx3(Form.ErrorMessage, { "data-testid": "attribute-form-ui-component-error" })
+              ] })
+            }
+          ),
+          (uiComponent === AttributeUIComponent.SELECT || uiComponent === AttributeUIComponent.MULTIVALUE) && /* @__PURE__ */ jsx3(InlineTip, { label: "Tip", variant: "info", children: uiComponent === AttributeUIComponent.SELECT ? t(
+            "attributes.tips.singleSelect",
+            "When creating Single Select vendor will be able to choose only one value. This type of attribute will be good for product specifications."
+          ) : t(
+            "attributes.tips.multiSelect",
+            "When creating Multi Select vendor will be able to choose multiple values."
+          ) }),
+          (uiComponent === AttributeUIComponent.SELECT || uiComponent === AttributeUIComponent.MULTIVALUE) && /* @__PURE__ */ jsx3("div", { "data-testid": "attribute-form-possible-values-section", children: /* @__PURE__ */ jsx3(PossibleValuesList, {}) })
+        ]
+      }
+    );
+    return /* @__PURE__ */ jsx3(FormProvider, { ...form, children: /* @__PURE__ */ jsxs3(
+      "form",
+      {
+        id: "attribute-form",
+        onSubmit: handleSubmit,
+        "data-testid": "attribute-form",
+        children: [
+          activeTab === "details" && renderDetailsTab(),
+          activeTab === "type" && renderTypeTab()
+        ]
+      }
+    ) });
+  }
+);
+AttributeForm.displayName = "AttributeForm";
+
+// src/pages/attributes/attribute-create/attribute-create.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var AttributeCreateInner = () => {
+  const { t } = useTranslation4();
+  const { handleSuccess } = useRouteModal();
+  const formRef = useRef2(null);
+  const [activeTab, setActiveTab] = useState3("details");
+  const [tabStatuses, setTabStatuses] = useState3({
+    detailsStatus: "not-started",
+    typeStatus: "not-started"
+  });
+  const { mutateAsync, isPending } = useCreateAttribute();
+  const { product_categories: categories = [] } = useProductCategories({
+    limit: 999
+  });
+  const handleSave = async (data) => {
+    await mutateAsync(data, {
+      onSuccess: () => {
+        toast.success(
+          t("attributes.create.successToast", {
+            name: data.name
+          })
+        );
+        handleSuccess("/settings/attributes");
+      },
+      onError: (error) => {
+        toast.error(error.message);
+      }
+    });
+  };
+  const handleTabChange = (value) => {
+    const newTab = value;
+    if (newTab === "type" && tabStatuses.detailsStatus === "not-started") {
+      toast.warning(
+        t(
+          "attributes.create.fillNameWarning",
+          "Please fill in the name first."
+        )
+      );
+      return;
+    }
+    setActiveTab(newTab);
+  };
+  const handleNext = async () => {
+    if (formRef.current) {
+      const isValid = await formRef.current.validateFields(["name"]);
+      if (isValid) {
+        setActiveTab("type");
+      }
+    } else {
+      setActiveTab("type");
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    ProgressTabs,
+    {
+      value: activeTab,
+      onValueChange: handleTabChange,
+      className: "flex size-full flex-col overflow-hidden",
+      "data-testid": "attribute-create-progress-tabs",
+      children: [
+        /* @__PURE__ */ jsx4(
+          RouteFocusModal.Header,
+          {
+            "data-testid": "attribute-create-modal-header",
+            children: /* @__PURE__ */ jsxs4(
+              ProgressTabs.List,
+              {
+                className: "justify-start flex w-full items-center",
+                "data-testid": "attribute-create-progress-tabs-list",
+                children: [
+                  /* @__PURE__ */ jsx4(
+                    ProgressTabs.Trigger,
+                    {
+                      value: "details",
+                      status: tabStatuses.detailsStatus,
+                      "data-testid": "attribute-create-details-tab",
+                      children: t("attributes.create.tabs.details", "Details")
+                    }
+                  ),
+                  /* @__PURE__ */ jsx4(
+                    ProgressTabs.Trigger,
+                    {
+                      value: "type",
+                      status: tabStatuses.typeStatus,
+                      "data-testid": "attribute-create-type-tab",
+                      children: t("attributes.create.tabs.type", "Type")
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx4(
+          RouteFocusModal.Body,
+          {
+            className: "flex flex-1 justify-center overflow-auto px-6 py-16",
+            "data-testid": "attribute-create-modal-body",
+            children: /* @__PURE__ */ jsxs4("div", { className: "flex w-full max-w-[720px] flex-col gap-y-8", children: [
+              /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-y-1", children: [
+                /* @__PURE__ */ jsx4(RouteFocusModal.Title, { asChild: true, children: /* @__PURE__ */ jsx4(Heading, { "data-testid": "attribute-create-modal-heading", children: t("attributes.create.header", "Create Attribute") }) }),
+                /* @__PURE__ */ jsx4(RouteFocusModal.Description, { asChild: true, children: /* @__PURE__ */ jsx4(
+                  Text3,
+                  {
+                    size: "small",
+                    className: "text-ui-fg-subtle",
+                    "data-testid": "attribute-create-modal-subtitle",
+                    children: t(
+                      "attributes.create.subtitle",
+                      "Define a new product attribute."
+                    )
+                  }
+                ) })
+              ] }),
+              /* @__PURE__ */ jsx4(
+                AttributeForm,
+                {
+                  ref: formRef,
+                  onSubmit: handleSave,
+                  categories,
+                  mode: "create",
+                  activeTab,
+                  onFormStateChange: setTabStatuses
+                }
+              )
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx4(RouteFocusModal.Footer, { "data-testid": "attribute-create-modal-footer", children: /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-end gap-2", children: [
+          /* @__PURE__ */ jsx4(RouteFocusModal.Close, { asChild: true, children: /* @__PURE__ */ jsx4(
+            Button2,
+            {
+              size: "small",
+              variant: "secondary",
+              type: "button",
+              "data-testid": "attribute-create-modal-cancel-button",
+              children: t("actions.cancel", "Cancel")
+            }
+          ) }),
+          activeTab === "details" ? /* @__PURE__ */ jsx4(
+            Button2,
+            {
+              size: "small",
+              type: "button",
+              onClick: handleNext,
+              "data-testid": "attribute-create-modal-next-button",
+              children: t("actions.continue", "Next")
+            }
+          ) : /* @__PURE__ */ jsx4(
+            Button2,
+            {
+              size: "small",
+              type: "submit",
+              form: "attribute-form",
+              isLoading: isPending,
+              "data-testid": "attribute-create-modal-save-button",
+              children: t("actions.save", "Save")
+            }
+          )
+        ] }) })
+      ]
+    }
+  );
+};
+var AttributeCreate = () => {
+  return /* @__PURE__ */ jsx4(RouteFocusModal, { "data-testid": "attribute-create-modal", children: /* @__PURE__ */ jsx4(AttributeCreateInner, {}) });
+};
+export {
+  AttributeCreate as Component
+};