opacacms 0.1.1 → 0.1.2

package/src/admin/ui/components/toast.tsx

@@ -1,72 +0,0 @@
-import { CheckCircle, Info, X, XCircle } from "lucide-react";
-import { useEffect, useState } from "react";
-import type { ToastItem, ToastType } from "../../stores/ui";
-
-interface ToastProps extends ToastItem {
-  onClear: (id: string) => void;
-}
-
-export function Toast({ id, message, type, onClear }: ToastProps) {
-  const [isExiting, setIsExiting] = useState(false);
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setIsExiting(true);
-      setTimeout(() => onClear(id), 200);
-    }, 4000);
-    return () => clearTimeout(timer);
-  }, [id, onClear]);
-
-  const Icon = type === "success" ? CheckCircle : type === "error" ? XCircle : Info;
-  const iconColor =
-    type === "success"
-      ? "var(--opaca-success)"
-      : type === "error"
-        ? "var(--opaca-error)"
-        : "var(--opaca-accent)";
-
-  return (
-    <div className={`opaca-toast opaca-toast-${type} ${isExiting ? "exit" : ""}`}>
-      <Icon size={18} style={{ color: iconColor }} />
-      <span className="opaca-toast-message">{message}</span>
-      <button
-        type="button"
-        onClick={() => {
-          setIsExiting(true);
-          setTimeout(() => onClear(id), 200);
-        }}
-        style={{
-          background: "none",
-          border: "none",
-          padding: "4px",
-          marginLeft: "auto",
-          cursor: "pointer",
-          color: "var(--opaca-text-dim)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <X size={14} />
-      </button>
-    </div>
-  );
-}
-
-export function ToastContainer({
-  toasts,
-  onClear,
-}: {
-  toasts: ToastItem[];
-  onClear: (id: string) => void;
-}) {
-  if (toasts.length === 0) return null;
-
-  return (
-    <div className="opaca-toast-container">
-      {toasts.map((toast) => (
-        <Toast key={toast.id} {...toast} onClear={onClear} />
-      ))}
-    </div>
-  );
-}

package/src/admin/ui/components/ui/accordion.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-import "../../styles/accordion.scss";
-
-interface AccordionProps {
-  title: string;
-  children: React.ReactNode;
-  defaultOpen?: boolean;
-  className?: string;
-  isCollapsed?: boolean;
-}
-
-export const Accordion = ({
-  title,
-  children,
-  defaultOpen = true,
-  className,
-  isCollapsed = false,
-}: AccordionProps) => {
-  const [isOpen, setIsOpen] = React.useState(defaultOpen);
-
-  return (
-    <div className={cn("opaca-sidebar-accordion", className)}>
-      <button
-        type="button"
-        className="opaca-sidebar-accordion-trigger"
-        onClick={() => setIsOpen(!isOpen)}
-        aria-expanded={isOpen}
-        style={{
-          opacity: isCollapsed ? 0 : 1,
-          pointerEvents: isCollapsed ? "none" : "auto",
-        }}
-        title={title}
-      >
-        <span className="opaca-sidebar-accordion-title">{title}</span>
-        <svg
-          className="opaca-sidebar-accordion-icon"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-          aria-hidden="true"
-        >
-          <title>Toggle accordion</title>
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
-      </button>
-      <div className="opaca-sidebar-accordion-content" data-state={isOpen ? "open" : "closed"}>
-        <div className="opaca-sidebar-accordion-content-inner">{children}</div>
-      </div>
-    </div>
-  );
-};

package/src/admin/ui/components/ui/alert-dialog.tsx

@@ -1,98 +0,0 @@
-import { Children, cloneElement, isValidElement, type ReactNode, useState } from "react";
-import { Button } from "./button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "./dialog";
-
-export interface AlertDialogProps {
-  children?: ReactNode;
-  trigger?: ReactNode;
-  title: string;
-  description: string;
-  onConfirm: () => void;
-  confirmText?: string;
-  cancelText?: string;
-  variant?: "default" | "destructive";
-}
-
-export function AlertDialog({
-  children,
-  trigger,
-  title,
-  description,
-  onConfirm,
-  confirmText = "Continue",
-  cancelText = "Cancel",
-  variant = "default",
-}: AlertDialogProps) {
-  const [open, setOpen] = useState(false);
-
-  const handleConfirm = () => {
-    onConfirm();
-    setOpen(false);
-  };
-
-  const triggerElement = trigger || children;
-
-  const renderTrigger = () => {
-    if (Children.count(triggerElement) === 1 && isValidElement(triggerElement)) {
-      const element = triggerElement as React.ReactElement<{
-        onClick?: (e: React.MouseEvent) => void;
-      }>;
-      return cloneElement(element, {
-        onClick: (e: React.MouseEvent) => {
-          const originalOnClick = element.props.onClick;
-          if (originalOnClick) originalOnClick(e);
-          setOpen(true);
-        },
-      });
-    }
-
-    return (
-      <span
-        role="button"
-        tabIndex={0}
-        onClick={() => setOpen(true)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            setOpen(true);
-          }
-        }}
-        style={{
-          display: "inline-block",
-          cursor: "pointer",
-        }}
-      >
-        {triggerElement}
-      </span>
-    );
-  };
-
-  return (
-    <>
-      {renderTrigger()}
-      <Dialog open={open} onOpenChange={setOpen}>
-        <DialogContent className="opaca-dialog-max-w">
-          <DialogHeader>
-            <DialogTitle>{title}</DialogTitle>
-            <DialogDescription>{description}</DialogDescription>
-          </DialogHeader>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setOpen(false)}>
-              {cancelText}
-            </Button>
-            <Button variant={variant} onClick={handleConfirm}>
-              {confirmText}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-    </>
-  );
-}

package/src/admin/ui/components/ui/blocks.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-
-export interface BlocksProps extends React.HTMLAttributes<HTMLDivElement> {
-  label?: string;
-}
-
-export const Blocks = React.forwardRef<HTMLDivElement, BlocksProps>(
-  ({ className, label, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn("opaca-ui-blocks", className)} {...props}>
-        {label && (
-          <div
-            style={{
-              marginBottom: "1.25rem",
-              fontSize: "0.75rem",
-              fontWeight: 500,
-              color: "var(--opaca-text-muted)",
-              textTransform: "uppercase",
-              letterSpacing: "0.03em",
-            }}
-          >
-            {label}
-          </div>
-        )}
-        <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem" }}>{children}</div>
-      </div>
-    );
-  },
-);
-
-Blocks.displayName = "Blocks";

package/src/admin/ui/components/ui/breadcrumbs.tsx

@@ -1,59 +0,0 @@
-import { ChevronRight, Home } from 'lucide-react';
-import React from 'react';
-import { Link } from '../link';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-
-export function Breadcrumbs({ items }: { items: BreadcrumbItem[] }) {
-  return (
-    <nav
-      aria-label="Breadcrumb"
-      style={{
-        display: 'flex',
-        alignItems: 'center',
-        gap: '0.5rem',
-        marginBottom: '1.5rem',
-        fontSize: '0.8125rem',
-        color: 'var(--opaca-text-dim)',
-      }}
-    >
-      <Link
-        href="/admin"
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          color: 'inherit',
-          textDecoration: 'none',
-          transition: 'color var(--opaca-transition)',
-        }}
-      >
-        <Home size={14} />
-      </Link>
-
-      {items.map((item, index) => (
-        <React.Fragment key={item.label || index}>
-          <ChevronRight size={12} style={{ opacity: 0.5 }} />
-          {item.href ? (
-            <Link
-              href={item.href}
-              style={{
-                color: 'inherit',
-                textDecoration: 'none',
-                transition: 'color var(--opaca-transition)',
-              }}
-            >
-              {item.label}
-            </Link>
-          ) : (
-            <span style={{ color: 'var(--opaca-text)', fontWeight: '500' }}>
-              {item.label}
-            </span>
-          )}
-        </React.Fragment>
-      ))}
-    </nav>
-  );
-}

package/src/admin/ui/components/ui/button.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-import "../../styles/button.scss";
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link";
-  size?: "default" | "sm" | "lg" | "icon";
-}
-
-export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant = "default", size = "default", ...props }, ref) => {
-    return (
-      <button
-        ref={ref}
-        className={cn(
-          "opaca-ui-btn",
-          `opaca-ui-btn-${variant}`,
-          `opaca-ui-btn-size-${size}`,
-          className,
-        )}
-        {...props}
-      />
-    );
-  },
-);
-Button.displayName = "Button";

package/src/admin/ui/components/ui/collapsible.tsx

@@ -1,124 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-import "../../styles/collapsible.scss";
-
-interface CollapsibleContextValue {
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  disabled?: boolean;
-}
-
-const CollapsibleContext = React.createContext<CollapsibleContextValue>({});
-
-export interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
-  open?: boolean;
-  defaultOpen?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  disabled?: boolean;
-}
-
-export const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
-  ({ className, open, defaultOpen, onOpenChange, disabled, children, ...props }, ref) => {
-    const [uncontrolledOpen, setUncontrolledOpen] = React.useState<boolean>(defaultOpen ?? false);
-
-    const isControlled = open !== undefined;
-    const currentOpen = isControlled ? open : uncontrolledOpen;
-
-    const handleOpenChange = React.useCallback(
-      (newOpen: boolean) => {
-        if (!isControlled) {
-          setUncontrolledOpen(newOpen);
-        }
-        if (onOpenChange) {
-          onOpenChange(newOpen);
-        }
-      },
-      [isControlled, onOpenChange],
-    );
-
-    const contextValue = React.useMemo(
-      () => ({ open: currentOpen, onOpenChange: handleOpenChange, disabled }),
-      [currentOpen, handleOpenChange, disabled],
-    );
-
-    return (
-      <CollapsibleContext.Provider value={contextValue}>
-        <div ref={ref} className={cn("opaca-ui-collapsible", className)} {...props}>
-          {children}
-        </div>
-      </CollapsibleContext.Provider>
-    );
-  },
-);
-Collapsible.displayName = "Collapsible";
-
-export interface CollapsibleTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  asChild?: boolean;
-}
-
-export const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, CollapsibleTriggerProps>(
-  ({ className, disabled, children, ...props }, ref) => {
-    const context = React.useContext(CollapsibleContext);
-    const isDisabled = disabled || context.disabled;
-    const isOpen = context.open;
-
-    const handleClick = React.useCallback(
-      (event: React.MouseEvent<HTMLButtonElement>) => {
-        if (!isDisabled && context.onOpenChange) {
-          context.onOpenChange(!isOpen);
-        }
-        if (props.onClick) {
-          props.onClick(event);
-        }
-      },
-      [isDisabled, isOpen, context.onOpenChange, props.onClick],
-    );
-
-    return (
-      <button
-        type="button"
-        aria-expanded={isOpen}
-        disabled={isDisabled}
-        onClick={handleClick}
-        ref={ref}
-        className={cn("opaca-ui-collapsible-trigger", className)}
-        {...props}
-      >
-        {children}
-        <svg
-          className="opaca-ui-collapsible-icon"
-          viewBox="0 0 24 24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <polyline points="6 9 12 15 18 9"></polyline>
-        </svg>
-      </button>
-    );
-  },
-);
-CollapsibleTrigger.displayName = "CollapsibleTrigger";
-
-export interface CollapsibleContentProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const CollapsibleContent = React.forwardRef<HTMLDivElement, CollapsibleContentProps>(
-  ({ className, children, ...props }, ref) => {
-    const context = React.useContext(CollapsibleContext);
-    const isOpen = context.open;
-
-    if (!isOpen) {
-      return null;
-    }
-
-    return (
-      <div
-        data-state={isOpen ? "open" : "closed"}
-        ref={ref}
-        className={cn("opaca-ui-collapsible-content", className)}
-        {...props}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-CollapsibleContent.displayName = "CollapsibleContent";

package/src/admin/ui/components/ui/dialog.tsx

@@ -1,79 +0,0 @@
-import type * as React from "react";
-import { createPortal } from "react-dom";
-import { cn } from "./utils";
-import "../../styles/dialog.scss";
-
-export function Dialog({
-  open,
-  onOpenChange,
-  children,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  children: React.ReactNode;
-}) {
-  if (!open) return null;
-  return createPortal(
-    <div className="opaca-ui-dialog-portal">
-      <button
-        type="button"
-        className="opaca-ui-dialog-overlay"
-        onClick={() => onOpenChange(false)}
-        tabIndex={-1}
-        aria-hidden="true"
-      />
-      <div className="opaca-ui-dialog-wrapper">{children}</div>
-    </div>,
-    document.body,
-  );
-}
-
-export function DialogContent({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("opaca-ui-dialog-content", className)}>{children}</div>;
-}
-
-export function DialogHeader({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("opaca-ui-dialog-header", className)}>{children}</div>;
-}
-
-export function DialogTitle({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <h2 className={cn("opaca-ui-dialog-title", className)}>{children}</h2>;
-}
-
-export function DialogDescription({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <p className={cn("opaca-ui-dialog-description", className)}>{children}</p>;
-}
-
-export function DialogFooter({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <div className={cn("opaca-ui-dialog-footer", className)}>{children}</div>;
-}

package/src/admin/ui/components/ui/group.tsx

@@ -1,20 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-import "../../styles/group.scss";
-
-export interface GroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  label?: string;
-}
-
-export const Group = React.forwardRef<HTMLDivElement, GroupProps>(
-  ({ className, label, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn("opaca-ui-group", className)} {...props}>
-        {label && <h3 className="opaca-ui-group-header">{label}</h3>}
-        {children}
-      </div>
-    );
-  },
-);
-
-Group.displayName = "Group";

package/src/admin/ui/components/ui/index.ts

@@ -1,17 +0,0 @@
-export * from "./accordion";
-export * from "./blocks";
-export * from "./button";
-export * from "./collapsible";
-export * from "./dialog";
-export * from "./group";
-export * from "./input";
-export * from "./join";
-export * from "./label";
-export * from "./radio-group";
-export * from "./relationship";
-export * from "./scroll-area";
-export * from "./select";
-export * from "./separator";
-export * from "./sheet";
-export * from "./tabs";
-export * from "./utils";

package/src/admin/ui/components/ui/input.tsx

@@ -1,12 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-import "../../styles/input.scss";
-
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
-
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
-    return <input type={type} className={cn("opaca-ui-input", className)} ref={ref} {...props} />;
-  },
-);
-Input.displayName = "Input";

package/src/admin/ui/components/ui/join.tsx

@@ -1,53 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-
-export interface JoinProps extends React.HTMLAttributes<HTMLDivElement> {
-  label?: string;
-  collection: string;
-  on?: string;
-}
-
-export const Join = React.forwardRef<HTMLDivElement, JoinProps>(
-  ({ className, label, collection, children, ...props }, ref) => {
-    return (
-      <div ref={ref} className={cn("opaca-ui-join", className)} {...props}>
-        {label && (
-          <div
-            style={{
-              display: "block",
-              marginBottom: "0.5rem",
-              fontSize: "0.75rem",
-              fontWeight: 500,
-              color: "var(--opaca-text-muted)",
-              textTransform: "uppercase",
-              letterSpacing: "0.03em",
-            }}
-          >
-            {label}
-          </div>
-        )}
-        {/* Placeholder for complex virtual data fetch UI */}
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "space-between",
-            padding: "0.75rem",
-            border: "1px solid var(--opaca-border)",
-            borderRadius: "var(--opaca-radius)",
-            backgroundColor: "rgba(255, 255, 255, 0.02)",
-            color: "var(--opaca-text-dim)",
-            fontSize: "0.8125rem",
-          }}
-        >
-          <span>
-            Virtually joined from: <strong>{collection}</strong>
-          </span>
-          <span style={{ fontSize: "0.7rem", opacity: 0.5 }}>On: {props.on || "dynamic"}</span>
-        </div>
-      </div>
-    );
-  },
-);
-
-Join.displayName = "Join";

package/src/admin/ui/components/ui/label.tsx

@@ -1,11 +0,0 @@
-import * as React from "react";
-import { cn } from "./utils";
-import "../../styles/label.scss";
-
-export const Label = React.forwardRef<
-  HTMLLabelElement,
-  React.LabelHTMLAttributes<HTMLLabelElement>
->(({ className, ...props }, ref) => (
-  <label ref={ref} className={cn("opaca-ui-label", className)} {...props} />
-));
-Label.displayName = "Label";