@sybilion/uilib 1.0.20

package/src/components/ui/DraggingButton/DraggingButton.tsx

@@ -0,0 +1,55 @@
+import cn from 'classnames';
+import React, { ReactNode, forwardRef } from 'react';
+
+import S from './DraggingButton.styl';
+
+interface DraggingButtonProps extends Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'style' | 'title' | 'className'
+> {
+  top?: string;
+  left?: string;
+  className?: string;
+  icon: ReactNode;
+  title: string;
+  isDragging: boolean;
+  size?: 'sm' | 'md' | 'lg';
+}
+
+export const DraggingButton = forwardRef<
+  HTMLButtonElement,
+  DraggingButtonProps
+>(
+  (
+    {
+      top = 0,
+      left,
+      className,
+      icon,
+      title,
+      isDragging,
+      size = 'md',
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        ref={ref}
+        className={cn(
+          S.root,
+          S[`size-${size}`],
+          isDragging && S.dragging,
+          className,
+        )}
+        title={title}
+        style={{ top, ...(left && { left }) }}
+        {...props}
+      >
+        {icon}
+      </button>
+    );
+  },
+);
+
+DraggingButton.displayName = 'DraggingButton';

package/src/components/ui/Drawer/Drawer.styl

@@ -0,0 +1,123 @@
+@import 'lib/theme.styl'
+
+$sm = 640px
+$md = 768px
+
+.overlay
+  position fixed
+  inset 0
+  z-index 50
+  background-color rgba(0, 0, 0, 0.5)
+  backface-visibility hidden
+
+  &[data-state="open"]
+    animation drawerFadeIn 150ms ease-out
+
+  &[data-state="closed"]
+    animation drawerFadeOut 150ms ease-in
+
+.content
+  position fixed
+  z-index 50
+  display flex
+  flex-direction column
+  height auto
+  background var(--background)
+
+  &[data-vaul-drawer-direction="top"]
+    left 0
+    right 0
+    top 0
+    margin-bottom 6rem
+    max-height 80vh
+    border-bottom 1px solid var(--border)
+    border-radius 0 0 0.5rem 0.5rem
+
+  &[data-vaul-drawer-direction="bottom"]
+    left 0
+    right 0
+    bottom 0
+    margin-top 6rem
+    max-height 80vh
+    border-top 1px solid var(--border)
+    border-radius 0.5rem 0.5rem 0 0
+
+  &[data-vaul-drawer-direction="right"]
+    top 0
+    right 0
+    bottom 0
+    width 75%
+    border-left 1px solid var(--border)
+
+    @media (min-width: $sm)
+      max-width 24rem
+
+  &[data-vaul-drawer-direction="left"]
+    top 0
+    left 0
+    bottom 0
+    width 75%
+    border-right 1px solid var(--border)
+
+    @media (min-width: $sm)
+      max-width 24rem
+
+.handle
+  margin-left auto
+  margin-right auto
+  margin-top var(--p-4)
+  display none
+  height 0.5rem
+  width 100px
+  flex-shrink 0
+  border-radius 9999px
+  background var(--muted)
+
+.content[data-vaul-drawer-direction="bottom"] .handle
+  display block
+
+.header
+  display flex
+  flex-direction column
+  gap 0.125rem
+  padding var(--p-4)
+
+  @media (min-width: $md)
+    gap 0.375rem
+
+.content[data-vaul-drawer-direction="left"] .header,
+.content[data-vaul-drawer-direction="right"] .header
+  @media (min-width: $md)
+    text-align left
+
+.content[data-vaul-drawer-direction="bottom"] .header,
+.content[data-vaul-drawer-direction="top"] .header
+  text-align center
+
+.footer
+  margin-top auto
+  display flex
+  flex-direction column
+  gap var(--p-2)
+  padding var(--p-4)
+
+.title
+  font-weight 600
+  color var(--foreground)
+
+.description
+  font-size 0.875rem
+  line-height 1.25rem
+  color var(--muted-foreground)
+
+@keyframes drawerFadeIn
+  from
+    opacity 0
+  to
+    opacity 1
+
+@keyframes drawerFadeOut
+  from
+    opacity 1
+  to
+    opacity 0

package/src/components/ui/Drawer/Drawer.styl.d.ts

@@ -0,0 +1,15 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'content': string;
+  'description': string;
+  'drawerFadeIn': string;
+  'drawerFadeOut': string;
+  'footer': string;
+  'handle': string;
+  'header': string;
+  'overlay': string;
+  'title': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/Drawer/Drawer.tsx

@@ -0,0 +1,112 @@
+import cn from 'classnames';
+
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import S from './Drawer.styl';
+import type {
+  DrawerCloseProps,
+  DrawerContentProps,
+  DrawerDescriptionProps,
+  DrawerFooterProps,
+  DrawerHeaderProps,
+  DrawerOverlayProps,
+  DrawerPortalProps,
+  DrawerProps,
+  DrawerTitleProps,
+  DrawerTriggerProps,
+} from './Drawer.types';
+
+function Drawer({ ...props }: DrawerProps) {
+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
+}
+
+function DrawerTrigger({ ...props }: DrawerTriggerProps) {
+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
+}
+
+function DrawerPortal({ ...props }: DrawerPortalProps) {
+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
+}
+
+function DrawerClose({ ...props }: DrawerCloseProps) {
+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
+}
+
+function DrawerOverlay({ className, ...props }: DrawerOverlayProps) {
+  return (
+    <DrawerPrimitive.Overlay
+      data-slot="drawer-overlay"
+      className={cn(S.overlay, className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerContent({ className, children, ...props }: DrawerContentProps) {
+  return (
+    <DrawerPortal data-slot="drawer-portal">
+      <DrawerOverlay />
+      <DrawerPrimitive.Content
+        data-slot="drawer-content"
+        className={cn(S.content, className)}
+        {...props}
+      >
+        <div className={S.handle} />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPortal>
+  );
+}
+
+function DrawerHeader({ className, ...props }: DrawerHeaderProps) {
+  return (
+    <div
+      data-slot="drawer-header"
+      className={cn(S.header, className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerFooter({ className, ...props }: DrawerFooterProps) {
+  return (
+    <div
+      data-slot="drawer-footer"
+      className={cn(S.footer, className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerTitle({ className, ...props }: DrawerTitleProps) {
+  return (
+    <DrawerPrimitive.Title
+      data-slot="drawer-title"
+      className={cn(S.title, className)}
+      {...props}
+    />
+  );
+}
+
+function DrawerDescription({ className, ...props }: DrawerDescriptionProps) {
+  return (
+    <DrawerPrimitive.Description
+      data-slot="drawer-description"
+      className={cn(S.description, className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

package/src/components/ui/Drawer/Drawer.types.ts

@@ -0,0 +1,35 @@
+import type {
+  DialogCloseProps,
+  DialogTriggerProps,
+} from '@radix-ui/react-dialog';
+
+export interface DrawerProps {
+  shouldScaleBackground?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+  dismissible?: boolean;
+  noBodyStyles?: boolean;
+  children?: React.ReactNode;
+}
+
+export interface DrawerTriggerProps extends DialogTriggerProps {}
+
+export interface DrawerPortalProps {
+  children?: React.ReactNode;
+  container?: HTMLElement;
+}
+
+export interface DrawerCloseProps extends DialogCloseProps {}
+
+export interface DrawerOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface DrawerContentProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export interface DrawerTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}
+
+export interface DrawerDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}

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

@@ -0,0 +1,13 @@
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+} from './Drawer';
+export type { DrawerProps } from './Drawer.types';

package/src/components/ui/DropZone/DropZone.styl

@@ -0,0 +1,66 @@
+@import 'lib/theme.styl'
+
+.root
+  display flex
+  flex-direction column
+  gap var(--p-2)
+
+.dropArea
+  position relative
+  border 2px dashed var(--border)
+  border-radius var(--p-4)
+  padding var(--p-4)
+  text-align center
+  cursor pointer
+  transition all 0.2s ease
+  background-color var(--page-color)
+
+  & label::before
+    content ''
+    position absolute
+    top 0
+    left 0
+    width 100%
+    height 100%
+    border-radius var(--p-4)
+
+  &:hover:not(.disabled)
+    border-color var(--primary-color)
+    background-color var(--page-color-alpha-800)
+
+  &.isDragging
+    position fixed
+    top 0
+    left 0
+    width 100%
+    height 100%
+    z-index 9999
+    display flex
+    align-items center
+    justify-content center
+
+    border-color var(--primary-color)
+    background-color var(--page-color-alpha-800)
+
+  &:hover:not(.disabled)
+  &.isDragging
+    border 2px dashed var(--muted-border)
+
+    :global(.dark) &
+      background-color var(--background)
+
+  &.disabled
+    opacity 0.6
+    cursor not-allowed
+
+.fileInput
+  display none
+
+.label
+  cursor pointer
+  color var(--text-color-secondary)
+
+.error
+  color var(--error-color)
+  font-size 0.875rem
+  padding var(--p-1) var(--p-2)

package/src/components/ui/DropZone/DropZone.styl.d.ts

@@ -0,0 +1,13 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'disabled': string;
+  'dropArea': string;
+  'error': string;
+  'fileInput': string;
+  'isDragging': string;
+  'label': string;
+  'root': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/DropZone/DropZone.tsx

@@ -0,0 +1,188 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import S from './DropZone.styl';
+
+interface DropZoneBaseProps {
+  accept: string;
+  label: string;
+  error?: string | null;
+  disabled?: boolean;
+  ghost?: boolean;
+  id?: string;
+  className?: string;
+}
+
+interface DropZoneSingleProps extends DropZoneBaseProps {
+  multiple?: false;
+  onFile: (file: File) => void;
+}
+
+interface DropZoneMultiProps extends DropZoneBaseProps {
+  multiple: true;
+  onFiles: (files: File[]) => void;
+}
+
+export type DropZoneProps = DropZoneSingleProps | DropZoneMultiProps;
+
+function matchesAcceptPart(file: File, part: string): boolean {
+  const p = part.trim().toLowerCase();
+  if (!p) return false;
+  if (p.startsWith('.')) {
+    return file.name.toLowerCase().endsWith(p);
+  }
+  if (p.includes('/')) {
+    const t = file.type.toLowerCase();
+    if (p.endsWith('/*')) {
+      const prefix = p.slice(0, -1);
+      return t.startsWith(prefix);
+    }
+    return t === p;
+  }
+  return false;
+}
+
+function matchesAccept(file: File, accept: string): boolean {
+  const trimmed = accept.trim();
+  if (!trimmed) return true;
+  const parts = trimmed
+    .split(',')
+    .map(s => s.trim())
+    .filter(Boolean);
+  if (parts.length === 0) return true;
+  return parts.some(part => matchesAcceptPart(file, part));
+}
+
+export function DropZone(props: DropZoneProps) {
+  const {
+    accept,
+    label,
+    error,
+    disabled = false,
+    ghost = false,
+    id,
+    className,
+  } = props;
+  const [isDragging, setIsDragging] = useState(false);
+  const dropAreaRef = useRef<HTMLDivElement>(null);
+  const inputId =
+    id || `dropzone-file-input-${Math.random().toString(36).substr(2, 9)}`;
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      setIsDragging(false);
+
+      if (disabled) return;
+
+      const list = Array.from(e.dataTransfer.files).filter(f =>
+        matchesAccept(f, accept),
+      );
+
+      if (props.multiple === true) {
+        if (list.length > 0) {
+          props.onFiles(list);
+        }
+      } else {
+        const file = list[0];
+        if (file) {
+          props.onFile(file);
+        }
+      }
+    },
+    [accept, disabled, props],
+  );
+
+  const handleFileInput = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      if (disabled) return;
+      const raw = e.target.files;
+      if (!raw?.length) return;
+
+      const list = Array.from(raw).filter(f => matchesAccept(f, accept));
+
+      if (props.multiple === true) {
+        if (list.length > 0) {
+          props.onFiles(list);
+        }
+      } else {
+        const file = list[0];
+        if (file) {
+          props.onFile(file);
+        }
+      }
+      e.target.value = '';
+    },
+    [accept, disabled, props],
+  );
+
+  useEffect(() => {
+    // Find closest dialog or fall back to body
+    const dialog = dropAreaRef.current?.closest('[role="dialog"]');
+    const targetElement = (dialog as HTMLElement) || document.body;
+
+    const handleGlobalDragOver = (e: DragEvent) => {
+      e.preventDefault();
+      setIsDragging(true);
+    };
+
+    const handleGlobalDragLeave = (e: DragEvent) => {
+      // Only hide if we're leaving the target element itself (not a child)
+      // relatedTarget can be null when leaving the window
+      if (
+        !e.relatedTarget ||
+        !targetElement.contains(e.relatedTarget as Node)
+      ) {
+        setIsDragging(false);
+      }
+    };
+
+    const handleGlobalDrop = () => {
+      setIsDragging(false);
+    };
+
+    targetElement.addEventListener('dragover', handleGlobalDragOver);
+    targetElement.addEventListener('dragleave', handleGlobalDragLeave);
+    targetElement.addEventListener('drop', handleGlobalDrop);
+
+    return () => {
+      targetElement.removeEventListener('dragover', handleGlobalDragOver);
+      targetElement.removeEventListener('dragleave', handleGlobalDragLeave);
+      targetElement.removeEventListener('drop', handleGlobalDrop);
+    };
+  }, []);
+
+  const shouldShowDropArea = !ghost || isDragging;
+  const multiple = props.multiple === true;
+
+  return (
+    <div className={`${S.root} ${className || ''}`}>
+      {shouldShowDropArea && (
+        <div
+          ref={dropAreaRef}
+          className={`${S.dropArea} ${isDragging ? S.isDragging : ''} ${disabled ? S.disabled : ''}`}
+          onDrop={handleDrop}
+        >
+          <input
+            type="file"
+            accept={accept}
+            multiple={multiple}
+            onChange={handleFileInput}
+            className={S.fileInput}
+            id={inputId}
+            disabled={disabled}
+          />
+          <label
+            htmlFor={inputId}
+            className={S.label}
+            style={{
+              cursor: disabled ? 'not-allowed' : 'pointer',
+            }}
+          >
+            {label}
+          </label>
+        </div>
+      )}
+      {error && <div className={S.error}>{error}</div>}
+    </div>
+  );
+}