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

package/dist/browser/ui/field.js

@@ -0,0 +1,221 @@
+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/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(LabelPrimitive.Root, {
+    "data-slot": "label",
+    className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/separator.tsx
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV2(SeparatorPrimitive.Root, {
+    "data-slot": "separator",
+    decorative,
+    orientation,
+    className: cn2("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/field.tsx
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function FieldSet({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3("fieldset", {
+    "data-slot": "field-set",
+    className: cn3("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__ */ jsxDEV3("legend", {
+    "data-slot": "field-legend",
+    "data-variant": variant,
+    className: cn3("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__ */ jsxDEV3("div", {
+    "data-slot": "field-group",
+    className: cn3("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 = cva("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__ */ jsxDEV3("div", {
+    role: "group",
+    "data-slot": "field",
+    "data-orientation": orientation,
+    className: cn3(fieldVariants({ orientation }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FieldContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV3("div", {
+    "data-slot": "field-content",
+    className: cn3("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__ */ jsxDEV3(Label, {
+    "data-slot": "field-label",
+    className: cn3("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__ */ jsxDEV3("div", {
+    "data-slot": "field-label",
+    className: cn3("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__ */ jsxDEV3("p", {
+    "data-slot": "field-description",
+    className: cn3("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__ */ jsxDEV3("div", {
+    "data-slot": "field-separator",
+    "data-content": !!children,
+    className: cn3("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxDEV3(Separator, {
+        className: "absolute inset-0 top-1/2"
+      }, undefined, false, undefined, this),
+      children && /* @__PURE__ */ jsxDEV3("span", {
+        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 = React.useMemo(() => {
+    if (children) {
+      return children;
+    }
+    if (!errors?.length) {
+      return null;
+    }
+    if (errors?.length == 1) {
+      return errors[0]?.message;
+    }
+    return /* @__PURE__ */ jsxDEV3("ul", {
+      className: "ml-4 flex list-disc flex-col gap-1",
+      children: errors.map((error, index) => error?.message && /* @__PURE__ */ jsxDEV3("li", {
+        children: error.message
+      }, index, false, undefined, this))
+    }, undefined, false, undefined, this);
+  }, [children, errors]);
+  if (!content) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV3("div", {
+    role: "alert",
+    "data-slot": "field-error",
+    className: cn3("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
+};

package/dist/browser/ui/focus-on-route-change.js

@@ -0,0 +1,25 @@
+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/focus-on-route-change.tsx
+import * as React from "react";
+function FocusOnRouteChange({
+  focusSelector = "h1, [data-page-title], #main"
+}) {
+  React.useEffect(() => {
+    const el = document.querySelector(focusSelector);
+    if (el) {
+      el.tabIndex = -1;
+      el.focus();
+    }
+  });
+  return null;
+}
+export {
+  FocusOnRouteChange
+};

package/dist/browser/ui/form.js

@@ -0,0 +1,156 @@
+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/label.tsx
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(LabelPrimitive.Root, {
+    "data-slot": "label",
+    className: cn("flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// ui/form.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState
+} from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { useForm, useFieldArray } from "react-hook-form";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+"use client";
+var Form = FormProvider;
+var FormFieldContext = React.createContext({});
+var FormField = ({
+  ...props
+}) => {
+  return /* @__PURE__ */ jsxDEV2(FormFieldContext.Provider, {
+    value: { name: props.name },
+    children: /* @__PURE__ */ jsxDEV2(Controller, {
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+};
+var useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState } = useFormContext();
+  const formState = useFormState({ name: fieldContext.name });
+  const fieldState = getFieldState(fieldContext.name, formState);
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+var FormItemContext = React.createContext({});
+function FormItem({
+  className,
+  ...props
+}) {
+  const id = React.useId();
+  return /* @__PURE__ */ jsxDEV2(FormItemContext.Provider, {
+    value: { id },
+    children: /* @__PURE__ */ jsxDEV2("div", {
+      "data-slot": "form-item",
+      className: cn2("grid gap-2", className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function FormLabel({
+  className,
+  ...props
+}) {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsxDEV2(Label, {
+    "data-slot": "form-label",
+    "data-error": !!error,
+    className: cn2("data-[error=true]:text-destructive", className),
+    htmlFor: formItemId,
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FormControl({
+  ...props
+}) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsxDEV2(Slot, {
+    "data-slot": "form-control",
+    id: formItemId,
+    "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+    "aria-invalid": !!error,
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FormDescription({
+  className,
+  ...props
+}) {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsxDEV2("p", {
+    "data-slot": "form-description",
+    id: formDescriptionId,
+    className: cn2("text-muted-foreground text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function FormMessage({
+  className,
+  ...props
+}) {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : props.children;
+  if (!body) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxDEV2("p", {
+    "data-slot": "form-message",
+    id: formMessageId,
+    className: cn2("text-destructive text-sm", className),
+    ...props,
+    children: body
+  }, undefined, false, undefined, this);
+}
+export {
+  zodResolver,
+  useFormField,
+  useForm,
+  useFieldArray,
+  FormMessage,
+  FormLabel,
+  FormItem,
+  FormField,
+  FormDescription,
+  FormControl,
+  Form
+};

package/dist/browser/ui/hover-card.js

@@ -0,0 +1,51 @@
+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/hover-card.tsx
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function HoverCard({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(HoverCardPrimitive.Root, {
+    "data-slot": "hover-card",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function HoverCardTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(HoverCardPrimitive.Trigger, {
+    "data-slot": "hover-card-trigger",
+    ...props
+  }, undefined, false, undefined, this);
+}
+function HoverCardContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV(HoverCardPrimitive.Portal, {
+    "data-slot": "hover-card-portal",
+    children: /* @__PURE__ */ jsxDEV(HoverCardPrimitive.Content, {
+      "data-slot": "hover-card-content",
+      align,
+      sideOffset,
+      className: cn("bg-popover text-popover-foreground 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 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 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden", className),
+      ...props
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  HoverCardTrigger,
+  HoverCardContent,
+  HoverCard
+};

package/dist/browser/ui/input-group.js

@@ -0,0 +1,192 @@
+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/input.tsx
+import { cn as cn2 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+function Input({ className, type, ...props }) {
+  return /* @__PURE__ */ jsxDEV2("input", {
+    type,
+    "data-slot": "input",
+    className: cn2("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "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", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/textarea.tsx
+import { cn as cn3 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+function Textarea({ className, ...props }) {
+  return /* @__PURE__ */ jsxDEV3("textarea", {
+    "data-slot": "textarea",
+    className: cn3("aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-2xs outline-hidden transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+// ui/input-group.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { cn as cn4 } from "@contractspec/lib.ui-kit-core/utils";
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+"use client";
+function InputGroup({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    "data-slot": "input-group",
+    role: "group",
+    className: cn4("group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+var inputGroupAddonVariants = cva2("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+  variants: {
+    align: {
+      "inline-start": "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+      "inline-end": "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
+      "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+      "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+    }
+  },
+  defaultVariants: {
+    align: "inline-start"
+  }
+});
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4("div", {
+    role: "group",
+    "data-slot": "input-group-addon",
+    "data-align": align,
+    className: cn4(inputGroupAddonVariants({ align }), className),
+    onClick: (e) => {
+      if (e.target.closest("button")) {
+        return;
+      }
+      e.currentTarget.parentElement?.querySelector("input")?.focus();
+    },
+    onKeyDown: (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        e.currentTarget.parentElement?.querySelector("input")?.focus();
+      }
+    },
+    ...props
+  }, undefined, false, undefined, this);
+}
+var inputGroupButtonVariants = cva2("text-sm shadow-none flex gap-2 items-center", {
+  variants: {
+    size: {
+      xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+      sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
+      "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+      "icon-sm": "size-8 p-0 has-[>svg]:p-0"
+    }
+  },
+  defaultVariants: {
+    size: "xs"
+  }
+});
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(Button, {
+    type,
+    "data-size": size,
+    variant,
+    className: cn4(inputGroupButtonVariants({ size }), className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function InputGroupText({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4("span", {
+    className: cn4("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function InputGroupInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(Input, {
+    "data-slot": "input-group-control",
+    className: cn4("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+function InputGroupTextarea({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxDEV4(Textarea, {
+    "data-slot": "input-group-control",
+    className: cn4("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className),
+    ...props
+  }, undefined, false, undefined, this);
+}
+export {
+  InputGroupTextarea,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupButton,
+  InputGroupAddon,
+  InputGroup
+};