shru-design-system 0.5.3 → 0.5.4

package/dist/index.d.mts

@@ -683,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;
@@ -698,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;
@@ -751,11 +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>;
@@ -770,10 +772,10 @@ interface FormModalProps {
     beforeFields?: React$1.ReactNode;
     afterFields?: React$1.ReactNode;
 }
-declare function FormModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, icon, title, description, 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;
@@ -784,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

@@ -683,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;
@@ -698,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;
@@ -751,11 +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>;
@@ -770,10 +772,10 @@ interface FormModalProps {
     beforeFields?: React$1.ReactNode;
     afterFields?: React$1.ReactNode;
 }
-declare function FormModal({ open: openProp, onOpenChange, triggerLabel, triggerProps, icon, title, description, 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;
@@ -784,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

@@ -1097,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(
@@ -1127,10 +1127,10 @@ function CardFooter({
   ...props
 }) {
   const sizePadding = {
-    xs: "gap-0.5",
-    sm: "gap-1",
-    md: "gap-2",
-    lg: "gap-3"
+    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(
@@ -4396,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,
@@ -4416,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
       ),
@@ -4772,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",
@@ -4791,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
+        ]
       }
     )
   ] });
@@ -4806,6 +4810,7 @@ function ConfirmModal({
   text,
   title,
   description,
+  message,
   onConfirm,
   confirmLabel,
   cancelLabel = "Cancel",
@@ -4889,7 +4894,8 @@ function ConfirmModal({
       icon,
       stopPropagation,
       title,
-      description: description || text,
+      description,
+      message: message || text,
       footer,
       showCloseButton: false,
       className: "data-slot-confirm-modal",
@@ -4938,6 +4944,7 @@ function FormModal({
   icon,
   title,
   description,
+  message,
   variant,
   itemType,
   onSubmit,
@@ -5269,6 +5276,7 @@ function FormModal({
       stopPropagation: true,
       title,
       description,
+      message,
       showCloseButton: false,
       footer,
       className: "data-slot-form-modal",
@@ -5888,15 +5896,15 @@ function CollapsiblePanel({
   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";
+        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 -right-3 top-1/2 -translate-y-1/2" : "absolute -left-6 top-1/2 -translate-y-1/2";
+        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";
+        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 -bottom-3 left-1/2 -translate-x-1/2" : "absolute -top-6 left-1/2 -translate-x-1/2";
+        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

@@ -1046,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(
@@ -1076,10 +1076,10 @@ function CardFooter({
   ...props
 }) {
   const sizePadding = {
-    xs: "gap-0.5",
-    sm: "gap-1",
-    md: "gap-2",
-    lg: "gap-3"
+    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(
@@ -4345,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,
@@ -4365,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
       ),
@@ -4721,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",
@@ -4740,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
+        ]
       }
     )
   ] });
@@ -4755,6 +4759,7 @@ function ConfirmModal({
   text,
   title,
   description,
+  message,
   onConfirm,
   confirmLabel,
   cancelLabel = "Cancel",
@@ -4838,7 +4843,8 @@ function ConfirmModal({
       icon,
       stopPropagation,
       title,
-      description: description || text,
+      description,
+      message: message || text,
       footer,
       showCloseButton: false,
       className: "data-slot-confirm-modal",
@@ -4887,6 +4893,7 @@ function FormModal({
   icon,
   title,
   description,
+  message,
   variant,
   itemType,
   onSubmit,
@@ -5218,6 +5225,7 @@ function FormModal({
       stopPropagation: true,
       title,
       description,
+      message,
       showCloseButton: false,
       footer,
       className: "data-slot-form-modal",
@@ -5837,15 +5845,15 @@ function CollapsiblePanel({
   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";
+        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 -right-3 top-1/2 -translate-y-1/2" : "absolute -left-6 top-1/2 -translate-y-1/2";
+        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";
+        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 -bottom-3 left-1/2 -translate-x-1/2" : "absolute -top-6 left-1/2 -translate-x-1/2";
+        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.3",
+  "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",