@contractspec/lib.ui-kit 1.57.0 → 1.59.0

package/dist/browser/ui/loading-overlay.js

@@ -0,0 +1,398 @@
+// ui/text.tsx
+import * as Slot from "@rn-primitives/slot";
+import * as React from "react";
+import { Text as RNText } from "react-native";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var TextClassContext = React.createContext(undefined);
+function Text2({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const textClass = React.useContext(TextClassContext);
+  const Component = asChild ? Slot.Text : RNText;
+  return /* @__PURE__ */ jsxDEV(Component, {
+    className: cn("text-foreground web:select-text text-base", textClass, className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/stack.tsx
+import { View } from "react-native";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { cva } from "class-variance-authority";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var baseStyle = "flex";
+var vStackVariants = cva([baseStyle, "flex-col"], {
+  variants: {
+    spacing: {
+      none: "",
+      xs: "gap-y-1",
+      sm: "gap-y-2",
+      md: "gap-y-4",
+      lg: "gap-y-6",
+      xl: "gap-y-8",
+      "2xl": "gap-y-12"
+    },
+    align: {
+      stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    width: {
+      auto: "w-auto",
+      full: "w-full",
+      screen: "w-screen",
+      fit: "w-fit"
+    },
+    padding: {
+      none: "",
+      xs: "p-1",
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8"
+    },
+    gap: {
+      none: "",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    }
+  },
+  defaultVariants: {
+    spacing: "md",
+    align: "stretch",
+    justify: "start",
+    width: "auto",
+    padding: "none",
+    gap: "none"
+  }
+});
+var hStackVariants = cva([baseStyle, "flex-row"], {
+  variants: {
+    spacing: {
+      none: "",
+      xs: "gap-x-1",
+      sm: "gap-x-2",
+      md: "gap-x-4",
+      lg: "gap-x-6",
+      xl: "gap-x-8",
+      "2xl": "gap-x-12"
+    },
+    align: {
+      stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    width: {
+      auto: "w-auto",
+      full: "w-full",
+      screen: "w-screen",
+      fit: "w-fit"
+    },
+    padding: {
+      none: "",
+      xs: "p-1",
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8"
+    },
+    gap: {
+      none: "",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    },
+    wrap: {
+      nowrap: "flex-nowrap",
+      wrap: "flex-wrap",
+      reverse: "flex-wrap-reverse"
+    }
+  },
+  defaultVariants: {
+    spacing: "md",
+    align: "center",
+    justify: "start",
+    width: "auto",
+    padding: "none",
+    gap: "none",
+    wrap: "wrap"
+  }
+});
+var boxVariants = cva([baseStyle, "flex-row"], {
+  variants: {
+    spacing: {
+      none: "",
+      xs: "gap-x-1",
+      sm: "gap-x-2",
+      md: "gap-x-4",
+      lg: "gap-x-6",
+      xl: "gap-x-8",
+      "2xl": "gap-x-12"
+    },
+    align: {
+      stretch: "items-stretch",
+      start: "items-start",
+      center: "items-center",
+      end: "items-end",
+      baseline: "items-baseline"
+    },
+    justify: {
+      start: "justify-start",
+      center: "justify-center",
+      end: "justify-end",
+      between: "justify-between",
+      around: "justify-around",
+      evenly: "justify-evenly"
+    },
+    width: {
+      auto: "w-auto",
+      full: "w-full",
+      screen: "w-screen",
+      fit: "w-fit"
+    },
+    padding: {
+      none: "",
+      xs: "p-1",
+      sm: "p-2",
+      md: "p-4",
+      lg: "p-6",
+      xl: "p-8"
+    },
+    gap: {
+      none: "",
+      xs: "gap-1",
+      sm: "gap-2",
+      md: "gap-4",
+      lg: "gap-6",
+      xl: "gap-8"
+    },
+    wrap: {
+      nowrap: "flex-nowrap",
+      wrap: "flex-wrap",
+      reverse: "flex-wrap-reverse"
+    }
+  },
+  defaultVariants: {
+    spacing: "md",
+    align: "center",
+    justify: "center",
+    width: "auto",
+    padding: "none",
+    gap: "none",
+    wrap: "wrap"
+  }
+});
+function Box({
+  className,
+  spacing,
+  align,
+  justify,
+  width,
+  padding,
+  gap,
+  wrap,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(View, {
+    className: cn2(boxVariants({ spacing, align, justify, width, padding, gap, wrap }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function HStack({
+  className,
+  spacing,
+  align,
+  justify,
+  width,
+  padding,
+  gap,
+  wrap,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(View, {
+    className: cn2(hStackVariants({ spacing, align, justify, width, padding, gap, wrap }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function VStack({
+  className,
+  spacing,
+  align,
+  justify,
+  width,
+  padding,
+  gap,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(View, {
+    className: cn2(vStackVariants({ spacing, align, justify, width, padding, gap }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/typography.tsx
+import * as Slot2 from "@rn-primitives/slot";
+import { Platform } from "react-native";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function H1({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    role: "heading",
+    "aria-level": "1",
+    className: cn3("text-foreground web:select-text web:scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function H2({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    role: "heading",
+    "aria-level": "2",
+    className: cn3("border-border text-foreground web:select-text web:scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function H3({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    role: "heading",
+    "aria-level": "3",
+    className: cn3("text-foreground web:select-text web:scroll-m-20 text-2xl font-semibold tracking-tight", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function H4({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    role: "heading",
+    "aria-level": "4",
+    className: cn3("text-foreground web:select-text web:scroll-m-20 text-xl font-semibold tracking-tight", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function P({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    className: cn3("text-foreground web:select-text text-base", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function BlockQuote({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    role: Platform.OS === "web" ? "blockquote" : undefined,
+    className: cn3("native:mt-4 native:pl-3 border-border text-foreground web:select-text mt-6 border-l-2 pl-6 text-base italic", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function Code({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    role: Platform.OS === "web" ? "code" : undefined,
+    className: cn3("bg-muted text-foreground web:select-text relative rounded-md px-[0.3rem] py-[0.2rem] text-sm font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function Lead({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    className: cn3("text-muted-foreground web:select-text text-xl", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function Large({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    className: cn3("text-foreground web:select-text text-xl font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function Small({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    className: cn3("text-foreground web:select-text text-sm leading-none font-medium", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function Muted({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV3(Component, {
+    className: cn3("text-muted-foreground web:select-text text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/loading-overlay.tsx
+import { ActivityIndicator, View as View2 } from "react-native";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function LoadingOverlay({
+  isVisible,
+  title = "Loading...",
+  subtitle
+}) {
+  if (!isVisible)
+    return null;
+  return /* @__PURE__ */ jsxDEV4(View2, {
+    style: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: "rgba(255, 255, 255, 0.9)",
+      justifyContent: "center",
+      alignItems: "center",
+      zIndex: 1000
+    },
+    children: /* @__PURE__ */ jsxDEV4(VStack, {
+      className: "items-center gap-y-4",
+      children: [
+        /* @__PURE__ */ jsxDEV4(ActivityIndicator, {
+          size: "large",
+          color: "#6b7280"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV4(VStack, {
+          className: "items-center gap-y-2",
+          children: [
+            /* @__PURE__ */ jsxDEV4(H3, {
+              className: "text-center",
+              children: title
+            }, undefined, false, undefined, this),
+            subtitle && /* @__PURE__ */ jsxDEV4(Text2, {
+              className: "text-muted-foreground text-center",
+              children: subtitle
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  LoadingOverlay
+};