@contractspec/lib.ui-kit 1.57.0 → 1.59.0

package/dist/browser/ui/atoms/LoadingSpinner/LoadingSpinner.js

@@ -0,0 +1,193 @@
+// 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/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// 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 jsxDEV2 } from "react/jsx-dev-runtime";
+function H1({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(Component, {
+    className: cn3("text-muted-foreground web:select-text text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/atoms/LoadingSpinner/LoadingSpinner.tsx
+import { Loader2 } from "lucide-react";
+import { View } from "react-native";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8",
+  xl: "h-12 w-12"
+};
+var LoadingSpinner = ({
+  size = "md",
+  className,
+  text,
+  fullScreen = false
+}) => {
+  const spinner = /* @__PURE__ */ jsxDEV3(View, {
+    className: cn2("flex flex-col items-center justify-center gap-2", className),
+    children: [
+      /* @__PURE__ */ jsxDEV3(Loader2, {
+        className: cn2("text-primary-600 animate-spin", sizeClasses[size])
+      }, undefined, false, undefined, this),
+      text && /* @__PURE__ */ jsxDEV3(P, {
+        className: "animate-pulse text-base text-gray-600",
+        children: text
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+  if (fullScreen) {
+    return /* @__PURE__ */ jsxDEV3(View, {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-xs",
+      children: spinner
+    }, undefined, false, undefined, this);
+  }
+  return spinner;
+};
+var SkeletonLine = ({
+  className
+}) => /* @__PURE__ */ jsxDEV3(View, {
+  className: cn2("h-4 animate-pulse rounded-xs bg-gray-200", className)
+}, undefined, false, undefined, this);
+var SkeletonCard = ({
+  className
+}) => /* @__PURE__ */ jsxDEV3(View, {
+  className: cn2("animate-pulse space-y-3 rounded-lg bg-gray-200 p-4", className),
+  children: [
+    /* @__PURE__ */ jsxDEV3(SkeletonLine, {
+      className: "h-6 w-3/4"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV3(SkeletonLine, {
+      className: "h-4 w-full"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV3(SkeletonLine, {
+      className: "h-4 w-2/3"
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+var SkeletonTable = ({
+  rows = 5,
+  cols = 4
+}) => /* @__PURE__ */ jsxDEV3(View, {
+  className: "space-y-3",
+  children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxDEV3(View, {
+    className: "flex space-x-4",
+    children: Array.from({ length: cols }).map((_2, j) => /* @__PURE__ */ jsxDEV3(SkeletonLine, {
+      className: "flex-1"
+    }, j, false, undefined, this))
+  }, i, false, undefined, this))
+}, undefined, false, undefined, this);
+export {
+  SkeletonTable,
+  SkeletonLine,
+  SkeletonCard,
+  LoadingSpinner
+};

package/dist/browser/ui/atoms/LoadingSpinner/index.js

@@ -0,0 +1,193 @@
+// 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/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// 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 jsxDEV2 } from "react/jsx-dev-runtime";
+function H1({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(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__ */ jsxDEV2(Component, {
+    className: cn3("text-muted-foreground web:select-text text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/atoms/LoadingSpinner/LoadingSpinner.tsx
+import { Loader2 } from "lucide-react";
+import { View } from "react-native";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var sizeClasses = {
+  sm: "h-4 w-4",
+  md: "h-6 w-6",
+  lg: "h-8 w-8",
+  xl: "h-12 w-12"
+};
+var LoadingSpinner = ({
+  size = "md",
+  className,
+  text,
+  fullScreen = false
+}) => {
+  const spinner = /* @__PURE__ */ jsxDEV3(View, {
+    className: cn2("flex flex-col items-center justify-center gap-2", className),
+    children: [
+      /* @__PURE__ */ jsxDEV3(Loader2, {
+        className: cn2("text-primary-600 animate-spin", sizeClasses[size])
+      }, undefined, false, undefined, this),
+      text && /* @__PURE__ */ jsxDEV3(P, {
+        className: "animate-pulse text-base text-gray-600",
+        children: text
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+  if (fullScreen) {
+    return /* @__PURE__ */ jsxDEV3(View, {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-white/80 backdrop-blur-xs",
+      children: spinner
+    }, undefined, false, undefined, this);
+  }
+  return spinner;
+};
+var SkeletonLine = ({
+  className
+}) => /* @__PURE__ */ jsxDEV3(View, {
+  className: cn2("h-4 animate-pulse rounded-xs bg-gray-200", className)
+}, undefined, false, undefined, this);
+var SkeletonCard = ({
+  className
+}) => /* @__PURE__ */ jsxDEV3(View, {
+  className: cn2("animate-pulse space-y-3 rounded-lg bg-gray-200 p-4", className),
+  children: [
+    /* @__PURE__ */ jsxDEV3(SkeletonLine, {
+      className: "h-6 w-3/4"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV3(SkeletonLine, {
+      className: "h-4 w-full"
+    }, undefined, false, undefined, this),
+    /* @__PURE__ */ jsxDEV3(SkeletonLine, {
+      className: "h-4 w-2/3"
+    }, undefined, false, undefined, this)
+  ]
+}, undefined, true, undefined, this);
+var SkeletonTable = ({
+  rows = 5,
+  cols = 4
+}) => /* @__PURE__ */ jsxDEV3(View, {
+  className: "space-y-3",
+  children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxDEV3(View, {
+    className: "flex space-x-4",
+    children: Array.from({ length: cols }).map((_2, j) => /* @__PURE__ */ jsxDEV3(SkeletonLine, {
+      className: "flex-1"
+    }, j, false, undefined, this))
+  }, i, false, undefined, this))
+}, undefined, false, undefined, this);
+export {
+  SkeletonTable,
+  SkeletonLine,
+  SkeletonCard,
+  LoadingSpinner
+};