@kloudlite/design-system/cjs/atoms/toolbar.js

A design system for building ambitious products.

"use strict";
"use client";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
  for (var name in all)
    __defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
  if (from && typeof from === "object" || typeof from === "function") {
    for (let key of __getOwnPropNames(from))
      if (!__hasOwnProp.call(to, key) && key !== except)
        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  }
  return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  // If the importer is in node compatibility mode or this is not an ESM
  // file that has been converted to a CommonJS file using a Babel-
  // compatible transform (i.e. "__esModule" has not been set), then set
  // "default" to the CommonJS "module.exports" for node compatibility.
  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);

// components/atoms/toolbar.tsx
var toolbar_exports = {};
__export(toolbar_exports, {
  default: () => toolbar_default
});
module.exports = __toCommonJS(toolbar_exports);
var import_primitive = require("@radix-ui/primitive");
var import_react_context = require("@radix-ui/react-context");
var React2 = __toESM(require("react"), 1);
var import_react_direction = require("@radix-ui/react-direction");
var import_react_primitive = require("@radix-ui/react-primitive");
var RovingFocusGroup = __toESM(require("@radix-ui/react-roving-focus"), 1);
var import_react_roving_focus = require("@radix-ui/react-roving-focus");
var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
var import_react_toggle_group = require("@radix-ui/react-toggle-group");

// components/utils.tsx
var import_classnames = __toESM(require("classnames"), 1);
var import_react = require("react");
var import_uuid = require("uuid");
var cn = (...props) => {
  return (0, import_classnames.default)(...props);
};

// components/atoms/button.tsx
var import_framer_motion = require("framer-motion");
var import_react3 = __toESM(require("react"), 1);

// components/icons.tsx
var import_react2 = require("@jengaicons/react");
var import_jsx_runtime = require("react/jsx-runtime");

// components/atoms/button.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var ButtonBase = import_react3.default.forwardRef((props, ref) => {
  const {
    onClick = () => {
    },
    to = "",
    linkComponent = import_framer_motion.motion.button,
    disabled = false,
    suffix,
    prefix,
    block = false,
    type = "button",
    variant = "primary",
    // noRing,
    noRounded = false,
    noBorder = false,
    sharpLeft = false,
    sharpRight = false,
    selected = false,
    iconOnly = false,
    className = "",
    content,
    size = "md",
    loading = false,
    tabIndex,
    toLabel = "to",
    target,
    iconSize,
    ...mprops
  } = props;
  let Component = linkComponent;
  let tempToLabel = toLabel;
  let extraProps = {};
  if (to) {
    if (linkComponent === import_framer_motion.motion.button) {
      Component = import_framer_motion.motion.a;
      tempToLabel = "href";
    } else {
      Component = linkComponent;
    }
  }
  if (Component === import_framer_motion.motion.button || Component === import_framer_motion.motion.a) {
    extraProps = {
      initial: { scale: 1 },
      whileTap: { scale: 0.99 }
    };
  }
  const noRing = false;
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
    Component,
    {
      ...mprops,
      ...{ [tempToLabel]: to },
      disabled,
      onClick,
      ...extraProps,
      ref,
      type,
      tabIndex,
      target,
      className: cn(
        "pulsable kl-flex-nowrap",
        {
          "kl-w-full": !!block,
          "kl-w-fit": !block,
          selected
        },
        {
          "kl-pointer-events-none": loading
        },
        {
          "kl-bodyMd-medium": !variant?.includes("plain"),
          "kl-bodyMd": variant?.includes("plain")
        },
        {
          "kl-pointer-events-none !kl-text-text-disabled kl-bg-surface-basic-disabled": disabled,
          "!kl-border-border-disabled": disabled && ![
            "plain",
            "primary-plain",
            "critical-plain",
            "secondary-plain"
          ].includes(variant)
        },
        "kl-relative kl-ring-offset-1",
        "kl-outline-none",
        "kl-flex kl-flex-row kl-gap-lg kl-items-center kl-justify-center",
        "disabled:kl-text-text-disabled disabled:kl-bg-surface-basic-disabled",
        {
          // noRing
          "focus-visible:kl-ring-2 focus:kl-ring-border-focus focus:kl-z-10": !noRing
        },
        {
          ...!noRounded && {
            "kl-rounded-none": sharpLeft && sharpRight,
            "kl-rounded-r": sharpLeft && !sharpRight,
            "kl-rounded-l": !sharpLeft && sharpRight,
            "kl-rounded": !sharpLeft && !sharpRight
          }
        },
        "disabled:kl-pointer-events-none",
        {
          "kl-border-none": noBorder,
          ...!noBorder && {
            "kl-border-border-default disabled:kl-border-border-disabled": variant === "basic" || variant === "outline" || variant === "secondary-outline",
            "kl-border-border-primary disabled:kl-border-border-disabled": variant === "primary" || variant === "primary-outline",
            "kl-border-border-secondary disabled:kl-border-border-disabled": variant === "secondary",
            "kl-border-border-critical disabled:kl-border-border-disabled": variant === "critical-outline" || variant === "critical",
            "kl-border-border-purple": variant === "purple",
            "kl-border-border-warning": variant === "warning",
            "kl-border-border-tertiary": variant === "tertiary",
            "kl-border-none": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain",
            "kl-border": !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain")
          }
        },
        !disabled ? {
          "kl-bg-surface-basic-default hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && !selected,
          "kl-bg-surface-basic-pressed hover:kl-bg-surface-basic-pressed active:kl-bg-surface-basic-pressed disabled:kl-bg-surface-basic-default": variant === "basic" && selected,
          "kl-bg-surface-primary-default hover:kl-bg-surface-primary-hovered active:kl-bg-surface-primary-pressed disabled:kl-bg-surface-basic-default": variant === "primary",
          "kl-bg-surface-secondary-default hover:kl-bg-surface-secondary-hovered active:kl-bg-surface-secondary-pressed disabled:kl-bg-surface-basic-default": variant === "secondary",
          "kl-bg-surface-critical-default hover:kl-bg-surface-critical-hovered active:kl-bg-surface-critical-pressed disabled:kl-bg-surface-basic-default": variant === "critical",
          "kl-bg-none hover:kl-bg-surface-critical-subdued active:kl-bg-surface-critical-subdued": variant === "critical-outline",
          "kl-bg-none hover:kl-bg-surface-primary-subdued active:kl-bg-surface-primary-subdued": variant === "primary-outline",
          "kl-bg-none hover:kl-bg-surface-secondary-subdued active:kl-bg-surface-secondary-subdued": variant === "secondary-outline",
          "kl-bg-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed": variant === "outline",
          "kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed hover:kl-shadow-button": variant === "outline" && selected,
          "kl-bg-none kl-shadow-none": (variant === "plain" || variant === "primary-plain" || variant === "secondary-plain" || variant === "critical-plain") && !iconOnly,
          "kl-shadow-none active:kl-shadow-button kl-bg-surface-basic-pressed": variant === "plain" && !iconOnly && selected,
          "kl-bg-none kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button active:kl-shadow-button": variant === "plain" && iconOnly,
          "kl-bg-surface-basic-pressed kl-shadow-none hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed active:kl-shadow-button": variant === "plain" && iconOnly && selected,
          "kl-bg-surface-purple-default hover:kl-bg-surface-purple-hovered active:kl-bg-surface-purple-pressed": variant === "purple",
          "kl-bg-surface-tertiary-default hover:kl-bg-surface-tertiary-hovered active:kl-bg-surface-tertiary-pressed": variant === "tertiary",
          "kl-bg-surface-warning-default hover:kl-bg-surface-warning-hovered active:kl-bg-surface-warning-pressed": variant === "warning"
        } : {},
        {
          "kl-text-text-default": variant === "basic" || variant === "plain" || variant === "outline",
          "kl-text-text-on-primary": variant === "primary" || variant === "critical" || variant === "secondary" || variant === "secondary-outline" || variant === "purple" || variant === "warning",
          "kl-text-text-critical": variant === "critical-outline" || variant === "critical-plain",
          "kl-text-text-primary": variant === "primary-outline" || variant === "primary-plain",
          "kl-text-text-secondary": variant === "secondary-plain",
          "kl-text-text-on-secondary": variant === "tertiary"
        },
        {
          "focus:kl-underline": noRing
        },
        {
          "hover:kl-underline": variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain"
        },
        {
          // icon
          ...!iconOnly && !(variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
            "kl-py-md kl-px-lg": size === "sm",
            "kl-py-lg kl-px-2xl": size === "md",
            "kl-py-xl kl-px-4xl": size === "lg",
            "kl-py-2xl kl-px-6xl": size === "xl",
            "kl-py-2xl kl-px-9xl": size === "2xl"
          }
        },
        {
          ...!iconOnly && (variant === "plain" || variant === "primary-plain" || variant === "critical-plain" || variant === "secondary-plain") && {
            "kl-px-md kl-py-sm": size === "sm",
            "kl-py-sm kl-px-md": size === "md",
            "kl-py-md kl-px-lg": size === "lg"
          }
        },
        {
          "kl-p-lg !kl-h-[36px] !kl-w-[36px]": iconOnly && (size === "md" || size === "lg"),
          "kl-p-md": iconOnly && size === "sm",
          "kl-p-sm": iconOnly && size === "xs"
        },
        className
      ),
      children: [
        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
          import_framer_motion.motion.span,
          {
            initial: { width: 0 },
            animate: { width: "auto", paddingRight: 0 },
            exit: { width: 0 },
            className: cn(
              "kl-flex kl-items-center kl-justify-center kl-aspect-square kl-overflow-hidden"
            ),
            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-animate-spin"), children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react2.Spinner, { color: "currentColor", weight: 2, size: 18 }) })
          }
        ) }),
        !!prefix && import_react3.default.cloneElement(prefix, {
          size: iconSize || (iconOnly && size === "lg" ? 20 : 16),
          color: "currentColor"
        }),
        !iconOnly && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: cn("kl-block kl-truncate"), children: content }),
        !!suffix && import_react3.default.cloneElement(suffix, {
          size: iconSize || 16,
          color: "currentColor"
        })
      ]
    }
  );
});
var IconButton = import_react3.default.forwardRef(
  (props, ref) => {
    const { icon, block } = props;
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
      ButtonBase,
      {
        ...props,
        ref,
        iconOnly: true,
        content: null,
        prefix: icon,
        block: !!block
      }
    );
  }
);
var Button = import_react3.default.forwardRef(
  (props, ref) => {
    const { block } = props;
    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ButtonBase, { ...props, iconOnly: false, ref, block: !!block });
  }
);

// components/atoms/input.tsx
var import_react4 = require("react");

// components/atoms/animate-hide.tsx
var import_framer_motion2 = require("framer-motion");
var import_jsx_runtime3 = require("react/jsx-runtime");
var AnimateHide = ({
  children,
  show,
  initial = false,
  className,
  onClick
}) => {
  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion2.AnimatePresence, { initial, children: show && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
    import_framer_motion2.motion.div,
    {
      onClick,
      initial: {
        height: 0,
        opacity: 0,
        y: -5
      },
      animate: {
        height: "auto",
        opacity: 1,
        y: 0
      },
      exit: {
        opacity: 0,
        height: 0,
        y: -5
      },
      className: cn(className, "kl-overflow-hidden"),
      children
    }
  ) });
};
var animate_hide_default = AnimateHide;

// components/atoms/input.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var TextInputBase = (0, import_react4.forwardRef)(
  (props, ref) => {
    const {
      name,
      value,
      type,
      component = "input",
      extra,
      className = "",
      containerClassName = "",
      error = false,
      disabled = false,
      label,
      onKeyDown,
      autoComplete = "off",
      onBlur = () => {
      },
      onFocus = () => {
      },
      onChange = () => {
      },
      message = "",
      showclear,
      placeholder,
      size = "md",
      resize = true,
      prefix,
      suffix,
      prefixIcon,
      suffixIcon,
      id,
      tabIndex,
      shimmerLoading,
      autoFocus,
      focusRing = true,
      textFieldClassName,
      ...extraProps
    } = props;
    const [t, setT] = (0, import_react4.useState)(type || "text");
    const Component = component;
    const containerRef = (0, import_react4.useRef)(null);
    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: cn("kl-flex kl-flex-col", containerClassName), children: [
      (label || extra) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
        "div",
        {
          className: cn(
            "kl-flex kl-items-center kl-justify-between kl-gap-md",
            {
              "kl-pb-md": !!label || !!extra
            }
          ),
          children: [
            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
              "label",
              {
                className: "kl-select-none kl-bodyMd-medium pulsable kl-min-w-[33%] kl-text-text-default",
                htmlFor: id,
                children: label
              }
            ),
            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
              "div",
              {
                className: cn({
                  "kl-h-4xl pulsable": !!label || !!extra
                }),
                children: extra && (0, import_react4.cloneElement)(extra)
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
        "div",
        {
          ref: containerRef,
          className: cn(
            "kl-transition-all kl-rounded kl-border kl-flex kl-flex-row kl-items-center kl-relative kl-ring-offset-1 group-data-[theme=dark]/html:kl-ring-offset-0",
            {
              "kl-text-text-critical kl-bg-surface-critical-subdued kl-border-border-critical": error,
              "kl-text-text-default kl-border-border-default kl-bg-surface-basic-input": !error,
              "kl-text-text-disabled kl-border-border-disabled kl-bg-surface-basic-input": disabled,
              "kl-pr-0": component !== "input"
            },
            {
              "kl-h-[38px]": size === "md" && component === "input",
              "kl-h-[48px]": size === "lg" && component === "input",
              "kl-h-[60px]": size === "xl" && component === "input"
            },
            size === "xl" ? "!kl-px-2xl" : "kl-px-lg",
            className
          ),
          children: [
            !!prefixIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
              "div",
              {
                className: cn("kl-pr-lg kl-bodyMd", {
                  "kl-text-text-strong": !error && !disabled,
                  "kl-text-text-critical": error,
                  "kl-text-text-disabled": disabled
                }),
                children: (0, import_react4.cloneElement)(prefixIcon, {
                  size: 16,
                  color: "currentColor"
                })
              }
            ),
            !!prefix && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "kl-cursor-default", children: prefix }),
            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
              Component,
              {
                ...type === "number" ? {
                  pattern: "[0-9]"
                } : {},
                name,
                autoFocus,
                type: t,
                placeholder,
                id,
                tabIndex,
                className: cn(
                  "kl-outline-none focus-within:kl-outline-none focus:kl-outline-none focus-visible:kl-outline-none kl-flex-1 kl-w-full kl-h-full",
                  "kl-rounded kl-bg-transparent",
                  {
                    "kl-text-text-critical placeholder:kl-text-text-critical/70": error && !disabled,
                    "kl-text-text-default": !error && !disabled,
                    "kl-text-text-disabled": disabled
                  },
                  {
                    "kl-py-xl": size === "lg",
                    "kl-py-lg": size === "md"
                  },
                  {
                    "kl-resize-none": !resize
                  },
                  {
                    "kl-no-spinner": type === "number"
                  },
                  size === "xl" ? "" : "kl-bodyMd",
                  textFieldClassName
                ),
                value,
                onChange: (e) => {
                  if (onChange) {
                    onChange(e);
                  }
                },
                onFocus: (e) => {
                  if (focusRing) {
                    containerRef.current?.classList.add("kl-ring-2");
                  }
                  onFocus(e);
                },
                disabled,
                ref,
                onKeyDown,
                autoComplete,
                onBlur: (e) => {
                  containerRef.current?.classList.remove("kl-ring-2");
                  onBlur(e);
                },
                ...extraProps
              }
            ),
            !!suffix && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "kl-cursor-default", children: suffix }),
            !!suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
              "div",
              {
                className: cn("kl-pl-lg kl-bodyMd", {
                  "kl-text-text-critical": error,
                  "kl-text-text-strong": !error && !disabled,
                  "kl-text-text-disabled": disabled
                }),
                children: (0, import_react4.cloneElement)(suffixIcon, {
                  color: "currentColor",
                  size: 16
                })
              }
            ),
            showclear && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
              "button",
              {
                "aria-label": "Clear",
                type: "button",
                tabIndex: -1,
                onClick: (e) => {
                  if (onChange)
                    onChange({ ...e, target: { value: "" } });
                },
                className: cn(
                  "kl-outline-none kl-flex kl-items-center kl-rounded kl-justify-center",
                  {
                    "kl-cursor-default": disabled
                  }
                ),
                children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.X, { size: 16, color: "currentColor" })
              }
            ),
            type === "password" && !disabled && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
              "button",
              {
                type: "button",
                tabIndex: -1,
                onClick: () => {
                  setT((prev) => prev === "text" ? "password" : "text");
                },
                className: cn(
                  "kl-outline-none kl-flex kl-items-center kl-rounded kl-justify-center",
                  {
                    "kl-cursor-default": disabled
                  }
                ),
                children: t === "password" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.EyeSlash, { size: 16, color: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react2.Eye, { size: 16, color: "currentColor" })
              }
            )
          ]
        }
      ),
      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(animate_hide_default, { show: !!message, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
        "div",
        {
          className: cn(
            "kl-bodySm pulsable",
            {
              "kl-text-text-critical": error,
              "kl-text-text-default": !error
            },
            "kl-pt-md"
          ),
          children: message
        }
      ) })
    ] });
  }
);
var TextInput = (0, import_react4.forwardRef)(
  (props, ref) => {
    const id = (0, import_react4.useId)();
    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
      TextInputBase,
      {
        ...{ ...props, id, component: "input", type: "text", ref }
      }
    );
  }
);
var TextArea = (0, import_react4.forwardRef)(
  ({
    autoComplete = "off",
    onChange = (_) => {
    },
    resize = false,
    rows = "3",
    ...etc
  }, ref) => {
    const id = (0, import_react4.useId)();
    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
      TextInputBase,
      {
        ...{
          ...etc,
          id,
          rows,
          autoComplete,
          onChange,
          resize,
          component: "textarea",
          ref,
          type: "text"
        }
      }
    );
  }
);

// components/atoms/toolbar.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var TOOLBAR_NAME = "Toolbar";
var [createToolbarContext, _createToolbarScope] = (0, import_react_context.createContextScope)(
  TOOLBAR_NAME,
  [import_react_roving_focus.createRovingFocusGroupScope, import_react_toggle_group.createToggleGroupScope]
);
var useRovingFocusGroupScope = (0, import_react_roving_focus.createRovingFocusGroupScope)();
var useToggleGroupScope = (0, import_react_toggle_group.createToggleGroupScope)();
var [ToolbarProvider, useToolbarContext] = createToolbarContext(TOOLBAR_NAME);
var Root4 = React2.forwardRef(
  (props, forwardedRef) => {
    const {
      __scopeToolbar,
      orientation = "horizontal",
      dir,
      loop = true,
      ...toolbarProps
    } = props;
    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
    const direction = (0, import_react_direction.useDirection)(dir);
    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToolbarProvider, { scope: __scopeToolbar, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      RovingFocusGroup.Root,
      {
        asChild: true,
        ...rovingFocusGroupScope,
        orientation,
        dir: direction,
        loop,
        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
          import_react_primitive.Primitive.div,
          {
            role: "toolbar",
            "aria-orientation": orientation,
            dir: direction,
            ...toolbarProps,
            ref: forwardedRef,
            className: cn("kl-flex kl-flex-row kl-gap-lg kl-w-full")
          }
        )
      }
    ) });
  }
);
Root4.displayName = TOOLBAR_NAME;
var SEPARATOR_NAME = "ToolbarSeparator";
var ToolbarSeparator = React2.forwardRef((props, forwardedRef) => {
  const { __scopeToolbar, ...separatorProps } = props;
  const context = useToolbarContext(SEPARATOR_NAME, __scopeToolbar);
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    SeparatorPrimitive.Root,
    {
      orientation: context.orientation === "horizontal" ? "vertical" : "horizontal",
      ...separatorProps,
      ref: forwardedRef
    }
  );
});
ToolbarSeparator.displayName = SEPARATOR_NAME;
var BUTTON_NAME = "ToolbarButtonBase";
var ToolbarButtonBase = React2.forwardRef((props, forwardedRef) => {
  const { __scopeToolbar, ...buttonProps } = props;
  const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    RovingFocusGroup.Item,
    {
      asChild: true,
      ...rovingFocusGroupScope,
      focusable: !props.disabled,
      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_primitive.Primitive.button, { type: "button", ...buttonProps, ref: forwardedRef })
    }
  );
});
ToolbarButtonBase.displayName = BUTTON_NAME;
var TOOLBAR_BUTTON_NAME = "ToolbarButton";
var ToolbarButton = React2.forwardRef(
  (props, forwardedRef) => {
    const { __scopeToolbar, ...buttonProps } = props;
    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      RovingFocusGroup.Item,
      {
        asChild: true,
        ...rovingFocusGroupScope,
        focusable: !props.disabled,
        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { ...buttonProps, ref: forwardedRef })
      }
    );
  }
);
ToolbarButton.displayName = TOOLBAR_BUTTON_NAME;
var TOOLBAR_ICON_BUTTON_NAME = "ToolbarIconButton";
var ToolbarIconButton = React2.forwardRef(
  (props, forwardedRef) => {
    const { __scopeToolbar, ...buttonProps } = props;
    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      RovingFocusGroup.Item,
      {
        asChild: true,
        ...rovingFocusGroupScope,
        focusable: !props.disabled,
        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IconButton, { ...buttonProps, ref: forwardedRef })
      }
    );
  }
);
ToolbarIconButton.displayName = TOOLBAR_ICON_BUTTON_NAME;
var TEXTFIELD_NAME = "TextField";
var ToolbarTextField = React2.forwardRef(
  (props, forwardedRef) => {
    const { __scopeToolbar, ...inputProps } = props;
    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      RovingFocusGroup.Item,
      {
        asChild: true,
        ...rovingFocusGroupScope,
        focusable: true,
        onFocus: (e) => {
          e.target?.parentElement?.classList?.add(
            "ring-2",
            "ring-border-focus"
          );
        },
        onBlur: (e) => {
          e.target?.parentElement?.classList?.remove(
            "ring-2",
            "ring-border-focus"
          );
        },
        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TextInput, { ...inputProps, ref: forwardedRef })
      }
    );
  }
);
ToolbarTextField.displayName = TEXTFIELD_NAME;
var LINK_NAME = "ToolbarLink";
var ToolbarLink = React2.forwardRef(
  (props, forwardedRef) => {
    const { __scopeToolbar, ...linkProps } = props;
    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeToolbar);
    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
      import_react_primitive.Primitive.a,
      {
        ...linkProps,
        ref: forwardedRef,
        onKeyDown: (0, import_primitive.composeEventHandlers)(props.onKeyDown, (event) => {
          if (event.key === " ")
            event.currentTarget.click();
        })
      }
    ) });
  }
);
ToolbarLink.displayName = LINK_NAME;
var BUTTON_GROUP_NAME = "ToolbarButtonGroup";
var ToolbarButtonGroup = React2.forwardRef((props, forwardedRef) => {
  const { __scopeToolbar, ...toggleGroupProps } = props;
  const context = useToolbarContext(BUTTON_GROUP_NAME, __scopeToolbar);
  const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
  delete toggleGroupProps.selectable;
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    ToggleGroupPrimitive.Root,
    {
      "data-orientation": context?.orientation,
      dir: context?.dir,
      ...toggleGroupScope,
      ...toggleGroupProps,
      value: toggleGroupProps.value,
      ref: forwardedRef,
      rovingFocus: false,
      className: cn("kl-flex kl-flex-row pulsable"),
      onValueChange: (e) => {
        if (props.onValueChange && e)
          props.onValueChange(e);
      },
      type: "single",
      onClick: () => {
        if (props.onClick)
          props.onClick(props.value);
      },
      children: React2.Children.map(props.children, (child) => {
        const childElement = child;
        const childProps = childElement.props;
        return React2.cloneElement(childElement, {
          selected: childProps.value === props.value && !!props.selectable
        });
      })
    }
  );
});
ToolbarButtonGroup.displayName = BUTTON_GROUP_NAME;
var BUTTON_GROUP_BUTTON_NAME = "ButtonGroupButton";
var ToolbarButtonGroupButton = React2.forwardRef((props, forwardedRef) => {
  const { value, __scopeToolbar, ...toggleItemProps } = props;
  const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
  const scope = { __scopeToolbar: props.__scopeToolbar };
  const extraProps = {};
  if (props["is-menu-button"]) {
    extraProps.selected = props["data-state"] === "open";
  }
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToolbarButtonBase, { asChild: true, ...scope, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    ToggleGroupPrimitive.Item,
    {
      ...toggleGroupScope,
      ...toggleItemProps,
      content: toggleItemProps.content,
      ref: forwardedRef,
      asChild: true,
      value,
      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
        Button,
        {
          ...props,
          noRounded: true,
          className: cn(
            "-kl-ml-xs first:kl-rounded-l last:kl-rounded-r first:kl-ml-0"
          ),
          variant: "basic",
          ...extraProps,
          content: toggleItemProps.content
        }
      )
    }
  ) });
});
var BUTTON_GROUP_ICON_BUTTON_NAME = "ToolbarButtonGroupIconButton";
var ToolbarButtonGroupIconButton = React2.forwardRef((props, forwardedRef) => {
  const { value, __scopeToolbar, ...toggleItemProps } = props;
  const toggleGroupScope = useToggleGroupScope(__scopeToolbar);
  const scope = { __scopeToolbar: props.__scopeToolbar };
  const extraProps = {};
  if (props["is-menu-button"]) {
    extraProps.selected = props["data-state"] === "open";
  }
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToolbarButtonBase, { asChild: true, ...scope, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
    ToggleGroupPrimitive.Item,
    {
      ...toggleGroupScope,
      ...toggleItemProps,
      ref: forwardedRef,
      asChild: true,
      value,
      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
        IconButton,
        {
          ...props,
          variant: "basic",
          noRounded: true,
          className: cn(
            "-kl-ml-xs first:kl-rounded-l last:kl-rounded-r first:kl-ml-0"
          ),
          ...extraProps
        }
      )
    }
  ) });
});
ToolbarButtonGroupButton.displayName = BUTTON_GROUP_BUTTON_NAME;
ToolbarButtonGroupIconButton.displayName = BUTTON_GROUP_ICON_BUTTON_NAME;
var Toolbar = {
  ButtonGroup: {
    Root: ToolbarButtonGroup,
    Button: ToolbarButtonGroupButton,
    IconButton: ToolbarButtonGroupIconButton
  },
  Button: ToolbarButton,
  IconButton: ToolbarIconButton,
  TextInput: ToolbarTextField,
  Separator: ToolbarSeparator,
  Root: Root4
};
var toolbar_default = Toolbar;