najm-kit 0.0.32 → 0.0.34

package/dist/index.mjs

@@ -30,7 +30,7 @@ import { Toaster as Toaster$1 } from 'sonner';
 export { toast } from 'sonner';
 import { FormProvider, Controller, useFormContext, useForm, useFieldArray } from 'react-hook-form';
 import { defaultStyles, FileIcon } from 'react-file-icon';
-import { format } from 'date-fns';
+import { format, parseISO } from 'date-fns';
 import { HexColorPicker } from 'react-colorful';
 import { converter, parse, formatHsl, formatRgb, formatHex } from 'culori';
 import { PhoneInput as PhoneInput$1, defaultCountries } from 'react-international-phone';
@@ -5017,23 +5017,31 @@ function CompactCard({ icon, label, value, unit, iconColor, onClick, bordered, c
       onClick,
       bordered,
       className: cn(
-        !bordered && "border-0",
-        "bg-foreground/10 p-3 shadow-none",
+        "group px-3 py-2.5 transition-colors",
         onClick && "cursor-pointer",
         className
       ),
       classNames: {
         root: classNames?.root,
-        content: "items-center justify-center"
+        content: "flex-row items-center gap-2.5"
       },
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-1", children: [
-          /* @__PURE__ */ jsx(NIcon, { icon, className: cn("w-4 h-4", iconColor ?? "text-primary", classNames?.icon) }),
-          /* @__PURE__ */ jsx("span", { className: cn("text-xs text-muted-foreground", classNames?.label), children: label })
-        ] }),
-        /* @__PURE__ */ jsxs("p", { className: cn("text-lg font-semibold text-foreground leading-none", classNames?.value), children: [
-          value,
-          unit ? ` ${unit}` : ""
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary transition-colors group-hover:bg-primary/20",
+              classNames?.icon
+            ),
+            children: /* @__PURE__ */ jsx(NIcon, { icon, className: cn("w-4 h-4", iconColor ?? "text-primary") })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx("p", { className: cn("truncate text-[11px] leading-none text-muted-foreground", classNames?.label), children: label }),
+          /* @__PURE__ */ jsxs("p", { className: cn("truncate text-base font-semibold leading-tight text-foreground", classNames?.value), children: [
+            value,
+            unit ? ` ${unit}` : ""
+          ] })
         ] })
       ]
     }
@@ -6180,11 +6188,12 @@ var SwitchInput = ({ value, onChange, label = "", helper, className = "", varian
 ] });
 var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "", icon, showIcon = true, iconColor, variant = "default", status = "default", bordered, borderColor }) => {
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  const toDateString = (date) => date?.toISOString().split("T")[0];
+  const toDateString = (date) => date ? format(date, "yyyy-MM-dd") : void 0;
+  const toDate = (val) => typeof val === "string" ? parseISO(val) : val;
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(typeof value === "string" ? new Date(value) : value, "PPP") : placeholder }) }) }),
-      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: typeof value === "string" ? new Date(value) : value, onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
+      /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: toDate(value), onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
     ] }),
     !icon && showIcon && /* @__PURE__ */ jsx(Calendar$1, { className: iconProps.className, style: iconProps.style })
   ] });
@@ -7514,8 +7523,8 @@ function NFormSectionHeader({
         className
       ),
       children: [
-        Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4 shrink-0" }),
-        /* @__PURE__ */ jsx(Label, { className: "text-sm font-semibold leading-none", children: title })
+        Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4 shrink-0 text-current" }),
+        /* @__PURE__ */ jsx(Label, { className: "text-sm font-semibold leading-none text-current", children: title })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "0.0.32",
+  "version": "0.0.34",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",
   "main": "./dist/index.mjs",