@roy-ui/ui 0.0.2

package/dist/GradientButton-TX2GJRIQ.css

@@ -0,0 +1,74 @@
+.gradient-btn {
+  position: relative;
+  display: inline-block;
+  padding: 13px 24px;
+  border-radius: 8px;
+  border: none;
+  background: linear-gradient(325deg, #0044ff 0%, #2ccfff 55%, #0044ff 90%);
+  background-size: 280% auto;
+  background-position: left center;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  transition:
+    background-position 0.7s ease,
+    transform 0.2s ease,
+    box-shadow 0.25s ease;
+  box-shadow:
+    0 0 20px rgba(71, 184, 255, 0.45),
+    0 5px 12px -2px rgba(58, 125, 233, 0.3),
+    inset 4px 4px 8px rgba(175, 230, 255, 0.4),
+    inset -4px -4px 8px rgba(19, 95, 216, 0.35);
+}
+
+.gradient-btn--full {
+  width: 100%;
+}
+
+.gradient-btn:hover:not(:disabled) {
+  background-position: right top;
+  transform: translateY(-1px);
+  box-shadow:
+    0 0 28px rgba(71, 184, 255, 0.6),
+    0 6px 14px -2px rgba(58, 125, 233, 0.4),
+    inset 4px 4px 8px rgba(175, 230, 255, 0.45),
+    inset -4px -4px 8px rgba(19, 95, 216, 0.4);
+}
+
+.gradient-btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.gradient-btn:focus-visible {
+  outline: 2px solid #2ccfff;
+  outline-offset: 2px;
+}
+
+.gradient-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.gradient-btn--loading {
+  cursor: progress;
+}
+
+.gradient-btn__spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+.gradient-btn__spinner svg {
+  animation: gradient-btn__spin 0.75s linear infinite;
+  color: #ffffff;
+}
+
+@keyframes gradient-btn__spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/MadeBy-JCYGHWSD.css

@@ -0,0 +1,116 @@
+.royui-madeby {
+  /* Theme surface — override on .royui-madeby or :root for global retheme. */
+  --royui-madeby-bg: rgba(12, 12, 14, 0.86);
+  --royui-madeby-bg-hover: rgba(16, 16, 19, 0.92);
+  --royui-madeby-border: rgba(255, 255, 255, 0.08);
+  --royui-madeby-border-hover: rgba(255, 255, 255, 0.18);
+  --royui-madeby-prefix: rgba(255, 255, 255, 0.5);
+  --royui-madeby-name: rgba(255, 255, 255, 0.96);
+  --royui-madeby-name-hover: #4ec6ff;
+  --royui-madeby-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.18),
+    0 6px 16px -2px rgba(0, 0, 0, 0.28);
+  --royui-madeby-shadow-hover:
+    0 1px 2px rgba(0, 0, 0, 0.22),
+    0 12px 26px -4px rgba(0, 0, 0, 0.34);
+  --royui-madeby-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+
+  /* Author-name typography (overridable). */
+  --royui-madeby-name-font: inherit;
+  --royui-madeby-name-weight: 500;
+
+  position: fixed;
+  z-index: 100;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 7px 13px;
+  background: var(--royui-madeby-bg);
+  backdrop-filter: saturate(180%) blur(14px);
+  -webkit-backdrop-filter: saturate(180%) blur(14px);
+  border: 1px solid var(--royui-madeby-border);
+  border-radius: 999px;
+  font-size: 12.5px;
+  line-height: 1.4;
+  letter-spacing: -0.005em;
+  text-decoration: none;
+  color: var(--royui-madeby-prefix);
+  box-shadow: var(--royui-madeby-shadow);
+  transition:
+    border-color 0.2s var(--royui-madeby-ease),
+    background 0.2s var(--royui-madeby-ease),
+    box-shadow 0.25s var(--royui-madeby-ease),
+    transform 0.2s var(--royui-madeby-ease);
+  user-select: none;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.royui-madeby:hover {
+  background: var(--royui-madeby-bg-hover);
+  border-color: var(--royui-madeby-border-hover);
+  box-shadow: var(--royui-madeby-shadow-hover);
+  transform: translateY(-1px);
+}
+
+.royui-madeby:hover .royui-madeby__name {
+  color: var(--royui-madeby-name-hover);
+}
+
+.royui-madeby:focus-visible {
+  outline: 2px solid var(--royui-madeby-name-hover);
+  outline-offset: 3px;
+}
+
+.royui-madeby:active {
+  transform: translateY(0);
+  box-shadow: var(--royui-madeby-shadow);
+}
+
+.royui-madeby__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 2px;
+  line-height: 0;
+}
+
+.royui-madeby__prefix {
+  color: var(--royui-madeby-prefix);
+  font-weight: 400;
+}
+
+.royui-madeby__name {
+  color: var(--royui-madeby-name);
+  font-weight: var(--royui-madeby-name-weight);
+  font-family: var(--royui-madeby-name-font);
+  font-style: italic;
+  transition: color 0.18s var(--royui-madeby-ease);
+}
+
+/* Positions */
+.royui-madeby--bottom-right { bottom: 18px; right: 18px; }
+.royui-madeby--bottom-left  { bottom: 18px; left: 18px; }
+.royui-madeby--top-right    { top: 18px; right: 18px; }
+.royui-madeby--top-left     { top: 18px; left: 18px; }
+
+@media (max-width: 540px) {
+  .royui-madeby {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+  .royui-madeby--bottom-right,
+  .royui-madeby--bottom-left { bottom: 12px; }
+  .royui-madeby--bottom-right { right: 12px; }
+  .royui-madeby--bottom-left { left: 12px; }
+  .royui-madeby--top-right,
+  .royui-madeby--top-left { top: 12px; }
+  .royui-madeby--top-right { right: 12px; }
+  .royui-madeby--top-left { left: 12px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .royui-madeby,
+  .royui-madeby__name { transition: none; }
+  .royui-madeby:hover { transform: none; }
+}

package/dist/Popover-LSYVKT4M.css

@@ -0,0 +1,136 @@
+.royui-popover {
+  /* Theming surface — override on .royui-popover (or :root) to retheme. */
+  --royui-popover-bg: #ffffff;
+  --royui-popover-title: rgb(20, 20, 20);
+  --royui-popover-body: rgb(58, 58, 56);
+  --royui-popover-trigger-idle: rgb(142, 139, 131);
+  --royui-popover-trigger-hover: rgb(58, 58, 56);
+  --royui-popover-trigger-bg: rgb(244, 243, 238);
+  --royui-popover-trigger-active: rgb(20, 20, 20);
+  --royui-popover-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
+  --royui-popover-dur: 180ms;
+  --royui-popover-radius: 12px;
+  /* Unified shadow stack — also used to draw a hairline ring around the
+     entire popover silhouette (panel + tail) via filter: drop-shadow. */
+  --royui-popover-ring: 0 0 0 0.5px rgba(20, 20, 20, 0.08);
+  --royui-popover-shadow-near: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --royui-popover-shadow-mid: 0 6px 14px rgba(0, 0, 0, 0.08);
+  --royui-popover-shadow-far: 0 22px 44px rgba(0, 0, 0, 0.14);
+
+  position: relative;
+  display: inline-block;
+}
+
+/* ── Default `i` trigger ───────────────────────────────── */
+
+.royui-popover__trigger {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--royui-popover-trigger-idle);
+  cursor: pointer;
+  transition:
+    color 150ms var(--royui-popover-ease),
+    background 150ms var(--royui-popover-ease);
+}
+
+.royui-popover__trigger:hover {
+  color: var(--royui-popover-trigger-hover);
+  background: var(--royui-popover-trigger-bg);
+}
+
+.royui-popover__trigger:focus-visible {
+  outline: 2px solid var(--royui-popover-trigger-active);
+  outline-offset: 2px;
+}
+
+.royui-popover__trigger--on {
+  color: var(--royui-popover-trigger-active);
+  background: var(--royui-popover-trigger-bg);
+}
+
+/* ── Panel ─────────────────────────────────────────────── */
+
+.royui-popover__panel {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 8px);
+  background: var(--royui-popover-bg);
+  border-radius: var(--royui-popover-radius);
+  padding: 14px 16px;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--royui-popover-body);
+  /* drop-shadow follows the combined silhouette of panel + ::before tail,
+     so the hairline ring and shadow wrap around the tail as one shape — no
+     visible seam where they meet. */
+  filter:
+    drop-shadow(0 0 0.5px rgba(20, 20, 20, 0.18))
+    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05))
+    drop-shadow(0 14px 36px rgba(0, 0, 0, 0.16));
+  animation: royui-popover-in var(--royui-popover-dur) var(--royui-popover-ease);
+}
+
+.royui-popover__panel--sm { width: 280px; }
+.royui-popover__panel--md { width: 360px; }
+.royui-popover__panel--lg { width: 420px; }
+
+.royui-popover__panel--right { left: auto; right: 0; }
+.royui-popover__panel--left  { right: auto; left: 0; }
+
+/* Tail — pure CSS triangle (no rotated square, no border-meets-border seam).
+   Its base extends 2px INSIDE the panel so the panel's bg seamlessly overlaps
+   the triangle's base, and the drop-shadow filter wraps panel + tail as one
+   merged silhouette. Positioned 14px from the corner — flush at the edge. */
+.royui-popover__panel::before {
+  content: '';
+  position: absolute;
+  top: -7px;
+  width: 0;
+  height: 0;
+  border-left: 7px solid transparent;
+  border-right: 7px solid transparent;
+  border-bottom: 9px solid var(--royui-popover-bg);
+}
+.royui-popover__panel--right::before { right: 14px; }
+.royui-popover__panel--left::before  { left: 14px; }
+
+.royui-popover__title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--royui-popover-title);
+  margin-bottom: 4px;
+}
+
+.royui-popover__body {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--royui-popover-body);
+}
+
+.royui-popover__body strong {
+  color: var(--royui-popover-title);
+  font-weight: 600;
+}
+
+@keyframes royui-popover-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .royui-popover__panel { animation: none; }
+}

package/dist/TextMorph-RX2BX25F.css

@@ -0,0 +1,6 @@
+.royui-textmorph {
+  display: inline-block;
+  white-space: pre;
+  /* Preserve spaces during typing so intermediate strings like
+     "pnpm  @royui/ui" (mid-deletion) render their gap correctly. */
+}

package/dist/index.d.ts

@@ -0,0 +1,70 @@
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, AnchorHTMLAttributes, CSSProperties, HTMLAttributes } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface GradientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    loading?: boolean;
+    loadingLabel?: ReactNode;
+    fullWidth?: boolean;
+    children: ReactNode;
+}
+declare const GradientButton: react.ForwardRefExoticComponent<GradientButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+interface PopoverProps {
+    children: ReactNode;
+    title?: string;
+    align?: 'left' | 'right';
+    width?: 'sm' | 'md' | 'lg' | number;
+    label?: string;
+    defaultOpen?: boolean;
+    renderTrigger?: (api: {
+        isOpen: boolean;
+        toggle: () => void;
+    }) => ReactNode;
+}
+declare function Popover({ children, title, align, width, label, defaultOpen, renderTrigger, }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+type MadeByPosition = 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+interface MadeByProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'prefix'> {
+    /** Display name shown after the prefix. */
+    name: string;
+    /** URL opened when the badge is clicked. */
+    href: string;
+    /** Prefix copy. Defaults to "Made by". */
+    prefix?: ReactNode;
+    /** Viewport anchor. Defaults to "bottom-right". */
+    position?: MadeByPosition;
+    /** Optional leading slot — avatar, mark, emoji, dot. */
+    icon?: ReactNode;
+    /** Custom font-family for the author name. */
+    nameFont?: string;
+    /** Font style for the author name. Defaults to "italic". */
+    nameStyle?: CSSProperties['fontStyle'];
+}
+declare const MadeBy: react.ForwardRefExoticComponent<MadeByProps & react.RefAttributes<HTMLAnchorElement>>;
+
+interface TextMorphProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** The current text. When this prop changes, the component diff-types
+        from the previously displayed text to the new value. */
+    value: string;
+    /** Optional renderer for the current intermediate text — handy for
+        syntax highlighting, gradient spans, or wrapping each word. Receives
+        the partial string at every keystroke during the animation. */
+    renderText?: (current: string) => ReactNode;
+    /** Per-character typing delay range in ms. Default [30, 60]. */
+    typeDelay?: [min: number, max: number];
+    /** Per-character backspace delay range in ms. Default [18, 30]. */
+    backspaceDelay?: [min: number, max: number];
+    /** Characters that get an additional delay (harder to type on a real
+        keyboard — punctuation, brackets, symbols). Default /[\/{}\-_@]/. */
+    hardChars?: RegExp;
+    /** Extra delay range for hard chars in ms. Default [30, 65]. */
+    hardCharExtraDelay?: [min: number, max: number];
+    /** Pause between backspace phase and typing phase, in ms. Default 70. */
+    pauseMs?: number;
+    /** Skip animation entirely and just swap text. */
+    disabled?: boolean;
+}
+declare const TextMorph: react.ForwardRefExoticComponent<TextMorphProps & react.RefAttributes<HTMLSpanElement>>;
+
+export { GradientButton, type GradientButtonProps, MadeBy, type MadeByPosition, type MadeByProps, Popover, type PopoverProps, TextMorph, type TextMorphProps };

package/dist/index.js

@@ -0,0 +1,289 @@
+"use client";
+import { forwardRef, useState, useRef, useEffect } from 'react';
+import './GradientButton-TX2GJRIQ.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import './Popover-LSYVKT4M.css';
+import './MadeBy-JCYGHWSD.css';
+import './TextMorph-RX2BX25F.css';
+
+// src/components/gradient-button/GradientButton.tsx
+var DefaultSpinner = () => /* @__PURE__ */ jsx("span", { className: "gradient-btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 24 24", width: "18", height: "18", fill: "none", children: [
+  /* @__PURE__ */ jsx(
+    "circle",
+    {
+      cx: "12",
+      cy: "12",
+      r: "9",
+      stroke: "currentColor",
+      strokeOpacity: "0.3",
+      strokeWidth: "2.5"
+    }
+  ),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M21 12a9 9 0 0 0-9-9",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    }
+  )
+] }) });
+var GradientButton = forwardRef(
+  ({
+    loading = false,
+    loadingLabel,
+    fullWidth = true,
+    disabled,
+    className = "",
+    children,
+    type = "button",
+    ...rest
+  }, ref) => {
+    const classes = [
+      "gradient-btn",
+      fullWidth ? "gradient-btn--full" : "",
+      loading ? "gradient-btn--loading" : "",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type,
+        disabled: disabled || loading,
+        className: classes,
+        "aria-busy": loading || void 0,
+        ...rest,
+        children: loading ? loadingLabel ?? /* @__PURE__ */ jsx(DefaultSpinner, {}) : children
+      }
+    );
+  }
+);
+GradientButton.displayName = "GradientButton";
+var InfoIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    width: "14",
+    height: "14",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 16v-5M12 8h.01" })
+    ]
+  }
+);
+function Popover({
+  children,
+  title,
+  align = "right",
+  width = "md",
+  label = "Open menu",
+  defaultOpen = false,
+  renderTrigger
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const wrap = useRef(null);
+  const toggle = () => setOpen((o) => !o);
+  useEffect(() => {
+    if (!open) return;
+    function onDown(e) {
+      if (wrap.current && !wrap.current.contains(e.target)) {
+        setOpen(false);
+      }
+    }
+    function onKey(e) {
+      if (e.key === "Escape") setOpen(false);
+    }
+    document.addEventListener("mousedown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const trigger = renderTrigger ? renderTrigger({ isOpen: open, toggle }) : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: toggle,
+      "aria-label": label,
+      "aria-expanded": open,
+      className: `royui-popover__trigger ${open ? "royui-popover__trigger--on" : ""}`,
+      children: /* @__PURE__ */ jsx(InfoIcon, {})
+    }
+  );
+  const widthClass = typeof width === "string" ? `royui-popover__panel--${width}` : "";
+  const customWidth = typeof width === "number" ? { width: `${width}px` } : void 0;
+  const alignClass = `royui-popover__panel--${align}`;
+  return /* @__PURE__ */ jsxs("div", { ref: wrap, className: "royui-popover", children: [
+    trigger,
+    open && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: `royui-popover__panel ${widthClass} ${alignClass}`,
+        style: customWidth,
+        role: "dialog",
+        children: [
+          title && /* @__PURE__ */ jsx("div", { className: "royui-popover__title", children: title }),
+          /* @__PURE__ */ jsx("div", { className: "royui-popover__body", children })
+        ]
+      }
+    )
+  ] });
+}
+var MadeBy = forwardRef(
+  ({
+    name,
+    href,
+    prefix = "Made by",
+    position = "bottom-right",
+    icon,
+    nameFont,
+    nameStyle,
+    className = "",
+    target = "_blank",
+    rel = "noopener noreferrer",
+    ...rest
+  }, ref) => {
+    const classes = [
+      "royui-madeby",
+      `royui-madeby--${position}`,
+      className
+    ].filter(Boolean).join(" ");
+    const nameStyles = {};
+    if (nameFont) nameStyles.fontFamily = nameFont;
+    if (nameStyle) nameStyles.fontStyle = nameStyle;
+    return /* @__PURE__ */ jsxs(
+      "a",
+      {
+        ref,
+        href,
+        target,
+        rel,
+        className: classes,
+        ...rest,
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "royui-madeby__icon", "aria-hidden": true, children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "royui-madeby__prefix", children: prefix }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "royui-madeby__name",
+              style: Object.keys(nameStyles).length ? nameStyles : void 0,
+              children: name
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+MadeBy.displayName = "MadeBy";
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function findDiff(from, to) {
+  let p = 0;
+  const maxP = Math.min(from.length, to.length);
+  while (p < maxP && from[p] === to[p]) p++;
+  let s = 0;
+  while (s < from.length - p && s < to.length - p && from[from.length - 1 - s] === to[to.length - 1 - s]) {
+    s++;
+  }
+  return {
+    prefix: from.slice(0, p),
+    suffix: from.slice(from.length - s),
+    oldMid: from.slice(p, from.length - s),
+    newMid: to.slice(p, to.length - s)
+  };
+}
+function rand(min, max) {
+  return min + Math.random() * (max - min);
+}
+var TextMorph = forwardRef(
+  function TextMorph2({
+    value,
+    renderText,
+    typeDelay = [30, 60],
+    backspaceDelay = [18, 30],
+    hardChars = /[\/{}\-_@]/,
+    hardCharExtraDelay = [30, 65],
+    pauseMs = 70,
+    disabled = false,
+    className = "",
+    ...rest
+  }, ref) {
+    const [displayed, setDisplayed] = useState(value);
+    const tokenRef = useRef(0);
+    const reducedRef = useRef(false);
+    const prevValueRef = useRef(value);
+    const displayedRef = useRef(value);
+    useEffect(() => {
+      if (typeof window !== "undefined") {
+        reducedRef.current = window.matchMedia(
+          "(prefers-reduced-motion: reduce)"
+        ).matches;
+      }
+    }, []);
+    useEffect(() => {
+      displayedRef.current = displayed;
+    }, [displayed]);
+    useEffect(() => {
+      if (value === prevValueRef.current) return;
+      const source = displayedRef.current;
+      prevValueRef.current = value;
+      if (disabled || reducedRef.current) {
+        setDisplayed(value);
+        return;
+      }
+      const myToken = ++tokenRef.current;
+      (async () => {
+        const { prefix, suffix, oldMid, newMid } = findDiff(source, value);
+        for (let i = oldMid.length - 1; i >= 0; i--) {
+          if (myToken !== tokenRef.current) return;
+          setDisplayed(prefix + oldMid.slice(0, i) + suffix);
+          await sleep(rand(backspaceDelay[0], backspaceDelay[1]));
+        }
+        if (myToken !== tokenRef.current) return;
+        await sleep(pauseMs);
+        for (let i = 1; i <= newMid.length; i++) {
+          if (myToken !== tokenRef.current) return;
+          setDisplayed(prefix + newMid.slice(0, i) + suffix);
+          const ch = newMid.charAt(i - 1);
+          const base = rand(typeDelay[0], typeDelay[1]);
+          const extra = hardChars.test(ch) ? rand(hardCharExtraDelay[0], hardCharExtraDelay[1]) : 0;
+          await sleep(base + extra);
+        }
+      })();
+    }, [
+      value,
+      disabled,
+      typeDelay,
+      backspaceDelay,
+      hardChars,
+      hardCharExtraDelay,
+      pauseMs
+    ]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        className: `royui-textmorph ${className}`.trim(),
+        "aria-live": "polite",
+        ...rest,
+        children: renderText ? renderText(displayed) : displayed
+      }
+    );
+  }
+);
+
+export { GradientButton, MadeBy, Popover, TextMorph };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/gradient-button/GradientButton.tsx","../src/components/popover/Popover.tsx","../src/components/made-by/MadeBy.tsx","../src/components/text-morph/TextMorph.tsx"],"names":["jsxs","jsx","forwardRef","TextMorph","useState","useRef","useEffect"],"mappings":";;;;;;;;AAYA,IAAM,iBAAiB,sBACrB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yBAAwB,aAAA,EAAY,MAAA,EAClD,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAQ,WAAA,EAAY,KAAA,EAAM,MAAK,MAAA,EAAO,IAAA,EAAK,MAAK,MAAA,EACnD,QAAA,EAAA;AAAA,kBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAG,IAAA;AAAA,MACH,EAAA,EAAG,IAAA;AAAA,MACH,CAAA,EAAE,GAAA;AAAA,MACF,MAAA,EAAO,cAAA;AAAA,MACP,aAAA,EAAc,KAAA;AAAA,MACd,WAAA,EAAY;AAAA;AAAA,GACd;AAAA,kBACA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,CAAA,EAAE,sBAAA;AAAA,MACF,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAY,KAAA;AAAA,MACZ,aAAA,EAAc;AAAA;AAAA;AAChB,CAAA,EACF,CAAA,EACF,CAAA;AAGK,IAAM,cAAA,GAAiB,UAAA;AAAA,EAC5B,CACE;AAAA,IACE,OAAA,GAAU,KAAA;AAAA,IACV,YAAA;AAAA,IACA,SAAA,GAAY,IAAA;AAAA,IACZ,QAAA;AAAA,IACA,SAAA,GAAY,EAAA;AAAA,IACZ,QAAA;AAAA,IACA,IAAA,GAAO,QAAA;AAAA,IACP,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU;AAAA,MACd,cAAA;AAAA,MACA,YAAY,oBAAA,GAAuB,EAAA;AAAA,MACnC,UAAU,uBAAA,GAA0B,EAAA;AAAA,MACpC;AAAA,KACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,UAAU,QAAA,IAAY,OAAA;AAAA,QACtB,SAAA,EAAW,OAAA;AAAA,QACX,aAAW,OAAA,IAAW,MAAA;AAAA,QACrB,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,OAAA,GAAW,YAAA,oBAAgB,GAAA,CAAC,cAAA,EAAA,EAAe,CAAA,GAAM;AAAA;AAAA,KACpD;AAAA,EAEJ;AACF;AAEA,cAAA,CAAe,WAAA,GAAc,gBAAA;ACnD7B,IAAM,QAAA,GAAW,sBACfA,IAAAA;AAAA,EAAC,KAAA;AAAA,EAAA;AAAA,IACC,KAAA,EAAM,IAAA;AAAA,IACN,MAAA,EAAO,IAAA;AAAA,IACP,OAAA,EAAQ,WAAA;AAAA,IACR,IAAA,EAAK,MAAA;AAAA,IACL,MAAA,EAAO,cAAA;AAAA,IACP,WAAA,EAAY,KAAA;AAAA,IACZ,aAAA,EAAc,OAAA;AAAA,IACd,cAAA,EAAe,OAAA;AAAA,IACf,aAAA,EAAW,IAAA;AAAA,IAEX,QAAA,EAAA;AAAA,sBAAAC,IAAC,QAAA,EAAA,EAAO,EAAA,EAAG,MAAK,EAAA,EAAG,IAAA,EAAK,GAAE,GAAA,EAAI,CAAA;AAAA,sBAC9BA,GAAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,oBAAA,EAAqB;AAAA;AAAA;AAC/B,CAAA;AAGK,SAAS,OAAA,CAAQ;AAAA,EACtB,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA,GAAQ,OAAA;AAAA,EACR,KAAA,GAAQ,IAAA;AAAA,EACR,KAAA,GAAQ,WAAA;AAAA,EACR,WAAA,GAAc,KAAA;AAAA,EACd;AACF,CAAA,EAAiB;AACf,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAI,SAAS,WAAW,CAAA;AAC5C,EAAA,MAAM,IAAA,GAAO,OAAuB,IAAI,CAAA;AACxC,EAAA,MAAM,SAAS,MAAM,OAAA,CAAQ,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAEtC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,SAAS,OAAO,CAAA,EAAe;AAC7B,MAAA,IAAI,IAAA,CAAK,WAAW,CAAC,IAAA,CAAK,QAAQ,QAAA,CAAS,CAAA,CAAE,MAAc,CAAA,EAAG;AAC5D,QAAA,OAAA,CAAQ,KAAK,CAAA;AAAA,MACf;AAAA,IACF;AACA,IAAA,SAAS,MAAM,CAAA,EAAkB;AAC/B,MAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,QAAA,EAAU,OAAA,CAAQ,KAAK,CAAA;AAAA,IACvC;AACA,IAAA,QAAA,CAAS,gBAAA,CAAiB,aAAa,MAAM,CAAA;AAC7C,IAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,KAAK,CAAA;AAC1C,IAAA,OAAO,MAAM;AACX,MAAA,QAAA,CAAS,mBAAA,CAAoB,aAAa,MAAM,CAAA;AAChD,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,KAAK,CAAA;AAAA,IAC/C,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAA,MAAM,OAAA,GAAU,gBACd,aAAA,CAAc,EAAE,QAAQ,IAAA,EAAM,MAAA,EAAQ,CAAA,mBAEtCA,GAAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,IAAA,EAAK,QAAA;AAAA,MACL,OAAA,EAAS,MAAA;AAAA,MACT,YAAA,EAAY,KAAA;AAAA,MACZ,eAAA,EAAe,IAAA;AAAA,MACf,SAAA,EAAW,CAAA,uBAAA,EAA0B,IAAA,GAAO,4BAAA,GAA+B,EAAE,CAAA,CAAA;AAAA,MAE7E,QAAA,kBAAAA,IAAC,QAAA,EAAA,EAAS;AAAA;AAAA,GACZ;AAGF,EAAA,MAAM,aACJ,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,sBAAA,EAAyB,KAAK,CAAA,CAAA,GAAK,EAAA;AACjE,EAAA,MAAM,WAAA,GACJ,OAAO,KAAA,KAAU,QAAA,GAAW,EAAE,KAAA,EAAO,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,EAAK,GAAI,MAAA;AACxD,EAAA,MAAM,UAAA,GAAa,yBAAyB,KAAK,CAAA,CAAA;AAEjD,EAAA,uBACED,IAAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,IAAA,EAAM,WAAU,eAAA,EACvB,QAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,wBACCA,IAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,CAAA,qBAAA,EAAwB,UAAU,CAAA,CAAA,EAAI,UAAU,CAAA,CAAA;AAAA,QAC3D,KAAA,EAAO,WAAA;AAAA,QACP,IAAA,EAAK,QAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,UAAA,KAAA,oBAASC,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wBAAwB,QAAA,EAAA,KAAA,EAAM,CAAA;AAAA,0BACvDA,GAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uBAAuB,QAAA,EAAS;AAAA;AAAA;AAAA;AACjD,GAAA,EAEJ,CAAA;AAEJ;ACrEO,IAAM,MAAA,GAASC,UAAAA;AAAA,EACpB,CACE;AAAA,IACE,IAAA;AAAA,IACA,IAAA;AAAA,IACA,MAAA,GAAS,SAAA;AAAA,IACT,QAAA,GAAW,cAAA;AAAA,IACX,IAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY,EAAA;AAAA,IACZ,MAAA,GAAS,QAAA;AAAA,IACT,GAAA,GAAM,qBAAA;AAAA,IACN,GAAG;AAAA,KAEL,GAAA,KACG;AACH,IAAA,MAAM,OAAA,GAAU;AAAA,MACd,cAAA;AAAA,MACA,iBAAiB,QAAQ,CAAA,CAAA;AAAA,MACzB;AAAA,KACF,CACG,MAAA,CAAO,OAAO,CAAA,CACd,KAAK,GAAG,CAAA;AAEX,IAAA,MAAM,aAA4B,EAAC;AACnC,IAAA,IAAI,QAAA,aAAqB,UAAA,GAAa,QAAA;AACtC,IAAA,IAAI,SAAA,aAAsB,SAAA,GAAY,SAAA;AAEtC,IAAA,uBACEF,IAAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA;AAAA,QACA,MAAA;AAAA,QACA,GAAA;AAAA,QACA,SAAA,EAAW,OAAA;AAAA,QACV,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,IAAA,oBACCC,GAAAA,CAAC,MAAA,EAAA,EAAK,WAAU,oBAAA,EAAqB,aAAA,EAAW,MAC7C,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,0BAEFA,GAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wBAAwB,QAAA,EAAA,MAAA,EAAO,CAAA;AAAA,0BAC/CA,GAAAA;AAAA,YAAC,MAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAU,oBAAA;AAAA,cACV,OAAO,MAAA,CAAO,IAAA,CAAK,UAAU,CAAA,CAAE,SAAS,UAAA,GAAa,MAAA;AAAA,cAEpD,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;ACrDrB,SAAS,MAAM,EAAA,EAAY;AACzB,EAAA,OAAO,IAAI,OAAA,CAAc,CAAC,YAAY,UAAA,CAAW,OAAA,EAAS,EAAE,CAAC,CAAA;AAC/D;AAEA,SAAS,QAAA,CAAS,MAAc,EAAA,EAAY;AAC1C,EAAA,IAAI,CAAA,GAAI,CAAA;AACR,EAAA,MAAM,OAAO,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,MAAA,EAAQ,GAAG,MAAM,CAAA;AAC5C,EAAA,OAAO,IAAI,IAAA,IAAQ,IAAA,CAAK,CAAC,CAAA,KAAM,EAAA,CAAG,CAAC,CAAA,EAAG,CAAA,EAAA;AACtC,EAAA,IAAI,CAAA,GAAI,CAAA;AACR,EAAA,OACE,IAAI,IAAA,CAAK,MAAA,GAAS,KAClB,CAAA,GAAI,EAAA,CAAG,SAAS,CAAA,IAChB,IAAA,CAAK,KAAK,MAAA,GAAS,CAAA,GAAI,CAAC,CAAA,KAAM,EAAA,CAAG,GAAG,MAAA,GAAS,CAAA,GAAI,CAAC,CAAA,EAClD;AACA,IAAA,CAAA,EAAA;AAAA,EACF;AACA,EAAA,OAAO;AAAA,IACL,MAAA,EAAQ,IAAA,CAAK,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA;AAAA,IACvB,MAAA,EAAQ,IAAA,CAAK,KAAA,CAAM,IAAA,CAAK,SAAS,CAAC,CAAA;AAAA,IAClC,QAAQ,IAAA,CAAK,KAAA,CAAM,CAAA,EAAG,IAAA,CAAK,SAAS,CAAC,CAAA;AAAA,IACrC,QAAQ,EAAA,CAAG,KAAA,CAAM,CAAA,EAAG,EAAA,CAAG,SAAS,CAAC;AAAA,GACnC;AACF;AAEA,SAAS,IAAA,CAAK,KAAa,GAAA,EAAa;AACtC,EAAA,OAAO,GAAA,GAAM,IAAA,CAAK,MAAA,EAAO,IAAK,GAAA,GAAM,GAAA,CAAA;AACtC;AAEO,IAAM,SAAA,GAAYC,UAAAA;AAAA,EACvB,SAASC,UAAAA,CACP;AAAA,IACE,KAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,GAAY,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,IACnB,cAAA,GAAiB,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,IACxB,SAAA,GAAY,YAAA;AAAA,IACZ,kBAAA,GAAqB,CAAC,EAAA,EAAI,EAAE,CAAA;AAAA,IAC5B,OAAA,GAAU,EAAA;AAAA,IACV,QAAA,GAAW,KAAA;AAAA,IACX,SAAA,GAAY,EAAA;AAAA,IACZ,GAAG;AAAA,KAEL,GAAA,EACA;AACA,IAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAIC,SAAS,KAAK,CAAA;AAChD,IAAA,MAAM,QAAA,GAAWC,OAAO,CAAC,CAAA;AACzB,IAAA,MAAM,UAAA,GAAaA,OAAO,KAAK,CAAA;AAC/B,IAAA,MAAM,YAAA,GAAeA,OAAO,KAAK,CAAA;AACjC,IAAA,MAAM,YAAA,GAAeA,OAAO,KAAK,CAAA;AAEjC,IAAAC,UAAU,MAAM;AACd,MAAA,IAAI,OAAO,WAAW,WAAA,EAAa;AACjC,QAAA,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA;AAAA,UAC1B;AAAA,SACF,CAAE,OAAA;AAAA,MACJ;AAAA,IACF,CAAA,EAAG,EAAE,CAAA;AAIL,IAAAA,UAAU,MAAM;AACd,MAAA,YAAA,CAAa,OAAA,GAAU,SAAA;AAAA,IACzB,CAAA,EAAG,CAAC,SAAS,CAAC,CAAA;AAEd,IAAAA,UAAU,MAAM;AACd,MAAA,IAAI,KAAA,KAAU,aAAa,OAAA,EAAS;AACpC,MAAA,MAAM,SAAS,YAAA,CAAa,OAAA;AAC5B,MAAA,YAAA,CAAa,OAAA,GAAU,KAAA;AAEvB,MAAA,IAAI,QAAA,IAAY,WAAW,OAAA,EAAS;AAClC,QAAA,YAAA,CAAa,KAAK,CAAA;AAClB,QAAA;AAAA,MACF;AAEA,MAAA,MAAM,OAAA,GAAU,EAAE,QAAA,CAAS,OAAA;AAE3B,MAAA,CAAC,YAAY;AACX,QAAA,MAAM,EAAE,QAAQ,MAAA,EAAQ,MAAA,EAAQ,QAAO,GAAI,QAAA,CAAS,QAAQ,KAAK,CAAA;AAEjE,QAAA,KAAA,IAAS,IAAI,MAAA,CAAO,MAAA,GAAS,CAAA,EAAG,CAAA,IAAK,GAAG,CAAA,EAAA,EAAK;AAC3C,UAAA,IAAI,OAAA,KAAY,SAAS,OAAA,EAAS;AAClC,UAAA,YAAA,CAAa,SAAS,MAAA,CAAO,KAAA,CAAM,CAAA,EAAG,CAAC,IAAI,MAAM,CAAA;AACjD,UAAA,MAAM,KAAA,CAAM,KAAK,cAAA,CAAe,CAAC,GAAG,cAAA,CAAe,CAAC,CAAC,CAAC,CAAA;AAAA,QACxD;AAEA,QAAA,IAAI,OAAA,KAAY,SAAS,OAAA,EAAS;AAClC,QAAA,MAAM,MAAM,OAAO,CAAA;AAEnB,QAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,IAAK,MAAA,CAAO,QAAQ,CAAA,EAAA,EAAK;AACvC,UAAA,IAAI,OAAA,KAAY,SAAS,OAAA,EAAS;AAClC,UAAA,YAAA,CAAa,SAAS,MAAA,CAAO,KAAA,CAAM,CAAA,EAAG,CAAC,IAAI,MAAM,CAAA;AACjD,UAAA,MAAM,EAAA,GAAK,MAAA,CAAO,MAAA,CAAO,CAAA,GAAI,CAAC,CAAA;AAC9B,UAAA,MAAM,OAAO,IAAA,CAAK,SAAA,CAAU,CAAC,CAAA,EAAG,SAAA,CAAU,CAAC,CAAC,CAAA;AAC5C,UAAA,MAAM,KAAA,GAAQ,SAAA,CAAU,IAAA,CAAK,EAAE,CAAA,GAC3B,IAAA,CAAK,kBAAA,CAAmB,CAAC,CAAA,EAAG,kBAAA,CAAmB,CAAC,CAAC,CAAA,GACjD,CAAA;AACJ,UAAA,MAAM,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA,QAC1B;AAAA,MACF,CAAA,GAAG;AAAA,IACL,CAAA,EAAG;AAAA,MACD,KAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,cAAA;AAAA,MACA,SAAA;AAAA,MACA,kBAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,uBACEL,GAAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,CAAA,gBAAA,EAAmB,SAAS,CAAA,CAAA,CAAG,IAAA,EAAK;AAAA,QAC/C,WAAA,EAAU,QAAA;AAAA,QACT,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA,UAAA,GAAa,UAAA,CAAW,SAAS,CAAA,GAAI;AAAA;AAAA,KACxC;AAAA,EAEJ;AACF","file":"index.js","sourcesContent":["'use client';\n\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport './GradientButton.css';\n\nexport interface GradientButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  loading?: boolean;\n  loadingLabel?: ReactNode;\n  fullWidth?: boolean;\n  children: ReactNode;\n}\n\nconst DefaultSpinner = () => (\n  <span className=\"gradient-btn__spinner\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 24 24\" width=\"18\" height=\"18\" fill=\"none\">\n      <circle\n        cx=\"12\"\n        cy=\"12\"\n        r=\"9\"\n        stroke=\"currentColor\"\n        strokeOpacity=\"0.3\"\n        strokeWidth=\"2.5\"\n      />\n      <path\n        d=\"M21 12a9 9 0 0 0-9-9\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n      />\n    </svg>\n  </span>\n);\n\nexport const GradientButton = forwardRef<HTMLButtonElement, GradientButtonProps>(\n  (\n    {\n      loading = false,\n      loadingLabel,\n      fullWidth = true,\n      disabled,\n      className = '',\n      children,\n      type = 'button',\n      ...rest\n    },\n    ref,\n  ) => {\n    const classes = [\n      'gradient-btn',\n      fullWidth ? 'gradient-btn--full' : '',\n      loading ? 'gradient-btn--loading' : '',\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    return (\n      <button\n        ref={ref}\n        type={type}\n        disabled={disabled || loading}\n        className={classes}\n        aria-busy={loading || undefined}\n        {...rest}\n      >\n        {loading ? (loadingLabel ?? <DefaultSpinner />) : children}\n      </button>\n    );\n  },\n);\n\nGradientButton.displayName = 'GradientButton';\n","'use client';\n\nimport {\n  useEffect,\n  useRef,\n  useState,\n  type ReactNode,\n} from 'react';\nimport './Popover.css';\n\nexport interface PopoverProps {\n  children: ReactNode;\n  title?: string;\n  align?: 'left' | 'right';\n  width?: 'sm' | 'md' | 'lg' | number;\n  label?: string;\n  defaultOpen?: boolean;\n  renderTrigger?: (api: { isOpen: boolean; toggle: () => void }) => ReactNode;\n}\n\nconst InfoIcon = () => (\n  <svg\n    width=\"14\"\n    height=\"14\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeWidth=\"1.5\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    aria-hidden\n  >\n    <circle cx=\"12\" cy=\"12\" r=\"9\" />\n    <path d=\"M12 16v-5M12 8h.01\" />\n  </svg>\n);\n\nexport function Popover({\n  children,\n  title,\n  align = 'right',\n  width = 'md',\n  label = 'Open menu',\n  defaultOpen = false,\n  renderTrigger,\n}: PopoverProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  const wrap = useRef<HTMLDivElement>(null);\n  const toggle = () => setOpen((o) => !o);\n\n  useEffect(() => {\n    if (!open) return;\n    function onDown(e: MouseEvent) {\n      if (wrap.current && !wrap.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    }\n    function onKey(e: KeyboardEvent) {\n      if (e.key === 'Escape') setOpen(false);\n    }\n    document.addEventListener('mousedown', onDown);\n    document.addEventListener('keydown', onKey);\n    return () => {\n      document.removeEventListener('mousedown', onDown);\n      document.removeEventListener('keydown', onKey);\n    };\n  }, [open]);\n\n  const trigger = renderTrigger ? (\n    renderTrigger({ isOpen: open, toggle })\n  ) : (\n    <button\n      type=\"button\"\n      onClick={toggle}\n      aria-label={label}\n      aria-expanded={open}\n      className={`royui-popover__trigger ${open ? 'royui-popover__trigger--on' : ''}`}\n    >\n      <InfoIcon />\n    </button>\n  );\n\n  const widthClass =\n    typeof width === 'string' ? `royui-popover__panel--${width}` : '';\n  const customWidth =\n    typeof width === 'number' ? { width: `${width}px` } : undefined;\n  const alignClass = `royui-popover__panel--${align}`;\n\n  return (\n    <div ref={wrap} className=\"royui-popover\">\n      {trigger}\n      {open && (\n        <div\n          className={`royui-popover__panel ${widthClass} ${alignClass}`}\n          style={customWidth}\n          role=\"dialog\"\n        >\n          {title && <div className=\"royui-popover__title\">{title}</div>}\n          <div className=\"royui-popover__body\">{children}</div>\n        </div>\n      )}\n    </div>\n  );\n}\n","'use client';\n\nimport {\n  forwardRef,\n  type AnchorHTMLAttributes,\n  type CSSProperties,\n  type ReactNode,\n} from 'react';\nimport './MadeBy.css';\n\nexport type MadeByPosition =\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'top-right'\n  | 'top-left';\n\nexport interface MadeByProps\n  extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'prefix'> {\n  /** Display name shown after the prefix. */\n  name: string;\n  /** URL opened when the badge is clicked. */\n  href: string;\n  /** Prefix copy. Defaults to \"Made by\". */\n  prefix?: ReactNode;\n  /** Viewport anchor. Defaults to \"bottom-right\". */\n  position?: MadeByPosition;\n  /** Optional leading slot — avatar, mark, emoji, dot. */\n  icon?: ReactNode;\n  /** Custom font-family for the author name. */\n  nameFont?: string;\n  /** Font style for the author name. Defaults to \"italic\". */\n  nameStyle?: CSSProperties['fontStyle'];\n}\n\nexport const MadeBy = forwardRef<HTMLAnchorElement, MadeByProps>(\n  (\n    {\n      name,\n      href,\n      prefix = 'Made by',\n      position = 'bottom-right',\n      icon,\n      nameFont,\n      nameStyle,\n      className = '',\n      target = '_blank',\n      rel = 'noopener noreferrer',\n      ...rest\n    },\n    ref,\n  ) => {\n    const classes = [\n      'royui-madeby',\n      `royui-madeby--${position}`,\n      className,\n    ]\n      .filter(Boolean)\n      .join(' ');\n\n    const nameStyles: CSSProperties = {};\n    if (nameFont) nameStyles.fontFamily = nameFont;\n    if (nameStyle) nameStyles.fontStyle = nameStyle;\n\n    return (\n      <a\n        ref={ref}\n        href={href}\n        target={target}\n        rel={rel}\n        className={classes}\n        {...rest}\n      >\n        {icon && (\n          <span className=\"royui-madeby__icon\" aria-hidden>\n            {icon}\n          </span>\n        )}\n        <span className=\"royui-madeby__prefix\">{prefix}</span>\n        <span\n          className=\"royui-madeby__name\"\n          style={Object.keys(nameStyles).length ? nameStyles : undefined}\n        >\n          {name}\n        </span>\n      </a>\n    );\n  },\n);\n\nMadeBy.displayName = 'MadeBy';\n","'use client';\n\nimport {\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport './TextMorph.css';\n\nexport interface TextMorphProps\n  extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {\n  /** The current text. When this prop changes, the component diff-types\n      from the previously displayed text to the new value. */\n  value: string;\n  /** Optional renderer for the current intermediate text — handy for\n      syntax highlighting, gradient spans, or wrapping each word. Receives\n      the partial string at every keystroke during the animation. */\n  renderText?: (current: string) => ReactNode;\n  /** Per-character typing delay range in ms. Default [30, 60]. */\n  typeDelay?: [min: number, max: number];\n  /** Per-character backspace delay range in ms. Default [18, 30]. */\n  backspaceDelay?: [min: number, max: number];\n  /** Characters that get an additional delay (harder to type on a real\n      keyboard — punctuation, brackets, symbols). Default /[\\/{}\\-_@]/. */\n  hardChars?: RegExp;\n  /** Extra delay range for hard chars in ms. Default [30, 65]. */\n  hardCharExtraDelay?: [min: number, max: number];\n  /** Pause between backspace phase and typing phase, in ms. Default 70. */\n  pauseMs?: number;\n  /** Skip animation entirely and just swap text. */\n  disabled?: boolean;\n}\n\nfunction sleep(ms: number) {\n  return new Promise<void>((resolve) => setTimeout(resolve, ms));\n}\n\nfunction findDiff(from: string, to: string) {\n  let p = 0;\n  const maxP = Math.min(from.length, to.length);\n  while (p < maxP && from[p] === to[p]) p++;\n  let s = 0;\n  while (\n    s < from.length - p &&\n    s < to.length - p &&\n    from[from.length - 1 - s] === to[to.length - 1 - s]\n  ) {\n    s++;\n  }\n  return {\n    prefix: from.slice(0, p),\n    suffix: from.slice(from.length - s),\n    oldMid: from.slice(p, from.length - s),\n    newMid: to.slice(p, to.length - s),\n  };\n}\n\nfunction rand(min: number, max: number) {\n  return min + Math.random() * (max - min);\n}\n\nexport const TextMorph = forwardRef<HTMLSpanElement, TextMorphProps>(\n  function TextMorph(\n    {\n      value,\n      renderText,\n      typeDelay = [30, 60],\n      backspaceDelay = [18, 30],\n      hardChars = /[\\/{}\\-_@]/,\n      hardCharExtraDelay = [30, 65],\n      pauseMs = 70,\n      disabled = false,\n      className = '',\n      ...rest\n    },\n    ref,\n  ) {\n    const [displayed, setDisplayed] = useState(value);\n    const tokenRef = useRef(0);\n    const reducedRef = useRef(false);\n    const prevValueRef = useRef(value);\n    const displayedRef = useRef(value);\n\n    useEffect(() => {\n      if (typeof window !== 'undefined') {\n        reducedRef.current = window.matchMedia(\n          '(prefers-reduced-motion: reduce)',\n        ).matches;\n      }\n    }, []);\n\n    // Keep a ref of the currently shown text so the animation always\n    // starts from the latest frame (even if interrupted mid-typing).\n    useEffect(() => {\n      displayedRef.current = displayed;\n    }, [displayed]);\n\n    useEffect(() => {\n      if (value === prevValueRef.current) return;\n      const source = displayedRef.current;\n      prevValueRef.current = value;\n\n      if (disabled || reducedRef.current) {\n        setDisplayed(value);\n        return;\n      }\n\n      const myToken = ++tokenRef.current;\n\n      (async () => {\n        const { prefix, suffix, oldMid, newMid } = findDiff(source, value);\n\n        for (let i = oldMid.length - 1; i >= 0; i--) {\n          if (myToken !== tokenRef.current) return;\n          setDisplayed(prefix + oldMid.slice(0, i) + suffix);\n          await sleep(rand(backspaceDelay[0], backspaceDelay[1]));\n        }\n\n        if (myToken !== tokenRef.current) return;\n        await sleep(pauseMs);\n\n        for (let i = 1; i <= newMid.length; i++) {\n          if (myToken !== tokenRef.current) return;\n          setDisplayed(prefix + newMid.slice(0, i) + suffix);\n          const ch = newMid.charAt(i - 1);\n          const base = rand(typeDelay[0], typeDelay[1]);\n          const extra = hardChars.test(ch)\n            ? rand(hardCharExtraDelay[0], hardCharExtraDelay[1])\n            : 0;\n          await sleep(base + extra);\n        }\n      })();\n    }, [\n      value,\n      disabled,\n      typeDelay,\n      backspaceDelay,\n      hardChars,\n      hardCharExtraDelay,\n      pauseMs,\n    ]);\n\n    return (\n      <span\n        ref={ref}\n        className={`royui-textmorph ${className}`.trim()}\n        aria-live=\"polite\"\n        {...rest}\n      >\n        {renderText ? renderText(displayed) : displayed}\n      </span>\n    );\n  },\n);\n"]}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@roy-ui/ui",
+  "version": "0.0.2",
+  "description": "Open source React component library",
+  "license": "MIT",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/DibbayajyotiRoy/RoyUI.git",
+    "directory": "packages/ui"
+  },
+  "homepage": "https://github.com/DibbayajyotiRoy/RoyUI#readme",
+  "bugs": {
+    "url": "https://github.com/DibbayajyotiRoy/RoyUI/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsup": "^8.3.5",
+    "typescript": "^5.6.3"
+  }
+}