"use client";
import { jsxs as n, jsx as e } from "react/jsx-runtime";
import { BorderControl as m } from "../../../components/controls/border.control.js";
import { BoxShadowControl as u } from "../../../components/controls/box-shadow.control.js";
import { ColorControl as i } from "../../../components/controls/color.control.js";
import { SliderUnitControl as a } from "../../../components/controls/slider-unit.control.js";
import { SpacingControl as s } from "../../../components/controls/spacing.control.js";
import { ToggleGroupControl as c } from "../../../components/controls/toggle-group.control.js";
import { TypographyControl as C } from "../../../components/controls/typography.control.js";
import { Accordion as d } from "../../../components/shared/accordion.js";
import { Label as p } from "../../../components/shared/label.js";
import { Separator as f } from "../../../components/shared/separator.js";
import { Tabs as r } from "../../../components/shared/tabs.js";
import { SettingsType as t } from "../../../types/index.js";
import { Unit as l, PseudoClass as o } from "../../../types/style.js";
import { AiOutlineAlignLeft as g, AiOutlineAlignCenter as b, AiOutlineAlignRight as N } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/ai/index.js";
import { TfiAlignJustify as E } from "../../../../../../node_modules/.pnpm/react-icons@5.5.0_react@19.0.0/node_modules/react-icons/tfi/index.js";
const D = () => /* @__PURE__ */ n(d, { defaultValue: "Button", type: "single", collapsible: !0, children: [
  /* @__PURE__ */ n(d.Item, { value: "Button", children: [
    /* @__PURE__ */ e(d.Trigger, { className: "p-4", children: "Button" }),
    /* @__PURE__ */ n(d.Content, { className: "px-4", children: [
      /* @__PURE__ */ e(
        a,
        {
          label: "Width",
          units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VW],
          fieldName: "button.width",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        a,
        {
          label: "Height",
          units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VH],
          fieldName: "button.height",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        a,
        {
          label: "Spacing",
          fieldName: "button.spacing",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        c,
        {
          type: t.BLOCK,
          fieldName: "button.align",
          label: "Alignment",
          responsive: !0,
          controls: [
            {
              tooltipContent: "Start",
              toggleTrigger: /* @__PURE__ */ e(g, { className: "text-sm" }),
              value: "flex-start"
            },
            {
              tooltipContent: "Center",
              toggleTrigger: /* @__PURE__ */ e(b, { className: "text-sm" }),
              value: "center"
            },
            {
              tooltipContent: "End",
              toggleTrigger: /* @__PURE__ */ e(N, { className: "text-sm" }),
              value: "flex-end"
            },
            {
              tooltipContent: "Justified",
              toggleTrigger: /* @__PURE__ */ e(E, { className: "text-sm" }),
              value: "space-between"
            }
          ]
        }
      ),
      /* @__PURE__ */ e(
        s,
        {
          label: "Padding",
          fieldName: "button.padding",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        s,
        {
          label: "Margin",
          fieldName: "button.margin",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        C,
        {
          label: "Typography",
          fieldName: "button.typography",
          type: t.BLOCK
        }
      ),
      /* @__PURE__ */ n(r, { defaultValue: o.DEFAULT, className: "mt-4", children: [
        /* @__PURE__ */ n(r.List, { className: "h-8 w-full rounded-full", children: [
          /* @__PURE__ */ e(
            r.Trigger,
            {
              className: "flex-1 rounded-full p-[3px] text-[13px]",
              value: o.DEFAULT,
              children: "Normal"
            }
          ),
          /* @__PURE__ */ e(
            r.Trigger,
            {
              className: "flex-1 rounded-full p-[3px] text-[13px]",
              value: o.HOVER,
              children: "Hover"
            }
          ),
          /* @__PURE__ */ e(
            r.Trigger,
            {
              className: "flex-1 rounded-full p-[3px] text-[13px]",
              value: o.FOCUS,
              children: "Focus"
            }
          )
        ] }),
        /* @__PURE__ */ n(r.Content, { value: o.DEFAULT, children: [
          /* @__PURE__ */ e(
            i,
            {
              fieldName: "button.color",
              type: t.BLOCK,
              mode: o.DEFAULT
            }
          ),
          /* @__PURE__ */ e(
            i,
            {
              label: "Background Color",
              fieldName: "button.background.color",
              type: t.BLOCK,
              mode: o.DEFAULT
            }
          ),
          /* @__PURE__ */ e(
            m,
            {
              fieldName: "button.border",
              mode: o.DEFAULT,
              type: t.BLOCK
            }
          ),
          /* @__PURE__ */ e(p, { className: "mt-4 font-semibold", children: "Icon" }),
          /* @__PURE__ */ e(
            i,
            {
              label: "Color",
              fieldName: "button.icon.color",
              type: t.BLOCK,
              mode: o.DEFAULT
            }
          ),
          /* @__PURE__ */ e(
            a,
            {
              label: "Size",
              fieldName: "button.icon.size",
              type: t.BLOCK,
              responsive: !0,
              mode: o.DEFAULT
            }
          )
        ] }),
        /* @__PURE__ */ n(r.Content, { value: o.HOVER, children: [
          /* @__PURE__ */ e(
            i,
            {
              fieldName: "button.color",
              type: t.BLOCK,
              mode: o.HOVER
            }
          ),
          /* @__PURE__ */ e(
            i,
            {
              label: "Background Color",
              fieldName: "button.background.color",
              type: t.BLOCK,
              mode: o.HOVER
            }
          ),
          /* @__PURE__ */ e(
            m,
            {
              fieldName: "button.border",
              mode: o.HOVER,
              type: t.BLOCK
            }
          ),
          /* @__PURE__ */ e(p, { className: "mt-4 font-semibold", children: "Icon" }),
          /* @__PURE__ */ e(
            i,
            {
              label: "Color",
              fieldName: "button.icon.color",
              type: t.BLOCK,
              mode: o.HOVER
            }
          ),
          /* @__PURE__ */ e(
            a,
            {
              label: "Size",
              fieldName: "button.icon.size",
              type: t.BLOCK,
              responsive: !0,
              mode: o.HOVER
            }
          )
        ] }),
        /* @__PURE__ */ n(r.Content, { value: o.FOCUS, children: [
          /* @__PURE__ */ e(
            i,
            {
              fieldName: "button.color",
              type: t.BLOCK,
              mode: o.FOCUS
            }
          ),
          /* @__PURE__ */ e(
            i,
            {
              label: "Background Color",
              fieldName: "button.background.color",
              type: t.BLOCK,
              mode: o.FOCUS
            }
          ),
          /* @__PURE__ */ e(
            m,
            {
              fieldName: "button.border",
              mode: o.FOCUS,
              type: t.BLOCK
            }
          ),
          /* @__PURE__ */ e(p, { className: "mt-4 font-semibold", children: "Icon" }),
          /* @__PURE__ */ e(
            i,
            {
              label: "Color",
              fieldName: "button.icon.color",
              type: t.BLOCK,
              mode: o.FOCUS
            }
          ),
          /* @__PURE__ */ e(
            a,
            {
              label: "Size",
              fieldName: "button.icon.size",
              type: t.BLOCK,
              responsive: !0,
              mode: o.FOCUS
            }
          )
        ] })
      ] }),
      /* @__PURE__ */ e(f, { className: "my-4" }),
      /* @__PURE__ */ e(p, { className: "font-semibold", children: "Image" }),
      /* @__PURE__ */ e(
        a,
        {
          label: "Width",
          units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VW],
          fieldName: "button.image.width",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        a,
        {
          label: "Max Width",
          fieldName: "button.image.maxWidth",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        a,
        {
          label: "Height",
          units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VH],
          fieldName: "button.image.height",
          type: t.BLOCK,
          responsive: !0
        }
      )
    ] })
  ] }),
  /* @__PURE__ */ n(d.Item, { value: "Content", children: [
    /* @__PURE__ */ e(d.Trigger, { className: "p-4", children: "Content" }),
    /* @__PURE__ */ n(d.Content, { className: "px-4", children: [
      /* @__PURE__ */ e(
        a,
        {
          label: "Width",
          units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VW],
          fieldName: "content.width",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        a,
        {
          label: "Height",
          units: [l.PX, l.REM, l.EM, l.PERCENTAGE, l.VH],
          fieldName: "content.height",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        s,
        {
          label: "Padding",
          fieldName: "content.padding",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ e(
        s,
        {
          label: "Margin",
          fieldName: "content.margin",
          type: t.BLOCK,
          responsive: !0
        }
      ),
      /* @__PURE__ */ n(r, { defaultValue: o.DEFAULT, className: "mt-4", children: [
        /* @__PURE__ */ n(r.List, { className: "h-8 w-full rounded-full", children: [
          /* @__PURE__ */ e(
            r.Trigger,
            {
              className: "flex-1 rounded-full p-[3px] text-[13px]",
              value: o.DEFAULT,
              children: "Normal"
            }
          ),
          /* @__PURE__ */ e(
            r.Trigger,
            {
              className: "flex-1 rounded-full p-[3px] text-[13px]",
              value: o.HOVER,
              children: "Hover"
            }
          )
        ] }),
        /* @__PURE__ */ n(r.Content, { value: o.DEFAULT, children: [
          /* @__PURE__ */ e(
            m,
            {
              fieldName: "content.border",
              mode: o.DEFAULT,
              type: t.BLOCK
            }
          ),
          /* @__PURE__ */ e(
            u,
            {
              fieldName: "content.boxShadow",
              mode: o.DEFAULT,
              type: t.BLOCK
            }
          ),
          /* @__PURE__ */ e(
            i,
            {
              label: "Background Color",
              fieldName: "content.background.color",
              type: t.BLOCK,
              mode: o.DEFAULT
            }
          )
        ] }),
        /* @__PURE__ */ n(r.Content, { value: o.HOVER, children: [
          /* @__PURE__ */ e(
            m,
            {
              fieldName: "content.border",
              mode: o.HOVER,
              type: t.BLOCK
            }
          ),
          /* @__PURE__ */ e(
            u,
            {
              fieldName: "content.boxShadow",
              mode: o.HOVER,
              type: t.BLOCK
            }
          ),
          /* @__PURE__ */ e(
            i,
            {
              label: "Background Color",
              fieldName: "content.background.color",
              type: t.BLOCK,
              mode: o.HOVER
            }
          )
        ] })
      ] })
    ] })
  ] })
] });
export {
  D as default
};
//# sourceMappingURL=dropdown-style.control.js.map
