@hoardodile/ui 0.1.7 → 0.1.9

package/dist/chunk-QGTQQNUL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-form-field.ts"],"names":[],"mappings":";;;;AAuBA,IAAM,gBAAA,GAAyB,KAAA,CAAA,aAAA;AAAA,EAC9B;AACD;AAMA,IAAM,eAAA,GAAwB,KAAA,CAAA,aAAA;AAAA,EAC7B;AACD;AAEA,SAAS,YAAA,GAAe;AACvB,EAAA,MAAM,YAAA,GAAqB,iBAAW,gBAAgB,CAAA;AACtD,EAAA,MAAM,WAAA,GAAoB,iBAAW,eAAe,CAAA;AACpD,EAAA,MAAM,EAAE,aAAA,EAAc,GAAI,cAAA,EAAe;AACzC,EAAA,MAAM,YAAY,YAAA,CAAa,EAAE,IAAA,EAAM,YAAA,EAAc,MAAM,CAAA;AAE3D,EAAA,IAAI,CAAC,YAAA,EAAc;AAClB,IAAA,MAAM,IAAI,MAAM,gDAAgD,CAAA;AAAA,EACjE;AACA,EAAA,IAAI,CAAC,WAAA,EAAa;AACjB,IAAA,MAAM,IAAI,MAAM,+CAA+C,CAAA;AAAA,EAChE;AAEA,EAAA,MAAM,UAAA,GAAa,aAAA,CAAc,YAAA,CAAa,IAAA,EAAM,SAAS,CAAA;AAC7D,EAAA,MAAM,EAAE,IAAG,GAAI,WAAA;AAEf,EAAA,OAAO;AAAA,IACN,EAAA;AAAA,IACA,MAAM,YAAA,CAAa,IAAA;AAAA,IACnB,UAAA,EAAY,GAAG,EAAE,CAAA,UAAA,CAAA;AAAA,IACjB,iBAAA,EAAmB,GAAG,EAAE,CAAA,sBAAA,CAAA;AAAA,IACxB,aAAA,EAAe,GAAG,EAAE,CAAA,kBAAA,CAAA;AAAA,IACpB,GAAG;AAAA,GACJ;AACD","file":"chunk-QGTQQNUL.js","sourcesContent":["import * as React from \"react\"\nimport {\n\ttype FieldPath,\n\ttype FieldValues,\n\tuseFormContext,\n\tuseFormState,\n} from \"react-hook-form\"\n\n/**\n * Field-state plumbing shared by the `Form*` components in\n * `@hoardodile/ui/components/form`: connects a `<FormField>` (the\n * react-hook-form `Controller` wrapper) to its `<FormItem>` via two\n * private contexts and exposes the resolved field state — id parts and\n * error — to the label/control/description/message render pieces.\n */\n\ntype FormFieldContextValue<\n\tTFieldValues extends FieldValues = FieldValues,\n\tTName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n\tname: TName\n}\n\nconst FormFieldContext = React.createContext<FormFieldContextValue | undefined>(\n\tundefined,\n)\n\ntype FormItemContextValue = {\n\tid: string\n}\n\nconst FormItemContext = React.createContext<FormItemContextValue | undefined>(\n\tundefined,\n)\n\nfunction useFormField() {\n\tconst fieldContext = React.useContext(FormFieldContext)\n\tconst itemContext = React.useContext(FormItemContext)\n\tconst { getFieldState } = useFormContext()\n\tconst formState = useFormState({ name: fieldContext?.name })\n\n\tif (!fieldContext) {\n\t\tthrow new Error(\"useFormField should be used within <FormField>\")\n\t}\n\tif (!itemContext) {\n\t\tthrow new Error(\"useFormField should be used within <FormItem>\")\n\t}\n\n\tconst fieldState = getFieldState(fieldContext.name, formState)\n\tconst { id } = itemContext\n\n\treturn {\n\t\tid,\n\t\tname: fieldContext.name,\n\t\tformItemId: `${id}-form-item`,\n\t\tformDescriptionId: `${id}-form-item-description`,\n\t\tformMessageId: `${id}-form-item-message`,\n\t\t...fieldState,\n\t}\n}\n\nexport { FormFieldContext, FormItemContext, useFormField }\n"]}

package/dist/chunk-SAY52ZKI.js

@@ -0,0 +1,152 @@
+import { useMobileBackToClose } from './chunk-TDDHQZ62.js';
+import { Cross } from './chunk-XBPQEZES.js';
+import { Button } from './chunk-PWJBHUM2.js';
+import { cn } from './chunk-M5OJN54O.js';
+import * as React from 'react';
+import { Dialog } from '@base-ui/react/dialog';
+import { useTranslation } from 'react-i18next';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function Sheet({
+  open,
+  defaultOpen,
+  onOpenChange,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    defaultOpen ?? false
+  );
+  const isControlled = open !== void 0;
+  const currentOpen = isControlled ? open : uncontrolledOpen;
+  function handleOpenChange(next, eventDetails) {
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next, eventDetails);
+  }
+  useMobileBackToClose(currentOpen, handleOpenChange);
+  return /* @__PURE__ */ jsx(
+    Dialog.Root,
+    {
+      "data-slot": "sheet",
+      open: currentOpen,
+      onOpenChange: handleOpenChange,
+      ...props
+    }
+  );
+}
+function SheetTrigger({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Trigger, { "data-slot": "sheet-trigger", ...props });
+}
+function SheetClose({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Close, { "data-slot": "sheet-close", ...props });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  ...props
+}) {
+  const { t } = useTranslation("ui", { useSuspense: false });
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Dialog.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            Dialog.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-4 right-4",
+                  size: "icon-sm"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  Cross,
+                  {}
+                ),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t("aria.close") })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-heading font-medium text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Dialog.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+//# sourceMappingURL=chunk-SAY52ZKI.js.map
+//# sourceMappingURL=chunk-SAY52ZKI.js.map

package/dist/chunk-SAY52ZKI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/sheet.tsx"],"names":["SheetPrimitive"],"mappings":"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","file":"chunk-SAY52ZKI.js","sourcesContent":["import * as React from \"react\"\nimport { Dialog as SheetPrimitive } from \"@base-ui/react/dialog\"\nimport { useTranslation } from \"react-i18next\"\n\nimport { cn } from \"@hoardodile/ui/lib/utils\"\nimport { Button } from \"@hoardodile/ui/components/button\"\nimport { useMobileBackToClose } from \"@hoardodile/ui/hooks/useMobileBackToClose\"\nimport { Cross } from \"@hoardodile/ui/icons/marks\"\n\nfunction Sheet({\n  open,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}: Omit<SheetPrimitive.Root.Props, \"onOpenChange\"> & {\n  /**\n   * `eventDetails` is absent for closes triggered by the mobile back\n   * gesture (a synthetic close with no underlying Base UI event).\n   */\n  onOpenChange?: (\n    open: boolean,\n    eventDetails?: SheetPrimitive.Root.ChangeEventDetails,\n  ) => void\n}) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(\n    defaultOpen ?? false,\n  )\n  const isControlled = open !== undefined\n  const currentOpen = isControlled ? open : uncontrolledOpen\n  function handleOpenChange(\n    next: boolean,\n    eventDetails?: SheetPrimitive.Root.ChangeEventDetails,\n  ) {\n    if (!isControlled) setUncontrolledOpen(next)\n    onOpenChange?.(next, eventDetails)\n  }\n  useMobileBackToClose(currentOpen, handleOpenChange)\n  return (\n    <SheetPrimitive.Root\n      data-slot=\"sheet\"\n      open={currentOpen}\n      onOpenChange={handleOpenChange}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\nfunction SheetClose({ ...props }: SheetPrimitive.Close.Props) {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />\n}\n\nfunction SheetPortal({ ...props }: SheetPrimitive.Portal.Props) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({ className, ...props }: SheetPrimitive.Backdrop.Props) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        \"fixed inset-0 z-50 bg-black/10 transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetContent({\n  className,\n  children,\n  side = \"right\",\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n  showCloseButton?: boolean\n}) {\n  const { t } = useTranslation(\"ui\", { useSuspense: false })\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          \"fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close\n            data-slot=\"sheet-close\"\n            render={\n              <Button\n                variant=\"ghost\"\n                className=\"absolute top-4 right-4\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <Cross\n            />\n            <span className=\"sr-only\">{t(\"aria.close\")}</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn(\"flex flex-col gap-1.5 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\"mt-auto flex flex-col gap-2 p-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({ className, ...props }: SheetPrimitive.Title.Props) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn(\"font-heading font-medium text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: SheetPrimitive.Description.Props) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetClose,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n}\n"]}

package/dist/chunk-SKDPGSRL.js

@@ -0,0 +1,166 @@
+import { useRef, useState, useCallback, useEffect } from 'react';
+import ReactCrop from 'react-image-crop';
+import 'react-image-crop/dist/ReactCrop.css';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/image-cropper.tsx
+function ImageCropper(props) {
+  const {
+    src,
+    aspect,
+    mimeType = "image/png",
+    quality = 0.92,
+    displayMaxWidth,
+    displayMaxHeight = "70vh"
+  } = props;
+  const imgRef = useRef(null);
+  const [crop, setCrop] = useState(void 0);
+  const [completed, setCompleted] = useState(void 0);
+  const handleImageLoad = useCallback(
+    (e) => {
+      const { naturalWidth, naturalHeight } = e.currentTarget;
+      const initial = buildInitialCrop(naturalWidth, naturalHeight, aspect);
+      setCrop(initial);
+      setCompleted(initial);
+    },
+    [aspect]
+  );
+  const onCropReady = props.onCropReady;
+  const onPreviewChange = props.onPreviewChange;
+  useEffect(() => {
+    const img = imgRef.current;
+    if (img === null || completed === void 0 || completed.width === 0) {
+      return;
+    }
+    onCropReady(() => renderCroppedImage(img, completed, mimeType, quality));
+    if (onPreviewChange !== void 0) {
+      onPreviewChange(renderPreviewDataUrl(img, completed));
+    }
+  }, [completed, mimeType, quality, onCropReady, onPreviewChange]);
+  return /* @__PURE__ */ jsx("div", { className: "react-crop-theme flex min-h-0 w-full max-w-full flex-col items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsx(
+    ReactCrop,
+    {
+      className: "max-w-full",
+      crop,
+      onChange: (_, percentCrop) => setCrop(percentCrop),
+      onComplete: (_, percentCrop) => setCompleted(percentCrop),
+      aspect,
+      keepSelection: true,
+      ruleOfThirds: true,
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          ref: imgRef,
+          src,
+          onLoad: handleImageLoad,
+          className: "h-auto max-w-full",
+          style: {
+            maxWidth: displayMaxWidth,
+            maxHeight: displayMaxHeight
+          }
+        }
+      )
+    }
+  ) });
+}
+function buildInitialCrop(imgWidth, imgHeight, aspect) {
+  if (aspect === void 0) {
+    return { unit: "%", x: 0, y: 0, width: 100, height: 100 };
+  }
+  const imgAspect = imgWidth / imgHeight;
+  let widthPct;
+  let heightPct;
+  if (imgAspect >= aspect) {
+    heightPct = 100;
+    widthPct = 100 * aspect / imgAspect;
+  } else {
+    widthPct = 100;
+    heightPct = 100 * imgAspect / aspect;
+  }
+  return {
+    unit: "%",
+    x: (100 - widthPct) / 2,
+    y: (100 - heightPct) / 2,
+    width: widthPct,
+    height: heightPct
+  };
+}
+var CroppedImageRenderError = class extends Error {
+  constructor(message) {
+    super(message);
+    this.name = "CroppedImageRenderError";
+  }
+};
+async function renderCroppedImage(image, crop, mimeType, quality) {
+  const sourceRect = cropToNaturalRect(image, crop);
+  const canvas = document.createElement("canvas");
+  canvas.width = sourceRect.sw;
+  canvas.height = sourceRect.sh;
+  const ctx = canvas.getContext("2d");
+  if (ctx === null) {
+    throw new CroppedImageRenderError("2d context is unavailable");
+  }
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(
+    image,
+    sourceRect.sx,
+    sourceRect.sy,
+    sourceRect.sw,
+    sourceRect.sh,
+    0,
+    0,
+    sourceRect.sw,
+    sourceRect.sh
+  );
+  const blob = await new Promise((resolve) => {
+    canvas.toBlob(resolve, mimeType, quality);
+  });
+  if (blob === null) {
+    throw new CroppedImageRenderError("toBlob returned null");
+  }
+  return { blob, width: sourceRect.sw, height: sourceRect.sh, mimeType };
+}
+function renderPreviewDataUrl(image, crop) {
+  const sourceRect = cropToNaturalRect(image, crop);
+  const canvas = document.createElement("canvas");
+  canvas.width = sourceRect.sw;
+  canvas.height = sourceRect.sh;
+  const ctx = canvas.getContext("2d", { alpha: true });
+  if (ctx === null) return "";
+  ctx.imageSmoothingQuality = "high";
+  ctx.drawImage(
+    image,
+    sourceRect.sx,
+    sourceRect.sy,
+    sourceRect.sw,
+    sourceRect.sh,
+    0,
+    0,
+    sourceRect.sw,
+    sourceRect.sh
+  );
+  return canvas.toDataURL("image/png");
+}
+function cropToNaturalRect(image, crop) {
+  const naturalWidth = image.naturalWidth;
+  const naturalHeight = image.naturalHeight;
+  if (crop.unit === "px") {
+    return {
+      sx: crop.x,
+      sy: crop.y,
+      sw: Math.max(1, Math.round(crop.width)),
+      sh: Math.max(1, Math.round(crop.height))
+    };
+  }
+  const sx = crop.x / 100 * naturalWidth;
+  const sy = crop.y / 100 * naturalHeight;
+  const swRaw = crop.width / 100 * naturalWidth;
+  const shRaw = crop.height / 100 * naturalHeight;
+  const sw = Math.max(1, Math.round(swRaw));
+  const sh = Math.max(1, Math.round(shRaw));
+  return { sx, sy, sw, sh };
+}
+
+export { ImageCropper };
+//# sourceMappingURL=chunk-SKDPGSRL.js.map
+//# sourceMappingURL=chunk-SKDPGSRL.js.map

package/dist/chunk-SKDPGSRL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/image-cropper.tsx"],"names":[],"mappings":";;;;;;AAgEO,SAAS,aAAa,KAAA,EAA0B;AACtD,EAAA,MAAM;AAAA,IACL,GAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA,GAAW,WAAA;AAAA,IACX,OAAA,GAAU,IAAA;AAAA,IACV,eAAA;AAAA,IACA,gBAAA,GAAmB;AAAA,GACpB,GAAI,KAAA;AAEJ,EAAA,MAAM,MAAA,GAAS,OAAgC,IAAI,CAAA;AACnD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAA2B,MAAS,CAAA;AAC5D,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAA2B,MAAS,CAAA;AAEtE,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACvB,CAAC,CAAA,KAA8C;AAC9C,MAAA,MAAM,EAAE,YAAA,EAAc,aAAA,EAAc,GAAI,CAAA,CAAE,aAAA;AAC1C,MAAA,MAAM,OAAA,GAAU,gBAAA,CAAiB,YAAA,EAAc,aAAA,EAAe,MAAM,CAAA;AACpE,MAAA,OAAA,CAAQ,OAAO,CAAA;AACf,MAAA,YAAA,CAAa,OAAO,CAAA;AAAA,IACrB,CAAA;AAAA,IACA,CAAC,MAAM;AAAA,GACR;AAEA,EAAA,MAAM,cAAc,KAAA,CAAM,WAAA;AAC1B,EAAA,MAAM,kBAAkB,KAAA,CAAM,eAAA;AAE9B,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,MAAM,MAAM,MAAA,CAAO,OAAA;AACnB,IAAA,IAAI,QAAQ,IAAA,IAAQ,SAAA,KAAc,MAAA,IAAa,SAAA,CAAU,UAAU,CAAA,EAAG;AACrE,MAAA;AAAA,IACD;AACA,IAAA,WAAA,CAAY,MAAM,kBAAA,CAAmB,GAAA,EAAK,SAAA,EAAW,QAAA,EAAU,OAAO,CAAC,CAAA;AACvE,IAAA,IAAI,oBAAoB,MAAA,EAAW;AAClC,MAAA,eAAA,CAAgB,oBAAA,CAAqB,GAAA,EAAK,SAAS,CAAC,CAAA;AAAA,IACrD;AAAA,EACD,GAAG,CAAC,SAAA,EAAW,UAAU,OAAA,EAAS,WAAA,EAAa,eAAe,CAAC,CAAA;AAE/D,EAAA,uBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6FAAA,EACd,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACA,SAAA,EAAU,YAAA;AAAA,MACV,IAAA;AAAA,MACA,QAAA,EAAU,CAAC,CAAA,EAAG,WAAA,KAAgB,QAAQ,WAAW,CAAA;AAAA,MACjD,UAAA,EAAY,CAAC,CAAA,EAAG,WAAA,KAAgB,aAAa,WAAW,CAAA;AAAA,MACxD,MAAA;AAAA,MACA,aAAA,EAAa,IAAA;AAAA,MACb,YAAA,EAAY,IAAA;AAAA,MAGZ,QAAA,kBAAA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACA,GAAA,EAAK,MAAA;AAAA,UACL,GAAA;AAAA,UACA,MAAA,EAAQ,eAAA;AAAA,UACR,SAAA,EAAU,mBAAA;AAAA,UACV,KAAA,EAAO;AAAA,YACN,QAAA,EAAU,eAAA;AAAA,YACV,SAAA,EAAW;AAAA;AACZ;AAAA;AACD;AAAA,GACD,EACD,CAAA;AAEF;AAEA,SAAS,gBAAA,CACR,QAAA,EACA,SAAA,EACA,MAAA,EACO;AACP,EAAA,IAAI,WAAW,MAAA,EAAW;AACzB,IAAA,OAAO,EAAE,IAAA,EAAM,GAAA,EAAc,CAAA,EAAG,CAAA,EAAG,GAAG,CAAA,EAAG,KAAA,EAAO,GAAA,EAAK,MAAA,EAAQ,GAAA,EAAI;AAAA,EAClE;AAEA,EAAA,MAAM,YAAY,QAAA,GAAW,SAAA;AAC7B,EAAA,IAAI,QAAA;AACJ,EAAA,IAAI,SAAA;AAEJ,EAAA,IAAI,aAAa,MAAA,EAAQ;AAGxB,IAAA,SAAA,GAAY,GAAA;AACZ,IAAA,QAAA,GAAY,MAAM,MAAA,GAAU,SAAA;AAAA,EAC7B,CAAA,MAAO;AAEN,IAAA,QAAA,GAAW,GAAA;AACX,IAAA,SAAA,GAAa,MAAM,SAAA,GAAa,MAAA;AAAA,EACjC;AAEA,EAAA,OAAO;AAAA,IACN,IAAA,EAAM,GAAA;AAAA,IACN,CAAA,EAAA,CAAI,MAAM,QAAA,IAAY,CAAA;AAAA,IACtB,CAAA,EAAA,CAAI,MAAM,SAAA,IAAa,CAAA;AAAA,IACvB,KAAA,EAAO,QAAA;AAAA,IACP,MAAA,EAAQ;AAAA,GACT;AACD;AAEA,IAAM,uBAAA,GAAN,cAAsC,KAAA,CAAM;AAAA,EAC3C,YAAY,OAAA,EAAiB;AAC5B,IAAA,KAAA,CAAM,OAAO,CAAA;AACb,IAAA,IAAA,CAAK,IAAA,GAAO,yBAAA;AAAA,EACb;AACD,CAAA;AAMA,eAAe,kBAAA,CACd,KAAA,EACA,IAAA,EACA,QAAA,EACA,OAAA,EACwB;AACxB,EAAA,MAAM,UAAA,GAAa,iBAAA,CAAkB,KAAA,EAAO,IAAI,CAAA;AAEhD,EAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AAC9C,EAAA,MAAA,CAAO,QAAQ,UAAA,CAAW,EAAA;AAC1B,EAAA,MAAA,CAAO,SAAS,UAAA,CAAW,EAAA;AAC3B,EAAA,MAAM,GAAA,GAAM,MAAA,CAAO,UAAA,CAAW,IAAI,CAAA;AAClC,EAAA,IAAI,QAAQ,IAAA,EAAM;AACjB,IAAA,MAAM,IAAI,wBAAwB,2BAA2B,CAAA;AAAA,EAC9D;AACA,EAAA,GAAA,CAAI,qBAAA,GAAwB,MAAA;AAC5B,EAAA,GAAA,CAAI,SAAA;AAAA,IACH,KAAA;AAAA,IACA,UAAA,CAAW,EAAA;AAAA,IACX,UAAA,CAAW,EAAA;AAAA,IACX,UAAA,CAAW,EAAA;AAAA,IACX,UAAA,CAAW,EAAA;AAAA,IACX,CAAA;AAAA,IACA,CAAA;AAAA,IACA,UAAA,CAAW,EAAA;AAAA,IACX,UAAA,CAAW;AAAA,GACZ;AAEA,EAAA,MAAM,IAAA,GAAO,MAAM,IAAI,OAAA,CAAqB,CAAC,OAAA,KAAY;AACxD,IAAA,MAAA,CAAO,MAAA,CAAO,OAAA,EAAS,QAAA,EAAU,OAAO,CAAA;AAAA,EACzC,CAAC,CAAA;AACD,EAAA,IAAI,SAAS,IAAA,EAAM;AAClB,IAAA,MAAM,IAAI,wBAAwB,sBAAsB,CAAA;AAAA,EACzD;AACA,EAAA,OAAO,EAAE,MAAM,KAAA,EAAO,UAAA,CAAW,IAAI,MAAA,EAAQ,UAAA,CAAW,IAAI,QAAA,EAAS;AACtE;AASA,SAAS,oBAAA,CAAqB,OAAyB,IAAA,EAAoB;AAC1E,EAAA,MAAM,UAAA,GAAa,iBAAA,CAAkB,KAAA,EAAO,IAAI,CAAA;AAEhD,EAAA,MAAM,MAAA,GAAS,QAAA,CAAS,aAAA,CAAc,QAAQ,CAAA;AAC9C,EAAA,MAAA,CAAO,QAAQ,UAAA,CAAW,EAAA;AAC1B,EAAA,MAAA,CAAO,SAAS,UAAA,CAAW,EAAA;AAC3B,EAAA,MAAM,MAAM,MAAA,CAAO,UAAA,CAAW,MAAM,EAAE,KAAA,EAAO,MAAM,CAAA;AACnD,EAAA,IAAI,GAAA,KAAQ,MAAM,OAAO,EAAA;AACzB,EAAA,GAAA,CAAI,qBAAA,GAAwB,MAAA;AAC5B,EAAA,GAAA,CAAI,SAAA;AAAA,IACH,KAAA;AAAA,IACA,UAAA,CAAW,EAAA;AAAA,IACX,UAAA,CAAW,EAAA;AAAA,IACX,UAAA,CAAW,EAAA;AAAA,IACX,UAAA,CAAW,EAAA;AAAA,IACX,CAAA;AAAA,IACA,CAAA;AAAA,IACA,UAAA,CAAW,EAAA;AAAA,IACX,UAAA,CAAW;AAAA,GACZ;AACA,EAAA,OAAO,MAAA,CAAO,UAAU,WAAW,CAAA;AACpC;AAEA,SAAS,iBAAA,CACR,OACA,IAAA,EACqD;AACrD,EAAA,MAAM,eAAe,KAAA,CAAM,YAAA;AAC3B,EAAA,MAAM,gBAAgB,KAAA,CAAM,aAAA;AAE5B,EAAA,IAAI,IAAA,CAAK,SAAS,IAAA,EAAM;AACvB,IAAA,OAAO;AAAA,MACN,IAAI,IAAA,CAAK,CAAA;AAAA,MACT,IAAI,IAAA,CAAK,CAAA;AAAA,MACT,EAAA,EAAI,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,IAAA,CAAK,KAAK,CAAC,CAAA;AAAA,MACtC,EAAA,EAAI,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,KAAA,CAAM,IAAA,CAAK,MAAM,CAAC;AAAA,KACxC;AAAA,EACD;AAEA,EAAA,MAAM,EAAA,GAAM,IAAA,CAAK,CAAA,GAAI,GAAA,GAAO,YAAA;AAC5B,EAAA,MAAM,EAAA,GAAM,IAAA,CAAK,CAAA,GAAI,GAAA,GAAO,aAAA;AAC5B,EAAA,MAAM,KAAA,GAAS,IAAA,CAAK,KAAA,GAAQ,GAAA,GAAO,YAAA;AACnC,EAAA,MAAM,KAAA,GAAS,IAAA,CAAK,MAAA,GAAS,GAAA,GAAO,aAAA;AACpC,EAAA,MAAM,KAAK,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,KAAA,CAAM,KAAK,CAAC,CAAA;AACxC,EAAA,MAAM,KAAK,IAAA,CAAK,GAAA,CAAI,GAAG,IAAA,CAAK,KAAA,CAAM,KAAK,CAAC,CAAA;AAExC,EAAA,OAAO,EAAE,EAAA,EAAI,EAAA,EAAI,EAAA,EAAI,EAAA,EAAG;AACzB","file":"chunk-SKDPGSRL.js","sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\"\nimport ReactCrop, { type Crop } from \"react-image-crop\"\nimport \"react-image-crop/dist/ReactCrop.css\"\n\n/**\n * Output of {@link ImageCropper} once the user releases the selection\n * box. Contains the cropped pixel data ready to upload (PNG by default)\n * plus its dimensions.\n */\nexport type CroppedImage = {\n\treadonly blob: Blob\n\treadonly width: number\n\treadonly height: number\n\treadonly mimeType: string\n}\n\nexport type ImageCropperProps = {\n\t/** The source image as a data URL or object URL. */\n\treadonly src: string\n\t/**\n\t * Optional fixed aspect ratio (width / height). When omitted, the\n\t * user can crop freely.\n\t */\n\treadonly aspect?: number\n\t/**\n\t * Output mime type. Defaults to `image/png`. PNG preserves quality;\n\t * JPEG produces smaller files for photographic content.\n\t */\n\treadonly mimeType?: \"image/png\" | \"image/jpeg\" | \"image/webp\"\n\t/** JPEG/WebP quality (0..1). Ignored for PNG. */\n\treadonly quality?: number\n\t/**\n\t * Called whenever the cropped pixel rectangle changes and is non-empty.\n\t * The callback receives a function that, when invoked, produces the\n\t * final {@link CroppedImage}. The render is deferred to avoid running\n\t * the canvas pipeline on every drag tick.\n\t */\n\treadonly onCropReady: (render: () => Promise<CroppedImage>) => void\n\t/**\n\t * Called synchronously with a PNG `data:` URL whenever the crop\n\t * selection changes. PNG preserves alpha for the live preview (JPEG\n\t * would flatten transparency to black). Unlike blob URLs, `data:`\n\t * URLs never appear in the browser network tab and setting them as\n\t * image `src` cannot cause an infinite re-render loop.\n\t */\n\treadonly onPreviewChange?: (dataUrl: string) => void\n\t/**\n\t * Max CSS width for the source image in the crop stage. When omitted the\n\t * image relies on `max-w-full` to fill the parent width.\n\t */\n\treadonly displayMaxWidth?: number | string\n\t/**\n\t * Max CSS height for the source image in the crop stage (e.g. `80vh` for\n\t * large canvas captures). Defaults to `70vh`.\n\t */\n\treadonly displayMaxHeight?: number | string\n}\n\n/**\n * Free-aspect (or fixed-aspect when {@link ImageCropperProps.aspect} is\n * provided) image cropper. Wraps `react-image-crop` and exposes a\n * deferred `render()` callback so callers can rasterise the selection on\n * demand (typically when the user clicks \"save\").\n */\nexport function ImageCropper(props: ImageCropperProps) {\n\tconst {\n\t\tsrc,\n\t\taspect,\n\t\tmimeType = \"image/png\",\n\t\tquality = 0.92,\n\t\tdisplayMaxWidth,\n\t\tdisplayMaxHeight = \"70vh\",\n\t} = props\n\n\tconst imgRef = useRef<HTMLImageElement | null>(null)\n\tconst [crop, setCrop] = useState<Crop | undefined>(undefined)\n\tconst [completed, setCompleted] = useState<Crop | undefined>(undefined)\n\n\tconst handleImageLoad = useCallback(\n\t\t(e: React.SyntheticEvent<HTMLImageElement>) => {\n\t\t\tconst { naturalWidth, naturalHeight } = e.currentTarget\n\t\t\tconst initial = buildInitialCrop(naturalWidth, naturalHeight, aspect)\n\t\t\tsetCrop(initial)\n\t\t\tsetCompleted(initial)\n\t\t},\n\t\t[aspect],\n\t)\n\n\tconst onCropReady = props.onCropReady\n\tconst onPreviewChange = props.onPreviewChange\n\n\tuseEffect(() => {\n\t\tconst img = imgRef.current\n\t\tif (img === null || completed === undefined || completed.width === 0) {\n\t\t\treturn\n\t\t}\n\t\tonCropReady(() => renderCroppedImage(img, completed, mimeType, quality))\n\t\tif (onPreviewChange !== undefined) {\n\t\t\tonPreviewChange(renderPreviewDataUrl(img, completed))\n\t\t}\n\t}, [completed, mimeType, quality, onCropReady, onPreviewChange])\n\n\treturn (\n\t\t<div className=\"react-crop-theme flex min-h-0 w-full max-w-full flex-col items-center gap-2 overflow-hidden\">\n\t\t\t<ReactCrop\n\t\t\t\tclassName=\"max-w-full\"\n\t\t\t\tcrop={crop}\n\t\t\t\tonChange={(_, percentCrop) => setCrop(percentCrop)}\n\t\t\t\tonComplete={(_, percentCrop) => setCompleted(percentCrop)}\n\t\t\t\taspect={aspect}\n\t\t\t\tkeepSelection\n\t\t\t\truleOfThirds\n\t\t\t>\n\t\t\t\t{/* biome-ignore lint/a11y/useAltText: cropper preview lacks user-supplied alt */}\n\t\t\t\t<img\n\t\t\t\t\tref={imgRef}\n\t\t\t\t\tsrc={src}\n\t\t\t\t\tonLoad={handleImageLoad}\n\t\t\t\t\tclassName=\"h-auto max-w-full\"\n\t\t\t\t\tstyle={{\n\t\t\t\t\t\tmaxWidth: displayMaxWidth,\n\t\t\t\t\t\tmaxHeight: displayMaxHeight,\n\t\t\t\t\t}}\n\t\t\t\t/>\n\t\t\t</ReactCrop>\n\t\t</div>\n\t)\n}\n\nfunction buildInitialCrop(\n\timgWidth: number,\n\timgHeight: number,\n\taspect: number | undefined,\n): Crop {\n\tif (aspect === undefined) {\n\t\treturn { unit: \"%\" as const, x: 0, y: 0, width: 100, height: 100 }\n\t}\n\n\tconst imgAspect = imgWidth / imgHeight\n\tlet widthPct: number\n\tlet heightPct: number\n\n\tif (imgAspect >= aspect) {\n\t\t// Image is wider (or equal) than the target aspect: fit to height,\n\t\t// crop the sides.\n\t\theightPct = 100\n\t\twidthPct = (100 * aspect) / imgAspect\n\t} else {\n\t\t// Image is taller than the target aspect: fit to width, crop top/bottom.\n\t\twidthPct = 100\n\t\theightPct = (100 * imgAspect) / aspect\n\t}\n\n\treturn {\n\t\tunit: \"%\" as const,\n\t\tx: (100 - widthPct) / 2,\n\t\ty: (100 - heightPct) / 2,\n\t\twidth: widthPct,\n\t\theight: heightPct,\n\t}\n}\n\nclass CroppedImageRenderError extends Error {\n\tconstructor(message: string) {\n\t\tsuper(message)\n\t\tthis.name = \"CroppedImageRenderError\"\n\t}\n}\n\n/**\n * @throws CroppedImageRenderError when the canvas context is unavailable\n *   or the browser refuses to encode the selected blob.\n */\nasync function renderCroppedImage(\n\timage: HTMLImageElement,\n\tcrop: Crop,\n\tmimeType: string,\n\tquality: number,\n): Promise<CroppedImage> {\n\tconst sourceRect = cropToNaturalRect(image, crop)\n\n\tconst canvas = document.createElement(\"canvas\")\n\tcanvas.width = sourceRect.sw\n\tcanvas.height = sourceRect.sh\n\tconst ctx = canvas.getContext(\"2d\")\n\tif (ctx === null) {\n\t\tthrow new CroppedImageRenderError(\"2d context is unavailable\")\n\t}\n\tctx.imageSmoothingQuality = \"high\"\n\tctx.drawImage(\n\t\timage,\n\t\tsourceRect.sx,\n\t\tsourceRect.sy,\n\t\tsourceRect.sw,\n\t\tsourceRect.sh,\n\t\t0,\n\t\t0,\n\t\tsourceRect.sw,\n\t\tsourceRect.sh,\n\t)\n\n\tconst blob = await new Promise<Blob | null>((resolve) => {\n\t\tcanvas.toBlob(resolve, mimeType, quality)\n\t})\n\tif (blob === null) {\n\t\tthrow new CroppedImageRenderError(\"toBlob returned null\")\n\t}\n\treturn { blob, width: sourceRect.sw, height: sourceRect.sh, mimeType }\n}\n\n/**\n * Render the current crop to a PNG `data:` URL synchronously.\n *\n * Unlike {@link renderCroppedImage}, this function does NOT create a\n * `blob:` URL and therefore does not appear in the browser network tab.\n * Preview uses PNG (not JPEG) so transparent regions stay transparent.\n */\nfunction renderPreviewDataUrl(image: HTMLImageElement, crop: Crop): string {\n\tconst sourceRect = cropToNaturalRect(image, crop)\n\n\tconst canvas = document.createElement(\"canvas\")\n\tcanvas.width = sourceRect.sw\n\tcanvas.height = sourceRect.sh\n\tconst ctx = canvas.getContext(\"2d\", { alpha: true })\n\tif (ctx === null) return \"\"\n\tctx.imageSmoothingQuality = \"high\"\n\tctx.drawImage(\n\t\timage,\n\t\tsourceRect.sx,\n\t\tsourceRect.sy,\n\t\tsourceRect.sw,\n\t\tsourceRect.sh,\n\t\t0,\n\t\t0,\n\t\tsourceRect.sw,\n\t\tsourceRect.sh,\n\t)\n\treturn canvas.toDataURL(\"image/png\")\n}\n\nfunction cropToNaturalRect(\n\timage: HTMLImageElement,\n\tcrop: Crop,\n): { sx: number; sy: number; sw: number; sh: number } {\n\tconst naturalWidth = image.naturalWidth\n\tconst naturalHeight = image.naturalHeight\n\n\tif (crop.unit === \"px\") {\n\t\treturn {\n\t\t\tsx: crop.x,\n\t\t\tsy: crop.y,\n\t\t\tsw: Math.max(1, Math.round(crop.width)),\n\t\t\tsh: Math.max(1, Math.round(crop.height)),\n\t\t}\n\t}\n\n\tconst sx = (crop.x / 100) * naturalWidth\n\tconst sy = (crop.y / 100) * naturalHeight\n\tconst swRaw = (crop.width / 100) * naturalWidth\n\tconst shRaw = (crop.height / 100) * naturalHeight\n\tconst sw = Math.max(1, Math.round(swRaw))\n\tconst sh = Math.max(1, Math.round(shRaw))\n\n\treturn { sx, sy, sw, sh }\n}\n"]}

package/dist/chunk-T56ARCUK.js

@@ -0,0 +1,38 @@
+import { cn } from './chunk-M5OJN54O.js';
+import { cva } from 'class-variance-authority';
+import 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var textareaVariants = cva(
+  "flex field-sizing-content min-h-16 w-full resize-none rounded-lg bg-muted px-3 py-2.5 text-ui text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] aria-invalid:ring-destructive/20",
+  {
+    variants: {
+      size: {
+        sm: "px-2.5 py-2 text-xs",
+        md: "px-3 py-2.5",
+        lg: "px-3.5 py-3"
+      }
+    },
+    defaultVariants: {
+      size: "md"
+    }
+  }
+);
+function Textarea({
+  className,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      "data-slot": "textarea",
+      className: cn(textareaVariants({ size }), className),
+      ...props
+    }
+  );
+}
+
+export { Textarea, textareaVariants };
+//# sourceMappingURL=chunk-T56ARCUK.js.map
+//# sourceMappingURL=chunk-T56ARCUK.js.map

package/dist/chunk-T56ARCUK.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/textarea.tsx"],"names":[],"mappings":";;;;;AAUA,IAAM,gBAAA,GAAmB,GAAA;AAAA,EACvB,uQAAA;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,IAAA,EAAM;AAAA,QACJ,EAAA,EAAI,qBAAA;AAAA,QACJ,EAAA,EAAI,aAAA;AAAA,QACJ,EAAA,EAAI;AAAA;AACN,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,IAAA,EAAM;AAAA;AACR;AAEJ;AAEA,SAAS,QAAA,CAAS;AAAA,EAChB,SAAA;AAAA,EACA,IAAA;AAAA,EACA,GAAG;AACL,CAAA,EAA6E;AAC3E,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,UAAA;AAAA,MACV,WAAW,EAAA,CAAG,gBAAA,CAAiB,EAAE,IAAA,EAAM,GAAG,SAAS,CAAA;AAAA,MAClD,GAAG;AAAA;AAAA,GACN;AAEJ","file":"chunk-T56ARCUK.js","sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\"\nimport * as React from \"react\"\n\nimport { cn } from \"@hoardodile/ui/lib/utils\"\n\n/**\n * Muted-fill textarea (the forms Textarea anatomy): fill background,\n * `rounded-lg`, no border, same anatomy as the inputs. The `size` tiers\n * only shift padding and text; the height stays row-driven.\n */\nconst textareaVariants = cva(\n  \"flex field-sizing-content min-h-16 w-full resize-none rounded-lg bg-muted px-3 py-2.5 text-ui text-foreground outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] aria-invalid:ring-destructive/20\",\n  {\n    variants: {\n      size: {\n        sm: \"px-2.5 py-2 text-xs\",\n        md: \"px-3 py-2.5\",\n        lg: \"px-3.5 py-3\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n)\n\nfunction Textarea({\n  className,\n  size,\n  ...props\n}: React.ComponentProps<\"textarea\"> & VariantProps<typeof textareaVariants>) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(textareaVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea, textareaVariants }\n"]}

package/dist/chunk-TDDHQZ62.js

@@ -0,0 +1,227 @@
+import { isBelowMd } from './chunk-QGMDWGJT.js';
+import { useRef, useEffect } from 'react';
+
+var HISTORY_KEY = "__appMobileOverlay";
+var overlayStack = [];
+var popListenerInstalled = false;
+var historyPatched = false;
+var nextOverlayId = 0;
+var suppressPopCount = 0;
+var seenSyntheticIds = /* @__PURE__ */ new Set();
+var navigationResolver;
+function setNavigationResolver(resolver) {
+  navigationResolver = resolver;
+}
+function patchHistory() {
+  if (historyPatched) return;
+  if (typeof window === "undefined") return;
+  historyPatched = true;
+  const origPush = window.history.pushState.bind(window.history);
+  window.history.pushState = (data, unused, url) => {
+    const state = data;
+    if (state !== null && typeof state === "object" && HISTORY_KEY in state) {
+      origPush(data, unused, url);
+      return;
+    }
+    if (overlayStack.length > 0) {
+      closeAllOverlays();
+    }
+    origPush(data, unused, url);
+  };
+}
+function closeAllOverlays() {
+  while (overlayStack.length > 0) {
+    const entry = overlayStack.pop();
+    if (entry?.close !== void 0) {
+      const fn = entry.close;
+      entry.close = void 0;
+      fn();
+    }
+  }
+}
+function ensurePopListener() {
+  if (popListenerInstalled) return;
+  if (typeof window === "undefined") return;
+  popListenerInstalled = true;
+  window.addEventListener(
+    "popstate",
+    (e) => {
+      if (suppressPopCount > 0) return;
+      const state = e.state;
+      if (state !== null && typeof state === "object" && HISTORY_KEY in state) {
+        const id = state[HISTORY_KEY];
+        if (typeof id === "number" && overlayStack.some((entry) => entry.id === id)) {
+          closeTopOverlay();
+          e.stopImmediatePropagation();
+          return;
+        }
+        e.stopImmediatePropagation();
+        if (typeof id === "number" && seenSyntheticIds.has(id)) {
+          window.history.back();
+        }
+      }
+    },
+    true
+    // capture phase
+  );
+  window.addEventListener("popstate", handlePop);
+  patchHistory();
+}
+function closeTopOverlay() {
+  const top = overlayStack.pop();
+  if (top === void 0) return;
+  if (top.close === void 0) return;
+  const closeFn = top.close;
+  top.close = void 0;
+  closeFn();
+}
+function handlePop() {
+  if (suppressPopCount > 0) {
+    suppressPopCount--;
+    return;
+  }
+  closeTopOverlay();
+}
+function removeFromStack(id) {
+  const idx = overlayStack.findIndex((e) => e.id === id);
+  if (idx === -1) return { removed: false, parkedBelow: 0 };
+  const wasTop = idx === overlayStack.length - 1;
+  if (!wasTop) {
+    const entry = overlayStack[idx];
+    if (entry !== void 0) entry.close = void 0;
+    return { removed: true, parkedBelow: 0 };
+  }
+  overlayStack.pop();
+  const remaining = overlayStack.splice(0, overlayStack.length);
+  const active = remaining.filter((e) => e.close !== void 0);
+  const parkedBelow = remaining.length - active.length;
+  overlayStack.push(...active);
+  return { removed: true, parkedBelow };
+}
+function scheduleStateRestore(id, baseState, parkedBelow) {
+  function check() {
+    const currentState = window.history.state;
+    if (currentState === null || typeof currentState !== "object" || !(HISTORY_KEY in currentState) || currentState[HISTORY_KEY] !== id) {
+      sweepParkedEntries();
+      return;
+    }
+    const totalBacks = 1 + parkedBelow;
+    let done = false;
+    function restore() {
+      if (done) return;
+      done = true;
+      window.removeEventListener("popstate", onPop);
+      window.history.replaceState(baseState, "");
+      const sweptIds = sweepParkedEntries();
+      cleanupSeenIds(sweptIds);
+    }
+    function onPop() {
+      if (suppressPopCount > 0) {
+        suppressPopCount--;
+        return;
+      }
+      restore();
+    }
+    window.addEventListener("popstate", onPop);
+    suppressPopCount += totalBacks;
+    for (let i = 0; i < totalBacks; i++) {
+      window.history.back();
+    }
+  }
+  let disposed = false;
+  let rafId;
+  let unsub;
+  function run() {
+    if (disposed) return;
+    disposed = true;
+    unsub?.();
+    if (rafId !== void 0) {
+      cancelAnimationFrame(rafId);
+    }
+    check();
+  }
+  if (navigationResolver !== void 0) {
+    unsub = navigationResolver(run);
+  }
+  rafId = requestAnimationFrame(run);
+}
+function sweepParkedEntries() {
+  const sweptIds = [];
+  for (let i = overlayStack.length - 1; i >= 0; i--) {
+    const entry = overlayStack[i];
+    if (entry !== void 0 && entry.close === void 0) {
+      sweptIds.push(entry.id);
+      overlayStack.splice(i, 1);
+    }
+  }
+  return sweptIds;
+}
+function cleanupSeenIds(sweptIds) {
+  const activeIds = new Set(overlayStack.map((e) => e.id));
+  for (const id of sweptIds) {
+    if (!activeIds.has(id)) {
+      seenSyntheticIds.delete(id);
+    }
+  }
+}
+function useMobileBackToClose(open, onOpenChange) {
+  const idRef = useRef(void 0);
+  const onChangeRef = useRef(onOpenChange);
+  onChangeRef.current = onOpenChange;
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (onChangeRef.current === void 0) return;
+    if (!isBelowMd()) return;
+    ensurePopListener();
+    if (open === true && idRef.current === void 0) {
+      const id = ++nextOverlayId;
+      idRef.current = id;
+      seenSyntheticIds.add(id);
+      const baseState = window.history.state ?? null;
+      window.history.pushState(
+        {
+          ...baseState ?? {},
+          [HISTORY_KEY]: id
+        },
+        ""
+      );
+      overlayStack.push({
+        id,
+        baseState,
+        close() {
+          idRef.current = void 0;
+          onChangeRef.current?.(false);
+        }
+      });
+      return;
+    }
+    if (open !== true && idRef.current !== void 0) {
+      const id = idRef.current;
+      idRef.current = void 0;
+      const entryIdx = overlayStack.findIndex((e) => e.id === id);
+      const entry = entryIdx !== -1 ? overlayStack[entryIdx] : void 0;
+      const { removed, parkedBelow } = removeFromStack(id);
+      if (removed && entry !== void 0) {
+        scheduleStateRestore(id, entry.baseState, parkedBelow);
+      }
+    }
+  }, [open]);
+  useEffect(() => {
+    return () => {
+      if (idRef.current !== void 0) {
+        const id = idRef.current;
+        idRef.current = void 0;
+        const entryIdx = overlayStack.findIndex((e) => e.id === id);
+        const entry = entryIdx !== -1 ? overlayStack[entryIdx] : void 0;
+        const { removed, parkedBelow } = removeFromStack(id);
+        if (removed && entry !== void 0) {
+          scheduleStateRestore(id, entry.baseState, parkedBelow);
+        }
+      }
+    };
+  }, []);
+}
+
+export { setNavigationResolver, useMobileBackToClose };
+//# sourceMappingURL=chunk-TDDHQZ62.js.map
+//# sourceMappingURL=chunk-TDDHQZ62.js.map