@nori-ui/core 1.6.0 → 1.7.0

package/dist/components/Table/index.js

@@ -1,7 +1,7 @@
 import '../../chunk-VP7DRJUZ.js';
-export { Table } from '../../chunk-WYPGQVDV.js';
-import '../../chunk-CHXHRJNZ.js';
+export { Table } from '../../chunk-5YHT252H.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Tabs/index.js

@@ -1,7 +1,7 @@
-export { Tabs } from '../../chunk-XALU6LOT.js';
+export { Tabs } from '../../chunk-EN4CLDGZ.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Text/index.js

@@ -1,7 +1,7 @@
-export { Text } from '../../chunk-JZ774T7U.js';
+export { Text } from '../../chunk-ZGFXKYA5.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/TextArea/index.js

@@ -1,8 +1,8 @@
-export { TextArea } from '../../chunk-VYRJ7OE5.js';
-import '../../chunk-NF7XG2FG.js';
+export { TextArea } from '../../chunk-USFXANEU.js';
+import '../../chunk-V75O7QQO.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/TextInput/index.js

@@ -1,7 +1,7 @@
-export { TextInput } from '../../chunk-NF7XG2FG.js';
+export { TextInput } from '../../chunk-V75O7QQO.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Toggle/index.js

@@ -1,7 +1,7 @@
-export { Toggle } from '../../chunk-MKSDYRWQ.js';
+export { Toggle } from '../../chunk-STX5UKYT.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/Tooltip/index.js

@@ -1,8 +1,8 @@
-export { Tooltip } from '../../chunk-NRYWNOG5.js';
+export { Tooltip } from '../../chunk-VL2WNGPF.js';
 import '../../chunk-ZIBNLXIV.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/components/VStack/index.js

@@ -1,9 +1,9 @@
-export { VStack } from '../../chunk-MRJWPRCX.js';
-import '../../chunk-JQQ3FBN7.js';
-import '../../chunk-JZ774T7U.js';
+export { VStack } from '../../chunk-L6VYDM7S.js';
+import '../../chunk-VLZANXRZ.js';
+import '../../chunk-ZGFXKYA5.js';
 import '../../chunk-5A2QOOVN.js';
-import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-R5JMDDCB.js';
+import '../../chunk-CHXHRJNZ.js';
 import '../../chunk-WCQVDF3K.js';
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map

package/dist/index.cjs

@@ -1649,6 +1649,24 @@ var AlertDialog = Object.assign(AlertDialogRoot, {
   Action: AlertDialogAction,
   Cancel: AlertDialogCancel
 });
+var BASE_STYLE = {
+  overflow: "hidden"
+};
+var AspectRatio = /* @__PURE__ */ __name(({ ratio, children, className, testID }) => {
+  const containerStyle = {
+    ...BASE_STYLE,
+    aspectRatio: ratio
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("overflow-hidden", className),
+      style: containerStyle,
+      children
+    }
+  );
+}, "AspectRatio");
 var SIZE_PX = {
   sm: 32,
   md: 40,
@@ -3487,7 +3505,7 @@ var SIZE_KEYS = {
   md: { padX: "4", font: "md" },
   lg: { padX: "5", font: "lg" }
 };
-var BASE_STYLE = {
+var BASE_STYLE2 = {
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "center"
@@ -3578,7 +3596,7 @@ var Button = /* @__PURE__ */ __name(({
   };
   const sizeFontSize = px(colors.fontSize[sizeKeys.font]);
   const inlineBase = [
-    BASE_STYLE,
+    BASE_STYLE2,
     { backgroundColor: stateBg },
     sizeContainer,
     { opacity: isInoperative ? 0.6 : stateInteractionOpacity }
@@ -3658,6 +3676,39 @@ var Button = /* @__PURE__ */ __name(({
     }
   );
 }, "Button");
+var ButtonGroup = /* @__PURE__ */ __name(({ children, orientation = "horizontal", size, className, testID }) => {
+  const isHorizontal = orientation === "horizontal";
+  const containerStyle = {
+    flexDirection: isHorizontal ? "row" : "column",
+    // gap: 0 so buttons touch; shared-border effect comes from CSS on web
+    // and from touching edges on native.
+    gap: 0,
+    alignSelf: "flex-start",
+    overflow: "hidden"
+  };
+  const childArray = React.Children.toArray(children).filter(React.isValidElement);
+  const total = childArray.length;
+  const clonedChildren = childArray.map((child, index) => {
+    const position = index === 0 ? "first" : index === total - 1 ? "last" : "middle";
+    const extraProps = {
+      "data-position": position,
+      "data-group-orientation": orientation
+    };
+    if (size !== void 0) {
+      extraProps["data-group-size"] = size;
+    }
+    return React.cloneElement(child, extraProps);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn(isHorizontal ? "flex-row" : "flex-col", "self-start overflow-hidden", className),
+      style: containerStyle,
+      children: clonedChildren
+    }
+  );
+}, "ButtonGroup");
 var detectLocale = /* @__PURE__ */ __name(() => {
   try {
     return new Intl.DateTimeFormat().resolvedOptions().locale;
@@ -6592,6 +6643,182 @@ var Checkbox = /* @__PURE__ */ __name(({
     }
   );
 }, "Checkbox");
+var CollapsibleContext = React.createContext(null);
+var useCollapsibleContext = /* @__PURE__ */ __name((label) => {
+  const ctx = React.useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Collapsible>.`);
+  }
+  return ctx;
+}, "useCollapsibleContext");
+var CollapsibleRoot = /* @__PURE__ */ __name(({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className,
+  testID
+}) => {
+  const baseId = React.useId();
+  const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : innerOpen;
+  const toggle = React.useCallback(() => {
+    const next = !open;
+    if (!isControlled) {
+      setInnerOpen(next);
+    }
+    onOpenChange?.(next);
+  }, [open, isControlled, onOpenChange]);
+  const ctx = React.useMemo(
+    () => ({
+      open,
+      toggle,
+      contentId: `${baseId}-content`,
+      triggerId: `${baseId}-trigger`
+    }),
+    [open, toggle, baseId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col", className),
+      style: { flexDirection: "column" },
+      children
+    }
+  ) });
+}, "CollapsibleRoot");
+var CollapsibleTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const { open, toggle, contentId, triggerId } = useCollapsibleContext("Collapsible.Trigger");
+  const colors = useThemeColors();
+  const triggerStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: px(colors.spacing["2"]),
+    paddingHorizontal: px(colors.spacing["1"])
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      id: triggerId,
+      ...testID !== void 0 ? { testID } : {},
+      role: "button",
+      accessibilityRole: "button",
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      onPress: toggle,
+      className: cn("flex-row items-center py-2 px-1", className),
+      style: triggerStyle,
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.default,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            fontWeight: colors.fontWeight.medium
+          },
+          children
+        }
+      ) : children
+    }
+  );
+}, "CollapsibleTrigger");
+var CollapsibleContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const { open, contentId, triggerId } = useCollapsibleContext("Collapsible.Content");
+  const wrapperRef = React.useRef(null);
+  const innerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const wrapper = wrapperRef.current;
+    const inner = innerRef.current;
+    if (!wrapper || !inner) {
+      return;
+    }
+    const isFirstPaint = wrapper.dataset.noriPainted !== "1";
+    wrapper.dataset.noriPainted = "1";
+    wrapper.style.overflow = "hidden";
+    wrapper.style.transitionProperty = "max-height, opacity";
+    wrapper.style.transitionDuration = "200ms";
+    wrapper.style.transitionTimingFunction = "cubic-bezier(0.16, 1, 0.3, 1)";
+    if (open) {
+      const target = inner.scrollHeight;
+      if (isFirstPaint) {
+        wrapper.style.maxHeight = `${target}px`;
+        wrapper.style.opacity = "1";
+        return;
+      }
+      wrapper.style.maxHeight = "0px";
+      wrapper.style.opacity = "0";
+      void wrapper.offsetHeight;
+      requestAnimationFrame(() => {
+        wrapper.style.maxHeight = `${target}px`;
+        wrapper.style.opacity = "1";
+      });
+    } else {
+      if (isFirstPaint) {
+        wrapper.style.maxHeight = "0px";
+        wrapper.style.opacity = "0";
+        return;
+      }
+      const current = inner.scrollHeight;
+      wrapper.style.maxHeight = `${current}px`;
+      wrapper.style.opacity = "1";
+      void wrapper.offsetHeight;
+      requestAnimationFrame(() => {
+        wrapper.style.maxHeight = "0px";
+        wrapper.style.opacity = "0";
+      });
+    }
+  }, [open]);
+  if (reactNative.Platform.OS !== "web") {
+    if (!open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        id: contentId,
+        "aria-labelledby": triggerId,
+        className: cn("flex-col", className),
+        style: { flexDirection: "column" },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ref: (node) => {
+        wrapperRef.current = node;
+      },
+      ...testID !== void 0 ? { testID } : {},
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "aria-hidden": !open,
+      className: cn("overflow-hidden", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: (node) => {
+            innerRef.current = node;
+          },
+          className: "flex-col",
+          style: { flexDirection: "column" },
+          children
+        }
+      )
+    }
+  );
+}, "CollapsibleContent");
+var Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
 var Combobox = /* @__PURE__ */ __name((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Select, { searchable: true, ...props });
 }, "Combobox");
@@ -8190,6 +8417,55 @@ var Dialog = Object.assign(DialogRoot, {
   Footer: DialogFooter,
   Close: DialogClose
 });
+var Empty = /* @__PURE__ */ __name(({ icon, title, description, action, className, testID }) => {
+  const colors = useThemeColors();
+  const containerStyle = {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["8"]),
+    paddingHorizontal: px(colors.spacing["4"])
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col items-center justify-center gap-3 py-8 px-4", className),
+      style: containerStyle,
+      children: [
+        icon != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginBottom: px(colors.spacing["1"]) }, children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.default,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.md),
+              fontWeight: colors.fontWeight.semibold,
+              textAlign: "center"
+            },
+            children: title
+          }
+        ),
+        description != null ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.muted,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal),
+              textAlign: "center"
+            },
+            children: description
+          }
+        ) : null,
+        action != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginTop: px(colors.spacing["1"]) }, children: action }) : null
+      ]
+    }
+  );
+}, "Empty");
 var FieldContext = React.createContext(null);
 var useFieldContextStrict = /* @__PURE__ */ __name((caller) => {
   const ctx = React.useContext(FieldContext);
@@ -9473,6 +9749,173 @@ var InputGroup = Object.assign(InputGroupRoot, {
   Addon: InputGroupAddon,
   Input: InputGroupInput
 });
+var Item = /* @__PURE__ */ __name(({
+  leading,
+  title,
+  description,
+  trailing,
+  chevron = false,
+  onPress,
+  disabled = false,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const isTappable = onPress !== void 0;
+  const rowStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["3"]),
+    paddingHorizontal: px(colors.spacing["4"]),
+    minHeight: 52,
+    opacity: disabled ? 0.5 : 1
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leading != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexShrink: 0 }, children: leading }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, flexDirection: "column", gap: 2 }, children: [
+      typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.default,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            fontWeight: colors.fontWeight.medium
+          },
+          numberOfLines: 1,
+          children: title
+        }
+      ) : title,
+      description != null ? typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.muted,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.xs)
+          },
+          numberOfLines: 1,
+          children: description
+        }
+      ) : description : null
+    ] }),
+    trailing != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexShrink: 0 }, children: trailing }) : null,
+    chevron ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: { flexShrink: 0 },
+        "aria-hidden": true,
+        testID: testID != null ? `${testID}-chevron` : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: {
+              fontSize: 14,
+              lineHeight: 16,
+              color: colors.semantic.text.muted,
+              // On web rn-web passes style through — transform
+              // with a rotate is the lightest-weight approach
+              // that avoids importing the full SVG icon set.
+              transform: [{ rotate: "-90deg" }]
+            },
+            children: "\u2304"
+          }
+        )
+      }
+    ) : null
+  ] });
+  if (isTappable) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        role: "button",
+        accessibilityRole: "button",
+        disabled,
+        onPress: disabled ? void 0 : onPress,
+        className: cn(
+          "flex-row items-center",
+          disabled ? "opacity-50" : "hover:bg-semantic-background-subtle active:bg-semantic-border-default",
+          className
+        ),
+        style: rowStyle,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-row items-center", className),
+      style: rowStyle,
+      children: content
+    }
+  );
+}, "Item");
+var Kbd = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? colors.color.neutral["800"] : colors.color.neutral["100"];
+  const borderColor = isDark ? colors.color.neutral["600"] : colors.color.neutral["300"];
+  const textColor = isDark ? colors.color.neutral["200"] : colors.color.neutral["700"];
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "center",
+    backgroundColor: bgColor,
+    borderWidth: 1,
+    borderColor,
+    borderRadius: px(colors.radius.sm),
+    paddingHorizontal: px(colors.spacing["1"]),
+    paddingVertical: 2,
+    // Subtle bottom shadow gives the classic key look.
+    ...reactNative.Platform.OS === "web" ? {
+      boxShadow: `0 1px 0 ${borderColor}`,
+      display: "inline-flex"
+    } : {}
+  };
+  const textStyle = {
+    color: textColor,
+    // Monospace font for key labels.
+    fontFamily: colors.fontFamily.mono ?? "monospace",
+    fontSize: px(colors.fontSize.xs),
+    fontWeight: colors.fontWeight.medium,
+    lineHeight: px(colors.fontSize.xs) * Number(colors.lineHeight.normal)
+  };
+  const extraWebProps = reactNative.Platform.OS === "web" ? {
+    // rn-web: 'none' skips the role attribute so the outer
+    // View is just a plain <div>; we rely on the inner
+    // <span> with data-kbd for semantic annotation.
+    accessibilityRole: "none"
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...extraWebProps,
+      className: cn(
+        "inline-flex flex-row items-center rounded-sm border px-1 py-0.5",
+        isDark ? "bg-neutral-800 border-neutral-600 text-neutral-200" : "bg-neutral-100 border-neutral-300 text-neutral-700",
+        className
+      ),
+      style: containerStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          ...reactNative.Platform.OS === "web" ? { "data-kbd": "" } : {},
+          accessibilityRole: "none",
+          style: textStyle,
+          children
+        }
+      )
+    }
+  );
+}, "Kbd");
 var Label = /* @__PURE__ */ __name(({ htmlFor, required = false, disabled = false, children, className, testID }) => {
   const colors = useThemeColors();
   const { t } = useTranslation();
@@ -13625,14 +14068,17 @@ __name(Icon, "Icon");
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
+exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Box = Box;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.ButtonGroup = ButtonGroup;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.Collapsible = Collapsible;
 exports.Combobox = Combobox;
 exports.ContextMenu = ContextMenu;
 exports.DataTable = DataTable;
@@ -13640,11 +14086,14 @@ exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
 exports.DropdownMenu = DropdownMenu;
+exports.Empty = Empty;
 exports.Field = Field;
 exports.FloatButton = FloatButton;
 exports.HStack = HStack;
 exports.Icon = Icon;
 exports.InputGroup = InputGroup;
+exports.Item = Item;
+exports.Kbd = Kbd;
 exports.Label = Label;
 exports.MenuContent = MenuContent;
 exports.MenuItem = MenuItem;