@nori-ui/core 0.0.5 → 1.0.2

package/dist/stories/story-registry.cjs

@@ -1,776 +0,0 @@
-'use strict';
-
-var reactNative = require('react-native');
-var jsxRuntime = require('nativewind/jsx-runtime');
-var react = require('react');
-
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
-// src/utils/cn.ts
-function cn(...inputs) {
-  const out = [];
-  for (const input of inputs) append(out, input);
-  return out.join(" ");
-}
-__name(cn, "cn");
-function append(out, input) {
-  if (!input) return;
-  if (typeof input === "string") {
-    if (input.length > 0) out.push(input);
-    return;
-  }
-  if (typeof input === "number") return;
-  if (Array.isArray(input)) {
-    for (const inner of input) append(out, inner);
-    return;
-  }
-  if (typeof input === "object") {
-    for (const key of Object.keys(input)) {
-      if (input[key]) out.push(key);
-    }
-  }
-}
-__name(append, "append");
-function Box({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ...rest, className: cn(className), children });
-}
-__name(Box, "Box");
-
-// ../tokens/build/theme.ts
-var theme = {
-  color: {
-    danger: "#ef4444",
-    neutral: {
-      "100": "#f4f4f5",
-      "200": "#e4e4e7",
-      "300": "#d4d4d8",
-      "400": "#a1a1aa",
-      "500": "#71717a",
-      "900": "#18181b"
-    },
-    primary: {
-      "600": "#2563eb"}}};
-
-// src/slot/compose-refs.ts
-function composeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (ref == null) continue;
-      if (typeof ref === "function") {
-        ref(node);
-      } else {
-        ref.current = node;
-      }
-    }
-  };
-}
-__name(composeRefs, "composeRefs");
-var Slot = react.forwardRef(/* @__PURE__ */ __name(function Slot2(props, forwardedRef) {
-  const { children, ...slotProps } = props;
-  if (!react.isValidElement(children)) {
-    return null;
-  }
-  const child = react.Children.only(children);
-  const merged = mergeProps(slotProps, child.props);
-  const childRef = child.ref;
-  if (forwardedRef || childRef) {
-    merged.ref = composeRefs(forwardedRef, childRef);
-  }
-  return react.cloneElement(child, merged);
-}, "Slot"));
-Slot.displayName = "Slot";
-function mergeProps(outer, inner) {
-  const merged = { ...outer };
-  for (const key of Object.keys(inner)) {
-    const outerValue = outer[key];
-    const innerValue = inner[key];
-    if (key === "className" || key === "class") {
-      merged[key] = joinClass(outerValue, innerValue);
-      continue;
-    }
-    if (key === "style") {
-      merged[key] = {
-        ...outerValue,
-        ...innerValue
-      };
-      continue;
-    }
-    if (isEventHandler(key, outerValue, innerValue)) {
-      merged[key] = composeHandlers(outerValue, innerValue);
-      continue;
-    }
-    merged[key] = innerValue;
-  }
-  return merged;
-}
-__name(mergeProps, "mergeProps");
-function joinClass(outer, inner) {
-  const a = typeof outer === "string" ? outer : "";
-  const b = typeof inner === "string" ? inner : "";
-  const joined = [a, b].filter(Boolean).join(" ");
-  return joined.length > 0 ? joined : void 0;
-}
-__name(joinClass, "joinClass");
-function isEventHandler(key, outer, inner) {
-  if (!key.startsWith("on") || key.length < 3) return false;
-  if (key[2] !== key[2]?.toUpperCase()) return false;
-  return typeof outer === "function" && typeof inner === "function";
-}
-__name(isEventHandler, "isEventHandler");
-function composeHandlers(outer, inner) {
-  return (...args) => {
-    outer(...args);
-    inner(...args);
-  };
-}
-__name(composeHandlers, "composeHandlers");
-var SIZE_MAP = {
-  sm: 12,
-  md: 16,
-  lg: 24,
-  xl: 32
-};
-function Spinner({ label = "Loading", size = "md", testID, color, style, ...rest }) {
-  const px = typeof size === "number" ? size : SIZE_MAP[size];
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.ActivityIndicator,
-    {
-      ...rest,
-      ...testID !== void 0 ? { testID } : {},
-      accessibilityRole: "progressbar",
-      accessibilityLabel: label,
-      ...color !== void 0 ? { color } : {},
-      size: px,
-      style: [{ width: px, height: px }, style]
-    }
-  );
-}
-__name(Spinner, "Spinner");
-var VARIANT_CLASSES = {
-  primary: "bg-semantic-interactive-primary hover:bg-semantic-interactive-primaryHover active:bg-semantic-interactive-primaryPressed",
-  secondary: "bg-neutral-100 hover:bg-neutral-200 active:bg-neutral-300",
-  ghost: "bg-transparent hover:bg-neutral-100 active:bg-neutral-200",
-  destructive: "bg-semantic-interactive-destructive hover:opacity-90 active:opacity-80"
-};
-var SIZE_CLASSES = {
-  sm: "h-8 px-3 text-sm",
-  md: "h-10 px-4 text-md",
-  lg: "h-12 px-5 text-lg"
-};
-var ICON_SIZE = { sm: 14, md: 16, lg: 20 };
-var BASE_CLASSES = "inline-flex flex-row items-center justify-center gap-2 rounded-md select-none";
-var VARIANT_STYLES = {
-  primary: { backgroundColor: theme.color.primary["600"] },
-  secondary: { backgroundColor: theme.color.neutral["100"] },
-  ghost: { backgroundColor: "transparent" },
-  destructive: { backgroundColor: theme.color.danger }
-};
-var VARIANT_TEXT_COLOR = {
-  primary: "#ffffff",
-  secondary: theme.color.neutral["900"],
-  ghost: theme.color.neutral["900"],
-  destructive: "#ffffff"
-};
-var SIZE_STYLES = {
-  sm: { container: { height: 32, paddingHorizontal: 12 }, text: { fontSize: 14 } },
-  md: { container: { height: 40, paddingHorizontal: 16 }, text: { fontSize: 16 } },
-  lg: { container: { height: 48, paddingHorizontal: 20 }, text: { fontSize: 18 } }
-};
-var BASE_STYLE = {
-  flexDirection: "row",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: 8,
-  borderRadius: 6
-};
-var Button = react.forwardRef(/* @__PURE__ */ __name(function Button2({
-  children,
-  variant = "primary",
-  size = "md",
-  disabled,
-  loading,
-  leadingIcon: LeadingIcon,
-  trailingIcon: TrailingIcon,
-  asChild,
-  className,
-  onPress,
-  testID,
-  style,
-  ...rest
-}, forwardedRef) {
-  const isInoperative = Boolean(disabled) || Boolean(loading);
-  const classes = cn(
-    BASE_CLASSES,
-    VARIANT_CLASSES[variant],
-    SIZE_CLASSES[size],
-    isInoperative ? "opacity-60" : void 0,
-    className
-  );
-  const baseInlineStyle = [
-    BASE_STYLE,
-    VARIANT_STYLES[variant],
-    SIZE_STYLES[size].container,
-    isInoperative ? { opacity: 0.6 } : null
-  ];
-  const pressableStyle = typeof style === "function" ? (state) => [baseInlineStyle, style(state)] : [baseInlineStyle, style];
-  const slotStyle = [baseInlineStyle, typeof style === "function" ? null : style];
-  const textColor = VARIANT_TEXT_COLOR[variant];
-  const textStyle = { color: textColor, fontSize: SIZE_STYLES[size].text.fontSize, fontWeight: "500" };
-  const handlePress = /* @__PURE__ */ __name((ev) => {
-    if (isInoperative) return;
-    onPress?.(ev);
-  }, "handlePress");
-  if (asChild) {
-    const slotProps = {
-      ref: forwardedRef,
-      className: classes,
-      style: slotStyle,
-      onClick: handlePress,
-      ...rest
-    };
-    if (isInoperative) slotProps["aria-disabled"] = true;
-    if (loading) slotProps["aria-busy"] = true;
-    if (testID !== void 0) slotProps["data-testid"] = testID;
-    return /* @__PURE__ */ jsxRuntime.jsx(Slot, { ...slotProps, children });
-  }
-  const pressableExtra = {};
-  if (isInoperative) pressableExtra["aria-disabled"] = true;
-  if (loading) pressableExtra["aria-busy"] = true;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.Pressable,
-    {
-      ref: forwardedRef,
-      ...testID !== void 0 ? { testID } : {},
-      role: "button",
-      accessibilityRole: "button",
-      accessibilityState: { disabled: isInoperative, busy: Boolean(loading) },
-      disabled: isInoperative,
-      onPress: handlePress,
-      className: classes,
-      style: pressableStyle,
-      ...pressableExtra,
-      ...rest,
-      children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: ICON_SIZE[size], label: "Loading", color: textColor }) : LeadingIcon ? /* @__PURE__ */ jsxRuntime.jsx(LeadingIcon, { size: ICON_SIZE[size], color: textColor }) : null,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.Text,
-          {
-            className: cn("font-medium", SIZE_CLASSES[size].includes("text-") ? void 0 : "text-md"),
-            style: textStyle,
-            children
-          }
-        ),
-        TrailingIcon ? /* @__PURE__ */ jsxRuntime.jsx(TrailingIcon, { size: ICON_SIZE[size], color: textColor }) : null
-      ]
-    }
-  );
-}, "Button"));
-Button.displayName = "Button";
-var make = /* @__PURE__ */ __name((path) => /* @__PURE__ */ __name(function PlaceholderIcon({ size = 20, color = "currentColor" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: color,
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: path })
-    }
-  );
-}, "PlaceholderIcon"), "make");
-var defaultSemanticIcons = {
-  checkmark: make("M20 6 9 17l-5-5"),
-  close: make("M18 6 6 18 M6 6l12 12"),
-  eye: make("M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z M12 9a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"),
-  eyeOff: make("M17.94 17.94A10 10 0 0 1 2 12s3.5-7 10-7c2 0 3.8.6 5.4 1.5 M1 1l22 22"),
-  chevronDown: make("m6 9 6 6 6-6"),
-  chevronUp: make("m18 15-6-6-6 6"),
-  alertTriangle: make(
-    "M12 9v4 M12 17h.01 M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"
-  ),
-  info: make(
-    "M12 8h.01 M11 12h1v4h1 M12 22C6.48 22 2 17.52 2 12 2 6.48 6.48 2 12 2c5.52 0 10 4.48 10 10 0 5.52-4.48 10-10 10z"
-  ),
-  check: make("M20 6 9 17l-5-5"),
-  x: make("M18 6 6 18 M6 6l12 12")
-};
-var SemanticIconsContext = react.createContext(defaultSemanticIcons);
-SemanticIconsContext.displayName = "SemanticIconsContext";
-
-// src/icons/use-semantic-icon.ts
-function useSemanticIcon(name) {
-  const icons = react.useContext(SemanticIconsContext);
-  return icons[name];
-}
-__name(useSemanticIcon, "useSemanticIcon");
-var ROW_STYLE = { flexDirection: "row", alignItems: "center", gap: 8 };
-var BOX_STYLE = {
-  width: 20,
-  height: 20,
-  borderRadius: 4,
-  borderWidth: 1,
-  borderColor: theme.color.neutral["300"],
-  backgroundColor: "#ffffff",
-  alignItems: "center",
-  justifyContent: "center"
-};
-var BOX_STYLE_CHECKED = {
-  backgroundColor: theme.color.primary["600"],
-  borderColor: theme.color.primary["600"]
-};
-function Checkbox({
-  checked,
-  defaultChecked = false,
-  indeterminate,
-  disabled,
-  onChange,
-  label,
-  className,
-  testID,
-  asChild,
-  children
-}) {
-  const [inner, setInner] = react.useState(defaultChecked);
-  const isControlled = checked !== void 0;
-  const value = isControlled ? Boolean(checked) : inner;
-  const ariaChecked = indeterminate ? "mixed" : value ? "true" : "false";
-  const isMarked = value || Boolean(indeterminate);
-  const toggle = react.useCallback(() => {
-    if (disabled) return;
-    const next = !value;
-    if (!isControlled) setInner(next);
-    onChange?.(next);
-  }, [disabled, value, isControlled, onChange]);
-  const Check = useSemanticIcon("checkmark");
-  const commonProps = {
-    role: "checkbox",
-    "aria-checked": ariaChecked,
-    accessibilityRole: "checkbox",
-    accessibilityState: { checked: value, disabled: Boolean(disabled) },
-    testID
-  };
-  if (disabled) commonProps["aria-disabled"] = true;
-  if (label !== void 0) {
-    commonProps["aria-label"] = label;
-    commonProps.accessibilityLabel = label;
-  }
-  if (asChild) {
-    const slotProps = {
-      role: "checkbox",
-      "aria-checked": ariaChecked,
-      onClick: toggle
-    };
-    if (disabled) slotProps["aria-disabled"] = true;
-    if (label !== void 0) slotProps["aria-label"] = label;
-    if (testID !== void 0) slotProps["data-testid"] = testID;
-    if (className !== void 0) slotProps.className = className;
-    return /* @__PURE__ */ jsxRuntime.jsx(Slot, { ...slotProps, children });
-  }
-  const boxClasses = cn("w-5 h-5 rounded-sm border border-semantic-border-strong items-center justify-center");
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.View,
-    {
-      className: cn("flex-row items-center gap-2", disabled ? "opacity-60" : void 0, className),
-      style: [ROW_STYLE, disabled ? { opacity: 0.6 } : null],
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.Pressable,
-          {
-            onPress: toggle,
-            ...commonProps,
-            className: boxClasses,
-            style: [BOX_STYLE, isMarked && !disabled ? BOX_STYLE_CHECKED : null],
-            children: isMarked && !disabled ? /* @__PURE__ */ jsxRuntime.jsx(Check, { size: 14, color: "#ffffff" }) : null
-          }
-        ),
-        children ?? (label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: theme.color.neutral["900"], fontSize: 16 }, children: label }) : null)
-      ]
-    }
-  );
-}
-__name(Checkbox, "Checkbox");
-var ALIGN_CLASS = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-var JUSTIFY_CLASS = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
-};
-function HStack({ gap, align, justify, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.View,
-    {
-      ...rest,
-      className: cn(
-        "flex-row",
-        gap !== void 0 && gap !== 0 ? `gap-${gap}` : void 0,
-        align !== void 0 ? ALIGN_CLASS[align] : void 0,
-        justify !== void 0 ? JUSTIFY_CLASS[justify] : void 0,
-        className
-      ),
-      children
-    }
-  );
-}
-__name(HStack, "HStack");
-var ROW_STYLE2 = { flexDirection: "row", alignItems: "center", gap: 8 };
-var TRACK_BASE = {
-  width: 40,
-  height: 24,
-  borderRadius: 12,
-  justifyContent: "center",
-  paddingHorizontal: 2
-};
-var THUMB_STYLE = {
-  width: 20,
-  height: 20,
-  borderRadius: 10,
-  backgroundColor: "#ffffff",
-  shadowColor: "#000",
-  shadowOpacity: 0.15,
-  shadowRadius: 2,
-  shadowOffset: { width: 0, height: 1 },
-  elevation: 2
-};
-function Switch({
-  checked,
-  defaultChecked = false,
-  disabled,
-  onChange,
-  label,
-  className,
-  testID,
-  asChild,
-  children
-}) {
-  const [inner, setInner] = react.useState(defaultChecked);
-  const isControlled = checked !== void 0;
-  const value = isControlled ? Boolean(checked) : inner;
-  const toggle = react.useCallback(() => {
-    if (disabled) return;
-    const next = !value;
-    if (!isControlled) setInner(next);
-    onChange?.(next);
-  }, [disabled, value, isControlled, onChange]);
-  const ariaChecked = value ? "true" : "false";
-  const commonProps = {
-    role: "switch",
-    "aria-checked": ariaChecked,
-    accessibilityRole: "switch",
-    accessibilityState: { checked: value, disabled: Boolean(disabled) },
-    testID
-  };
-  if (disabled) commonProps["aria-disabled"] = true;
-  if (label !== void 0) {
-    commonProps["aria-label"] = label;
-    commonProps.accessibilityLabel = label;
-  }
-  if (asChild) {
-    const slotProps = {
-      role: "switch",
-      "aria-checked": ariaChecked,
-      onClick: toggle
-    };
-    if (disabled) slotProps["aria-disabled"] = true;
-    if (label !== void 0) slotProps["aria-label"] = label;
-    if (testID !== void 0) slotProps["data-testid"] = testID;
-    if (className !== void 0) slotProps.className = className;
-    return /* @__PURE__ */ jsxRuntime.jsx(Slot, { ...slotProps, children });
-  }
-  const trackClasses = cn(
-    "w-10 h-6 rounded-full justify-center px-0.5 transition-colors",
-    value ? "bg-semantic-interactive-primary" : "bg-neutral-300",
-    disabled ? "opacity-60" : void 0
-  );
-  const thumbClasses = cn("w-5 h-5 rounded-full bg-white shadow-sm", value ? "self-end" : "self-start");
-  const trackStyle = [
-    TRACK_BASE,
-    { backgroundColor: value ? theme.color.primary["600"] : theme.color.neutral["300"] },
-    disabled ? { opacity: 0.6 } : null
-  ];
-  const thumbStyle = [THUMB_STYLE, { alignSelf: value ? "flex-end" : "flex-start" }];
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex-row items-center gap-2", className), style: ROW_STYLE2, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { onPress: toggle, ...commonProps, className: trackClasses, style: trackStyle, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: thumbClasses, style: thumbStyle }) }),
-    label ? /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Text,
-      {
-        className: "text-md text-semantic-text-default",
-        style: { color: theme.color.neutral["900"], fontSize: 16 },
-        children: label
-      }
-    ) : null,
-    children
-  ] });
-}
-__name(Switch, "Switch");
-var VARIANT_CLASSES2 = {
-  "body-xs": "text-xs leading-normal",
-  "body-sm": "text-sm leading-normal",
-  "body-md": "text-md leading-normal",
-  "body-lg": "text-lg leading-relaxed",
-  "heading-1": "text-4xl leading-tight font-bold",
-  "heading-2": "text-3xl leading-tight font-semibold",
-  "heading-3": "text-2xl leading-tight font-semibold"
-};
-var HEADING_VARIANTS = /* @__PURE__ */ new Set(["heading-1", "heading-2", "heading-3"]);
-function Text({ variant = "body-md", className, testID, children, ...rest }) {
-  const isHeading = HEADING_VARIANTS.has(variant);
-  const role = isHeading ? "header" : rest.accessibilityRole;
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.Text,
-    {
-      testID,
-      ...rest,
-      ...role !== void 0 ? { accessibilityRole: role } : {},
-      className: cn(VARIANT_CLASSES2[variant], className),
-      children
-    }
-  );
-}
-__name(Text, "Text");
-var CONTAINER_STYLE = { flexDirection: "column", gap: 4 };
-var LABEL_STYLE = { fontSize: 14, fontWeight: "500", color: theme.color.neutral["900"] };
-var FIELD_BASE_STYLE = {
-  flexDirection: "row",
-  alignItems: "center",
-  borderRadius: 6,
-  borderWidth: 1,
-  paddingHorizontal: 12
-};
-var INPUT_STYLE = {
-  flex: 1,
-  paddingVertical: 8,
-  fontSize: 16,
-  color: theme.color.neutral["900"]
-};
-var HELPER_STYLE = { fontSize: 14, color: theme.color.neutral["500"] };
-var ERROR_STYLE = { fontSize: 14, color: theme.color.danger };
-function TextInput({
-  label,
-  helperText,
-  error,
-  disabled,
-  leading,
-  trailing,
-  containerClassName,
-  className,
-  testID,
-  onChangeText,
-  multiline,
-  numberOfLines,
-  ...rest
-}) {
-  const reactId = react.useId();
-  const inputId = testID ?? `nori-ui-input-${reactId}`;
-  const describeId = `${inputId}-describe`;
-  const hasError = Boolean(error);
-  const describedBy = error || helperText ? describeId : void 0;
-  const inputExtras = {};
-  if (testID !== void 0) inputExtras.testID = testID;
-  if (label !== void 0) inputExtras.accessibilityLabel = label;
-  if (hasError) inputExtras["aria-invalid"] = true;
-  if (describedBy !== void 0) inputExtras["aria-describedby"] = describedBy;
-  if (multiline !== void 0) inputExtras.multiline = multiline;
-  if (numberOfLines !== void 0) inputExtras.numberOfLines = numberOfLines;
-  if (onChangeText !== void 0) inputExtras.onChangeText = onChangeText;
-  const fieldStyle = [
-    FIELD_BASE_STYLE,
-    { borderColor: hasError ? theme.color.danger : theme.color.neutral["200"] },
-    disabled ? { opacity: 0.6 } : null
-  ];
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { className: cn("flex flex-col gap-1", containerClassName), style: CONTAINER_STYLE, children: [
-    label !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(
-      "label",
-      {
-        htmlFor: inputId,
-        className: "text-sm font-medium text-semantic-text-default",
-        style: LABEL_STYLE,
-        children: label
-      }
-    ) : null,
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.View,
-      {
-        className: cn(
-          "flex-row items-center rounded-md border px-3",
-          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
-          disabled ? "opacity-60" : void 0
-        ),
-        style: fieldStyle,
-        children: [
-          leading ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "mr-2", style: { marginRight: 8 }, children: leading }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(
-            reactNative.TextInput,
-            {
-              nativeID: inputId,
-              editable: !disabled,
-              className: cn("flex-1 py-2 text-md text-semantic-text-default outline-none", className),
-              style: INPUT_STYLE,
-              placeholderTextColor: theme.color.neutral["400"],
-              ...inputExtras,
-              ...rest
-            }
-          ),
-          trailing ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { className: "ml-2", style: { marginLeft: 8 }, children: trailing }) : null
-        ]
-      }
-    ),
-    error ? /* @__PURE__ */ jsxRuntime.jsx(
-      reactNative.Text,
-      {
-        nativeID: describeId,
-        className: "text-sm text-semantic-interactive-destructive",
-        style: ERROR_STYLE,
-        children: error
-      }
-    ) : helperText ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { nativeID: describeId, className: "text-sm text-semantic-text-muted", style: HELPER_STYLE, children: helperText }) : null
-  ] });
-}
-__name(TextInput, "TextInput");
-function TextArea({ numberOfLines = 4, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TextInput, { multiline: true, numberOfLines, ...rest });
-}
-__name(TextArea, "TextArea");
-var ALIGN_CLASS2 = {
-  start: "items-start",
-  center: "items-center",
-  end: "items-end",
-  stretch: "items-stretch",
-  baseline: "items-baseline"
-};
-var JUSTIFY_CLASS2 = {
-  start: "justify-start",
-  center: "justify-center",
-  end: "justify-end",
-  between: "justify-between",
-  around: "justify-around",
-  evenly: "justify-evenly"
-};
-function VStack({ gap, align, justify, className, children, ...rest }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.View,
-    {
-      ...rest,
-      className: cn(
-        "flex-col",
-        gap !== void 0 && gap !== 0 ? `gap-${gap}` : void 0,
-        align !== void 0 ? ALIGN_CLASS2[align] : void 0,
-        justify !== void 0 ? JUSTIFY_CLASS2[justify] : void 0,
-        className
-      ),
-      children
-    }
-  );
-}
-__name(VStack, "VStack");
-var stories = [
-  {
-    id: "text.body-md",
-    title: "Text \xB7 body-md",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Text, { testID: "story-text-body-md", children: "Hello world" }), "render")
-  },
-  {
-    id: "text.heading-1",
-    title: "Text \xB7 heading-1",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "heading-1", testID: "story-text-heading-1", children: "Heading" }), "render")
-  },
-  {
-    id: "box.default",
-    title: "Box \xB7 default",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Box, { testID: "story-box-default", className: "p-4 bg-primary-50 rounded-md", children: /* @__PURE__ */ jsxRuntime.jsx(Text, { children: "Box content" }) }), "render")
-  },
-  {
-    id: "hstack.gap-4",
-    title: "HStack \xB7 gap 4",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsxs(HStack, { testID: "story-hstack-gap-4", gap: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: "story-hstack-a", style: { padding: 8, backgroundColor: "#dbeafe" }, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { children: "A" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: "story-hstack-b", style: { padding: 8, backgroundColor: "#bfdbfe" }, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { children: "B" }) })
-    ] }), "render")
-  },
-  {
-    id: "vstack.gap-4",
-    title: "VStack \xB7 gap 4",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsxs(VStack, { testID: "story-vstack-gap-4", gap: 4, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: "story-vstack-a", style: { padding: 8, backgroundColor: "#dbeafe" }, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { children: "A" }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { testID: "story-vstack-b", style: { padding: 8, backgroundColor: "#bfdbfe" }, children: /* @__PURE__ */ jsxRuntime.jsx(Text, { children: "B" }) })
-    ] }), "render")
-  },
-  {
-    id: "spinner.md",
-    title: "Spinner \xB7 md",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Spinner, { testID: "story-spinner-md", size: "md" }), "render")
-  },
-  {
-    id: "spinner.lg",
-    title: "Spinner \xB7 lg",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Spinner, { testID: "story-spinner-lg", size: "lg" }), "render")
-  },
-  {
-    id: "button.primary",
-    title: "Button \xB7 primary",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Button, { testID: "story-button-primary", children: "Click me" }), "render")
-  },
-  {
-    id: "button.destructive",
-    title: "Button \xB7 destructive",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Button, { testID: "story-button-destructive", variant: "destructive", children: "Delete" }), "render")
-  },
-  {
-    id: "button.loading",
-    title: "Button \xB7 loading",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Button, { testID: "story-button-loading", loading: true, children: "Saving" }), "render")
-  },
-  {
-    id: "text-input.default",
-    title: "TextInput \xB7 default",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(TextInput, { testID: "story-text-input-default", label: "Email", placeholder: "you@example.com" }), "render")
-  },
-  {
-    id: "text-input.error",
-    title: "TextInput \xB7 error",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(TextInput, { testID: "story-text-input-error", label: "Email", error: "Required" }), "render")
-  },
-  {
-    id: "text-area.default",
-    title: "TextArea \xB7 default",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(TextArea, { testID: "story-text-area-default", label: "Bio", numberOfLines: 3 }), "render")
-  },
-  {
-    id: "checkbox.default",
-    title: "Checkbox \xB7 default",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { testID: "story-checkbox-default", label: "Accept" }), "render")
-  },
-  {
-    id: "checkbox.checked",
-    title: "Checkbox \xB7 checked",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { testID: "story-checkbox-checked", label: "Accept", defaultChecked: true }), "render")
-  },
-  {
-    id: "switch.default",
-    title: "Switch \xB7 default",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Switch, { testID: "story-switch-default", label: "Dark mode" }), "render")
-  },
-  {
-    id: "switch.on",
-    title: "Switch \xB7 on",
-    render: /* @__PURE__ */ __name(() => /* @__PURE__ */ jsxRuntime.jsx(Switch, { testID: "story-switch-on", label: "Dark mode", defaultChecked: true }), "render")
-  }
-];
-
-exports.stories = stories;
-//# sourceMappingURL=story-registry.cjs.map
-//# sourceMappingURL=story-registry.cjs.map