@kloudlite/design-system
Version:
A design system for building ambitious products.
521 lines (515 loc) • 14.1 kB
JavaScript
"use client";
// components/atoms/input.tsx
import {
cloneElement,
forwardRef,
useId,
useRef,
useState
} 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/utils.tsx
import classNames from "classnames";
import { useMemo } from "react";
import { v4 } from "uuid";
var cn = (...props) => {
return classNames(...props);
};
// components/atoms/animate-hide.tsx
import { AnimatePresence, motion } from "framer-motion";
import { jsx as jsx2 } from "react/jsx-runtime";
var AnimateHide = ({
children,
show,
initial = false,
className,
onClick
}) => {
return /* @__PURE__ */ jsx2(AnimatePresence, { initial, children: show && /* @__PURE__ */ jsx2(
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
import { jsx as jsx3, jsxs } 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__ */ jsxs("div", { className: cn("kl-flex kl-flex-col", containerClassName), children: [
(label || extra) && /* @__PURE__ */ jsxs(
"div",
{
className: cn(
"kl-flex kl-items-center kl-justify-between kl-gap-md",
{
"kl-pb-md": !!label || !!extra
}
),
children: [
/* @__PURE__ */ jsx3(
"label",
{
className: "kl-select-none kl-bodyMd-medium pulsable kl-min-w-[33%] kl-text-text-default",
htmlFor: id,
children: label
}
),
/* @__PURE__ */ jsx3(
"div",
{
className: cn({
"kl-h-4xl pulsable": !!label || !!extra
}),
children: extra && cloneElement(extra)
}
)
]
}
),
/* @__PURE__ */ 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__ */ jsx3(
"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__ */ jsx3("div", { className: "kl-cursor-default", children: prefix }),
/* @__PURE__ */ jsx3(
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__ */ jsx3("div", { className: "kl-cursor-default", children: suffix }),
!!suffixIcon && /* @__PURE__ */ jsx3(
"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__ */ jsx3(
"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__ */ jsx3(X, { size: 16, color: "currentColor" })
}
),
type === "password" && !disabled && /* @__PURE__ */ jsx3(
"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__ */ jsx3(EyeSlash, { size: 16, color: "currentColor" }) : /* @__PURE__ */ jsx3(Eye, { size: 16, color: "currentColor" })
}
)
]
}
),
/* @__PURE__ */ jsx3(animate_hide_default, { show: !!message, children: /* @__PURE__ */ jsx3(
"div",
{
className: cn(
"kl-bodySm pulsable",
{
"kl-text-text-critical": error,
"kl-text-text-default": !error
},
"kl-pt-md"
),
children: message
}
) })
] });
}
);
var NumberInput = ({
suffix,
value,
error = false,
onChange = () => {
},
label,
step = 1,
...etc
}) => {
const ref = useRef(null);
const id = useId();
return /* @__PURE__ */ jsx3(
TextInputBase,
{
...{
...etc,
type: "number",
id,
error,
onChange,
label,
ref,
value,
step,
suffix: /* @__PURE__ */ jsxs("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-xl -kl-mr-lg", children: [
suffix,
/* @__PURE__ */ jsxs(
"div",
{
className: cn(
"kl-flex kl-flex-col kl-justify-center kl-items-center",
{
"kl-bg-surface-critical-subdued kl-divide-border-critical kl-divide-y kl-rounded-r kl-border-l kl-border-border-critical kl-text-text-critical placeholder:kl-text-critical-400": error,
"kl-text-text-default kl-border-l kl-border-border-default kl-divide-border-default kl-divide-y": !error
}
),
tabIndex: -1,
children: [
/* @__PURE__ */ jsx3(
"button",
{
type: "button",
"aria-controls": id,
"aria-label": `Increase ${label}`,
tabIndex: -1,
onClick: (e) => {
onChange({
...e,
target: { value: `${Number(value) + step}` }
});
ref?.current?.focus();
},
className: cn(
"kl-flex-1 kl-p-sm disabled:kl-text-icon-disabled hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed"
),
children: /* @__PURE__ */ jsx3(CaretUpFill, { size: 12, color: "currentColor" })
}
),
/* @__PURE__ */ jsx3(
"button",
{
type: "button",
"aria-controls": id,
"aria-label": `Decrease ${label}`,
tabIndex: -1,
onClick: (e) => {
onChange({
...e,
target: { value: `${Number(value) - step}` }
});
ref?.current?.focus();
},
className: cn(
"kl-flex-1 kl-p-sm disabled:kl-text-icon-disabled hover:kl-bg-surface-basic-hovered active:kl-bg-surface-basic-pressed"
),
children: /* @__PURE__ */ jsx3(CaretDownFill, { size: 12, color: "currentColor" })
}
)
]
}
)
] })
}
}
);
};
var TextInput = forwardRef(
(props, ref) => {
const id = useId();
return /* @__PURE__ */ jsx3(
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__ */ jsx3(
TextInputBase,
{
...{
...etc,
id,
rows,
autoComplete,
onChange,
resize,
component: "textarea",
ref,
type: "text"
}
}
);
}
);
var PasswordInput = (props) => {
const ref = useRef(null);
const id = useId();
return /* @__PURE__ */ jsx3(
TextInputBase,
{
...{ ...props, id, component: "input", ref, type: "password" }
}
);
};
export {
NumberInput,
PasswordInput,
TextArea,
TextInput,
TextInputBase
};