@codefast/ui 0.0.49 → 0.0.52

package/src/react/dialog.tsx

@@ -16,18 +16,14 @@ const Dialog = DialogPrimitive.Root;
  * Component: DialogTrigger
  * -------------------------------------------------------------------------- */
 
-type DialogTriggerProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Trigger
->;
+type DialogTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
 const DialogTrigger = DialogPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DialogClose
  * -------------------------------------------------------------------------- */
 
-type DialogCloseProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Close
->;
+type DialogCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
 const DialogClose = DialogPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
@@ -35,32 +31,29 @@ const DialogClose = DialogPrimitive.Close;
  * -------------------------------------------------------------------------- */
 
 type DialogContentElement = React.ElementRef<typeof DialogPrimitive.Content>;
-type DialogContentProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Content
->;
-
-const DialogContent = React.forwardRef<
-  DialogContentElement,
-  DialogContentProps
->(({ children, className, ...props }, ref) => (
-  <DialogPrimitive.Portal>
-    <DialogPrimitive.Overlay className="data-[state=open]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        'bg-background data-[state=open]:animate-in data-[state=open]:animate-duration-200 data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none">
-        <Cross2Icon className="size-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPrimitive.Portal>
-));
+type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>;
+
+const DialogContent = React.forwardRef<DialogContentElement, DialogContentProps>(
+  ({ children, className, ...props }, ref) => (
+    <DialogPrimitive.Portal>
+      <DialogPrimitive.Overlay className="data-[state=open]:animate-duration-200 data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out fixed inset-0 z-50 bg-black/80" />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'bg-background data-[state=open]:animate-in data-[state=open]:animate-duration-200 data-[state=open]:fade-in data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition hover:opacity-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none">
+          <Cross2Icon className="size-4" />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+  ),
+);
 
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
@@ -70,19 +63,8 @@ DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
-function DialogHeader({
-  className,
-  ...props
-}: DialogHeaderProps): React.JSX.Element {
-  return (
-    <div
-      className={cn(
-        'flex flex-col space-y-1.5 text-center sm:text-left',
-        className,
-      )}
-      {...props}
-    />
-  );
+function DialogHeader({ className, ...props }: DialogHeaderProps): React.JSX.Element {
+  return <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -91,19 +73,8 @@ function DialogHeader({
 
 type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
-function DialogFooter({
-  className,
-  ...props
-}: DialogFooterProps): React.JSX.Element {
-  return (
-    <div
-      className={cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-        className,
-      )}
-      {...props}
-    />
-  );
+function DialogFooter({ className, ...props }: DialogFooterProps): React.JSX.Element {
+  return <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -111,22 +82,15 @@ function DialogFooter({
  * -------------------------------------------------------------------------- */
 
 type DialogTitleElement = React.ElementRef<typeof DialogPrimitive.Title>;
-type DialogTitleProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Title
->;
+type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
 
-const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(
-  ({ className, ...props }, ref) => (
-    <DialogPrimitive.Title
-      ref={ref}
-      className={cn(
-        'text-lg font-semibold leading-none tracking-tight',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
+const DialogTitle = React.forwardRef<DialogTitleElement, DialogTitleProps>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
 
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
@@ -134,23 +98,14 @@ DialogTitle.displayName = DialogPrimitive.Title.displayName;
  * Component: DialogDescription
  * -------------------------------------------------------------------------- */
 
-type DialogDescriptionElement = React.ElementRef<
-  typeof DialogPrimitive.Description
->;
-type DialogDescriptionProps = React.ComponentPropsWithoutRef<
-  typeof DialogPrimitive.Description
->;
-
-const DialogDescription = React.forwardRef<
-  DialogDescriptionElement,
-  DialogDescriptionProps
->(({ className, ...props }, ref) => (
-  <DialogPrimitive.Description
-    ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
-    {...props}
-  />
-));
+type DialogDescriptionElement = React.ElementRef<typeof DialogPrimitive.Description>;
+type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+
+const DialogDescription = React.forwardRef<DialogDescriptionElement, DialogDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <DialogPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  ),
+);
 
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 

package/src/react/drawer.tsx

@@ -10,34 +10,22 @@ import { cn } from '../lib/utils';
 
 type DrawerProps = React.ComponentProps<typeof DrawerPrimitive.Root>;
 
-function Drawer({
-  shouldScaleBackground = true,
-  ...props
-}: DrawerProps): React.JSX.Element {
-  return (
-    <DrawerPrimitive.Root
-      shouldScaleBackground={shouldScaleBackground}
-      {...props}
-    />
-  );
+function Drawer({ shouldScaleBackground = true, ...props }: DrawerProps): React.JSX.Element {
+  return <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
  * Component: DrawerTrigger
  * -------------------------------------------------------------------------- */
 
-type DrawerTriggerProps = React.ComponentPropsWithoutRef<
-  typeof DrawerPrimitive.Trigger
->;
+type DrawerTriggerProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger>;
 const DrawerTrigger = DrawerPrimitive.Trigger;
 
 /* -----------------------------------------------------------------------------
  * Component: DrawerClose
  * -------------------------------------------------------------------------- */
 
-type DrawerCloseProps = React.ComponentPropsWithoutRef<
-  typeof DrawerPrimitive.Close
->;
+type DrawerCloseProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>;
 const DrawerClose = DrawerPrimitive.Close;
 
 /* -----------------------------------------------------------------------------
@@ -45,29 +33,26 @@ const DrawerClose = DrawerPrimitive.Close;
  * -------------------------------------------------------------------------- */
 
 type DrawerContentElement = React.ElementRef<typeof DrawerPrimitive.Content>;
-type DrawerContentProps = React.ComponentPropsWithoutRef<
-  typeof DrawerPrimitive.Content
->;
-
-const DrawerContent = React.forwardRef<
-  DrawerContentElement,
-  DrawerContentProps
->(({ children, className, ...props }, ref) => (
-  <DrawerPrimitive.Portal>
-    <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
-    <DrawerPrimitive.Content
-      ref={ref}
-      className={cn(
-        'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl border',
-        className,
-      )}
-      {...props}
-    >
-      <div className="bg-muted mx-auto mt-4 h-2 w-24 rounded-full" />
-      {children}
-    </DrawerPrimitive.Content>
-  </DrawerPrimitive.Portal>
-));
+type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>;
+
+const DrawerContent = React.forwardRef<DrawerContentElement, DrawerContentProps>(
+  ({ children, className, ...props }, ref) => (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Overlay className="fixed inset-0 z-50 bg-black/80" />
+      <DrawerPrimitive.Content
+        ref={ref}
+        className={cn(
+          'bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-xl border',
+          className,
+        )}
+        {...props}
+      >
+        <div className="bg-muted mx-auto mt-4 h-2 w-24 rounded-full" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Portal>
+  ),
+);
 
 DrawerContent.displayName = 'DrawerContent';
 
@@ -77,16 +62,8 @@ DrawerContent.displayName = 'DrawerContent';
 
 type DrawerHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
-function DrawerHeader({
-  className,
-  ...props
-}: DrawerHeaderProps): React.JSX.Element {
-  return (
-    <div
-      className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)}
-      {...props}
-    />
-  );
+function DrawerHeader({ className, ...props }: DrawerHeaderProps): React.JSX.Element {
+  return <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -95,16 +72,8 @@ function DrawerHeader({
 
 type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;
 
-function DrawerFooter({
-  className,
-  ...props
-}: DrawerFooterProps): React.JSX.Element {
-  return (
-    <div
-      className={cn('mt-auto flex flex-col gap-2 p-4', className)}
-      {...props}
-    />
-  );
+function DrawerFooter({ className, ...props }: DrawerFooterProps): React.JSX.Element {
+  return <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -112,22 +81,15 @@ function DrawerFooter({
  * -------------------------------------------------------------------------- */
 
 type DrawerTitleElement = React.ElementRef<typeof DrawerPrimitive.Title>;
-type DrawerTitleProps = React.ComponentPropsWithoutRef<
-  typeof DrawerPrimitive.Title
->;
+type DrawerTitleProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>;
 
-const DrawerTitle = React.forwardRef<DrawerTitleElement, DrawerTitleProps>(
-  ({ className, ...props }, ref) => (
-    <DrawerPrimitive.Title
-      ref={ref}
-      className={cn(
-        'text-lg font-semibold leading-none tracking-tight',
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
+const DrawerTitle = React.forwardRef<DrawerTitleElement, DrawerTitleProps>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
 
 DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
 
@@ -135,23 +97,14 @@ DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
  * Component: DrawerDescription
  * -------------------------------------------------------------------------- */
 
-type DrawerDescriptionElement = React.ElementRef<
-  typeof DrawerPrimitive.Description
->;
-type DrawerDescriptionProps = React.ComponentPropsWithoutRef<
-  typeof DrawerPrimitive.Description
->;
-
-const DrawerDescription = React.forwardRef<
-  DrawerDescriptionElement,
-  DrawerDescriptionProps
->(({ className, ...props }, ref) => (
-  <DrawerPrimitive.Description
-    ref={ref}
-    className={cn('text-muted-foreground text-sm', className)}
-    {...props}
-  />
-));
+type DrawerDescriptionElement = React.ElementRef<typeof DrawerPrimitive.Description>;
+type DrawerDescriptionProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>;
+
+const DrawerDescription = React.forwardRef<DrawerDescriptionElement, DrawerDescriptionProps>(
+  ({ className, ...props }, ref) => (
+    <DrawerPrimitive.Description ref={ref} className={cn('text-muted-foreground text-sm', className)} {...props} />
+  ),
+);
 
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;