fromsrc 0.0.0 → 0.0.2

package/dist/components/alert.js

@@ -0,0 +1,30 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { IconXCircle, IconAlertCircle, IconCheckCircle, IconInfo } from './icons';
+
+const icons = {
+  info: IconInfo,
+  success: IconCheckCircle,
+  warning: IconAlertCircle,
+  error: IconXCircle
+};
+const styles = {
+  info: "border-line bg-surface text-muted [&_svg]:text-accent",
+  success: "border-emerald-500/20 bg-emerald-500/5 text-emerald-300 [&_svg]:text-emerald-400",
+  warning: "border-amber-500/20 bg-amber-500/5 text-amber-300 [&_svg]:text-amber-400",
+  error: "border-red-500/20 bg-red-500/5 text-red-300 [&_svg]:text-red-400"
+};
+function AlertBase({ children, type = "info", title }) {
+  const Icon = icons[type];
+  return /* @__PURE__ */ jsxs("div", { className: `flex gap-3 rounded-lg border p-4 ${styles[type]}`, role: "alert", children: [
+    /* @__PURE__ */ jsx(Icon, { size: 20, className: "shrink-0 mt-0.5", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      title && /* @__PURE__ */ jsx("div", { className: "mb-1 font-medium text-fg", children: title }),
+      /* @__PURE__ */ jsx("div", { className: "text-sm", children })
+    ] })
+  ] });
+}
+const Alert = memo(AlertBase);
+
+export { Alert };

package/dist/components/announce.d.ts

@@ -0,0 +1,11 @@
+import * as react from 'react';
+
+interface AnnounceProps {
+    children: React.ReactNode;
+    dismissible?: boolean;
+    storageKey?: string;
+    className?: string;
+}
+declare const Announce: react.NamedExoticComponent<AnnounceProps>;
+
+export { Announce, type AnnounceProps };

package/dist/components/announce.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect, useCallback } from 'react';
+
+const Announce = memo(function Announce2({
+  children,
+  dismissible = true,
+  storageKey = "fromsrc-announce",
+  className
+}) {
+  const [dismissed, setDismissed] = useState(true);
+  useEffect(() => {
+    setDismissed(localStorage.getItem(storageKey) === "1");
+  }, [storageKey]);
+  const dismiss = useCallback(() => {
+    localStorage.setItem(storageKey, "1");
+    setDismissed(true);
+  }, [storageKey]);
+  if (dismissed) return null;
+  return /* @__PURE__ */ jsxs("div", { className: `flex items-center justify-center bg-accent px-4 py-2 text-sm text-white ${className ?? ""}`, children: [
+    /* @__PURE__ */ jsx("span", { className: "flex-1 text-center", children }),
+    dismissible && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: dismiss,
+        "aria-label": "dismiss announcement",
+        className: "ml-2 shrink-0 p-1 opacity-70 hover:opacity-100",
+        children: /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", xmlns: "http://www.w3.org/2000/svg", width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+          /* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
+          /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+        ] })
+      }
+    )
+  ] });
+});
+
+export { Announce };

package/dist/components/autofill.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'react';
+
+/**
+ * Represents a single suggestion item in the autofill dropdown.
+ */
+interface AutofillItem {
+    id: string;
+    label: string;
+    value?: string;
+}
+/**
+ * Props for the Autofill component.
+ */
+interface AutofillProps {
+    items: AutofillItem[];
+    placeholder?: string;
+    value?: string;
+    onChange?: (value: string) => void;
+    onSelect?: (item: AutofillItem) => void;
+}
+/**
+ * Search-as-you-type input with dropdown suggestions.
+ * Supports keyboard navigation (arrow keys, enter, escape).
+ */
+declare function Autofill({ items, placeholder, value: controlledValue, onChange, onSelect, }: AutofillProps): JSX.Element;
+
+export { Autofill, type AutofillItem, type AutofillProps };

package/dist/components/autofill.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useId, useCallback } from 'react';
+import { useClickOutside } from '../hooks/clickoutside';
+
+function Autofill({
+  items,
+  placeholder = "search...",
+  value: controlledValue,
+  onChange,
+  onSelect
+}) {
+  const [internalValue, setInternalValue] = useState("");
+  const [open, setOpen] = useState(false);
+  const [index, setIndex] = useState(0);
+  const inputRef = useRef(null);
+  const listRef = useRef(null);
+  const containerRef = useRef(null);
+  const id = useId();
+  const value = controlledValue ?? internalValue;
+  const filtered = items.filter((item) => item.label.toLowerCase().includes(value.toLowerCase()));
+  const listId = `${id}-list`;
+  const getOptionId = useCallback((itemId) => `${id}-option-${itemId}`, [id]);
+  const close = useCallback(() => {
+    setOpen(false);
+    setIndex(0);
+  }, []);
+  useClickOutside(containerRef, close, open);
+  const handleChange = useCallback(
+    (e) => {
+      const newValue = e.target.value;
+      if (controlledValue === void 0) {
+        setInternalValue(newValue);
+      }
+      onChange?.(newValue);
+      setOpen(true);
+      setIndex(0);
+    },
+    [controlledValue, onChange]
+  );
+  const handleSelect = useCallback(
+    (item) => {
+      const selectedValue = item.value ?? item.label;
+      if (controlledValue === void 0) {
+        setInternalValue(selectedValue);
+      }
+      onChange?.(selectedValue);
+      onSelect?.(item);
+      setOpen(false);
+      inputRef.current?.focus();
+    },
+    [controlledValue, onChange, onSelect]
+  );
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (!open && filtered.length > 0 && e.key !== "Escape") {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp") {
+          setOpen(true);
+          e.preventDefault();
+          return;
+        }
+      }
+      switch (e.key) {
+        case "ArrowDown":
+          setIndex((i) => Math.min(i + 1, filtered.length - 1));
+          e.preventDefault();
+          break;
+        case "ArrowUp":
+          setIndex((i) => Math.max(i - 1, 0));
+          e.preventDefault();
+          break;
+        case "Enter":
+          if (open && filtered[index]) {
+            handleSelect(filtered[index]);
+            e.preventDefault();
+          }
+          break;
+        case "Escape":
+          if (open) {
+            setOpen(false);
+            e.preventDefault();
+          }
+          break;
+        case "Tab":
+          setOpen(false);
+          break;
+      }
+    },
+    [open, filtered, index, handleSelect]
+  );
+  const handleFocus = useCallback(() => {
+    if (value && filtered.length > 0) {
+      setOpen(true);
+    }
+  }, [value, filtered.length]);
+  const handleMouseEnter = useCallback((i) => {
+    setIndex(i);
+  }, []);
+  const activeOptionId = open && filtered[index] ? getOptionId(filtered[index].id) : void 0;
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative w-full", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value,
+        onChange: handleChange,
+        onKeyDown: handleKeyDown,
+        onFocus: handleFocus,
+        placeholder,
+        role: "combobox",
+        "aria-expanded": open && filtered.length > 0,
+        "aria-controls": listId,
+        "aria-activedescendant": activeOptionId,
+        "aria-autocomplete": "list",
+        "aria-haspopup": "listbox",
+        autoComplete: "off",
+        autoCorrect: "off",
+        autoCapitalize: "off",
+        spellCheck: false,
+        className: "w-full rounded-lg border border-line bg-bg px-3 py-2 text-sm outline-none placeholder:text-muted focus:border-muted"
+      }
+    ),
+    open && filtered.length > 0 && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: listRef,
+        id: listId,
+        role: "listbox",
+        "aria-label": "suggestions",
+        className: "absolute z-50 mt-1 max-h-64 w-full overflow-y-auto rounded-lg border border-line bg-bg p-1 shadow-lg",
+        children: filtered.map((item, i) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            id: getOptionId(item.id),
+            type: "button",
+            role: "option",
+            "aria-selected": i === index,
+            tabIndex: -1,
+            onClick: () => handleSelect(item),
+            onMouseEnter: () => handleMouseEnter(i),
+            className: `flex w-full items-center rounded px-3 py-2 text-left text-sm transition-colors ${i === index ? "bg-surface text-fg" : "text-muted hover:bg-surface hover:text-fg"}`,
+            children: item.label
+          },
+          item.id
+        ))
+      }
+    )
+  ] });
+}
+
+export { Autofill };

package/dist/components/avatar.d.ts

@@ -0,0 +1,42 @@
+import * as react from 'react';
+import { JSX, ReactNode } from 'react';
+
+/**
+ * Props for the Avatar component.
+ */
+interface AvatarProps {
+    /** Image source URL */
+    src?: string;
+    /** User's display name, used for initials fallback and accessibility */
+    name: string;
+    /** Avatar size variant */
+    size?: "sm" | "md" | "lg";
+}
+declare function AvatarBase({ src, name, size }: AvatarProps): JSX.Element;
+declare const Avatar: react.MemoExoticComponent<typeof AvatarBase>;
+/**
+ * Props for the AvatarGroup component.
+ */
+interface AvatarGroupProps {
+    /** Avatar elements to display */
+    children: ReactNode;
+    /** Accessible label describing the group */
+    label: string;
+}
+declare function AvatarGroupBase({ children, label }: AvatarGroupProps): JSX.Element;
+declare const AvatarGroup: react.MemoExoticComponent<typeof AvatarGroupBase>;
+/**
+ * Props for the User component.
+ */
+interface UserProps {
+    /** User's display name */
+    name: string;
+    /** Avatar image URL */
+    avatar?: string;
+    /** User's role or title */
+    role?: string;
+}
+declare function UserBase({ name, avatar, role }: UserProps): JSX.Element;
+declare const User: react.MemoExoticComponent<typeof UserBase>;
+
+export { Avatar, AvatarGroup, type AvatarGroupProps, type AvatarProps, User, type UserProps };

package/dist/components/avatar.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import Image from 'next/image';
+import { memo } from 'react';
+
+const sizes = {
+  sm: "w-8 h-8 text-xs",
+  md: "w-10 h-10 text-sm",
+  lg: "w-12 h-12 text-base"
+};
+const pixelSizes = {
+  sm: 32,
+  md: 40,
+  lg: 48
+};
+function getInitials(name) {
+  return name.split(" ").map((part) => part[0]).join("").toUpperCase().slice(0, 2);
+}
+function AvatarBase({ src, name, size = "md" }) {
+  if (src) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `${sizes[size]} rounded-full overflow-hidden relative`,
+        role: "img",
+        "aria-label": name,
+        children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            src,
+            alt: "",
+            fill: true,
+            sizes: `${pixelSizes[size]}px`,
+            className: "object-cover",
+            "aria-hidden": "true"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `${sizes[size]} rounded-full bg-surface border border-line flex items-center justify-center font-medium text-muted`,
+      role: "img",
+      "aria-label": name,
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: getInitials(name) })
+    }
+  );
+}
+const Avatar = memo(AvatarBase);
+function AvatarGroupBase({ children, label }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex -space-x-2", role: "group", "aria-label": label, children });
+}
+const AvatarGroup = memo(AvatarGroupBase);
+function UserBase({ name, avatar, role }) {
+  return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Avatar, { src: avatar, name, size: "sm" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+      /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-fg", children: name }),
+      role && /* @__PURE__ */ jsx("span", { className: "text-xs text-muted", children: role })
+    ] })
+  ] });
+}
+const User = memo(UserBase);
+
+export { Avatar, AvatarGroup, User };

package/dist/components/avatarstack.d.ts

@@ -0,0 +1,23 @@
+import * as react from 'react';
+import { ReactNode, JSX } from 'react';
+
+/**
+ * Props for the AvatarStack component.
+ */
+interface AvatarStackProps {
+    /** Avatar elements to display in the stack */
+    children: ReactNode;
+    /** Maximum number of avatars to show before truncating */
+    max?: number;
+    /** Size variant for all avatars */
+    size?: "sm" | "md" | "lg";
+    /** Accessible label describing the avatar group */
+    label?: string;
+}
+declare function AvatarStackBase({ children, max, size, label, }: AvatarStackProps): JSX.Element;
+/**
+ * A stacked avatar display showing overlapping avatars with overflow count.
+ */
+declare const AvatarStack: react.MemoExoticComponent<typeof AvatarStackBase>;
+
+export { AvatarStack, type AvatarStackProps };

package/dist/components/avatarstack.js

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const sizes = {
+  sm: "size-6",
+  md: "size-8",
+  lg: "size-10"
+};
+function AvatarStackBase({
+  children,
+  max = 5,
+  size = "md",
+  label
+}) {
+  const items = Array.isArray(children) ? children : [children];
+  const visible = items.slice(0, max);
+  const remaining = items.length - max;
+  const total = items.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "flex -space-x-2",
+      role: "group",
+      "aria-label": label ?? `${total} avatars`,
+      children: [
+        visible.map((child, i) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `relative rounded-full ring-2 ring-bg ${sizes[size]}`,
+            style: { zIndex: visible.length - i },
+            role: "img",
+            "aria-hidden": "true",
+            children: child
+          },
+          i
+        )),
+        remaining > 0 && /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `relative flex items-center justify-center rounded-full bg-surface text-xs font-medium text-muted ring-2 ring-bg ${sizes[size]}`,
+            "aria-label": `${remaining} more`,
+            children: [
+              "+",
+              remaining
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+const AvatarStack = memo(AvatarStackBase);
+
+export { AvatarStack };

package/dist/components/backtotop.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+/**
+ * Props for the BackToTop component.
+ */
+interface BackToTopProps {
+    /**
+     * Scroll threshold in pixels before the button appears.
+     */
+    threshold?: number;
+    /**
+     * Additional CSS classes to apply to the button.
+     */
+    className?: string;
+}
+declare function BackToTopBase({ threshold, className }: BackToTopProps): JSX.Element | null;
+declare const BackToTop: react.MemoExoticComponent<typeof BackToTopBase>;
+
+export { BackToTop, type BackToTopProps };

package/dist/components/backtotop.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect, useCallback } from 'react';
+
+function BackToTopBase({ threshold = 400, className }) {
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    function check() {
+      setVisible(window.scrollY > threshold);
+    }
+    check();
+    window.addEventListener("scroll", check, { passive: true });
+    return () => window.removeEventListener("scroll", check);
+  }, [threshold]);
+  const scrollToTop = useCallback(() => {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }, []);
+  if (!visible) return null;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: scrollToTop,
+      className: `fixed bottom-6 right-6 p-3 bg-surface border border-line rounded-full shadow-lg hover:bg-bg transition-all z-50 ${className || ""}`,
+      "aria-label": "back to top",
+      children: /* @__PURE__ */ jsx(
+        "svg",
+        {
+          "aria-hidden": "true",
+          className: "size-4 text-fg",
+          fill: "none",
+          stroke: "currentColor",
+          viewBox: "0 0 24 24",
+          children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 15l7-7 7 7" })
+        }
+      )
+    }
+  );
+}
+const BackToTop = memo(BackToTopBase);
+
+export { BackToTop };

package/dist/components/badge.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BadgeVariant = "default" | "success" | "warning" | "error" | "info";
+/**
+ * @param variant - color variant
+ * @example <Badge variant="success">active</Badge>
+ */
+interface BadgeProps extends ComponentPropsWithoutRef<"span"> {
+    variant?: BadgeVariant;
+    "aria-label"?: string;
+}
+declare function BadgeBase({ children, variant, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare const Badge: react.MemoExoticComponent<typeof BadgeBase>;
+
+export { Badge, type BadgeProps, type BadgeVariant };

package/dist/components/badge.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+
+const styles = {
+  default: "bg-surface text-muted border-line",
+  success: "bg-green-500/10 text-green-400 border-green-500/30",
+  warning: "bg-yellow-500/10 text-yellow-400 border-yellow-500/30",
+  error: "bg-red-500/10 text-red-400 border-red-500/30",
+  info: "bg-blue-500/10 text-blue-400 border-blue-500/30"
+};
+function BadgeBase({ children, variant = "default", className = "", ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      className: `inline-flex items-center px-2 py-0.5 text-[10px] font-medium rounded-full border ${styles[variant]} ${className}`.trim(),
+      ...props,
+      children
+    }
+  );
+}
+const Badge = memo(BadgeBase);
+
+export { Badge };

package/dist/components/banner.d.ts

@@ -0,0 +1,21 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type BannerVariant = "default" | "rainbow";
+/**
+ * @param id - unique id for dismiss persistence
+ * @param variant - visual style
+ * @param children - banner content
+ * @example <Banner id="sale" variant="rainbow">50% off</Banner>
+ */
+interface BannerProps {
+    id?: string;
+    variant?: BannerVariant;
+    children: ReactNode;
+    "aria-label"?: string;
+}
+declare function BannerInner({ id, variant, children, "aria-label": ariaLabel, }: BannerProps): react_jsx_runtime.JSX.Element | null;
+declare const Banner: react.MemoExoticComponent<typeof BannerInner>;
+
+export { Banner, type BannerProps, type BannerVariant };

package/dist/components/banner.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { memo, useState, useEffect, useCallback } from 'react';
+
+function BannerInner({
+  id,
+  variant = "default",
+  children,
+  "aria-label": ariaLabel
+}) {
+  const [visible, setVisible] = useState(() => {
+    if (!id) return true;
+    if (typeof window === "undefined") return null;
+    return localStorage.getItem(`banner-${id}`) !== "true";
+  });
+  useEffect(() => {
+    if (!id) {
+      setVisible(true);
+      return;
+    }
+    setVisible(localStorage.getItem(`banner-${id}`) !== "true");
+  }, [id]);
+  const dismiss = useCallback(() => {
+    if (id) {
+      localStorage.setItem(`banner-${id}`, "true");
+    }
+    setVisible(false);
+  }, [id]);
+  if (visible !== true) return null;
+  const base = "sticky top-0 z-40 flex items-center justify-center gap-2 px-4 py-2 text-sm";
+  const styles = {
+    default: "bg-fg/5 text-fg",
+    rainbow: "bg-gradient-to-r from-purple-500 via-pink-500 to-orange-500 text-white"
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-live": "polite",
+      className: `${base} ${styles[variant]}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-center", children }),
+        id && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: dismiss,
+            onKeyDown: (e) => {
+              if (e.key === "Escape") dismiss();
+            },
+            className: "absolute right-4 rounded p-1 opacity-60 hover:opacity-100 focus:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-current",
+            "aria-label": "Dismiss banner",
+            children: /* @__PURE__ */ jsx("svg", { "aria-hidden": "true", viewBox: "0 0 16 16", fill: "currentColor", className: "size-4", children: /* @__PURE__ */ jsx("path", { d: "M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z" }) })
+          }
+        )
+      ]
+    }
+  );
+}
+const Banner = memo(BannerInner);
+
+export { Banner };

package/dist/components/breadcrumb.d.ts

@@ -0,0 +1,25 @@
+import * as react from 'react';
+import { JSX } from 'react';
+
+/**
+ * Represents a single breadcrumb navigation item.
+ */
+interface BreadcrumbItem {
+    href: string;
+    label: string;
+}
+/**
+ * Props for the Breadcrumb component.
+ */
+interface BreadcrumbProps {
+    base?: string;
+    rootLabel?: string;
+    indexLabel?: string;
+}
+declare function BreadcrumbBase({ base, rootLabel, indexLabel, }: BreadcrumbProps): JSX.Element;
+/**
+ * Renders a breadcrumb navigation based on the current pathname.
+ */
+declare const Breadcrumb: react.MemoExoticComponent<typeof BreadcrumbBase>;
+
+export { Breadcrumb, type BreadcrumbItem, type BreadcrumbProps };