mada-design-system 0.5.0 → 0.5.2

package/index.es298.js

@@ -1,122 +1,353 @@
-import B from "./index.es195.js";
-import v from "./index.es194.js";
-import * as u from "react";
-import { pickersMonthClasses as n, getPickersMonthUtilityClass as R } from "./index.es300.js";
-import { jsx as p } from "react/jsx-runtime";
-import m from "./index.es208.js";
-import w from "./index.es217.js";
-import $ from "./index.es293.js";
-import F from "./index.es216.js";
-import { alpha as b } from "./index.es291.js";
-const I = ["autoFocus", "children", "disabled", "selected", "value", "tabIndex", "onClick", "onKeyDown", "onFocus", "onBlur", "aria-current", "aria-label", "monthsPerRow"], O = (o) => {
+import w from "./index.es196.js";
+import ge from "./index.es197.js";
+import * as t from "react";
+import e from "./index.es198.js";
+import { clsx as Be } from "./index.es102.js";
+import Ce from "./index.es210.js";
+import xe from "./index.es219.js";
+import De from "./index.es405.js";
+import ke, { getButtonBaseUtilityClass as Ve } from "./index.es406.js";
+import { jsxs as Ee, jsx as we } from "react/jsx-runtime";
+import _ from "./index.es230.js";
+import Fe from "./index.es330.js";
+import M from "./index.es215.js";
+import Le from "./index.es327.js";
+import Ne from "./index.es324.js";
+import Se from "./index.es218.js";
+const Ue = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"], Pe = (g) => {
   const {
-    disabled: r,
-    selected: e,
-    classes: a
-  } = o;
-  return F({
-    root: ["root"],
-    monthButton: ["monthButton", r && "disabled", e && "selected"]
-  }, R, a);
-}, _ = m("div", {
-  name: "MuiPickersMonth",
+    disabled: i,
+    focusVisible: b,
+    focusVisibleClassName: c,
+    classes: B
+  } = g, m = Se({
+    root: ["root", i && "disabled", b && "focusVisible"]
+  }, Ve, B);
+  return b && c && (m.root += ` ${c}`), m;
+}, je = Ce("button", {
+  name: "MuiButtonBase",
   slot: "Root",
-  overridesResolver: (o, r) => [r.root]
-})(({
-  ownerState: o
-}) => ({
-  flexBasis: o.monthsPerRow === 3 ? "33.3%" : "25%",
-  display: "flex",
+  overridesResolver: (g, i) => i.root
+})({
+  display: "inline-flex",
   alignItems: "center",
-  justifyContent: "center"
-})), j = m("button", {
-  name: "MuiPickersMonth",
-  slot: "MonthButton",
-  overridesResolver: (o, r) => [r.monthButton, {
-    [`&.${n.disabled}`]: r.disabled
-  }, {
-    [`&.${n.selected}`]: r.selected
-  }]
-})(({
-  theme: o
-}) => v({
-  color: "unset",
+  justifyContent: "center",
+  position: "relative",
+  boxSizing: "border-box",
+  WebkitTapHighlightColor: "transparent",
   backgroundColor: "transparent",
+  // Reset default value
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
   border: 0,
-  outline: 0
-}, o.typography.subtitle1, {
-  margin: "8px 0",
-  height: 36,
-  width: 72,
-  borderRadius: 18,
+  margin: 0,
+  // Remove the margin in Safari
+  borderRadius: 0,
+  padding: 0,
+  // Remove the padding in Firefox
   cursor: "pointer",
-  "&:focus": {
-    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.action.active, o.palette.action.hoverOpacity)
-  },
-  "&:hover": {
-    backgroundColor: o.vars ? `rgba(${o.vars.palette.action.activeChannel} / ${o.vars.palette.action.hoverOpacity})` : b(o.palette.action.active, o.palette.action.hoverOpacity)
-  },
-  "&:disabled": {
-    cursor: "auto",
-    pointerEvents: "none"
+  userSelect: "none",
+  verticalAlign: "middle",
+  MozAppearance: "none",
+  // Reset
+  WebkitAppearance: "none",
+  // Reset
+  textDecoration: "none",
+  // So we take precedent over the style of a native <a /> element.
+  color: "inherit",
+  "&::-moz-focus-inner": {
+    borderStyle: "none"
+    // Remove Firefox dotted outline.
   },
-  [`&.${n.disabled}`]: {
-    color: (o.vars || o).palette.text.secondary
+  [`&.${ke.disabled}`]: {
+    pointerEvents: "none",
+    // Disable link interactions
+    cursor: "default"
   },
-  [`&.${n.selected}`]: {
-    color: (o.vars || o).palette.primary.contrastText,
-    backgroundColor: (o.vars || o).palette.primary.main,
-    "&:focus, &:hover": {
-      backgroundColor: (o.vars || o).palette.primary.dark
-    }
+  "@media print": {
+    colorAdjust: "exact"
   }
-})), q = /* @__PURE__ */ u.memo(function(r) {
-  const e = w({
-    props: r,
-    name: "MuiPickersMonth"
+}), q = /* @__PURE__ */ t.forwardRef(function(i, b) {
+  const c = xe({
+    props: i,
+    name: "MuiButtonBase"
   }), {
-    autoFocus: a,
-    children: i,
-    disabled: c,
-    selected: f,
-    value: s,
-    tabIndex: h,
-    onClick: k,
-    onKeyDown: y,
-    onFocus: C,
-    onBlur: M,
-    "aria-current": g,
-    "aria-label": x
-    // We don't want to forward this prop to the root element
-  } = e, P = B(e, I), l = u.useRef(null), d = O(e);
-  return $(() => {
-    if (a) {
-      var t;
-      (t = l.current) == null || t.focus();
+    action: B,
+    centerRipple: C = !1,
+    children: m,
+    className: z,
+    component: h = "button",
+    disabled: r = !1,
+    disableRipple: R = !1,
+    disableTouchRipple: F = !1,
+    focusRipple: a = !1,
+    LinkComponent: H = "a",
+    onBlur: L,
+    onClick: l,
+    onContextMenu: W,
+    onDragLeave: $,
+    onFocus: N,
+    onFocusVisible: S,
+    onKeyDown: U,
+    onKeyUp: P,
+    onMouseDown: G,
+    onMouseLeave: j,
+    onMouseUp: J,
+    onTouchEnd: Q,
+    onTouchMove: X,
+    onTouchStart: Y,
+    tabIndex: K = 0,
+    TouchRippleProps: Z,
+    touchRippleRef: ee,
+    type: x
+  } = c, p = ge(c, Ue), f = t.useRef(null), n = t.useRef(null), oe = _(n, ee), {
+    isFocusVisibleRef: I,
+    onFocus: ne,
+    onBlur: te,
+    ref: se
+  } = Fe(), [u, T] = t.useState(!1);
+  r && u && T(!1), t.useImperativeHandle(B, () => ({
+    focusVisible: () => {
+      T(!0), f.current.focus();
     }
-  }, [a]), /* @__PURE__ */ p(_, v({
-    className: d.root,
-    ownerState: e
-  }, P, {
-    children: /* @__PURE__ */ p(j, {
-      ref: l,
-      disabled: c,
-      type: "button",
-      role: "radio",
-      tabIndex: c ? -1 : h,
-      "aria-current": g,
-      "aria-checked": f,
-      "aria-label": x,
-      onClick: (t) => k(t, s),
-      onKeyDown: (t) => y(t, s),
-      onFocus: (t) => C(t, s),
-      onBlur: (t) => M(t, s),
-      className: d.monthButton,
-      ownerState: e,
-      children: i
-    })
+  }), []);
+  const [D, re] = t.useState(!1);
+  t.useEffect(() => {
+    re(!0);
+  }, []);
+  const k = D && !R && !r;
+  t.useEffect(() => {
+    u && a && !R && D && n.current.pulsate();
+  }, [R, a, u, D]);
+  function s(o, A, Me = F) {
+    return M((v) => (A && A(v), !Me && n.current && n.current[o](v), !0));
+  }
+  const ue = s("start", G), ce = s("stop", W), ie = s("stop", $), ae = s("stop", J), le = s("stop", (o) => {
+    u && o.preventDefault(), j && j(o);
+  }), pe = s("start", Y), fe = s("stop", Q), de = s("stop", X), be = s("stop", (o) => {
+    te(o), I.current === !1 && T(!1), L && L(o);
+  }, !1), me = M((o) => {
+    f.current || (f.current = o.currentTarget), ne(o), I.current === !0 && (T(!0), S && S(o)), N && N(o);
+  }), V = () => {
+    const o = f.current;
+    return h && h !== "button" && !(o.tagName === "A" && o.href);
+  }, E = t.useRef(!1), he = M((o) => {
+    a && !E.current && u && n.current && o.key === " " && (E.current = !0, n.current.stop(o, () => {
+      n.current.start(o);
+    })), o.target === o.currentTarget && V() && o.key === " " && o.preventDefault(), U && U(o), o.target === o.currentTarget && V() && o.key === "Enter" && !r && (o.preventDefault(), l && l(o));
+  }), Re = M((o) => {
+    a && o.key === " " && n.current && u && !o.defaultPrevented && (E.current = !1, n.current.stop(o, () => {
+      n.current.pulsate(o);
+    })), P && P(o), l && o.target === o.currentTarget && V() && o.key === " " && !o.defaultPrevented && l(o);
+  });
+  let y = h;
+  y === "button" && (p.href || p.to) && (y = H);
+  const d = {};
+  y === "button" ? (d.type = x === void 0 ? "button" : x, d.disabled = r) : (!p.href && !p.to && (d.role = "button"), r && (d["aria-disabled"] = r));
+  const Te = _(b, se, f);
+  process.env.NODE_ENV !== "production" && t.useEffect(() => {
+    k && n.current;
+  }, [k]);
+  const O = w({}, c, {
+    centerRipple: C,
+    component: h,
+    disabled: r,
+    disableRipple: R,
+    disableTouchRipple: F,
+    focusRipple: a,
+    tabIndex: K,
+    focusVisible: u
+  }), ye = Pe(O);
+  return /* @__PURE__ */ Ee(je, w({
+    as: y,
+    className: Be(ye.root, z),
+    ownerState: O,
+    onBlur: be,
+    onClick: l,
+    onContextMenu: ce,
+    onFocus: me,
+    onKeyDown: he,
+    onKeyUp: Re,
+    onMouseDown: ue,
+    onMouseLeave: le,
+    onMouseUp: ae,
+    onDragLeave: ie,
+    onTouchEnd: fe,
+    onTouchMove: de,
+    onTouchStart: pe,
+    ref: Te,
+    tabIndex: r ? -1 : K,
+    type: x
+  }, d, p, {
+    children: [m, k ? (
+      /* TouchRipple is only needed client-side, x2 boost on the server. */
+      /* @__PURE__ */ we(De, w({
+        ref: oe,
+        center: C
+      }, Z))
+    ) : null]
   }));
 });
+process.env.NODE_ENV !== "production" && (q.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * A ref for imperative actions.
+   * It currently only supports `focusVisible()` action.
+   */
+  action: Le,
+  /**
+   * If `true`, the ripples are centered.
+   * They won't start at the cursor interaction position.
+   * @default false
+   */
+  centerRipple: e.bool,
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: Ne,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, the ripple effect is disabled.
+   *
+   * ⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure
+   * to highlight the element by applying separate styles with the `.Mui-focusVisible` class.
+   * @default false
+   */
+  disableRipple: e.bool,
+  /**
+   * If `true`, the touch ripple effect is disabled.
+   * @default false
+   */
+  disableTouchRipple: e.bool,
+  /**
+   * If `true`, the base button will have a keyboard focus ripple.
+   * @default false
+   */
+  focusRipple: e.bool,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: e.string,
+  /**
+   * @ignore
+   */
+  href: e.any,
+  /**
+   * The component used to render a link when the `href` prop is provided.
+   * @default 'a'
+   */
+  LinkComponent: e.elementType,
+  /**
+   * @ignore
+   */
+  onBlur: e.func,
+  /**
+   * @ignore
+   */
+  onClick: e.func,
+  /**
+   * @ignore
+   */
+  onContextMenu: e.func,
+  /**
+   * @ignore
+   */
+  onDragLeave: e.func,
+  /**
+   * @ignore
+   */
+  onFocus: e.func,
+  /**
+   * Callback fired when the component is focused with a keyboard.
+   * We trigger a `onFocus` callback too.
+   */
+  onFocusVisible: e.func,
+  /**
+   * @ignore
+   */
+  onKeyDown: e.func,
+  /**
+   * @ignore
+   */
+  onKeyUp: e.func,
+  /**
+   * @ignore
+   */
+  onMouseDown: e.func,
+  /**
+   * @ignore
+   */
+  onMouseLeave: e.func,
+  /**
+   * @ignore
+   */
+  onMouseUp: e.func,
+  /**
+   * @ignore
+   */
+  onTouchEnd: e.func,
+  /**
+   * @ignore
+   */
+  onTouchMove: e.func,
+  /**
+   * @ignore
+   */
+  onTouchStart: e.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * @default 0
+   */
+  tabIndex: e.number,
+  /**
+   * Props applied to the `TouchRipple` element.
+   */
+  TouchRippleProps: e.object,
+  /**
+   * A ref that points to the `TouchRipple` element.
+   */
+  touchRippleRef: e.oneOfType([e.func, e.shape({
+    current: e.shape({
+      pulsate: e.func.isRequired,
+      start: e.func.isRequired,
+      stop: e.func.isRequired
+    })
+  })]),
+  /**
+   * @ignore
+   */
+  type: e.oneOfType([e.oneOf(["button", "reset", "submit"]), e.string])
+});
+const Ze = q;
 export {
-  q as PickersMonth
+  je as ButtonBaseRoot,
+  Ze as default
 };

package/index.es299.js

@@ -1,9 +1,5 @@
-import e from "./index.es218.js";
-import r from "./index.es219.js";
-function n(t) {
-  return e("MuiMonthCalendar", t);
-}
-r("MuiMonthCalendar", ["root"]);
+import * as e from "react";
+const f = typeof window < "u" ? e.useLayoutEffect : e.useEffect, t = f;
 export {
-  n as getMonthCalendarUtilityClass
+  t as default
 };

package/index.es3.js

@@ -1,5 +1,5 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { cn as e } from "./index.es84.js";
+import { cn as e } from "./index.es85.js";
 const s = ({ className: C }) => /* @__PURE__ */ r(
   "svg",
   {

package/index.es30.js

@@ -1,100 +1,39 @@
-import { jsx as o, jsxs as d } from "react/jsx-runtime";
-import * as t from "@radix-ui/react-dialog";
-import * as l from "react";
-import { clsx as g } from "./index.es101.js";
-import { cn as s } from "./index.es84.js";
-import "./index.es2.js";
-import { Button as u } from "./index.es22.js";
-import { ScrollArea as x, ScrollBar as y } from "./index.es61.js";
-import N from "./index.es107.js";
-import D from "./index.es88.js";
-const _ = t.Root, A = t.Trigger, b = t.Portal, w = t.Close, n = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ o(
-  t.Overlay,
-  {
-    ref: r,
-    className: s(
-      "fixed inset-0 z-50 bg-background-overlay backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      a
-    ),
-    ...e
-  }
-));
-n.displayName = t.Overlay.displayName;
-const v = l.forwardRef(({ className: a, ignoreInteractOutside: e, hideOverlay: r, overlayClassName: i, children: m, ...c }, p) => /* @__PURE__ */ d(b, { children: [
-  /* @__PURE__ */ o(
-    n,
-    {
-      className: g(i, {
-        "bg-transparent": r
-      })
-    }
-  ),
-  /* @__PURE__ */ o(
-    t.Content,
-    {
-      onInteractOutside: (f) => {
-        e && f.preventDefault();
-      },
-      ref: p,
-      className: s(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-[90%] translate-x-[-50%] translate-y-[-50%] rounded-4  border bg-card   shadow-lg duration-200  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] md:w-full md:max-w-screen-sm xl:max-w-screen-lg xl:max-w-screen-lg",
-        a
-      ),
-      ...c,
-      children: m
-    }
-  )
-] }));
-v.displayName = t.Content.displayName;
-const h = ({ className: a, ...e }) => /* @__PURE__ */ d("div", { className: s("flex  flex-row items-center border-b border-border-primary p-space-04  ", a), ...e, children: [
-  e.children,
-  /* @__PURE__ */ o(w, { className: "ms-auto p-space-01", "data-testid": "sheetClose", asChild: !0, children: /* @__PURE__ */ o(u, { variant: "text", colors: "neutral", size: "icon-sm", children: /* @__PURE__ */ o(N, { size: 20 }) }) })
-] });
-h.displayName = "DialogHeader";
-const C = l.forwardRef(({ className: a, ...e }, r) => {
-  const { dir: i } = D();
-  return /* @__PURE__ */ d(x, { dir: i, className: "max-h-[calc(100vh_-_300px)] ", children: [
-    /* @__PURE__ */ o(
-      "div",
-      {
-        ref: r,
-        className: s(
-          // 'scrollbar-thumb-rounded-full scrollbar-track-rounded-full scrollbar-w-2.5 scrollbar-h-2.5 scrollbar scrollbar-track-transparent scrollbar-thumb-border',
-          "  my-space-05 overflow-auto px-space-05 text-foreground",
-          // `${isFooterUsed ? 'mb-space-11' : ''}`,
-          a
-        ),
-        ...e
-      }
-    ),
-    /* @__PURE__ */ o(y, { orientation: "vertical" })
+import { jsxs as d, jsx as e, Fragment as k } from "react/jsx-runtime";
+import l from "./index.es119.js";
+import { useState as c } from "react";
+import { cn as v } from "./index.es85.js";
+import { Popover as y, PopoverTrigger as A, PopoverContent as w } from "./index.es59.js";
+import { selectVariants as O } from "./index.es64.js";
+import "./index.es120.js";
+import j from "./index.es127.js";
+import { LocalizationProvider as z } from "./index.es121.js";
+import { AdapterMoment as F } from "./index.es123.js";
+import { DigitalClock as H } from "./index.es128.js";
+const K = ({
+  placeholder: p,
+  value: o,
+  onChange: h,
+  rounded: f,
+  lang: a,
+  variant: u,
+  className: g,
+  colors: x,
+  size: T,
+  ...t
+}) => {
+  const [b, m] = c(!1), [i, C] = c(o), r = t.ampm ? "hh:mm A" : "HH:mm", N = (n) => {
+    const s = n ? n.format(r) : null;
+    C(s), h(s), m(!1);
+  }, P = o ? l(o, r) : null;
+  return /* @__PURE__ */ d(y, { open: b, onOpenChange: m, children: [
+    /* @__PURE__ */ e(A, { asChild: !0, children: /* @__PURE__ */ d("button", { id: "date", role: "date", className: v(O({ variant: u, colors: x, size: T, rounded: f }), g), disabled: t.disabled, children: [
+      i ? /* @__PURE__ */ e(k, { children: l(i, r).format(r) }) : /* @__PURE__ */ e("span", { className: "text-body-01 text-foreground-secondary", children: p ?? "00:00" }),
+      /* @__PURE__ */ e(j, { className: "size-[20px] shrink-0" })
+    ] }) }),
+    /* @__PURE__ */ e(w, { className: "w-auto !rounded border-border-primary p-0 shadow-2xl", align: "start", children: /* @__PURE__ */ e("div", { dir: a === "ar" ? "rtl" : "ltr", className: "w-[300px]", children: /* @__PURE__ */ e(z, { dateAdapter: F, adapterLocale: a === "ar" ? "ar-ly" : "en", children: /* @__PURE__ */ e(H, { value: P, onChange: N, ...t }) }) }) })
   ] });
-});
-C.displayName = "DialogBody";
-const R = ({ className: a, ...e }) => /* @__PURE__ */ o(
-  "div",
-  {
-    className: s("flex flex-col-reverse gap-space-02 border-t border-border-primary p-space-04 sm:flex-row sm:justify-between", a),
-    ...e
-  }
-);
-R.displayName = "DialogFooter";
-const z = l.forwardRef(
-  ({ className: a, ...e }, r) => /* @__PURE__ */ o(t.Title, { ref: r, className: s("text-body-01 font-semibold text-card-foreground", a), ...e })
-);
-z.displayName = t.Title.displayName;
-const T = l.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ o(t.Description, { ref: r, className: s("text-sm text-muted-foreground", a), ...e }));
-T.displayName = t.Description.displayName;
+};
 export {
-  _ as Dialog,
-  C as DialogBody,
-  w as DialogClose,
-  v as DialogContent,
-  T as DialogDescription,
-  R as DialogFooter,
-  h as DialogHeader,
-  n as DialogOverlay,
-  b as DialogPortal,
-  z as DialogTitle,
-  A as DialogTrigger
+  K as TimePicker,
+  K as default
 };