@docubook/flame 1.0.0-beta.70 → 1.0.0

package/.docu/components/base/drawer.tsx

@@ -1,164 +0,0 @@
-"use client";
-
-import { cn } from "../../node/utils";
-import { X } from "lucide-react";
-import { useState, type ReactNode } from "react";
-
-type DrawerSide = "left" | "right";
-
-interface DrawerProps {
-  id: string;
-  children: ReactNode;
-  defaultOpen?: boolean;
-  side?: DrawerSide;
-  breakpoint?: string;
-  withOverlay?: boolean;
-  overlayClassName?: string;
-  sideClassName?: string;
-  contentClassName?: string;
-  className?: string;
-}
-
-export default function Drawer({
-  id,
-  children,
-  defaultOpen = false,
-  side = "left",
-  breakpoint = "lg",
-  withOverlay = true,
-  overlayClassName,
-  sideClassName,
-  contentClassName,
-  className,
-}: DrawerProps) {
-  const [isOpen, setIsOpen] = useState(defaultOpen);
-
-  const toggleDrawer = () => setIsOpen(!isOpen);
-  const closeDrawer = () => setIsOpen(false);
-
-  const sidePositionClass = side === "right" ? "drawer-end" : "";
-
-  return (
-    <div
-      className={cn(
-        "drawer",
-        breakpoint ? `${breakpoint}:drawer-open` : "",
-        sidePositionClass,
-        className
-      )}
-    >
-      <input
-        id={id}
-        type="checkbox"
-        className="drawer-toggle"
-        checked={isOpen}
-        onChange={toggleDrawer}
-        aria-label="Toggle drawer"
-      />
-
-      <div className={cn("drawer-content flex flex-col", contentClassName)}>
-        {typeof children === "function"
-          ? (
-              children as (props: {
-                open: boolean;
-                toggle: () => void;
-                close: () => void;
-              }) => ReactNode
-            )({ open: isOpen, toggle: toggleDrawer, close: closeDrawer })
-          : children}
-      </div>
-
-      <div className={cn("drawer-side", sideClassName)}>
-        {withOverlay && (
-          <label
-            htmlFor={id}
-            aria-label="Close sidebar"
-            className={cn("drawer-overlay", overlayClassName)}
-            onClick={closeDrawer}
-          />
-        )}
-
-        <div className="bg-base-200 min-h-full w-80 p-4">
-          <div className="mb-4 flex items-center justify-between">
-            <span className="text-lg font-semibold">Menu</span>
-            <button
-              onClick={closeDrawer}
-              className="btn btn-ghost btn-sm btn-circle"
-              aria-label="Close drawer"
-            >
-              <X className="h-5 w-5" />
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-export function useDrawerState(initialState = false) {
-  const [isOpen, setIsOpen] = useState(initialState);
-
-  return {
-    isOpen,
-    open: () => setIsOpen(true),
-    close: () => setIsOpen(false),
-    toggle: () => setIsOpen((prev) => !prev),
-  };
-}
-
-interface DrawerTriggerProps {
-  drawerId: string;
-  children: ReactNode;
-  className?: string;
-}
-
-export function DrawerTrigger({ drawerId, children, className }: DrawerTriggerProps) {
-  return (
-    <label htmlFor={drawerId} className={cn("label cursor-pointer", className)}>
-      {children}
-    </label>
-  );
-}
-
-interface DrawerContentProps {
-  children: ReactNode;
-  className?: string;
-}
-
-export function DrawerContent({ children, className }: DrawerContentProps) {
-  return <div className={cn("drawer-content", className)}>{children}</div>;
-}
-
-interface DrawerSidePanelProps {
-  id: string;
-  children: ReactNode;
-  side?: DrawerSide;
-  withOverlay?: boolean;
-  overlayClassName?: string;
-  className?: string;
-}
-
-export function DrawerSidePanel({
-  id,
-  children,
-  side = "left",
-  withOverlay = true,
-  overlayClassName,
-  className,
-}: DrawerSidePanelProps) {
-  return (
-    <div className={cn("drawer-side", side === "right" ? "drawer-end" : "", className)}>
-      {withOverlay && (
-        <label
-          htmlFor={id}
-          aria-label="Close sidebar"
-          className={cn("drawer-overlay", overlayClassName)}
-        />
-      )}
-      {children}
-    </div>
-  );
-}
-
-export { Drawer };
-export type { DrawerProps, DrawerSide };

package/.docu/components/base/dropdown.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import { type HTMLAttributes, type ReactNode, forwardRef, useRef, useEffect } from "react";
-import { cn } from "../../node/utils";
-
-export interface DropdownProps extends HTMLAttributes<HTMLDetailsElement> {
-  align?: "start" | "end";
-  disabled?: boolean;
-  trigger?: ReactNode;
-  children?: ReactNode;
-}
-
-export const Dropdown = forwardRef<HTMLDetailsElement, DropdownProps>(
-  ({ className, align = "start", disabled = false, trigger, children, ...props }, ref) => {
-    const detailsRef = useRef<HTMLDetailsElement>(null);
-
-    // Close on click outside
-    useEffect(() => {
-      const handler = (e: MouseEvent) => {
-        if (detailsRef.current && !detailsRef.current.contains(e.target as Node)) {
-          detailsRef.current.open = false;
-        }
-      };
-      document.addEventListener("click", handler);
-      return () => document.removeEventListener("click", handler);
-    }, []);
-
-    return (
-      <details
-        ref={(el) => {
-          (detailsRef as React.MutableRefObject<HTMLDetailsElement | null>).current = el;
-          if (typeof ref === "function") ref(el);
-          else if (ref) ref.current = el;
-        }}
-        className={cn("relative", disabled && "pointer-events-none opacity-50", className)}
-        {...props}
-      >
-        <summary className="cursor-pointer list-none [&::-webkit-details-marker]:hidden">
-          {trigger}
-        </summary>
-        <ul
-          className={cn(
-            "bg-base-100 rounded-box border-base-300 absolute z-50 mt-1 w-full min-w-[200px] space-y-1 border p-2 shadow-lg",
-            align === "end" ? "right-0" : "left-0"
-          )}
-        >
-          {children}
-        </ul>
-      </details>
-    );
-  }
-);
-Dropdown.displayName = "Dropdown";
-
-export interface DropdownItemProps extends HTMLAttributes<HTMLLIElement> {
-  children?: ReactNode;
-}
-
-export const DropdownItem = forwardRef<HTMLLIElement, DropdownItemProps>(
-  ({ className, children, ...props }, ref) => (
-    <li ref={ref} className={cn(className)} role="menuitem" {...props}>
-      {children}
-    </li>
-  )
-);
-DropdownItem.displayName = "DropdownItem";
-
-export const DropdownLink = forwardRef<
-  HTMLAnchorElement,
-  HTMLAttributes<HTMLAnchorElement> & { href?: string }
->(({ className, children, href, ...props }, ref) => (
-  <li role="menuitem">
-    <a ref={ref} href={href} className={cn(className)} {...props}>
-      {children}
-    </a>
-  </li>
-));
-DropdownLink.displayName = "DropdownLink";
-
-export const DropdownLabel = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(
-  ({ className, children, ...props }, ref) => (
-    <li ref={ref} className={cn("menu-title", className)} {...props}>
-      {children}
-    </li>
-  )
-);
-DropdownLabel.displayName = "DropdownLabel";
-
-export const DropdownDivider = forwardRef<HTMLLIElement, HTMLAttributes<HTMLLIElement>>(
-  ({ className, ...props }, ref) => (
-    <li ref={ref} className={cn("border-base-200 my-1 border-t", className)} {...props} />
-  )
-);
-DropdownDivider.displayName = "DropdownDivider";

package/.docu/components/base/input.tsx

@@ -1,53 +0,0 @@
-import { forwardRef } from "react";
-import { cn } from "../../node/utils";
-
-type InputColor =
-  | "neutral"
-  | "primary"
-  | "secondary"
-  | "accent"
-  | "info"
-  | "success"
-  | "warning"
-  | "error";
-type InputSize = "xs" | "sm" | "md" | "lg" | "xl";
-
-interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  color?: InputColor;
-  inputSize?: InputSize;
-  ghost?: boolean;
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ className, color, inputSize, ghost, ...props }, ref) => {
-    return (
-      <input
-        ref={ref}
-        className={cn(
-          "input",
-          ghost && "input-ghost",
-          color && `input-${color}`,
-          inputSize && `input-${inputSize}`,
-          className
-        )}
-        {...props}
-      />
-    );
-  }
-);
-Input.displayName = "Input";
-
-interface InputGroupProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
-  children: React.ReactNode;
-}
-
-export const InputGroup = forwardRef<HTMLLabelElement, InputGroupProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <label ref={ref} className={cn("input", className)} {...props}>
-        {children}
-      </label>
-    );
-  }
-);
-InputGroup.displayName = "InputGroup";

package/.docu/components/base/kbd.tsx

@@ -1,51 +0,0 @@
-import { forwardRef } from "react";
-import {
-  ArrowUp,
-  ArrowDown,
-  ArrowLeft,
-  ArrowRight,
-  Command,
-  Option,
-  ChevronUp,
-  ArrowBigUp,
-  CircleArrowOutUpLeft,
-  Space,
-  Delete,
-  ArrowRightToLine,
-} from "lucide-react";
-import { cn } from "../../node/utils";
-
-type KbdSize = "xs" | "sm" | "md" | "lg" | "xl";
-
-interface KbdProps extends React.HTMLAttributes<HTMLElement> {
-  children: React.ReactNode;
-  size?: KbdSize;
-}
-
-export const Kbd = forwardRef<HTMLElement, KbdProps>(
-  ({ children, className, size, ...props }, ref) => {
-    return (
-      <kbd ref={ref} className={cn("kbd", size && `kbd-${size}`, className)} {...props}>
-        {children}
-      </kbd>
-    );
-  }
-);
-Kbd.displayName = "Kbd";
-
-const iconSize = 12;
-
-export const FnKey = {
-  Cmd: () => <Command size={iconSize} />,
-  Option: () => <Option size={iconSize} />,
-  Ctrl: () => <ChevronUp size={iconSize} />,
-  Shift: () => <ArrowBigUp size={iconSize} />,
-  Esc: () => <CircleArrowOutUpLeft size={iconSize} />,
-  Space: () => <Space size={iconSize} />,
-  Delete: () => <Delete size={iconSize} />,
-  Tab: () => <ArrowRightToLine size={iconSize} />,
-  Up: () => <ArrowUp size={iconSize} />,
-  Down: () => <ArrowDown size={iconSize} />,
-  Left: () => <ArrowLeft size={iconSize} />,
-  Right: () => <ArrowRight size={iconSize} />,
-};

package/.docu/components/base/modal.tsx

@@ -1,56 +0,0 @@
-"use client";
-
-import { forwardRef, useRef, useCallback } from "react";
-import { cn } from "../../node/utils";
-
-interface ModalProps extends React.DialogHTMLAttributes<HTMLDialogElement> {
-  children: React.ReactNode;
-  closeOnBackdrop?: boolean;
-  placement?: "top" | "middle" | "bottom";
-  boxClassName?: string;
-}
-
-export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
-  ({ children, className, closeOnBackdrop = true, placement, boxClassName, ...props }, ref) => {
-    const placementClass = placement ? `modal-${placement}` : "";
-
-    return (
-      <dialog ref={ref} className={cn("modal", placementClass, className)} {...props}>
-        <div className={cn("modal-box", boxClassName)}>{children}</div>
-        {closeOnBackdrop && (
-          <form method="dialog" className="modal-backdrop">
-            <button>esc</button>
-          </form>
-        )}
-      </dialog>
-    );
-  }
-);
-Modal.displayName = "Modal";
-
-export function ModalAction({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cn("modal-action", className)}>
-      <form method="dialog">{children}</form>
-    </div>
-  );
-}
-
-export function useModal() {
-  const ref = useRef<HTMLDialogElement>(null);
-  const open = useCallback(() => {
-    ref.current?.showModal();
-    setTimeout(() => {
-      const input = ref.current?.querySelector<HTMLElement>("input, [autofocus]");
-      input?.focus();
-    }, 0);
-  }, []);
-  const close = useCallback(() => ref.current?.close(), []);
-  return { ref, open, close };
-}

package/.docu/components/base/navbar.tsx

@@ -1,132 +0,0 @@
-import type { ReactNode, CSSProperties } from "react";
-
-export interface NavbarProps {
-  id?: string;
-  children?: ReactNode;
-  className?: string;
-  style?: CSSProperties;
-}
-
-export interface LogoProps {
-  src?: string;
-  alt?: string;
-  text?: string;
-  href?: string;
-}
-
-export interface NavMenuItem {
-  title: string;
-  href: string;
-  isExternal?: boolean;
-}
-
-export interface NavMenuProps {
-  items: NavMenuItem[];
-  onItemClick?: () => void;
-  activePath?: string;
-}
-
-export function Navbar({ id, children, className, style }: NavbarProps) {
-  return (
-    <nav id={id} className={className} style={style}>
-      {children}
-    </nav>
-  );
-}
-
-export function NavbarContainer({
-  start,
-  center,
-  end,
-  className,
-}: {
-  start?: ReactNode;
-  center?: ReactNode;
-  end?: ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={className}>
-      {start && <div className="flex-start">{start}</div>}
-      {center && <div className="flex-center">{center}</div>}
-      {end && <div className="flex-none">{end}</div>}
-    </div>
-  );
-}
-
-export function Logo({ src, alt, text, href = "/" }: LogoProps) {
-  return (
-    <a href={href} className="logo-link">
-      {src ? (
-        <img src={src} alt={alt || text || "Logo"} className="logo-image" />
-      ) : (
-        <span className="logo-text">{text}</span>
-      )}
-    </a>
-  );
-}
-
-export function NavMenu({ items, activePath }: NavMenuProps) {
-  return (
-    <ul className="nav-menu">
-      {items.map((item) => {
-        const isActive = activePath
-          ? item.href === "/"
-            ? activePath === "/"
-            : activePath === item.href || activePath.startsWith(item.href + "/")
-          : false;
-        return (
-          <li key={item.title + item.href}>
-            <a
-              href={item.href}
-              className={`nav-menu-item ${isActive ? "active" : ""}`}
-              target={item.isExternal ? "_blank" : undefined}
-              rel={item.isExternal ? "noopener noreferrer" : undefined}
-            >
-              {item.title}
-            </a>
-          </li>
-        );
-      })}
-    </ul>
-  );
-}
-
-export function NavMenuLink({ item, isActive }: { item: NavMenuItem; isActive?: boolean }) {
-  return (
-    <a
-      href={item.href}
-      className={`nav-menu-item ${isActive ? "active" : ""}`}
-      target={item.isExternal ? "_blank" : undefined}
-      rel={item.isExternal ? "noopener noreferrer" : undefined}
-    >
-      {item.title}
-    </a>
-  );
-}
-
-export function NavToggle({
-  isOpen,
-  onClick,
-  label = "Toggle navigation",
-}: {
-  isOpen: boolean;
-  onClick: () => void;
-  label?: string;
-}) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      aria-label={label}
-      aria-expanded={isOpen}
-      className="nav-toggle"
-    >
-      <span className={`toggle-icon ${isOpen ? "open" : ""}`}>{isOpen ? "✕" : "☰"}</span>
-    </button>
-  );
-}
-
-export function NavbarVersion({ version }: { version: string }) {
-  return <span className="navbar-version">v{version}</span>;
-}