@kloudlite/design-system
Version:
A design system for building ambitious products.
521 lines (513 loc) • 20.3 kB
JavaScript
;
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/organisms/page-500.tsx
var page_500_exports = {};
__export(page_500_exports, {
default: () => page_500_default
});
module.exports = __toCommonJS(page_500_exports);
// components/atoms/button.tsx
var import_framer_motion = require("framer-motion");
var import_react3 = __toESM(require("react"), 1);
// 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/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_react.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/organisms/error-500.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
function Error500Icon() {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"svg",
{
xmlns: "http://www.w3.org/2000/svg",
width: "122",
height: "129",
fill: "none",
viewBox: "0 0 122 129",
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
stroke: "#DC2626",
strokeDasharray: "6 6",
strokeLinecap: "round",
strokeWidth: "2",
d: "M36.906 40l49 49M36.906 89l49-49"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#EDEEF1",
d: "M93.906 7.892L107.933 0l13.989 7.703-14.096 7.827-13.92-7.638z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#9CA3AF",
d: "M93.911 7.889v16.08l13.904 8.03V15.517L93.911 7.89z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#D1D5DB",
d: "M107.815 15.519l14.113-7.827v16.16L107.815 32V15.519z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#EDEEF1",
d: "M.906 7.892L14.933 0l13.99 7.703-14.097 7.827L.906 7.892z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#9CA3AF",
d: "M.911 7.889v16.08l13.904 8.03V15.517L.911 7.89z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#D1D5DB",
d: "M14.815 15.519l14.113-7.827v16.16L14.815 32V15.519z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#EDEEF1",
d: "M.906 104.892L14.933 97l13.99 7.703-14.097 7.827-13.92-7.638z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#9CA3AF",
d: "M.911 104.889v16.079l13.904 8.031v-16.482L.911 104.889z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#D1D5DB",
d: "M14.815 112.519l14.113-7.827v16.159L14.815 129v-16.481z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#EDEEF1",
d: "M93.906 104.892L107.933 97l13.989 7.703-14.096 7.827-13.92-7.638z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#9CA3AF",
d: "M93.911 104.889v16.079l13.904 8.031v-16.482l-13.904-7.628z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
fill: "#D1D5DB",
d: "M107.815 112.519l14.113-7.827v16.159L107.815 129v-16.481z"
}
)
]
}
);
}
var Error500IconDark = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
"svg",
{
height: "129",
width: "122",
fill: "none",
viewBox: "0 0 122 129",
xmlns: "http://www.w3.org/2000/svg",
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M36.9061 40L85.9061 89",
stroke: "#EF4444",
strokeDasharray: "6 6",
strokeLinecap: "round",
strokeWidth: "2"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M36.9061 89L85.9061 40",
stroke: "#EF4444",
strokeDasharray: "6 6",
strokeLinecap: "round",
strokeWidth: "2"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M93.9061 7.89231L107.933 -1.71529e-05L121.922 7.70313L107.826 15.5297L93.9061 7.89231Z",
fill: "#EDEEF1"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M93.911 7.88904V23.9684L107.815 31.9987V15.5173L93.911 7.88904Z",
fill: "#9CA3AF"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M107.815 15.5187L121.928 7.69159V23.8513L107.815 32V15.5187Z",
fill: "#D1D5DB"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M0.906128 7.89231L14.9327 -1.71529e-05L28.9225 7.70313L14.8261 15.5297L0.906128 7.89231Z",
fill: "#EDEEF1"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M0.911011 7.88904L0.911011 23.9684L14.815 31.9987V15.5173L0.911011 7.88904Z",
fill: "#9CA3AF"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M14.815 15.5187L28.9282 7.69159V23.8513L14.815 32V15.5187Z",
fill: "#D1D5DB"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M0.906128 104.892L14.9327 97L28.9225 104.703L14.8261 112.53L0.906128 104.892Z",
fill: "#EDEEF1"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M0.911011 104.889L0.911011 120.968L14.815 128.999V112.517L0.911011 104.889Z",
fill: "#9CA3AF"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M14.815 112.519L28.9282 104.692V120.851L14.815 129V112.519Z",
fill: "#D1D5DB"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M93.9061 104.892L107.933 97L121.922 104.703L107.826 112.53L93.9061 104.892Z",
fill: "#EDEEF1"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M93.911 104.889V120.968L107.815 128.999V112.517L93.911 104.889Z",
fill: "#9CA3AF"
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
d: "M107.815 112.519L121.928 104.692V120.851L107.815 129V112.519Z",
fill: "#D1D5DB"
}
)
]
}
);
// components/organisms/page-500.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var Page500 = ({
heading = "Internal server error",
content = "The server encountered an error and could not complete your requests.",
link
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "kl-flex kl-flex-col kl-items-center kl-justify-center kl-h-screen kl-gap-8xl", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "dark-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Error500Icon, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "kl-hidden dark-block", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Error500IconDark, {}) }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "kl-flex kl-flex-col kl-items-center kl-justify-center kl-gap-5xl kl-max-w-md kl-text-center", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "kl-flex kl-flex-col kl-gap-3xl", children: [
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "kl-text-text-default kl-heading3xl", children: heading }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "kl-bodyMd kl-text-text-soft md:kl-w-[544px]", children: content })
] }),
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Button, { variant: "basic", size: "md", content: "Go to homepage", to: link })
] })
] });
};
var page_500_default = Page500;