@kloudlite/design-system
Version:
A design system for building ambitious products.
932 lines (922 loc) • 30.5 kB
JavaScript
"use client";
// components/atoms/toolbar.tsx
import { composeEventHandlers } from "@radix-ui/primitive";
import { createContextScope } from "@radix-ui/react-context";
import * as React2 from "react";
import { useDirection } from "@radix-ui/react-direction";
import { Primitive } from "@radix-ui/react-primitive";
import * as RovingFocusGroup from "@radix-ui/react-roving-focus";
import { createRovingFocusGroupScope } from "@radix-ui/react-roving-focus";
import * as SeparatorPrimitive from "@radix-ui/react-separator";
import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
import { createToggleGroupScope } from "@radix-ui/react-toggle-group";
// components/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
return classNames(...props);
};
// components/atoms/button.tsx
import { AnimatePresence, motion } from "framer-motion";
import React from "react";
// components/icons.tsx
import {
BellSimple,
Warning,
WarningCircleFill,
Domain,
ArrowLeftLg,
ArrowRightLg,
ArrowUpLg,
ArrowDownLg,
ArrowsDownUp,
Plus,
Trash,
PencilLine,
PencilSimple,
GithubLogoFill,
GitlabLogoFill,
GitBranchFill,
Users,
Check,
ChevronLeft,
ChevronRight,
X,
SmileySad,
InfoFill,
CheckCircleFill,
WarningFill,
WarningOctagonFill,
LockSimple,
XCircleFill,
LockSimpleOpen,
MinusCircle,
Search,
ArrowsCounterClockwise,
ArrowClockwise,
Copy,
GearSix,
QrCode,
WireGuardlogo,
ChevronUpDown,
ChevronDown,
Buildings,
Project,
InfraAsCode,
Container,
File,
TreeStructure,
CirclesFour,
BackingServices,
VirtualMachine,
Database,
ArrowsClockwise,
Info,
Fan,
WarningCircle,
ChecksFill,
CircleNotch,
Circle,
CircleFill,
Spinner,
Globe,
ShieldCheck,
NoOps,
Nodeless,
GitMerge,
PencilLine as PencilLine2,
AWSlogoFill,
GoogleCloudlogo,
ArrowCounterClockwise,
CopySimple,
RecordFill,
CheckCircle,
ArrowLeftLg as ArrowLeftLg2,
EyeSlash,
Eye,
CaretUpFill,
CaretDownFill,
XFill,
HamburgerFill,
CalendarCheckFill,
GearFill,
EnvelopeSimple
} from "@jengaicons/react";
import { jsx } from "react/jsx-runtime";
// components/atoms/button.tsx
import { jsx as jsx2, jsxs } from "react/jsx-runtime";
var ButtonBase = React.forwardRef((props, ref) => {
const {
onClick = () => {
},
to = "",
linkComponent = 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 === motion.button) {
Component = motion.a;
tempToLabel = "href";
} else {
Component = linkComponent;
}
}
if (Component === motion.button || Component === motion.a) {
extraProps = {
initial: { scale: 1 },
whileTap: { scale: 0.99 }
};
}
const noRing = false;
return /* @__PURE__ */ 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__ */ jsx2(AnimatePresence, { children: loading && /* @__PURE__ */ jsx2(
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__ */ jsx2("span", { className: cn("kl-animate-spin"), children: /* @__PURE__ */ jsx2(Spinner, { color: "currentColor", weight: 2, size: 18 }) })
}
) }),
!!prefix && React.cloneElement(prefix, {
size: iconSize || (iconOnly && size === "lg" ? 20 : 16),
color: "currentColor"
}),
!iconOnly && /* @__PURE__ */ jsx2("span", { className: cn("kl-block kl-truncate"), children: content }),
!!suffix && React.cloneElement(suffix, {
size: iconSize || 16,
color: "currentColor"
})
]
}
);
});
var IconButton = React.forwardRef(
(props, ref) => {
const { icon, block } = props;
return /* @__PURE__ */ jsx2(
ButtonBase,
{
...props,
ref,
iconOnly: true,
content: null,
prefix: icon,
block: !!block
}
);
}
);
var Button = React.forwardRef(
(props, ref) => {
const { block } = props;
return /* @__PURE__ */ jsx2(ButtonBase, { ...props, iconOnly: false, ref, block: !!block });
}
);
// components/atoms/input.tsx
import {
cloneElement,
forwardRef,
useId,
useRef,
useState
} from "react";
// components/atoms/animate-hide.tsx
import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
import { jsx as jsx3 } from "react/jsx-runtime";
var AnimateHide = ({
children,
show,
initial = false,
className,
onClick
}) => {
return /* @__PURE__ */ jsx3(AnimatePresence2, { initial, children: show && /* @__PURE__ */ jsx3(
motion2.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
import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
var TextInputBase = 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] = useState(type || "text");
const Component = component;
const containerRef = useRef(null);
return /* @__PURE__ */ jsxs2("div", { className: cn("kl-flex kl-flex-col", containerClassName), children: [
(label || extra) && /* @__PURE__ */ jsxs2(
"div",
{
className: cn(
"kl-flex kl-items-center kl-justify-between kl-gap-md",
{
"kl-pb-md": !!label || !!extra
}
),
children: [
/* @__PURE__ */ jsx4(
"label",
{
className: "kl-select-none kl-bodyMd-medium pulsable kl-min-w-[33%] kl-text-text-default",
htmlFor: id,
children: label
}
),
/* @__PURE__ */ jsx4(
"div",
{
className: cn({
"kl-h-4xl pulsable": !!label || !!extra
}),
children: extra && cloneElement(extra)
}
)
]
}
),
/* @__PURE__ */ jsxs2(
"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__ */ jsx4(
"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: cloneElement(prefixIcon, {
size: 16,
color: "currentColor"
})
}
),
!!prefix && /* @__PURE__ */ jsx4("div", { className: "kl-cursor-default", children: prefix }),
/* @__PURE__ */ jsx4(
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__ */ jsx4("div", { className: "kl-cursor-default", children: suffix }),
!!suffixIcon && /* @__PURE__ */ jsx4(
"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: cloneElement(suffixIcon, {
color: "currentColor",
size: 16
})
}
),
showclear && !disabled && /* @__PURE__ */ jsx4(
"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__ */ jsx4(X, { size: 16, color: "currentColor" })
}
),
type === "password" && !disabled && /* @__PURE__ */ jsx4(
"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__ */ jsx4(EyeSlash, { size: 16, color: "currentColor" }) : /* @__PURE__ */ jsx4(Eye, { size: 16, color: "currentColor" })
}
)
]
}
),
/* @__PURE__ */ jsx4(animate_hide_default, { show: !!message, children: /* @__PURE__ */ jsx4(
"div",
{
className: cn(
"kl-bodySm pulsable",
{
"kl-text-text-critical": error,
"kl-text-text-default": !error
},
"kl-pt-md"
),
children: message
}
) })
] });
}
);
var TextInput = forwardRef(
(props, ref) => {
const id = useId();
return /* @__PURE__ */ jsx4(
TextInputBase,
{
...{ ...props, id, component: "input", type: "text", ref }
}
);
}
);
var TextArea = forwardRef(
({
autoComplete = "off",
onChange = (_) => {
},
resize = false,
rows = "3",
...etc
}, ref) => {
const id = useId();
return /* @__PURE__ */ jsx4(
TextInputBase,
{
...{
...etc,
id,
rows,
autoComplete,
onChange,
resize,
component: "textarea",
ref,
type: "text"
}
}
);
}
);
// components/atoms/toolbar.tsx
import { jsx as jsx5 } from "react/jsx-runtime";
var TOOLBAR_NAME = "Toolbar";
var [createToolbarContext, _createToolbarScope] = createContextScope(
TOOLBAR_NAME,
[createRovingFocusGroupScope, createToggleGroupScope]
);
var useRovingFocusGroupScope = createRovingFocusGroupScope();
var useToggleGroupScope = 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 = useDirection(dir);
return /* @__PURE__ */ jsx5(ToolbarProvider, { scope: __scopeToolbar, children: /* @__PURE__ */ jsx5(
RovingFocusGroup.Root,
{
asChild: true,
...rovingFocusGroupScope,
orientation,
dir: direction,
loop,
children: /* @__PURE__ */ jsx5(
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__ */ jsx5(
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__ */ jsx5(
RovingFocusGroup.Item,
{
asChild: true,
...rovingFocusGroupScope,
focusable: !props.disabled,
children: /* @__PURE__ */ jsx5(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__ */ jsx5(
RovingFocusGroup.Item,
{
asChild: true,
...rovingFocusGroupScope,
focusable: !props.disabled,
children: /* @__PURE__ */ jsx5(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__ */ jsx5(
RovingFocusGroup.Item,
{
asChild: true,
...rovingFocusGroupScope,
focusable: !props.disabled,
children: /* @__PURE__ */ jsx5(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__ */ jsx5(
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__ */ jsx5(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__ */ jsx5(RovingFocusGroup.Item, { asChild: true, ...rovingFocusGroupScope, focusable: true, children: /* @__PURE__ */ jsx5(
Primitive.a,
{
...linkProps,
ref: forwardedRef,
onKeyDown: 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__ */ jsx5(
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__ */ jsx5(ToolbarButtonBase, { asChild: true, ...scope, children: /* @__PURE__ */ jsx5(
ToggleGroupPrimitive.Item,
{
...toggleGroupScope,
...toggleItemProps,
content: toggleItemProps.content,
ref: forwardedRef,
asChild: true,
value,
children: /* @__PURE__ */ jsx5(
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__ */ jsx5(ToolbarButtonBase, { asChild: true, ...scope, children: /* @__PURE__ */ jsx5(
ToggleGroupPrimitive.Item,
{
...toggleGroupScope,
...toggleItemProps,
ref: forwardedRef,
asChild: true,
value,
children: /* @__PURE__ */ jsx5(
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;
export {
toolbar_default as default
};