@contractspec/lib.ui-kit 1.57.0 → 1.59.0

package/dist/browser/ui/fab.js

@@ -0,0 +1,141 @@
+// ui/fab.tsx
+import { useState } from "react";
+import { Pressable, StyleSheet, View } from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  withSpring,
+  withTiming
+} from "react-native-reanimated";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { Plus, X } from "lucide-react-native";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+function FAB({
+  actions,
+  className,
+  mainIcon,
+  mainColor = "bg-primary"
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggleMenu = () => {
+    setIsOpen(!isOpen);
+  };
+  const rotation = useAnimatedStyle(() => {
+    return {
+      transform: [
+        {
+          rotate: withSpring(isOpen ? "45deg" : "0deg", {
+            damping: 15,
+            stiffness: 150
+          })
+        }
+      ]
+    };
+  });
+  return /* @__PURE__ */ jsxDEV(View, {
+    className: cn("absolute right-4 bottom-24 z-50", className),
+    children: [
+      isOpen && /* @__PURE__ */ jsxDEV(Pressable, {
+        style: StyleSheet.absoluteFillObject,
+        className: "fixed inset-0 -top-full -left-full h-[200%] w-[200%]",
+        onPress: () => setIsOpen(false)
+      }, undefined, false, undefined, this),
+      actions.map((action, index) => {
+        const translateY = useAnimatedStyle(() => {
+          const baseTranslation = isOpen ? -(index + 1) * 65 : 0;
+          return {
+            transform: [
+              {
+                translateY: withSpring(baseTranslation, {
+                  damping: 15,
+                  stiffness: 150,
+                  mass: 1 + index * 0.1
+                })
+              }
+            ],
+            opacity: withTiming(isOpen ? 1 : 0, {
+              duration: 200
+            }),
+            pointerEvents: isOpen ? "auto" : "none"
+          };
+        });
+        const scale = useAnimatedStyle(() => {
+          return {
+            transform: [
+              {
+                scale: withSpring(isOpen ? 1 : 0.8, {
+                  damping: 15,
+                  stiffness: 150
+                })
+              }
+            ]
+          };
+        });
+        return /* @__PURE__ */ jsxDEV(AnimatedPressable, {
+          style: [translateY, scale],
+          className: "absolute right-0 bottom-0",
+          onPress: () => {
+            action.onPress();
+            setIsOpen(false);
+          },
+          children: /* @__PURE__ */ jsxDEV(View, {
+            className: cn("h-12 w-12 items-center justify-center rounded-full shadow-lg", action.color || "bg-secondary"),
+            children: action.icon
+          }, undefined, false, undefined, this)
+        }, index, false, undefined, this);
+      }),
+      /* @__PURE__ */ jsxDEV(AnimatedPressable, {
+        onPress: toggleMenu,
+        className: cn("h-14 w-14 items-center justify-center rounded-full shadow-xl", mainColor),
+        style: [
+          rotation,
+          {
+            shadowColor: "#000",
+            shadowOffset: {
+              width: 0,
+              height: 4
+            },
+            shadowOpacity: 0.3,
+            shadowRadius: 8,
+            elevation: 8
+          }
+        ],
+        children: isOpen ? /* @__PURE__ */ jsxDEV(X, {
+          size: 24,
+          color: "white",
+          strokeWidth: 2.5
+        }, undefined, false, undefined, this) : mainIcon || /* @__PURE__ */ jsxDEV(Plus, {
+          size: 24,
+          color: "white",
+          strokeWidth: 2.5
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function MiniFAB({
+  icon,
+  onPress,
+  className,
+  color = "bg-primary"
+}) {
+  return /* @__PURE__ */ jsxDEV(Pressable, {
+    onPress,
+    className: cn("h-12 w-12 items-center justify-center rounded-full shadow-lg", color, className),
+    style: {
+      shadowColor: "#000",
+      shadowOffset: {
+        width: 0,
+        height: 2
+      },
+      shadowOpacity: 0.25,
+      shadowRadius: 4,
+      elevation: 5
+    },
+    children: icon
+  }, undefined, false, undefined, this);
+}
+export {
+  MiniFAB,
+  FAB
+};

package/dist/browser/ui/field.js

@@ -0,0 +1,559 @@
+// 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/label.tsx
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import * as LabelPrimitive from "@rn-primitives/label";
+import { Platform } from "react-native";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function Label({
+  className,
+  onPress,
+  onLongPress,
+  onPressIn,
+  onPressOut,
+  disabled,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(LabelPrimitive.Root, {
+    className: cn2("flex flex-row items-center gap-2 select-none", Platform.select({
+      web: "cursor-default leading-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
+    }), disabled && "opacity-50"),
+    onPress,
+    onLongPress,
+    onPressIn,
+    onPressOut,
+    disabled,
+    children: /* @__PURE__ */ jsxDEV2(LabelPrimitive.Text, {
+      className: cn2("text-foreground text-sm font-medium", Platform.select({ web: "leading-none" }), className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+// ui/stack.tsx
+import { View } from "react-native";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { cva } from "class-variance-authority";
+import { jsxDEV as jsxDEV3 } 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__ */ jsxDEV3(View, {
+    className: cn3(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__ */ jsxDEV3(View, {
+    className: cn3(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__ */ jsxDEV3(View, {
+    className: cn3(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 as Platform2 } from "react-native";
+import { cn as cn4 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+function H1({ className, asChild = false, ...props }) {
+  const Component = asChild ? Slot2.Text : Text2;
+  return /* @__PURE__ */ jsxDEV4(Component, {
+    role: "heading",
+    "aria-level": "1",
+    className: cn4("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__ */ jsxDEV4(Component, {
+    role: "heading",
+    "aria-level": "2",
+    className: cn4("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__ */ jsxDEV4(Component, {
+    role: "heading",
+    "aria-level": "3",
+    className: cn4("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__ */ jsxDEV4(Component, {
+    role: "heading",
+    "aria-level": "4",
+    className: cn4("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__ */ jsxDEV4(Component, {
+    className: cn4("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__ */ jsxDEV4(Component, {
+    role: Platform2.OS === "web" ? "blockquote" : undefined,
+    className: cn4("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__ */ jsxDEV4(Component, {
+    role: Platform2.OS === "web" ? "code" : undefined,
+    className: cn4("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__ */ jsxDEV4(Component, {
+    className: cn4("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__ */ jsxDEV4(Component, {
+    className: cn4("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__ */ jsxDEV4(Component, {
+    className: cn4("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__ */ jsxDEV4(Component, {
+    className: cn4("text-muted-foreground web:select-text text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/separator.tsx
+import * as SeparatorPrimitive from "@rn-primitives/separator";
+import { cn as cn5 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV5(SeparatorPrimitive.Root, {
+    decorative,
+    orientation,
+    className: cn5("bg-border shrink-0", orientation === "horizontal" ? "h-px w-full" : "h-full w-px", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/field.tsx
+import { useMemo } from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { cn as cn6 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+"use client";
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV6(Box, {
+    "data-slot": "field-set",
+    className: cn6("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV6(Box, {
+    "data-slot": "field-legend",
+    "data-variant": variant,
+    className: cn6("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FieldGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV6(Box, {
+    "data-slot": "field-group",
+    className: cn6("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 data-[slot=field-group]:*:gap-4", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+var fieldVariants = cva2("group/field flex w-full gap-3 data-[invalid=true]:text-destructive", {
+  variants: {
+    orientation: {
+      vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"],
+      horizontal: [
+        "flex-row items-center",
+        "data-[slot=field-label]:*:flex-auto",
+        "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      ],
+      responsive: [
+        "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto",
+        "@md/field-group:data-[slot=field-label]:*:flex-auto",
+        "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px"
+      ]
+    }
+  },
+  defaultVariants: {
+    orientation: "vertical"
+  }
+});
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV6(Box, {
+    role: "group",
+    "data-slot": "field",
+    "data-orientation": orientation,
+    className: cn6(fieldVariants({ orientation }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV6(Box, {
+    "data-slot": "field-content",
+    className: cn6("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FieldLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV6(Label, {
+    "data-slot": "field-label",
+    className: cn6("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FieldTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV6(Box, {
+    "data-slot": "field-label",
+    className: cn6("flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FieldDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV6(P, {
+    "data-slot": "field-description",
+    className: cn6("text-muted-foreground text-sm leading-normal font-normal group-has-data-[orientation=horizontal]/field:text-balance", "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV6(Box, {
+    "data-slot": "field-separator",
+    "data-content": !!children,
+    className: cn6("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV6(Separator, {
+        className: "absolute inset-0 top-1/2"
+      }, undefined, false, undefined, this),
+      children && /* @__PURE__ */ jsxDEV6(Box, {
+        className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
+        "data-slot": "field-separator-content",
+        children
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    if (errors?.length == 1) {
+      return errors[0]?.message;
+    }
+    return /* @__PURE__ */ jsxDEV6(VStack, {
+      className: "ml-4 flex list-disc flex-col gap-1",
+      children: errors.map((error, index) => error?.message && /* @__PURE__ */ jsxDEV6(P, {
+        children: error.message
+      }, index, false, undefined, this))
+    }, undefined, false, undefined, this);
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV6(Box, {
+    role: "alert",
+    "data-slot": "field-error",
+    className: cn6("text-destructive text-sm font-normal", className),
+    ...props,
+    children: content
+  }, undefined, false, undefined, this);
+}
+export {
+  FieldTitle,
+  FieldSet,
+  FieldSeparator,
+  FieldLegend,
+  FieldLabel,
+  FieldGroup,
+  FieldError,
+  FieldDescription,
+  FieldContent,
+  Field
+};