shru-design-system 0.5.1 → 0.5.4

package/dist/index.d.mts

@@ -156,8 +156,10 @@ declare const textAsElements: readonly ["p", "span", "div", "code"];
 interface TextProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
     variant?: typeof textVariants[number];
     as?: typeof textAsElements[number];
+    leftIcon?: React$1.ReactNode;
+    rightIcon?: React$1.ReactNode;
 }
-declare function Text({ className, variant, as: Component, ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare function Text({ className, variant, as: Component, leftIcon, rightIcon, children, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 
 declare function InputOTP({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
     containerClassName?: string;
@@ -185,7 +187,7 @@ interface ImageProps extends React$1.ImgHTMLAttributes<HTMLImageElement> {
  * For Next.js optimization, use next/image directly in your Next.js app.
  * This component is library-compatible and works in any React environment.
  */
-declare function Image({ className, fallback, alt, src, width, height, loading, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+declare function Image({ className, fallback, alt, src, width, height, loading, ...props }: ImageProps): react_jsx_runtime.JSX.Element | null;
 
 interface UploadProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
     onUpload?: (files: FileList | null) => void;
@@ -595,8 +597,9 @@ interface StatusTextProps {
     variant?: "caption" | "body" | "heading" | "badge";
     formatText?: (text: string, count?: number, label?: string) => string;
     className?: string;
+    as?: "div" | "span" | "p";
 }
-declare function StatusText({ text, status, count, label, variant, formatText, className, }: StatusTextProps): react_jsx_runtime.JSX.Element;
+declare function StatusText({ text, status, count, label, variant, formatText, className, as, }: StatusTextProps): react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
     steps: Array<{
@@ -680,13 +683,14 @@ declare function SearchInput({ placeholder, value: valueProp, onChange, onSearch
 interface ConfirmModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    triggerLabel?: string;
+    triggerLabel?: string | React$1.ReactNode;
     triggerProps?: React$1.ComponentProps<typeof Button>;
     stopPropagation?: boolean;
     icon?: React$1.ReactNode;
     text?: string;
     title: string;
     description?: string;
+    message?: string;
     onConfirm: () => void | Promise<void>;
     confirmLabel?: string;
     cancelLabel?: string;
@@ -695,7 +699,7 @@ interface ConfirmModalProps {
     error?: string;
     showModal?: boolean;
 }
-declare function ConfirmModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, stopPropagation, icon, text, title, description, onConfirm, confirmLabel, cancelLabel, variant, loading, error, showModal, ...props }: ConfirmModalProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, stopPropagation, icon, text, title, description, message, onConfirm, confirmLabel, cancelLabel, variant, loading, error, showModal, ...props }: ConfirmModalProps): react_jsx_runtime.JSX.Element;
 
 interface CopyButtonProps extends React$1.ComponentProps<typeof Button> {
     text?: string;
@@ -748,10 +752,12 @@ interface FormFieldConfig {
 interface FormModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    triggerLabel?: string;
+    triggerLabel?: string | React$1.ReactNode;
     triggerProps?: React$1.ComponentProps<typeof Button>;
     icon?: React$1.ReactNode;
     title: string;
+    description?: string;
+    message?: string;
     variant?: "create" | "edit";
     itemType?: string;
     onSubmit: (data: Record<string, any>) => void | Promise<void>;
@@ -766,10 +772,10 @@ interface FormModalProps {
     beforeFields?: React$1.ReactNode;
     afterFields?: React$1.ReactNode;
 }
-declare function FormModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, icon, title, variant, itemType, onSubmit, submitLabel, submittingLabel, cancelLabel, loading: loadingProp, isSubmitDisabled, onCreated, fields, children, beforeFields, afterFields, ...props }: FormModalProps): react_jsx_runtime.JSX.Element;
+declare function FormModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, icon, title, description, message, variant, itemType, onSubmit, submitLabel, submittingLabel, cancelLabel, loading: loadingProp, isSubmitDisabled, onCreated, fields, children, beforeFields, afterFields, ...props }: FormModalProps): react_jsx_runtime.JSX.Element;
 
 interface TriggerModalProps extends Omit<React$1.ComponentProps<typeof Modal>, "children"> {
-    triggerLabel?: string;
+    triggerLabel?: string | React$1.ReactNode;
     trigger?: React$1.ReactNode;
     triggerProps?: React$1.ComponentProps<typeof Button>;
     stopPropagation?: boolean;
@@ -780,8 +786,9 @@ interface TriggerModalProps extends Omit<React$1.ComponentProps<typeof Modal>, "
     footer?: React$1.ReactNode;
     showCloseButton?: boolean;
     className?: string;
+    message?: string;
 }
-declare function TriggerModal({ open, onOpenChange, triggerLabel, trigger, triggerProps, stopPropagation, icon, title, description, children, footer, showCloseButton, className, ...props }: TriggerModalProps): react_jsx_runtime.JSX.Element;
+declare function TriggerModal({ open, onOpenChange, triggerLabel, trigger, triggerProps, stopPropagation, icon, title, description, children, footer, showCloseButton, className, message, ...props }: TriggerModalProps): react_jsx_runtime.JSX.Element;
 
 interface HistoryControlButtonsProps {
     canUndo?: boolean;

package/dist/index.d.ts

@@ -156,8 +156,10 @@ declare const textAsElements: readonly ["p", "span", "div", "code"];
 interface TextProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
     variant?: typeof textVariants[number];
     as?: typeof textAsElements[number];
+    leftIcon?: React$1.ReactNode;
+    rightIcon?: React$1.ReactNode;
 }
-declare function Text({ className, variant, as: Component, ...props }: TextProps): react_jsx_runtime.JSX.Element;
+declare function Text({ className, variant, as: Component, leftIcon, rightIcon, children, ...props }: TextProps): react_jsx_runtime.JSX.Element;
 
 declare function InputOTP({ className, containerClassName, ...props }: React$1.ComponentProps<typeof OTPInput> & {
     containerClassName?: string;
@@ -185,7 +187,7 @@ interface ImageProps extends React$1.ImgHTMLAttributes<HTMLImageElement> {
  * For Next.js optimization, use next/image directly in your Next.js app.
  * This component is library-compatible and works in any React environment.
  */
-declare function Image({ className, fallback, alt, src, width, height, loading, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+declare function Image({ className, fallback, alt, src, width, height, loading, ...props }: ImageProps): react_jsx_runtime.JSX.Element | null;
 
 interface UploadProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
     onUpload?: (files: FileList | null) => void;
@@ -595,8 +597,9 @@ interface StatusTextProps {
     variant?: "caption" | "body" | "heading" | "badge";
     formatText?: (text: string, count?: number, label?: string) => string;
     className?: string;
+    as?: "div" | "span" | "p";
 }
-declare function StatusText({ text, status, count, label, variant, formatText, className, }: StatusTextProps): react_jsx_runtime.JSX.Element;
+declare function StatusText({ text, status, count, label, variant, formatText, className, as, }: StatusTextProps): react_jsx_runtime.JSX.Element;
 
 interface StepperProps {
     steps: Array<{
@@ -680,13 +683,14 @@ declare function SearchInput({ placeholder, value: valueProp, onChange, onSearch
 interface ConfirmModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    triggerLabel?: string;
+    triggerLabel?: string | React$1.ReactNode;
     triggerProps?: React$1.ComponentProps<typeof Button>;
     stopPropagation?: boolean;
     icon?: React$1.ReactNode;
     text?: string;
     title: string;
     description?: string;
+    message?: string;
     onConfirm: () => void | Promise<void>;
     confirmLabel?: string;
     cancelLabel?: string;
@@ -695,7 +699,7 @@ interface ConfirmModalProps {
     error?: string;
     showModal?: boolean;
 }
-declare function ConfirmModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, stopPropagation, icon, text, title, description, onConfirm, confirmLabel, cancelLabel, variant, loading, error, showModal, ...props }: ConfirmModalProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, stopPropagation, icon, text, title, description, message, onConfirm, confirmLabel, cancelLabel, variant, loading, error, showModal, ...props }: ConfirmModalProps): react_jsx_runtime.JSX.Element;
 
 interface CopyButtonProps extends React$1.ComponentProps<typeof Button> {
     text?: string;
@@ -748,10 +752,12 @@ interface FormFieldConfig {
 interface FormModalProps {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
-    triggerLabel?: string;
+    triggerLabel?: string | React$1.ReactNode;
     triggerProps?: React$1.ComponentProps<typeof Button>;
     icon?: React$1.ReactNode;
     title: string;
+    description?: string;
+    message?: string;
     variant?: "create" | "edit";
     itemType?: string;
     onSubmit: (data: Record<string, any>) => void | Promise<void>;
@@ -766,10 +772,10 @@ interface FormModalProps {
     beforeFields?: React$1.ReactNode;
     afterFields?: React$1.ReactNode;
 }
-declare function FormModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, icon, title, variant, itemType, onSubmit, submitLabel, submittingLabel, cancelLabel, loading: loadingProp, isSubmitDisabled, onCreated, fields, children, beforeFields, afterFields, ...props }: FormModalProps): react_jsx_runtime.JSX.Element;
+declare function FormModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, icon, title, description, message, variant, itemType, onSubmit, submitLabel, submittingLabel, cancelLabel, loading: loadingProp, isSubmitDisabled, onCreated, fields, children, beforeFields, afterFields, ...props }: FormModalProps): react_jsx_runtime.JSX.Element;
 
 interface TriggerModalProps extends Omit<React$1.ComponentProps<typeof Modal>, "children"> {
-    triggerLabel?: string;
+    triggerLabel?: string | React$1.ReactNode;
     trigger?: React$1.ReactNode;
     triggerProps?: React$1.ComponentProps<typeof Button>;
     stopPropagation?: boolean;
@@ -780,8 +786,9 @@ interface TriggerModalProps extends Omit<React$1.ComponentProps<typeof Modal>, "
     footer?: React$1.ReactNode;
     showCloseButton?: boolean;
     className?: string;
+    message?: string;
 }
-declare function TriggerModal({ open, onOpenChange, triggerLabel, trigger, triggerProps, stopPropagation, icon, title, description, children, footer, showCloseButton, className, ...props }: TriggerModalProps): react_jsx_runtime.JSX.Element;
+declare function TriggerModal({ open, onOpenChange, triggerLabel, trigger, triggerProps, stopPropagation, icon, title, description, children, footer, showCloseButton, className, message, ...props }: TriggerModalProps): react_jsx_runtime.JSX.Element;
 
 interface HistoryControlButtonsProps {
     canUndo?: boolean;

package/dist/index.js

@@ -733,9 +733,13 @@ function Text({
   className,
   variant = "default",
   as: Component2 = "p",
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  const hasIcons = leftIcon || rightIcon;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Component2,
     {
       "data-slot": "text",
@@ -744,9 +748,15 @@ function Text({
         variant === "muted" && "text-muted-foreground",
         variant === "small" && "text-sm",
         variant === "large" && "text-lg",
+        hasIcons && "flex items-center gap-2",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: leftIcon }),
+        children,
+        rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: rightIcon })
+      ]
     }
   );
 }
@@ -841,6 +851,12 @@ function Image2({
   ...props
 }) {
   const [hasError, setHasError] = React15__namespace.useState(false);
+  if (!src || src.trim() === "") {
+    if (fallback) {
+      return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+    }
+    return null;
+  }
   if (hasError && fallback) {
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
   }
@@ -1081,10 +1097,10 @@ function CardAction({ className, ...props }) {
 }
 function CardContent({ className, size, ...props }) {
   const sizePadding = {
-    xs: "py-2.5 px-3",
-    sm: "py-3 px-4",
-    md: "py-4 px-6",
-    lg: "py-5 px-8"
+    xs: "py-1.5 px-2",
+    sm: "py-2 px-3",
+    md: "py-3 px-4",
+    lg: "py-4 px-6"
   };
   const effectiveSize = size || "md";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1111,10 +1127,10 @@ function CardFooter({
   ...props
 }) {
   const sizePadding = {
-    xs: "py-2.5 px-3 [.border-t]:pt-2.5",
-    sm: "py-3 px-4 [.border-t]:pt-3",
-    md: "py-4 px-6 [.border-t]:pt-4",
-    lg: "py-5 px-8 [.border-t]:pt-5"
+    xs: "gap-0.5 py-1.5 px-2",
+    sm: "gap-1 py-2 px-3",
+    md: "gap-2 py-3 px-4",
+    lg: "gap-3 py-4 px-6"
   };
   const effectiveSize = size || "md";
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -4219,7 +4235,8 @@ function StatusText({
   label,
   variant = "body",
   formatText,
-  className
+  className,
+  as = "div"
 }) {
   const displayText = React15__namespace.useMemo(() => {
     let baseText = "";
@@ -4264,7 +4281,7 @@ function StatusText({
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Text,
     {
-      as: "div",
+      as,
       "data-slot": "status-text",
       className: cn(
         "flex items-center gap-2",
@@ -4379,7 +4396,7 @@ function InlineEdit({
     setIsEditing(false);
   };
   if (isEditing) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "inline-edit", className: cn("inline-flex items-center", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "inline-edit", className: cn("inline-flex items-center m-1", className), children: /* @__PURE__ */ jsxRuntime.jsx(
       TextInput,
       {
         value,
@@ -4399,7 +4416,7 @@ function InlineEdit({
     {
       "data-slot": "inline-edit-display",
       className: cn(
-        "inline-flex items-center h-9 cursor-pointer hover:underline px-3 py-2",
+        "inline-flex items-center h-9 cursor-pointer hover:underline py-2 m-1",
         "border border-transparent rounded-md",
         className
       ),
@@ -4755,14 +4772,15 @@ function TriggerModal({
   footer,
   showCloseButton = true,
   className,
+  message,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(Modal, { open, onOpenChange, ...props, children: [
-    (triggerLabel || trigger) && /* @__PURE__ */ jsxRuntime.jsx(ModalTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...triggerProps, stopPropagation, children: [
+    (triggerLabel || trigger || icon) && /* @__PURE__ */ jsxRuntime.jsx(ModalTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxRuntime.jsxs(Button, { ...triggerProps, stopPropagation, children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2", children: icon }),
-      triggerLabel
+      triggerLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { children: triggerLabel })
     ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsxs(
       ModalContent,
       {
         "data-slot": "trigger-modal",
@@ -4774,7 +4792,10 @@ function TriggerModal({
           description && /* @__PURE__ */ jsxRuntime.jsx(ModalDescription, { children: description })
         ] }),
         footer: footer ? /* @__PURE__ */ jsxRuntime.jsx(ModalFooter, { children: footer }) : void 0,
-        children
+        children: [
+          message && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground mb-4", children: message }),
+          children
+        ]
       }
     )
   ] });
@@ -4789,6 +4810,7 @@ function ConfirmModal({
   text,
   title,
   description,
+  message,
   onConfirm,
   confirmLabel,
   cancelLabel = "Cancel",
@@ -4872,7 +4894,8 @@ function ConfirmModal({
       icon,
       stopPropagation,
       title,
-      description: description || text,
+      description,
+      message: message || text,
       footer,
       showCloseButton: false,
       className: "data-slot-confirm-modal",
@@ -4920,6 +4943,8 @@ function FormModal({
   triggerProps,
   icon,
   title,
+  description,
+  message,
   variant,
   itemType,
   onSubmit,
@@ -4965,6 +4990,25 @@ function FormModal({
       setFormData(initialData);
     }
   }, [fields]);
+  const fieldOptions = React15__namespace.useMemo(() => {
+    if (!fields) return {};
+    const optionsMap = {};
+    fields.forEach((field) => {
+      if (field.type === "select" && field.options) {
+        if (Array.isArray(field.options)) {
+          optionsMap[field.name] = field.options;
+        } else if (typeof field.options === "function") {
+          try {
+            optionsMap[field.name] = field.options(formData);
+          } catch (e) {
+            console.error(`Error resolving options for field ${field.name}:`, e);
+            optionsMap[field.name] = [];
+          }
+        }
+      }
+    });
+    return optionsMap;
+  }, [fields, formData]);
   const handleChange = (name, value, field) => {
     const newFormData = { ...formData, [name]: value };
     setFormData(newFormData);
@@ -5103,19 +5147,8 @@ function FormModal({
           error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", role: "alert", children: error })
         ] }, field.name);
       case "select":
-        const resolvedOptions = React15__namespace.useMemo(() => {
-          if (!field.options) return [];
-          if (Array.isArray(field.options)) return field.options;
-          if (typeof field.options === "function") {
-            try {
-              return field.options(formData);
-            } catch (e) {
-              console.error(`Error resolving options for field ${field.name}:`, e);
-              return [];
-            }
-          }
-          return [];
-        }, [field.options, formData]);
+        const resolvedOptions = fieldOptions[field.name] || [];
+        const optionsKey = resolvedOptions.map((o) => o.value).join(",");
         return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
           field.label && /* @__PURE__ */ jsxRuntime.jsxs(Label, { htmlFor: field.name, className: error && "text-destructive", children: [
             field.label,
@@ -5129,9 +5162,10 @@ function FormModal({
               onValueChange: (val) => handleChange(field.name, val, field),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(SelectTrigger, { id: field.name, className: error && "border-destructive", children: /* @__PURE__ */ jsxRuntime.jsx(SelectValue, { placeholder: resolvedPlaceholder || "Select..." }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: resolvedOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                /* @__PURE__ */ jsxRuntime.jsx(SelectContent, { children: resolvedOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { value: option.value, children: option.label }, option.value)) }, `select-content-${field.name}-${optionsKey}`)
               ]
-            }
+            },
+            `select-${field.name}-${optionsKey}`
           ),
           resolvedHelpText && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: resolvedHelpText }),
           error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-destructive", role: "alert", children: error })
@@ -5224,6 +5258,7 @@ function FormModal({
     /* @__PURE__ */ jsxRuntime.jsx(
       Button,
       {
+        className: "ml-2",
         type: "submit",
         disabled: loading || (typeof isSubmitDisabled === "function" ? isSubmitDisabled(formData) : isSubmitDisabled ?? false),
         children: loading ? getSubmitLabel() : getSubmitLabel()
@@ -5240,6 +5275,8 @@ function FormModal({
       icon,
       stopPropagation: true,
       title,
+      description,
+      message,
       showCloseButton: false,
       footer,
       className: "data-slot-form-modal",
@@ -5844,30 +5881,30 @@ function CollapsiblePanel({
   const getTriggerIcon = () => {
     if (direction === "horizontal") {
       if (position === "left") {
-        return isOpen ? lucideReact.ChevronRight : lucideReact.ChevronLeft;
-      } else {
         return isOpen ? lucideReact.ChevronLeft : lucideReact.ChevronRight;
+      } else {
+        return isOpen ? lucideReact.ChevronRight : lucideReact.ChevronLeft;
       }
     } else {
       if (position === "top") {
-        return isOpen ? lucideReact.ChevronDown : lucideReact.ChevronUp;
-      } else {
         return isOpen ? lucideReact.ChevronUp : lucideReact.ChevronDown;
+      } else {
+        return isOpen ? lucideReact.ChevronDown : lucideReact.ChevronUp;
       }
     }
   };
   const getTriggerPosition = () => {
     if (direction === "horizontal") {
       if (position === "left") {
-        return isOpen ? "absolute -left-3 top-1/2 -translate-y-1/2" : "absolute -left-6 top-1/2 -translate-y-1/2";
-      } else {
         return isOpen ? "absolute -right-3 top-1/2 -translate-y-1/2" : "absolute -right-6 top-1/2 -translate-y-1/2";
+      } else {
+        return isOpen ? "absolute -left-3 top-1/2 -translate-y-1/2" : "absolute -left-6 top-1/2 -translate-y-1/2";
       }
     } else {
       if (position === "top") {
-        return isOpen ? "absolute -top-3 left-1/2 -translate-x-1/2" : "absolute -top-6 left-1/2 -translate-x-1/2";
-      } else {
         return isOpen ? "absolute -bottom-3 left-1/2 -translate-x-1/2" : "absolute -bottom-6 left-1/2 -translate-x-1/2";
+      } else {
+        return isOpen ? "absolute -top-3 left-1/2 -translate-x-1/2" : "absolute -top-6 left-1/2 -translate-x-1/2";
       }
     }
   };

package/dist/index.mjs

@@ -8,7 +8,7 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon, CircleIcon, Loader2Icon, MinusIcon, XIcon, ChevronDownIcon, ChevronUpIcon, ChevronRight, MoreHorizontal, ChevronRightIcon, ChevronLeftIcon, MoreHorizontalIcon, SearchIcon, ArrowLeft, ArrowRight, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, AlertCircleIcon, XCircleIcon, CheckCircleIcon, CopyIcon, UndoIcon, RedoIcon, RotateCcwIcon, GripVerticalIcon, PanelLeftIcon, ChevronLeft, ChevronDown, ChevronUp } from 'lucide-react';
+import { CheckIcon, CircleIcon, Loader2Icon, MinusIcon, XIcon, ChevronDownIcon, ChevronUpIcon, ChevronRight, MoreHorizontal, ChevronRightIcon, ChevronLeftIcon, MoreHorizontalIcon, SearchIcon, ArrowLeft, ArrowRight, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon, AlertCircleIcon, XCircleIcon, CheckCircleIcon, CopyIcon, UndoIcon, RedoIcon, RotateCcwIcon, GripVerticalIcon, PanelLeftIcon, ChevronLeft, ChevronUp, ChevronDown } from 'lucide-react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -682,9 +682,13 @@ function Text({
   className,
   variant = "default",
   as: Component2 = "p",
+  leftIcon,
+  rightIcon,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  const hasIcons = leftIcon || rightIcon;
+  return /* @__PURE__ */ jsxs(
     Component2,
     {
       "data-slot": "text",
@@ -693,9 +697,15 @@ function Text({
         variant === "muted" && "text-muted-foreground",
         variant === "small" && "text-sm",
         variant === "large" && "text-lg",
+        hasIcons && "flex items-center gap-2",
         className
       ),
-      ...props
+      ...props,
+      children: [
+        leftIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leftIcon }),
+        children,
+        rightIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: rightIcon })
+      ]
     }
   );
 }
@@ -790,6 +800,12 @@ function Image2({
   ...props
 }) {
   const [hasError, setHasError] = React15.useState(false);
+  if (!src || src.trim() === "") {
+    if (fallback) {
+      return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+    }
+    return null;
+  }
   if (hasError && fallback) {
     return /* @__PURE__ */ jsx(Fragment, { children: fallback });
   }
@@ -1030,10 +1046,10 @@ function CardAction({ className, ...props }) {
 }
 function CardContent({ className, size, ...props }) {
   const sizePadding = {
-    xs: "py-2.5 px-3",
-    sm: "py-3 px-4",
-    md: "py-4 px-6",
-    lg: "py-5 px-8"
+    xs: "py-1.5 px-2",
+    sm: "py-2 px-3",
+    md: "py-3 px-4",
+    lg: "py-4 px-6"
   };
   const effectiveSize = size || "md";
   return /* @__PURE__ */ jsx(
@@ -1060,10 +1076,10 @@ function CardFooter({
   ...props
 }) {
   const sizePadding = {
-    xs: "py-2.5 px-3 [.border-t]:pt-2.5",
-    sm: "py-3 px-4 [.border-t]:pt-3",
-    md: "py-4 px-6 [.border-t]:pt-4",
-    lg: "py-5 px-8 [.border-t]:pt-5"
+    xs: "gap-0.5 py-1.5 px-2",
+    sm: "gap-1 py-2 px-3",
+    md: "gap-2 py-3 px-4",
+    lg: "gap-3 py-4 px-6"
   };
   const effectiveSize = size || "md";
   return /* @__PURE__ */ jsx(
@@ -4168,7 +4184,8 @@ function StatusText({
   label,
   variant = "body",
   formatText,
-  className
+  className,
+  as = "div"
 }) {
   const displayText = React15.useMemo(() => {
     let baseText = "";
@@ -4213,7 +4230,7 @@ function StatusText({
   return /* @__PURE__ */ jsxs(
     Text,
     {
-      as: "div",
+      as,
       "data-slot": "status-text",
       className: cn(
         "flex items-center gap-2",
@@ -4328,7 +4345,7 @@ function InlineEdit({
     setIsEditing(false);
   };
   if (isEditing) {
-    return /* @__PURE__ */ jsx("div", { "data-slot": "inline-edit", className: cn("inline-flex items-center", className), children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx("div", { "data-slot": "inline-edit", className: cn("inline-flex items-center m-1", className), children: /* @__PURE__ */ jsx(
       TextInput,
       {
         value,
@@ -4348,7 +4365,7 @@ function InlineEdit({
     {
       "data-slot": "inline-edit-display",
       className: cn(
-        "inline-flex items-center h-9 cursor-pointer hover:underline px-3 py-2",
+        "inline-flex items-center h-9 cursor-pointer hover:underline py-2 m-1",
         "border border-transparent rounded-md",
         className
       ),
@@ -4704,14 +4721,15 @@ function TriggerModal({
   footer,
   showCloseButton = true,
   className,
+  message,
   ...props
 }) {
   return /* @__PURE__ */ jsxs(Modal, { open, onOpenChange, ...props, children: [
-    (triggerLabel || trigger) && /* @__PURE__ */ jsx(ModalTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxs(Button, { ...triggerProps, stopPropagation, children: [
+    (triggerLabel || trigger || icon) && /* @__PURE__ */ jsx(ModalTrigger, { asChild: true, children: trigger || /* @__PURE__ */ jsxs(Button, { ...triggerProps, stopPropagation, children: [
       icon && /* @__PURE__ */ jsx("span", { className: "mr-2", children: icon }),
-      triggerLabel
+      triggerLabel && /* @__PURE__ */ jsx("span", { children: triggerLabel })
     ] }) }),
-    /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsxs(
       ModalContent,
       {
         "data-slot": "trigger-modal",
@@ -4723,7 +4741,10 @@ function TriggerModal({
           description && /* @__PURE__ */ jsx(ModalDescription, { children: description })
         ] }),
         footer: footer ? /* @__PURE__ */ jsx(ModalFooter, { children: footer }) : void 0,
-        children
+        children: [
+          message && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4", children: message }),
+          children
+        ]
       }
     )
   ] });
@@ -4738,6 +4759,7 @@ function ConfirmModal({
   text,
   title,
   description,
+  message,
   onConfirm,
   confirmLabel,
   cancelLabel = "Cancel",
@@ -4821,7 +4843,8 @@ function ConfirmModal({
       icon,
       stopPropagation,
       title,
-      description: description || text,
+      description,
+      message: message || text,
       footer,
       showCloseButton: false,
       className: "data-slot-confirm-modal",
@@ -4869,6 +4892,8 @@ function FormModal({
   triggerProps,
   icon,
   title,
+  description,
+  message,
   variant,
   itemType,
   onSubmit,
@@ -4914,6 +4939,25 @@ function FormModal({
       setFormData(initialData);
     }
   }, [fields]);
+  const fieldOptions = React15.useMemo(() => {
+    if (!fields) return {};
+    const optionsMap = {};
+    fields.forEach((field) => {
+      if (field.type === "select" && field.options) {
+        if (Array.isArray(field.options)) {
+          optionsMap[field.name] = field.options;
+        } else if (typeof field.options === "function") {
+          try {
+            optionsMap[field.name] = field.options(formData);
+          } catch (e) {
+            console.error(`Error resolving options for field ${field.name}:`, e);
+            optionsMap[field.name] = [];
+          }
+        }
+      }
+    });
+    return optionsMap;
+  }, [fields, formData]);
   const handleChange = (name, value, field) => {
     const newFormData = { ...formData, [name]: value };
     setFormData(newFormData);
@@ -5052,19 +5096,8 @@ function FormModal({
           error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: error })
         ] }, field.name);
       case "select":
-        const resolvedOptions = React15.useMemo(() => {
-          if (!field.options) return [];
-          if (Array.isArray(field.options)) return field.options;
-          if (typeof field.options === "function") {
-            try {
-              return field.options(formData);
-            } catch (e) {
-              console.error(`Error resolving options for field ${field.name}:`, e);
-              return [];
-            }
-          }
-          return [];
-        }, [field.options, formData]);
+        const resolvedOptions = fieldOptions[field.name] || [];
+        const optionsKey = resolvedOptions.map((o) => o.value).join(",");
         return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
           field.label && /* @__PURE__ */ jsxs(Label, { htmlFor: field.name, className: error && "text-destructive", children: [
             field.label,
@@ -5078,9 +5111,10 @@ function FormModal({
               onValueChange: (val) => handleChange(field.name, val, field),
               children: [
                 /* @__PURE__ */ jsx(SelectTrigger, { id: field.name, className: error && "border-destructive", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: resolvedPlaceholder || "Select..." }) }),
-                /* @__PURE__ */ jsx(SelectContent, { children: resolvedOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) })
+                /* @__PURE__ */ jsx(SelectContent, { children: resolvedOptions.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, children: option.label }, option.value)) }, `select-content-${field.name}-${optionsKey}`)
               ]
-            }
+            },
+            `select-${field.name}-${optionsKey}`
           ),
           resolvedHelpText && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: resolvedHelpText }),
           error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", role: "alert", children: error })
@@ -5173,6 +5207,7 @@ function FormModal({
     /* @__PURE__ */ jsx(
       Button,
       {
+        className: "ml-2",
         type: "submit",
         disabled: loading || (typeof isSubmitDisabled === "function" ? isSubmitDisabled(formData) : isSubmitDisabled ?? false),
         children: loading ? getSubmitLabel() : getSubmitLabel()
@@ -5189,6 +5224,8 @@ function FormModal({
       icon,
       stopPropagation: true,
       title,
+      description,
+      message,
       showCloseButton: false,
       footer,
       className: "data-slot-form-modal",
@@ -5793,30 +5830,30 @@ function CollapsiblePanel({
   const getTriggerIcon = () => {
     if (direction === "horizontal") {
       if (position === "left") {
-        return isOpen ? ChevronRight : ChevronLeft;
-      } else {
         return isOpen ? ChevronLeft : ChevronRight;
+      } else {
+        return isOpen ? ChevronRight : ChevronLeft;
       }
     } else {
       if (position === "top") {
-        return isOpen ? ChevronDown : ChevronUp;
-      } else {
         return isOpen ? ChevronUp : ChevronDown;
+      } else {
+        return isOpen ? ChevronDown : ChevronUp;
       }
     }
   };
   const getTriggerPosition = () => {
     if (direction === "horizontal") {
       if (position === "left") {
-        return isOpen ? "absolute -left-3 top-1/2 -translate-y-1/2" : "absolute -left-6 top-1/2 -translate-y-1/2";
-      } else {
         return isOpen ? "absolute -right-3 top-1/2 -translate-y-1/2" : "absolute -right-6 top-1/2 -translate-y-1/2";
+      } else {
+        return isOpen ? "absolute -left-3 top-1/2 -translate-y-1/2" : "absolute -left-6 top-1/2 -translate-y-1/2";
       }
     } else {
       if (position === "top") {
-        return isOpen ? "absolute -top-3 left-1/2 -translate-x-1/2" : "absolute -top-6 left-1/2 -translate-x-1/2";
-      } else {
         return isOpen ? "absolute -bottom-3 left-1/2 -translate-x-1/2" : "absolute -bottom-6 left-1/2 -translate-x-1/2";
+      } else {
+        return isOpen ? "absolute -top-3 left-1/2 -translate-x-1/2" : "absolute -top-6 left-1/2 -translate-x-1/2";
       }
     }
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shru-design-system",
-  "version": "0.5.1",
+  "version": "0.5.4",
   "description": "A React component library with atoms and molecules built on Radix UI and Tailwind CSS",
   "main": "dist/index.js",
   "module": "dist/index.mjs",