@solidxai/core-ui 0.1.7-beta.1 → 0.1.7-beta.3

package/dist/components/shad-cn-ui/SolidLightbox.tsx

@@ -0,0 +1,281 @@
+import type { CSSProperties } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import Viewer from "viewerjs";
+import "viewerjs/dist/viewer.css";
+
+type SlideType = "image" | "video" | "audio";
+
+export interface SolidLightboxSlide {
+  src: string;
+  type?: SlideType;
+  mimeType?: string;
+  poster?: string;
+  downloadUrl?: string;
+}
+
+export interface SolidLightboxProps {
+  slides: SolidLightboxSlide[];
+  open: boolean;
+  onClose: () => void;
+  viewerOptions?: Viewer.Options;
+}
+
+export const SolidLightbox = ({
+  slides,
+  open,
+  onClose,
+  viewerOptions,
+}: SolidLightboxProps) => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const viewerRef = useRef<Viewer | null>(null);
+
+  const sanitizedSlides = useMemo(
+    () => slides.filter((slide) => !!slide?.src),
+    [slides]
+  );
+
+  const hasOnlyImages = useMemo(
+    () => sanitizedSlides.every((slide) => (slide.type ?? "image") === "image"),
+    [sanitizedSlides]
+  );
+
+  useEffect(() => {
+    if (open) {
+      setCurrentIndex(0);
+    }
+  }, [open, sanitizedSlides]);
+
+  useEffect(() => {
+    if (!hasOnlyImages || !open) {
+      if (viewerRef.current) {
+        viewerRef.current.destroy();
+        viewerRef.current = null;
+      }
+      return;
+    }
+
+    if (!containerRef.current || sanitizedSlides.length === 0) return;
+
+    if (viewerRef.current) {
+      viewerRef.current.destroy();
+    }
+
+    viewerRef.current = new Viewer(containerRef.current, {
+      navbar: sanitizedSlides.length > 1,
+      title: false,
+      transition: true,
+      movable: true,
+      scalable: true,
+      rotatable: true,
+      zoomable: true,
+      zIndex: 9999,
+      hidden: () => {
+        onClose();
+      },
+      toolbar: {
+        prev: 1,
+        next: 1,
+        zoomIn: 1,
+        zoomOut: 1,
+        rotateLeft: 1,
+        rotateRight: 1,
+        reset: 1,
+      },
+      ...viewerOptions,
+    });
+
+    viewerRef.current.show();
+
+    return () => {
+      if (viewerRef.current) {
+        viewerRef.current.destroy();
+        viewerRef.current = null;
+      }
+    };
+  }, [sanitizedSlides, hasOnlyImages, open]);
+
+  if (!open || sanitizedSlides.length === 0) {
+    return null;
+  }
+
+  if (hasOnlyImages) {
+    return (
+      <div
+        ref={containerRef}
+        style={{
+          position: "absolute",
+          visibility: "hidden",
+          width: 0,
+          height: 0,
+          overflow: "hidden",
+        }}
+      >
+        {sanitizedSlides.map((slide, index) => (
+          <img key={index} src={slide.src} alt={`preview-${index}`} />
+        ))}
+      </div>
+    );
+  }
+
+  const handlePrev = () => {
+    setCurrentIndex((prev) =>
+      prev === 0 ? sanitizedSlides.length - 1 : prev - 1
+    );
+  };
+
+  const handleNext = () => {
+    setCurrentIndex((prev) =>
+      prev === sanitizedSlides.length - 1 ? 0 : prev + 1
+    );
+  };
+
+  const currentSlide = sanitizedSlides[currentIndex];
+  const showNav = sanitizedSlides.length > 1;
+
+  const renderSlide = () => {
+    const mediaType = currentSlide?.type ?? "image";
+    if (mediaType === "video") {
+      return (
+        <video
+          key={currentSlide.src}
+          controls
+          autoPlay
+          style={{ maxWidth: "90vw", maxHeight: "80vh" }}
+          poster={currentSlide.poster}
+        >
+          <source
+            src={currentSlide.src}
+            type={currentSlide.mimeType || "video/mp4"}
+          />
+          Your browser does not support the video tag.
+        </video>
+      );
+    }
+
+    if (mediaType === "audio") {
+      return (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "1rem",
+          }}
+        >
+          <div
+            style={{
+              width: "160px",
+              height: "160px",
+              borderRadius: "50%",
+              background: "rgba(255,255,255,0.08)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: "3rem",
+              color: "#fff",
+            }}
+          >
+            ♪
+          </div>
+          <audio controls autoPlay preload="auto" style={{ width: "320px" }}>
+            <source
+              src={currentSlide.src}
+              type={currentSlide.mimeType || "audio/mpeg"}
+            />
+            Your browser does not support the audio element.
+          </audio>
+        </div>
+      );
+    }
+
+    return (
+      <img
+        key={currentSlide.src}
+        src={currentSlide.src}
+        alt="lightbox-media"
+        style={{ maxWidth: "90vw", maxHeight: "80vh", objectFit: "contain" }}
+      />
+    );
+  };
+
+  return (
+    <div style={overlayStyles}>
+      <button style={closeButtonStyles} onClick={onClose} aria-label="Close">
+        ×
+      </button>
+      {showNav && (
+        <>
+          <button
+            style={navButtonStyles("left")}
+            onClick={handlePrev}
+            aria-label="Previous"
+          >
+            ‹
+          </button>
+          <button
+            style={navButtonStyles("right")}
+            onClick={handleNext}
+            aria-label="Next"
+          >
+            ›
+          </button>
+        </>
+      )}
+      <div style={contentStyles}>{renderSlide()}</div>
+    </div>
+  );
+};
+
+const overlayStyles: CSSProperties = {
+  position: "fixed",
+  inset: 0,
+  backgroundColor: "rgba(0,0,0,0.85)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 10000,
+};
+
+const contentStyles: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "100%",
+  padding: "16px",
+};
+
+const closeButtonStyles: CSSProperties = {
+  position: "absolute",
+  top: "16px",
+  right: "24px",
+  fontSize: "2rem",
+  color: "#fff",
+  background: "transparent",
+  border: "none",
+  cursor: "pointer",
+};
+
+const navButtonStyles = (direction: "left" | "right"): CSSProperties => {
+  const baseStyles: CSSProperties = {
+    position: "absolute",
+    top: "50%",
+    transform: "translateY(-50%)",
+    fontSize: "2.5rem",
+    color: "#fff",
+    background: "rgba(0,0,0,0.4)",
+    border: "none",
+    width: "48px",
+    height: "48px",
+    borderRadius: "999px",
+    cursor: "pointer",
+  };
+
+  if (direction === "left") {
+    baseStyles.left = "24px";
+  } else {
+    baseStyles.right = "24px";
+  }
+
+  return baseStyles;
+};

package/dist/components/shad-cn-ui/SolidMessage.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+type SolidMessageProps = {
+    severity?: "info" | "success" | "warn" | "error";
+    text?: string;
+    children?: React.ReactNode;
+    className?: string;
+};
+export declare function SolidMessage({ severity, text, children, className }: SolidMessageProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidMessage.d.ts.map

package/dist/components/shad-cn-ui/SolidMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMessage.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,KAAK,iBAAiB,GAAG;IACvB,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IACjD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF,wBAAgB,YAAY,CAAC,EAAE,QAAiB,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CAM/F"}

package/dist/components/shad-cn-ui/SolidMessage.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+function cx() {
+    var parts = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        parts[_i] = arguments[_i];
+    }
+    return parts.filter(Boolean).join(" ");
+}
+export function SolidMessage(_a) {
+    var _b = _a.severity, severity = _b === void 0 ? "info" : _b, text = _a.text, children = _a.children, className = _a.className;
+    return (_jsx("div", { className: cx("solid-message", "solid-message-".concat(severity), className), role: "status", children: text !== null && text !== void 0 ? text : children }));
+}
+//# sourceMappingURL=SolidMessage.js.map

package/dist/components/shad-cn-ui/SolidMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidMessage.js","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidMessage.tsx"],"names":[],"mappings":";AASA,SAAS,EAAE;IAAC,eAA2C;SAA3C,UAA2C,EAA3C,qBAA2C,EAA3C,IAA2C;QAA3C,0BAA2C;;IACrD,OAAO,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;AACzC,CAAC;AAED,MAAM,UAAU,YAAY,CAAC,EAAmE;QAAjE,gBAAiB,EAAjB,QAAQ,mBAAG,MAAM,KAAA,EAAE,IAAI,UAAA,EAAE,QAAQ,cAAA,EAAE,SAAS,eAAA;IACzE,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,wBAAiB,QAAQ,CAAE,EAAE,SAAS,CAAC,EAAE,IAAI,EAAC,QAAQ,YACvF,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,GACb,CACP,CAAC;AACJ,CAAC","sourcesContent":["import React from \"react\";\n\ntype SolidMessageProps = {\n  severity?: \"info\" | \"success\" | \"warn\" | \"error\";\n  text?: string;\n  children?: React.ReactNode;\n  className?: string;\n};\n\nfunction cx(...parts: Array<string | false | undefined>) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport function SolidMessage({ severity = \"info\", text, children, className }: SolidMessageProps) {\n  return (\n    <div className={cx(\"solid-message\", `solid-message-${severity}`, className)} role=\"status\">\n      {text ?? children}\n    </div>\n  );\n}\n"]}

package/dist/components/shad-cn-ui/SolidMessage.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+
+type SolidMessageProps = {
+  severity?: "info" | "success" | "warn" | "error";
+  text?: string;
+  children?: React.ReactNode;
+  className?: string;
+};
+
+function cx(...parts: Array<string | false | undefined>) {
+  return parts.filter(Boolean).join(" ");
+}
+
+export function SolidMessage({ severity = "info", text, children, className }: SolidMessageProps) {
+  return (
+    <div className={cx("solid-message", `solid-message-${severity}`, className)} role="status">
+      {text ?? children}
+    </div>
+  );
+}

package/dist/components/shad-cn-ui/SolidOtpInput.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+type SolidOtpInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
+    value: string;
+    onChange?: (value: string) => void;
+    length?: number;
+    integerOnly?: boolean;
+    invalid?: boolean;
+    className?: string;
+};
+export declare function SolidOtpInput({ value, onChange, length, integerOnly, className, invalid, disabled, autoComplete, id, name, ...inputProps }: SolidOtpInputProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidOtpInput.d.ts.map

package/dist/components/shad-cn-ui/SolidOtpInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidOtpInput.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidOtpInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAE/C,KAAK,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAClG,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF,wBAAgB,aAAa,CAAC,EAC5B,KAAU,EACV,QAAQ,EACR,MAAU,EACV,WAAkB,EAClB,SAAS,EACT,OAAO,EACP,QAAQ,EACR,YAA8B,EAC9B,EAAE,EACF,IAAI,EACJ,GAAG,UAAU,EACd,EAAE,kBAAkB,2CAyHpB"}

package/dist/components/shad-cn-ui/SolidOtpInput.js

@@ -0,0 +1,143 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef } from "react";
+function cx() {
+    var parts = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        parts[_i] = arguments[_i];
+    }
+    return parts.filter(Boolean).join(" ");
+}
+export function SolidOtpInput(_a) {
+    var _b = _a.value, value = _b === void 0 ? "" : _b, onChange = _a.onChange, _c = _a.length, length = _c === void 0 ? 6 : _c, _d = _a.integerOnly, integerOnly = _d === void 0 ? true : _d, className = _a.className, invalid = _a.invalid, disabled = _a.disabled, _e = _a.autoComplete, autoComplete = _e === void 0 ? "one-time-code" : _e, id = _a.id, name = _a.name, inputProps = __rest(_a, ["value", "onChange", "length", "integerOnly", "className", "invalid", "disabled", "autoComplete", "id", "name"]);
+    var inputsRef = useRef([]);
+    var values = useMemo(function () {
+        var _a;
+        var safeValue = (value !== null && value !== void 0 ? value : "").toString().slice(0, length);
+        var chars = new Array(length).fill("");
+        for (var i = 0; i < safeValue.length && i < length; i += 1) {
+            chars[i] = (_a = safeValue[i]) !== null && _a !== void 0 ? _a : "";
+        }
+        return chars;
+    }, [value, length]);
+    var emitChange = function (nextChars) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextChars.join("").slice(0, length));
+    };
+    var focusInput = function (index) {
+        var target = inputsRef.current[index];
+        target === null || target === void 0 ? void 0 : target.focus();
+        target === null || target === void 0 ? void 0 : target.select();
+    };
+    var handleValueChange = function (index, raw) {
+        var _a;
+        if (disabled)
+            return;
+        var sanitized = raw;
+        if (integerOnly) {
+            sanitized = sanitized.replace(/\D/g, "");
+        }
+        var nextChars = __spreadArray([], values, true);
+        if (!sanitized) {
+            nextChars[index] = "";
+            emitChange(nextChars);
+            return;
+        }
+        var nextChar = (_a = sanitized[sanitized.length - 1]) !== null && _a !== void 0 ? _a : "";
+        nextChars[index] = nextChar;
+        emitChange(nextChars);
+        if (nextChar && index < length - 1) {
+            focusInput(index + 1);
+        }
+    };
+    var handleKeyDown = function (index, event) {
+        if (event.key === "Backspace") {
+            event.preventDefault();
+            var nextChars = __spreadArray([], values, true);
+            if (values[index]) {
+                nextChars[index] = "";
+                emitChange(nextChars);
+                return;
+            }
+            if (index > 0) {
+                nextChars[index - 1] = "";
+                emitChange(nextChars);
+                focusInput(index - 1);
+            }
+            return;
+        }
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            if (index > 0)
+                focusInput(index - 1);
+            return;
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            if (index < length - 1)
+                focusInput(index + 1);
+        }
+    };
+    var handlePaste = function (index, event) {
+        var _a;
+        if (disabled)
+            return;
+        event.preventDefault();
+        var pasted = event.clipboardData.getData("text");
+        if (!pasted)
+            return;
+        if (integerOnly)
+            pasted = pasted.replace(/\D/g, "");
+        if (!pasted)
+            return;
+        var nextChars = __spreadArray([], values, true);
+        var cursor = index;
+        for (var _i = 0, pasted_1 = pasted; _i < pasted_1.length; _i++) {
+            var char = pasted_1[_i];
+            if (cursor >= length)
+                break;
+            nextChars[cursor] = char;
+            cursor += 1;
+        }
+        emitChange(nextChars);
+        if (cursor <= length - 1) {
+            focusInput(cursor);
+        }
+        else {
+            (_a = inputsRef.current[length - 1]) === null || _a === void 0 ? void 0 : _a.blur();
+        }
+    };
+    return (_jsx("div", { className: cx("solid-otp-input", className, invalid && "is-invalid", disabled && "is-disabled"), "aria-invalid": invalid || undefined, children: values.map(function (char, index) { return (_jsx("input", __assign({ ref: function (node) {
+                inputsRef.current[index] = node;
+            }, id: index === 0 ? id : undefined, name: index === 0 ? name : undefined, type: "text", inputMode: integerOnly ? "numeric" : "text", autoComplete: autoComplete, maxLength: 1, pattern: integerOnly ? "\\d" : undefined, className: "solid-otp-input-field", value: char, disabled: disabled, onChange: function (event) { return handleValueChange(index, event.target.value); }, onKeyDown: function (event) { return handleKeyDown(index, event); }, onFocus: function (event) { return event.target.select(); }, onPaste: function (event) { return handlePaste(index, event); } }, inputProps), index)); }) }));
+}
+//# sourceMappingURL=SolidOtpInput.js.map

package/dist/components/shad-cn-ui/SolidOtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidOtpInput.js","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidOtpInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useMemo, useRef } from \"react\";\n\ntype SolidOtpInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, \"value\" | \"onChange\"> & {\n  value: string;\n  onChange?: (value: string) => void;\n  length?: number;\n  integerOnly?: boolean;\n  invalid?: boolean;\n  className?: string;\n};\n\nfunction cx(...parts: Array<string | false | undefined>) {\n  return parts.filter(Boolean).join(\" \");\n}\n\nexport function SolidOtpInput({\n  value = \"\",\n  onChange,\n  length = 6,\n  integerOnly = true,\n  className,\n  invalid,\n  disabled,\n  autoComplete = \"one-time-code\",\n  id,\n  name,\n  ...inputProps\n}: SolidOtpInputProps) {\n  const inputsRef = useRef<Array<HTMLInputElement | null>>([]);\n\n  const values = useMemo(() => {\n    const safeValue = (value ?? \"\").toString().slice(0, length);\n    const chars = new Array(length).fill(\"\");\n    for (let i = 0; i < safeValue.length && i < length; i += 1) {\n      chars[i] = safeValue[i] ?? \"\";\n    }\n    return chars;\n  }, [value, length]);\n\n  const emitChange = (nextChars: string[]) => {\n    onChange?.(nextChars.join(\"\").slice(0, length));\n  };\n\n  const focusInput = (index: number) => {\n    const target = inputsRef.current[index];\n    target?.focus();\n    target?.select();\n  };\n\n  const handleValueChange = (index: number, raw: string) => {\n    if (disabled) return;\n    let sanitized = raw;\n    if (integerOnly) {\n      sanitized = sanitized.replace(/\\D/g, \"\");\n    }\n    const nextChars = [...values];\n    if (!sanitized) {\n      nextChars[index] = \"\";\n      emitChange(nextChars);\n      return;\n    }\n    const nextChar = sanitized[sanitized.length - 1] ?? \"\";\n    nextChars[index] = nextChar;\n    emitChange(nextChars);\n    if (nextChar && index < length - 1) {\n      focusInput(index + 1);\n    }\n  };\n\n  const handleKeyDown = (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === \"Backspace\") {\n      event.preventDefault();\n      const nextChars = [...values];\n      if (values[index]) {\n        nextChars[index] = \"\";\n        emitChange(nextChars);\n        return;\n      }\n      if (index > 0) {\n        nextChars[index - 1] = \"\";\n        emitChange(nextChars);\n        focusInput(index - 1);\n      }\n      return;\n    }\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      if (index > 0) focusInput(index - 1);\n      return;\n    }\n    if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      if (index < length - 1) focusInput(index + 1);\n    }\n  };\n\n  const handlePaste = (index: number, event: React.ClipboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n    event.preventDefault();\n    let pasted = event.clipboardData.getData(\"text\");\n    if (!pasted) return;\n    if (integerOnly) pasted = pasted.replace(/\\D/g, \"\");\n    if (!pasted) return;\n    const nextChars = [...values];\n    let cursor = index;\n    for (const char of pasted) {\n      if (cursor >= length) break;\n      nextChars[cursor] = char;\n      cursor += 1;\n    }\n    emitChange(nextChars);\n    if (cursor <= length - 1) {\n      focusInput(cursor);\n    } else {\n      inputsRef.current[length - 1]?.blur();\n    }\n  };\n\n  return (\n    <div\n      className={cx(\"solid-otp-input\", className, invalid && \"is-invalid\", disabled && \"is-disabled\")}\n      aria-invalid={invalid || undefined}\n    >\n      {values.map((char, index) => (\n        <input\n          key={index}\n          ref={(node) => {\n            inputsRef.current[index] = node;\n          }}\n          id={index === 0 ? id : undefined}\n          name={index === 0 ? name : undefined}\n          type=\"text\"\n          inputMode={integerOnly ? \"numeric\" : \"text\"}\n          autoComplete={autoComplete}\n          maxLength={1}\n          pattern={integerOnly ? \"\\\\d\" : undefined}\n          className=\"solid-otp-input-field\"\n          value={char}\n          disabled={disabled}\n          onChange={(event) => handleValueChange(index, event.target.value)}\n          onKeyDown={(event) => handleKeyDown(index, event)}\n          onFocus={(event) => event.target.select()}\n          onPaste={(event) => handlePaste(index, event)}\n          {...inputProps}\n        />\n      ))}\n    </div>\n  );\n}\n"]}

package/dist/components/shad-cn-ui/SolidOtpInput.tsx

@@ -0,0 +1,149 @@
+import React, { useMemo, useRef } from "react";
+
+type SolidOtpInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange"> & {
+  value: string;
+  onChange?: (value: string) => void;
+  length?: number;
+  integerOnly?: boolean;
+  invalid?: boolean;
+  className?: string;
+};
+
+function cx(...parts: Array<string | false | undefined>) {
+  return parts.filter(Boolean).join(" ");
+}
+
+export function SolidOtpInput({
+  value = "",
+  onChange,
+  length = 6,
+  integerOnly = true,
+  className,
+  invalid,
+  disabled,
+  autoComplete = "one-time-code",
+  id,
+  name,
+  ...inputProps
+}: SolidOtpInputProps) {
+  const inputsRef = useRef<Array<HTMLInputElement | null>>([]);
+
+  const values = useMemo(() => {
+    const safeValue = (value ?? "").toString().slice(0, length);
+    const chars = new Array(length).fill("");
+    for (let i = 0; i < safeValue.length && i < length; i += 1) {
+      chars[i] = safeValue[i] ?? "";
+    }
+    return chars;
+  }, [value, length]);
+
+  const emitChange = (nextChars: string[]) => {
+    onChange?.(nextChars.join("").slice(0, length));
+  };
+
+  const focusInput = (index: number) => {
+    const target = inputsRef.current[index];
+    target?.focus();
+    target?.select();
+  };
+
+  const handleValueChange = (index: number, raw: string) => {
+    if (disabled) return;
+    let sanitized = raw;
+    if (integerOnly) {
+      sanitized = sanitized.replace(/\D/g, "");
+    }
+    const nextChars = [...values];
+    if (!sanitized) {
+      nextChars[index] = "";
+      emitChange(nextChars);
+      return;
+    }
+    const nextChar = sanitized[sanitized.length - 1] ?? "";
+    nextChars[index] = nextChar;
+    emitChange(nextChars);
+    if (nextChar && index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+
+  const handleKeyDown = (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      const nextChars = [...values];
+      if (values[index]) {
+        nextChars[index] = "";
+        emitChange(nextChars);
+        return;
+      }
+      if (index > 0) {
+        nextChars[index - 1] = "";
+        emitChange(nextChars);
+        focusInput(index - 1);
+      }
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      if (index > 0) focusInput(index - 1);
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      if (index < length - 1) focusInput(index + 1);
+    }
+  };
+
+  const handlePaste = (index: number, event: React.ClipboardEvent<HTMLInputElement>) => {
+    if (disabled) return;
+    event.preventDefault();
+    let pasted = event.clipboardData.getData("text");
+    if (!pasted) return;
+    if (integerOnly) pasted = pasted.replace(/\D/g, "");
+    if (!pasted) return;
+    const nextChars = [...values];
+    let cursor = index;
+    for (const char of pasted) {
+      if (cursor >= length) break;
+      nextChars[cursor] = char;
+      cursor += 1;
+    }
+    emitChange(nextChars);
+    if (cursor <= length - 1) {
+      focusInput(cursor);
+    } else {
+      inputsRef.current[length - 1]?.blur();
+    }
+  };
+
+  return (
+    <div
+      className={cx("solid-otp-input", className, invalid && "is-invalid", disabled && "is-disabled")}
+      aria-invalid={invalid || undefined}
+    >
+      {values.map((char, index) => (
+        <input
+          key={index}
+          ref={(node) => {
+            inputsRef.current[index] = node;
+          }}
+          id={index === 0 ? id : undefined}
+          name={index === 0 ? name : undefined}
+          type="text"
+          inputMode={integerOnly ? "numeric" : "text"}
+          autoComplete={autoComplete}
+          maxLength={1}
+          pattern={integerOnly ? "\\d" : undefined}
+          className="solid-otp-input-field"
+          value={char}
+          disabled={disabled}
+          onChange={(event) => handleValueChange(index, event.target.value)}
+          onKeyDown={(event) => handleKeyDown(index, event)}
+          onFocus={(event) => event.target.select()}
+          onPaste={(event) => handlePaste(index, event)}
+          {...inputProps}
+        />
+      ))}
+    </div>
+  );
+}

package/dist/components/shad-cn-ui/SolidPanel.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+type SolidPanelProps = {
+    header?: React.ReactNode;
+    toggleable?: boolean;
+    defaultCollapsed?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+};
+export declare function SolidPanel({ header, toggleable, defaultCollapsed, children, className }: SolidPanelProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SolidPanel.d.ts.map

package/dist/components/shad-cn-ui/SolidPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SolidPanel.d.ts","sourceRoot":"","sources":["../../../src/components/shad-cn-ui/SolidPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,KAAK,eAAe,GAAG;IACrB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAMF,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,eAAe,2CAoBxG"}