@nuee/ui 0.3.0

package/dist/drawer.js

@@ -0,0 +1,735 @@
+// src/drawer.tsx
+import { c as _c } from "react/compiler-runtime";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import * as stylex from "@stylexjs/stylex";
+import { createContext, useContext } from "react";
+
+// src/stylex-props.ts
+function getNativeStyleProps(stylexProps, className, style) {
+  return {
+    className: [stylexProps.className, className].filter(Boolean).join(" "),
+    style: {
+      ...stylexProps.style,
+      ...style
+    }
+  };
+}
+
+// src/drawer.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var styles = {
+  overlay: {
+    k6WDB: "xpivpjv",
+    kWkggS: "x1unu5m3",
+    kpwlN0: "x10a8y8t",
+    kVAEAm: "xixxii4",
+    kIyJzY: "xrqf7vh",
+    k1ekBW: "x19991ni",
+    kAMwcw: "xctuv9u",
+    kY2c9j: "xa9119d",
+    kJcGZN: "x1llxi74",
+    kMqVnt: "x1gqblgl",
+    kQuUWH: "x6rr8qh",
+    kRVfsM: "x1wueb8x",
+    $$css: true
+  },
+  overlayTransparent: {
+    k6WDB: "x1t853zo",
+    kWkggS: "xjbqb8w",
+    $$css: true
+  },
+  popup: {
+    kWkggS: "x1sgh50o",
+    kVAM5u: "x13xm7is",
+    ksu8eU: "x1y0btm7",
+    kMzoRj: "xzgztj1",
+    kGVxlE: "x1juquzk",
+    kMwMTN: "x1alews2",
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kAzted: "x2lwn1j",
+    kI3sdo: "x1a2a7pz",
+    kVQacm: "xb3r6kr",
+    kVAEAm: "xixxii4",
+    kIyJzY: "xrqf7vh",
+    k1ekBW: "x6o7n8i",
+    kAMwcw: "xctuv9u",
+    k6sLGO: "x1so62im",
+    kQuUWH: "x6rr8qh",
+    kRVfsM: "x1wueb8x",
+    k6CgDc: "x1yjfzay",
+    $$css: true
+  },
+  verticalPopup: {
+    kbCHJM: "xu96u03",
+    kUOVxO: "xvueqy4",
+    kskxy: "x18bvk7g",
+    kCIrl2: "x3m8u43",
+    kzqmXN: "xh8yej3",
+    $$css: true
+  },
+  downPopup: {
+    kaIpWk: "x6hl4wd",
+    krVfgx: "x1ey2m1c",
+    kAzted: "xafkwjd",
+    k3aq6I: "x1y5dkz8",
+    kdD3Bq: "x1i2unn7",
+    koVVf4: "x1ait54v",
+    kTOR3a: "x1b19agx",
+    $$css: true
+  },
+  upPopup: {
+    kaIpWk: "x1nk6e8i",
+    kAzted: "xafkwjd",
+    k87sOh: "x13vifvy",
+    k3aq6I: "x1y5dkz8",
+    kdD3Bq: "x1i2unn7",
+    koVVf4: "xoejiej",
+    kTOR3a: "x10orviz",
+    $$css: true
+  },
+  horizontalPopup: {
+    krVfgx: "x1ey2m1c",
+    ks0D6T: "xowlazn",
+    k87sOh: "x13vifvy",
+    kzqmXN: "xdlckem",
+    $$css: true
+  },
+  leftPopup: {
+    kaIpWk: "x10g0tjl",
+    kbCHJM: "xu96u03",
+    k3aq6I: "x1xq5odm",
+    kdD3Bq: "x1i2unn7",
+    koVVf4: "xuw5tg6",
+    kTOR3a: "x445yqt",
+    $$css: true
+  },
+  rightPopup: {
+    kaIpWk: "x1cxjlwu",
+    kCIrl2: "x3m8u43",
+    k3aq6I: "x1xq5odm",
+    kdD3Bq: "x1i2unn7",
+    koVVf4: "x1ouavn2",
+    kTOR3a: "x1df8nr5",
+    $$css: true
+  },
+  swipeHandle: {
+    kSGwAc: "xamitd3",
+    kWkggS: "xoec9bc",
+    kaIpWk: "x9gkxt8",
+    kmuXW: "x2lah0s",
+    kZKoxP: "x16wp3ig",
+    kqGvvJ: "xt1anyw",
+    kzqmXN: "xvm51jw",
+    $$css: true
+  },
+  horizontalSwipeHandle: {
+    kZKoxP: "xwaiz5r",
+    kqGvvJ: "x10im51j",
+    kVAEAm: "x10l6tqk",
+    k87sOh: "xwa60dl",
+    k3aq6I: "x1cb1t30",
+    kzqmXN: "xttl3oo",
+    $$css: true
+  },
+  upSwipeHandle: {
+    krVfgx: "x19wovr1",
+    kbCHJM: "xu96u03",
+    kqGvvJ: "x10im51j",
+    kUOVxO: "xvueqy4",
+    kVAEAm: "x10l6tqk",
+    kCIrl2: "x3m8u43",
+    $$css: true
+  },
+  leftSwipeHandle: {
+    kCIrl2: "xd2chmc",
+    $$css: true
+  },
+  rightSwipeHandle: {
+    kbCHJM: "xyxdpqi",
+    $$css: true
+  },
+  header: {
+    k1xSpc: "x78zum5",
+    kXwgrk: "xdt5ytf",
+    kOIVth: "x1uj7ll3",
+    k8WAf4: "x5kd9k0",
+    kGO01o: "x16115zj",
+    kg3NbH: "x1td9pdb",
+    $$css: true
+  },
+  footer: {
+    kGNEyG: "x6s0dn4",
+    k1xSpc: "x78zum5",
+    kwnvtZ: "x1a02dak",
+    kOIVth: "x1uj7ll3",
+    kjj79g: "x1nhvcw1",
+    k8WAf4: "x5kd9k0",
+    kLKAdn: "xnsauvp",
+    kg3NbH: "x1td9pdb",
+    $$css: true
+  },
+  sideFooter: {
+    kbsgHX: "xrezwjf",
+    $$css: true
+  }
+};
+var DrawerContext = createContext({
+  overlay: "visible",
+  showSwipeHandle: false,
+  swipeDirection: "down"
+});
+function Drawer(t0) {
+  const $ = _c(15);
+  let props2;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      overlay: t1,
+      showSwipeHandle: t2,
+      swipeDirection: t3,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = props2;
+    $[2] = t1;
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    props2 = $[1];
+    t1 = $[2];
+    t2 = $[3];
+    t3 = $[4];
+  }
+  const overlay = t1 === void 0 ? "visible" : t1;
+  const showSwipeHandle = t2 === void 0 ? false : t2;
+  const swipeDirection = t3 === void 0 ? "down" : t3;
+  let t4;
+  if ($[5] !== overlay || $[6] !== showSwipeHandle || $[7] !== swipeDirection) {
+    t4 = {
+      overlay,
+      showSwipeHandle,
+      swipeDirection
+    };
+    $[5] = overlay;
+    $[6] = showSwipeHandle;
+    $[7] = swipeDirection;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== props2 || $[10] !== swipeDirection) {
+    t5 = /* @__PURE__ */ jsx(DrawerPrimitive.Root, { ...props2, swipeDirection });
+    $[9] = props2;
+    $[10] = swipeDirection;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  let t6;
+  if ($[12] !== t4 || $[13] !== t5) {
+    t6 = /* @__PURE__ */ jsx(DrawerContext.Provider, { value: t4, children: t5 });
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  return t6;
+}
+var DrawerTrigger = DrawerPrimitive.Trigger;
+var DrawerClose = DrawerPrimitive.Close;
+var DrawerPortal = DrawerPrimitive.Portal;
+function DrawerOverlay(t0) {
+  const $ = _c(15);
+  let className;
+  let props2;
+  let style;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props2;
+    $[3] = style;
+    $[4] = xstyle;
+  } else {
+    className = $[1];
+    props2 = $[2];
+    style = $[3];
+    xstyle = $[4];
+  }
+  let t1;
+  if ($[5] !== className || $[6] !== xstyle) {
+    t1 = (state) => {
+      const stylexProps = stylex.props(styles.overlay, xstyle);
+      return [stylexProps.className, typeof className === "function" ? className(state) : className].filter(Boolean).join(" ");
+    };
+    $[5] = className;
+    $[6] = xstyle;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== style || $[9] !== xstyle) {
+    t2 = (state_0) => {
+      const stylexProps_0 = stylex.props(styles.overlay, xstyle);
+      return {
+        ...stylexProps_0.style,
+        ...typeof style === "function" ? style(state_0) : style
+      };
+    };
+    $[8] = style;
+    $[9] = xstyle;
+    $[10] = t2;
+  } else {
+    t2 = $[10];
+  }
+  let t3;
+  if ($[11] !== props2 || $[12] !== t1 || $[13] !== t2) {
+    t3 = /* @__PURE__ */ jsx(DrawerPrimitive.Backdrop, { ...props2, "data-slot": "drawer-overlay", className: t1, style: t2 });
+    $[11] = props2;
+    $[12] = t1;
+    $[13] = t2;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  return t3;
+}
+function DrawerSwipeHandle(t0) {
+  const $ = _c(14);
+  let className;
+  let props2;
+  let style;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props2;
+    $[3] = style;
+    $[4] = xstyle;
+  } else {
+    className = $[1];
+    props2 = $[2];
+    style = $[3];
+    xstyle = $[4];
+  }
+  const {
+    swipeDirection
+  } = useContext(DrawerContext);
+  const isHorizontal = swipeDirection === "left" || swipeDirection === "right";
+  let t1;
+  if ($[5] !== className || $[6] !== isHorizontal || $[7] !== style || $[8] !== swipeDirection || $[9] !== xstyle) {
+    t1 = getNativeStyleProps(stylex.props(styles.swipeHandle, isHorizontal && styles.horizontalSwipeHandle, swipeDirection === "up" && styles.upSwipeHandle, swipeDirection === "left" && styles.leftSwipeHandle, swipeDirection === "right" && styles.rightSwipeHandle, xstyle), className, style);
+    $[5] = className;
+    $[6] = isHorizontal;
+    $[7] = style;
+    $[8] = swipeDirection;
+    $[9] = xstyle;
+    $[10] = t1;
+  } else {
+    t1 = $[10];
+  }
+  let t2;
+  if ($[11] !== props2 || $[12] !== t1) {
+    t2 = /* @__PURE__ */ jsx("div", { "aria-hidden": "true", "data-slot": "drawer-swipe-handle", ...props2, ...t1 });
+    $[11] = props2;
+    $[12] = t1;
+    $[13] = t2;
+  } else {
+    t2 = $[13];
+  }
+  return t2;
+}
+function getDrawerPopupStylexProps(swipeDirection, xstyle) {
+  if (swipeDirection === "right") {
+    return stylex.props(styles.popup, styles.horizontalPopup, styles.rightPopup, xstyle);
+  }
+  if (swipeDirection === "left") {
+    return stylex.props(styles.popup, styles.horizontalPopup, styles.leftPopup, xstyle);
+  }
+  if (swipeDirection === "up") {
+    return stylex.props(styles.popup, styles.verticalPopup, styles.upPopup, xstyle);
+  }
+  return stylex.props(styles.popup, styles.verticalPopup, styles.downPopup, xstyle);
+}
+function DrawerContent(t0) {
+  const $ = _c(31);
+  let children;
+  let className;
+  let props2;
+  let style;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      style,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props2;
+    $[4] = style;
+    $[5] = xstyle;
+  } else {
+    children = $[1];
+    className = $[2];
+    props2 = $[3];
+    style = $[4];
+    xstyle = $[5];
+  }
+  const {
+    overlay,
+    showSwipeHandle,
+    swipeDirection
+  } = useContext(DrawerContext);
+  let t1;
+  if ($[6] !== overlay) {
+    t1 = overlay === "none" ? null : /* @__PURE__ */ jsx(DrawerOverlay, { xstyle: overlay === "transparent" ? styles.overlayTransparent : void 0 });
+    $[6] = overlay;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t2 = {
+      className: "x10a8y8t xixxii4 xfa8aoj"
+    };
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== className || $[10] !== swipeDirection || $[11] !== xstyle) {
+    t3 = (state) => {
+      const stylexProps = getDrawerPopupStylexProps(swipeDirection, xstyle);
+      return [stylexProps.className, typeof className === "function" ? className(state) : className].filter(Boolean).join(" ");
+    };
+    $[9] = className;
+    $[10] = swipeDirection;
+    $[11] = xstyle;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  let t4;
+  if ($[13] !== style || $[14] !== swipeDirection || $[15] !== xstyle) {
+    t4 = (state_0) => {
+      const stylexProps_0 = getDrawerPopupStylexProps(swipeDirection, xstyle);
+      return {
+        ...stylexProps_0.style,
+        ...typeof style === "function" ? style(state_0) : style
+      };
+    };
+    $[13] = style;
+    $[14] = swipeDirection;
+    $[15] = xstyle;
+    $[16] = t4;
+  } else {
+    t4 = $[16];
+  }
+  let t5;
+  if ($[17] !== showSwipeHandle) {
+    t5 = showSwipeHandle ? /* @__PURE__ */ jsx(DrawerSwipeHandle, {}) : null;
+    $[17] = showSwipeHandle;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+  let t6;
+  if ($[19] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      className: "x78zum5 x98rzlu xdt5ytf x2lwn1j"
+    };
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  let t7;
+  if ($[20] !== children) {
+    t7 = /* @__PURE__ */ jsx(DrawerPrimitive.Content, { ...t6, children });
+    $[20] = children;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+  let t8;
+  if ($[22] !== props2 || $[23] !== t3 || $[24] !== t4 || $[25] !== t5 || $[26] !== t7) {
+    t8 = /* @__PURE__ */ jsx(DrawerPrimitive.Viewport, { ...t2, children: /* @__PURE__ */ jsxs(DrawerPrimitive.Popup, { ...props2, "data-slot": "drawer-popup", className: t3, style: t4, children: [
+      t5,
+      t7
+    ] }) });
+    $[22] = props2;
+    $[23] = t3;
+    $[24] = t4;
+    $[25] = t5;
+    $[26] = t7;
+    $[27] = t8;
+  } else {
+    t8 = $[27];
+  }
+  let t9;
+  if ($[28] !== t1 || $[29] !== t8) {
+    t9 = /* @__PURE__ */ jsxs(DrawerPortal, { children: [
+      t1,
+      t8
+    ] });
+    $[28] = t1;
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  return t9;
+}
+function DrawerHeader(t0) {
+  const $ = _c(12);
+  let className;
+  let props2;
+  let style;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props2;
+    $[3] = style;
+    $[4] = xstyle;
+  } else {
+    className = $[1];
+    props2 = $[2];
+    style = $[3];
+    xstyle = $[4];
+  }
+  let t1;
+  if ($[5] !== className || $[6] !== style || $[7] !== xstyle) {
+    t1 = getNativeStyleProps(stylex.props(styles.header, xstyle), className, style);
+    $[5] = className;
+    $[6] = style;
+    $[7] = xstyle;
+    $[8] = t1;
+  } else {
+    t1 = $[8];
+  }
+  let t2;
+  if ($[9] !== props2 || $[10] !== t1) {
+    t2 = /* @__PURE__ */ jsx("div", { ...props2, ...t1 });
+    $[9] = props2;
+    $[10] = t1;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
+}
+function DrawerFooter(t0) {
+  const $ = _c(13);
+  let className;
+  let props2;
+  let style;
+  let xstyle;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      xstyle,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props2;
+    $[3] = style;
+    $[4] = xstyle;
+  } else {
+    className = $[1];
+    props2 = $[2];
+    style = $[3];
+    xstyle = $[4];
+  }
+  const {
+    swipeDirection
+  } = useContext(DrawerContext);
+  const isSideDrawer = swipeDirection === "left" || swipeDirection === "right";
+  let t1;
+  if ($[5] !== className || $[6] !== isSideDrawer || $[7] !== style || $[8] !== xstyle) {
+    t1 = getNativeStyleProps(stylex.props(styles.footer, isSideDrawer && styles.sideFooter, xstyle), className, style);
+    $[5] = className;
+    $[6] = isSideDrawer;
+    $[7] = style;
+    $[8] = xstyle;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  let t2;
+  if ($[10] !== props2 || $[11] !== t1) {
+    t2 = /* @__PURE__ */ jsx("div", { ...props2, ...t1 });
+    $[10] = props2;
+    $[11] = t1;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  return t2;
+}
+function DrawerTitle(t0) {
+  const $ = _c(13);
+  let className;
+  let props2;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props2;
+    $[3] = style;
+  } else {
+    className = $[1];
+    props2 = $[2];
+    style = $[3];
+  }
+  let t1;
+  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      className: "x1alews2 x1owaoya xq1ytqg x1hfsx4t x1ghz6dp"
+    };
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const stylexProps = t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = (state) => [stylexProps.className, typeof className === "function" ? className(state) : className].filter(Boolean).join(" ");
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== style) {
+    t3 = (state_0) => ({
+      ...stylexProps.style,
+      ...typeof style === "function" ? style(state_0) : style
+    });
+    $[7] = style;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== props2 || $[10] !== t2 || $[11] !== t3) {
+    t4 = /* @__PURE__ */ jsx(DrawerPrimitive.Title, { ...props2, className: t2, style: t3 });
+    $[9] = props2;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}
+function DrawerDescription(t0) {
+  const $ = _c(13);
+  let className;
+  let props2;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      ...props2
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props2;
+    $[3] = style;
+  } else {
+    className = $[1];
+    props2 = $[2];
+    style = $[3];
+  }
+  let t1;
+  if ($[4] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      className: "x1ry1pnm x99mhxu xi1fz51 x1ghz6dp"
+    };
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  const stylexProps = t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = (state) => [stylexProps.className, typeof className === "function" ? className(state) : className].filter(Boolean).join(" ");
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== style) {
+    t3 = (state_0) => ({
+      ...stylexProps.style,
+      ...typeof style === "function" ? style(state_0) : style
+    });
+    $[7] = style;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== props2 || $[10] !== t2 || $[11] !== t3) {
+    t4 = /* @__PURE__ */ jsx(DrawerPrimitive.Description, { ...props2, className: t2, style: t3 });
+    $[9] = props2;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}
+export {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerOverlay,
+  DrawerPortal,
+  DrawerSwipeHandle,
+  DrawerTitle,
+  DrawerTrigger
+};
+//# sourceMappingURL=drawer.js.map