ikoncomponents 1.2.6 → 1.2.7

package/dist/ikoncomponents/form-fields/multi-combobox-input/index.d.ts

@@ -2,5 +2,5 @@ import { FormComboboxInputProps as BaseFormComboboxInputProps } from "../../form
 interface FormComboboxInputProps extends BaseFormComboboxInputProps {
     defaultOptions?: number;
 }
-export declare function dFormMultiComboboxInput({ formControl, name, label, placeholder, formDescription, items, disabled, onSelect, defaultValue, defaultOptions, }: FormComboboxInputProps): import("react/jsx-runtime").JSX.Element;
+export declare function FormMultiComboboxInput({ formControl, name, label, placeholder, formDescription, items, disabled, onSelect, defaultValue, defaultOptions, }: FormComboboxInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ikoncomponents/form-fields/multi-combobox-input/index.js

@@ -262,7 +262,7 @@ import { ChevronsUpDown, X } from "lucide-react";
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, } from "../../../shadcn/command";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../../shadcn/tooltip";
 import { Checkbox } from "../../../shadcn/checkbox";
-export function dFormMultiComboboxInput({ formControl, name, label, placeholder, formDescription, items = [], disabled, onSelect, defaultValue = [], defaultOptions = 2, }) {
+export function FormMultiComboboxInput({ formControl, name, label, placeholder, formDescription, items = [], disabled, onSelect, defaultValue = [], defaultOptions = 2, }) {
     const [search, setSearch] = useState("");
     const containerRef = useRef(null);
     // Removed triggerRef and popoverWidth state, as we'll rely on CSS variables for sizing

package/dist/index.d.ts

@@ -90,7 +90,7 @@ export { FormComboboxInputWithValue } from "./ikoncomponents/form-fields/combobo
 export { FormDateInput } from "./ikoncomponents/form-fields/date-input";
 export { FormFileInput } from "./ikoncomponents/form-fields/file-input";
 export { FormInput } from "./ikoncomponents/form-fields/input";
-export { dFormMultiComboboxInput } from "./ikoncomponents/form-fields/multi-combobox-input";
+export { FormMultiComboboxInput } from "./ikoncomponents/form-fields/multi-combobox-input";
 export { FormOtpInput } from "./ikoncomponents/form-fields/otp-input";
 export { FormPhoneInput } from "./ikoncomponents/form-fields/phone-input";
 export { FormTextarea } from "./ikoncomponents/form-fields/textarea";

package/dist/index.js

@@ -80,7 +80,7 @@ export { FormComboboxInputWithValue } from "./ikoncomponents/form-fields/combobo
 export { FormDateInput } from "./ikoncomponents/form-fields/date-input";
 export { FormFileInput } from "./ikoncomponents/form-fields/file-input";
 export { FormInput } from "./ikoncomponents/form-fields/input";
-export { dFormMultiComboboxInput } from "./ikoncomponents/form-fields/multi-combobox-input";
+export { FormMultiComboboxInput } from "./ikoncomponents/form-fields/multi-combobox-input";
 export { FormOtpInput } from "./ikoncomponents/form-fields/otp-input";
 export { FormPhoneInput } from "./ikoncomponents/form-fields/phone-input";
 export { FormTextarea } from "./ikoncomponents/form-fields/textarea";

package/dist/shadcn/workflow.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 export type StepStatus = "OUTSTANDING" | "IN PROGRESS" | "COMPLETED";
 export type WorkflowStep = {
-    id: string;
+    id?: string;
     title: string;
     status: StepStatus;
     dropdownOptions?: React.ReactNode[];
@@ -10,10 +10,11 @@ export type WorkflowStep = {
     createdAt?: string;
 };
 type WorkflowProps = {
+    name: string;
     title?: string;
     steps: WorkflowStep[];
     onDropdownSelect?: (stepId: string, value: string) => void;
     style?: React.CSSProperties;
 };
-export declare function Workflow({ title, steps, onDropdownSelect, style, }: WorkflowProps): import("react/jsx-runtime").JSX.Element;
+export declare function Workflow({ name, steps, style }: WorkflowProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/shadcn/workflow.js

@@ -1,16 +1,20 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Badge } from "./badge";
 import { ChevronDown } from "lucide-react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown-menu";
+import { Badge } from "./badge";
 const statusColors = {
     OUTSTANDING: "bg-[#FFDE721A] text-[#FBB125] border border-[#FBB12533]",
     "IN PROGRESS": "bg-[#6A77D91A] text-[#6A77D9]",
     COMPLETED: "bg-[#519E591A] text-[#519E59] border border-[#FBB12533]",
 };
-export function Workflow({ title = "Deal Workflow", steps, onDropdownSelect, style, }) {
+export function Workflow({ name, steps, style }) {
     const completedCount = steps.filter((s) => s.status === "COMPLETED").length;
     const progressPercent = (completedCount / steps.length) * 100;
-    const [openDropdown, setOpenDropdown] = React.useState(null);
-    return (_jsxs("div", { style: style, className: "p-4 space-y-2 rounded-lg border dark:bg-[#171717] text-primary blue-dark:bg-[#1B2336]", children: [_jsx("h2", { className: "text-sm font-semibold mb-4 m-3", children: title }), steps.map((step) => (_jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center p-5 border border-neutral-600 rounded-md gap-1 sm:gap-2 m-2", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto", children: [_jsx("div", { className: "w-7 h-7 sm:w-9 sm:h-9 dark:bg-neutral-800 bg-[var(--keross-skeleton-bg)] rounded-sm flex-shrink-0" }), _jsxs("div", { className: "flex flex-col text-md", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "font-semibold", children: step.title }), step.status === "IN PROGRESS" && step.dropdownOptions && (_jsxs("div", { className: "relative inline-block", children: [_jsx("button", { type: "button", onClick: () => setOpenDropdown((prev) => prev === step.id ? null : step.id), className: "p-1", children: _jsx(ChevronDown, { className: `w-4 h-4 cursor-pointer transition-transform duration-200 ${openDropdown === step.id ? "rotate-180" : ""}` }) }), openDropdown === step.id && (_jsx("div", { className: "absolute mt-2 w-40 dark:bg-neutral-800 bg-background shadow-lg dark:border-neutral-700 rounded-md z-20 p-1 space-y-1", children: step.dropdownOptions.map((optionNode, index) => (_jsx("div", { onClick: () => setOpenDropdown(null), className: "w-full", children: optionNode }, index))) }))] }))] }), step.owner && (_jsx("span", { className: "text-sm text-neutral-400", children: step.owner })), step.createdAt && (_jsxs("span", { className: "text-sm text-neutral-500", children: ["Created on ", step.createdAt] }))] })] }), _jsx("div", { className: "mt-1 sm:mt-0 flex-shrink-0", children: _jsx(Badge, { className: statusColors[step.status], children: step.status }) })] }, step.id))), _jsxs("div", { className: "text-xs flex flex-col sm:flex-row justify-between items-start sm:items-center pt-1", children: [_jsxs("span", { children: [steps.length, " steps total"] }), _jsxs("span", { children: [completedCount, " completed"] })] }), _jsx("div", { className: "w-full bg-gray-300 dark:bg-gray-700 h-1 rounded-full overflow-hidden mt-1", children: _jsx("div", { className: "h-1 bg-blue-500 dark:bg-blue-400 transition-all", style: { width: `${progressPercent}%` } }) })] }));
+    return (_jsxs("div", { style: style, className: "p-4 space-y-2 rounded-lg border dark:bg-[#171717] text-primary blue-dark:bg-[#1B2336]", children: [_jsx("h2", { className: "text-sm font-semibold mb-4 m-3", children: name }), steps.map((step) => {
+                var _a;
+                const stepId = (_a = step.id) !== null && _a !== void 0 ? _a : "";
+                return (_jsxs("div", { className: "flex flex-col sm:flex-row justify-between items-start sm:items-center p-5 border border-neutral-600 rounded-md gap-1 sm:gap-2 m-2", children: [_jsxs("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-2 w-full sm:w-auto", children: [_jsx("div", { className: "w-7 h-7 sm:w-9 sm:h-9 dark:bg-neutral-800 bg-[var(--keross-skeleton-bg)] rounded-sm flex-shrink-0" }), _jsxs("div", { className: "flex flex-col text-md", children: [_jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "font-semibold", children: step.title }), step.status === "IN PROGRESS" && step.dropdownOptions && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { className: "p-1", children: _jsx(ChevronDown, { className: "w-4 h-4 cursor-pointer" }) }) }), _jsx(DropdownMenuContent, { className: "w-50 ml-40", children: step.dropdownOptions.map((node, index) => (_jsx(React.Fragment, { children: node }, index))) })] }))] }), step.owner && (_jsx("span", { className: "text-sm text-neutral-400", children: step.owner })), step.createdAt && (_jsxs("span", { className: "text-sm text-neutral-500", children: ["Created on ", step.createdAt] }))] })] }), _jsx("div", { className: "mt-1 sm:mt-0 flex-shrink-0", children: _jsx(Badge, { className: statusColors[step.status], children: step.status }) })] }, stepId));
+            }), _jsxs("div", { className: "text-xs flex flex-col sm:flex-row justify-between items-start sm:items-center pt-1", children: [_jsxs("span", { children: [steps.length, " steps total"] }), _jsxs("span", { children: [completedCount, " completed"] })] }), _jsx("div", { className: "w-full bg-gray-300 dark:bg-gray-700 h-1 rounded-full overflow-hidden mt-1", children: _jsx("div", { className: "h-1 bg-blue-500 dark:bg-blue-400 transition-all", style: { width: `${progressPercent}%` } }) })] }));
 }

package/dist/styles.css

@@ -22,7 +22,6 @@
     --color-neutral-400: oklch(70.8% 0 0);
     --color-neutral-500: oklch(55.6% 0 0);
     --color-neutral-600: oklch(43.9% 0 0);
-    --color-neutral-700: oklch(37.1% 0 0);
     --color-neutral-800: oklch(26.9% 0 0);
     --color-black: #000;
     --color-white: #fff;
@@ -439,6 +438,9 @@
   .ml-12 {
     margin-left: calc(var(--spacing) * 12);
   }
+  .ml-40 {
+    margin-left: calc(var(--spacing) * 40);
+  }
   .ml-auto {
     margin-left: auto;
   }
@@ -469,12 +471,6 @@
   .hidden {
     display: none;
   }
-  .inline {
-    display: inline;
-  }
-  .inline-block {
-    display: inline-block;
-  }
   .inline-flex {
     display: inline-flex;
   }
@@ -736,8 +732,8 @@
   .w-36 {
     width: calc(var(--spacing) * 36);
   }
-  .w-40 {
-    width: calc(var(--spacing) * 40);
+  .w-50 {
+    width: calc(var(--spacing) * 50);
   }
   .w-55 {
     width: calc(var(--spacing) * 55);
@@ -1051,13 +1047,6 @@
       margin-block-end: calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-y-reverse)));
     }
   }
-  .space-y-1 {
-    :where(& > :not(:last-child)) {
-      --tw-space-y-reverse: 0;
-      margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
-      margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
-    }
-  }
   .space-y-2 {
     :where(& > :not(:last-child)) {
       --tw-space-y-reverse: 0;
@@ -4030,11 +4019,6 @@
       padding-inline: calc(var(--spacing) * 4);
     }
   }
-  .dark\:border-neutral-700 {
-    &:is(.dark *) {
-      border-color: var(--color-neutral-700);
-    }
-  }
   .dark\:border-white {
     &:is(.dark *) {
       border-color: var(--color-white);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikoncomponents",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "css": "dist/styles.css",