@mesob/ui 0.5.6 → 0.5.8

package/dist/components.d.ts

@@ -374,11 +374,13 @@ type EntityFormActionsProps = {
     isSubmitting?: boolean;
     isDeleting?: boolean;
     disabled?: boolean;
+    /** When set, overrides `disabled` for the delete trigger only. */
+    deleteDisabled?: boolean;
     submitLabel?: string;
     deleteLabel?: string;
     itemName?: string;
 };
-declare function EntityFormActions({ mode, onSubmit, onReset, onDelete, onCancel, isSubmitting, isDeleting, disabled, submitLabel, deleteLabel, itemName, }: EntityFormActionsProps): react_jsx_runtime.JSX.Element;
+declare function EntityFormActions({ mode, onSubmit, onReset, onDelete, onCancel, isSubmitting, isDeleting, disabled, deleteDisabled, submitLabel, deleteLabel, itemName, }: EntityFormActionsProps): react_jsx_runtime.JSX.Element;
 
 type EntityHeaderProps = {
     title: ReactNode;
@@ -2336,7 +2338,7 @@ type FileInputProps = Omit<React$1.ComponentProps<'input'>, 'type'> & Omit<Input
     editImageOnSelect?: boolean;
     imageOutputScale?: number;
 };
-declare function FileInput({ className, onFilesChange, clearable, multiple, files: filesProp, defaultFiles, previewItems, leftSection, placeholder, cropAspect, editImageOnSelect, imageOutputScale, label, description, error, required, withAsterisk, inputWrapperOrder, labelProps, descriptionProps, errorProps, inputContainer, disabled, ...props }: FileInputProps): react_jsx_runtime.JSX.Element;
+declare function FileInput({ className, onFilesChange, clearable, multiple, files: filesProp, defaultFiles, previewItems, leftSection, placeholder, cropAspect, editImageOnSelect, imageOutputScale, label, description, error, required, withAsterisk, inputWrapperOrder, labelProps, descriptionProps, errorProps, inputContainer, disabled, id: inputIdProp, ...props }: FileInputProps): react_jsx_runtime.JSX.Element;
 
 type FlexProps = React$1.ComponentProps<'div'> & {
     gap?: ComponentSize | number;

package/dist/components.js

@@ -3040,17 +3040,15 @@ function Card({
     xl: "rounded-[var(--radius-xl)]",
     full: "rounded-full"
   };
-  const hasBelowHeader = footer != null || children != null;
-  const hasBodyAboveFooter = children != null;
-  const sectioned = header != null || footer != null || title != null || actions != null;
+  const hasStructure = header != null || footer != null || title != null || actions != null;
   return /* @__PURE__ */ jsxs15(
     "div",
     {
       "data-slot": "card",
-      "data-sectioned": sectioned ? "" : void 0,
+      "data-sectioned": hasStructure ? "" : void 0,
       "data-size": size,
       className: cn(
-        "cn-card group/card flex flex-col",
+        "cn-card group/card",
         variant === "outline" && "cn-card-variant-outline",
         variant === "filled" && "cn-card-variant-filled",
         withBorder && "cn-card-with-border",
@@ -3060,15 +3058,9 @@ function Card({
       ),
       ...props,
       children: [
-        cardHeaderFromProps(hasBelowHeader, header, title, actions),
-        bodySlot(children, sectioned, padding !== void 0),
-        footer != null ? /* @__PURE__ */ jsx22(
-          CardFooter,
-          {
-            className: cn(hasBodyAboveFooter && "border-border/60 border-t"),
-            children: footer
-          }
-        ) : null
+        cardHeaderFromProps(header, title, actions),
+        bodySlot(children, hasStructure),
+        footer != null ? /* @__PURE__ */ jsx22(CardFooter, { children: footer }) : null
       ]
     }
   );
@@ -3080,26 +3072,18 @@ function isSingleCardContent(children) {
   const only = Children.only(children);
   return isValidElement2(only) && only.props["data-slot"] === "card-content";
 }
-function bodySlot(children, sectioned, hasRootPadding) {
-  if (children == null) {
-    return children;
-  }
-  if (isSingleCardContent(children)) {
-    return children;
-  }
-  const wrapBody = sectioned || !hasRootPadding;
-  if (!wrapBody) {
+function bodySlot(children, hasStructure) {
+  if (children == null || !hasStructure || isSingleCardContent(children)) {
     return children;
   }
   return /* @__PURE__ */ jsx22(CardContent, { children });
 }
-function cardHeaderFromProps(hasBelowHeader, header, title, actions) {
-  const divider = hasBelowHeader && "border-border/60 border-b";
+function cardHeaderFromProps(header, title, actions) {
   if (header != null) {
-    return /* @__PURE__ */ jsx22(CardHeader, { className: cn(divider), children: header });
+    return /* @__PURE__ */ jsx22(CardHeader, { children: header });
   }
   if (title != null || actions != null) {
-    return /* @__PURE__ */ jsxs15(CardHeader, { className: cn(divider, "items-center"), children: [
+    return /* @__PURE__ */ jsxs15(CardHeader, { className: "items-center", children: [
       title != null ? /* @__PURE__ */ jsx22(CardTitle, { children: title }) : null,
       actions != null ? /* @__PURE__ */ jsx22(CardAction, { children: actions }) : null
     ] });
@@ -3112,7 +3096,7 @@ function CardHeader({ className, ...props }) {
     {
       "data-slot": "card-header",
       className: cn(
-        "cn-card-header group/card-header @container/card-header grid auto-rows-min has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] has-data-[slot=card-description]:[&>[data-slot=card-action]]:row-span-2",
+        "cn-card-header group/card-header @container/card-header grid auto-rows-min has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] has-data-[slot=card-description]:[&>[data-slot=card-action]]:row-span-2 [&:not(:last-child)]:border-border/60 [&:not(:last-child)]:border-b",
         className
       ),
       ...props
@@ -3167,7 +3151,10 @@ function CardFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "card-footer",
-      className: cn("cn-card-footer flex items-center", className),
+      className: cn(
+        "cn-card-footer flex items-center [&:not(:first-child)]:border-border/60 [&:not(:first-child)]:border-t",
+        className
+      ),
       ...props
     }
   );
@@ -5032,10 +5019,12 @@ function EntityFormActions({
   isSubmitting = false,
   isDeleting = false,
   disabled = false,
+  deleteDisabled,
   submitLabel,
   deleteLabel = "Delete",
   itemName = "item"
 }) {
+  const deleteTriggerDisabled = deleteDisabled ?? disabled;
   const defaultSubmitLabel = mode === "new" ? "Create" : "Update";
   const label = submitLabel || defaultSubmitLabel;
   return /* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
@@ -5071,7 +5060,7 @@ function EntityFormActions({
             Button,
             {
               variant: "destructive",
-              disabled,
+              disabled: deleteTriggerDisabled,
               loading: isDeleting,
               className: "cursor-pointer",
               leftIcon: /* @__PURE__ */ jsx44(IconTrash3, { className: "size-4" })
@@ -19590,10 +19579,12 @@ function FileInput({
   errorProps,
   inputContainer,
   disabled,
+  id: inputIdProp,
   ...props
 }) {
   const inputRef = useRef20(null);
-  const inputId = useId7();
+  const generatedInputId = useId7();
+  const inputId = inputIdProp ?? generatedInputId;
   const [internalFiles, setInternalFiles] = useState45(defaultFiles);
   const [pendingCropFile, setPendingCropFile] = useState45(null);
   const [cropOpen, setCropOpen] = useState45(false);
@@ -19645,7 +19636,14 @@ function FileInput({
   const hasWrapper = label || description || error || required || withAsterisk;
   const RootIcon = singleItem ? getFileIcon2(singleItem.type) : IconPaperclip;
   let metaContent = null;
-  if (items.length > 1) {
+  if (multiple && items.length > 0) {
+    metaContent = /* @__PURE__ */ jsxs95("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: [
+      items.length,
+      " file",
+      items.length === 1 ? "" : "s",
+      " selected"
+    ] });
+  } else if (!multiple && items.length > 1) {
     metaContent = /* @__PURE__ */ jsxs95("div", { "data-slot": "file-input-meta", className: "cn-file-input-meta", children: [
       items.length,
       " files selected"
@@ -19679,13 +19677,11 @@ function FileInput({
             }
           ),
           /* @__PURE__ */ jsx155(
-            "button",
+            "label",
             {
-              type: "button",
+              htmlFor: inputId,
               "data-slot": "file-input-root",
               className: "cn-file-input-root",
-              onClick: () => inputRef.current?.click(),
-              disabled,
               children: singleItem ? /* @__PURE__ */ jsxs95(Fragment29, { children: [
                 /* @__PURE__ */ jsx155(
                   "div",
@@ -19725,6 +19721,7 @@ function FileInput({
                           variant: "ghost",
                           size: "icon-sm",
                           onClick: (event) => {
+                            event.preventDefault();
                             event.stopPropagation();
                             handleEdit();
                           },
@@ -19740,6 +19737,7 @@ function FileInput({
                           variant: "ghost",
                           size: "icon-sm",
                           onClick: (event) => {
+                            event.preventDefault();
                             event.stopPropagation();
                             handleClear();
                           },
@@ -19782,7 +19780,7 @@ function FileInput({
               ] })
             }
           ),
-          !singleItem && items.length > 1 ? /* @__PURE__ */ jsx155("div", { "data-slot": "file-input-list", className: "cn-file-input-list", children: items.map((item) => {
+          !singleItem && (multiple ? items.length > 0 : items.length > 1) ? /* @__PURE__ */ jsx155("div", { "data-slot": "file-input-list", className: "cn-file-input-list", children: items.map((item) => {
             const ItemIcon = getFileIcon2(item.type);
             return /* @__PURE__ */ jsxs95(
               "div",