mada-design-system 0.5.10 → 0.5.12

package/index.es10.js

@@ -1,162 +1,198 @@
-import { jsxs as o, jsx as e, Fragment as O } from "react/jsx-runtime";
-import { useVirtualizer as T } from "./index.es112.js";
-import h, { useCallback as _, useMemo as $, useEffect as A } from "react";
-import { useToggle as D } from "./index.es103.js";
-import { strings as z } from "./index.es97.js";
-import G from "./index.es3.js";
-import { ShouldRender as y } from "./index.es14.js";
-import { Badge as q } from "./index.es20.js";
-import { Button as L } from "./index.es22.js";
-import { Checkbox as H } from "./index.es25.js";
-import { Command as J, CommandInput as K, CommandList as Q, CommandEmpty as U, CommandGroup as W, CommandItem as X } from "./index.es27.js";
-import { Popover as Y, PopoverTrigger as Z, PopoverContent as B } from "./index.es59.js";
-import { selectVariants as V } from "./index.es64.js";
-import { debounce as ee, cn as re } from "./index.es85.js";
-import ae from "./index.es100.js";
-function be({
-  placeholder: l,
-  options: r,
-  selectedValues: a,
-  onChange: c,
-  disabled: g,
-  size: s = "default",
-  dataTestId: d = "",
-  rounded: u = "default",
-  variant: x = "outline",
-  colors: v = "default",
-  isLoading: n = !1,
-  className: f,
-  checkboxSize: b = "default",
-  threshold: N = 1,
-  showSelectButton: i,
-  selectButtonTitle: j
+import { jsxs as f, Fragment as T, jsx as r } from "react/jsx-runtime";
+import { useSensor as O, useSensors as V, DndContext as _, closestCenter as q, DragOverlay as J, MouseSensor as K, TouchSensor as Q } from "./index.es106.js";
+import { SortableContext as U, useSortable as X, arrayMove as Y } from "./index.es107.js";
+import { useState as A } from "react";
+import { createPortal as W } from "react-dom";
+import { cn as j } from "./index.es86.js";
+import { strings as Z } from "./index.es98.js";
+import E from "./index.es3.js";
+import { Button as y } from "./index.es23.js";
+import { Separator as M } from "./index.es66.js";
+import { Stack as ee } from "./index.es43.js";
+import re from "./index.es108.js";
+import te from "./index.es109.js";
+import se from "./index.es110.js";
+import ie from "./index.es111.js";
+function De({
+  configs: s,
+  isEditMode: o,
+  componentMap: p,
+  onConfigChange: g,
+  onOrderChange: v,
+  onSave: c,
+  onCancel: D,
+  onReset: z,
+  onAdd: C,
+  isSidePanelShown: I,
+  isSaving: u
 }) {
-  var I;
-  const [C, S] = D(!1), [R, w] = h.useState(""), [F, E] = h.useState(""), [k, p] = h.useState(a), M = _(() => ee((t) => w(t), 300), []), P = $(() => r.filter((t) => t.label.toLowerCase().includes(R.toLowerCase())), [r, R]), m = C && i ? k : a;
-  return A(() => {
-    p(a);
-  }, [a]), /* @__PURE__ */ o(
-    Y,
-    {
-      open: C,
-      onOpenChange: () => {
-        S(), C || (E(""), w(""), i && p(a));
-      },
-      children: [
-        /* @__PURE__ */ e(Z, { asChild: !0, disabled: g, "data-testid": d, children: /* @__PURE__ */ o("button", { className: re(V({ variant: x, colors: v, size: s, rounded: u }), f), children: [
-          /* @__PURE__ */ e("span", { className: "shrink-0 text-body-01 text-form-field-text-placeholder ", children: l }),
-          (m == null ? void 0 : m.length) > 0 && /* @__PURE__ */ e(O, { children: m.length > N ? /* @__PURE__ */ e("label", { className: "ms-auto flex size-space-05 shrink-0 items-center justify-center rounded-full  bg-inverted text-caption-01 text-inverted-foreground", children: m.length }) : (I = r == null ? void 0 : r.filter((t) => m.includes(t.value))) == null ? void 0 : I.map((t) => /* @__PURE__ */ e(q, { colors: "gray", variant: "ghost", size: "sm", className: "ms-auto", children: t.label }, t.value)) }),
-          n ? /* @__PURE__ */ e(G, {}) : /* @__PURE__ */ e(
-            ae,
-            {
-              className: "size-[20px]  shrink-0  transition-transform duration-300 ease-in-out group-data-[state=open]:rotate-180",
-              "aria-hidden": !0
-            }
-          )
-        ] }) }),
-        /* @__PURE__ */ e(
-          B,
-          {
-            className: "min-h-space-07 min-w-[var(--radix-popover-trigger-width)] p-space-00   max-md:max-w-[var(--radix-popper-available-width)]",
-            align: "start",
-            children: /* @__PURE__ */ o(J, { className: "w-full", shouldFilter: !1, children: [
-              /* @__PURE__ */ o("div", { className: "p-space-02", children: [
-                /* @__PURE__ */ e(y, { shouldRender: (r == null ? void 0 : r.length) > 7, children: /* @__PURE__ */ e(
-                  K,
-                  {
-                    placeholder: l,
-                    value: F,
-                    onValueChange: (t) => {
-                      E(t), M()(t);
-                    }
-                  }
-                ) }),
-                /* @__PURE__ */ o(Q, { children: [
-                  /* @__PURE__ */ e(U, { className: "my-auto text-center", children: z.Shared.NoDataFound }),
-                  /* @__PURE__ */ e(
-                    te,
-                    {
-                      options: P,
-                      dataTestId: d,
-                      selectedValues: i ? k : a,
-                      onChange: i ? p : c,
-                      checkboxSize: b
-                    }
-                  )
-                ] })
-              ] }),
-              /* @__PURE__ */ e(y, { shouldRender: !!(a != null && a.length) || i, children: /* @__PURE__ */ o("div", { className: "flex items-center gap-space-04 border-t border-t-border bg-background px-space-04 py-space-02", children: [
-                /* @__PURE__ */ e(
-                  L,
-                  {
-                    colors: "neutral",
-                    variant: "text",
-                    size: "sm",
-                    onClick: () => {
-                      c([]), p([]), i || S();
-                    },
-                    className: "flex-1",
-                    children: z.Shared.reset
-                  }
-                ),
-                /* @__PURE__ */ e(y, { shouldRender: i, children: /* @__PURE__ */ e(
-                  L,
-                  {
-                    type: "button",
-                    colors: "primary",
-                    size: "sm",
-                    onClick: () => {
-                      c(k), S();
-                    },
-                    className: "flex-1",
-                    children: j ?? z.Shared.Select
-                  }
-                ) })
-              ] }) })
-            ] })
-          }
-        )
-      ]
+  const [d, w] = A(null), [S, k] = A(null), $ = O(K, {
+    activationConstraint: {
+      distance: 5
     }
-  );
-}
-function te({
-  options: l,
-  selectedValues: r,
-  dataTestId: a,
-  onChange: c,
-  checkboxSize: g
-}) {
-  var u;
-  const s = h.useRef(null), d = T({
-    count: l.length,
-    getScrollElement: () => s.current,
-    estimateSize: () => 36,
-    // Adjust based on your row height
-    overscan: 10
-    // Improves scroll performance
-  });
-  return /* @__PURE__ */ e(W, { ref: s, className: "overflow-auto", children: (u = d.getVirtualItems()) == null ? void 0 : u.map((x, v) => {
-    const n = l[x.index], f = r == null ? void 0 : r.includes(n.value);
-    return /* @__PURE__ */ o(
-      X,
+  }), B = O(Q, {
+    activationConstraint: {
+      delay: 100,
+      tolerance: 5
+    }
+  }), H = V($, B), P = (e) => {
+    w(e.active.id);
+  }, R = (e) => {
+    const { over: t } = e;
+    k(t ? t.id : null);
+  }, F = (e) => {
+    const { active: t, over: i } = e;
+    if (w(null), k(null), !i || t.id === i.id)
+      return;
+    if (i.id.toString().startsWith("placeholder-")) {
+      const l = parseInt(i.id.toString().split("-")[1]), h = s.find((m) => m.alias === t.id);
+      if (h && h.size === "half") {
+        const m = s.findIndex((L) => L.alias === t.id), N = [...s];
+        N.splice(l + 1, 0, ...N.splice(m, 1)), v(N);
+      }
+      return;
+    }
+    const a = s.findIndex((l) => l.alias === t.id), n = s.findIndex((l) => l.alias === i.id), b = Y(s, a, n);
+    v(b);
+  }, x = s.filter((e) => (e == null ? void 0 : e.isVisible) && p[e.alias]), G = Array(x.length).fill(0).map((e, t) => `placeholder-${t}`);
+  return /* @__PURE__ */ f(T, { children: [
+    u && W(
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: j(
+            "fixed inset-0 z-[60000] bg-black transition-all duration-200",
+            u ? "opacity-50" : "pointer-events-none opacity-0"
+          )
+        }
+      ),
+      document.body
+    ),
+    /* @__PURE__ */ f(
+      _,
       {
-        "data-testid": `${a}-${v}`,
-        className: "flex gap-space-02",
-        onSelect: () => {
-          const b = f ? r.filter((N) => N !== n.value) : [...r, n.value];
-          c(b);
-        },
+        sensors: H,
+        collisionDetection: q,
+        onDragStart: P,
+        onDragEnd: F,
+        onDragOver: R,
         children: [
-          n.icon && /* @__PURE__ */ e(n.icon, { className: "mr-2 h-4 w-4 text-muted-foreground" }),
-          /* @__PURE__ */ e("span", { children: n.label }),
-          /* @__PURE__ */ e(H, { className: "ms-auto", checked: f, size: g })
+          /* @__PURE__ */ r(U, { items: [...s.map((e) => e.alias), ...G], children: /* @__PURE__ */ r("div", { className: "grid grid-cols-1 items-center justify-center gap-space-04 px-space-04 pt-space-04 sm:grid-cols-2 sm:items-stretch sm:justify-stretch sm:px-space-06 xl:px-space-04", children: (() => {
+            let e = 0;
+            const t = [], i = s.find((a) => a.alias === d);
+            for (let a = 0; a < x.length; a++) {
+              const n = x[a], b = p[n.alias];
+              if (!b)
+                continue;
+              t.push(
+                /* @__PURE__ */ r(
+                  b,
+                  {
+                    config: n,
+                    isEditMode: o,
+                    onConfigChange: g,
+                    isOver: n.alias === S,
+                    isDragging: n.alias === d
+                  },
+                  n.alias
+                )
+              );
+              const l = n.size === "full" ? 2 : 1;
+              if (e += l, o && n.size === "half" && e % 2 === 1) {
+                const h = x[a + 1];
+                if (!h || h.size === "full") {
+                  const m = `placeholder-${a}`;
+                  t.push(
+                    /* @__PURE__ */ r(
+                      ae,
+                      {
+                        id: m,
+                        isEditMode: o,
+                        activeId: d,
+                        overId: S,
+                        draggedWidgetSize: i == null ? void 0 : i.size
+                      },
+                      m
+                    )
+                  ), e += 1;
+                }
+              }
+            }
+            return t;
+          })() }) }),
+          /* @__PURE__ */ r(J, { children: d && (() => {
+            const e = s.find((i) => i.alias === d);
+            if (!e)
+              return null;
+            const t = p[e.alias];
+            return t ? /* @__PURE__ */ r(
+              t,
+              {
+                config: e,
+                isEditMode: o,
+                onConfigChange: g,
+                isDragOverlay: !0,
+                isOver: e.alias === S,
+                isDragging: e.alias === d
+              },
+              e.alias
+            ) : null;
+          })() })
         ]
-      },
-      n.value
-    );
-  }) });
+      }
+    ),
+    W(
+      /* @__PURE__ */ r(
+        "div",
+        {
+          className: `fixed bottom-4 left-0 right-0 flex justify-center transition-all duration-300 ${o ? "z-[50000] opacity-100" : "pointer-events-none opacity-0"}
+                    ${I ? "hidden xl:flex" : ""}
+                    `,
+          children: /* @__PURE__ */ f(
+            "div",
+            {
+              className: `flex transform items-center gap-space-04 rounded-full border-t bg-background-brand p-space-02 shadow-card-shadow transition-all duration-300 ${o ? "translate-y-[-10px]" : "translate-y-full"}`,
+              children: [
+                /* @__PURE__ */ f(ee, { gap: 4, alignItems: "center", children: [
+                  /* @__PURE__ */ r(y, { variant: "outline", colors: "gray", size: "icon-sm", onClick: D, children: /* @__PURE__ */ r(re, {}) }),
+                  /* @__PURE__ */ r(y, { variant: "outline", colors: "gray", size: "icon-sm", onClick: z, children: /* @__PURE__ */ r(te, {}) }),
+                  /* @__PURE__ */ r(M, { orientation: "vertical", className: "h-space-06" })
+                ] }),
+                /* @__PURE__ */ r(y, { variant: "outline", colors: "primary", size: "icon-sm", className: "xl:hidden", onClick: C, children: /* @__PURE__ */ r(se, {}) }),
+                /* @__PURE__ */ f(y, { variant: "default", onClick: c, size: "sm", colors: "primary", className: "gap-space-02", disabled: u, children: [
+                  /* @__PURE__ */ r(ie, { className: "size-space-05" }),
+                  Z.DragAndDrop.SaveCustomization,
+                  u && /* @__PURE__ */ r(E, {})
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      document.body
+    )
+  ] });
 }
+const ae = ({ id: s, isEditMode: o, activeId: p, overId: g, draggedWidgetSize: v }) => {
+  const c = v === "half", { attributes: D, listeners: z, isOver: C, setNodeRef: I } = X({
+    id: s,
+    disabled: !o || !c
+  });
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      ref: I,
+      ...c ? D : {},
+      ...c ? z : {},
+      className: j(
+        "hidden sm:block",
+        "h-[440px] rounded-3 border-2 border-dashed transition-all duration-200",
+        C || g === s ? "border-primary" : "border-border",
+        !c && p ? "cursor-not-allowed" : "cursor-default"
+      )
+    }
+  );
+};
 export {
-  be as MultiSelect
+  De as DraggableGrid
 };

package/index.es100.js

@@ -1,13 +1,128 @@
-import e from "./index.es193.js";
-const a = e("ExpandMore", [
-  [
-    "path",
-    {
-      d: "M16.59 8.29492L12 12.8749L7.41 8.29492L6 9.70492L12 15.7049L18 9.70492L16.59 8.29492Z",
-      key: "1h4imv"
-    }
-  ]
-]);
+const e = {
+  messages: {
+    exceedlimitedField: "{0} field size is {1} characters",
+    required: "{0} is required"
+  },
+  Shared: {
+    trialVersion: "Beta version",
+    soon: "soon",
+    NationalId: "National ID",
+    ResidentID: "Resident ID",
+    Welcome: "Hi ",
+    Login: "Login",
+    Logout: "Log out",
+    InformationPanel: "Information Panel",
+    AccountSettings: "Account Settings",
+    Chat: "Chat Now",
+    TechnicalSupport: "Technical Support",
+    FullName: "Full Name",
+    PersonalInformation: "Personal Information",
+    TicketInformation: "Ticket Information",
+    TicketDetails: "Ticket Details",
+    Title: "Title",
+    Description: "Description",
+    Enter: "Enter",
+    AddSupportingFiles: "Attachments",
+    Send: "Submit",
+    Submit: "Submit Request",
+    Cancel: "Cancel",
+    Main: "Home",
+    Select: "Select",
+    NotRobot: "Please verify you are not a robot",
+    Search: "Search",
+    Number: "Number",
+    Date: "Date",
+    hijriCalendar: "Hijri Calendar",
+    male: "Male",
+    female: "Female",
+    submit: "Submit",
+    next: "Next",
+    previous: "Previous",
+    morePages: "More pages",
+    Total: "Total",
+    YearTitle: "Year",
+    MonthTitle: "Month",
+    PaginationDesc: "Page {0} of {1}",
+    LinesPerPage: "Lines per page",
+    Actions: "Actions",
+    ViewDetails: "View Details",
+    Language: "Language",
+    Specify: "Specify",
+    ServerError: "Sorry, something went wrong",
+    BackToHome: "Back to Main Page",
+    NoDataFound: "No data found",
+    showResults: "Show results",
+    reset: "Reset",
+    CopiedSuccessfully: "Copied successfully",
+    comma: ",",
+    accessibilityTools: " Accessibility Tools",
+    sortBy: "Sort by",
+    siteLanguageText: "العربية",
+    lightMode: "Light mode",
+    darkMode: "Dark mode",
+    showLess: "Show less",
+    showMore: "Show more",
+    noResultsFound: "No results found",
+    Clear: "Clear"
+  },
+  Footer: {
+    KSA: "Ministry of Education - Saudia Arabia",
+    TermsAndConditions: "Terms & conditions",
+    PolicyAndPrivacy: "	Privacy policy",
+    RegulationsPolicies: "Regulations & Policies",
+    Rights: "All rights reserved to the Ministry of Education © {0}",
+    Version: "Version ",
+    DevelopedByTetco: "Developed and operated by Tatweer Educational Technologies Company"
+  },
+  DragAndDrop: {
+    SaveCustomization: "Save",
+    Delete: "Remove",
+    Half: "Minimize",
+    Full: "Expand",
+    Width: "Width",
+    Show: "Show",
+    AddToDashboard: "Customize your experience"
+  },
+  Attachments: {
+    error: "Sorry! The format or the size of the attachment is not allowed.",
+    Attachments: "Attachments",
+    AddAttachment: "Attach files",
+    dragFiles: "Drag and drop files here to upload ",
+    browseFile: "Browse Files",
+    uploadFiles: "Upload Files",
+    allowedFormats: "supported file formats include {0}",
+    maxSize: "Maximum file size allowed is {0}MB",
+    ApplyFile: "Apply File",
+    maxAcceptedFilesCount: "the maximum number of files you can drop here {0} files",
+    attachedFile: "Attached File"
+  },
+  Accessibility: {
+    Accessibility: "Accessibility",
+    FontSize: "Font size",
+    IncreaseFontSize: "Increase font size",
+    DecreaseFontSize: "Decrease font size",
+    ColorContrast: "Color contrast",
+    SignLanguage: "Sign language",
+    VoiceCommands: "Voice commands"
+  },
+  DigitalSignatureContent: {
+    secureTitle: "Government websites use the {0} protocol for encryption and security.",
+    secureDesc: "Secure websites in the Kingdom of Saudi Arabia use the HTTPS protocol for encryption.",
+    registered: "Registered with the Digital Government Authority under number :",
+    howCheck: "How to verify?",
+    officialSite: "Official government website of the Government of the Kingdom of Saudi Arabia",
+    govSaTitle: "Official Saudi Government website URL ends with {0} ",
+    govSaDesc: "Website belongs to an official government organization in the Kingdom of Saudi Arabia always ends with .gov.sa .",
+    eduSaTitle: "Official Saudi Government website URL ends with {0} ",
+    eduSaDesc: "Website belongs to an official educational in the Kingdom of Saudi Arabia always ends with .edu.sa or sch.sa .",
+    orgSaTitle: "Official Saudi Government website URL ends with {0} ",
+    orgSaDesc: "Website belongs to an official non-profit organizations in the Kingdom of Saudi Arabia always ends with .org.sa .",
+    saTitle: "Official Saudi Government website URL ends with {0} ",
+    saDesc: "Website belongs to an official activities and initiatives in the Kingdom of Saudi Arabia always ends with .sa .",
+    schSaTitle: "Official Saudi Government website URL ends with {0} ",
+    schSaDesc: "Website belongs to an official educational in the Kingdom of Saudi Arabia always ends with .edu.sa or sch.sa ."
+  }
+};
 export {
-  a as default
+  e as en
 };

package/index.es101.js

@@ -1,90 +1,13 @@
-import * as o from "react";
-import { createTable as u } from "./index.es104.js";
-import { ColumnFaceting as R, ColumnFiltering as S, ColumnGrouping as b, ColumnOrdering as w, ColumnPinning as y, ColumnSizing as F, ColumnVisibility as h, GlobalFaceting as x, GlobalFiltering as O, Headers as P, RowExpanding as v, RowPagination as E, RowPinning as G, RowSelection as $, RowSorting as A, _getVisibleLeafColumns as M, aggregationFns as V, buildHeaderGroups as j, createCell as k, createColumn as z, createRow as H, defaultColumnSizing as N, expandRows as T, filterFns as U, flattenBy as _, functionalUpdate as B, getCoreRowModel as L, getMemoOptions as q, getPaginationRowModel as D, isFunction as I, isNumberArray as J, isRowSelected as K, isSubRowSelected as Q, makeStateUpdater as W, memo as X, orderColumns as Y, passiveEventSupported as Z, reSplitAlphaNumeric as ee, selectRowsFn as te, shouldAutoRemoveFilter as ne, sortingFns as oe } from "./index.es104.js";
-function m(e, t) {
-  return e ? s(e) ? /* @__PURE__ */ o.createElement(e, t) : e : null;
-}
-function s(e) {
-  return c(e) || typeof e == "function" || g(e);
-}
-function c(e) {
-  return typeof e == "function" && (() => {
-    const t = Object.getPrototypeOf(e);
-    return t.prototype && t.prototype.isReactComponent;
-  })();
-}
-function g(e) {
-  return typeof e == "object" && typeof e.$$typeof == "symbol" && ["react.memo", "react.forward_ref"].includes(e.$$typeof.description);
-}
-function p(e) {
-  const t = {
-    state: {},
-    // Dummy state
-    onStateChange: () => {
-    },
-    // noop
-    renderFallbackValue: null,
-    ...e
-  }, [n] = o.useState(() => ({
-    current: u(t)
-  })), [i, a] = o.useState(() => n.current.initialState);
-  return n.current.setOptions((l) => ({
-    ...l,
-    ...e,
-    state: {
-      ...i,
-      ...e.state
-    },
-    // Similarly, we'll maintain both our internal state and any user-provided
-    // state.
-    onStateChange: (r) => {
-      a(r), e.onStateChange == null || e.onStateChange(r);
+import e from "./index.es182.js";
+const a = e("ExpandMore", [
+  [
+    "path",
+    {
+      d: "M16.59 8.29492L12 12.8749L7.41 8.29492L6 9.70492L12 15.7049L18 9.70492L16.59 8.29492Z",
+      key: "1h4imv"
     }
-  })), n.current;
-}
+  ]
+]);
 export {
-  R as ColumnFaceting,
-  S as ColumnFiltering,
-  b as ColumnGrouping,
-  w as ColumnOrdering,
-  y as ColumnPinning,
-  F as ColumnSizing,
-  h as ColumnVisibility,
-  x as GlobalFaceting,
-  O as GlobalFiltering,
-  P as Headers,
-  v as RowExpanding,
-  E as RowPagination,
-  G as RowPinning,
-  $ as RowSelection,
-  A as RowSorting,
-  M as _getVisibleLeafColumns,
-  V as aggregationFns,
-  j as buildHeaderGroups,
-  k as createCell,
-  z as createColumn,
-  H as createRow,
-  u as createTable,
-  N as defaultColumnSizing,
-  T as expandRows,
-  U as filterFns,
-  _ as flattenBy,
-  m as flexRender,
-  B as functionalUpdate,
-  L as getCoreRowModel,
-  q as getMemoOptions,
-  D as getPaginationRowModel,
-  I as isFunction,
-  J as isNumberArray,
-  K as isRowSelected,
-  Q as isSubRowSelected,
-  W as makeStateUpdater,
-  X as memo,
-  Y as orderColumns,
-  Z as passiveEventSupported,
-  ee as reSplitAlphaNumeric,
-  te as selectRowsFn,
-  ne as shouldAutoRemoveFilter,
-  oe as sortingFns,
-  p as useReactTable
+  a as default
 };