@contractspec/lib.ui-kit 1.57.0 → 1.59.0

package/dist/browser/ui/stepper.js

@@ -0,0 +1,274 @@
+// ui/stack.tsx
+import { View } from "react-native";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { cva } from "class-variance-authority";
+import { jsxDEV } 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__ */ jsxDEV(View, {
+    className: cn(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__ */ jsxDEV(View, {
+    className: cn(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__ */ jsxDEV(View, {
+    className: cn(vStackVariants({ spacing, align, justify, width, padding, gap }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/stepper.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { View as View2 } from "react-native";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var dotVariants = cva2("h-2 w-2 rounded-full", {
+  variants: {
+    state: {
+      active: "bg-primary",
+      inactive: "bg-muted-foreground/20"
+    },
+    size: {
+      sm: "",
+      md: "h-2.5 w-2.5"
+    }
+  },
+  defaultVariants: {
+    state: "inactive",
+    size: "md"
+  }
+});
+function Stepper({ current, total, size, className }) {
+  const items = Array.from({ length: Math.max(0, total) });
+  return /* @__PURE__ */ jsxDEV2(HStack, {
+    className: cn2("items-center gap-2", className),
+    children: items.map((_, idx) => /* @__PURE__ */ jsxDEV2(View2, {
+      className: cn2(dotVariants({
+        state: idx + 1 === current ? "active" : "inactive",
+        size
+      }))
+    }, idx, false, undefined, this))
+  }, undefined, false, undefined, this);
+}
+export {
+  Stepper
+};

package/dist/browser/ui/switch.js

@@ -0,0 +1,84 @@
+// ui/useColorScheme.tsx
+import { useColorScheme as useNativewindColorScheme } from "nativewind";
+var DEFAULT_COLOR_SCHEME = "light";
+function useColorScheme() {
+  const { colorScheme, setColorScheme, toggleColorScheme } = useNativewindColorScheme();
+  return {
+    colorScheme: colorScheme ?? DEFAULT_COLOR_SCHEME,
+    isDarkColorScheme: colorScheme === "dark",
+    setColorScheme,
+    toggleColorScheme
+  };
+}
+
+// ui/switch.tsx
+import * as SwitchPrimitives from "@rn-primitives/switch";
+import { Platform } from "react-native";
+import Animated, {
+  interpolateColor,
+  useAnimatedStyle,
+  useDerivedValue,
+  withTiming
+} from "react-native-reanimated";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+function SwitchWeb({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(SwitchPrimitives.Root, {
+    className: cn("peer focus-visible:ring-ring focus-visible:ring-offset-background h-6 w-11 shrink-0 cursor-pointer flex-row items-center rounded-full border-2 border-transparent transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed", props.checked ? "bg-primary" : "bg-input", props.disabled && "opacity-50", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV(SwitchPrimitives.Thumb, {
+      className: cn("bg-background shadow-foreground/5 pointer-events-none block h-5 w-5 rounded-full shadow-md ring-0 transition-transform", props.checked ? "translate-x-5" : "translate-x-0")
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var RGB_COLORS = {
+  light: {
+    primary: "rgb(24, 24, 27)",
+    input: "rgb(228, 228, 231)"
+  },
+  dark: {
+    primary: "rgb(250, 250, 250)",
+    input: "rgb(39, 39, 42)"
+  }
+};
+function SwitchNative({
+  className,
+  ...props
+}) {
+  const { colorScheme } = useColorScheme();
+  const translateX = useDerivedValue(() => props.checked ? 18 : 0);
+  const animatedRootStyle = useAnimatedStyle(() => {
+    return {
+      backgroundColor: interpolateColor(translateX.value, [0, 18], [RGB_COLORS[colorScheme].input, RGB_COLORS[colorScheme].primary])
+    };
+  });
+  const animatedThumbStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: withTiming(translateX.value, { duration: 200 }) }
+    ]
+  }));
+  return /* @__PURE__ */ jsxDEV(Animated.View, {
+    style: animatedRootStyle,
+    className: cn("h-8 w-[46px] rounded-full", props.disabled && "opacity-50"),
+    children: /* @__PURE__ */ jsxDEV(SwitchPrimitives.Root, {
+      className: cn("h-8 w-[46px] shrink-0 flex-row items-center rounded-full border-2 border-transparent", props.checked ? "bg-primary" : "bg-input", className),
+      ...props,
+      children: /* @__PURE__ */ jsxDEV(Animated.View, {
+        style: animatedThumbStyle,
+        children: /* @__PURE__ */ jsxDEV(SwitchPrimitives.Thumb, {
+          className: "bg-background shadow-foreground/25 h-7 w-7 rounded-full shadow-md ring-0"
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+var Switch = Platform.select({
+  web: SwitchWeb,
+  default: SwitchNative
+});
+export {
+  Switch
+};

package/dist/browser/ui/table.js

@@ -0,0 +1,100 @@
+// 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/table.tsx
+import * as TablePrimitive from "@rn-primitives/table";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function Table({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(TablePrimitive.Root, {
+    className: cn2("w-full caption-bottom text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function TableHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(TablePrimitive.Header, {
+    className: cn2("border-border [&_tr]:border-b", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function TableBody({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(TablePrimitive.Body, {
+    className: cn2("border-border flex-1 [&_tr:last-child]:border-0", className),
+    style: [{ minHeight: 2 }, style],
+    ...props
+  }, undefined, false, undefined, this);
+}
+function TableFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(TablePrimitive.Footer, {
+    className: cn2("bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function TableRow({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(TablePrimitive.Row, {
+    className: cn2("border-border web:transition-colors web:hover:bg-muted/50 web:data-[state=selected]:bg-muted flex-row border-b", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function TableHead({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(TextClassContext.Provider, {
+    value: "text-muted-foreground",
+    children: /* @__PURE__ */ jsxDEV2(TablePrimitive.Head, {
+      className: cn2("h-12 justify-center px-4 text-left font-medium [&:has([role=checkbox])]:pr-0", className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function TableCell({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(TablePrimitive.Cell, {
+    className: cn2("p-4 align-middle [&:has([role=checkbox])]:pr-0", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  TableRow,
+  TableHeader,
+  TableHead,
+  TableFooter,
+  TableCell,
+  TableBody,
+  Table
+};

package/dist/browser/ui/tabs.js

@@ -0,0 +1,30 @@
+// ui/tabs.tsx
+import * as TabsPrimitive from "@rn-primitives/tabs";
+import * as React from "react";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var Tabs = TabsPrimitive.Root;
+var TabsList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxDEV(TabsPrimitive.List, {
+  ref,
+  className: cn("bg-muted text-muted-foreground web:inline-flex h-10 items-center justify-center rounded-md p-1", className),
+  ...props
+}, undefined, false, undefined, this));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxDEV(TabsPrimitive.Trigger, {
+  ref,
+  className: cn("web:inline-flex web:whitespace-nowrap web:ring-offset-background web:transition-all web:focus-visible:outline-hidden web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 items-center justify-center rounded-xs px-3 py-1.5 text-sm font-medium disabled:pointer-events-none disabled:opacity-50", "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-2xs", className),
+  ...props
+}, undefined, false, undefined, this));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxDEV(TabsPrimitive.Content, {
+  ref,
+  className: cn("web:ring-offset-background web:focus-visible:outline-hidden web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2", className),
+  ...props
+}, undefined, false, undefined, this));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+export {
+  TabsTrigger,
+  TabsList,
+  TabsContent,
+  Tabs
+};

package/dist/browser/ui/text.js

@@ -0,0 +1,23 @@
+// 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);
+}
+export {
+  TextClassContext,
+  Text2 as Text
+};

package/dist/browser/ui/textarea.js

@@ -0,0 +1,18 @@
+// ui/textarea.tsx
+import * as React from "react";
+import { TextInput } from "react-native";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var Textarea = React.forwardRef(({ className, placeholderClassName, ...props }, ref) => {
+  return /* @__PURE__ */ jsxDEV(TextInput, {
+    ref,
+    className: cn("native:text-lg native:leading-tight border-input bg-background text-foreground placeholder:text-muted-foreground web:flex web:ring-offset-background web:focus-visible:outline-hidden web:focus-visible:ring-2 web:focus-visible:ring-ring web:focus-visible:ring-offset-2 min-h-[80px] w-full rounded-md border px-3 py-2 text-base file:border-0 file:bg-transparent file:font-medium lg:text-sm", props.editable === false && "web:cursor-not-allowed opacity-50", className),
+    placeholderClassName: cn("text-muted-foreground", placeholderClassName),
+    multiline: true,
+    ...props
+  }, undefined, false, undefined, this);
+});
+Textarea.displayName = "Textarea";
+export {
+  Textarea
+};

package/dist/browser/ui/time-picker.js

@@ -0,0 +1,83 @@
+// 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/time-picker.tsx
+import { useMemo, useState } from "react";
+import { Platform, Pressable, View } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function formatTimeDisplay(date, is24Hour) {
+  if (!date)
+    return "";
+  try {
+    return date.toLocaleTimeString([], {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: !is24Hour
+    });
+  } catch {
+    return "";
+  }
+}
+function TimePicker({
+  value,
+  onChange,
+  disabled,
+  placeholder = "Select time",
+  is24Hour = true,
+  className
+}) {
+  const [show, setShow] = useState(false);
+  const pickerProps = useMemo(() => ({
+    is24Hour,
+    timeZoneName: undefined
+  }), [is24Hour]);
+  const handleChange = (_event, selectedDate) => {
+    if (Platform.OS !== "ios")
+      setShow(false);
+    if (selectedDate) {
+      onChange(selectedDate);
+    }
+  };
+  return /* @__PURE__ */ jsxDEV2(View, {
+    className: cn2("w-full", className),
+    children: [
+      /* @__PURE__ */ jsxDEV2(Pressable, {
+        disabled,
+        onPress: () => setShow(true),
+        className: cn2("border-input bg-background h-12 flex-row items-center rounded-md border px-3", disabled && "opacity-50"),
+        children: /* @__PURE__ */ jsxDEV2(Text2, {
+          className: cn2("text-foreground text-base", !value && "opacity-50"),
+          children: value ? formatTimeDisplay(value, is24Hour) : placeholder
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      show && /* @__PURE__ */ jsxDEV2(DateTimePicker, {
+        value: value ?? new Date,
+        mode: "time",
+        display: Platform.OS === "ios" ? "spinner" : "default",
+        onChange: handleChange,
+        ...pickerProps
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  TimePicker
+};