@kloudlite/design-system
Version:
A design system for building ambitious products.
464 lines (458 loc) • 15.6 kB
JavaScript
;
"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/input.tsx
var input_exports = {};
__export(input_exports, {
NumberInput: () => NumberInput,
PasswordInput: () => PasswordInput,
TextArea: () => TextArea,
TextInput: () => TextInput,
TextInputBase: () => TextInputBase
});
module.exports = __toCommonJS(input_exports);
var import_react3 = require("react");
// components/icons.tsx
var import_react = require("@jengaicons/react");
var import_jsx_runtime = require("react/jsx-runtime");
// components/utils.tsx
var import_classnames = __toESM(require("classnames"), 1);
var import_react2 = require("react");
var import_uuid = require("uuid");
var cn = (...props) => {
return (0, import_classnames.default)(...props);
};
// components/atoms/animate-hide.tsx
var import_framer_motion = require("framer-motion");
var import_jsx_runtime2 = require("react/jsx-runtime");
var AnimateHide = ({
children,
show,
initial = false,
className,
onClick
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { initial, children: show && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_framer_motion.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_runtime3 = require("react/jsx-runtime");
var TextInputBase = (0, import_react3.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_react3.useState)(type || "text");
const Component = component;
const containerRef = (0, import_react3.useRef)(null);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cn("kl-flex kl-flex-col", containerClassName), children: [
(label || extra) && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_runtime3.jsx)(
"div",
{
className: cn({
"kl-h-4xl pulsable": !!label || !!extra
}),
children: extra && (0, import_react3.cloneElement)(extra)
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.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_react3.cloneElement)(prefixIcon, {
size: 16,
color: "currentColor"
})
}
),
!!prefix && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "kl-cursor-default", children: prefix }),
/* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("div", { className: "kl-cursor-default", children: suffix }),
!!suffixIcon && /* @__PURE__ */ (0, import_jsx_runtime3.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_react3.cloneElement)(suffixIcon, {
color: "currentColor",
size: 16
})
}
),
showclear && !disabled && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(import_react.X, { size: 16, color: "currentColor" })
}
),
type === "password" && !disabled && /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(import_react.EyeSlash, { size: 16, color: "currentColor" }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react.Eye, { size: 16, color: "currentColor" })
}
)
]
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(animate_hide_default, { show: !!message, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"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 = (0, import_react3.useRef)(null);
const id = (0, import_react3.useId)();
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
TextInputBase,
{
...{
...etc,
type: "number",
id,
error,
onChange,
label,
ref,
value,
step,
suffix: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "kl-flex kl-flex-row kl-items-center kl-gap-xl -kl-mr-lg", children: [
suffix,
/* @__PURE__ */ (0, import_jsx_runtime3.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__ */ (0, import_jsx_runtime3.jsx)(
"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__ */ (0, import_jsx_runtime3.jsx)(import_react.CaretUpFill, { size: 12, color: "currentColor" })
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"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__ */ (0, import_jsx_runtime3.jsx)(import_react.CaretDownFill, { size: 12, color: "currentColor" })
}
)
]
}
)
] })
}
}
);
};
var TextInput = (0, import_react3.forwardRef)(
(props, ref) => {
const id = (0, import_react3.useId)();
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
TextInputBase,
{
...{ ...props, id, component: "input", type: "text", ref }
}
);
}
);
var TextArea = (0, import_react3.forwardRef)(
({
autoComplete = "off",
onChange = (_) => {
},
resize = false,
rows = "3",
...etc
}, ref) => {
const id = (0, import_react3.useId)();
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
TextInputBase,
{
...{
...etc,
id,
rows,
autoComplete,
onChange,
resize,
component: "textarea",
ref,
type: "text"
}
}
);
}
);
var PasswordInput = (props) => {
const ref = (0, import_react3.useRef)(null);
const id = (0, import_react3.useId)();
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
TextInputBase,
{
...{ ...props, id, component: "input", ref, type: "password" }
}
);
};