@djangocfg/ui-core 2.1.36 → 2.1.38

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@djangocfg/ui-core",
-  "version": "2.1.36",
+  "version": "2.1.38",
   "description": "Pure React UI component library without Next.js dependencies - for Electron, Vite, CRA apps",
   "keywords": [
     "ui-components",
@@ -102,7 +102,7 @@
     "vaul": "1.1.2"
   },
   "devDependencies": {
-    "@djangocfg/typescript-config": "^2.1.36",
+    "@djangocfg/typescript-config": "^2.1.38",
     "@types/node": "^24.7.2",
     "@types/react": "^19.1.0",
     "@types/react-dom": "^19.1.0",

package/src/components/button.tsx

@@ -46,6 +46,21 @@ export interface ButtonProps
   loading?: boolean
 }
 
+// Filter out SVG icons from children when loading
+function filterIcons(children: React.ReactNode): React.ReactNode {
+  return React.Children.map(children, (child) => {
+    if (!React.isValidElement(child)) return child;
+
+    const type = child.type;
+    // Skip native svg or ForwardRef components (Lucide icons)
+    if (type === 'svg' || (typeof type === 'object' && type !== null)) {
+      return null;
+    }
+
+    return child;
+  });
+}
+
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, loading = false, onClick, children, disabled, ...props }, ref) => {
     const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -77,8 +92,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         disabled={disabled || loading}
         {...props}
       >
-        {loading && <Loader2 className="animate-spin" />}
-        {children}
+        {loading && <Loader2 className="size-4 animate-spin" />}
+        {loading ? filterIcons(children) : children}
       </button>
     )
   }

package/src/components/sticky.tsx

@@ -1,5 +1,37 @@
 "use client"
 
+/*
+ * Sticky Component - react-sticky-box wrapper
+ *
+ * COMMON ISSUES & SOLUTIONS:
+ *
+ * 1. STICKY NOT WORKING
+ *    Required structure:
+ *    - Outer div: h-full overflow-y-auto (scrollable container)
+ *    - Inner div: flex items-start min-h-full (flex container)
+ *    - Main content: flex-1
+ *    - Sticky: direct child of flex container
+ *
+ * 2. PAGE DOESN'T SCROLL
+ *    Add "h-full overflow-y-auto" to outer container.
+ *    Scrollable container must have defined height.
+ *
+ * 3. INSIDE ResizablePanel
+ *    ResizablePanel has overflow-hidden. Add scrollable wrapper inside:
+ *    <ResizablePanel>
+ *      <div className="h-full overflow-y-auto">...</div>
+ *    </ResizablePanel>
+ *
+ * 4. FLEX CONTAINER REQUIREMENTS
+ *    - Use items-start (NOT items-stretch)
+ *    - Sticky must be direct child of flex container
+ *    - Main content should be flex-1
+ *
+ * 5. useNativeSticky vs react-sticky-box
+ *    - useNativeSticky: CSS position:sticky, simpler but limited
+ *    - Default: react-sticky-box, better for sidebars, handles tall content
+ */
+
 import * as React from 'react';
 import StickyBox from 'react-sticky-box';
 

package/src/components/toast.tsx

@@ -32,6 +32,12 @@ const toastVariants = cva(
         default: "border bg-background text-foreground",
         destructive:
           "destructive group border-destructive bg-destructive text-destructive-foreground",
+        success:
+          "success group border-green-600 bg-green-500 text-white",
+        warning:
+          "warning group border-yellow-600 bg-yellow-500 text-black",
+        info:
+          "info group border-blue-600 bg-blue-500 text-white",
       },
     },
     defaultVariants: {
@@ -62,7 +68,11 @@ const ToastAction = React.forwardRef<
   <ToastPrimitives.Action
     ref={ref}
     className={cn(
-      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      "group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      "group-[.success]:border-green-300/40 group-[.success]:hover:bg-green-600 group-[.success]:hover:text-white group-[.success]:focus:ring-green-400",
+      "group-[.warning]:border-yellow-600/40 group-[.warning]:hover:bg-yellow-600 group-[.warning]:hover:text-black group-[.warning]:focus:ring-yellow-400",
+      "group-[.info]:border-blue-300/40 group-[.info]:hover:bg-blue-600 group-[.info]:hover:text-white group-[.info]:focus:ring-blue-400",
       className
     )}
     {...props}
@@ -77,7 +87,11 @@ const ToastClose = React.forwardRef<
   <ToastPrimitives.Close
     ref={ref}
     className={cn(
-      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100",
+      "group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      "group-[.success]:text-green-100 group-[.success]:hover:text-white group-[.success]:focus:ring-green-300",
+      "group-[.warning]:text-yellow-800 group-[.warning]:hover:text-black group-[.warning]:focus:ring-yellow-600",
+      "group-[.info]:text-blue-100 group-[.info]:hover:text-white group-[.info]:focus:ring-blue-300",
       className
     )}
     toast-close=""

package/src/hooks/useToast.ts

@@ -172,7 +172,7 @@ function dispatch(action: Action) {
 
 type Toast = Omit<ToasterToast, "id">
 
-function toast({ duration = TOAST_DEFAULT_DURATION, ...props }: Toast) {
+function createToast({ duration = TOAST_DEFAULT_DURATION, ...props }: Toast) {
   const id = genId()
 
   const update = (props: ToasterToast) =>
@@ -206,6 +206,24 @@ function toast({ duration = TOAST_DEFAULT_DURATION, ...props }: Toast) {
   }
 }
 
+// Main toast function with variant helpers
+function toast(props: Toast) {
+  return createToast(props)
+}
+
+// Convenience methods for different variants
+toast.success = (props: Omit<Toast, "variant">) =>
+  createToast({ ...props, variant: "success" })
+
+toast.error = (props: Omit<Toast, "variant">) =>
+  createToast({ ...props, variant: "destructive" })
+
+toast.warning = (props: Omit<Toast, "variant">) =>
+  createToast({ ...props, variant: "warning" })
+
+toast.info = (props: Omit<Toast, "variant">) =>
+  createToast({ ...props, variant: "info" })
+
 function useToast() {
   const [state, setState] = React.useState<State>(memoryState)