@kosmeo-ui/react 0.1.0

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

@@ -0,0 +1,64 @@
+.k-spinner {
+  border-radius: 50%;
+  display: inline-block;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.k-spinner-lg {
+  height: 3.75rem;
+  width: 3.75rem;
+  border: 0.375rem solid var(--shadow-color);
+}
+
+.k-spinner-md {
+  height: 2.5rem;
+  width: 2.5rem;
+  border: 0.25rem solid var(--shadow-color);
+}
+
+.k-spinner-sm {
+  height: 1.25rem;
+  width: 1.25rem;
+  border: 0.125rem solid var(--shadow-color);
+}
+
+.k-spinner-primary {
+  border-left-color: var(--primary-color);
+}
+.k-spinner-secondary {
+  border-left-color: var(--secondary-color);
+}
+.k-spinner-light {
+  border-left-color: var(--light-color);
+}
+.k-spinner-success {
+  border-left-color: var(--success-color);
+}
+.k-spinner-danger {
+  border-left-color: var(--danger-color);
+}
+.k-spinner-warning {
+  border-left-color: var(--warning-color);
+}
+
+/* Visually hidden class for accessibility text */
+.k-sr-only {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  padding: 0;
+  margin: -0.0625rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

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

@@ -0,0 +1,32 @@
+import "./styles.css";
+import { FloatingSide } from "../../../hooks/useFloatingPosition.js";
+type TooltipSide = Exclude<FloatingSide, "below">;
+export interface TooltipProps {
+    /** The element(s) that the Tooltip will appear around */
+    children: React.ReactElement<React.HTMLAttributes<HTMLElement> & {
+        ref?: React.Ref<HTMLElement>;
+    }>;
+    /** The content to appear inside the Tooltip */
+    content: React.ReactNode;
+    /**
+     * **_Optional_** position of the Tooltip relative to the children.
+     *
+     * Defaults to `top`.
+     */
+    position?: TooltipSide;
+    /**
+     * **_Optional_** whether the tooltip container should take full width.
+     *
+     * Defaults to `false`.
+     */
+    fullWidth?: boolean;
+    /**
+     * **_Optional_** whether the tooltip is disabled.
+     *
+     * Defaults to `false`.
+     */
+    disabled?: boolean;
+}
+declare const Tooltip: (props: TooltipProps) => import("react").JSX.Element;
+export default Tooltip;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/tooltip/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AACtB,OAA4B,EAC1B,YAAY,EACb,MAAM,uCAAuC,CAAC;AAE/C,KAAK,WAAW,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,yDAAyD;IACzD,QAAQ,EAAE,KAAK,CAAC,YAAY,CAC1B,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,GAAG;QAAE,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;KAAE,CACrE,CAAC;IACF,+CAA+C;IAC/C,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,WAAW,CAAC;IACvB;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,OAAO,GAAI,OAAO,YAAY,gCA4DnC,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import Portal from "../../overlays/portal/index.js";
+import "./styles.css";
+import useFloatingPosition from "../../../hooks/useFloatingPosition.js";
+const Tooltip = (props) => {
+    const { position = "top", fullWidth = false, disabled = false } = props;
+    const [isVisible, setIsVisible] = useState(false);
+    const tooltipRef = useRef(null);
+    const { anchorRef, position: tooltipPos } = useFloatingPosition({
+        isOpen: isVisible,
+        side: position,
+        floatingRef: tooltipRef,
+        offset: 13,
+        clampViewport: true,
+    });
+    useEffect(() => {
+        if (!isVisible)
+            return;
+        const handleScroll = () => setIsVisible(false);
+        window.addEventListener("scroll", handleScroll, true);
+        return () => {
+            window.removeEventListener("scroll", handleScroll, true);
+        };
+    }, [isVisible]);
+    const handleMouseEnter = () => !disabled && setIsVisible(true);
+    const handleMouseLeave = () => setIsVisible(false);
+    const handleFocus = () => !disabled && setIsVisible(true);
+    const handleBlur = () => setIsVisible(false);
+    return (_jsxs(_Fragment, { children: [_jsx("div", { ref: anchorRef, className: `k-tooltip-container ${fullWidth ? "k-tooltip-container-full-width" : ""}`, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onFocus: handleFocus, onBlur: handleBlur, children: props.children }), isVisible && (_jsx(Portal, { children: _jsx("div", { ref: tooltipRef, className: `k-tooltip-wrapper k-tooltip-${position} k-tooltip-wrapper-${tooltipPos ? "visible" : "hidden"}`, style: {
+                        top: `${tooltipPos?.top ?? 0}px`,
+                        left: `${tooltipPos?.left ?? 0}px`,
+                    }, children: _jsx("div", { className: "k-tooltip-content", children: props.content }) }) }))] }));
+};
+export default Tooltip;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/feedback/tooltip/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,gCAAgC,CAAC;AACpD,OAAO,cAAc,CAAC;AACtB,OAAO,mBAEN,MAAM,uCAAuC,CAAC;AA+B/C,MAAM,OAAO,GAAG,CAAC,KAAmB,EAAE,EAAE;IACtC,MAAM,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,GAAG,KAAK,EAAE,GAAG,KAAK,CAAC;IAExE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClD,MAAM,UAAU,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEhD,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,mBAAmB,CAAC;QAC9D,MAAM,EAAE,SAAS;QACjB,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,UAAU;QACvB,MAAM,EAAE,EAAE;QACV,aAAa,EAAE,IAAI;KACpB,CAAC,CAAC;IAEH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS;YAAE,OAAO;QACvB,MAAM,YAAY,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;QAC/C,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;QACtD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,EAAE,IAAI,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;IAC/D,MAAM,gBAAgB,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnD,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,CAAC,QAAQ,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC;IAC1D,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAE7C,OAAO,CACL,8BACE,cACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,uBACT,SAAS,CAAC,CAAC,CAAC,gCAAgC,CAAC,CAAC,CAAC,EACjD,EAAE,EACF,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,EAC9B,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,YAEjB,KAAK,CAAC,QAAQ,GACX,EACL,SAAS,IAAI,CACZ,KAAC,MAAM,cACL,cACE,GAAG,EAAE,UAAU,EACf,SAAS,EAAE,+BAA+B,QAAQ,sBAChD,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAC3B,EAAE,EACF,KAAK,EAAE;wBACL,GAAG,EAAE,GAAG,UAAU,EAAE,GAAG,IAAI,CAAC,IAAI;wBAChC,IAAI,EAAE,GAAG,UAAU,EAAE,IAAI,IAAI,CAAC,IAAI;qBACnC,YAED,cAAK,SAAS,EAAC,mBAAmB,YAAE,KAAK,CAAC,OAAO,GAAO,GACpD,GACC,CACV,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}

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

@@ -0,0 +1,84 @@
+.k-tooltip-container {
+  position: relative;
+  display: inline-block;
+}
+
+.k-tooltip-container-full-width {
+  width: 100%;
+}
+
+.k-tooltip-container-full-width .k-button {
+  width: 100%;
+}
+
+.k-tooltip-wrapper {
+  position: fixed;
+  pointer-events: none;
+  z-index: 9999;
+  transition:
+    opacity 0.2s ease-in-out,
+    visibility 0.2s ease-in-out;
+  overflow: visible;
+}
+
+.k-tooltip-wrapper-hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.k-tooltip-wrapper-visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+.k-tooltip-content {
+  position: relative;
+  background-color: var(--text-color);
+  color: var(--text-color-light);
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.25rem;
+  font-size: var(--text-size-sm);
+  white-space: normal;
+  max-width: 12.5rem;
+  text-align: center;
+  box-sizing: border-box;
+}
+
+.k-tooltip-content::after {
+  content: "";
+  position: absolute;
+  border-width: 0.3125rem;
+  border-style: solid;
+  display: block;
+  width: 0;
+  height: 0;
+  box-sizing: border-box;
+}
+
+.k-tooltip-top .k-tooltip-content::after {
+  bottom: -0.625rem; /* Double the border-width to ensure visibility */
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: var(--text-color) transparent transparent transparent;
+}
+
+.k-tooltip-bottom .k-tooltip-content::after {
+  top: -0.625rem; /* Double the border-width to ensure visibility */
+  left: 50%;
+  transform: translateX(-50%);
+  border-color: transparent transparent var(--text-color) transparent;
+}
+
+.k-tooltip-left .k-tooltip-content::after {
+  right: -0.625rem; /* Double the border-width to ensure visibility */
+  top: 50%;
+  transform: translateY(-50%);
+  border-color: transparent transparent transparent var(--text-color);
+}
+
+.k-tooltip-right .k-tooltip-content::after {
+  left: -0.625rem; /* Double the border-width to ensure visibility */
+  top: 50%;
+  transform: translateY(-50%);
+  border-color: transparent var(--text-color) transparent transparent;
+}

package/dist/components/forms/detailField/index.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export interface DetailFieldProps {
+    label: ReactNode;
+    value: ReactNode;
+    /** Optional inline action (edit, copy). */
+    action?: ReactNode;
+}
+declare const DetailField: ({ label, value, action }: DetailFieldProps) => import("react").JSX.Element;
+export default DetailField;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/detailField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/detailField/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,SAAS,CAAC;IACjB,2CAA2C;IAC3C,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB;AAED,QAAA,MAAM,WAAW,GAAI,0BAA0B,gBAAgB,gCAU9D,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/forms/detailField/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import "./styles.css";
+const DetailField = ({ label, value, action }) => {
+    return (_jsxs("div", { className: "k-detail-field", children: [_jsx("div", { className: "k-detail-field-label", children: label }), _jsxs("div", { className: "k-detail-field-value", children: [_jsx("span", { children: value }), action && _jsx("span", { className: "k-detail-field-action", children: action })] })] }));
+};
+export default DetailField;
+//# sourceMappingURL=index.js.map

package/dist/components/forms/detailField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/detailField/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAStB,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAoB,EAAE,EAAE;IACjE,OAAO,CACL,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cAAK,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAO,EACnD,eAAK,SAAS,EAAC,sBAAsB,aACnC,yBAAO,KAAK,GAAQ,EACnB,MAAM,IAAI,eAAM,SAAS,EAAC,uBAAuB,YAAE,MAAM,GAAQ,IAC9D,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/forms/detailField/styles.css

@@ -0,0 +1,27 @@
+.k-detail-field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  min-width: 0;
+}
+
+.k-detail-field-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-color-secondary);
+}
+
+.k-detail-field-value {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.9375rem;
+  word-break: break-word;
+}
+
+.k-detail-field-action {
+  display: inline-flex;
+  align-items: center;
+}

package/dist/components/forms/fieldShell/index.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import "./styles.css";
+interface FieldShellProps {
+    /** Field label rendered above the input. */
+    label?: ReactNode;
+    /** Whether the field is required — shows asterisk next to a string label. */
+    required?: boolean;
+    /** `htmlFor` target id, used when label is a string. */
+    htmlFor?: string;
+    /** Optional right-aligned annotation in the label row (e.g. char count). */
+    labelAside?: ReactNode;
+    /** Optional error message rendered below the input. */
+    error?: ReactNode;
+    /** Optional helper text rendered below the input (hidden when `error` is set). */
+    helperText?: ReactNode;
+    /** The input element itself. */
+    children: ReactNode;
+    /** Internal-only: additional class for sibling ui-component shells to apply field-type modifiers. */
+    className?: string;
+}
+/** Shared shell for form fields — label + asterisk + optional char count + error/helper. */
+declare const FieldShell: ({ label, required, htmlFor, labelAside, error, helperText, children, className, }: FieldShellProps) => import("react").JSX.Element;
+export default FieldShell;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/fieldShell/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/fieldShell/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,UAAU,eAAe;IACvB,4CAA4C;IAC5C,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,wDAAwD;IACxD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4EAA4E;IAC5E,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,uDAAuD;IACvD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kFAAkF;IAClF,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,qGAAqG;IACrG,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,4FAA4F;AAC5F,QAAA,MAAM,UAAU,GAAI,mFASjB,eAAe,gCA4BjB,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/forms/fieldShell/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import MandatoryAsterisk from "../requiredAsterisk/index.js";
+import "./styles.css";
+/** Shared shell for form fields — label + asterisk + optional char count + error/helper. */
+const FieldShell = ({ label, required, htmlFor, labelAside, error, helperText, children, className = "", }) => (_jsxs("div", { className: `k-field-shell ${className}`.trim(), children: [(label || labelAside) && (_jsxs("div", { className: "k-field-shell-label-row", children: [label && (_jsx("label", { htmlFor: htmlFor, className: "k-field-shell-label", children: typeof label === "string" ? (_jsxs(_Fragment, { children: [label, required && _jsx(MandatoryAsterisk, {})] })) : (label) })), labelAside && (_jsx("span", { className: "k-field-shell-aside", children: labelAside }))] })), children, error ? (_jsx("div", { className: "k-field-shell-error", children: error })) : helperText ? (_jsx("div", { className: "k-field-shell-helper", children: helperText })) : null] }));
+export default FieldShell;
+//# sourceMappingURL=index.js.map

package/dist/components/forms/fieldShell/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/fieldShell/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,iBAAiB,MAAM,8BAA8B,CAAC;AAE7D,OAAO,cAAc,CAAC;AAqBtB,4FAA4F;AAC5F,MAAM,UAAU,GAAG,CAAC,EAClB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,UAAU,EACV,KAAK,EACL,UAAU,EACV,QAAQ,EACR,SAAS,GAAG,EAAE,GACE,EAAE,EAAE,CAAC,CACrB,eAAK,SAAS,EAAE,iBAAiB,SAAS,EAAE,CAAC,IAAI,EAAE,aAChD,CAAC,KAAK,IAAI,UAAU,CAAC,IAAI,CACxB,eAAK,SAAS,EAAC,yBAAyB,aACrC,KAAK,IAAI,CACR,gBAAO,OAAO,EAAE,OAAO,EAAE,SAAS,EAAC,qBAAqB,YACrD,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,CAC3B,8BACG,KAAK,EACL,QAAQ,IAAI,KAAC,iBAAiB,KAAG,IACjC,CACJ,CAAC,CAAC,CAAC,CACF,KAAK,CACN,GACK,CACT,EACA,UAAU,IAAI,CACb,eAAM,SAAS,EAAC,qBAAqB,YAAE,UAAU,GAAQ,CAC1D,IACG,CACP,EACA,QAAQ,EACR,KAAK,CAAC,CAAC,CAAC,CACP,cAAK,SAAS,EAAC,qBAAqB,YAAE,KAAK,GAAO,CACnD,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CACf,cAAK,SAAS,EAAC,sBAAsB,YAAE,UAAU,GAAO,CACzD,CAAC,CAAC,CAAC,IAAI,IACJ,CACP,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/forms/fieldShell/styles.css

@@ -0,0 +1,38 @@
+.k-field-shell {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.k-field-shell-label-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 0.1rem;
+}
+
+.k-field-shell-label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-color);
+}
+
+.k-field-shell-aside {
+  font-weight: 500;
+  font-size: var(--text-size-sm);
+  color: var(--text-color-secondary);
+  margin-left: 0.5rem;
+}
+
+.k-field-shell-error {
+  margin-top: 0.25rem;
+  font-size: 0.8125rem;
+  color: var(--danger-color);
+}
+
+.k-field-shell-helper {
+  margin-top: 0.25rem;
+  font-size: 0.8125rem;
+  color: var(--text-color-secondary);
+}

package/dist/components/forms/form/index.d.ts

@@ -0,0 +1,11 @@
+import { FormEvent, ReactNode } from "react";
+import "./styles.css";
+interface FormProps {
+    children: ReactNode;
+    onSubmit: (e: FormEvent<HTMLFormElement>) => void;
+    id?: string;
+    noValidate?: boolean;
+}
+declare const Form: (props: FormProps) => import("react").JSX.Element;
+export default Form;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/form/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/form/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAY,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,cAAc,CAAC;AAEtB,UAAU,SAAS;IACjB,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,eAAe,CAAC,KAAK,IAAI,CAAC;IAClD,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,QAAA,MAAM,IAAI,GAAI,OAAO,SAAS,gCAiE7B,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/forms/form/index.js

@@ -0,0 +1,56 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { toast } from "react-toastify";
+import "./styles.css";
+const Form = (props) => {
+    const { children, onSubmit, id, noValidate = true } = props;
+    const [hasValidated, setHasValidated] = useState(false);
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const formElement = e.currentTarget;
+        const allInputs = Array.from(formElement.querySelectorAll("input, textarea, select"));
+        let isFormValid = true;
+        for (const input of allInputs) {
+            const inputElement = input;
+            const isRequired = inputElement.hasAttribute("required");
+            if (isRequired) {
+                const isValid = validateInput(inputElement);
+                if (!isValid)
+                    isFormValid = false;
+            }
+            else {
+                inputElement.classList.add("k-input-valid");
+                inputElement.classList.remove("k-input-invalid");
+            }
+        }
+        setHasValidated(true);
+        if (isFormValid)
+            onSubmit(e);
+        else
+            toast.error("Please fill in all required fields.");
+    };
+    const validateInput = (input) => {
+        const inputElement = input;
+        let isEmpty = false;
+        if (inputElement.type === "checkbox") {
+            isEmpty = !inputElement.checked;
+        }
+        else {
+            isEmpty = !inputElement.value || inputElement.value.trim() === "";
+        }
+        if (isEmpty) {
+            inputElement.classList.add("k-input-invalid");
+            inputElement.classList.remove("k-input-valid");
+            return false;
+        }
+        else {
+            inputElement.classList.add("k-input-valid");
+            inputElement.classList.remove("k-input-invalid");
+        }
+        return true;
+    };
+    return (_jsx("form", { id: id, className: `k-form ${hasValidated ? "k-form-validating" : ""}`, onSubmit: handleSubmit, noValidate: noValidate, children: children }));
+};
+export default Form;
+//# sourceMappingURL=index.js.map

package/dist/components/forms/form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/form/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,QAAQ,EAAwB,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,cAAc,CAAC;AAStB,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IAChC,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAC5D,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExD,MAAM,YAAY,GAAG,CAAC,CAA6B,EAAE,EAAE;QACrD,CAAC,CAAC,cAAc,EAAE,CAAC;QAEnB,MAAM,WAAW,GAAG,CAAC,CAAC,aAAa,CAAC;QACpC,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAC1B,WAAW,CAAC,gBAAgB,CAAC,yBAAyB,CAAC,CACxD,CAAC;QAEF,IAAI,WAAW,GAAG,IAAI,CAAC;QAEvB,KAAK,MAAM,KAAK,IAAI,SAAS,EAAE,CAAC;YAC9B,MAAM,YAAY,GAAG,KACuC,CAAC;YAC7D,MAAM,UAAU,GAAG,YAAY,CAAC,YAAY,CAAC,UAAU,CAAC,CAAC;YAEzD,IAAI,UAAU,EAAE,CAAC;gBACf,MAAM,OAAO,GAAG,aAAa,CAAC,YAAY,CAAC,CAAC;gBAC5C,IAAI,CAAC,OAAO;oBAAE,WAAW,GAAG,KAAK,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;gBAC5C,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;YACnD,CAAC;QACH,CAAC;QAED,eAAe,CAAC,IAAI,CAAC,CAAC;QACtB,IAAI,WAAW;YAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;;YACxB,KAAK,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC;IAC1D,CAAC,CAAC;IAEF,MAAM,aAAa,GAAG,CAAC,KAAc,EAAE,EAAE;QACvC,MAAM,YAAY,GAAG,KACuC,CAAC;QAE7D,IAAI,OAAO,GAAG,KAAK,CAAC;QACpB,IAAI,YAAY,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YACrC,OAAO,GAAG,CAAE,YAAiC,CAAC,OAAO,CAAC;QACxD,CAAC;aAAM,CAAC;YACN,OAAO,GAAG,CAAC,YAAY,CAAC,KAAK,IAAI,YAAY,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC;QACpE,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;YAC9C,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC;YAC/C,OAAO,KAAK,CAAC;QACf,CAAC;aAAM,CAAC;YACN,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;YAC5C,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QACnD,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC,CAAC;IAEF,OAAO,CACL,eACE,EAAE,EAAE,EAAE,EACN,SAAS,EAAE,UAAU,YAAY,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,EAAE,EAC9D,QAAQ,EAAE,YAAY,EACtB,UAAU,EAAE,UAAU,YAErB,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/forms/form/styles.css

@@ -0,0 +1,27 @@
+.k-form {
+  width: 100%;
+}
+
+.k-form-validating .k-input,
+.k-form-validating .k-textarea,
+.k-form-validating .k-multiselect {
+  transition: border-color 0.3s ease-in-out;
+}
+
+.k-form-validating .k-input-invalid {
+  border-color: var(--danger-color);
+}
+
+.k-form-validating .k-input-invalid:focus {
+  border-color: var(--danger-color);
+  box-shadow: 0 0 0 0.1875rem var(--shadow-color-hover);
+}
+
+.k-form-validating .k-input-valid {
+  border-color: var(--success-color);
+}
+
+.k-form-validating .k-input-valid:focus {
+  border-color: var(--success-color);
+  box-shadow: 0 0 0 0.1875rem var(--shadow-color-hover);
+}

package/dist/components/forms/formActions/formError.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+export interface FormErrorProps {
+    children: ReactNode;
+}
+declare const FormError: ({ children }: FormErrorProps) => import("react").JSX.Element;
+export default FormError;
+//# sourceMappingURL=formError.d.ts.map

package/dist/components/forms/formActions/formError.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formError.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/formActions/formError.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,SAAS,GAAI,cAAc,cAAc,gCAM9C,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/forms/formActions/formError.js

@@ -0,0 +1,7 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FormError = ({ children }) => {
+    return (_jsx("div", { role: "alert", className: "k-form-error", children: children }));
+};
+export default FormError;
+//# sourceMappingURL=formError.js.map

package/dist/components/forms/formActions/formError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formError.js","sourceRoot":"","sources":["../../../../src/components/forms/formActions/formError.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAQb,MAAM,SAAS,GAAG,CAAC,EAAE,QAAQ,EAAkB,EAAE,EAAE;IACjD,OAAO,CACL,cAAK,IAAI,EAAC,OAAO,EAAC,SAAS,EAAC,cAAc,YACvC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/components/forms/formActions/index.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export interface FormActionsProps {
+    children: ReactNode;
+    /** Defaults to "right". "between" for split (cancel left, submit right).
+     * "fill" makes the buttons split the row evenly (equal width side-by-side),
+     * e.g. a Deny/Allow pair. */
+    align?: "right" | "between" | "center" | "left" | "fill";
+    /** Margin-top size. Defaults to "md". */
+    spacing?: "sm" | "md" | "lg" | "none";
+}
+declare const FormActions: ({ children, align, spacing, }: FormActionsProps) => import("react").JSX.Element;
+export default FormActions;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/formActions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/formActions/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB;;iCAE6B;IAC7B,KAAK,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;IACzD,yCAAyC;IACzC,OAAO,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,MAAM,CAAC;CACvC;AAED,QAAA,MAAM,WAAW,GAAI,+BAIlB,gBAAgB,gCAQlB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/forms/formActions/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const FormActions = ({ children, align = "right", spacing = "md", }) => {
+    return (_jsx("div", { className: `k-form-actions k-form-actions-${align} k-form-actions-spacing-${spacing}`, children: children }));
+};
+export default FormActions;
+//# sourceMappingURL=index.js.map

package/dist/components/forms/formActions/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/formActions/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAYtB,MAAM,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,KAAK,GAAG,OAAO,EACf,OAAO,GAAG,IAAI,GACG,EAAE,EAAE;IACrB,OAAO,CACL,cACE,SAAS,EAAE,iCAAiC,KAAK,2BAA2B,OAAO,EAAE,YAEpF,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/components/forms/formActions/styles.css

@@ -0,0 +1,50 @@
+.k-form-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.k-form-actions-right {
+  justify-content: flex-end;
+}
+.k-form-actions-left {
+  justify-content: flex-start;
+}
+.k-form-actions-center {
+  justify-content: center;
+}
+.k-form-actions-between {
+  justify-content: space-between;
+}
+/* Each direct child grows to an equal share of the row (basis 0), so a
+   Deny/Allow pair renders as two equal-width buttons side by side. */
+.k-form-actions-fill > * {
+  flex: 1 1 0;
+}
+
+.k-form-actions-spacing-none {
+  margin-top: 0;
+}
+.k-form-actions-spacing-sm {
+  margin-top: 0.5rem;
+}
+.k-form-actions-spacing-md {
+  margin-top: 1rem;
+}
+.k-form-actions-spacing-lg {
+  margin-top: 1.5rem;
+}
+
+.k-form-error {
+  background-color: color-mix(
+    in srgb,
+    var(--danger-color) 12%,
+    var(--background-color)
+  );
+  color: var(--danger-color);
+  border: 0.0625rem solid var(--danger-color);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+}

package/dist/components/forms/formGrid/index.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+import "./styles.css";
+export interface FormGridProps {
+    columns?: 1 | 2 | 3 | 4;
+    gap?: "sm" | "md" | "lg";
+    children: ReactNode;
+}
+declare const FormGrid: ({ columns, gap, children }: FormGridProps) => import("react").JSX.Element;
+export default FormGrid;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/forms/formGrid/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/formGrid/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,aAAa;IAC5B,OAAO,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxB,GAAG,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACzB,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,QAAA,MAAM,QAAQ,GAAI,4BAAuC,aAAa,gCAQrE,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/forms/formGrid/index.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import "./styles.css";
+const FormGrid = ({ columns = 2, gap = "md", children }) => {
+    return (_jsx("div", { className: `k-form-grid k-form-grid-${columns}col k-form-grid-gap-${gap}`, children: children }));
+};
+export default FormGrid;
+//# sourceMappingURL=index.js.map

package/dist/components/forms/formGrid/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/forms/formGrid/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,cAAc,CAAC;AAQtB,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,GAAG,CAAC,EAAE,GAAG,GAAG,IAAI,EAAE,QAAQ,EAAiB,EAAE,EAAE;IACxE,OAAO,CACL,cACE,SAAS,EAAE,2BAA2B,OAAO,uBAAuB,GAAG,EAAE,YAExE,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}