"use client";
import { jsxs as l, jsx as e } from "react/jsx-runtime";
import { BackgroundControl as c } from "../../../../components/controls/background.control.js";
import { ColorControl as n } from "../../../../components/controls/color.control.js";
import { SelectControl as p } from "../../../../components/controls/select.control.js";
import { SliderUnitControl as r } from "../../../../components/controls/slider-unit.control.js";
import { SpacingControl as s } from "../../../../components/controls/spacing.control.js";
import { TypographyControl as u } from "../../../../components/controls/typography.control.js";
import { Accordion as a } from "../../../../components/shared/accordion.js";
import { Tabs as d } from "../../../../components/shared/tabs.js";
import { BoxShadowControl as C } from "../../../../components/controls/box-shadow.control.js";
import { SettingsType as o } from "../../../../types/index.js";
import { Unit as t, SizeType as m, PseudoClass as i } from "../../../../types/style.js";
import v from "./slide-horizontal-position.control.js";
import E from "./slide-text-align.control.js";
import L from "./slide-vertical-position.control.js";
import { useSettings as f } from "../../../../hooks/use-settings.js";
import { Separator as B } from "../../../../components/shared/separator.js";
const V = () => {
  const [N] = f("showDots.desktop", o.BLOCK), [g] = f("showArrows.desktop", o.BLOCK);
  return /* @__PURE__ */ l(a, { defaultValue: "Slides", type: "single", collapsible: !0, children: [
    /* @__PURE__ */ l(a.Item, { value: "Slides", children: [
      /* @__PURE__ */ e(a.Trigger, { className: "p-4", children: "Slides" }),
      /* @__PURE__ */ l(a.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          r,
          {
            type: o.BLOCK,
            fieldName: "contentWidth",
            label: "Content Width",
            className: "mt-0",
            units: [t.PX, t.PERCENTAGE, t.REM, t.EM],
            responsive: !0
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            type: o.BLOCK,
            fieldName: "sliderPadding",
            label: "Padding",
            units: [t.PX, t.REM, t.EM],
            responsive: !0
          }
        ),
        /* @__PURE__ */ e(
          v,
          {
            type: o.BLOCK,
            fieldName: "horizontalPosition.desktop"
          }
        ),
        /* @__PURE__ */ e(L, { type: o.BLOCK, fieldName: "verticalPosition.desktop" }),
        /* @__PURE__ */ e(E, { type: o.BLOCK, fieldName: "textAlign.desktop" })
      ] })
    ] }),
    /* @__PURE__ */ l(a.Item, { value: "Title", children: [
      /* @__PURE__ */ e(a.Trigger, { className: "p-4", children: "Title" }),
      /* @__PURE__ */ l(a.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          r,
          {
            type: o.BLOCK,
            fieldName: "title.marginBottom",
            label: "Margin Bottom",
            className: "mt-0",
            responsive: !0
          }
        ),
        /* @__PURE__ */ e(n, { type: o.BLOCK, fieldName: "title.color.desktop.default" }),
        /* @__PURE__ */ e(u, { type: o.BLOCK, fieldName: "title.typography" })
      ] })
    ] }),
    /* @__PURE__ */ l(a.Item, { value: "Description", children: [
      /* @__PURE__ */ e(a.Trigger, { className: "p-4", children: "Description" }),
      /* @__PURE__ */ l(a.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          r,
          {
            type: o.BLOCK,
            fieldName: "description.marginBottom",
            label: "Margin Bottom",
            className: "mt-0",
            responsive: !0
          }
        ),
        /* @__PURE__ */ e(n, { type: o.BLOCK, fieldName: "description.color.desktop.default" }),
        /* @__PURE__ */ e(u, { type: o.BLOCK, fieldName: "description.typography" })
      ] })
    ] }),
    /* @__PURE__ */ l(a.Item, { value: "Button", children: [
      /* @__PURE__ */ e(a.Trigger, { className: "p-4", children: "Button" }),
      /* @__PURE__ */ l(a.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          p,
          {
            responsive: !0,
            options: [
              // { content: "Default", value: SizeType.DEFAULT },
              { content: "Small", value: m.SM },
              { content: "Medium", value: m.MD },
              { content: "Large", value: m.LG },
              { content: "XL", value: m.XL },
              { content: "XXL", value: m.XXL }
            ],
            type: o.BLOCK,
            fieldName: "button.size",
            label: "Size",
            className: "mt-0"
          }
        ),
        /* @__PURE__ */ e(u, { type: o.BLOCK, fieldName: "button.typography" }),
        /* @__PURE__ */ e(
          r,
          {
            type: o.BLOCK,
            fieldName: "button.border.width",
            label: "Border Width"
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            type: o.BLOCK,
            fieldName: "button.border.radius",
            label: "Border Radius"
          }
        ),
        /* @__PURE__ */ l(d, { defaultValue: i.DEFAULT, className: "mt-5", children: [
          /* @__PURE__ */ l(d.List, { className: "h-8 w-full rounded-full", children: [
            /* @__PURE__ */ e(
              d.Trigger,
              {
                className: "flex-1 rounded-full p-[3px] text-[13px]",
                value: i.DEFAULT,
                children: "Normal"
              }
            ),
            /* @__PURE__ */ e(
              d.Trigger,
              {
                className: "flex-1 rounded-full p-[3px] text-[13px]",
                value: i.HOVER,
                children: "Hover"
              }
            )
          ] }),
          /* @__PURE__ */ l(d.Content, { value: i.DEFAULT, children: [
            /* @__PURE__ */ e(
              n,
              {
                label: "Text Color",
                type: o.BLOCK,
                fieldName: "button.textColor",
                mode: i.DEFAULT
              }
            ),
            /* @__PURE__ */ e(
              c,
              {
                fieldName: "button.background",
                mode: i.DEFAULT,
                type: o.BLOCK,
                showImage: !1
              }
            ),
            /* @__PURE__ */ e(
              n,
              {
                label: "Border Color",
                type: o.BLOCK,
                fieldName: "button.border.color",
                mode: i.DEFAULT
              }
            )
          ] }),
          /* @__PURE__ */ l(d.Content, { value: i.HOVER, children: [
            /* @__PURE__ */ e(
              n,
              {
                label: "Text Color",
                type: o.BLOCK,
                fieldName: "button.textColor",
                mode: i.HOVER
              }
            ),
            /* @__PURE__ */ e(
              c,
              {
                fieldName: "button.background",
                mode: i.HOVER,
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              n,
              {
                label: "Border Color",
                type: o.BLOCK,
                fieldName: "button.border.color",
                mode: i.HOVER
              }
            )
          ] })
        ] })
      ] })
    ] }),
    g && /* @__PURE__ */ l(a.Item, { value: "Arrows", children: [
      /* @__PURE__ */ e(a.Trigger, { className: "p-4", children: "Arrows" }),
      /* @__PURE__ */ l(a.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          p,
          {
            type: o.BLOCK,
            fieldName: "navigation.arrowPlacement.desktop",
            label: "Placement",
            defaultValue: "inside",
            options: [
              { content: "Inside", value: "inside" },
              { content: "Outside", value: "outside" }
            ],
            className: "mt-0"
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            type: o.BLOCK,
            fieldName: "navigation.arrowSize.desktop",
            label: "Size"
          }
        ),
        /* @__PURE__ */ l(d, { defaultValue: i.DEFAULT, children: [
          /* @__PURE__ */ l(d.List, { className: "mb-2 mt-5 h-8 w-full rounded-full", children: [
            /* @__PURE__ */ e(
              d.Trigger,
              {
                className: "flex-1 rounded-full p-[3px] text-[13px]",
                value: i.DEFAULT,
                children: "Normal"
              }
            ),
            /* @__PURE__ */ e(
              d.Trigger,
              {
                className: "flex-1 rounded-full p-[3px] text-[13px]",
                value: i.HOVER,
                children: "Hover"
              }
            )
          ] }),
          /* @__PURE__ */ l(d.Content, { value: i.DEFAULT, children: [
            /* @__PURE__ */ e(
              n,
              {
                label: "Color",
                fieldName: "navigation.arrowColor.desktop",
                type: o.BLOCK,
                mode: i.DEFAULT
              }
            ),
            /* @__PURE__ */ e(
              n,
              {
                label: "Background Color",
                fieldName: "navigation.arrowBackgroudColor.desktop",
                type: o.BLOCK,
                mode: i.DEFAULT
              }
            ),
            /* @__PURE__ */ e(
              C,
              {
                fieldName: "navigation.arrowBoxShadow",
                type: o.BLOCK,
                mode: i.DEFAULT
              }
            )
          ] }),
          /* @__PURE__ */ l(d.Content, { value: i.HOVER, children: [
            /* @__PURE__ */ e(
              n,
              {
                label: "Color",
                fieldName: "navigation.arrowColor.desktop",
                type: o.BLOCK,
                mode: i.HOVER
              }
            ),
            /* @__PURE__ */ e(
              n,
              {
                label: "Background Color",
                fieldName: "navigation.arrowBackgroudColor.desktop",
                type: o.BLOCK,
                mode: i.HOVER
              }
            ),
            /* @__PURE__ */ e(
              C,
              {
                fieldName: "navigation.arrowBoxShadow",
                type: o.BLOCK,
                mode: i.HOVER
              }
            )
          ] })
        ] }),
        /* @__PURE__ */ e(B, { className: "my-5" }),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.arrowWidth",
            label: "Width",
            units: [t.PX, t.EM, t.REM]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.arrowHeight",
            label: "Height",
            units: [t.PX, t.EM, t.REM]
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            fieldName: "navigation.arrowRadius.desktop.default",
            label: "Border Radius",
            type: o.BLOCK,
            units: [t.PX, t.EM, t.REM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.leftArrowPosition",
            label: "Left Arrow Position",
            units: [t.PX, t.EM, t.REM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.rightArrowPosition",
            label: "Right Arrow Position",
            units: [t.PX, t.EM, t.REM, t.PERCENTAGE]
          }
        )
      ] })
    ] }),
    N && /* @__PURE__ */ l(a.Item, { value: "Dots", children: [
      /* @__PURE__ */ e(a.Trigger, { className: "p-4", children: "Dots" }),
      /* @__PURE__ */ l(a.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          p,
          {
            type: o.BLOCK,
            fieldName: "navigation.dotPlacement.desktop",
            label: "Placement",
            defaultValue: "inside",
            options: [
              { content: "Inside", value: "inside" },
              { content: "Outside", value: "outside" }
            ],
            className: "mt-0"
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.dotSize",
            label: "Size"
          }
        ),
        /* @__PURE__ */ e(
          n,
          {
            label: "Color",
            type: o.BLOCK,
            fieldName: "navigation.dotColor.desktop.default"
          }
        ),
        /* @__PURE__ */ e(
          n,
          {
            label: "Active Color",
            type: o.BLOCK,
            fieldName: "navigation.dotActiveColor.desktop.default"
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.dotsPosition",
            label: "Dots Position",
            units: [t.PX, t.EM, t.REM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.dotWidth",
            label: "Width",
            units: [t.PX, t.EM, t.REM]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.dotHeight",
            label: "Height",
            units: [t.PX, t.EM, t.REM]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.activeDotWidth",
            label: "Active Width",
            units: [t.PX, t.EM, t.REM]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.activeDotHeight",
            label: "Active Height",
            units: [t.PX, t.EM, t.REM]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.dotRadius",
            label: "Rounded",
            units: [t.PX, t.EM, t.REM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          r,
          {
            responsive: !0,
            type: o.BLOCK,
            fieldName: "navigation.dotGap",
            label: "Gap",
            units: [t.PX, t.EM, t.REM, t.PERCENTAGE]
          }
        )
      ] })
    ] })
  ] });
};
export {
  V as default
};
//# sourceMappingURL=slider-style.control.js.map
