najm-kit 0.0.11 → 0.0.13

package/dist/index.d.ts

@@ -872,7 +872,7 @@ interface StatusPillProps extends React$1.HTMLAttributes<HTMLSpanElement> {
 }
 declare const StatusPill: React$1.ForwardRefExoticComponent<StatusPillProps & React$1.RefAttributes<HTMLSpanElement>>;
 
-declare function Toaster({ ...props }: ToasterProps): react_jsx_runtime.JSX.Element;
+declare function Toaster({ toastOptions, ...props }: ToasterProps): react_jsx_runtime.JSX.Element;
 
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
@@ -2314,33 +2314,33 @@ declare const HEADER_COLORS: {
         readonly row: "hover:bg-primary/5";
     };
     readonly violet: {
-        readonly bg: "bg-violet-600/20";
-        readonly text: "[&_th]:text-violet-700 dark:[&_th]:text-violet-300";
+        readonly bg: "bg-violet-600/30";
+        readonly text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-300";
         readonly row: "hover:bg-violet-500/5";
     };
     readonly blue: {
-        readonly bg: "bg-blue-600/20";
-        readonly text: "[&_th]:text-blue-700   dark:[&_th]:text-blue-300";
+        readonly bg: "bg-blue-600/30";
+        readonly text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-300";
         readonly row: "hover:bg-blue-500/5";
     };
     readonly emerald: {
-        readonly bg: "bg-emerald-600/20";
-        readonly text: "[&_th]:text-emerald-700 dark:[&_th]:text-emerald-300";
+        readonly bg: "bg-emerald-600/30";
+        readonly text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-400";
         readonly row: "hover:bg-emerald-500/5";
     };
     readonly amber: {
-        readonly bg: "bg-amber-500/20";
-        readonly text: "[&_th]:text-amber-700   dark:[&_th]:text-amber-300";
+        readonly bg: "bg-amber-500/30";
+        readonly text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-300";
         readonly row: "hover:bg-amber-500/5";
     };
     readonly rose: {
-        readonly bg: "bg-rose-600/20";
-        readonly text: "[&_th]:text-rose-700    dark:[&_th]:text-rose-300";
+        readonly bg: "bg-rose-600/30";
+        readonly text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-300";
         readonly row: "hover:bg-rose-500/5";
     };
     readonly slate: {
         readonly bg: "bg-slate-700/60";
-        readonly text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-300";
+        readonly text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-400";
         readonly row: "hover:bg-slate-500/5";
     };
 };

package/dist/index.mjs

@@ -2176,7 +2176,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
     {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
-      className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>svg]:opacity-50 data-[inset]:pl-8", className),
+      className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>svg]:opacity-50 data-[inset]:pl-8", className),
       ...props,
       children: [
         children,
@@ -2225,7 +2225,7 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
       "data-inset": inset,
       "data-variant": variant,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[inset]:pl-8",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[inset]:pl-8",
         className
       ),
       ...props
@@ -2237,7 +2237,7 @@ function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
     DropdownMenuPrimitive.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
-      className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+      className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
       checked,
       ...props,
       children: [
@@ -2252,7 +2252,7 @@ function DropdownMenuRadioItem({ className, children, ...props }) {
     DropdownMenuPrimitive.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
-      className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+      className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CircleIcon, { className: "size-2 fill-current" }) }) }),
@@ -2360,7 +2360,7 @@ function SelectItem({ className, children, ...props }) {
     SelectPrimitive.Item,
     {
       "data-slot": "select-item",
-      className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+      className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
@@ -3301,7 +3301,7 @@ function CommandItem({ className, ...props }) {
     Command$1.Item,
     {
       "data-slot": "command-item",
-      className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+      className: cn("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
       ...props
     }
   );
@@ -3499,13 +3499,13 @@ var StatusPill = React.forwardRef(
   }
 );
 StatusPill.displayName = "StatusPill";
-function Toaster({ ...props }) {
+function Toaster({ toastOptions, ...props }) {
   return /* @__PURE__ */ jsx(
     Toaster$1,
     {
       className: "toaster group",
-      richColors: false,
       toastOptions: {
+        ...toastOptions,
         classNames: {
           toast: "group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg",
           description: "group-[.toast]:text-muted-foreground",
@@ -3514,7 +3514,8 @@ function Toaster({ ...props }) {
           success: "!border-emerald-500/40 !bg-emerald-600 !text-white [&_[data-description]]:!text-white/80",
           error: "!border-red-500/40 !bg-red-600 !text-white [&_[data-description]]:!text-white/80",
           warning: "!border-amber-500/40 !bg-amber-500 !text-white [&_[data-description]]:!text-white/80",
-          info: "!border-cyan-500/40 !bg-cyan-600 !text-white [&_[data-description]]:!text-white/80"
+          info: "!border-cyan-500/40 !bg-cyan-600 !text-white [&_[data-description]]:!text-white/80",
+          ...toastOptions?.classNames
         }
       },
       ...props
@@ -3572,7 +3573,7 @@ function TableRow({ className, ...props }) {
   return /* @__PURE__ */ jsx("tr", { "data-slot": "table-row", className: cn("border-b border-border/30 transition-colors hover:bg-muted/30 data-[state=selected]:bg-muted", className), ...props });
 }
 function TableHead({ className, ...props }) {
-  return /* @__PURE__ */ jsx("th", { "data-slot": "table-head", className: cn("text-muted-foreground h-9 px-3 text-left align-middle text-xs font-medium uppercase tracking-wide whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
+  return /* @__PURE__ */ jsx("th", { "data-slot": "table-head", className: cn("text-foreground h-9 px-3 text-left align-middle text-xs font-medium uppercase tracking-wide whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
 }
 function TableCell({ className, ...props }) {
   return /* @__PURE__ */ jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props });
@@ -7678,12 +7679,12 @@ function useTableKeyboard(options = {}) {
 // src/components/table/tableColors.ts
 var HEADER_COLORS = {
   primary: { bg: "bg-primary/15", text: "[&_th]:text-primary", row: "hover:bg-primary/5" },
-  violet: { bg: "bg-violet-600/20", text: "[&_th]:text-violet-700 dark:[&_th]:text-violet-300", row: "hover:bg-violet-500/5" },
-  blue: { bg: "bg-blue-600/20", text: "[&_th]:text-blue-700   dark:[&_th]:text-blue-300", row: "hover:bg-blue-500/5" },
-  emerald: { bg: "bg-emerald-600/20", text: "[&_th]:text-emerald-700 dark:[&_th]:text-emerald-300", row: "hover:bg-emerald-500/5" },
-  amber: { bg: "bg-amber-500/20", text: "[&_th]:text-amber-700   dark:[&_th]:text-amber-300", row: "hover:bg-amber-500/5" },
-  rose: { bg: "bg-rose-600/20", text: "[&_th]:text-rose-700    dark:[&_th]:text-rose-300", row: "hover:bg-rose-500/5" },
-  slate: { bg: "bg-slate-700/60", text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-300", row: "hover:bg-slate-500/5" }
+  violet: { bg: "bg-violet-600/30", text: "[&_th]:text-violet-800 dark:[&_th]:text-violet-300", row: "hover:bg-violet-500/5" },
+  blue: { bg: "bg-blue-600/30", text: "[&_th]:text-blue-800   dark:[&_th]:text-blue-300", row: "hover:bg-blue-500/5" },
+  emerald: { bg: "bg-emerald-600/30", text: "[&_th]:text-emerald-800 dark:[&_th]:text-emerald-400", row: "hover:bg-emerald-500/5" },
+  amber: { bg: "bg-amber-500/30", text: "[&_th]:text-amber-800   dark:[&_th]:text-amber-300", row: "hover:bg-amber-500/5" },
+  rose: { bg: "bg-rose-600/30", text: "[&_th]:text-rose-800    dark:[&_th]:text-rose-300", row: "hover:bg-rose-500/5" },
+  slate: { bg: "bg-slate-700/60", text: "[&_th]:text-slate-100   dark:[&_th]:text-slate-400", row: "hover:bg-slate-500/5" }
 };
 var HEADER_HEX = {
   primary: "",
@@ -7795,7 +7796,7 @@ function NTableContent({ effectiveMode }) {
     const dir = column.getIsSorted();
     if (dir === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" });
     if (dir === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "h-4 w-4" });
-    return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4 opacity-50" });
+    return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-4 w-4" });
   };
   return /* @__PURE__ */ jsx(
     NajmScroll,

package/dist/styles.css

@@ -2555,6 +2555,9 @@ video {
 .bg-amber-500\/20 {
   background-color: rgb(245 158 11 / 0.2);
 }
+.bg-amber-500\/30 {
+  background-color: rgb(245 158 11 / 0.3);
+}
 .bg-background {
   background-color: hsl(var(--najm-background));
 }
@@ -2573,8 +2576,8 @@ video {
 .bg-black\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
-.bg-blue-600\/20 {
-  background-color: rgb(37 99 235 / 0.2);
+.bg-blue-600\/30 {
+  background-color: rgb(37 99 235 / 0.3);
 }
 .bg-border {
   background-color: hsl(var(--najm-border));
@@ -2608,8 +2611,8 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
 }
-.bg-emerald-600\/20 {
-  background-color: rgb(5 150 105 / 0.2);
+.bg-emerald-600\/30 {
+  background-color: rgb(5 150 105 / 0.3);
 }
 .bg-foreground {
   background-color: hsl(var(--najm-foreground));
@@ -2688,8 +2691,8 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
 }
-.bg-rose-600\/20 {
-  background-color: rgb(225 29 72 / 0.2);
+.bg-rose-600\/30 {
+  background-color: rgb(225 29 72 / 0.3);
 }
 .bg-secondary {
   background-color: hsl(var(--najm-secondary));
@@ -2734,8 +2737,8 @@ video {
 .bg-transparent {
   background-color: transparent;
 }
-.bg-violet-600\/20 {
-  background-color: rgb(124 58 237 / 0.2);
+.bg-violet-600\/30 {
+  background-color: rgb(124 58 237 / 0.3);
 }
 .bg-white\/5 {
   background-color: rgb(255 255 255 / 0.05);
@@ -3979,6 +3982,12 @@ video {
   --tw-translate-x: -2px;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
+.data-\[disabled\=true\]\:cursor-not-allowed[data-disabled="true"] {
+  cursor: not-allowed;
+}
+.data-\[disabled\]\:cursor-not-allowed[data-disabled] {
+  cursor: not-allowed;
+}
 .data-\[state\=active\]\:border-border[data-state="active"] {
   border-color: hsl(var(--najm-border));
 }
@@ -4980,32 +4989,32 @@ video {
 .\[\&_svg\]\:shrink-0 svg {
   flex-shrink: 0;
 }
-.\[\&_th\]\:text-amber-700 th {
+.\[\&_th\]\:text-amber-800 th {
   --tw-text-opacity: 1;
-  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
+  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
 }
-.\[\&_th\]\:text-blue-700 th {
+.\[\&_th\]\:text-blue-800 th {
   --tw-text-opacity: 1;
-  color: rgb(29 78 216 / var(--tw-text-opacity, 1));
+  color: rgb(30 64 175 / var(--tw-text-opacity, 1));
 }
-.\[\&_th\]\:text-emerald-700 th {
+.\[\&_th\]\:text-emerald-800 th {
   --tw-text-opacity: 1;
-  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
+  color: rgb(6 95 70 / var(--tw-text-opacity, 1));
 }
 .\[\&_th\]\:text-primary th {
   color: hsl(var(--najm-primary));
 }
-.\[\&_th\]\:text-rose-700 th {
+.\[\&_th\]\:text-rose-800 th {
   --tw-text-opacity: 1;
-  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
+  color: rgb(159 18 57 / var(--tw-text-opacity, 1));
 }
 .\[\&_th\]\:text-slate-100 th {
   --tw-text-opacity: 1;
   color: rgb(241 245 249 / var(--tw-text-opacity, 1));
 }
-.\[\&_th\]\:text-violet-700 th {
+.\[\&_th\]\:text-violet-800 th {
   --tw-text-opacity: 1;
-  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
+  color: rgb(91 33 182 / var(--tw-text-opacity, 1));
 }
 .dark\:\[\&_th\]\:text-amber-300 th:is(.dark *) {
   --tw-text-opacity: 1;
@@ -5015,17 +5024,17 @@ video {
   --tw-text-opacity: 1;
   color: rgb(147 197 253 / var(--tw-text-opacity, 1));
 }
-.dark\:\[\&_th\]\:text-emerald-300 th:is(.dark *) {
+.dark\:\[\&_th\]\:text-emerald-400 th:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(110 231 183 / var(--tw-text-opacity, 1));
+  color: rgb(52 211 153 / var(--tw-text-opacity, 1));
 }
 .dark\:\[\&_th\]\:text-rose-300 th:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(253 164 175 / var(--tw-text-opacity, 1));
 }
-.dark\:\[\&_th\]\:text-slate-300 th:is(.dark *) {
+.dark\:\[\&_th\]\:text-slate-400 th:is(.dark *) {
   --tw-text-opacity: 1;
-  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
+  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
 }
 .dark\:\[\&_th\]\:text-violet-300 th:is(.dark *) {
   --tw-text-opacity: 1;

package/package.json

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