@inshorts/glint-ui 0.5.4 → 0.6.1

package/dist/image-uploader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/image-uploader.tsx","../src/button.tsx","../src/spinner.tsx","../src/utils.ts","../src/input.tsx"],"sourcesContent":["\"use client\";\n\nimport { ImagePlus, Loader2, X } from \"lucide-react\";\nimport * as React from \"react\";\n\nimport { Button } from \"./button\";\nimport { Input } from \"./input\";\nimport { cn } from \"./utils\";\n\nexport type ImageUploaderProps = {\n  value?: string;\n  onChange: (url: string) => void;\n  disabled?: boolean;\n  label?: string;\n  className?: string;\n  /** Allow pasting a remote URL in addition to file upload. Default true. */\n  allowUrlPaste?: boolean;\n  accept?: string;\n  /**\n   * Upload a picked file and return its hosted URL.\n   * Injected by the panel — Upload stays enabled either way; without a\n   * handler, picking a file surfaces a configuration error.\n   */\n  uploadFile?: (file: File) => Promise<string>;\n  /**\n   * Optional transform for pasted values (e.g. host a relative path).\n   * When omitted, any pasted non-empty string is applied as-is. Absolute\n   * `http(s)` URLs never call this.\n   */\n  uploadFromUrl?: (imageUrl: string) => Promise<string>;\n};\n\n/**\n * Reusable image uploader.\n *\n * Upload and URL paste are both enabled by default. Hosting is injected:\n * each panel passes `uploadFile` / `uploadFromUrl` so the kit stays free of\n * panel-specific API routes.\n */\nexport function ImageUploader({\n  value = \"\",\n  onChange,\n  disabled,\n  label,\n  className,\n  allowUrlPaste = true,\n  accept = \"image/*,.gif\",\n  uploadFile,\n  uploadFromUrl,\n}: ImageUploaderProps) {\n  const inputRef = React.useRef<HTMLInputElement>(null);\n  const [uploading, setUploading] = React.useState(false);\n  const [error, setError] = React.useState<string | null>(null);\n  const busy = Boolean(disabled || uploading);\n\n  const handleFile = async (file: File) => {\n    if (!uploadFile) {\n      setError(\"File upload is not configured for this panel.\");\n      return;\n    }\n    setUploading(true);\n    setError(null);\n    try {\n      onChange(await uploadFile(file));\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Upload failed\");\n    } finally {\n      setUploading(false);\n      if (inputRef.current) inputRef.current.value = \"\";\n    }\n  };\n\n  const handleUrl = async (imageUrl: string) => {\n    const trimmed = imageUrl.trim();\n    if (!trimmed) {\n      onChange(\"\");\n      return;\n    }\n    if (trimmed === value) return;\n\n    // Absolute URLs — and any paste when no transform is configured — apply\n    // as-is. Paste is never gated behind a disabled input.\n    if (!uploadFromUrl || /^https?:\\/\\//i.test(trimmed)) {\n      setError(null);\n      onChange(trimmed);\n      return;\n    }\n\n    setUploading(true);\n    setError(null);\n    try {\n      onChange(await uploadFromUrl(trimmed));\n    } catch (err) {\n      setError(err instanceof Error ? err.message : \"Upload failed\");\n    } finally {\n      setUploading(false);\n    }\n  };\n\n  return (\n    <div className={cn(\"space-y-2\", className)}>\n      {label ? (\n        <div className=\"text-muted-foreground text-xs font-medium\">{label}</div>\n      ) : null}\n\n      <div className=\"flex flex-wrap items-center gap-2\">\n        <input\n          ref={inputRef}\n          type=\"file\"\n          accept={accept}\n          className=\"hidden\"\n          disabled={busy}\n          onChange={(e) => {\n            const file = e.target.files?.[0];\n            if (file) void handleFile(file);\n          }}\n        />\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"sm\"\n          disabled={busy}\n          onClick={() => inputRef.current?.click()}\n        >\n          {uploading ? (\n            <Loader2 className=\"h-4 w-4 animate-spin\" />\n          ) : (\n            <ImagePlus className=\"h-4 w-4\" />\n          )}\n          {uploading ? \"Uploading…\" : \"Upload\"}\n        </Button>\n        {value ? (\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            disabled={busy}\n            onClick={() => onChange(\"\")}\n            aria-label=\"Clear image\"\n          >\n            <X className=\"h-4 w-4\" />\n            Clear\n          </Button>\n        ) : null}\n      </div>\n\n      {allowUrlPaste ? (\n        <Input\n          key={value || \"empty\"}\n          defaultValue={value}\n          disabled={busy}\n          placeholder=\"Or paste image URL…\"\n          onBlur={(e) => {\n            void handleUrl(e.target.value);\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"Enter\") {\n              e.preventDefault();\n              void handleUrl((e.target as HTMLInputElement).value);\n            }\n          }}\n        />\n      ) : null}\n\n      {value ? (\n        // eslint-disable-next-line @next/next/no-img-element -- CDN URLs vary\n        <img\n          src={value}\n          alt=\"\"\n          className=\"border-border max-h-24 rounded border bg-white object-contain p-1\"\n        />\n      ) : null}\n\n      {error ? (\n        <p className=\"text-destructive text-xs\" role=\"alert\">\n          {error}\n        </p>\n      ) : null}\n    </div>\n  );\n}\n","import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"@radix-ui/react-slot\";\n\nimport { Spinner } from \"./spinner\";\nimport { cn } from \"./utils\";\n\nconst buttonVariants = cva(\n  \"inline-flex h-9 cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md px-3 text-sm font-medium transition duration-200 active:scale-[0.98] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/90\",\n        secondary: \"bg-muted text-foreground hover:bg-muted/80\",\n        ghost: \"hover:bg-muted\",\n        destructive:\n          \"bg-destructive text-destructive-foreground hover:bg-destructive/90\",\n        outline: \"border border-border bg-background hover:bg-muted\",\n      },\n      size: {\n        sm: \"h-8 px-2.5\",\n        md: \"h-9 px-3\",\n        lg: \"h-10 px-4\",\n        icon: \"h-9 w-9 px-0\",\n        // Square, matching `sm`'s height — for an icon-only control sitting in\n        // a table row or beside `sm` buttons, where `icon` is a row taller.\n        \"icon-sm\": \"h-8 w-8 px-0\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"md\",\n    },\n  },\n);\n\nexport interface ButtonProps\n  extends\n    React.ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  /**\n   * Work is in flight: shows a spinner, disables the button, and sets\n   * `aria-busy`.\n   *\n   * This exists because the panel had 272 disabled buttons and only 22 that\n   * said anything about why — the rest went dead on click with no spinner and\n   * no label change, which reads as a broken button rather than a busy one.\n   * Making the feedback part of `disabled` rather than something each caller\n   * remembers separately is the only way that ratio stays fixed.\n   *\n   * The label is kept rather than swapped. \"Saving…\" loses which button you\n   * pressed, and the spinner already says it is working. An icon-only button\n   * is the exception — there is no room beside the glyph, so the spinner takes\n   * its place; the `aria-label` is what names the button either way.\n   *\n   * \"Icon-only\" means an icon `size`. A square button that grew a spinner\n   * beside its glyph would not just look wrong, it would resize mid-request\n   * and shove whatever sits next to it sideways.\n   */\n  loading?: boolean;\n}\n\n/** Sizes with no room for a spinner beside the glyph. */\nconst ICON_SIZES = new Set<string>([\"icon\", \"icon-sm\"]);\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(\n  (\n    {\n      className,\n      variant,\n      size,\n      asChild = false,\n      loading,\n      disabled,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = asChild ? Slot : \"button\";\n\n    // `asChild` renders someone else's element, which may not take a spinner or\n    // a disabled attribute — so the busy treatment is only applied to a real\n    // button, and passing both is a mistake worth not papering over.\n    if (asChild) {\n      return (\n        <Comp\n          ref={ref}\n          className={cn(buttonVariants({ variant, size }), className)}\n          {...props}\n        >\n          {children}\n        </Comp>\n      );\n    }\n\n    return (\n      <button\n        ref={ref}\n        disabled={disabled || loading}\n        aria-busy={loading || undefined}\n        className={cn(buttonVariants({ variant, size }), className)}\n        {...props}\n      >\n        {loading ? <Spinner size=\"sm\" /> : null}\n        {loading && size != null && ICON_SIZES.has(size) ? null : children}\n      </button>\n    );\n  },\n);\n\nButton.displayName = \"Button\";\n","import * as React from \"react\";\nimport { Loader2 } from \"lucide-react\";\n\nimport { cn } from \"./utils\";\n\n/**\n * The one spinner.\n *\n * There were five spellings of `animate-spin` across twelve files — `h-4 w-4`,\n * `h-5 w-5`, `size-4`, bare, and a hand-drawn ring in `ProtectedRoute` — so the\n * same \"working\" signal came out a different size depending on which panel you\n * were on.\n *\n * It is `aria-hidden` on purpose. A spinner is decoration; what a screen reader\n * needs is the surrounding control's `aria-busy` or the panel's status text,\n * and announcing \"loading\" twice is worse than once. `Button` and `StatePanel`\n * both supply that.\n */\nconst SIZES = {\n  sm: \"size-3.5\",\n  md: \"size-4\",\n  lg: \"size-5\",\n  xl: \"size-10 border-2\",\n} as const;\n\nexport interface SpinnerProps extends React.SVGProps<SVGSVGElement> {\n  size?: keyof typeof SIZES;\n}\n\nexport function Spinner({ size = \"md\", className, ...props }: SpinnerProps) {\n  return (\n    <Loader2\n      aria-hidden\n      className={cn(\"animate-spin\", SIZES[size], className)}\n      {...props}\n    />\n  );\n}\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","import * as React from \"react\";\n\nimport { cn } from \"./utils\";\n\nexport const inputClass =\n  \"h-9 w-full rounded-md border border-border bg-background px-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50\";\n\nexport type InputProps = React.InputHTMLAttributes<HTMLInputElement>;\n\nexport const Input = React.forwardRef<HTMLInputElement, InputProps>(\n  ({ className, ...props }, ref) => (\n    <input ref={ref} className={cn(inputClass, className)} {...props} />\n  ),\n);\n\nInput.displayName = \"Input\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAAA,uBAAsC;AACtC,IAAAC,SAAuB;;;ACHvB,YAAuB;AACvB,sCAAuC;AACvC,wBAAqB;;;ACDrB,0BAAwB;;;ACDxB,kBAAsC;AACtC,4BAAwB;AAEjB,SAAS,MAAM,QAAsB;AAC1C,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC7B;;;AD0BI;AAbJ,IAAM,QAAQ;AAAA,EACZ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAMO,SAAS,QAAQ,EAAE,OAAO,MAAM,WAAW,GAAG,MAAM,GAAiB;AAC1E,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAW,GAAG,gBAAgB,MAAM,IAAI,GAAG,SAAS;AAAA,MACnD,GAAG;AAAA;AAAA,EACN;AAEJ;;;ADkDQ,IAAAC,sBAAA;AAhFR,IAAM,qBAAiB;AAAA,EACrB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WAAW;AAAA,QACX,OAAO;AAAA,QACP,aACE;AAAA,QACF,SAAS;AAAA,MACX;AAAA,MACA,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA;AAAA;AAAA,QAGN,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IACR;AAAA,EACF;AACF;AA8BA,IAAM,aAAa,oBAAI,IAAY,CAAC,QAAQ,SAAS,CAAC;AAE/C,IAAM,SAAe;AAAA,EAC1B,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACL,GACA,QACG;AACH,UAAM,OAAO,UAAU,yBAAO;AAK9B,QAAI,SAAS;AACX,aACE;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,UACzD,GAAG;AAAA,UAEH;AAAA;AAAA,MACH;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,aAAW,WAAW;AAAA,QACtB,WAAW,GAAG,eAAe,EAAE,SAAS,KAAK,CAAC,GAAG,SAAS;AAAA,QACzD,GAAG;AAAA,QAEH;AAAA,oBAAU,6CAAC,WAAQ,MAAK,MAAK,IAAK;AAAA,UAClC,WAAW,QAAQ,QAAQ,WAAW,IAAI,IAAI,IAAI,OAAO;AAAA;AAAA;AAAA,IAC5D;AAAA,EAEJ;AACF;AAEA,OAAO,cAAc;;;AGhHrB,IAAAC,SAAuB;AAWnB,IAAAC,sBAAA;AAPG,IAAM,aACX;AAIK,IAAM,QAAc;AAAA,EACzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,6CAAC,WAAM,KAAU,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OAAO;AAEtE;AAEA,MAAM,cAAc;;;AJuFZ,IAAAC,sBAAA;AA/DD,SAAS,cAAc;AAAA,EAC5B,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,SAAS;AAAA,EACT;AAAA,EACA;AACF,GAAuB;AACrB,QAAM,WAAiB,cAAyB,IAAI;AACpD,QAAM,CAAC,WAAW,YAAY,IAAU,gBAAS,KAAK;AACtD,QAAM,CAAC,OAAO,QAAQ,IAAU,gBAAwB,IAAI;AAC5D,QAAM,OAAO,QAAQ,YAAY,SAAS;AAE1C,QAAM,aAAa,OAAO,SAAe;AACvC,QAAI,CAAC,YAAY;AACf,eAAS,+CAA+C;AACxD;AAAA,IACF;AACA,iBAAa,IAAI;AACjB,aAAS,IAAI;AACb,QAAI;AACF,eAAS,MAAM,WAAW,IAAI,CAAC;AAAA,IACjC,SAAS,KAAK;AACZ,eAAS,eAAe,QAAQ,IAAI,UAAU,eAAe;AAAA,IAC/D,UAAE;AACA,mBAAa,KAAK;AAClB,UAAI,SAAS,QAAS,UAAS,QAAQ,QAAQ;AAAA,IACjD;AAAA,EACF;AAEA,QAAM,YAAY,OAAO,aAAqB;AAC5C,UAAM,UAAU,SAAS,KAAK;AAC9B,QAAI,CAAC,SAAS;AACZ,eAAS,EAAE;AACX;AAAA,IACF;AACA,QAAI,YAAY,MAAO;AAIvB,QAAI,CAAC,iBAAiB,gBAAgB,KAAK,OAAO,GAAG;AACnD,eAAS,IAAI;AACb,eAAS,OAAO;AAChB;AAAA,IACF;AAEA,iBAAa,IAAI;AACjB,aAAS,IAAI;AACb,QAAI;AACF,eAAS,MAAM,cAAc,OAAO,CAAC;AAAA,IACvC,SAAS,KAAK;AACZ,eAAS,eAAe,QAAQ,IAAI,UAAU,eAAe;AAAA,IAC/D,UAAE;AACA,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF;AAEA,SACE,8CAAC,SAAI,WAAW,GAAG,aAAa,SAAS,GACtC;AAAA,YACC,6CAAC,SAAI,WAAU,6CAA6C,iBAAM,IAChE;AAAA,IAEJ,8CAAC,SAAI,WAAU,qCACb;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,MAAK;AAAA,UACL;AAAA,UACA,WAAU;AAAA,UACV,UAAU;AAAA,UACV,UAAU,CAAC,MAAM;AACf,kBAAM,OAAO,EAAE,OAAO,QAAQ,CAAC;AAC/B,gBAAI,KAAM,MAAK,WAAW,IAAI;AAAA,UAChC;AAAA;AAAA,MACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU;AAAA,UACV,SAAS,MAAM,SAAS,SAAS,MAAM;AAAA,UAEtC;AAAA,wBACC,6CAAC,gCAAQ,WAAU,wBAAuB,IAE1C,6CAAC,kCAAU,WAAU,WAAU;AAAA,YAEhC,YAAY,oBAAe;AAAA;AAAA;AAAA,MAC9B;AAAA,MACC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,UAAU;AAAA,UACV,SAAS,MAAM,SAAS,EAAE;AAAA,UAC1B,cAAW;AAAA,UAEX;AAAA,yDAAC,0BAAE,WAAU,WAAU;AAAA,YAAE;AAAA;AAAA;AAAA,MAE3B,IACE;AAAA,OACN;AAAA,IAEC,gBACC;AAAA,MAAC;AAAA;AAAA,QAEC,cAAc;AAAA,QACd,UAAU;AAAA,QACV,aAAY;AAAA,QACZ,QAAQ,CAAC,MAAM;AACb,eAAK,UAAU,EAAE,OAAO,KAAK;AAAA,QAC/B;AAAA,QACA,WAAW,CAAC,MAAM;AAChB,cAAI,EAAE,QAAQ,SAAS;AACrB,cAAE,eAAe;AACjB,iBAAK,UAAW,EAAE,OAA4B,KAAK;AAAA,UACrD;AAAA,QACF;AAAA;AAAA,MAZK,SAAS;AAAA,IAahB,IACE;AAAA,IAEH;AAAA;AAAA,MAEC;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,KAAI;AAAA,UACJ,WAAU;AAAA;AAAA,MACZ;AAAA,QACE;AAAA,IAEH,QACC,6CAAC,OAAE,WAAU,4BAA2B,MAAK,SAC1C,iBACH,IACE;AAAA,KACN;AAEJ;","names":["import_lucide_react","React","import_jsx_runtime","React","import_jsx_runtime","import_jsx_runtime"]}

package/dist/image-uploader.d.cts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+type ImageUploaderProps = {
+    value?: string;
+    onChange: (url: string) => void;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+    /** Allow pasting a remote URL in addition to file upload. Default true. */
+    allowUrlPaste?: boolean;
+    accept?: string;
+    /**
+     * Upload a picked file and return its hosted URL.
+     * Injected by the panel — Upload stays enabled either way; without a
+     * handler, picking a file surfaces a configuration error.
+     */
+    uploadFile?: (file: File) => Promise<string>;
+    /**
+     * Optional transform for pasted values (e.g. host a relative path).
+     * When omitted, any pasted non-empty string is applied as-is. Absolute
+     * `http(s)` URLs never call this.
+     */
+    uploadFromUrl?: (imageUrl: string) => Promise<string>;
+};
+/**
+ * Reusable image uploader.
+ *
+ * Upload and URL paste are both enabled by default. Hosting is injected:
+ * each panel passes `uploadFile` / `uploadFromUrl` so the kit stays free of
+ * panel-specific API routes.
+ */
+declare function ImageUploader({ value, onChange, disabled, label, className, allowUrlPaste, accept, uploadFile, uploadFromUrl, }: ImageUploaderProps): React.JSX.Element;
+
+export { ImageUploader, type ImageUploaderProps };

package/dist/image-uploader.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+type ImageUploaderProps = {
+    value?: string;
+    onChange: (url: string) => void;
+    disabled?: boolean;
+    label?: string;
+    className?: string;
+    /** Allow pasting a remote URL in addition to file upload. Default true. */
+    allowUrlPaste?: boolean;
+    accept?: string;
+    /**
+     * Upload a picked file and return its hosted URL.
+     * Injected by the panel — Upload stays enabled either way; without a
+     * handler, picking a file surfaces a configuration error.
+     */
+    uploadFile?: (file: File) => Promise<string>;
+    /**
+     * Optional transform for pasted values (e.g. host a relative path).
+     * When omitted, any pasted non-empty string is applied as-is. Absolute
+     * `http(s)` URLs never call this.
+     */
+    uploadFromUrl?: (imageUrl: string) => Promise<string>;
+};
+/**
+ * Reusable image uploader.
+ *
+ * Upload and URL paste are both enabled by default. Hosting is injected:
+ * each panel passes `uploadFile` / `uploadFromUrl` so the kit stays free of
+ * panel-specific API routes.
+ */
+declare function ImageUploader({ value, onChange, disabled, label, className, allowUrlPaste, accept, uploadFile, uploadFromUrl, }: ImageUploaderProps): React.JSX.Element;
+
+export { ImageUploader, type ImageUploaderProps };

package/dist/image-uploader.js

@@ -0,0 +1,12 @@
+"use client";
+import {
+  ImageUploader
+} from "./chunk-YDICVETX.js";
+import "./chunk-PWAKTEXF.js";
+import "./chunk-KR3BCFP7.js";
+import "./chunk-UE7JY7VR.js";
+import "./chunk-HCA5ODCD.js";
+export {
+  ImageUploader
+};
+//# sourceMappingURL=image-uploader.js.map

package/dist/image-uploader.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}