@orsetra/shared-ui 1.0.11 → 1.0.13

package/components/layout/layout-container.tsx

@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation"
 import { MainSidebar, Sidebar, SidebarProvider, useSidebar, type SidebarMode } from "./index"
 import { UserMenu, Button } from "../ui"
 import { getMenuFromPath } from "../../lib/menu-utils"
+import { useIsMobile } from "../../hooks/use-mobile"
 import { Menu } from "lucide-react"
 
 export interface SidebarMenus {
@@ -22,10 +23,19 @@ interface LayoutContainerProps {
 function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expanded' }: LayoutContainerProps) {
   const pathname = usePathname()
   const { setOpen } = useSidebar()
+  const isMobile = useIsMobile()
   const [isMainSidebarOpen, setIsMainSidebarOpen] = useState(false)
   const [currentMenu, setCurrentMenu] = useState<string>("overview")
   const isMinimized = mode === 'minimized'
-  const isHidden = mode === 'hidden'
+  // Force hidden mode on mobile
+  const isHidden = mode === 'hidden' || isMobile
+
+  // Close sidebar on route change (mobile)
+  useEffect(() => {
+    if (isMobile) {
+      setIsMainSidebarOpen(false)
+    }
+  }, [pathname, isMobile])
 
   useEffect(() => {
     const contextualMenu = getMenuFromPath(pathname)
@@ -49,7 +59,7 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
 
   return (
     <div className="flex h-screen w-full bg-white">
-      {/* Sidebar secondaire - caché en mode minimized et hidden */}
+      {/* Desktop sidebar - hidden on mobile (isHidden is true on mobile) */}
       {!isMinimized && !isHidden && (
         <Sidebar 
           currentMenu={currentMenu}
@@ -57,41 +67,27 @@ function LayoutContent({ children, sidebarMenus, user, onSignOut, mode = 'expand
         />
       )}
       
-      {/* MainSidebar - en mode hidden, il s'ouvre comme un overlay */}
-      {!isHidden && (
-        <MainSidebar 
-          isOpen={isMainSidebarOpen}
-          onToggle={handleMainSidebarToggle}
-          onMenuSelect={handleMenuSelect}
-          currentMenu={currentMenu}
-          onSecondarySidebarOpen={handleSecondarySidebarOpen}
-          mode={mode}
-        />
-      )}
-
-      {/* MainSidebar overlay en mode hidden */}
-      {isHidden && (
-        <MainSidebar 
-          isOpen={isMainSidebarOpen}
-          onToggle={handleMainSidebarToggle}
-          onMenuSelect={handleMenuSelect}
-          currentMenu={currentMenu}
-          onSecondarySidebarOpen={handleSecondarySidebarOpen}
-          mode="expanded"
-        />
-      )}
+      {/* MainSidebar - always available, opens as overlay when isHidden */}
+      <MainSidebar 
+        isOpen={isMainSidebarOpen}
+        onToggle={handleMainSidebarToggle}
+        onMenuSelect={handleMenuSelect}
+        currentMenu={currentMenu}
+        onSecondarySidebarOpen={handleSecondarySidebarOpen}
+        mode={isHidden ? "expanded" : mode}
+      />
       
-      <div className="flex-1 flex flex-col">
+      <div className="flex-1 flex flex-col min-w-0">
         <header className="h-14 bg-white border-b border-ui-border flex-shrink-0">
-          <div className="h-full px-6 flex items-center justify-between">
-            {/* Bouton menu - affiché en mode hidden */}
+          <div className="h-full px-4 md:px-6 flex items-center justify-between">
+            {/* Menu button - shown when sidebar is hidden (including on mobile) */}
             {isHidden ? (
               <Button
                 variant="ghost"
                 size="sm"
                 onClick={handleMainSidebarToggle}
                 className="h-8 w-8 p-0 hover:bg-ui-background text-text-secondary"
-                title="Ouvrir le menu principal"
+                title="Ouvrir le menu"
               >
                 <Menu className="h-5 w-5" />
               </Button>

package/components/ui/asset-logo.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import { useState, useRef } from "react"
+import { FileCode, Package, Boxes, Pencil } from "lucide-react"
+import { ImageCropDialog } from "./image-crop-dialog"
+
+// Get icon for asset type
+export const getAssetIcon = (type?: string) => {
+  if (!type) return Boxes
+  if (type.startsWith('operation')) return FileCode
+  if (type.startsWith('component')) return Package
+  return Boxes
+}
+
+// Get color for asset type
+export const getAssetColor = (type?: string) => {
+  if (!type) return 'text-purple-600 bg-purple-50'
+  if (type.startsWith('operation')) return 'text-blue-600 bg-blue-50'
+  if (type.startsWith('component')) return 'text-green-600 bg-green-50'
+  return 'text-purple-600 bg-purple-50'
+}
+
+interface AssetLogoProps {
+  type: string
+  size?: 'sm' | 'md' | 'lg'
+  editable?: boolean
+  logoUrl?: string | null
+  onLogoChange?: (logoBase64: string) => void
+}
+
+export function AssetLogo({ type, size = 'md', editable = false, logoUrl, onLogoChange }: AssetLogoProps) {
+  const [isHovered, setIsHovered] = useState(false)
+  const [showCropDialog, setShowCropDialog] = useState(false)
+  const [tempImageSrc, setTempImageSrc] = useState<string>("")
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const Icon = getAssetIcon(type)
+  const colorClass = getAssetColor(type)
+  
+  const sizeClasses = {
+    sm: 'w-8 h-8',
+    md: 'w-12 h-12',
+    lg: 'w-16 h-16'
+  }
+  
+  const iconSizes = {
+    sm: 'h-4 w-4',
+    md: 'h-6 w-6',
+    lg: 'h-8 w-8'
+  }
+
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (file) {
+      const reader = new FileReader()
+      reader.onload = () => {
+        setTempImageSrc(reader.result as string)
+        setShowCropDialog(true)
+      }
+      reader.readAsDataURL(file)
+    }
+  }
+
+  const handleCropComplete = (croppedImageBase64: string) => {
+    if (onLogoChange) {
+      onLogoChange(croppedImageBase64)
+    }
+  }
+
+  const handleEditClick = () => {
+    fileInputRef.current?.click()
+  }
+
+  return (
+    <>
+      <div
+        className={`${sizeClasses[size]} rounded-full ${!logoUrl ? colorClass : 'bg-white border-2 border-gray-200'} flex items-center justify-center flex-shrink-0 relative group cursor-pointer`}
+        onMouseEnter={() => editable && setIsHovered(true)}
+        onMouseLeave={() => editable && setIsHovered(false)}
+        onClick={editable ? handleEditClick : undefined}
+      >
+        {logoUrl ? (
+          <img 
+            src={logoUrl} 
+            alt="Asset logo" 
+            className="w-full h-full rounded-full object-cover"
+          />
+        ) : (
+          <Icon className={iconSizes[size]} />
+        )}
+        
+        {editable && isHovered && (
+          <div className="absolute inset-0 bg-black bg-opacity-50 rounded-full flex items-center justify-center">
+            <Pencil className="h-4 w-4 text-white" />
+          </div>
+        )}
+      </div>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileSelect}
+        className="hidden"
+      />
+
+      {showCropDialog && (
+        <ImageCropDialog
+          open={showCropDialog}
+          onClose={() => setShowCropDialog(false)}
+          imageSrc={tempImageSrc}
+          onCropComplete={handleCropComplete}
+        />
+      )}
+    </>
+  )
+}

package/components/ui/assets-header.tsx

@@ -20,30 +20,33 @@ export function AssetsHeader({
   subtitle,
 }: AssetsHeaderProps) {
   return (
-    <div className="border-b bg-white flex items-center justify-between px-3 py-3 sticky top-0 z-10">
-      {/* Left side - Back link, Logo and Title */}
-      <div className="flex items-center gap-3">
-        {backLink && (
-          <Link href={backLink}>
-            <ArrowLeft className="h-5 w-5 text-text-secondary" />
-          </Link>
-        )}
-        {logo && <div className="flex-shrink-0">{logo}</div>}
-        <div className="flex flex-col">
-          {typeof title === 'string' ? (
-            <h2 className="text-base font-semibold text-text-primary">{title}</h2>
-          ) : (
-            title
-          )}
-          {subtitle && (
-            <p className="text-xs text-gray-500 mt-0.5">{subtitle}</p>
+    <div className="border-b bg-white sticky top-0 z-10">
+      {/* Mobile: Stack vertically, Desktop: Horizontal */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between px-3 sm:px-4 py-3 gap-3 sm:gap-0">
+        {/* Left side - Back link, Logo and Title */}
+        <div className="flex items-center gap-3 min-w-0">
+          {backLink && (
+            <Link href={backLink} className="flex-shrink-0">
+              <ArrowLeft className="h-5 w-5 text-text-secondary" />
+            </Link>
           )}
+          {logo && <div className="flex-shrink-0">{logo}</div>}
+          <div className="flex flex-col min-w-0">
+            {typeof title === 'string' ? (
+              <h2 className="text-sm sm:text-base font-semibold text-text-primary truncate">{title}</h2>
+            ) : (
+              title
+            )}
+            {subtitle && (
+              <p className="text-xs text-gray-500 mt-0.5 truncate">{subtitle}</p>
+            )}
+          </div>
         </div>
-      </div>
 
-      {/* Right side - Actions */}
-      <div className="flex items-center justify-end gap-2 py-2 pr-3">
-        {actions}
+        {/* Right side - Actions */}
+        <div className="flex items-center justify-start sm:justify-end gap-2 flex-wrap">
+          {actions}
+        </div>
       </div>
     </div>
   )

package/components/ui/editable-title.tsx

@@ -0,0 +1,90 @@
+"use client"
+
+import { useState, useRef, useEffect } from "react"
+import { Pencil, Check, X } from "lucide-react"
+import { Input } from "./input"
+import { Button } from "./button"
+
+interface EditableTitleProps {
+  value: string
+  onSave: (newValue: string) => void
+  className?: string
+}
+
+export function EditableTitle({ value, onSave, className = "" }: EditableTitleProps) {
+  const [isEditing, setIsEditing] = useState(false)
+  const [isHovered, setIsHovered] = useState(false)
+  const [editValue, setEditValue] = useState(value)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  useEffect(() => {
+    if (isEditing && inputRef.current) {
+      inputRef.current.focus()
+      inputRef.current.select()
+    }
+  }, [isEditing])
+
+  const handleSave = () => {
+    if (editValue.trim() && editValue !== value) {
+      onSave(editValue.trim())
+    }
+    setIsEditing(false)
+  }
+
+  const handleCancel = () => {
+    setEditValue(value)
+    setIsEditing(false)
+  }
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      handleSave()
+    } else if (e.key === 'Escape') {
+      handleCancel()
+    }
+  }
+
+  if (isEditing) {
+    return (
+      <div className="flex items-center gap-2">
+        <Input
+          ref={inputRef}
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleKeyDown}
+          className="h-8 min-w-[300px]"
+        />
+        <Button
+          size="sm"
+          variant="default"
+          onClick={handleSave}
+          className="h-8 w-8 p-0"
+        >
+          <Check className="h-4 w-4" />
+        </Button>
+        <Button
+          size="sm"
+          variant="secondary"
+          onClick={handleCancel}
+          className="h-8 w-8 p-0"
+        >
+          <X className="h-4 w-4" />
+        </Button>
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`flex items-center gap-2 group cursor-pointer ${className}`}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+      onClick={() => setIsEditing(true)}
+    >
+      <h2 className="text-base font-semibold text-text-primary">{value}</h2>
+      {isHovered && (
+        <Pencil className="h-3 w-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+      )}
+    </div>
+  )
+}

package/components/ui/image-crop-dialog.tsx

@@ -0,0 +1,157 @@
+"use client"
+
+import { useState, useCallback } from "react"
+import Cropper from "react-easy-crop"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "./dialog"
+import { Button } from "./button"
+import { Slider } from "./slider"
+
+interface ImageCropDialogProps {
+  open: boolean
+  onClose: () => void
+  imageSrc: string
+  onCropComplete: (croppedImageBase64: string) => void
+}
+
+interface Area {
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+const createImage = (url: string): Promise<HTMLImageElement> =>
+  new Promise((resolve, reject) => {
+    const image = new Image()
+    image.addEventListener('load', () => resolve(image))
+    image.addEventListener('error', (error) => reject(error))
+    image.src = url
+  })
+
+async function getCroppedImg(imageSrc: string, pixelCrop: Area): Promise<string> {
+  const image = await createImage(imageSrc)
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+
+  if (!ctx) {
+    throw new Error('No 2d context')
+  }
+
+  // Set canvas size to a square (optimized size for logo)
+  const size = 128
+  canvas.width = size
+  canvas.height = size
+
+  ctx.drawImage(
+    image,
+    pixelCrop.x,
+    pixelCrop.y,
+    pixelCrop.width,
+    pixelCrop.height,
+    0,
+    0,
+    size,
+    size
+  )
+
+  // Use JPEG with quality 0.8 for better compression
+  // Falls back to PNG if the image has transparency
+  let dataUrl = canvas.toDataURL('image/jpeg', 0.8)
+  
+  // If the compressed image is still too large (>50KB), reduce quality further
+  if (dataUrl.length > 50000) {
+    dataUrl = canvas.toDataURL('image/jpeg', 0.6)
+  }
+  
+  return dataUrl
+}
+
+export function ImageCropDialog({ open, onClose, imageSrc, onCropComplete }: ImageCropDialogProps) {
+  const [crop, setCrop] = useState({ x: 0, y: 0 })
+  const [zoom, setZoom] = useState(1)
+  const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const onCropChange = useCallback((crop: { x: number; y: number }) => {
+    setCrop(crop)
+  }, [])
+
+  const onZoomChange = useCallback((zoom: number) => {
+    setZoom(zoom)
+  }, [])
+
+  const onCropCompleteCallback = useCallback(
+    (_croppedArea: Area, croppedAreaPixels: Area) => {
+      setCroppedAreaPixels(croppedAreaPixels)
+    },
+    []
+  )
+
+  const handleSave = async () => {
+    if (!croppedAreaPixels) return
+
+    setIsSaving(true)
+    try {
+      const croppedImage = await getCroppedImg(imageSrc, croppedAreaPixels)
+      onCropComplete(croppedImage)
+      onClose()
+    } catch (error) {
+      console.error('Error cropping image:', error)
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-[600px]">
+        <DialogHeader>
+          <DialogTitle>Crop Image</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div className="relative h-[400px] bg-ibm-gray-20 rounded-lg">
+            <Cropper
+              image={imageSrc}
+              crop={crop}
+              zoom={zoom}
+              aspect={1}
+              cropShape="round"
+              showGrid={false}
+              onCropChange={onCropChange}
+              onZoomChange={onZoomChange}
+              onCropComplete={onCropCompleteCallback}
+            />
+          </div>
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Zoom</label>
+            <Slider
+              value={[zoom]}
+              onValueChange={(value) => setZoom(value[0])}
+              min={1}
+              max={3}
+              step={0.1}
+              className="w-full"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button
+            variant="secondary"
+            onClick={onClose}
+            disabled={isSaving}
+            className="rounded-none"
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleSave}
+            disabled={isSaving}
+            className="rounded-none"
+          >
+            {isSaving ? "Saving..." : "OK"}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/components/ui/index.ts

@@ -11,8 +11,12 @@ export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from './tool
 export { PageHeader } from './page-header'
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from './chart'
 export { SearchInput } from './search-input'
+export { AssetsHeader } from './assets-header'
+export { AssetLogo, getAssetIcon, getAssetColor } from './asset-logo'
+export { EditableTitle } from './editable-title'
+export { ImageCropDialog } from './image-crop-dialog'
 // Note: The following components are not exported as they depend on app-specific services or models:
-// - AssetsHeader, CertificateEditor, EnvironmentSettings, EnvironmentVariablesConfig
+// - CertificateEditor, EnvironmentSettings, EnvironmentVariablesConfig
 // - FileImport, ProcessStatus, ResourceSettings, SecretExplorer, SecretPropertiesEditor, SelectedAsset
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './accordion'
 export { AlertDialog, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel } from './alert-dialog'

package/components/ui/page-header.tsx

@@ -12,23 +12,23 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, description, backLink, actions, statusNode}: PageHeaderProps) {
   return (
-    <div className="mb-8">
-      <div className="flex items-center justify-between">
-        <div className="flex items-center space-x-3">
+    <div className="mb-4 sm:mb-8">
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div className="flex items-center space-x-3 min-w-0">
           {backLink && (
-            <Link href={backLink}>
-              <ArrowLeft className="h-6 w-6 text-text-secondary" />
+            <Link href={backLink} className="flex-shrink-0">
+              <ArrowLeft className="h-5 w-5 sm:h-6 sm:w-6 text-text-secondary" />
             </Link>
           )}
-          <div>
+          <div className="min-w-0">
             <div className="flex items-center space-x-3">
-              <h1 className="text-2xl font-semibold text-text-primary">{title}</h1>
-              {statusNode && <div className="mt-2">{statusNode}</div>}
+              <h1 className="text-xl sm:text-2xl font-semibold text-text-primary truncate">{title}</h1>
+              {statusNode && <div className="mt-2 flex-shrink-0">{statusNode}</div>}
             </div>
-            {description && <p className="text-base text-text-secondary">{description}</p>}
+            {description && <p className="text-sm sm:text-base text-text-secondary line-clamp-2">{description}</p>}
           </div>
         </div>
-        {actions && <div className="flex items-center space-x-4">{actions}</div>}
+        {actions && <div className="flex items-center space-x-2 sm:space-x-4 flex-shrink-0">{actions}</div>}
       </div>
     </div>
   )

package/package.json

@@ -1,94 +1,95 @@
-{
-  "name": "@orsetra/shared-ui",
-  "version": "1.0.11",
-  "description": "Shared UI components for Orsetra platform",
-  "main": "./index.ts",
-  "types": "./index.ts",
-  "exports": {
-    ".": "./index.ts",
-    "./components/ui": "./components/ui/index.ts",
-    "./components/layout": "./components/layout/index.ts",
-    "./hooks": "./hooks/index.ts",
-    "./lib/*": "./lib/*.ts"
-  },
-  "files": [
-    "index.ts",
-    "components",
-    "hooks",
-    "lib",
-    "README.md"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/orsetra/console-ui.git",
-    "directory": "packages/shared-ui"
-  },
-  "keywords": [
-    "react",
-    "components",
-    "ui",
-    "orsetra",
-    "radix-ui",
-    "tailwind"
-  ],
-  "peerDependencies": {
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
-    "next": "^14.0.0 || ^15.0.0"
-  },
-  "dependencies": {
-    "react-avatar": "^5.0.3",
-    "react-hook-form": "^7.54.0",
-    "react-resizable-panels": "^2.1.7",
-    "@hookform/resolvers": "^3.9.1",
-    "zod": "^3.24.1",
-    "clsx": "^2.1.1",
-    "tailwind-merge": "^2.5.5",
-    "class-variance-authority": "^0.7.1",
-    "lucide-react": "^0.454.0",
-    "react-day-picker": "8.10.1",
-    "embla-carousel-react": "8.5.1",
-    "cmdk": "1.0.4",
-    "recharts": "^2.15.0",
-    "date-fns": "4.1.0",
-    "input-otp": "1.4.1",
-    "vaul": "^1.1.1",
-    "next-themes": "^0.4.4",
-    "sonner": "^1.7.1",
-    "@radix-ui/react-accordion": "1.2.2",
-    "@radix-ui/react-alert-dialog": "1.1.4",
-    "@radix-ui/react-aspect-ratio": "1.1.1",
-    "@radix-ui/react-avatar": "1.1.2",
-    "@radix-ui/react-checkbox": "1.1.3",
-    "@radix-ui/react-collapsible": "1.1.2",
-    "@radix-ui/react-context-menu": "2.2.4",
-    "@radix-ui/react-dialog": "1.1.4",
-    "@radix-ui/react-dropdown-menu": "2.1.4",
-    "@radix-ui/react-hover-card": "1.1.4",
-    "@radix-ui/react-label": "2.1.1",
-    "@radix-ui/react-menubar": "1.1.4",
-    "@radix-ui/react-navigation-menu": "1.2.3",
-    "@radix-ui/react-popover": "1.1.4",
-    "@radix-ui/react-progress": "1.1.1",
-    "@radix-ui/react-radio-group": "1.2.2",
-    "@radix-ui/react-scroll-area": "1.2.2",
-    "@radix-ui/react-select": "2.1.4",
-    "@radix-ui/react-separator": "1.1.1",
-    "@radix-ui/react-slider": "1.2.2",
-    "@radix-ui/react-slot": "1.1.1",
-    "@radix-ui/react-switch": "1.1.2",
-    "@radix-ui/react-tabs": "1.1.2",
-    "@radix-ui/react-toast": "1.2.4",
-    "@radix-ui/react-toggle": "1.1.1",
-    "@radix-ui/react-toggle-group": "1.1.1",
-    "@radix-ui/react-tooltip": "1.1.6"
-  },
-  "devDependencies": {
-    "@types/react": "^19",
-    "next": "^15.0.0",
-    "typescript": "^5"
-  }
-}
+{
+  "name": "@orsetra/shared-ui",
+  "version": "1.0.13",
+  "description": "Shared UI components for Orsetra platform",
+  "main": "./index.ts",
+  "types": "./index.ts",
+  "exports": {
+    ".": "./index.ts",
+    "./components/ui": "./components/ui/index.ts",
+    "./components/layout": "./components/layout/index.ts",
+    "./hooks": "./hooks/index.ts",
+    "./lib/*": "./lib/*.ts"
+  },
+  "files": [
+    "index.ts",
+    "components",
+    "hooks",
+    "lib",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/orsetra/console-ui.git",
+    "directory": "packages/shared-ui"
+  },
+  "keywords": [
+    "react",
+    "components",
+    "ui",
+    "orsetra",
+    "radix-ui",
+    "tailwind"
+  ],
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "next": "^14.0.0 || ^15.0.0"
+  },
+  "dependencies": {
+    "react-avatar": "^5.0.3",
+    "react-easy-crop": "^5.0.8",
+    "react-hook-form": "^7.54.0",
+    "react-resizable-panels": "^2.1.7",
+    "@hookform/resolvers": "^3.9.1",
+    "zod": "^3.24.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^2.5.5",
+    "class-variance-authority": "^0.7.1",
+    "lucide-react": "^0.454.0",
+    "react-day-picker": "8.10.1",
+    "embla-carousel-react": "8.5.1",
+    "cmdk": "1.0.4",
+    "recharts": "^2.15.0",
+    "date-fns": "4.1.0",
+    "input-otp": "1.4.1",
+    "vaul": "^1.1.1",
+    "next-themes": "^0.4.4",
+    "sonner": "^1.7.1",
+    "@radix-ui/react-accordion": "1.2.2",
+    "@radix-ui/react-alert-dialog": "1.1.4",
+    "@radix-ui/react-aspect-ratio": "1.1.1",
+    "@radix-ui/react-avatar": "1.1.2",
+    "@radix-ui/react-checkbox": "1.1.3",
+    "@radix-ui/react-collapsible": "1.1.2",
+    "@radix-ui/react-context-menu": "2.2.4",
+    "@radix-ui/react-dialog": "1.1.4",
+    "@radix-ui/react-dropdown-menu": "2.1.4",
+    "@radix-ui/react-hover-card": "1.1.4",
+    "@radix-ui/react-label": "2.1.1",
+    "@radix-ui/react-menubar": "1.1.4",
+    "@radix-ui/react-navigation-menu": "1.2.3",
+    "@radix-ui/react-popover": "1.1.4",
+    "@radix-ui/react-progress": "1.1.1",
+    "@radix-ui/react-radio-group": "1.2.2",
+    "@radix-ui/react-scroll-area": "1.2.2",
+    "@radix-ui/react-select": "2.1.4",
+    "@radix-ui/react-separator": "1.1.1",
+    "@radix-ui/react-slider": "1.2.2",
+    "@radix-ui/react-slot": "1.1.1",
+    "@radix-ui/react-switch": "1.1.2",
+    "@radix-ui/react-tabs": "1.1.2",
+    "@radix-ui/react-toast": "1.2.4",
+    "@radix-ui/react-toggle": "1.1.1",
+    "@radix-ui/react-toggle-group": "1.1.1",
+    "@radix-ui/react-tooltip": "1.1.6"
+  },
+  "devDependencies": {
+    "@types/react": "^19",
+    "next": "^15.0.0",
+    "typescript": "^5"
+  }
+}