@contractspec/lib.ui-kit-web 1.57.0 → 1.58.0

package/dist/browser/ui/carousel.js

@@ -0,0 +1,229 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/button.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+var buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-hidden focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+  variants: {
+    variant: {
+      default: "bg-primary text-primary-foreground hover:bg-primary/90",
+      destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+      outline: "border bg-background shadow-2xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+      secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+      link: "text-primary underline-offset-4 hover:underline"
+    },
+    size: {
+      default: "h-9 px-4 py-2 has-[>svg]:px-3",
+      sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+      lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+      icon: "size-9"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+var Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
+  if (asChild) {
+    return /* @__PURE__ */ jsxDEV(Slot, {
+      "data-slot": "button",
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("button", {
+    ref,
+    "data-slot": "button",
+    className: cn(buttonVariants({ variant, size, className })),
+    ...props
+  }, undefined, false, undefined, this);
+});
+Button.displayName = "Button";
+// ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ui/carousel.tsx
+import * as React2 from "react";
+import useEmblaCarousel from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+var CarouselContext = React2.createContext(null);
+function useCarousel() {
+  const context = React2.useContext(CarouselContext);
+  if (!context) {
+    throw new Error("useCarousel must be used within a <Carousel />");
+  }
+  return context;
+}
+function Carousel({
+  orientation = "horizontal",
+  opts,
+  setApi,
+  plugins,
+  className,
+  children,
+  ...props
+}) {
+  const [carouselRef, api] = useEmblaCarousel({
+    ...opts,
+    axis: orientation === "horizontal" ? "x" : "y"
+  }, plugins);
+  const [canScrollPrev, setCanScrollPrev] = React2.useState(false);
+  const [canScrollNext, setCanScrollNext] = React2.useState(false);
+  const onSelect = React2.useCallback((api2) => {
+    if (!api2)
+      return;
+    setCanScrollPrev(api2.canScrollPrev());
+    setCanScrollNext(api2.canScrollNext());
+  }, []);
+  const scrollPrev = React2.useCallback(() => {
+    api?.scrollPrev();
+  }, [api]);
+  const scrollNext = React2.useCallback(() => {
+    api?.scrollNext();
+  }, [api]);
+  const handleKeyDown = React2.useCallback((event) => {
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      scrollPrev();
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      scrollNext();
+    }
+  }, [scrollPrev, scrollNext]);
+  React2.useEffect(() => {
+    if (!api || !setApi)
+      return;
+    setApi(api);
+  }, [api, setApi]);
+  React2.useEffect(() => {
+    if (!api)
+      return;
+    onSelect(api);
+    api.on("reInit", onSelect);
+    api.on("select", onSelect);
+    return () => {
+      api?.off("select", onSelect);
+    };
+  }, [api, onSelect]);
+  return /* @__PURE__ */ jsxDEV2(CarouselContext.Provider, {
+    value: {
+      carouselRef,
+      api,
+      opts,
+      orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
+      scrollPrev,
+      scrollNext,
+      canScrollPrev,
+      canScrollNext
+    },
+    children: /* @__PURE__ */ jsxDEV2("div", {
+      onKeyDownCapture: handleKeyDown,
+      className: cn2("relative", className),
+      role: "region",
+      "aria-roledescription": "carousel",
+      "data-slot": "carousel",
+      ...props,
+      children
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function CarouselContent({
+  className,
+  ...props
+}) {
+  const { carouselRef, orientation } = useCarousel();
+  return /* @__PURE__ */ jsxDEV2("div", {
+    ref: carouselRef,
+    className: "overflow-hidden",
+    "data-slot": "carousel-content",
+    children: /* @__PURE__ */ jsxDEV2("div", {
+      className: cn2("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function CarouselItem({
+  className,
+  ...props
+}) {
+  const { orientation } = useCarousel();
+  return /* @__PURE__ */ jsxDEV2("div", {
+    role: "group",
+    "aria-roledescription": "slide",
+    "data-slot": "carousel-item",
+    className: cn2("min-w-0 shrink-0 grow-0 basis-full", orientation === "horizontal" ? "pl-4" : "pt-4", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CarouselPrevious({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+  return /* @__PURE__ */ jsxDEV2(Button, {
+    "data-slot": "carousel-previous",
+    variant,
+    size,
+    className: cn2("absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -left-12 -translate-y-1/2" : "-top-12 left-1/2 -translate-x-1/2 rotate-90", className),
+    disabled: !canScrollPrev,
+    onClick: scrollPrev,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2(ArrowLeft, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("span", {
+        className: "sr-only",
+        children: "Previous slide"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CarouselNext({
+  className,
+  variant = "outline",
+  size = "icon",
+  ...props
+}) {
+  const { orientation, scrollNext, canScrollNext } = useCarousel();
+  return /* @__PURE__ */ jsxDEV2(Button, {
+    "data-slot": "carousel-next",
+    variant,
+    size,
+    className: cn2("absolute size-8 rounded-full", orientation === "horizontal" ? "top-1/2 -right-12 -translate-y-1/2" : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90", className),
+    disabled: !canScrollNext,
+    onClick: scrollNext,
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2(ArrowRight, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("span", {
+        className: "sr-only",
+        children: "Next slide"
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  CarouselPrevious,
+  CarouselNext,
+  CarouselItem,
+  CarouselContent,
+  Carousel
+};

package/dist/browser/ui/checkbox.js

@@ -0,0 +1,34 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/checkbox.tsx
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function Checkbox({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(CheckboxPrimitive.Root, {
+    "data-slot": "checkbox",
+    className: cn("peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50", className),
+    ...props,
+    children: /* @__PURE__ */ jsxDEV(CheckboxPrimitive.Indicator, {
+      "data-slot": "checkbox-indicator",
+      className: "grid place-content-center text-current transition-none",
+      children: /* @__PURE__ */ jsxDEV(CheckIcon, {
+        className: "size-3.5"
+      }, undefined, false, undefined, this)
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  Checkbox
+};

package/dist/browser/ui/collapsible.js

@@ -0,0 +1,41 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/collapsible.tsx
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function Collapsible({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(CollapsiblePrimitive.Root, {
+    "data-slot": "collapsible",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CollapsibleTrigger2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(CollapsiblePrimitive.CollapsibleTrigger, {
+    "data-slot": "collapsible-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CollapsibleContent2({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(CollapsiblePrimitive.CollapsibleContent, {
+    "data-slot": "collapsible-content",
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  CollapsibleTrigger2 as CollapsibleTrigger,
+  CollapsibleContent2 as CollapsibleContent,
+  Collapsible
+};

package/dist/browser/ui/command.js

@@ -0,0 +1,266 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined")
+    return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+
+// ui/dialog.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Root, {
+    "data-slot": "dialog",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Trigger, {
+    "data-slot": "dialog-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Portal, {
+    "data-slot": "dialog-portal",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Close, {
+    "data-slot": "dialog-close",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Overlay, {
+    "data-slot": "dialog-overlay",
+    className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPortal, {
+    "data-slot": "dialog-portal",
+    children: [
+      /* @__PURE__ */ jsxDEV(DialogOverlay, {}, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(DialogPrimitive.Content, {
+        "data-slot": "dialog-content",
+        className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxDEV(DialogPrimitive.Close, {
+            "data-slot": "dialog-close",
+            className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+            children: [
+              /* @__PURE__ */ jsxDEV(XIcon, {}, undefined, false, undefined, this),
+              /* @__PURE__ */ jsxDEV("span", {
+                className: "sr-only",
+                children: "Close"
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function DialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "dialog-header",
+    className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV("div", {
+    "data-slot": "dialog-footer",
+    className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Title, {
+    "data-slot": "dialog-title",
+    className: cn("text-lg leading-none font-semibold", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function DialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(DialogPrimitive.Description, {
+    "data-slot": "dialog-description",
+    className: cn("text-muted-foreground text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/command.tsx
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function Command({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(CommandPrimitive, {
+    "data-slot": "command",
+    className: cn2("bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(Dialog, {
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV2(DialogHeader, {
+        className: "sr-only",
+        children: [
+          /* @__PURE__ */ jsxDEV2(DialogTitle, {
+            children: title
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2(DialogDescription, {
+            children: description
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV2(DialogContent, {
+        className: cn2("overflow-hidden p-0", className),
+        showCloseButton,
+        children: /* @__PURE__ */ jsxDEV2(Command, {
+          className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5",
+          children
+        }, undefined, false, undefined, this)
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2("div", {
+    "data-slot": "command-input-wrapper",
+    className: "flex h-9 items-center gap-2 border-b px-3",
+    children: [
+      /* @__PURE__ */ jsxDEV2(SearchIcon, {
+        className: "size-4 shrink-0 opacity-50"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2(CommandPrimitive.Input, {
+        "data-slot": "command-input",
+        className: cn2("placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
+        ...props
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function CommandList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(CommandPrimitive.List, {
+    "data-slot": "command-list",
+    className: cn2("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandEmpty({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(CommandPrimitive.Empty, {
+    "data-slot": "command-empty",
+    className: "py-6 text-center text-sm",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(CommandPrimitive.Group, {
+    "data-slot": "command-group",
+    className: cn2("text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(CommandPrimitive.Separator, {
+    "data-slot": "command-separator",
+    className: cn2("bg-border -mx-1 h-px", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(CommandPrimitive.Item, {
+    "data-slot": "command-item",
+    className: cn2("data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-xs px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function CommandShortcut({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2("span", {
+    "data-slot": "command-shortcut",
+    className: cn2("text-muted-foreground ml-auto text-xs tracking-widest", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  CommandShortcut,
+  CommandSeparator,
+  CommandList,
+  CommandItem,
+  CommandInput,
+  CommandGroup,
+  CommandEmpty,
+  CommandDialog,
+  Command
+};