"use client";
import { jsxs as r, jsx as e } from "react/jsx-runtime";
import { BoxShadowControl as g } from "../../../components/controls/box-shadow.control.js";
import { ColorControl as a } from "../../../components/controls/color.control.js";
import { SliderUnitControl as m } from "../../../components/controls/slider-unit.control.js";
import { SpacingControl as s } from "../../../components/controls/spacing.control.js";
import { ToggleGroupControl as u } from "../../../components/controls/toggle-group.control.js";
import { TypographyControl as N } from "../../../components/controls/typography.control.js";
import { Accordion as n } from "../../../components/shared/accordion.js";
import { Tabs as i } from "../../../components/shared/tabs.js";
import { useSettings as f } from "../../../hooks/use-settings.js";
import { SettingsType as o } from "../../../types/index.js";
import { Unit as t, PseudoClass as l } from "../../../types/style.js";
import { MdAlignHorizontalLeft as c, MdAlignVerticalTop as b, MdAlignHorizontalCenter as C, MdAlignVerticalCenter as T, MdAlignHorizontalRight as E, MdAlignVerticalBottom as x } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/md/index.js";
import { RxPinTop as L, RxPinLeft as v } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/rx/index.js";
import { TabsBorderControl as d } from "./tabs-border.control.js";
const z = () => {
  const [p] = f(
    "list.orientation.{{BREAKPOINT}}",
    o.BLOCK
  );
  return /* @__PURE__ */ r(n, { defaultValue: "List", type: "single", collapsible: !0, children: [
    /* @__PURE__ */ r(n.Item, { value: "List", children: [
      /* @__PURE__ */ e(n.Trigger, { className: "p-4", children: "List" }),
      /* @__PURE__ */ r(n.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          u,
          {
            type: o.BLOCK,
            fieldName: "list.orientation",
            label: "Orientation",
            responsive: !0,
            className: "mt-0",
            controls: [
              {
                tooltipContent: "Horizontal",
                toggleTrigger: /* @__PURE__ */ e(L, { className: "text-sm" }),
                value: "horizontal"
              },
              {
                tooltipContent: "Vertical",
                toggleTrigger: /* @__PURE__ */ e(v, { className: "text-sm" }),
                value: "vertical"
              }
            ]
          }
        ),
        /* @__PURE__ */ e(
          u,
          {
            type: o.BLOCK,
            fieldName: "list.alignment",
            label: "Alignment",
            responsive: !0,
            controls: [
              {
                tooltipContent: "Start",
                toggleTrigger: p === "horizontal" ? /* @__PURE__ */ e(c, { className: "text-sm" }) : /* @__PURE__ */ e(b, { className: "text-sm" }),
                value: "flex-start"
              },
              {
                tooltipContent: "Center",
                toggleTrigger: p === "horizontal" ? /* @__PURE__ */ e(C, { className: "text-sm" }) : /* @__PURE__ */ e(T, { className: "text-sm" }),
                value: "center"
              },
              {
                tooltipContent: "End",
                toggleTrigger: p === "horizontal" ? /* @__PURE__ */ e(E, { className: "text-sm" }) : /* @__PURE__ */ e(x, { className: "text-sm" }),
                value: "flex-end"
              }
            ]
          }
        ),
        /* @__PURE__ */ e(
          m,
          {
            type: o.BLOCK,
            fieldName: "list.spacing",
            label: "Spacing",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            type: o.BLOCK,
            fieldName: "list.margin",
            label: "Margin",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            type: o.BLOCK,
            fieldName: "list.padding",
            label: "Padding",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        )
      ] })
    ] }),
    /* @__PURE__ */ r(n.Item, { value: "Button", children: [
      /* @__PURE__ */ e(n.Trigger, { className: "p-4", children: "Button" }),
      /* @__PURE__ */ r(n.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          m,
          {
            type: o.BLOCK,
            fieldName: "button.width",
            label: "Width",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          m,
          {
            type: o.BLOCK,
            fieldName: "button.height",
            label: "Height",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          u,
          {
            type: o.BLOCK,
            fieldName: "button.alignment",
            label: "Alignment",
            responsive: !0,
            controls: [
              {
                tooltipContent: "Start",
                toggleTrigger: /* @__PURE__ */ e(c, { className: "text-sm" }),
                value: "flex-start"
              },
              {
                tooltipContent: "Center",
                toggleTrigger: /* @__PURE__ */ e(C, { className: "text-sm" }),
                value: "center"
              },
              {
                tooltipContent: "End",
                toggleTrigger: /* @__PURE__ */ e(E, { className: "text-sm" }),
                value: "flex-end"
              }
            ]
          }
        ),
        /* @__PURE__ */ e(
          m,
          {
            type: o.BLOCK,
            fieldName: "button.spacing",
            label: "Spacing",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          N,
          {
            type: o.BLOCK,
            fieldName: "button.typography",
            label: "Typography"
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            type: o.BLOCK,
            fieldName: "button.margin",
            label: "Margin",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            type: o.BLOCK,
            fieldName: "button.padding",
            label: "Padding",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ r(i, { defaultValue: l.DEFAULT, children: [
          /* @__PURE__ */ r(i.List, { className: "mb-2 mt-5 h-8 w-full rounded-full", children: [
            /* @__PURE__ */ e(
              i.Trigger,
              {
                className: "flex-1 rounded-full p-[3px] text-[13px]",
                value: l.DEFAULT,
                children: "Normal"
              }
            ),
            /* @__PURE__ */ e(
              i.Trigger,
              {
                className: "flex-1 rounded-full p-[3px] text-[13px]",
                value: l.HOVER,
                children: "Hover"
              }
            ),
            /* @__PURE__ */ e(i.Trigger, { className: "flex-1 rounded-full p-[3px] text-[13px]", value: "active", children: "Active" })
          ] }),
          /* @__PURE__ */ r(i.Content, { value: l.DEFAULT, children: [
            /* @__PURE__ */ e(
              a,
              {
                label: "Text Color",
                fieldName: "button.color",
                mode: l.DEFAULT,
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                label: "Background Color",
                fieldName: "button.background.color",
                mode: l.DEFAULT,
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              d,
              {
                fieldName: "button.border",
                mode: l.DEFAULT,
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              g,
              {
                fieldName: "button.boxShadow",
                mode: l.DEFAULT,
                type: o.BLOCK
              }
            )
          ] }),
          /* @__PURE__ */ r(i.Content, { value: l.HOVER, children: [
            /* @__PURE__ */ e(
              a,
              {
                label: "Text Color",
                fieldName: "button.color",
                mode: l.HOVER,
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                label: "Background Color",
                fieldName: "button.background.color",
                mode: l.HOVER,
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              d,
              {
                fieldName: "button.border",
                mode: l.HOVER,
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              g,
              {
                fieldName: "button.boxShadow",
                mode: l.HOVER,
                type: o.BLOCK
              }
            )
          ] }),
          /* @__PURE__ */ r(i.Content, { value: "active", children: [
            /* @__PURE__ */ e(
              a,
              {
                label: "Text Color",
                fieldName: "button.color.active",
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              a,
              {
                label: "Background Color",
                fieldName: "button.background.color.active",
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              d,
              {
                fieldName: "button.border",
                mode: "active",
                type: o.BLOCK
              }
            ),
            /* @__PURE__ */ e(
              g,
              {
                fieldName: "button.boxShadow",
                mode: "active",
                type: o.BLOCK
              }
            )
          ] })
        ] })
      ] })
    ] }),
    /* @__PURE__ */ r(n.Item, { value: "Content", children: [
      /* @__PURE__ */ e(n.Trigger, { className: "p-4", children: "Content" }),
      /* @__PURE__ */ r(n.Content, { className: "px-4", children: [
        /* @__PURE__ */ e(
          s,
          {
            type: o.BLOCK,
            fieldName: "content.margin",
            label: "Margin",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          s,
          {
            type: o.BLOCK,
            fieldName: "content.padding",
            label: "Padding",
            responsive: !0,
            units: [t.PX, t.REM, t.EM, t.PERCENTAGE]
          }
        ),
        /* @__PURE__ */ e(
          d,
          {
            fieldName: "content.border",
            mode: l.DEFAULT,
            type: o.BLOCK
          }
        )
      ] })
    ] })
  ] });
};
export {
  z as default
};
//# sourceMappingURL=tabs-style.control.js.map
