@allbluecn/ui 0.3.13 → 0.4.0

package/src/animated-theme-toggler.tsx

@@ -1,272 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-
-import { useCallback, useEffect, useRef, useState } from "react"
-import { Moon, Sun } from "lucide-react"
-import { flushSync } from "react-dom"
-import { useTheme } from "next-themes"
-
-import { cn } from "./utils"
-
-export type TransitionVariant =
-  | "circle"
-  | "square"
-  | "triangle"
-  | "diamond"
-  | "hexagon"
-  | "rectangle"
-  | "star"
-
-interface AnimatedThemeTogglerProps extends React.ComponentPropsWithoutRef<"button"> {
-  duration?: number
-  variant?: TransitionVariant
-  /** When true, the transition expands from the viewport center instead of the button center. */
-  fromCenter?: boolean
-}
-
-function polygonCollapsed(cx: number, cy: number, vertexCount: number): string {
-  const pairs = Array.from(
-    { length: vertexCount },
-    () => `${cx}px ${cy}px`
-  ).join(", ")
-  return `polygon(${pairs})`
-}
-
-function getThemeTransitionClipPaths(
-  variant: TransitionVariant,
-  cx: number,
-  cy: number,
-  maxRadius: number,
-  viewportWidth: number,
-  viewportHeight: number
-): [string, string] {
-  switch (variant) {
-    case "circle":
-      return [
-        `circle(0px at ${cx}px ${cy}px)`,
-        `circle(${maxRadius}px at ${cx}px ${cy}px)`,
-      ]
-    case "square": {
-      const halfW = Math.max(cx, viewportWidth - cx)
-      const halfH = Math.max(cy, viewportHeight - cy)
-      const halfSide = Math.max(halfW, halfH) * 1.05
-      const end = [
-        `${cx - halfSide}px ${cy - halfSide}px`,
-        `${cx + halfSide}px ${cy - halfSide}px`,
-        `${cx + halfSide}px ${cy + halfSide}px`,
-        `${cx - halfSide}px ${cy + halfSide}px`,
-      ].join(", ")
-      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`]
-    }
-    case "triangle": {
-      const scale = maxRadius * 2.2
-      const dx = (Math.sqrt(3) / 2) * scale
-      const verts = [
-        `${cx}px ${cy - scale}px`,
-        `${cx + dx}px ${cy + 0.5 * scale}px`,
-        `${cx - dx}px ${cy + 0.5 * scale}px`,
-      ].join(", ")
-      return [polygonCollapsed(cx, cy, 3), `polygon(${verts})`]
-    }
-    case "diamond": {
-      // Slightly larger than the view-transition circle radius so axis-aligned coverage matches the circle reveal.
-      const R = maxRadius * Math.SQRT2
-      const end = [
-        `${cx}px ${cy - R}px`,
-        `${cx + R}px ${cy}px`,
-        `${cx}px ${cy + R}px`,
-        `${cx - R}px ${cy}px`,
-      ].join(", ")
-      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`]
-    }
-    case "hexagon": {
-      const R = maxRadius * Math.SQRT2
-      const verts: string[] = []
-      for (let i = 0; i < 6; i++) {
-        const a = -Math.PI / 2 + (i * Math.PI) / 3
-        verts.push(`${cx + R * Math.cos(a)}px ${cy + R * Math.sin(a)}px`)
-      }
-      return [polygonCollapsed(cx, cy, 6), `polygon(${verts.join(", ")})`]
-    }
-    case "rectangle": {
-      const halfW = Math.max(cx, viewportWidth - cx)
-      const halfH = Math.max(cy, viewportHeight - cy)
-      const end = [
-        `${cx - halfW}px ${cy - halfH}px`,
-        `${cx + halfW}px ${cy - halfH}px`,
-        `${cx + halfW}px ${cy + halfH}px`,
-        `${cx - halfW}px ${cy + halfH}px`,
-      ].join(", ")
-      return [polygonCollapsed(cx, cy, 4), `polygon(${end})`]
-    }
-    case "star": {
-      // Small overscan so the last frames never leave a 1px seam before the transition group ends.
-      const R = maxRadius * Math.SQRT2 * 1.03
-      const innerRatio = 0.42
-      const starPolygon = (radius: number) => {
-        const verts: string[] = []
-        for (let i = 0; i < 5; i++) {
-          const outerA = -Math.PI / 2 + (i * 2 * Math.PI) / 5
-          verts.push(
-            `${cx + radius * Math.cos(outerA)}px ${cy + radius * Math.sin(outerA)}px`
-          )
-          const innerA = outerA + Math.PI / 5
-          verts.push(
-            `${cx + radius * innerRatio * Math.cos(innerA)}px ${cy + radius * innerRatio * Math.sin(innerA)}px`
-          )
-        }
-        return `polygon(${verts.join(", ")})`
-      }
-      const startR = Math.max(2, R * 0.025)
-      return [starPolygon(startR), starPolygon(R)]
-    }
-    default:
-      return [
-        `circle(0px at ${cx}px ${cy}px)`,
-        `circle(${maxRadius}px at ${cx}px ${cy}px)`,
-      ]
-  }
-}
-
-export const AnimatedThemeToggler = ({
-  className,
-  duration = 400,
-  variant,
-  fromCenter = false,
-  ...props
-}: AnimatedThemeTogglerProps) => {
-  const shape = variant ?? "circle"
-  const { theme, setTheme } = useTheme()
-  const [isDark, setIsDark] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    setIsDark(theme === "dark")
-  }, [theme])
-
-  const toggleTheme = useCallback(() => {
-    const button = buttonRef.current
-    if (!button) return
-
-    const viewportWidth = window.visualViewport?.width ?? window.innerWidth
-    const viewportHeight = window.visualViewport?.height ?? window.innerHeight
-
-    let x: number
-    let y: number
-    if (fromCenter) {
-      x = viewportWidth / 2
-      y = viewportHeight / 2
-    } else {
-      const { top, left, width, height } = button.getBoundingClientRect()
-      x = left + width / 2
-      y = top + height / 2
-    }
-
-    const maxRadius = Math.hypot(
-      Math.max(x, viewportWidth - x),
-      Math.max(y, viewportHeight - y)
-    )
-
-    const newTheme = !isDark
-
-    const applyTheme = () => {
-      setIsDark(newTheme)
-      document.documentElement.classList.toggle("dark", newTheme)
-    }
-
-    const syncNextThemes = () => {
-      setTheme(newTheme ? "dark" : "light")
-    }
-
-    if (typeof document.startViewTransition !== "function") {
-      applyTheme()
-      syncNextThemes()
-      return
-    }
-
-    const clipPath = getThemeTransitionClipPaths(
-      shape,
-      x,
-      y,
-      maxRadius,
-      viewportWidth,
-      viewportHeight
-    )
-
-    const root = document.documentElement
-    root.dataset.magicuiThemeVt = "active"
-    root.style.setProperty(
-      "--magicui-theme-toggle-vt-duration",
-      `${duration}ms`
-    )
-    // Pin the collapsed clip-path via CSS so Firefox does not paint the new
-    // theme unclipped between snapshot and the ready.then() JS animation.
-    root.style.setProperty("--magicui-theme-vt-clip-from", clipPath[0])
-    const cleanup = () => {
-      delete root.dataset.magicuiThemeVt
-      root.style.removeProperty("--magicui-theme-toggle-vt-duration")
-      root.style.removeProperty("--magicui-theme-vt-clip-from")
-    }
-
-    const transition = document.startViewTransition(() => {
-      flushSync(applyTheme)
-    })
-
-    const onFinish = () => {
-      cleanup()
-      syncNextThemes()
-    }
-
-    if (typeof transition?.finished?.then === "function") {
-      transition.finished.then(onFinish)
-    } else {
-      onFinish()
-    }
-
-    const ready = transition?.ready
-    if (ready && typeof ready.then === "function") {
-      ready.then(() => {
-        document.documentElement.animate(
-          {
-            clipPath,
-          },
-          {
-            duration,
-            // Star: linear avoids easing overshoot that fights polygon interpolation at t→1; VT group duration is synced above.
-            easing: shape === "star" ? "linear" : "ease-in-out",
-            fill: "forwards",
-            pseudoElement: "::view-transition-new(root)",
-          }
-        )
-      })
-    }
-  }, [shape, fromCenter, duration, isDark, setTheme])
-
-  return (
-    <button
-      type="button"
-      ref={buttonRef}
-      onClick={toggleTheme}
-      className={cn(className)}
-      {...props}
-    >
-      {isDark ? <Sun className={cn("size-5", className)} /> : <Moon className={cn("size-5", className)} />}
-      <span className="sr-only">Toggle theme</span>
-    </button>
-  )
-}

package/src/auth-client.ts

@@ -1,108 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import { useQuery } from '@tanstack/react-query'
-
-export interface Session {
-  user: {
-    id: string
-    email: string
-    name: string
-    role: 'USER' | 'ADMIN' | 'SUPER_ADMIN'
-    image?: string | null
-    aiProvider?: string | null
-    aiModel?: string | null
-    hasAiKey?: boolean | null
-    timezone?: string | null
-  }
-  expires: string
-}
-
-export function useSession() {
-  return useQuery({
-    queryKey: ['session'],
-    queryFn: async () => {
-      const res = await fetch('/api/auth/session', { credentials: 'include' })
-      if (!res.ok) return null
-      const data = await res.json()
-      return data?.user ? (data as Session) : null
-    },
-    staleTime: 0,
-    refetchOnMount: true,
-  })
-}
-
-export async function signIn(provider: string, options?: { redirectTo?: string; email?: string; password?: string; remember?: boolean }) {
-  if (provider !== 'credentials') {
-    const csrfRes = await fetch('/api/auth/csrf', { credentials: 'include' })
-    const { csrfToken } = await csrfRes.json()
-    const redirectPath = options?.redirectTo ?? '/dashboard'
-    const callbackUrl = `${window.location.origin}${redirectPath}`
-    const form = document.createElement('form')
-    form.method = 'POST'
-    form.action = `/api/auth/signin/${provider}`
-    form.style.display = 'none'
-    const csrfInput = document.createElement('input')
-    csrfInput.name = 'csrfToken'
-    csrfInput.value = csrfToken
-    form.appendChild(csrfInput)
-    const cbInput = document.createElement('input')
-    cbInput.name = 'callbackUrl'
-    cbInput.value = callbackUrl
-    form.appendChild(cbInput)
-    document.body.appendChild(form)
-    form.submit()
-    return
-  }
-
-  const csrfRes = await fetch('/api/auth/csrf', { credentials: 'include' })
-  const { csrfToken } = await csrfRes.json()
-  const callbackUrl = options?.redirectTo ?? '/'
-  const form = document.createElement('form')
-  form.method = 'POST'
-  form.action = '/api/auth/callback/credentials'
-  form.style.display = 'none'
-  const fields = [
-    { name: 'email', value: options?.email ?? '' },
-    { name: 'password', value: options?.password ?? '' },
-    { name: 'remember', value: String(options?.remember ?? false) },
-    { name: 'callbackUrl', value: callbackUrl },
-    { name: 'csrfToken', value: csrfToken },
-  ]
-  for (const field of fields) {
-    const input = document.createElement('input')
-    input.type = 'hidden'
-    input.name = field.name
-    input.value = field.value
-    form.appendChild(input)
-  }
-  document.body.appendChild(form)
-  form.submit()
-  return
-}
-
-export async function signOut() {
-  const csrfRes = await fetch('/api/auth/csrf', { credentials: 'include' })
-  const { csrfToken } = await csrfRes.json()
-  await fetch('/api/auth/signout', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
-    body: new URLSearchParams({ csrfToken }).toString(),
-    credentials: 'include',
-  })
-  return { success: true }
-}

package/src/auth-layout.tsx

@@ -1,66 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import type { ReactNode } from 'react'
-import { AnimatedThemeToggler } from './animated-theme-toggler'
-
-interface AuthLayoutProps {
-  children: ReactNode
-}
-
-export function AuthLayout({ children }: AuthLayoutProps) {
-  const left = findChild(children, AuthLayoutLeft)
-  const right = findChild(children, AuthLayoutRight)
-
-  return (
-    <div className="flex min-h-screen">
-      <div className="relative flex flex-1 items-center justify-center p-6">
-        <div className="absolute" style={{ top: '1.5rem', right: '1.5rem' }}>
-          <AnimatedThemeToggler className="flex size-6 items-center justify-center rounded-full hover:bg-accent" />
-        </div>
-        <div className="w-full max-w-sm space-y-6">
-          {left}
-        </div>
-      </div>
-      {right && (
-        <div className="hidden lg:flex flex-1 bg-linear-to-br from-primary/10 via-primary/5 to-background items-center justify-center p-12">
-          <div className="w-full max-w-md text-center space-y-8">
-            {right}
-          </div>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export function AuthLayoutLeft({ children }: { children: ReactNode }) {
-  return <>{children}</>
-}
-
-export function AuthLayoutRight({ children }: { children: ReactNode }) {
-  return <>{children}</>
-}
-
-function findChild(children: ReactNode, type: any) {
-  const arr = Array.isArray(children) ? children : [children]
-  for (const child of arr) {
-    if ((child as any)?.type === type) {
-      return (child as any).props.children
-    }
-  }
-  return null
-}

package/src/avatar.tsx

@@ -1,129 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-"use client"
-
-import * as React from "react"
-import { Avatar as AvatarPrimitive } from "radix-ui"
-
-import { cn } from "./utils"
-
-function Avatar({
-  className,
-  size = "default",
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Root> & {
-  size?: "default" | "sm" | "lg"
-}) {
-  return (
-    <AvatarPrimitive.Root
-      data-slot="avatar"
-      data-size={size}
-      className={cn(
-        "group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarImage({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
-  return (
-    <AvatarPrimitive.Image
-      data-slot="avatar-image"
-      className={cn(
-        "aspect-square size-full rounded-full object-cover",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarFallback({
-  className,
-  ...props
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
-  return (
-    <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
-      className={cn(
-        "flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarBadge({ className, ...props }: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="avatar-badge"
-      className={cn(
-        "absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none",
-        "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden",
-        "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2",
-        "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroup({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group"
-      className={cn(
-        "group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function AvatarGroupCount({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="avatar-group-count"
-      className={cn(
-        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-export {
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarGroupCount,
-  AvatarBadge,
-}

package/src/badge.tsx

@@ -1,66 +0,0 @@
-// SPDX-License-Identifier: AGPL-3.0-or-later
-// AllBlue - 理想之海
-// Copyright (C) 2026 AllBlue Contributors
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as published by
-// the Free Software Foundation, either version 3 of the License, or
-// (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Slot } from "radix-ui"
-
-import { cn } from "./utils"
-
-const badgeVariants = cva(
-  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
-        secondary:
-          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
-        destructive:
-          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
-        outline:
-          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
-        ghost:
-          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  }
-)
-
-function Badge({
-  className,
-  variant = "default",
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot.Root : "span"
-
-  return (
-    <Comp
-      data-slot="badge"
-      data-variant={variant}
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  )
-}
-
-export { Badge, badgeVariants }