@kosmeo-ui/react 0.1.0

package/dist/components/inputs/dateInput/index.d.ts

@@ -0,0 +1,31 @@
+import "./styles.css";
+export interface DateInputBaseProps {
+    label?: string;
+    required?: boolean;
+    error?: string;
+    helperText?: string;
+    disabled?: boolean;
+    min?: string;
+    max?: string;
+    id?: string;
+    name?: string;
+}
+export interface DateInputProps extends DateInputBaseProps {
+    /** Accepts an ISO string or `Date`. Empty string and null both mean "no value". */
+    value: string | Date | null;
+    /** Fires with an ISO date-time string (start-of-day) or `null` when cleared. */
+    onChange: (iso: string | null) => void;
+}
+export interface DateTimeInputProps extends DateInputBaseProps {
+    value: string | Date | null;
+    onChange: (iso: string | null) => void;
+}
+export interface TimeInputProps extends DateInputBaseProps {
+    /** `HH:mm` (24-hour). */
+    value: string | null;
+    onChange: (time: string | null) => void;
+}
+export declare const DateInput: ({ value, onChange, label, required, error, helperText, disabled, min, max, id, name, }: DateInputProps) => import("react").JSX.Element;
+export declare const DateTimeInput: ({ value, onChange, label, required, error, helperText, disabled, min, max, id, name, }: DateTimeInputProps) => import("react").JSX.Element;
+export declare const TimeInput: ({ value, onChange, label, required, error, helperText, disabled, min, max, id, name, }: TimeInputProps) => import("react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/dateInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dateInput/index.tsx"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AAQtB,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,mFAAmF;IACnF,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,gFAAgF;IAChF,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,kBAAmB,SAAQ,kBAAkB;IAC5D,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAED,MAAM,WAAW,cAAe,SAAQ,kBAAkB;IACxD,yBAAyB;IACzB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,SAAS,GAAI,wFAYvB,cAAc,gCAyBhB,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,wFAY3B,kBAAkB,gCAyBpB,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,wFAYvB,cAAc,gCAyBhB,CAAC"}

package/dist/components/inputs/dateInput/index.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import FieldShell from "../../forms/fieldShell/index.js";
+import "./styles.css";
+import { dateInputToIso, dateTimeLocalToIso, toDateInputValue, toDateTimeLocalValue, } from "./utils.js";
+export const DateInput = ({ value, onChange, label, required, error, helperText, disabled, min, max, id, name, }) => {
+    const handle = (e) => onChange(dateInputToIso(e.target.value));
+    return (_jsx(FieldShell, { label: label, required: required, error: error, helperText: helperText, htmlFor: id, children: _jsx("input", { id: id, name: name, type: "date", value: toDateInputValue(value), onChange: handle, disabled: disabled, min: min, max: max, required: required, className: "k-date-input-field" }) }));
+};
+export const DateTimeInput = ({ value, onChange, label, required, error, helperText, disabled, min, max, id, name, }) => {
+    const handle = (e) => onChange(dateTimeLocalToIso(e.target.value));
+    return (_jsx(FieldShell, { label: label, required: required, error: error, helperText: helperText, htmlFor: id, children: _jsx("input", { id: id, name: name, type: "datetime-local", value: toDateTimeLocalValue(value), onChange: handle, disabled: disabled, min: min, max: max, required: required, className: "k-date-input-field" }) }));
+};
+export const TimeInput = ({ value, onChange, label, required, error, helperText, disabled, min, max, id, name, }) => {
+    const handle = (e) => onChange(e.target.value || null);
+    return (_jsx(FieldShell, { label: label, required: required, error: error, helperText: helperText, htmlFor: id, children: _jsx("input", { id: id, name: name, type: "time", value: value ?? "", onChange: handle, disabled: disabled, min: min, max: max, required: required, className: "k-date-input-field" }) }));
+};
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/dateInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/dateInput/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/dateInput/styles.css

@@ -0,0 +1,22 @@
+.k-date-input-field {
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.625rem;
+  font-size: 0.9375rem;
+  background-color: var(--background-color);
+  color: var(--text-color);
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.k-date-input-field:focus {
+  outline: none;
+  border-color: var(--primary-color);
+  box-shadow: 0 0 0 0.125rem
+    color-mix(in srgb, var(--primary-color) 30%, transparent);
+}
+
+.k-date-input-field:disabled {
+  opacity: 0.65;
+  cursor: not-allowed;
+}

package/dist/components/inputs/dateInput/utils.d.ts

@@ -0,0 +1,5 @@
+export declare const toDateInputValue: (value: string | Date | null | undefined) => string;
+export declare const toDateTimeLocalValue: (value: string | Date | null | undefined) => string;
+export declare const dateInputToIso: (value: string) => string | null;
+export declare const dateTimeLocalToIso: (value: string) => string | null;
+//# sourceMappingURL=utils.d.ts.map

package/dist/components/inputs/dateInput/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dateInput/utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,gBAAgB,GAC3B,OAAO,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,KACtC,MAKF,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAC/B,OAAO,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,KACtC,MAOF,CAAC;AAEF,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,IAIvD,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,KAAG,MAAM,GAAG,IAI3D,CAAC"}

package/dist/components/inputs/dateInput/utils.js

@@ -0,0 +1,30 @@
+const pad = (n) => n.toString().padStart(2, "0");
+export const toDateInputValue = (value) => {
+    if (value == null || value === "")
+        return "";
+    const d = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return "";
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
+export const toDateTimeLocalValue = (value) => {
+    if (value == null || value === "")
+        return "";
+    const d = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return "";
+    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}T${pad(d.getHours())}:${pad(d.getMinutes())}`;
+};
+export const dateInputToIso = (value) => {
+    if (!value)
+        return null;
+    const d = new Date(`${value}T00:00:00`);
+    return Number.isNaN(d.getTime()) ? null : d.toISOString();
+};
+export const dateTimeLocalToIso = (value) => {
+    if (!value)
+        return null;
+    const d = new Date(value);
+    return Number.isNaN(d.getTime()) ? null : d.toISOString();
+};
+//# sourceMappingURL=utils.js.map

package/dist/components/inputs/dateInput/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../../src/components/inputs/dateInput/utils.ts"],"names":[],"mappings":"AAAA,MAAM,GAAG,GAAG,CAAC,CAAS,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;AAEzD,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAC9B,KAAuC,EAC/B,EAAE;IACV,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE;QAAE,OAAO,EAAE,CAAC;IAC7C,MAAM,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;QAAE,OAAO,EAAE,CAAC;IACzC,OAAO,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,EAAE,CAAC;AAC3E,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAClC,KAAuC,EAC/B,EAAE;IACV,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,KAAK,EAAE;QAAE,OAAO,EAAE,CAAC;IAC7C,MAAM,CAAC,GAAG,KAAK,YAAY,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1D,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC;QAAE,OAAO,EAAE,CAAC;IACzC,OAAO,GAAG,CAAC,CAAC,WAAW,EAAE,IAAI,GAAG,CAAC,CAAC,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,IAAI,GAAG,CAC3E,CAAC,CAAC,QAAQ,EAAE,CACb,IAAI,GAAG,CAAC,CAAC,CAAC,UAAU,EAAE,CAAC,EAAE,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,KAAa,EAAiB,EAAE;IAC7D,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,GAAG,KAAK,WAAW,CAAC,CAAC;IACxC,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC5D,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAiB,EAAE;IACjE,IAAI,CAAC,KAAK;QAAE,OAAO,IAAI,CAAC;IACxB,MAAM,CAAC,GAAG,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;IAC1B,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;AAC5D,CAAC,CAAC"}

package/dist/components/inputs/dropdown/index.d.ts

@@ -0,0 +1,18 @@
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import { ReactNode } from "react";
+import "./styles.css";
+import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
+export interface DropdownProps extends PropsWithSize, PropsWithVariant {
+    children: ReactNode;
+    label?: ReactNode;
+    icon?: IconDefinition;
+    align?: "left" | "right";
+    renderCaret?: boolean;
+    /** Controlled mode: whether the dropdown is open */
+    isOpen?: boolean;
+    /** Controlled mode: callback when open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+declare const Dropdown: (props: DropdownProps) => import("react").JSX.Element;
+export default Dropdown;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGjE,OAAO,EAAE,SAAS,EAAoB,MAAM,OAAO,CAAC;AAEpD,OAAO,cAAc,CAAC;AACtB,OAAO,EAGL,cAAc,EACf,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,aAAc,SAAQ,aAAa,EAAE,gBAAgB;IACpE,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,oDAAoD;IACpD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,wDAAwD;IACxD,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C;AAED,QAAA,MAAM,QAAQ,GAAI,OAAO,aAAa,gCAwDrC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/inputs/dropdown/index.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import useOutsideClick from "../../../hooks/useOutsideClick.js";
+import IconButton from "../../buttons/iconButton/index.js";
+import { useRef, useState } from "react";
+import Button from "../../buttons/button/index.js";
+import "./styles.css";
+import { faCaretDown, faCaretUp, } from "@fortawesome/free-solid-svg-icons";
+const Dropdown = (props) => {
+    const { align = "left", renderCaret = true } = props;
+    const [internalIsOpen, setInternalIsOpen] = useState(false);
+    const isControlled = props.isOpen !== undefined;
+    const isOpen = isControlled ? props.isOpen : internalIsOpen;
+    const setIsOpen = (open) => {
+        if (isControlled)
+            props.onOpenChange?.(open);
+        else
+            setInternalIsOpen(open);
+    };
+    const dropdownRef = useRef(null);
+    const handleTriggerClick = () => {
+        setIsOpen(!isOpen);
+    };
+    useOutsideClick([dropdownRef], () => setIsOpen(false));
+    const label = (_jsxs("div", { className: "k-dropdown-label-container", children: [props.label, renderCaret && (_jsx(FontAwesomeIcon, { icon: isOpen ? faCaretUp : faCaretDown }))] }));
+    return (_jsxs("div", { ref: dropdownRef, className: `k-dropdown-container`, children: [props.icon ? (_jsx(IconButton, { size: props.size, variant: props.variant, icon: props.icon, onClick: handleTriggerClick, children: props.label && label })) : (_jsx(Button, { size: props.size, variant: props.variant, onClick: handleTriggerClick, children: props.label && label })), _jsx("div", { className: `k-dropdown-menu ${align} ${isOpen ? "open" : ""}`, children: props.children })] }));
+};
+export default Dropdown;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/dropdown/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/dropdown/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,eAAe,MAAM,mCAAmC,CAAC;AAChE,OAAO,UAAU,MAAM,mCAAmC,CAAC;AAC3D,OAAO,EAAa,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,MAAM,MAAM,+BAA+B,CAAC;AACnD,OAAO,cAAc,CAAC;AACtB,OAAO,EACL,WAAW,EACX,SAAS,GAEV,MAAM,mCAAmC,CAAC;AAc3C,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAE,EAAE;IACxC,MAAM,EAAE,KAAK,GAAG,MAAM,EAAE,WAAW,GAAG,IAAI,EAAE,GAAG,KAAK,CAAC;IAErD,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,MAAM,YAAY,GAAG,KAAK,CAAC,MAAM,KAAK,SAAS,CAAC;IAChD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC;IAE5D,MAAM,SAAS,GAAG,CAAC,IAAa,EAAE,EAAE;QAClC,IAAI,YAAY;YAAE,KAAK,CAAC,YAAY,EAAE,CAAC,IAAI,CAAC,CAAC;;YACxC,iBAAiB,CAAC,IAAI,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEjD,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IACrB,CAAC,CAAC;IAEF,eAAe,CAAC,CAAC,WAAW,CAAC,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;IAEvD,MAAM,KAAK,GAAG,CACZ,eAAK,SAAS,EAAC,4BAA4B,aACxC,KAAK,CAAC,KAAK,EACX,WAAW,IAAI,CACd,KAAC,eAAe,IAAC,IAAI,EAAE,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,GAAI,CAC5D,IACG,CACP,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,sBAAsB,aACrD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CACZ,KAAC,UAAU,IACT,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,kBAAkB,YAE1B,KAAK,CAAC,KAAK,IAAI,KAAK,GACV,CACd,CAAC,CAAC,CAAC,CACF,KAAC,MAAM,IACL,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,kBAAkB,YAE1B,KAAK,CAAC,KAAK,IAAI,KAAK,GACd,CACV,EAED,cAAK,SAAS,EAAE,mBAAmB,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,YAC/D,KAAK,CAAC,QAAQ,GACX,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/inputs/dropdown/styles.css

@@ -0,0 +1,46 @@
+.k-dropdown-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.k-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  background-color: var(--background-color);
+  border-radius: 0.5rem;
+  box-shadow: 0 0.375rem 1.25rem var(--shadow-color);
+  overflow: hidden;
+  transform: translateY(-0.625rem);
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease,
+    visibility 0.2s;
+  min-width: 100%;
+  z-index: 100;
+  padding: 0.5rem 0;
+  margin-top: 0.25rem;
+}
+
+.k-dropdown-menu.left {
+  left: 0;
+}
+
+.k-dropdown-menu.right {
+  right: 0;
+}
+
+.k-dropdown-menu.open {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+}
+
+.k-dropdown-label-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}

package/dist/components/inputs/dropdownArrowButton/index.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithSize } from "../../types.js";
+import "./styles.css";
+interface DropdownArrowButtonProps extends PropsWithSize {
+    isOpen: boolean;
+    disabled?: boolean;
+    onClick?: (e: React.MouseEvent<any>) => void;
+}
+declare const DropdownArrowButton: ({ size, isOpen, disabled, onClick, }: DropdownArrowButtonProps) => import("react").JSX.Element;
+export default DropdownArrowButton;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/dropdownArrowButton/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/dropdownArrowButton/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,cAAc,CAAC;AAEtB,UAAU,wBAAyB,SAAQ,aAAa;IACtD,MAAM,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;CAC9C;AAED,QAAA,MAAM,mBAAmB,GAAI,sCAK1B,wBAAwB,gCAe1B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/inputs/dropdownArrowButton/index.js

@@ -0,0 +1,10 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import "./styles.css";
+const DropdownArrowButton = ({ size, isOpen, disabled = false, onClick, }) => {
+    return (_jsx("button", { type: "button", className: `k-dropdown-arrow k-dropdown-arrow-${size}`, onClick: onClick, tabIndex: -1, disabled: disabled, children: _jsx(FontAwesomeIcon, { icon: faChevronDown, className: isOpen ? "k-dropdown-arrow-open" : "" }) }));
+};
+export default DropdownArrowButton;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/dropdownArrowButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/dropdownArrowButton/index.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AAClE,OAAO,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAC;AAEjE,OAAO,cAAc,CAAC;AAStB,MAAM,mBAAmB,GAAG,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,QAAQ,GAAG,KAAK,EAChB,OAAO,GACkB,EAAE,EAAE;IAC7B,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,qCAAqC,IAAI,EAAE,EACtD,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,EAAE,QAAQ,YAElB,KAAC,eAAe,IACd,IAAI,EAAE,aAAa,EACnB,SAAS,EAAE,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,EAAE,GAChD,GACK,CACV,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/inputs/dropdownArrowButton/styles.css

@@ -0,0 +1,47 @@
+/* Generic dropdown arrow toggle — used by Input (dropDown), MultiSelect, etc. */
+.k-dropdown-arrow {
+  position: absolute;
+  right: 0.75rem;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-color-secondary);
+  transition:
+    color 0.2s ease-in-out,
+    transform 0.2s ease-in-out;
+}
+
+.k-dropdown-arrow:hover:not(:disabled) {
+  color: var(--primary-color);
+}
+
+.k-dropdown-arrow:focus {
+  outline: none;
+}
+
+.k-dropdown-arrow:disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.k-dropdown-arrow-sm {
+  font-size: 0.75rem;
+  top: 0.5rem;
+}
+
+.k-dropdown-arrow-md {
+  font-size: 0.875rem;
+  top: 0.625rem;
+}
+
+.k-dropdown-arrow-lg {
+  font-size: 1rem;
+  top: 0.75rem;
+}
+
+.k-dropdown-arrow-open {
+  transform: rotate(180deg);
+}

package/dist/components/inputs/fileDropZone/index.d.ts

@@ -0,0 +1,16 @@
+import "./styles.css";
+export interface FileDropZoneProps {
+    /** Callback when files are selected */
+    onFilesSelected: (files: File[]) => void;
+    /** Callback when there's an error */
+    onError?: (error: string) => void;
+    /** Maximum number of files allowed */
+    maxFiles?: number;
+    /** File types accepted (e.g., "image/*", ".pdf", "image/png,image/jpeg") */
+    accept?: string;
+    /** Label text for drag and drop area */
+    label?: string;
+}
+declare const FileDropZone: ({ onFilesSelected, onError, maxFiles, accept, label, }: FileDropZoneProps) => import("react").JSX.Element;
+export default FileDropZone;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/fileDropZone/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/fileDropZone/index.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,iBAAiB;IAChC,uCAAuC;IACvC,eAAe,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACzC,qCAAqC;IACrC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,sCAAsC;IACtC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,4EAA4E;IAC5E,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,YAAY,GAAI,wDAMnB,iBAAiB,gCA+FnB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/inputs/fileDropZone/index.js

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import "./styles.css";
+const FileDropZone = ({ onFilesSelected, onError, maxFiles = 15, accept, label = "Drag and drop files here", }) => {
+    const [isDragging, setIsDragging] = useState(false);
+    const validateFileType = (file) => {
+        if (!accept)
+            return true;
+        const acceptTypes = accept.split(",").map((type) => type.trim());
+        return acceptTypes.some((acceptType) => {
+            // Handle wildcard (e.g., "image/*")
+            if (acceptType.endsWith("/*")) {
+                const baseType = acceptType.split("/")[0];
+                return file.type.startsWith(baseType + "/");
+            }
+            // Handle file extension (e.g., ".pdf")
+            if (acceptType.startsWith(".")) {
+                return file.name.toLowerCase().endsWith(acceptType.toLowerCase());
+            }
+            // Handle specific MIME type (e.g., "image/png")
+            return file.type === acceptType;
+        });
+    };
+    const processFiles = (files) => {
+        const fileArray = Array.from(files);
+        const validFiles = fileArray.filter(validateFileType);
+        if (validFiles.length === 0 && fileArray.length > 0) {
+            onError?.("Please upload valid file types only");
+            return;
+        }
+        if (validFiles.length > maxFiles) {
+            onError?.(`Too many files selected. Select no more than ${maxFiles}`);
+            return;
+        }
+        onFilesSelected(validFiles);
+    };
+    const handleDrop = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+        const files = e.dataTransfer.files;
+        if (files && files.length !== 0) {
+            processFiles(files);
+        }
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(true);
+    };
+    const handleDragLeave = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragging(false);
+    };
+    const handleFileChange = (e) => {
+        const files = e.target.files;
+        if (files && files.length !== 0) {
+            processFiles(files);
+        }
+    };
+    return (_jsxs("div", { className: `k-file-drop-zone ${isDragging ? "k-file-drop-zone-dragging" : ""}`, onDrop: handleDrop, onDragOver: handleDragOver, onDragLeave: handleDragLeave, children: [_jsx("p", { children: label }), _jsx("p", { children: "or" }), _jsx("label", { htmlFor: "file-drop-zone-input", className: "k-file-drop-zone-button", children: "Browse Files" }), _jsx("input", { type: "file", accept: accept, multiple: true, id: "file-drop-zone-input", onChange: handleFileChange, style: { display: "none" } })] }));
+};
+export default FileDropZone;
+//# sourceMappingURL=index.js.map

package/dist/components/inputs/fileDropZone/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/inputs/fileDropZone/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/inputs/fileDropZone/styles.css

@@ -0,0 +1,43 @@
+.k-file-drop-zone {
+  border: 0.125rem dashed var(--border-color);
+  border-radius: 0.5rem;
+  padding: 2rem;
+  text-align: center;
+  background-color: var(--background-color-dark);
+  transition: all 0.2s ease;
+  margin-bottom: 1rem;
+  cursor: pointer;
+}
+
+.k-file-drop-zone:hover {
+  border-color: var(--primary-color);
+  background-color: var(--background-color-hover);
+}
+
+.k-file-drop-zone-dragging {
+  border-color: var(--primary-color);
+  background-color: var(--primary-color-light);
+  border-style: solid;
+}
+
+.k-file-drop-zone p {
+  margin: 0.5rem 0;
+  color: var(--text-color);
+  font-size: var(--text-size-sm);
+}
+
+.k-file-drop-zone-button {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  background-color: var(--primary-color);
+  color: var(--text-color-light);
+  border-radius: 0.5rem;
+  cursor: pointer;
+  font-size: var(--text-size-sm);
+  font-weight: 600;
+  transition: background-color 0.2s ease;
+}
+
+.k-file-drop-zone-button:hover {
+  background-color: var(--primary-color-hover);
+}

package/dist/components/inputs/fileUpload/index.d.ts

@@ -0,0 +1,61 @@
+import { PropsWithSize, PropsWithVariant } from "../../types.js";
+import "./styles.css";
+interface FileUploadProps extends PropsWithSize, PropsWithVariant {
+    /** A callback function that receives the selected files. */
+    onFileSelect: (files: File[] | null) => void;
+    /**
+     * **_Optional_** flag to allow multiple file selection
+     *
+     * Defaults to false
+     */
+    multiple?: boolean;
+    /**
+     * **_Optional_** Accepted file types
+     *
+     * Example: "image/*", ".pdf", ".doc,.docx"
+     */
+    accept?: string;
+    /**
+     * **_Optional_** Position of the file list relative to the upload button
+     *
+     * Accepts "above" or "below"
+     *
+     * Defaults to "below"
+     */
+    fileListPosition?: "above" | "below";
+    /** **_Optional_** Maximum file size in bytes */
+    maxSize?: number;
+    /** **_Optional_** Label to display above the component */
+    label?: string;
+    /** **_Optional_** whether the field is required (shows red asterisk and enables validation) */
+    required?: boolean;
+    /** **_Optional_** ID of the field. If one is not provided, it will be randomly generated */
+    id?: string;
+    /**
+     * **_Optional_** When true, renders a second "Upload Folder" button next to
+     * "Upload Files" in the empty state. Directory picks preserve the relative
+     * path in each `File`'s `webkitRelativePath` so callers can reconstruct the
+     * source tree when composing object keys.
+     */
+    allowDirectory?: boolean;
+    /**
+     * **_Optional_** Files to seed the component with on mount. `onFileSelect`
+     * is fired once synchronously so the parent's state stays in sync. Use a
+     * `key` on the parent if you need to re-seed across remounts.
+     */
+    initialFiles?: File[];
+    /**
+     * **_Optional_** Custom render function for the file list
+     *
+     * Receives the selected files, remove handler, clear handler, and change handler
+     */
+    renderFiles?: (params: {
+        files: File[];
+        onRemove: (index: number) => void;
+        onClear: () => void;
+        onChange: () => void;
+    }) => React.ReactNode;
+}
+declare const FileUpload: (props: FileUploadProps) => import("react").JSX.Element;
+export default FileUpload;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/inputs/fileUpload/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/inputs/fileUpload/index.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAKjE,OAAO,cAAc,CAAC;AAQtB,UAAU,eAAgB,SAAQ,aAAa,EAAE,gBAAgB;IAC/D,4DAA4D;IAC5D,YAAY,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;OAMG;IACH,gBAAgB,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACrC,gDAAgD;IAChD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,IAAI,EAAE,CAAC;IACtB;;;;OAIG;IACH,WAAW,CAAC,EAAE,CAAC,MAAM,EAAE;QACrB,KAAK,EAAE,IAAI,EAAE,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;QAClC,OAAO,EAAE,MAAM,IAAI,CAAC;QACpB,QAAQ,EAAE,MAAM,IAAI,CAAC;KACtB,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,QAAA,MAAM,UAAU,GAAI,OAAO,eAAe,gCAuNzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/inputs/fileUpload/index.js

@@ -0,0 +1,92 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import MandatoryAsterisk from "../../forms/requiredAsterisk/index.js";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import IconButton from "../../buttons/iconButton/index.js";
+import { useEffect, useRef, useState } from "react";
+import Button from "../../buttons/button/index.js";
+import Modal from "../../overlays/modal/index.js";
+import "./styles.css";
+import { faUpload, faFile, faTrash, faFolderOpen, } from "@fortawesome/free-solid-svg-icons";
+const FileUpload = (props) => {
+    const { multiple = false, variant = "primary", size = "md", fileListPosition = "below", required = false, } = props;
+    const fileInputRef = useRef(null);
+    const directoryInputRef = useRef(null);
+    const [selectedFiles, setSelectedFiles] = useState(() => props.initialFiles ?? []);
+    // Sync the parent once on mount when seeded — parent state tracks this
+    // component's selection, so without the notification it would miss the seed.
+    const onFileSelectRef = useRef(props.onFileSelect);
+    onFileSelectRef.current = props.onFileSelect;
+    useEffect(() => {
+        if (props.initialFiles && props.initialFiles.length > 0) {
+            onFileSelectRef.current(props.initialFiles);
+        }
+    }, []);
+    const [showSizeModal, setShowSizeModal] = useState(false);
+    const [oversizedFileInfo, setOversizedFileInfo] = useState({ files: [], maxSize: "" });
+    const componentId = props.id || `fileupload-${Math.random().toString(36).substring(2, 9)}`;
+    const directoryId = `${componentId}-dir`;
+    // `webkitdirectory` isn't in React's DOM type map; set it imperatively.
+    useEffect(() => {
+        if (props.allowDirectory && directoryInputRef.current) {
+            directoryInputRef.current.setAttribute("webkitdirectory", "");
+            directoryInputRef.current.setAttribute("directory", "");
+        }
+    }, [props.allowDirectory]);
+    const formatFileSize = (bytes) => {
+        if (bytes === 0)
+            return "0 Bytes";
+        const k = 1024;
+        const sizes = ["Bytes", "KB", "MB", "GB"];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
+    };
+    const handleFileChange = (event) => {
+        const files = event.target.files;
+        if (files && files.length > 0) {
+            const { maxSize } = props;
+            const newFilesArray = Array.from(files);
+            if (maxSize) {
+                const oversizedFiles = newFilesArray.filter((f) => f.size > maxSize);
+                if (oversizedFiles.length > 0) {
+                    const maxSizeFormatted = formatFileSize(maxSize);
+                    const fileNames = oversizedFiles.map((f) => f.name);
+                    setOversizedFileInfo({ files: fileNames, maxSize: maxSizeFormatted });
+                    setShowSizeModal(true);
+                    return;
+                }
+            }
+            setSelectedFiles(newFilesArray);
+            props.onFileSelect(newFilesArray);
+        }
+        else {
+            setSelectedFiles([]);
+            props.onFileSelect(null);
+        }
+    };
+    const handleRemoveFile = (index) => {
+        const newFiles = selectedFiles.filter((_, i) => i !== index);
+        setSelectedFiles(newFiles);
+        props.onFileSelect(newFiles.length > 0 ? newFiles : null);
+        if (newFiles.length === 0 && fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    const handleClearFiles = () => {
+        setSelectedFiles([]);
+        props.onFileSelect(null);
+        if (fileInputRef.current) {
+            fileInputRef.current.value = "";
+        }
+    };
+    const fileList = selectedFiles.length > 0 &&
+        (props.renderFiles ? (props.renderFiles({
+            files: selectedFiles,
+            onRemove: handleRemoveFile,
+            onClear: handleClearFiles,
+            onChange: () => fileInputRef.current?.click(),
+        })) : (_jsxs("div", { className: "k-file-list", children: [_jsxs("div", { className: "k-file-list-header", children: [_jsxs("span", { children: ["Selected Files (", selectedFiles.length, ")"] }), _jsxs("div", { className: "k-file-list-actions", children: [_jsxs(Button, { onClick: () => fileInputRef.current?.click(), variant: variant, size: size, children: ["Change File", selectedFiles.length > 1 ? "s" : ""] }), _jsx(Button, { onClick: handleClearFiles, variant: "danger", size: size, children: "Clear All" })] })] }), _jsx("ul", { className: "k-file-list-items", children: selectedFiles.map((file, index) => (_jsxs("li", { className: "k-file-list-item", children: [_jsxs("div", { className: "k-file-info", children: [_jsx(FontAwesomeIcon, { icon: faFile, className: "k-file-icon" }), _jsx("span", { className: "k-file-name", children: file.name }), _jsxs("span", { className: "k-file-size", children: ["(", formatFileSize(file.size), ")"] })] }), _jsx(IconButton, { icon: faTrash, onClick: () => handleRemoveFile(index), variant: "danger", size: size })] }, index))) })] })));
+    return (_jsxs("div", { className: "k-file-upload-container", children: [props.label && (_jsxs("label", { className: "k-file-upload-label-text", children: [props.label, required && _jsx(MandatoryAsterisk, {})] })), _jsx("input", { type: "file", accept: props.accept, multiple: multiple, onChange: handleFileChange, ref: fileInputRef, className: "k-file-upload-input", id: componentId, required: required }), props.allowDirectory && (_jsx("input", { type: "file", multiple: true, onChange: handleFileChange, ref: directoryInputRef, className: "k-file-upload-input", id: directoryId })), fileListPosition === "above" && fileList, selectedFiles.length === 0 && (_jsxs("div", { className: "k-file-upload-empty-actions", children: [_jsxs("label", { htmlFor: componentId, className: `k-button k-button-${variant} k-button-${size} k-button-center k-file-upload-button`, children: [_jsx(FontAwesomeIcon, { icon: faUpload }), " Upload", " ", multiple ? "Files" : "File"] }), props.allowDirectory && (_jsxs("label", { htmlFor: directoryId, className: `k-button k-button-${variant} k-button-${size} k-button-center k-file-upload-button`, children: [_jsx(FontAwesomeIcon, { icon: faFolderOpen }), " Upload Folder"] }))] })), fileListPosition === "below" && fileList, _jsx(Modal, { show: showSizeModal, onClose: () => setShowSizeModal(false), title: "File Size Error", children: _jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "The following file(s) are too large:" }) }), _jsx("ul", { children: oversizedFileInfo.files.map((fileName, index) => (_jsx("li", { children: fileName }, index))) }), _jsxs("p", { children: ["Maximum allowed file size is", " ", _jsx("strong", { children: oversizedFileInfo.maxSize })] })] }) })] }));
+};
+export default FileUpload;
+//# sourceMappingURL=index.js.map