@nori-ui/core 1.3.0 → 1.4.0

package/dist/index.cjs

@@ -10644,6 +10644,436 @@ var Separator = /* @__PURE__ */ __name(({
     }
   );
 }, "Separator");
+var SIZE_PERCENT = {
+  sm: "25%",
+  md: "50%",
+  lg: "75%",
+  full: "100%"
+};
+var SheetContext = React.createContext(null);
+var useSheetContext = /* @__PURE__ */ __name((label) => {
+  const ctx = React.useContext(SheetContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Sheet>.`);
+  }
+  return ctx;
+}, "useSheetContext");
+var SheetRoot = /* @__PURE__ */ __name(({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  side = "bottom",
+  size = "md",
+  dismissible = true,
+  children
+}) => {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const baseId = React.useId();
+  const triggerRef = React.useRef(null);
+  const ctxValue = {
+    open: current,
+    setOpen,
+    titleId: `${baseId}-title`,
+    descriptionId: `${baseId}-description`,
+    triggerRef,
+    side,
+    size,
+    dismissible
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: ctxValue, children });
+}, "SheetRoot");
+var SheetTrigger = /* @__PURE__ */ __name(({ asChild = true, children, className, testID }) => {
+  const ctx = useSheetContext("SheetTrigger");
+  const onPress = React.useCallback(() => ctx.setOpen(true), [ctx]);
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      ctx.setOpen(true);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          ctx.triggerRef.current = node;
+        },
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        ctx.triggerRef.current = node;
+      },
+      onPress,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: wrapStringChildren5(children)
+    }
+  );
+}, "SheetTrigger");
+var SheetHeader = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("flex-col gap-1", className),
+      style: {
+        flexDirection: "column",
+        gap: px(colors.spacing["1"]),
+        paddingHorizontal: px(colors.spacing["6"]),
+        paddingTop: px(colors.spacing["6"]),
+        paddingBottom: px(colors.spacing["2"])
+      },
+      children
+    }
+  );
+}, "SheetHeader");
+var SheetTitle = /* @__PURE__ */ __name(({ children, className }) => {
+  const ctx = useSheetContext("SheetTitle");
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      nativeID: ctx.titleId,
+      id: ctx.titleId,
+      role: "heading",
+      "aria-level": 2,
+      className: cn("text-lg font-semibold text-semantic-text-default", className),
+      style: {
+        color: colors.semantic.text.default,
+        fontFamily: colors.fontFamily.display,
+        fontSize: px(colors.fontSize.lg),
+        fontWeight: colors.fontWeight.semibold
+      },
+      children
+    }
+  );
+}, "SheetTitle");
+var SheetDescription = /* @__PURE__ */ __name(({ children, className }) => {
+  const ctx = useSheetContext("SheetDescription");
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      nativeID: ctx.descriptionId,
+      id: ctx.descriptionId,
+      className: cn("text-sm text-semantic-text-muted", className),
+      style: {
+        color: colors.semantic.text.muted,
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm),
+        lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal)
+      },
+      children
+    }
+  );
+}, "SheetDescription");
+var SheetBody = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("flex-1", className),
+      style: {
+        flex: 1,
+        paddingHorizontal: px(colors.spacing["6"]),
+        paddingVertical: px(colors.spacing["4"])
+      },
+      children
+    }
+  );
+}, "SheetBody");
+var SheetFooter = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("flex-row items-center justify-end gap-2", className),
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: px(colors.spacing["2"]),
+        paddingHorizontal: px(colors.spacing["6"]),
+        paddingBottom: px(colors.spacing["6"]),
+        paddingTop: px(colors.spacing["2"])
+      },
+      children
+    }
+  );
+}, "SheetFooter");
+var SheetClose = /* @__PURE__ */ __name(({
+  asChild = true,
+  children,
+  className,
+  testID,
+  accessibilityLabel = "Close"
+}) => {
+  const ctx = useSheetContext("SheetClose");
+  const onPress = React.useCallback(() => ctx.setOpen(false), [ctx]);
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      ctx.setOpen(false);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress,
+      role: "button",
+      accessibilityRole: "button",
+      accessibilityLabel,
+      "aria-label": accessibilityLabel,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: wrapStringChildren5(children)
+    }
+  );
+}, "SheetClose");
+function wrapStringChildren5(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children });
+  }
+  return children;
+}
+__name(wrapStringChildren5, "wrapStringChildren");
+var SCRIM_COLOR3 = "rgba(0, 0, 0, 0.40)";
+var FOCUSABLE_SELECTOR3 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var SheetPanel = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useSheetContext("SheetPanel");
+  const colors = useThemeColors();
+  const panelRef = React.useRef(null);
+  const overlayDomRef = React.useRef(null);
+  const [entered, setEntered] = React.useState(false);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      setEntered(true);
+      return;
+    }
+    if (!ctx.open) {
+      setEntered(false);
+      return;
+    }
+    const id = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(id);
+  }, [ctx.open]);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const node = overlayDomRef.current;
+    if (!node) {
+      return;
+    }
+    node.style.transitionProperty = "background-color";
+    node.style.transitionDuration = "200ms";
+    node.style.transitionTimingFunction = "ease-out";
+    node.style.backgroundColor = entered ? SCRIM_COLOR3 : "rgba(0,0,0,0)";
+  }, [entered]);
+  React.useEffect(() => {
+    if (!ctx.open || reactNative.Platform.OS !== "web" || typeof document === "undefined") {
+      return;
+    }
+    const previouslyFocused = document.activeElement;
+    const prevBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const focusFirst = /* @__PURE__ */ __name(() => {
+      const node = panelRef.current;
+      if (!node) {
+        return;
+      }
+      const focusable = node.querySelectorAll(FOCUSABLE_SELECTOR3);
+      const first = focusable[0];
+      if (first) {
+        first.focus();
+      } else {
+        node.setAttribute("tabindex", "-1");
+        node.focus();
+      }
+    }, "focusFirst");
+    focusFirst();
+    const onKeyDown = /* @__PURE__ */ __name((event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        ctx.setOpen(false);
+        return;
+      }
+      if (event.key !== "Tab") {
+        return;
+      }
+      const node = panelRef.current;
+      if (!node) {
+        return;
+      }
+      const focusable = Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR3)).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement
+      );
+      if (focusable.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (!first || !last) {
+        return;
+      }
+      if (event.shiftKey) {
+        if (document.activeElement === first || !node.contains(document.activeElement)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }, "onKeyDown");
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prevBodyOverflow;
+      const restoreTo = ctx.triggerRef.current ?? previouslyFocused;
+      restoreTo?.focus?.();
+    };
+  }, [ctx.open, ctx.setOpen, ctx.triggerRef]);
+  const onBackdropPress = React.useCallback(() => {
+    if (ctx.dismissible) {
+      ctx.setOpen(false);
+    }
+  }, [ctx]);
+  const isHorizontal = ctx.side === "left" || ctx.side === "right";
+  const dim = typeof ctx.size === "number" ? ctx.size : SIZE_PERCENT[ctx.size];
+  const panelStyle = {
+    position: "absolute",
+    backgroundColor: colors.semantic.background.elevated,
+    ...isHorizontal ? { top: 0, bottom: 0 } : { left: 0, right: 0 },
+    ...ctx.side === "bottom" && { bottom: 0 },
+    ...ctx.side === "top" && { top: 0 },
+    ...ctx.side === "left" && { left: 0 },
+    ...ctx.side === "right" && { right: 0 }
+  };
+  const translateStyle = reactNative.Platform.OS === "web" ? {
+    transform: entered ? "translateX(0) translateY(0)" : translateOffscreen(ctx.side),
+    transitionProperty: "transform",
+    transitionDuration: "280ms",
+    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
+  } : {};
+  const overlayStyle = {
+    position: reactNative.Platform.OS === "web" ? "fixed" : "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    ...reactNative.Platform.OS === "web" ? { zIndex: 50 } : { backgroundColor: SCRIM_COLOR3 }
+  };
+  const sizeStyle = isHorizontal ? { width: dim, height: "100%" } : { height: dim, width: "100%" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Modal,
+    {
+      visible: ctx.open,
+      transparent: true,
+      animationType: reactNative.Platform.OS === "web" ? "none" : ctx.side === "bottom" || ctx.side === "top" ? "slide" : "fade",
+      onRequestClose: () => ctx.setOpen(false),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "none",
+          "aria-hidden": true,
+          ref: (node) => {
+            overlayDomRef.current = node;
+          },
+          style: overlayStyle,
+          onPress: onBackdropPress,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              onPress: (event) => event.stopPropagation?.(),
+              ref: (node) => {
+                panelRef.current = node;
+              },
+              role: "dialog",
+              accessibilityRole: "none",
+              "aria-modal": true,
+              "aria-labelledby": ctx.titleId,
+              "aria-describedby": ctx.descriptionId,
+              "data-side": ctx.side,
+              ...testID !== void 0 ? { testID } : {},
+              className: cn("bg-semantic-background-elevated", className),
+              style: [
+                panelStyle,
+                sizeStyle,
+                translateStyle,
+                {
+                  shadowColor: "#000",
+                  shadowOffset: { width: 0, height: -2 },
+                  shadowOpacity: 0.15,
+                  shadowRadius: 20,
+                  elevation: 24,
+                  ...ctx.side === "bottom" ? { borderTopLeftRadius: 16, borderTopRightRadius: 16 } : {},
+                  ...ctx.side === "top" ? { borderBottomLeftRadius: 16, borderBottomRightRadius: 16 } : {}
+                }
+              ],
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}, "SheetPanel");
+var Sheet = Object.assign(SheetRoot, {
+  Trigger: SheetTrigger,
+  Panel: SheetPanel,
+  Header: SheetHeader,
+  Title: SheetTitle,
+  Description: SheetDescription,
+  Body: SheetBody,
+  Footer: SheetFooter,
+  Close: SheetClose
+});
+var Drawer = Sheet;
+function translateOffscreen(side) {
+  switch (side) {
+    case "bottom":
+      return "translateY(100%)";
+    case "top":
+      return "translateY(-100%)";
+    case "left":
+      return "translateX(-100%)";
+    case "right":
+      return "translateX(100%)";
+  }
+}
+__name(translateOffscreen, "translateOffscreen");
 var PULSE_DURATION_MS = 900;
 var PULSE_MIN = 0.55;
 var PULSE_MAX = 1;
@@ -12557,17 +12987,17 @@ var TooltipTrigger = /* @__PURE__ */ __name(({ asChild = true, children, classNa
       },
       ...testID !== void 0 ? { testID } : {},
       ...className !== void 0 ? { className } : {},
-      children: wrapStringChildren5(children)
+      children: wrapStringChildren6(children)
     }
   );
 }, "TooltipTrigger");
-function wrapStringChildren5(children) {
+function wrapStringChildren6(children) {
   if (typeof children === "string" || typeof children === "number") {
     return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children });
   }
   return children;
 }
-__name(wrapStringChildren5, "wrapStringChildren");
+__name(wrapStringChildren6, "wrapStringChildren");
 var GAP2 = 4;
 var MIN_WIDTH2 = 0;
 function computePosition2(rect, side, align, contentSize) {
@@ -12875,6 +13305,7 @@ exports.Checkbox = Checkbox;
 exports.ContextMenu = ContextMenu;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
+exports.Drawer = Drawer;
 exports.DropdownMenu = DropdownMenu;
 exports.Field = Field;
 exports.FloatButton = FloatButton;
@@ -12894,6 +13325,15 @@ exports.Radio = Radio;
 exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.Separator = Separator;
+exports.Sheet = Sheet;
+exports.SheetBody = SheetBody;
+exports.SheetClose = SheetClose;
+exports.SheetDescription = SheetDescription;
+exports.SheetFooter = SheetFooter;
+exports.SheetHeader = SheetHeader;
+exports.SheetPanel = SheetPanel;
+exports.SheetTitle = SheetTitle;
+exports.SheetTrigger = SheetTrigger;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.SliderGestureProvider = SliderGestureProvider;