@kosmeo-ui/react 0.1.0

package/dist/components/feedback/alert/index.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import Button from "../../buttons/button/index.js";
+import "./styles.css";
+import { faCircleCheck, faCircleInfo, faHand, faTriangleExclamation, } from "@fortawesome/free-solid-svg-icons";
+const Alert = (props) => {
+    const { size = "md", variant = "primary" } = props;
+    const icon = {
+        primary: faCircleInfo,
+        secondary: faCircleInfo,
+        light: faCircleInfo,
+        warning: faTriangleExclamation,
+        danger: faHand,
+        success: faCircleCheck,
+        custom: faCircleInfo,
+        link: faCircleInfo,
+    };
+    return (_jsx("div", { className: `k-alert k-alert-${variant} k-alert-${size}`, role: "alert", children: _jsxs("div", { className: "k-alert-content", children: [_jsxs("div", { className: "k-alert-icon-message", children: [_jsx(FontAwesomeIcon, { size: "lg", icon: icon[variant] }), _jsxs("div", { className: "k-alert-body", children: [props.heading && (_jsx("div", { className: "k-alert-heading", children: props.heading })), _jsx("div", { className: "k-alert-message", children: props.children })] })] }), props.dismissible && (_jsx(Button, { size: "sm", variant: variant, onClick: (e) => {
+                        if (!props.onDismiss)
+                            return;
+                        props.onDismiss(e);
+                    }, children: props.buttonText ? props.buttonText : "Acknowledge" }))] }) }));
+};
+export default Alert;
+//# sourceMappingURL=index.js.map

package/dist/components/feedback/alert/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/alert/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,cAAc,CAAC;AACtB,OAAO,EACL,aAAa,EACb,YAAY,EACZ,MAAM,EACN,qBAAqB,GACtB,MAAM,mCAAmC,CAAC;AAe3C,MAAM,KAAK,GAAG,CAAC,KAAiB,EAAE,EAAE;IAClC,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,MAAM,IAAI,GAAG;QACX,OAAO,EAAE,YAAY;QACrB,SAAS,EAAE,YAAY;QACvB,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,qBAAqB;QAC9B,MAAM,EAAE,MAAM;QACd,OAAO,EAAE,aAAa;QACtB,MAAM,EAAE,YAAY;QACpB,IAAI,EAAE,YAAY;KACnB,CAAC;IAEF,OAAO,CACL,cAAK,SAAS,EAAE,mBAAmB,OAAO,YAAY,IAAI,EAAE,EAAE,IAAI,EAAC,OAAO,YACxE,eAAK,SAAS,EAAC,iBAAiB,aAC9B,eAAK,SAAS,EAAC,sBAAsB,aACnC,KAAC,eAAe,IAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,GAAI,EACpD,eAAK,SAAS,EAAC,cAAc,aAC1B,KAAK,CAAC,OAAO,IAAI,CAChB,cAAK,SAAS,EAAC,iBAAiB,YAAE,KAAK,CAAC,OAAO,GAAO,CACvD,EACD,cAAK,SAAS,EAAC,iBAAiB,YAAE,KAAK,CAAC,QAAQ,GAAO,IACnD,IACF,EACL,KAAK,CAAC,WAAW,IAAI,CACpB,KAAC,MAAM,IACL,IAAI,EAAC,IAAI,EACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;wBACb,IAAI,CAAC,KAAK,CAAC,SAAS;4BAAE,OAAO;wBAC7B,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;oBACrB,CAAC,YAEA,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,GAC7C,CACV,IACG,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/feedback/alert/styles.css

@@ -0,0 +1,88 @@
+.k-alert {
+  width: 100%;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.k-alert-content {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.k-alert-icon-message {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.k-alert-body {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  flex: 1;
+  min-width: 0;
+}
+
+.k-alert-heading {
+  font-weight: 600;
+  font-size: 1.0625em;
+  line-height: 1.25;
+}
+
+.k-alert-message {
+  line-height: 1.4;
+}
+
+.k-alert-primary {
+  background-color: var(--primary-color-background);
+  color: var(--text-color-light);
+}
+
+.k-alert-secondary {
+  background-color: var(--secondary-color-background);
+  color: var(--text-color-light);
+}
+
+.k-alert-light {
+  background-color: var(--light-color-background);
+  color: var(--text-color);
+}
+
+.k-alert-danger {
+  background-color: var(--danger-color-background);
+  color: var(--text-color-light);
+}
+
+.k-alert-warning {
+  background-color: var(--warning-color-background);
+  color: var(--text-color);
+}
+
+.k-alert-success {
+  background-color: var(--success-color-background);
+  color: var(--text-color-light);
+}
+
+.k-alert-sm {
+  font-size: var(--text-size-sm);
+  padding: 0.5rem 0.75rem;
+}
+
+.k-alert-md {
+  font-size: var(--text-size-md);
+  padding: 0.75rem 1rem;
+}
+
+.k-alert-lg {
+  font-size: var(--text-size-lg);
+  padding: 1rem 1.25rem;
+}

package/dist/components/feedback/badge/index.d.ts

@@ -0,0 +1,23 @@
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import "./styles.css";
+export interface BadgeProps extends PropsWithSize, PropsWithVariant {
+    /** The content to display inside the badge */
+    children: React.ReactNode;
+    /** Whether to use pill-shaped (fully rounded) styling. Defaults to true */
+    pill?: boolean;
+    /** Whether to use subtle styling with transparent background. Defaults to false */
+    subtle?: boolean;
+    /** Custom hex color. Required when variant="custom". Sets background and auto-picks contrast text color. */
+    color?: string;
+    /** When present, renders an inline × button. Caller handles state mutation. */
+    onRemove?: () => void;
+    /** Optional icon rendered before children. */
+    startIcon?: React.ReactNode;
+    /** When set, renders the badge as a button. */
+    onClick?: () => void;
+    /** Accessible label used when onClick is set. */
+    ariaLabel?: string;
+}
+declare const Badge: ({ children, size, variant, pill, subtle, color, onRemove, startIcon, onClick, ariaLabel, }: BadgeProps) => import("react").JSX.Element;
+export default Badge;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/badge/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,UAAW,SAAQ,aAAa,EAAE,gBAAgB;IACjE,8CAA8C;IAC9C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,2EAA2E;IAC3E,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,mFAAmF;IACnF,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,4GAA4G;IAC5G,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+EAA+E;IAC/E,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iDAAiD;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,QAAA,MAAM,KAAK,GAAI,4FAWZ,UAAU,gCA+DZ,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/feedback/badge/index.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
+import { getContrastTextColor } from "./utils.js";
+import "./styles.css";
+const Badge = ({ children, size = "md", variant = "primary", pill = true, subtle = false, color, onRemove, startIcon, onClick, ariaLabel, }) => {
+    if (variant === "custom" && !color) {
+        throw new Error('Badge: variant="custom" requires a `color` prop (hex string).');
+    }
+    const pillClass = pill ? "k-badge-pill" : "";
+    const subtleClass = subtle ? "k-badge-subtle" : "";
+    const clickableClass = onClick ? "k-badge-clickable" : "";
+    const classes = `k-badge k-badge-${variant} k-badge-${size} ${pillClass} ${subtleClass} ${clickableClass}`.trim();
+    const inlineStyle = variant === "custom" && color
+        ? {
+            backgroundColor: color,
+            color: getContrastTextColor(color) === "light"
+                ? "var(--text-color-light)"
+                : "var(--text-color)",
+        }
+        : undefined;
+    const content = (_jsxs(_Fragment, { children: [startIcon && _jsx("span", { className: "k-badge-start-icon", children: startIcon }), _jsx("span", { className: "k-badge-content", children: children }), onRemove && (_jsx("button", { type: "button", "aria-label": "Remove", className: "k-badge-remove", onClick: (e) => {
+                    e.stopPropagation();
+                    onRemove();
+                }, children: _jsx(FontAwesomeIcon, { icon: faXmark }) }))] }));
+    if (onClick) {
+        return (_jsx("button", { type: "button", "aria-label": ariaLabel, className: classes, style: inlineStyle, onClick: onClick, children: content }));
+    }
+    return (_jsx("span", { className: classes, style: inlineStyle, children: content }));
+};
+export default Badge;
+//# sourceMappingURL=index.js.map

package/dist/components/feedback/badge/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/badge/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,EAAE,OAAO,EAAE,MAAM,mCAAmC,CAAC;AAC5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAClD,OAAO,cAAc,CAAC;AAqBtB,MAAM,KAAK,GAAG,CAAC,EACb,QAAQ,EACR,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,SAAS,EACnB,IAAI,GAAG,IAAI,EACX,MAAM,GAAG,KAAK,EACd,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAS,GACE,EAAE,EAAE;IACf,IAAI,OAAO,KAAK,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;QACnC,MAAM,IAAI,KAAK,CACb,+DAA+D,CAChE,CAAC;IACJ,CAAC;IAED,MAAM,SAAS,GAAG,IAAI,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC;IAC7C,MAAM,WAAW,GAAG,MAAM,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnD,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAC;IAC1D,MAAM,OAAO,GACX,mBAAmB,OAAO,YAAY,IAAI,IAAI,SAAS,IAAI,WAAW,IAAI,cAAc,EAAE,CAAC,IAAI,EAAE,CAAC;IAEpG,MAAM,WAAW,GACf,OAAO,KAAK,QAAQ,IAAI,KAAK;QAC3B,CAAC,CAAC;YACE,eAAe,EAAE,KAAK;YACtB,KAAK,EACH,oBAAoB,CAAC,KAAK,CAAC,KAAK,OAAO;gBACrC,CAAC,CAAC,yBAAyB;gBAC3B,CAAC,CAAC,mBAAmB;SAC1B;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,MAAM,OAAO,GAAG,CACd,8BACG,SAAS,IAAI,eAAM,SAAS,EAAC,oBAAoB,YAAE,SAAS,GAAQ,EACrE,eAAM,SAAS,EAAC,iBAAiB,YAAE,QAAQ,GAAQ,EAClD,QAAQ,IAAI,CACX,iBACE,IAAI,EAAC,QAAQ,gBACF,QAAQ,EACnB,SAAS,EAAC,gBAAgB,EAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,QAAQ,EAAE,CAAC;gBACb,CAAC,YAED,KAAC,eAAe,IAAC,IAAI,EAAE,OAAO,GAAI,GAC3B,CACV,IACA,CACJ,CAAC;IAEF,IAAI,OAAO,EAAE,CAAC;QACZ,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,gBACD,SAAS,EACrB,SAAS,EAAE,OAAO,EAClB,KAAK,EAAE,WAAW,EAClB,OAAO,EAAE,OAAO,YAEf,OAAO,GACD,CACV,CAAC;IACJ,CAAC;IAED,OAAO,CACL,eAAM,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,YACzC,OAAO,GACH,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,KAAK,CAAC"}

package/dist/components/feedback/badge/styles.css

@@ -0,0 +1,162 @@
+.k-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 500;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+}
+
+button.k-badge {
+  border: none;
+  font-family: inherit;
+}
+
+.k-badge-clickable {
+  cursor: pointer;
+}
+
+.k-badge-clickable:hover {
+  opacity: 0.85;
+}
+
+.k-badge-start-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.k-badge-remove {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  border: none;
+  padding: 0;
+  margin-left: 0.125rem;
+  color: inherit;
+  opacity: 0.7;
+  cursor: pointer;
+  font-size: 0.85em;
+  line-height: 1;
+}
+
+.k-badge-remove:hover {
+  opacity: 1;
+}
+
+.k-badge-custom {
+  /* background-color + color set inline via style attribute */
+}
+
+/* Sizes */
+.k-badge-sm {
+  padding: 0.125rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.k-badge-md {
+  padding: 0.25rem 0.625rem;
+  font-size: 0.875rem;
+}
+
+.k-badge-lg {
+  padding: 0.375rem 0.75rem;
+  font-size: 1rem;
+}
+
+/* Variants */
+.k-badge-primary {
+  background-color: var(--primary-color);
+  color: var(--text-color-light);
+}
+
+.k-badge-secondary {
+  background-color: var(--secondary-color);
+  color: var(--text-color-light);
+}
+
+.k-badge-light {
+  background-color: var(--light-color-background);
+  color: var(--text-color);
+}
+
+.k-badge-danger {
+  background-color: var(--danger-color);
+  color: var(--text-color-light);
+}
+
+.k-badge-warning {
+  background-color: var(--warning-color);
+  color: var(--text-color);
+}
+
+.k-badge-success {
+  background-color: var(--success-color);
+  color: var(--text-color-light);
+}
+
+/* Pill shape */
+.k-badge-pill {
+  border-radius: 9999px;
+}
+
+/* Standard rounded corners when not pill */
+.k-badge:not(.k-badge-pill) {
+  border-radius: 4px;
+}
+
+/* Subtle variants - transparent background with colored text */
+.k-badge-subtle.k-badge-primary {
+  background-color: color-mix(
+    in srgb,
+    var(--primary-color) 15%,
+    var(--background-color)
+  );
+  color: var(--primary-color);
+}
+
+.k-badge-subtle.k-badge-secondary {
+  background-color: color-mix(
+    in srgb,
+    var(--secondary-color) 15%,
+    var(--background-color)
+  );
+  color: var(--secondary-color);
+}
+
+.k-badge-subtle.k-badge-light {
+  background-color: color-mix(
+    in srgb,
+    var(--light-color) 30%,
+    var(--background-color)
+  );
+  color: var(--text-color);
+}
+
+.k-badge-subtle.k-badge-danger {
+  background-color: color-mix(
+    in srgb,
+    var(--danger-color) 15%,
+    var(--background-color)
+  );
+  color: var(--danger-color);
+}
+
+.k-badge-subtle.k-badge-warning {
+  background-color: color-mix(
+    in srgb,
+    var(--warning-color) 20%,
+    var(--background-color)
+  );
+  color: var(--warning-color);
+}
+
+.k-badge-subtle.k-badge-success {
+  background-color: color-mix(
+    in srgb,
+    var(--success-color) 15%,
+    var(--background-color)
+  );
+  color: var(--success-color);
+}

package/dist/components/feedback/badge/utils.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Compute whether to use light or dark text on a given hex background.
+ * Uses YIQ luminance formula.
+ */
+export declare const getContrastTextColor: (hex: string) => "light" | "dark";
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/feedback/badge/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/badge/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,oBAAoB,GAAI,KAAK,MAAM,KAAG,OAAO,GAAG,MAS5D,CAAC"}

package/dist/components/feedback/badge/utils.js

@@ -0,0 +1,17 @@
+/**
+ * Compute whether to use light or dark text on a given hex background.
+ * Uses YIQ luminance formula.
+ */
+export const getContrastTextColor = (hex) => {
+    const normalized = hex.replace("#", "");
+    if (normalized.length !== 6)
+        return "dark";
+    const r = parseInt(normalized.slice(0, 2), 16);
+    const g = parseInt(normalized.slice(2, 4), 16);
+    const b = parseInt(normalized.slice(4, 6), 16);
+    if (Number.isNaN(r) || Number.isNaN(g) || Number.isNaN(b))
+        return "dark";
+    const yiq = (r * 299 + g * 587 + b * 114) / 1000;
+    return yiq >= 128 ? "dark" : "light";
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/feedback/badge/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/feedback/badge/utils.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,GAAW,EAAoB,EAAE;IACpE,MAAM,UAAU,GAAG,GAAG,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IACxC,IAAI,UAAU,CAAC,MAAM,KAAK,CAAC;QAAE,OAAO,MAAM,CAAC;IAC3C,MAAM,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC/C,MAAM,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC/C,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;QAAE,OAAO,MAAM,CAAC;IACzE,MAAM,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC;IACjD,OAAO,GAAG,IAAI,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AACvC,CAAC,CAAC"}

package/dist/components/feedback/emptyState/index.d.ts

@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export interface EmptyStateProps {
+    children: ReactNode;
+    /** "inline" = small grey text suitable inside a list (default). "block" = padded, centered. */
+    layout?: "inline" | "block";
+    icon?: ReactNode;
+    /** Call-to-action rendered below children. Only used with layout="block". */
+    action?: ReactNode;
+}
+declare const EmptyState: ({ children, layout, icon, action, }: EmptyStateProps) => import("react").JSX.Element;
+export default EmptyState;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/emptyState/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/emptyState/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAC;IACpB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC5B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,6EAA6E;IAC7E,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,GAAI,qCAKjB,eAAe,gCAUjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/feedback/emptyState/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+const EmptyState = ({ children, layout = "inline", icon, action, }) => {
+    return (_jsxs("div", { className: `k-empty-state k-empty-state-${layout}`, children: [icon && _jsx("div", { className: "k-empty-state-icon", children: icon }), _jsx("div", { className: "k-empty-state-body", children: children }), layout === "block" && action && (_jsx("div", { className: "k-empty-state-action", children: action }))] }));
+};
+export default EmptyState;
+//# sourceMappingURL=index.js.map

package/dist/components/feedback/emptyState/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/emptyState/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAWtB,MAAM,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,MAAM,GAAG,QAAQ,EACjB,IAAI,EACJ,MAAM,GACU,EAAE,EAAE;IACpB,OAAO,CACL,eAAK,SAAS,EAAE,+BAA+B,MAAM,EAAE,aACpD,IAAI,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,IAAI,GAAO,EACzD,cAAK,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAO,EACnD,MAAM,KAAK,OAAO,IAAI,MAAM,IAAI,CAC/B,cAAK,SAAS,EAAC,sBAAsB,YAAE,MAAM,GAAO,CACrD,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/feedback/emptyState/styles.css

@@ -0,0 +1,32 @@
+.k-empty-state-inline {
+  font-size: 0.875rem;
+  color: var(--text-color);
+  opacity: 0.65;
+  font-style: italic;
+  padding: 0.5rem 0;
+}
+
+.k-empty-state-block {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 2rem 1rem;
+  text-align: center;
+  color: var(--text-color);
+  opacity: 0.75;
+}
+
+.k-empty-state-icon {
+  font-size: 2rem;
+  opacity: 0.5;
+}
+
+.k-empty-state-block .k-empty-state-body {
+  font-size: 0.9375rem;
+}
+
+.k-empty-state-action {
+  margin-top: 0.25rem;
+}

package/dist/components/feedback/loadingOverlay/index.d.ts

@@ -0,0 +1,12 @@
+import "./styles.css";
+export interface LoadingProps {
+    /** Whether or not the loading overlay should be shown */
+    show: boolean;
+    /** Message to display below the loading image */
+    message: string;
+    /** If true, overlay covers entire viewport. If false, stays within parent element (parent must have position: relative) */
+    fullPage?: boolean;
+}
+declare const LoadingOverlay: (props: LoadingProps) => import("react").JSX.Element;
+export default LoadingOverlay;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/loadingOverlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/loadingOverlay/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,YAAY;IAC3B,yDAAyD;IACzD,IAAI,EAAE,OAAO,CAAC;IACd,iDAAiD;IACjD,OAAO,EAAE,MAAM,CAAC;IAChB,2HAA2H;IAC3H,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,cAAc,GAAI,OAAO,YAAY,gCA+B1C,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/feedback/loadingOverlay/index.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import Spinner from "../spinner/index.js";
+import "./styles.css";
+const LoadingOverlay = (props) => {
+    const { fullPage = true } = props;
+    const [showLoader, setShowLoader] = useState(false);
+    const loadStartTime = useRef(null);
+    useEffect(() => {
+        if (props.show) {
+            loadStartTime.current = Date.now();
+            setShowLoader(true);
+        }
+        else if (loadStartTime.current) {
+            const loadTime = Date.now() - loadStartTime.current;
+            if (loadTime >= 1000)
+                setShowLoader(false);
+            else {
+                const timeout = setTimeout(() => {
+                    setShowLoader(false);
+                }, 1000 - loadTime);
+                return () => clearTimeout(timeout);
+            }
+        }
+    }, [props.show]);
+    return (_jsx("div", { className: `k-loading-container ${fullPage ? "k-loading-container-fixed" : "k-loading-container-absolute"} ${showLoader ? "k-loading-visible" : "k-loading-hidden"}`, children: _jsxs("div", { className: "k-loading-content", children: [_jsx(Spinner, { size: "lg" }), _jsx("p", { className: "k-loading-message", children: props.message })] }) }));
+};
+export default LoadingOverlay;
+//# sourceMappingURL=index.js.map

package/dist/components/feedback/loadingOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/loadingOverlay/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,OAAO,MAAM,qBAAqB,CAAC;AAC1C,OAAO,cAAc,CAAC;AAWtB,MAAM,cAAc,GAAG,CAAC,KAAmB,EAAE,EAAE;IAC7C,MAAM,EAAE,QAAQ,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAClC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACpD,MAAM,aAAa,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC;YACf,aAAa,CAAC,OAAO,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;YACnC,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;aAAM,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;YACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,aAAa,CAAC,OAAO,CAAC;YACpD,IAAI,QAAQ,IAAI,IAAI;gBAAE,aAAa,CAAC,KAAK,CAAC,CAAC;iBACtC,CAAC;gBACJ,MAAM,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;oBAC9B,aAAa,CAAC,KAAK,CAAC,CAAC;gBACvB,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;gBACpB,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YACrC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC;IAEjB,OAAO,CACL,cACE,SAAS,EAAE,uBAAuB,QAAQ,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,8BAA8B,IAAI,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,kBAAkB,EAAE,YAEpK,eAAK,SAAS,EAAC,mBAAmB,aAChC,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,GAAG,EACrB,YAAG,SAAS,EAAC,mBAAmB,YAAE,KAAK,CAAC,OAAO,GAAK,IAChD,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/dist/components/feedback/loadingOverlay/styles.css

@@ -0,0 +1,48 @@
+.k-loading-container {
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 300;
+  background-color: var(--background-color);
+}
+
+.k-loading-container-fixed {
+  position: fixed;
+}
+
+.k-loading-container-absolute {
+  position: absolute;
+}
+
+.k-loading-visible {
+  visibility: visible;
+  opacity: 1;
+}
+
+.k-loading-hidden {
+  visibility: hidden;
+  opacity: 0;
+  transition:
+    visibility 0s 0.25s,
+    opacity 0.25s linear;
+}
+
+.k-loading-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}
+
+.k-loading-message {
+  font-size: 2rem;
+  text-align: center;
+}
+
+.k-loading-logo {
+  max-width: 30rem;
+  min-width: 10rem;
+  width: 50%;
+}

package/dist/components/feedback/progressBar/index.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithVariant } from "../../types.js";
+import "./styles.css";
+export interface ProgressBarProps extends PropsWithVariant {
+    /** The current progress value, a number between 0 and 100 */
+    progress: number;
+    /** **_Optional_** prop for whether to show the percent value on the bar */
+    showPercentage?: boolean;
+}
+declare const ProgressBar: (props: ProgressBarProps) => import("react").JSX.Element;
+export default ProgressBar;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/progressBar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/progressBar/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAiB,SAAQ,gBAAgB;IACxD,6DAA6D;IAC7D,QAAQ,EAAE,MAAM,CAAC;IACjB,2EAA2E;IAC3E,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,QAAA,MAAM,WAAW,GAAI,OAAO,gBAAgB,gCAmB3C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/feedback/progressBar/index.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const ProgressBar = (props) => {
+    const { showPercentage = true, variant = "primary" } = props;
+    const clampedProgress = Math.max(0, Math.min(100, props.progress));
+    const fillBorderRadius = clampedProgress === 100 ? "0.25rem" : "0.25rem 0 0 0.25rem";
+    return (_jsx("div", { className: `k-progress-bar-container`, children: _jsx("div", { className: `k-progress-bar-fill k-progress-bar-fill-${variant}`, style: { width: `${clampedProgress}%`, borderRadius: fillBorderRadius }, children: showPercentage && clampedProgress > 0 && (_jsxs("span", { className: "k-progress-bar-text", children: [clampedProgress, "%"] })) }) }));
+};
+export default ProgressBar;
+//# sourceMappingURL=index.js.map

package/dist/components/feedback/progressBar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/progressBar/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAStB,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;IAC9C,MAAM,EAAE,cAAc,GAAG,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IAC7D,MAAM,eAAe,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEnE,MAAM,gBAAgB,GACpB,eAAe,KAAK,GAAG,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC;IAE9D,OAAO,CACL,cAAK,SAAS,EAAE,0BAA0B,YACxC,cACE,SAAS,EAAE,2CAA2C,OAAO,EAAE,EAC/D,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,eAAe,GAAG,EAAE,YAAY,EAAE,gBAAgB,EAAE,YAEtE,cAAc,IAAI,eAAe,GAAG,CAAC,IAAI,CACxC,gBAAM,SAAS,EAAC,qBAAqB,aAAE,eAAe,SAAS,CAChE,GACG,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/feedback/progressBar/styles.css

@@ -0,0 +1,42 @@
+.k-progress-bar-container {
+  width: 100%;
+  height: 1.5625rem;
+  background-color: var(--background-color-dark);
+  border-radius: 0.25rem;
+  overflow: hidden;
+  box-shadow: inset 0 0.0625rem 0.1875rem var(--shadow-color);
+}
+
+.k-progress-bar-fill {
+  height: 100%;
+  background-color: var(--success-color);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-color-light);
+  font-weight: 600;
+  transition: width 0.5s ease-in-out;
+}
+
+.k-progress-bar-text {
+  font-size: var(--text-size-sm);
+}
+
+.k-progress-bar-fill-primary {
+  background-color: var(--primary-color);
+}
+.k-progress-bar-fill-secondary {
+  background-color: var(--secondary-color);
+}
+.k-progress-bar-fill-light {
+  background-color: var(--light-color);
+}
+.k-progress-bar-fill-warning {
+  background-color: var(--warning-color);
+}
+.k-progress-bar-fill-danger {
+  background-color: var(--danger-color);
+}
+.k-progress-bar-fill-success {
+  background-color: var(--success-color);
+}

package/dist/components/feedback/spinner/index.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import "./styles.css";
+export interface SpinnerProps extends PropsWithSize, PropsWithVariant {
+}
+declare const Spinner: (props: SpinnerProps) => import("react").JSX.Element;
+export default Spinner;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/spinner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/spinner/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,gBAAgB;CAAG;AAExE,QAAA,MAAM,OAAO,GAAI,OAAO,YAAY,gCAanC,CAAC;AAEF,eAAe,OAAO,CAAC"}

package/dist/components/feedback/spinner/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const Spinner = (props) => {
+    const { size = "md", variant = "primary" } = props;
+    return (_jsx("div", { className: `k-spinner k-spinner-${size} k-spinner-${variant}`, role: "status", "aria-live": "polite", "aria-label": "Loading...", children: _jsx("span", { className: "k-sr-only", children: "Loading..." }) }));
+};
+export default Spinner;
+//# sourceMappingURL=index.js.map

package/dist/components/feedback/spinner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/spinner/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAItB,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EAAE,IAAI,GAAG,IAAI,EAAE,OAAO,GAAG,SAAS,EAAE,GAAG,KAAK,CAAC;IACnD,OAAO,CACL,cACE,SAAS,EAAE,uBAAuB,IAAI,cAAc,OAAO,EAAE,EAC7D,IAAI,EAAC,QAAQ,eACH,QAAQ,gBACP,YAAY,YAGvB,eAAM,SAAS,EAAC,WAAW,2BAAkB,GACzC,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}