@contractspec/lib.ui-kit 1.57.0 → 1.59.0

package/dist/browser/ui/context-menu.js

@@ -0,0 +1,214 @@
+// 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/icons/Check.tsx
+import { Check } from "lucide-react-native";
+iconWithClassName(Check);
+// ui/icons/ChevronUp.tsx
+import { ChevronUp } from "lucide-react-native";
+iconWithClassName(ChevronUp);
+// ui/icons/ChevronRight.tsx
+import { ChevronRight } from "lucide-react-native";
+iconWithClassName(ChevronRight);
+// ui/context-menu.tsx
+import * as ContextMenuPrimitive from "@rn-primitives/context-menu";
+import {
+  Platform,
+  StyleSheet,
+  Text as Text3,
+  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 ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var ContextMenuGroup = ContextMenuPrimitive.Group;
+var ContextMenuSub = ContextMenuPrimitive.Sub;
+var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
+function ContextMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}) {
+  const { open } = ContextMenuPrimitive.useSubContext();
+  const Icon = Platform.OS === "web" ? ChevronRight : open ? ChevronUp : ChevronDown;
+  return /* @__PURE__ */ jsxDEV2(TextClassContext.Provider, {
+    value: cn2("native:text-lg text-primary text-sm select-none", open && "native:text-accent-foreground"),
+    children: /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.SubTrigger, {
+      className: cn2("native:py-2 active:bg-accent web:cursor-default web:select-none web:outline-hidden web:hover:bg-accent web:focus:bg-accent flex flex-row items-center gap-2 rounded-xs px-2 py-1.5", open && "bg-accent", inset && "pl-8", className),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxDEV2(Icon, {
+          size: 18,
+          className: "text-foreground ml-auto"
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function ContextMenuSubContent({
+  className,
+  ...props
+}) {
+  const { open } = ContextMenuPrimitive.useSubContext();
+  return /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.SubContent, {
+    className: cn2("border-border bg-popover shadow-foreground/5 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 mt-1 min-w-32 overflow-hidden rounded-md border p-1 shadow-md", open ? "web:animate-in web:fade-in-0 web:zoom-in-95" : "web:animate-out web:fade-out-0 web:zoom-out", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function ContextMenuContent({
+  className,
+  overlayClassName,
+  overlayStyle,
+  portalHost,
+  ...props
+}) {
+  const { open } = ContextMenuPrimitive.useRootContext();
+  return /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.Portal, {
+    hostName: portalHost,
+    children: /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.Overlay, {
+      style: overlayStyle ? StyleSheet.flatten([
+        Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
+        overlayStyle
+      ]) : Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
+      className: overlayClassName,
+      children: /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.Content, {
+        className: cn2("border-border bg-popover shadow-foreground/5 web:data-[side=bottom]:slide-in-from-top-2 web:data-[side=left]:slide-in-from-right-2 web:data-[side=right]:slide-in-from-left-2 web:data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-md", 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 ContextMenuItem({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(TextClassContext.Provider, {
+    value: "select-none text-sm native:text-lg text-popover-foreground web:group-focus:text-accent-foreground",
+    children: /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.Item, {
+      className: cn2("native:py-2 group active:bg-accent web:cursor-default web:outline-hidden web:hover:bg-accent web:focus:bg-accent relative flex flex-row items-center gap-2 rounded-xs px-2 py-1.5", inset && "pl-8", props.disabled && "web:pointer-events-none opacity-50", className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function ContextMenuCheckboxItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.CheckboxItem, {
+    className: cn2("web:group native:py-2 active:bg-accent web:cursor-default web:outline-hidden web:focus:bg-accent relative flex flex-row items-center rounded-xs py-1.5 pr-2 pl-8", props.disabled && "web:pointer-events-none opacity-50", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2(View, {
+        className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+        children: /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsxDEV2(Check, {
+            size: 14,
+            strokeWidth: 3,
+            className: "text-foreground"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function ContextMenuRadioItem({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.RadioItem, {
+    className: cn2("web:group native:py-2 active:bg-accent web:cursor-default web:outline-hidden web:focus:bg-accent relative flex flex-row items-center rounded-xs py-1.5 pr-2 pl-8", props.disabled && "web:pointer-events-none opacity-50", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2(View, {
+        className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center",
+        children: /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.ItemIndicator, {
+          children: /* @__PURE__ */ jsxDEV2(View, {
+            className: "bg-foreground h-2 w-2 rounded-full"
+          }, undefined, false, undefined, this)
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      children
+    ]
+  }, undefined, true, undefined, this);
+}
+function ContextMenuLabel({
+  className,
+  inset,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.Label, {
+    className: cn2("native:text-base text-foreground web:cursor-default px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function ContextMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(ContextMenuPrimitive.Separator, {
+    className: cn2("bg-border -mx-1 my-1 h-px", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function ContextMenuShortcut({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV2(Text3, {
+    className: cn2("native:text-sm text-muted-foreground ml-auto text-xs tracking-widest", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  ContextMenuTrigger,
+  ContextMenuSubTrigger,
+  ContextMenuSubContent,
+  ContextMenuSub,
+  ContextMenuShortcut,
+  ContextMenuSeparator,
+  ContextMenuRadioItem,
+  ContextMenuRadioGroup,
+  ContextMenuLabel,
+  ContextMenuItem,
+  ContextMenuGroup,
+  ContextMenuContent,
+  ContextMenuCheckboxItem,
+  ContextMenu
+};

package/dist/browser/ui/date-picker.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/date-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 formatDateDisplay(date) {
+  if (!date)
+    return "";
+  try {
+    return date.toLocaleDateString(undefined, {
+      day: "2-digit",
+      month: "long",
+      year: "numeric"
+    });
+  } catch {
+    return "";
+  }
+}
+function DatePicker({
+  value,
+  onChange,
+  disabled,
+  minDate,
+  maxDate,
+  placeholder = "Select date",
+  className
+}) {
+  const [show, setShow] = useState(false);
+  const pickerProps = useMemo(() => ({
+    minimumDate: minDate,
+    maximumDate: maxDate,
+    timeZoneName: undefined
+  }), [minDate, maxDate]);
+  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 ? formatDateDisplay(value) : placeholder
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this),
+      show && /* @__PURE__ */ jsxDEV2(DateTimePicker, {
+        value: value ?? new Date,
+        mode: "date",
+        display: Platform.OS === "ios" ? "inline" : "default",
+        onChange: handleChange,
+        ...pickerProps
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  DatePicker
+};

package/dist/browser/ui/date-range-picker.js

@@ -0,0 +1,348 @@
+// 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/date-range-picker.tsx
+import { useMemo, useState } from "react";
+import { Platform, Pressable } from "react-native";
+import DateTimePicker from "@react-native-community/datetimepicker";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function fmt(d) {
+  if (!d)
+    return "";
+  try {
+    return d.toLocaleDateString();
+  } catch {
+    return "";
+  }
+}
+function DateRangePicker({
+  value,
+  onChange,
+  disabled,
+  minDate,
+  maxDate,
+  placeholders,
+  className
+}) {
+  const [showStart, setShowStart] = useState(false);
+  const [showEnd, setShowEnd] = useState(false);
+  const pickerCommon = useMemo(() => ({ minimumDate: minDate, maximumDate: maxDate }), [minDate, maxDate]);
+  const handleStart = (_, d) => {
+    if (Platform.OS !== "ios")
+      setShowStart(false);
+    if (!d)
+      return;
+    const end = value.end && d > value.end ? d : value.end;
+    onChange({ start: d, end });
+  };
+  const handleEnd = (_, d) => {
+    if (Platform.OS !== "ios")
+      setShowEnd(false);
+    if (!d)
+      return;
+    const start = value.start && d < value.start ? d : value.start;
+    onChange({ start, end: d });
+  };
+  return /* @__PURE__ */ jsxDEV3(VStack, {
+    className: cn3("w-full", className),
+    spacing: "sm",
+    children: [
+      /* @__PURE__ */ jsxDEV3(HStack, {
+        gap: "sm",
+        children: [
+          /* @__PURE__ */ jsxDEV3(Pressable, {
+            disabled,
+            onPress: () => setShowStart(true),
+            className: cn3("border-input bg-background h-12 flex-1 flex-row items-center rounded-md border px-3", disabled && "opacity-50"),
+            children: /* @__PURE__ */ jsxDEV3(Text2, {
+              className: cn3("text-foreground text-base", !value.start && "opacity-50"),
+              children: value.start ? fmt(value.start) : placeholders?.start || "Start date"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV3(Pressable, {
+            disabled,
+            onPress: () => setShowEnd(true),
+            className: cn3("border-input bg-background h-12 flex-1 flex-row items-center rounded-md border px-3", disabled && "opacity-50"),
+            children: /* @__PURE__ */ jsxDEV3(Text2, {
+              className: cn3("text-foreground text-base", !value.end && "opacity-50"),
+              children: value.end ? fmt(value.end) : placeholders?.end || "End date"
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      showStart && /* @__PURE__ */ jsxDEV3(DateTimePicker, {
+        value: value.start ?? new Date,
+        mode: "date",
+        display: Platform.OS === "ios" ? "inline" : "default",
+        onChange: handleStart,
+        ...pickerCommon
+      }, undefined, false, undefined, this),
+      showEnd && /* @__PURE__ */ jsxDEV3(DateTimePicker, {
+        value: value.end ?? value.start ?? new Date,
+        mode: "date",
+        display: Platform.OS === "ios" ? "inline" : "default",
+        onChange: handleEnd,
+        minimumDate: value.start ?? minDate,
+        maximumDate: maxDate
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  DateRangePicker
+};