@dimaan/ui 0.0.22 → 0.0.24

package/README.md

@@ -4,6 +4,7 @@ Shared React UI component library for Diman company projects.
 
 Built with **React 19**, **TypeScript**, **Tailwind CSS v4**, and a CSS-first design token system. Distributed as dual ESM/CJS with full type definitions, intended for Vite-based dashboard apps.
 
+
 ## Documentation
 
 - **[USAGE.md](USAGE.md)** — full consumer guide: install, Tailwind setup, framework-specific examples (Next.js / Vite / Remix), theming, and pitfalls.

package/dist/index.cjs

@@ -136,7 +136,7 @@ var buttonSizeClass = {
   icon: "h-9 w-9 shrink-0 rounded-md p-0",
   "icon-sm": "h-8 w-8 shrink-0 rounded-md p-0"
 };
-var buttonBaseClass = "group/button relative inline-flex items-center justify-center font-medium select-none whitespace-nowrap outline-none transition-[background-color,color,box-shadow,opacity] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0";
+var buttonBaseClass = "group/button relative inline-flex items-center justify-center font-medium select-none whitespace-nowrap outline-none transition-[background-color,color,box-shadow,opacity,transform] active:scale-[0.98] focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 motion-reduce:transition-none motion-reduce:active:scale-100 [&_svg]:pointer-events-none [&_svg]:shrink-0";
 var Button = react.forwardRef(function Button2({
   variant = "primary",
   size = "md",
@@ -299,7 +299,9 @@ function DashboardContent({ className, children, ...props }) {
     "main",
     {
       className: cn(
-        "flex min-h-[calc(100vh-var(--header-height))] flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8",
+        // `min-w-0` keeps wide children (Table, code blocks) scrolling within
+        // this column instead of widening the page past 100%.
+        "flex min-h-[calc(100vh-var(--header-height))] min-w-0 flex-1 flex-col gap-6 p-4 sm:p-6 lg:p-8",
         className
       ),
       ...props,
@@ -365,7 +367,10 @@ function DashboardMain({ className, children, ...props }) {
     "div",
     {
       className: cn(
-        "flex min-h-screen flex-1 flex-col transition-[margin] duration-200 ease-out",
+        // `min-w-0` lets this flex column shrink below its content's intrinsic
+        // width so wide children (e.g. a Table) scroll internally instead of
+        // stretching the whole layout past 100%.
+        "flex min-h-screen min-w-0 flex-1 flex-col transition-[margin] duration-200 ease-out",
         // On desktop, push the main column past the fixed sidebar using logical margin.
         collapsed ? "lg:ms-[var(--sidebar-width-collapsed)]" : "lg:ms-[var(--sidebar-width)]",
         className
@@ -1725,19 +1730,231 @@ function mergeRefs(...refs) {
   };
 }
 
+// src/components/file-upload/fileUploadVariants.ts
+var fileUploadBaseClass = "flex w-full min-w-0 flex-col gap-2";
+var fileUploadDropzoneClass = "flex cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed border-input bg-muted/40 px-6 py-8 text-center transition-colors hover:border-ring peer-focus-visible:border-ring peer-focus-visible:ring-2 peer-focus-visible:ring-ring/40 data-[drag-active=true]:border-ring data-[drag-active=true]:bg-accent data-[invalid=true]:border-destructive data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50 data-[disabled=true]:hover:border-input";
+var fileUploadIconClass = "size-8 text-muted-foreground";
+var fileUploadPromptClass = "text-sm text-foreground";
+var fileUploadHintClass = "text-xs text-muted-foreground";
+var fileUploadFileRowClass = "flex items-center justify-between gap-2 rounded-md border border-border bg-card px-3 py-2";
+var fileUploadFileNameClass = "truncate text-sm font-medium text-foreground";
+var fileUploadFileSizeClass = "text-xs text-muted-foreground";
+var fileUploadRemoveClass = "inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:pointer-events-none disabled:opacity-50";
+var DEFAULT_MAX_SIZE_MB = 5;
+var DEFAULT_LABELS_LTR2 = {
+  prompt: "Drag & drop a file or click to browse",
+  remove: "Remove"
+};
+var DEFAULT_LABELS_RTL2 = {
+  prompt: "\u0627\u0633\u062D\u0628 \u0648\u0623\u0641\u0644\u062A \u0645\u0644\u0641\u064B\u0627 \u0623\u0648 \u0627\u0636\u063A\u0637 \u0644\u0644\u0627\u062E\u062A\u064A\u0627\u0631",
+  remove: "\u0625\u0632\u0627\u0644\u0629"
+};
+function normalizeFiles(value) {
+  if (Array.isArray(value)) return value.filter((f) => f instanceof File);
+  return value instanceof File ? [value] : [];
+}
+function fileKey(file) {
+  return `${file.name}:${file.size}:${file.lastModified}`;
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  const kb = bytes / 1024;
+  if (kb < 1024) return `${kb.toFixed(1)} KB`;
+  return `${(kb / 1024).toFixed(1)} MB`;
+}
+function matchesAccept(file, accept) {
+  if (!accept) return true;
+  const tokens = accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean);
+  if (tokens.length === 0 || tokens.includes("*") || tokens.includes("*/*")) return true;
+  const name = file.name.toLowerCase();
+  const type = file.type.toLowerCase();
+  return tokens.some((token) => {
+    if (token.startsWith(".")) return name.endsWith(token);
+    if (token.endsWith("/*")) return type.startsWith(token.slice(0, -1));
+    return type === token;
+  });
+}
+var FileUploadImpl = react.forwardRef(
+  function FileUpload(props, ref) {
+    const {
+      multiple = false,
+      accept,
+      maxSize = DEFAULT_MAX_SIZE_MB,
+      disabled = false,
+      required,
+      name,
+      id,
+      onError,
+      onBlur,
+      labels: labelsProp,
+      className,
+      value,
+      defaultValue,
+      onValueChange,
+      onChange,
+      "aria-invalid": ariaInvalid,
+      "aria-describedby": ariaDescribedBy,
+      "aria-label": ariaLabel
+    } = props;
+    const dir = useDirection();
+    const generatedId = react.useId();
+    const inputId = id ?? generatedId;
+    const [dragActive, setDragActive] = react.useState(false);
+    const baseLabels = dir === "rtl" ? DEFAULT_LABELS_RTL2 : DEFAULT_LABELS_LTR2;
+    const prompt = labelsProp?.prompt ?? baseLabels.prompt;
+    const removeLabel = labelsProp?.remove ?? baseLabels.remove;
+    const hint = labelsProp?.hint ?? (dir === "rtl" ? `\u0627\u0644\u062D\u062F \u0627\u0644\u0623\u0642\u0635\u0649 ${maxSize} \u0645\u064A\u062C\u0627\u0628\u0627\u064A\u062A` : `Max ${maxSize} MB`);
+    const isControlled = value !== void 0;
+    const [internal, setInternal] = react.useState(() => normalizeFiles(defaultValue));
+    const files = isControlled ? normalizeFiles(value) : internal;
+    const invalid = ariaInvalid === true || ariaInvalid === "true";
+    const emit = (next) => {
+      if (!isControlled) setInternal(next);
+      onValueChange?.(multiple ? next : next[0] ?? null);
+      onChange?.(multiple ? next : next[0] ?? null);
+    };
+    const tooLargeMessage = (file) => dir === "rtl" ? `${file.name} \u0623\u0643\u0628\u0631 \u0645\u0646 ${maxSize} \u0645\u064A\u062C\u0627\u0628\u0627\u064A\u062A` : `${file.name} is larger than ${maxSize} MB`;
+    const wrongTypeMessage = (file) => dir === "rtl" ? `${file.name} \u0644\u064A\u0633 \u0646\u0648\u0639 \u0645\u0644\u0641 \u0645\u0642\u0628\u0648\u0644` : `${file.name} is not an accepted file type`;
+    const addFiles = (incoming) => {
+      if (disabled) return;
+      const accepted = [];
+      for (const file of Array.from(incoming)) {
+        if (!matchesAccept(file, accept)) {
+          onError?.({ code: "file-type-rejected", message: wrongTypeMessage(file), file });
+          continue;
+        }
+        if (maxSize && file.size > maxSize * 1024 * 1024) {
+          onError?.({ code: "file-too-large", message: tooLargeMessage(file), file });
+          continue;
+        }
+        accepted.push(file);
+      }
+      if (accepted.length === 0) return;
+      if (!multiple) {
+        const [first] = accepted;
+        if (first) emit([first]);
+        return;
+      }
+      const byKey = new Map(files.map((f) => [fileKey(f), f]));
+      for (const f of accepted) byKey.set(fileKey(f), f);
+      emit([...byKey.values()]);
+    };
+    const handleInputChange = (event) => {
+      if (event.target.files) addFiles(event.target.files);
+      event.target.value = "";
+    };
+    const handleDrag = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      if (disabled) return;
+      if (event.type === "dragenter" || event.type === "dragover") setDragActive(true);
+      else if (event.type === "dragleave") setDragActive(false);
+    };
+    const handleDrop = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      setDragActive(false);
+      if (!disabled && event.dataTransfer.files) addFiles(event.dataTransfer.files);
+    };
+    const remove = (file) => emit(files.filter((f) => fileKey(f) !== fileKey(file)));
+    const showDropzone = multiple || files.length === 0;
+    return (
+      // biome-ignore lint/a11y/noStaticElementInteractions: drag-and-drop is a wrapper affordance; keyboard/click access is the inner <label> + focusable <input>.
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref,
+          "data-slot": "file-upload",
+          className: cn(fileUploadBaseClass, className),
+          onDragEnter: handleDrag,
+          onDragOver: handleDrag,
+          onDragLeave: handleDrag,
+          onDrop: handleDrop,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                id: inputId,
+                type: "file",
+                accept,
+                multiple,
+                name,
+                required,
+                disabled,
+                onChange: handleInputChange,
+                onBlur,
+                "aria-invalid": ariaInvalid,
+                "aria-describedby": ariaDescribedBy,
+                "aria-label": ariaLabel,
+                className: "peer sr-only"
+              }
+            ),
+            showDropzone ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "label",
+              {
+                htmlFor: inputId,
+                "data-slot": "file-upload-dropzone",
+                "data-drag-active": dragActive ? "true" : void 0,
+                "data-invalid": invalid ? "true" : void 0,
+                "data-disabled": disabled ? "true" : void 0,
+                className: fileUploadDropzoneClass,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Upload, { "aria-hidden": "true", className: fileUploadIconClass }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: fileUploadPromptClass, children: prompt }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: fileUploadHintClass, children: hint })
+                ]
+              }
+            ) : null,
+            files.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2", children: files.map((file) => /* @__PURE__ */ jsxRuntime.jsxs(
+              "li",
+              {
+                "data-slot": "file-upload-file",
+                className: fileUploadFileRowClass,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(lucideReact.File, { "aria-hidden": "true", className: "size-5 shrink-0 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0", children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: fileUploadFileNameClass, children: file.name }),
+                      /* @__PURE__ */ jsxRuntime.jsx("p", { className: fileUploadFileSizeClass, children: formatBytes(file.size) })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      disabled,
+                      "aria-label": `${removeLabel}: ${file.name}`,
+                      "data-slot": "file-upload-remove",
+                      className: fileUploadRemoveClass,
+                      onClick: () => remove(file),
+                      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": "true", className: "size-4" })
+                    }
+                  )
+                ]
+              },
+              fileKey(file)
+            )) }) : null
+          ]
+        }
+      )
+    );
+  }
+);
+var FileUpload2 = FileUploadImpl;
+
 // src/components/form-page/formPageVariants.ts
 var formPageBaseClass = "flex w-full flex-col gap-6";
 var formPageBodyClass = "flex-1";
 var formPageActionsBarClass = "sticky bottom-0 -mx-6 -mb-6 mt-6 flex items-center justify-end gap-2 border-t border-border bg-background/95 px-6 py-3 backdrop-blur supports-[backdrop-filter]:bg-background/80";
 var formPageSkeletonRowClass = "h-10 w-full animate-pulse rounded-md bg-muted";
 var DEFAULT_SKELETON_ROW_COUNT2 = 6;
-var DEFAULT_LABELS_LTR2 = {
+var DEFAULT_LABELS_LTR3 = {
   back: "Back",
   cancel: "Cancel",
   save: "Save",
   saving: "Saving\u2026"
 };
-var DEFAULT_LABELS_RTL2 = {
+var DEFAULT_LABELS_RTL3 = {
   back: "\u0631\u062C\u0648\u0639",
   cancel: "\u0625\u0644\u063A\u0627\u0621",
   save: "\u062D\u0641\u0638",
@@ -1764,7 +1981,7 @@ function FormPage({
   const dir = useDirection();
   const formContext = reactHookForm.useFormContext();
   const submitting = isSubmitting ?? formContext?.formState?.isSubmitting ?? false;
-  const defaults = dir === "rtl" ? DEFAULT_LABELS_RTL2 : DEFAULT_LABELS_LTR2;
+  const defaults = dir === "rtl" ? DEFAULT_LABELS_RTL3 : DEFAULT_LABELS_LTR3;
   const labels = { ...defaults, ...labelsProp };
   const goBack = () => navigate(-1);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "form-page", className: cn(formPageBaseClass, className), children: [
@@ -2182,7 +2399,7 @@ function Table(props) {
   const sizeClasses = tableSizeClass[size];
   const showToolbar = enableRowSelection && bulkActions !== void 0 && selected.size > 0;
   const skeletonCount = loadingRowCount ?? pageSize;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full flex-col gap-3", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex w-full min-w-0 flex-col gap-3", className), children: [
     showToolbar && /* @__PURE__ */ jsxRuntime.jsx(
       Toolbar,
       {
@@ -2215,7 +2432,9 @@ function Table(props) {
                 "thead",
                 {
                   className: cn(
-                    "bg-muted/40 text-muted-foreground",
+                    // Opaque (not bg-muted/40) so a sticky header fully hides the rows
+                    // scrolling underneath it.
+                    "bg-muted text-muted-foreground",
                     maxHeight !== void 0 && "sticky top-0 z-10"
                   ),
                   children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
@@ -2417,11 +2636,11 @@ var multiSelectSearchRowClass = "border-b border-border p-1";
 var multiSelectListClass = "max-h-60 overflow-y-auto overflow-x-hidden p-1";
 var multiSelectOptionClass = "flex w-full cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent hover:text-accent-foreground has-[:focus-visible]:bg-accent has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50";
 var multiSelectEmptyClass = "px-2 py-6 text-center text-sm text-muted-foreground";
-var DEFAULT_LABELS_LTR3 = {
+var DEFAULT_LABELS_LTR4 = {
   search: "Search\u2026",
   empty: "No results"
 };
-var DEFAULT_LABELS_RTL3 = {
+var DEFAULT_LABELS_RTL4 = {
   search: "\u0628\u062D\u062B\u2026",
   empty: "\u0644\u0627 \u0646\u062A\u0627\u0626\u062C"
 };
@@ -2452,7 +2671,7 @@ var MultiSelect = react.forwardRef(function MultiSelect2({
   "aria-label": ariaLabel
 }, ref) {
   const dir = useDirection();
-  const labels = { ...dir === "rtl" ? DEFAULT_LABELS_RTL3 : DEFAULT_LABELS_LTR3, ...labelsProp };
+  const labels = { ...dir === "rtl" ? DEFAULT_LABELS_RTL4 : DEFAULT_LABELS_LTR4, ...labelsProp };
   const generatedId = react.useId();
   const triggerId = id ?? generatedId;
   const isControlled = value !== void 0;
@@ -3054,6 +3273,57 @@ var RadioGroupItem = react.forwardRef(function RadioGroupItem2({ className, radi
   );
 });
 
+// src/components/row-actions/rowActionsVariants.ts
+var rowActionsBaseClass = "inline-flex items-center gap-1";
+var rowActionsDestructiveClass = "text-destructive hover:bg-destructive/10 hover:text-destructive focus-visible:ring-destructive/40";
+var PRESETS = {
+  view: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, {}), label: "View", destructive: false },
+  edit: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Pencil, {}), label: "Edit", destructive: false },
+  delete: { icon: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, {}), label: "Delete", destructive: true }
+};
+function isPreset(action) {
+  return "kind" in action;
+}
+function resolveAction(action) {
+  if (isPreset(action)) {
+    const preset = PRESETS[action.kind];
+    return {
+      icon: preset.icon,
+      label: action.label ?? preset.label,
+      destructive: preset.destructive,
+      onClick: action.onClick,
+      disabled: action.disabled ?? false
+    };
+  }
+  return {
+    icon: action.icon,
+    label: action.label,
+    destructive: action.variant === "destructive",
+    onClick: action.onClick,
+    disabled: action.disabled ?? false
+  };
+}
+function RowActions({ actions, size = "icon-sm", className }) {
+  if (actions.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(rowActionsBaseClass, className), children: actions.map((action, index) => {
+    const resolved = resolveAction(action);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size,
+        "aria-label": resolved.label,
+        disabled: resolved.disabled,
+        onClick: resolved.onClick,
+        className: resolved.destructive ? rowActionsDestructiveClass : void 0,
+        children: resolved.icon
+      },
+      index
+    );
+  }) });
+}
+
 // src/components/switch/switchVariants.ts
 var switchTrackClass = {
   sm: "h-4 w-7",
@@ -3338,6 +3608,7 @@ exports.DropdownMenuShortcut = DropdownMenuShortcut;
 exports.DropdownMenuTrigger = DropdownMenuTrigger;
 exports.EmptyState = EmptyState;
 exports.Field = Field;
+exports.FileUpload = FileUpload2;
 exports.FormPage = FormPage;
 exports.HeaderActions = HeaderActions;
 exports.HeaderCollapseTrigger = HeaderCollapseTrigger;
@@ -3351,6 +3622,7 @@ exports.MultiSelect = MultiSelect;
 exports.PageHeader = PageHeader;
 exports.RadioGroup = RadioGroup;
 exports.RadioGroupItem = RadioGroupItem;
+exports.RowActions = RowActions;
 exports.Select = Select;
 exports.Sidebar = Sidebar;
 exports.SidebarFooter = SidebarFooter;
@@ -3420,6 +3692,15 @@ exports.emptyStateDescriptionSizeClass = emptyStateDescriptionSizeClass;
 exports.emptyStateIconWrapperBaseClass = emptyStateIconWrapperBaseClass;
 exports.emptyStateIconWrapperSizeClass = emptyStateIconWrapperSizeClass;
 exports.emptyStateTitleSizeClass = emptyStateTitleSizeClass;
+exports.fileUploadBaseClass = fileUploadBaseClass;
+exports.fileUploadDropzoneClass = fileUploadDropzoneClass;
+exports.fileUploadFileNameClass = fileUploadFileNameClass;
+exports.fileUploadFileRowClass = fileUploadFileRowClass;
+exports.fileUploadFileSizeClass = fileUploadFileSizeClass;
+exports.fileUploadHintClass = fileUploadHintClass;
+exports.fileUploadIconClass = fileUploadIconClass;
+exports.fileUploadPromptClass = fileUploadPromptClass;
+exports.fileUploadRemoveClass = fileUploadRemoveClass;
 exports.formPageActionsBarClass = formPageActionsBarClass;
 exports.formPageBaseClass = formPageBaseClass;
 exports.formPageBodyClass = formPageBodyClass;
@@ -3455,6 +3736,8 @@ exports.radioItemBaseClass = radioItemBaseClass;
 exports.radioItemSizeClass = radioItemSizeClass;
 exports.radioLabelSizeClass = radioLabelSizeClass;
 exports.radioOptionRowClass = radioOptionRowClass;
+exports.rowActionsBaseClass = rowActionsBaseClass;
+exports.rowActionsDestructiveClass = rowActionsDestructiveClass;
 exports.selectBaseClass = selectBaseClass;
 exports.selectSizeClass = selectSizeClass;
 exports.selectVariantClass = selectVariantClass;