@ardly/bunext 1.0.6 → 1.0.7

package/src/components/ui/radio-group.tsx

@@ -1,44 +0,0 @@
-'use client'
-
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
-import { Circle } from 'lucide-react'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn('grid gap-2', className)}
-      {...props}
-      ref={ref}
-    />
-  )
-})
-RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
-
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Item
-      ref={ref}
-      className={cn(
-        'aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
-        <Circle className="h-2.5 w-2.5 fill-current text-current" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  )
-})
-RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName
-
-export { RadioGroup, RadioGroupItem }

package/src/components/ui/separator.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import * as React from 'react'
-import * as SeparatorPrimitive from '@radix-ui/react-separator'
-
-import { cn } from '@/lib/utils'
-
-const Separator = React.forwardRef<
-  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = 'horizontal', decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        'shrink-0 bg-border',
-        orientation === 'horizontal' ? 'h-[1px] w-full' : 'h-full w-[1px]',
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
-
-export { Separator }

package/src/components/ui/skeleton.tsx

@@ -1,15 +0,0 @@
-import { cn } from '@/lib/utils'
-
-function Skeleton({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('animate-pulse rounded-md bg-muted', className)}
-      {...props}
-    />
-  )
-}
-
-export { Skeleton }

package/src/components/ui/themeSelector.tsx

@@ -1,157 +0,0 @@
-'use client'
-
-import { LaptopIcon, Moon, Sun } from 'lucide-react'
-import { useTheme } from 'next-themes'
-import * as React from 'react'
-
-import { Button } from '@/components/ui/button'
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu'
-import { Label } from '@/components/ui/label'
-import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@/components/ui/tooltip'
-import { cn } from '@/lib/utils'
-
-export function ModeDropdown({ className }: { className?: string }) {
-  const { setTheme, theme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return null
-  }
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          variant="outline"
-          className={cn('bg-background/5', className)}
-          size="icon"
-        >
-          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-          <span className="sr-only">Toggle theme</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
-          Light
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
-          Dark
-        </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
-          System
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-export function ModeSelector({
-  className,
-  iconClassName,
-}: {
-  className?: string
-  iconClassName?: string
-}) {
-  const { theme, setTheme } = useTheme()
-  const [mounted, setMounted] = React.useState(false)
-
-  React.useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  if (!mounted) {
-    return null
-  }
-
-  return (
-    <TooltipProvider>
-      <RadioGroup
-        value={theme}
-        defaultValue="system"
-        className={cn(
-          'flex gap-0 rounded-3xl border bg-background/65 backdrop-blur-2xl',
-          className
-        )}
-      >
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Label
-              htmlFor="light"
-              className="flex flex-col items-center justify-between rounded-full bg-popover p-2 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:bg-accent"
-              onClick={() => setTheme('light')}
-            >
-              <RadioGroupItem
-                value="light"
-                id="light"
-                className="sr-only"
-                aria-label="light theme"
-              />
-              <Sun className={cn('size-4', iconClassName)} />
-            </Label>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" className="text-xs" showArrow={true}>
-            <p>Light</p>
-          </TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Label
-              htmlFor="dark"
-              className="flex flex-col items-center justify-between rounded-full bg-popover p-2 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:bg-accent"
-              onClick={() => setTheme('dark')}
-            >
-              <RadioGroupItem
-                value="dark"
-                id="dark"
-                className="sr-only"
-                aria-label="dark theme"
-              />
-              <Moon className={cn('size-4', iconClassName)} />
-            </Label>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" className="text-xs" showArrow={true}>
-            <p>Dark</p>
-          </TooltipContent>
-        </Tooltip>
-
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Label
-              htmlFor="system"
-              className="flex flex-col items-center justify-between rounded-full bg-popover p-2 hover:bg-accent hover:text-accent-foreground [&:has([data-state=checked])]:bg-accent"
-              onClick={() => setTheme('system')}
-            >
-              <RadioGroupItem
-                value="system"
-                id="system"
-                className="sr-only"
-                aria-label="system theme"
-              />
-              <LaptopIcon className={cn('size-4', iconClassName)} />
-            </Label>
-          </TooltipTrigger>
-          <TooltipContent side="bottom" className="text-xs" showArrow={true}>
-            <p>System</p>
-          </TooltipContent>
-        </Tooltip>
-      </RadioGroup>
-    </TooltipProvider>
-  )
-}

package/src/components/ui/toast.tsx

@@ -1,129 +0,0 @@
-'use client'
-
-import * as ToastPrimitives from '@radix-ui/react-toast'
-import { type VariantProps, cva } from 'class-variance-authority'
-import { X } from 'lucide-react'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-const ToastProvider = ToastPrimitives.Provider
-
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
-
-const toastVariants = cva(
-  'group data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=end]:animate-out data-[swipe=move]:transition-none',
-  {
-    variants: {
-      variant: {
-        default: 'border bg-background text-foreground',
-        destructive:
-          'destructive group border-destructive bg-destructive text-destructive-foreground',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-    },
-  }
-)
-
-const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
-    VariantProps<typeof toastVariants>
->(({ className, variant, ...props }, ref) => {
-  return (
-    <ToastPrimitives.Root
-      ref={ref}
-      className={cn(toastVariants({ variant }), className)}
-      {...props}
-    />
-  )
-})
-Toast.displayName = ToastPrimitives.Root.displayName
-
-const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
-    ref={ref}
-    className={cn(
-      'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
-      className
-    )}
-    {...props}
-  />
-))
-ToastAction.displayName = ToastPrimitives.Action.displayName
-
-const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
-    ref={ref}
-    className={cn(
-      'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
-      className
-    )}
-    toast-close=""
-    {...props}
-  >
-    <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
-))
-ToastClose.displayName = ToastPrimitives.Close.displayName
-
-const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
-    ref={ref}
-    className={cn('text-sm font-semibold', className)}
-    {...props}
-  />
-))
-ToastTitle.displayName = ToastPrimitives.Title.displayName
-
-const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
-    ref={ref}
-    className={cn('text-sm opacity-90', className)}
-    {...props}
-  />
-))
-ToastDescription.displayName = ToastPrimitives.Description.displayName
-
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
-
-type ToastActionElement = React.ReactElement<typeof ToastAction>
-
-export {
-  type ToastProps,
-  type ToastActionElement,
-  ToastProvider,
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-}

package/src/components/ui/toaster.tsx

@@ -1,31 +0,0 @@
-'use client'
-
-import {
-  Toast,
-  ToastClose,
-  ToastDescription,
-  ToastProvider,
-  ToastTitle,
-  ToastViewport,
-} from '@/components/ui/toast'
-import { useToast } from '@/hooks/use-toast'
-
-export function Toaster() {
-  const { toasts } = useToast()
-
-  return (
-    <ToastProvider>
-      {toasts.map(({ id, title, description, action, ...props }) => (
-        <Toast key={id} {...props}>
-          <div className="grid gap-1">
-            {title && <ToastTitle>{title}</ToastTitle>}
-            {description && <ToastDescription>{description}</ToastDescription>}
-          </div>
-          {action}
-          <ToastClose />
-        </Toast>
-      ))}
-      <ToastViewport />
-    </ToastProvider>
-  )
-}

package/src/components/ui/tooltip.tsx

@@ -1,39 +0,0 @@
-'use client'
-
-import * as TooltipPrimitive from '@radix-ui/react-tooltip'
-import * as React from 'react'
-
-import { cn } from '@/lib/utils'
-
-const TooltipProvider = TooltipPrimitive.Provider
-
-const Tooltip = TooltipPrimitive.Root
-
-const TooltipTrigger = TooltipPrimitive.Trigger
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
-    showArrow?: boolean
-  }
->(({ className, sideOffset = 4, showArrow = false, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        'relative z-50 max-w-[280px] rounded-lg border border-border bg-popover px-3 py-1.5 text-sm text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        className
-      )}
-      {...props}
-    >
-      {props.children}
-      {showArrow && (
-        <TooltipPrimitive.Arrow className="-my-px fill-popover drop-shadow-[0_1px_0_hsl(var(--border))]" />
-      )}
-    </TooltipPrimitive.Content>
-  </TooltipPrimitive.Portal>
-))
-TooltipContent.displayName = TooltipPrimitive.Content.displayName
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }

package/src/components/utils/ConditionalLink.tsx

@@ -1,46 +0,0 @@
-// components/UnstyledLink.tsx
-import { cn } from '@/lib/utils'
-import Link, { LinkProps } from 'next/link'
-
-export type UnstyledLinkProps = {
-  href: string
-  children: React.ReactNode
-  openNewTab?: boolean
-  className?: string
-} & React.ComponentPropsWithoutRef<'a'> &
-  LinkProps
-
-export default function CLink({
-  children,
-  href,
-  openNewTab,
-  className,
-  ...rest
-}: UnstyledLinkProps) {
-  const isNewTab =
-    openNewTab !== undefined
-      ? openNewTab
-      : href && !href.startsWith('/') && !href.startsWith('#')
-
-  if (!isNewTab) {
-    return (
-      <Link href={href}>
-        <a {...rest} className={className}>
-          {children}
-        </a>
-      </Link>
-    )
-  }
-
-  return (
-    <a
-      target="_blank"
-      rel="noopener noreferrer"
-      href={href}
-      {...rest}
-      className={cn(className, 'cursor-newtab')}
-    >
-      {children}
-    </a>
-  )
-}

package/src/components/utils/Image.tsx

@@ -1,57 +0,0 @@
-import NextImageComponent from 'next/image'
-import type React from 'react'
-import type { ImgProps } from '@/types'
-import { cleanSrc, shimmer, svgToBase64 } from '@/lib/utils'
-// auto generate placeholder image
-
-function Img({ src, width, height, alt, ...props }: ImgProps) {
-  return (
-    <NextImageComponent
-      width={width || 500}
-      height={height || width || 300}
-      alt={
-        alt ||
-        src.substring(src.lastIndexOf('/') + 1).slice(0, 20) ||
-        'Picture Element'
-      }
-      src={cleanSrc(src as string)}
-      draggable="false"
-      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-      {...(props as any)}
-    />
-  )
-}
-
-export const Image: React.FC<ImgProps> = ({ placeholder, ...props }) => {
-  const imgComp: Record<string, React.ReactNode> = {
-    blur: <BlurImg {...props} />,
-    shimmer: (
-      <Img
-        {...props}
-        placeholder={`data:image/svg+xml;base64,${svgToBase64(
-          shimmer(500, 300)
-        )}`}
-        alt={props.alt || ''}
-      />
-    ),
-  }
-  return (
-    (placeholder && imgComp[placeholder]) || (
-      <Img placeholder={placeholder} {...props} alt={props.alt || ''} />
-    )
-  )
-}
-
-const BlurImg = async (props: ImgProps) => {
-  const blurData = await import('@/actions/placeholder').then((f) =>
-    f.getPlaceholderImage(props.src)
-  )
-  return (
-    <Img
-      placeholder="blur"
-      blurDataURL={blurData}
-      alt={props.alt || ''}
-      {...props}
-    />
-  )
-}

package/src/components/utils/Img.tsx

@@ -1,104 +0,0 @@
-'use client'
-import { useState } from 'react'
-import { Skeleton } from '@/components/ui/skeleton'
-import { useLazyLoad } from '@/hooks/use-lazy-load'
-import { cn } from '@/lib/utils'
-// lazy loads imgs with a placeholder on the client side
-// does not optimizes images, just lazy loads them client side with a skeleton placeholder
-interface ResponsiveImageProps
-  extends React.ImgHTMLAttributes<HTMLImageElement> {
-  src: string
-  alt: string
-  width: number
-  height: number
-  className?: string
-  skeletonClassName?: string
-}
-
-export function Img({
-  src,
-  alt,
-  width,
-  height,
-  className = '',
-  skeletonClassName = '',
-  ...restProps
-}: ResponsiveImageProps) {
-  const [imageRef, isInView] = useLazyLoad()
-  const [isLoaded, setIsLoaded] = useState(false)
-  const [hasError, setHasError] = useState(false)
-  const aspectRatio = `${width} / ${height}`
-  const showAltText = width > 100 && height > 100
-
-  return (
-    <div
-      ref={imageRef}
-      className={cn('relative w-full overflow-hidden', className)}
-      style={{
-        aspectRatio: aspectRatio,
-        maxWidth: `${width}px`,
-      }}
-    >
-      {/* fallback for users with JS disabled */}
-      <noscript>
-        <img
-          {...restProps}
-          src={src}
-          alt={alt}
-          width={width}
-          height={height}
-          className="absolute left-0 top-0 h-full w-full object-cover"
-        />
-      </noscript>
-
-      {isInView ? (
-        <img
-          {...restProps}
-          src={src}
-          alt={alt}
-          width={width}
-          height={height}
-          className={cn(
-            'absolute left-0 top-0 h-full w-full object-cover transition-opacity duration-300',
-            isLoaded && !hasError ? 'opacity-100' : 'opacity-0'
-          )}
-          onLoad={() => setIsLoaded(true)}
-          onError={() => setHasError(true)}
-          loading="lazy"
-        />
-      ) : null}
-      {!isLoaded && (
-        <Skeleton
-          className={cn(
-            'absolute left-0 top-0 h-full w-full rounded-none',
-            skeletonClassName,
-            hasError && '[animation-play-state:paused]'
-          )}
-        />
-      )}
-      {hasError && (
-        <div className="absolute inset-0 flex flex-col items-center justify-center text-red-600">
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="24"
-            height="24"
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            className="h-[30%] max-h-[40px] min-h-[30px] w-[30%] min-w-[30px] max-w-[40px]"
-          >
-            <circle cx="12" cy="12" r="10"></circle>
-            <line x1="12" y1="8" x2="12" y2="12"></line>
-            <line x1="12" y1="16" x2="12.01" y2="16"></line>
-          </svg>
-          {showAltText && (
-            <span className="mt-2 px-2 text-center text-sm">{alt}</span>
-          )}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/utils/Spinner.tsx

@@ -1,29 +0,0 @@
-import { Icons } from '@/components/utils/icons'
-import { cn } from '@/lib/utils'
-// a simple spinner fallback for suspanse components
-export const SuspanseFallback = ({
-  className,
-  spinnerClassName,
-}: {
-  className?: string
-  spinnerClassName?: string
-}) => {
-  if (!Icons?.spinner)
-    return (
-      <div className={cn('grid h-full w-full place-items-center', className)}>
-        <div
-          className={cn(
-            'size-10 animate-spin rounded-full border-2 border-primary border-t-transparent',
-            spinnerClassName
-          )}
-        />
-      </div>
-    )
-  return (
-    <div className={cn('grid h-full w-full place-items-center', className)}>
-      <Icons.spinner
-        className={cn('size-10 animate-spin text-primary', spinnerClassName)}
-      />
-    </div>
-  )
-}