@contractspec/lib.ui-kit 1.56.1 → 1.58.0

package/dist/browser/index.js

@@ -0,0 +1,5 @@
+// index.ts
+var ui_kit_default = {};
+export {
+  ui_kit_default as default
+};

package/dist/browser/ui/accordion.js

@@ -0,0 +1,160 @@
+// ui/icons/iconWithClassName.ts
+import { styled } from "nativewind";
+function iconWithClassName(icon) {
+  styled(icon, {
+    className: {
+      target: "style",
+      nativeStyleMapping: {
+        color: true,
+        opacity: true
+      }
+    }
+  });
+}
+
+// ui/icons/ChevronDown.tsx
+import { ChevronDown } from "lucide-react-native";
+iconWithClassName(ChevronDown);
+// 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/accordion.tsx
+import * as AccordionPrimitive from "@rn-primitives/accordion";
+import { Platform, Pressable, View } from "react-native";
+import Animated, {
+  Extrapolation,
+  FadeIn,
+  FadeOutUp,
+  interpolate,
+  LayoutAnimationConfig,
+  LinearTransition,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming
+} from "react-native-reanimated";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function Accordion({
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(LayoutAnimationConfig, {
+    skipEntering: true,
+    children: /* @__PURE__ */ jsxDEV2(AccordionPrimitive.Root, {
+      ...props,
+      asChild: Platform.OS !== "web",
+      children: /* @__PURE__ */ jsxDEV2(Animated.View, {
+        layout: LinearTransition.duration(200),
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function AccordionItem({
+  className,
+  value,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(Animated.View, {
+    className: "overflow-hidden",
+    layout: LinearTransition.duration(200),
+    children: /* @__PURE__ */ jsxDEV2(AccordionPrimitive.Item, {
+      className: cn2("border-border border-b", className),
+      value,
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var Trigger2 = Platform.OS === "web" ? View : Pressable;
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+  const progress = useDerivedValue(() => isExpanded ? withTiming(1, { duration: 250 }) : withTiming(0, { duration: 200 }));
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${progress.value * 180}deg` }],
+    opacity: interpolate(progress.value, [0, 1], [1, 0.8], Extrapolation.CLAMP)
+  }));
+  return /* @__PURE__ */ jsxDEV2(TextClassContext.Provider, {
+    value: "native:text-lg font-medium web:group-hover:underline",
+    children: /* @__PURE__ */ jsxDEV2(AccordionPrimitive.Header, {
+      className: "flex",
+      children: /* @__PURE__ */ jsxDEV2(AccordionPrimitive.Trigger, {
+        ...props,
+        asChild: true,
+        children: /* @__PURE__ */ jsxDEV2(Trigger2, {
+          className: cn2("group web:flex-1 web:transition-all web:focus-visible:outline-hidden web:focus-visible:ring-1 web:focus-visible:ring-muted-foreground flex flex-row items-center justify-between py-4", className),
+          children: [
+            children,
+            /* @__PURE__ */ jsxDEV2(Animated.View, {
+              style: chevronStyle,
+              children: /* @__PURE__ */ jsxDEV2(ChevronDown, {
+                size: 18,
+                className: "text-foreground shrink-0"
+              }, undefined, false, undefined, this)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  const { isExpanded } = AccordionPrimitive.useItemContext();
+  return /* @__PURE__ */ jsxDEV2(TextClassContext.Provider, {
+    value: "native:text-lg",
+    children: /* @__PURE__ */ jsxDEV2(AccordionPrimitive.Content, {
+      className: cn2("web:transition-all overflow-hidden text-sm", isExpanded ? "web:animate-accordion-down" : "web:animate-accordion-up"),
+      ...props,
+      children: /* @__PURE__ */ jsxDEV2(InnerContent, {
+        className: cn2("pb-4", className),
+        children
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function InnerContent({
+  children,
+  className
+}) {
+  if (Platform.OS === "web") {
+    return /* @__PURE__ */ jsxDEV2(View, {
+      className: cn2("pb-4", className),
+      children
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV2(Animated.View, {
+    entering: FadeIn,
+    exiting: FadeOutUp.duration(200),
+    className: cn2("pb-4", className),
+    children
+  }, undefined, false, undefined, this);
+}
+export {
+  AccordionTrigger,
+  AccordionItem,
+  AccordionContent,
+  Accordion
+};

package/dist/browser/ui/alert-dialog.js

@@ -0,0 +1,205 @@
+// 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/button.tsx
+import { cva } from "class-variance-authority";
+import { Pressable } from "react-native";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var buttonVariants = cva("group flex items-center justify-center rounded-md web:ring-offset-background web:transition-colors web:focus-visible:outline-hidden web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2", {
+  variants: {
+    variant: {
+      default: "bg-primary web:hover:opacity-90 active:opacity-90",
+      destructive: "bg-destructive web:hover:opacity-90 active:opacity-90",
+      outline: "border border-input bg-background web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+      secondary: "bg-secondary web:hover:opacity-80 active:opacity-80",
+      ghost: "web:hover:bg-accent web:hover:text-accent-foreground active:bg-accent",
+      link: "web:underline-offset-4 web:hover:underline web:focus:underline"
+    },
+    size: {
+      default: "h-10 px-4 py-2 native:h-12 native:px-5 native:py-3",
+      sm: "h-9 rounded-md px-3",
+      lg: "h-11 rounded-md px-8 native:h-14",
+      icon: "h-10 w-10"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var buttonTextVariants = cva("web:whitespace-nowrap text-sm native:text-base font-medium text-foreground web:transition-colors", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      destructive: "text-destructive-foreground",
+      outline: "group-active:text-accent-foreground",
+      secondary: "text-secondary-foreground group-active:text-secondary-foreground",
+      ghost: "group-active:text-accent-foreground",
+      link: "text-primary group-active:underline"
+    },
+    size: {
+      default: "",
+      sm: "",
+      lg: "native:text-lg",
+      icon: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+function Button({ ref, className, variant, size, ...props }) {
+  return /* @__PURE__ */ jsxDEV2(TextClassContext.Provider, {
+    value: buttonTextVariants({
+      variant,
+      size,
+      className: "web:pointer-events-none"
+    }),
+    children: /* @__PURE__ */ jsxDEV2(Pressable, {
+      className: cn2(props.disabled && "web:pointer-events-none opacity-50", buttonVariants({ variant, size, className })),
+      ref,
+      role: "button",
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// ui/alert-dialog.tsx
+import * as AlertDialogPrimitive from "@rn-primitives/alert-dialog";
+import { Platform, View } from "react-native";
+import Animated, { FadeIn, FadeOut } from "react-native-reanimated";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogPortal = AlertDialogPrimitive.Portal;
+function AlertDialogOverlayWeb({
+  className,
+  ...props
+}) {
+  const { open } = AlertDialogPrimitive.useRootContext();
+  return /* @__PURE__ */ jsxDEV3(AlertDialogPrimitive.Overlay, {
+    className: cn3("absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-black/80 p-2", open ? "web:animate-in web:fade-in-0" : "web:animate-out web:fade-out-0", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function AlertDialogOverlayNative({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(AlertDialogPrimitive.Overlay, {
+    className: cn3("absolute top-0 right-0 bottom-0 left-0 z-50 flex items-center justify-center bg-black/80 p-2", className),
+    ...props,
+    asChild: true,
+    children: /* @__PURE__ */ jsxDEV3(Animated.View, {
+      entering: FadeIn.duration(150),
+      exiting: FadeOut.duration(150),
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var AlertDialogOverlay = Platform.select({
+  web: AlertDialogOverlayWeb,
+  default: AlertDialogOverlayNative
+});
+function AlertDialogContent({
+  className,
+  portalHost,
+  ...props
+}) {
+  const { open } = AlertDialogPrimitive.useRootContext();
+  return /* @__PURE__ */ jsxDEV3(AlertDialogPortal, {
+    hostName: portalHost,
+    children: /* @__PURE__ */ jsxDEV3(AlertDialogOverlay, {
+      children: /* @__PURE__ */ jsxDEV3(AlertDialogPrimitive.Content, {
+        className: cn3("border-border bg-background shadow-foreground/10 web:duration-200 z-50 max-w-lg gap-4 rounded-lg border p-6 shadow-lg", open ? "web:animate-in web:fade-in-0 web:zoom-in-95" : "web:animate-out web:fade-out-0 web:zoom-out-95", className),
+        ...props
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV3(View, {
+    className: cn3("flex flex-col gap-2", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV3(View, {
+    className: cn3("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(AlertDialogPrimitive.Title, {
+    className: cn3("native:text-xl text-foreground text-lg font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(AlertDialogPrimitive.Description, {
+    className: cn3("native:text-base text-muted-foreground text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(TextClassContext.Provider, {
+    value: buttonTextVariants({ className }),
+    children: /* @__PURE__ */ jsxDEV3(AlertDialogPrimitive.Action, {
+      className: cn3(buttonVariants(), className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3(TextClassContext.Provider, {
+    value: buttonTextVariants({ className, variant: "outline" }),
+    children: /* @__PURE__ */ jsxDEV3(AlertDialogPrimitive.Cancel, {
+      className: cn3(buttonVariants({ variant: "outline", className })),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  AlertDialogTrigger,
+  AlertDialogTitle,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogDescription,
+  AlertDialogContent,
+  AlertDialogCancel,
+  AlertDialogAction,
+  AlertDialog
+};

package/dist/browser/ui/alert.js

@@ -0,0 +1,85 @@
+// 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/alert.tsx
+import { useTheme } from "@react-navigation/native";
+import { cva } from "class-variance-authority";
+import { View } from "react-native";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var alertVariants = cva("relative bg-background w-full rounded-lg border border-border p-4 shadow-2xs shadow-foreground/10", {
+  variants: {
+    variant: {
+      default: "",
+      destructive: "border-destructive"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+function Alert({
+  className,
+  variant,
+  children,
+  icon: Icon,
+  iconSize = 16,
+  iconClassName,
+  ...props
+}) {
+  const { colors } = useTheme();
+  return /* @__PURE__ */ jsxDEV2(View, {
+    role: "alert",
+    className: alertVariants({ variant, className }),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2(View, {
+        className: "absolute top-4 left-3.5 -translate-y-0.5",
+        children: /* @__PURE__ */ jsxDEV2(Icon, {
+          size: iconSize,
+          color: variant === "destructive" ? colors.notification : colors.text
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function AlertTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(Text2, {
+    className: cn2("text-foreground mb-1 pl-7 text-base leading-none font-medium tracking-tight", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function AlertDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(Text2, {
+    className: cn2("text-foreground pl-7 text-sm leading-relaxed", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  AlertTitle,
+  AlertDescription,
+  Alert
+};

package/dist/browser/ui/aspect-ratio.js

@@ -0,0 +1,6 @@
+// ui/aspect-ratio.tsx
+import * as AspectRatioPrimitive from "@rn-primitives/aspect-ratio";
+var AspectRatio = AspectRatioPrimitive.Root;
+export {
+  AspectRatio
+};