sparkdesign 0.4.6 → 0.4.8

package/cli/registry/basic/dialog.tsx

@@ -0,0 +1,164 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { MOTION_FADE, MOTION_SLIDE_UP } from '@/lib/motion'
+import { CloseLine } from './icons-inline'
+import { getThemeFromDocument } from './theme-from-document'
+
+const Dialog = DialogPrimitive.Root
+const DialogTrigger = DialogPrimitive.Trigger
+const DialogPortal = DialogPrimitive.Portal
+const DialogClose = DialogPrimitive.Close
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay ref={ref} asChild {...props}>
+    <motion.div
+      className={cn('fixed inset-0 z-50 bg-bg-mask/60', className)}
+      {...MOTION_FADE}
+    />
+  </DialogPrimitive.Overlay>
+))
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const contentVariants = cva(
+  'font-sans fixed left-1/2 top-1/2 z-50 w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-bg-base text-text shadow-lg p-6 outline-none',
+  {
+    variants: {
+      size: {
+        sm: 'max-w-sm',
+        default: 'max-w-lg',
+        lg: 'max-w-2xl',
+        xl: 'max-w-4xl',
+      },
+    },
+    defaultVariants: { size: 'default' },
+  },
+)
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof contentVariants> {
+  size?: 'sm' | 'default' | 'lg' | 'xl'
+  /** Hide the built-in top-right close button. */
+  hideCloseButton?: boolean
+  /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
+  dataStyle?: string
+  dataTheme?: string
+}
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DialogContentProps
+>(
+  (
+    {
+      className,
+      children,
+      size = 'default',
+      hideCloseButton = false,
+      dataStyle,
+      dataTheme,
+      ...props
+    },
+    ref,
+  ) => {
+    const fromDoc = getThemeFromDocument()
+    const dataProps =
+      dataStyle !== undefined
+        ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+        : fromDoc
+    return (
+      <DialogPortal>
+        <div style={{ display: 'contents' }} {...dataProps}>
+          <DialogOverlay />
+          <DialogPrimitive.Content ref={ref} asChild {...props}>
+            <motion.div
+              className={cn(contentVariants({ size }), className)}
+              {...MOTION_SLIDE_UP}
+            >
+              {children}
+              {!hideCloseButton && (
+                <DialogPrimitive.Close
+                  className={cn(
+                    'absolute right-4 top-4 inline-flex size-7 items-center justify-center rounded-md text-text-tertiary opacity-70 transition-colors',
+                    'hover:bg-fill-secondary hover:text-text hover:opacity-100',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-border',
+                    'disabled:pointer-events-none',
+                  )}
+                >
+                  <CloseLine className="size-4" />
+                  <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+              )}
+            </motion.div>
+          </DialogPrimitive.Content>
+        </div>
+      </DialogPortal>
+    )
+  },
+)
+DialogContent.displayName = DialogPrimitive.Content.displayName
+
+const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col gap-2 text-left', className)} {...props} />
+  ),
+)
+DialogHeader.displayName = 'DialogHeader'
+
+const DialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', className)}
+      {...props}
+    />
+  ),
+)
+DialogFooter.displayName = 'DialogFooter'
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('font-sans text-base font-medium leading-6 text-text', className)}
+    {...props}
+  />
+))
+DialogTitle.displayName = DialogPrimitive.Title.displayName
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm leading-6 text-text-tertiary', className)}
+    {...props}
+  />
+))
+DialogDescription.displayName = DialogPrimitive.Description.displayName
+
+export type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>
+export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  contentVariants as dialogContentVariants,
+}

package/cli/registry/basic/direction.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+
+export type Direction = 'ltr' | 'rtl'
+
+const DirectionContext = React.createContext<Direction>('ltr')
+
+export interface DirectionProviderProps extends React.HTMLAttributes<HTMLDivElement> {
+  dir?: Direction
+}
+
+function DirectionProvider({ dir = 'ltr', children, ...props }: DirectionProviderProps) {
+  return (
+    <DirectionContext.Provider value={dir}>
+      <div dir={dir} {...props}>
+        {children}
+      </div>
+    </DirectionContext.Provider>
+  )
+}
+
+function useDirection() {
+  return React.useContext(DirectionContext)
+}
+
+export { DirectionProvider, useDirection }

package/cli/registry/basic/drawer.tsx

@@ -0,0 +1,162 @@
+import * as React from 'react'
+import { motion } from 'framer-motion'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '@/lib/utils'
+import { MOTION_FADE, MOTION_DURATION, MOTION_EASE } from '@/lib/motion'
+import { CloseLine } from './icons-inline'
+import { getThemeFromDocument } from './theme-from-document'
+
+const Drawer = DialogPrimitive.Root
+const DrawerTrigger = DialogPrimitive.Trigger
+const DrawerClose = DialogPrimitive.Close
+const DrawerPortal = DialogPrimitive.Portal
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay ref={ref} asChild {...props}>
+    <motion.div
+      className={cn('fixed inset-0 z-50 bg-bg-mask/60', className)}
+      {...MOTION_FADE}
+    />
+  </DialogPrimitive.Overlay>
+))
+DrawerOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const drawerVariants = cva(
+  'fixed z-50 gap-4 bg-bg-base text-text shadow-lg border-border p-6 outline-none flex flex-col',
+  {
+    variants: {
+      side: {
+        top: 'inset-x-0 top-0 border-b',
+        bottom: 'inset-x-0 bottom-0 border-t',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+        right: 'inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+      },
+    },
+    defaultVariants: { side: 'right' },
+  },
+)
+
+const sideOffsetMap = {
+  top: { initial: { y: '-100%' }, animate: { y: 0 }, exit: { y: '-100%' } },
+  bottom: { initial: { y: '100%' }, animate: { y: 0 }, exit: { y: '100%' } },
+  left: { initial: { x: '-100%' }, animate: { x: 0 }, exit: { x: '-100%' } },
+  right: { initial: { x: '100%' }, animate: { x: 0 }, exit: { x: '100%' } },
+} as const
+
+export interface DrawerContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>,
+    VariantProps<typeof drawerVariants> {
+  side?: 'top' | 'right' | 'bottom' | 'left'
+  showCloseButton?: boolean
+  /** When provided (e.g. from ThemeStyleProvider), used for portal wrapper */
+  dataStyle?: string
+  dataTheme?: string
+}
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  DrawerContentProps
+>(
+  (
+    { side = 'right', className, children, showCloseButton = true, dataStyle, dataTheme, ...props },
+    ref,
+  ) => {
+    const fromDoc = getThemeFromDocument()
+    const dataProps =
+      dataStyle !== undefined
+        ? { 'data-style': dataStyle, 'data-theme': dataTheme ?? fromDoc['data-theme'] ?? '' }
+        : fromDoc
+    const motionProps = sideOffsetMap[side]
+    return (
+      <DrawerPortal>
+        <div style={{ display: 'contents' }} {...dataProps}>
+          <DrawerOverlay />
+          <DialogPrimitive.Content ref={ref} asChild {...props}>
+            <motion.div
+              className={cn(drawerVariants({ side }), className)}
+              initial={motionProps.initial}
+              animate={motionProps.animate}
+              exit={motionProps.exit}
+              transition={{ duration: MOTION_DURATION.slow, ease: MOTION_EASE.standard }}
+            >
+              {children}
+              {showCloseButton && (
+                <DialogPrimitive.Close
+                  className={cn(
+                    'absolute right-4 top-4 inline-flex size-7 items-center justify-center rounded-md text-text-tertiary opacity-70 transition-colors',
+                    'hover:bg-fill-secondary hover:text-text hover:opacity-100',
+                    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-border',
+                    'disabled:pointer-events-none',
+                  )}
+                >
+                  <CloseLine className="size-4" />
+                  <span className="sr-only">Close</span>
+                </DialogPrimitive.Close>
+              )}
+            </motion.div>
+          </DialogPrimitive.Content>
+        </div>
+      </DrawerPortal>
+    )
+  },
+)
+DrawerContent.displayName = DialogPrimitive.Content.displayName
+
+const DrawerHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex flex-col gap-1.5', className)} {...props} />
+  ),
+)
+DrawerHeader.displayName = 'DrawerHeader'
+
+const DrawerFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('mt-auto flex flex-col gap-2', className)} {...props} />
+  ),
+)
+DrawerFooter.displayName = 'DrawerFooter'
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-base font-medium leading-6 text-text', className)}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DialogPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-sm leading-6 text-text-tertiary', className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DialogPrimitive.Description.displayName
+
+export type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>
+export type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+  drawerVariants,
+}

package/cli/registry/basic/dropdown-menu.tsx

@@ -3,13 +3,10 @@ import { motion } from 'framer-motion'
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'
 import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/utils'
+import { MOTION_SCALE_IN } from '@/lib/motion'
 import { ArrowRightLine, CheckLine } from './icons-inline'
 import { getThemeFromDocument } from './theme-from-document'
 
-/** 取消 outline/ring，避免与全局 *:focus-visible 冲突产生偶现 focus 环 */
-const FOCUS_RESET =
-  'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:!outline-none focus-visible:!ring-0 focus-visible:outline-offset-0 focus-visible:!outline-offset-0 focus-visible:ring-offset-0 focus-visible:!ring-offset-0'
-
 const DropdownMenu = DropdownMenuPrimitive.Root
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 const DropdownMenuGroup = DropdownMenuPrimitive.Group
@@ -46,9 +43,7 @@ const DropdownMenuContent = React.forwardRef<
           {...props}
         >
           <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            transition={{ duration: 0.15, ease: [0.4, 0, 0.2, 1] }}
+            {...MOTION_SCALE_IN}
           >
             {children}
           </motion.div>

package/cli/registry/basic/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-fill-tertiary text-text [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-text-tertiary [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}