Initial commit

2026-08-07 23:53:15 +05:30
commit 90f14a73b2
222 changed files with 35000 additions and 0 deletions
--- a/src/components/ds/Drawer.jsx
+++ b/src/components/ds/Drawer.jsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
+
+const WIDTHS = {
+  sm: 'w-full sm:w-80',
+  default: 'w-full sm:w-[28rem]',
+  lg: 'w-full sm:w-[36rem]',
+  xl: 'w-full sm:w-[44rem]',
+};
+
+/**
+ * Drawer — an edge-anchored panel for detail views, filters and mobile nav.
+ *
+ * Same header/body/footer contract as Modal, so the two are interchangeable:
+ * a detail view can be a Drawer on desktop and a bottom sheet on mobile without
+ * its contents changing.
+ */
+export function Drawer({
+  open,
+  onOpenChange,
+  title,
+  description,
+  icon: Icon,
+  side = 'right',
+  size = 'default',
+  footer,
+  children,
+  className,
+  /** Hides the header for a fully custom panel (the mobile nav does this). */
+  bare = false,
+}) {
+  const isVertical = side === 'top' || side === 'bottom';
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent
+        side={side}
+        className={cn(
+          'p-0 gap-0 flex flex-col',
+          isVertical ? 'h-auto max-h-[85vh]' : WIDTHS[size],
+          className
+        )}
+      >
+        {!bare && (
+          <SheetHeader className="px-5 pt-5 pb-4 border-b border-border shrink-0 space-y-0 text-left">
+            <div className="flex items-start gap-3">
+              {Icon && (
+                <span className="grid place-items-center w-9 h-9 rounded-xl bg-krow-blue-tint text-krow-blue shrink-0">
+                  <Icon className="w-4.5 h-4.5" aria-hidden="true" />
+                </span>
+              )}
+              <div className="min-w-0">
+                <SheetTitle className="text-title font-heading text-ink-1">{title}</SheetTitle>
+                {description && (
+                  <SheetDescription className="text-body-sm text-ink-3 mt-1">
+                    {description}
+                  </SheetDescription>
+                )}
+              </div>
+            </div>
+          </SheetHeader>
+        )}
+
+        <div className="flex-1 overflow-y-auto px-5 py-5">{children}</div>
+
+        {footer && (
+          <div className="px-5 py-4 border-t border-border bg-surface-subtle shrink-0 flex items-center justify-end gap-2">
+            {footer}
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}