@catalystsoftware/ui 1.0.4 → 1.0.5

package/dist/components/catalyst-ui/x/sheet-x.tsx

@@ -0,0 +1,668 @@
+/**const SheetDemo = () => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant='outline'>Default</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>Make changes to your profile here. Click save when you&apos;re done.</SheetDescription>
+        </SheetHeader>
+        <div className='grid flex-1 auto-rows-min gap-6 px-4'>
+          <div className='grid gap-3'>
+            <Label htmlFor='sheet-demo-name'>Name</Label>
+            <Input id='sheet-demo-name' defaultValue='Pedro Duarte' />
+          </div>
+          <div className='grid gap-3'>
+            <Label htmlFor='sheet-demo-username'>Username</Label>
+            <Input id='sheet-demo-username' defaultValue='@peduarte' />
+          </div>
+        </div>
+        <SheetFooter>
+          <Button type='submit'>Save changes</Button>
+          <SheetClose asChild>
+            <Button variant='outline'>Close</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+const SheetSidesDemo = () => {
+  return (
+    <div className='flex flex-wrap gap-2'>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant='outline'>Top</Button>
+        </SheetTrigger>
+        <SheetContent side='top'>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>Make changes to your profile here. Click save when you&apos;re done.</SheetDescription>
+          </SheetHeader>
+          <div className='grid flex-1 auto-rows-min gap-6 px-4'>
+            <div className='grid gap-3'>
+              <Label htmlFor='sheet-demo-name'>Name</Label>
+              <Input id='sheet-demo-name' defaultValue='Pedro Duarte' />
+            </div>
+            <div className='grid gap-3'>
+              <Label htmlFor='sheet-demo-username'>Username</Label>
+              <Input id='sheet-demo-username' defaultValue='@peduarte' />
+            </div>
+          </div>
+          <SheetFooter>
+            <Button type='submit'>Save changes</Button>
+            <SheetClose asChild>
+              <Button variant='outline'>Close</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant='outline'>Right</Button>
+        </SheetTrigger>
+        <SheetContent side='right'>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>Make changes to your profile here. Click save when you&apos;re done.</SheetDescription>
+          </SheetHeader>
+          <div className='grid flex-1 auto-rows-min gap-6 px-4'>
+            <div className='grid gap-3'>
+              <Label htmlFor='sheet-demo-name'>Name</Label>
+              <Input id='sheet-demo-name' defaultValue='Pedro Duarte' />
+            </div>
+            <div className='grid gap-3'>
+              <Label htmlFor='sheet-demo-username'>Username</Label>
+              <Input id='sheet-demo-username' defaultValue='@peduarte' />
+            </div>
+          </div>
+          <SheetFooter>
+            <Button type='submit'>Save changes</Button>
+            <SheetClose asChild>
+              <Button variant='outline'>Close</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant='outline'>Bottom</Button>
+        </SheetTrigger>
+        <SheetContent side='bottom'>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>Make changes to your profile here. Click save when you&apos;re done.</SheetDescription>
+          </SheetHeader>
+          <div className='grid flex-1 auto-rows-min gap-6 px-4'>
+            <div className='grid gap-3'>
+              <Label htmlFor='sheet-demo-name'>Name</Label>
+              <Input id='sheet-demo-name' defaultValue='Pedro Duarte' />
+            </div>
+            <div className='grid gap-3'>
+              <Label htmlFor='sheet-demo-username'>Username</Label>
+              <Input id='sheet-demo-username' defaultValue='@peduarte' />
+            </div>
+          </div>
+          <SheetFooter>
+            <Button type='submit'>Save changes</Button>
+            <SheetClose asChild>
+              <Button variant='outline'>Close</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button variant='outline'>Left</Button>
+        </SheetTrigger>
+        <SheetContent side='left'>
+          <SheetHeader>
+            <SheetTitle>Edit profile</SheetTitle>
+            <SheetDescription>Make changes to your profile here. Click save when you&apos;re done.</SheetDescription>
+          </SheetHeader>
+          <div className='grid flex-1 auto-rows-min gap-6 px-4'>
+            <div className='grid gap-3'>
+              <Label htmlFor='sheet-demo-name'>Name</Label>
+              <Input id='sheet-demo-name' defaultValue='Pedro Duarte' />
+            </div>
+            <div className='grid gap-3'>
+              <Label htmlFor='sheet-demo-username'>Username</Label>
+              <Input id='sheet-demo-username' defaultValue='@peduarte' />
+            </div>
+          </div>
+          <SheetFooter>
+            <Button type='submit'>Save changes</Button>
+            <SheetClose asChild>
+              <Button variant='outline'>Close</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+  )
+}
+
+const SheetWithNoOverlayDemo = () => {
+  return (
+    <Sheet modal={false}>
+      <SheetTrigger asChild>
+        <Button variant='outline'>No Overlay</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle>Edit profile</SheetTitle>
+          <SheetDescription>Make changes to your profile here. Click save when you&apos;re done.</SheetDescription>
+        </SheetHeader>
+        <div className='grid flex-1 auto-rows-min gap-6 px-4'>
+          <div className='grid gap-3'>
+            <Label htmlFor='sheet-demo-name'>Name</Label>
+            <Input id='sheet-demo-name' defaultValue='Pedro Duarte' />
+          </div>
+          <div className='grid gap-3'>
+            <Label htmlFor='sheet-demo-username'>Username</Label>
+            <Input id='sheet-demo-username' defaultValue='@peduarte' />
+          </div>
+        </div>
+        <SheetFooter>
+          <Button type='submit'>Save changes</Button>
+          <SheetClose asChild>
+            <Button variant='outline'>Close</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+const SheetWithScrollableContentDemo = () => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant='outline'>Scrollable Content</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <ScrollArea className='h-full'>
+          <SheetHeader>
+            <SheetTitle>Terms & Condition</SheetTitle>
+            <SheetDescription>Make sure read the terms and conditions before proceeding.</SheetDescription>
+          </SheetHeader>
+          <div className='space-y-1 p-4 pt-0 text-sm'>
+            <p className='mb-2 font-medium'>Last Updated: June 1, 2025</p>
+
+            <h3>1. Introduction</h3>
+            <p>
+              Welcome to our platform. These Terms and Conditions outline the rules and regulations for the use of our
+              services. By accessing or using our services, you agree to comply with these terms. If you do not agree
+              with any of these terms, please do not use our services.
+            </p>
+
+            <h3>2. Acceptance of Terms</h3>
+            <p>
+              By using our services, you confirm that you have read, understood, and accepted these terms. You also
+              agree to comply with any additional guidelines, policies, or rules that may apply to specific features of
+              our services.
+            </p>
+
+            <h3>3. Services Provided</h3>
+            <p>
+              We offer a range of digital services including but not limited to content creation, subscription services,
+              and access to various online tools. You acknowledge that the nature of our services may change over time,
+              and we reserve the right to modify, suspend, or discontinue services at any time.
+            </p>
+
+            <h3>4. User Obligations</h3>
+            <p>
+              As a user, you agree to provide accurate and complete information when required, and to update this
+              information if necessary. You are responsible for maintaining the confidentiality of your account details,
+              including username and password, and for all activities under your account.
+            </p>
+
+            <h3>5. Prohibited Activities</h3>
+            <p>You may not use our services for any unlawful activities, including but not limited to:</p>
+            <ul>
+              <li>Distributing malicious content or viruses</li>
+              <li>Engaging in illegal activities or fraud</li>
+              <li>Impersonating another user or entity</li>
+              <li>Harassing or bullying other users</li>
+            </ul>
+
+            <h3>6. Content Ownership</h3>
+            <p>
+              All content, including text, images, graphics, and software on our platform, is owned by us or our
+              licensors and is protected by copyright laws. You are granted a limited, non-exclusive license to access
+              and use this content for personal or business purposes.
+            </p>
+
+            <h3>7. Privacy and Data Protection</h3>
+            <p>
+              Your privacy is important to us. Please refer to our <a href='#'>Privacy Policy</a> to understand how we
+              collect, use, and protect your personal data.
+            </p>
+
+            <h3>8. Payment Terms</h3>
+            <p>
+              Some of our services are available for a fee. You agree to pay all applicable charges and fees associated
+              with your use of the services. We reserve the right to change the pricing of our services at any time.
+            </p>
+
+            <h3>9. Termination</h3>
+            <p>
+              We may suspend or terminate your account if you violate these Terms and Conditions or engage in any
+              behavior that we deem inappropriate. Upon termination, your access to our services will be revoked, and
+              any outstanding payments will be due immediately.
+            </p>
+
+            <h3>10. Disclaimers and Limitation of Liability</h3>
+            <p>
+              We provide our services &quot;as is&quot; and make no warranties regarding the accuracy, reliability, or
+              availability of the services. We are not responsible for any damages, losses, or expenses incurred by your
+              use of our services.
+            </p>
+
+            <h3>11. Governing Law</h3>
+            <p>
+              These Terms and Conditions shall be governed by and construed in accordance with the laws of the
+              jurisdiction in which our company is based. Any disputes arising from these terms shall be subject to the
+              exclusive jurisdiction of the courts of that jurisdiction.
+            </p>
+
+            <h3>12. Changes to Terms</h3>
+            <p>
+              We reserve the right to update or modify these Terms and Conditions at any time. Any changes will be
+              posted on this page, and the revised terms will take effect immediately upon posting. It is your
+              responsibility to review these terms periodically for any updates.
+            </p>
+
+            <h3>13. Contact Information</h3>
+            <p>If you have any questions or concerns about these Terms and Conditions, please contact us at:</p>
+            <p>Email: support@example.com</p>
+            <p>Phone: +1 (800) 123-4567</p>
+          </div>
+          <SheetFooter>
+            <SheetClose asChild>
+              <Button type='submit'>Accept</Button>
+            </SheetClose>
+            <SheetClose asChild>
+              <Button variant='outline'>Cancel</Button>
+            </SheetClose>
+          </SheetFooter>
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+const SheetWithFormDemo = () => {
+  const FormSchema = z.object({
+    firstName: z.string().min(1, 'First name is required').min(2, 'First name must be at least 2 characters'),
+    lastName: z.string().min(1, 'Last name is required').min(2, 'Last name must be at least 2 characters'),
+    email: z.string().min(1, 'Email is required').email({ message: 'Please enter a valid email address.' }),
+    mobileNumber: z
+      .number({ required_error: 'Mobile number is required', invalid_type_error: 'Please enter a valid number' })
+      .int('Mobile number must be a whole number')
+      .positive('Mobile number must be positive')
+      .refine(val => val.toString().length === 10, 'Mobile number must be exactly 10 digits'),
+    password: z.string().min(1, 'Password is required').min(8, 'Password must be at least 8 characters')
+  })
+
+  const form = useForm<z.infer<typeof FormSchema>>({
+    resolver: zodResolver(FormSchema),
+    defaultValues: {
+      firstName: '',
+      lastName: '',
+      email: '',
+      mobileNumber: undefined,
+      password: ''
+    }
+  })
+
+  const onSubmit = () => {
+    toast.custom(() => (
+      <Alert className='border-green-600 text-green-600 dark:border-green-400 dark:text-green-400'>
+        <CheckCheckIcon />
+        <AlertTitle>Account created successfully!</AlertTitle>
+      </Alert>
+    ))
+  }
+
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant='outline'>Sign Up</Button>
+      </SheetTrigger>
+      <SheetContent>
+        <SheetHeader>
+          <SheetTitle className='text-center text-xl font-bold'>Sign Up</SheetTitle>
+        </SheetHeader>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className='w-full'>
+            <div className='space-y-4 p-4 pt-0'>
+              <FormField
+                control={form.control}
+                name='firstName'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>First Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder='First name' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='lastName'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Last Name</FormLabel>
+                    <FormControl>
+                      <Input placeholder='Last name' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='email'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input placeholder='Email address' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='mobileNumber'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Mobile Number</FormLabel>
+                    <FormControl>
+                      <Input
+                        type='tel'
+                        placeholder='8585858585'
+                        value={field.value ? field.value.toString() : ''}
+                        onChange={e => {
+                          const value = e.target.value.replace(/[^\d]/g, '')
+
+                          const limitedValue = value.slice(0, 10)
+
+                          const numValue = limitedValue === '' ? undefined : parseInt(limitedValue, 10)
+
+                          field.onChange(numValue)
+                        }}
+                      />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <FormField
+                control={form.control}
+                name='password'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Password</FormLabel>
+                    <FormControl>
+                      <Input type='password' placeholder='Password' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+            </div>
+            <SheetFooter>
+              <Button type='submit'>Create Account</Button>
+
+              <SheetClose asChild>
+                <Button variant='outline'>Close</Button>
+              </SheetClose>
+            </SheetFooter>
+          </form>
+        </Form>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+const NavigationMenu = ({ item, level }: { level: number; item: NavigationItem }) => {
+  if (item.type === 'page') {
+    return (
+      <div
+        className='focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]'
+        style={{ paddingLeft: `${level === 0 ? 0.25 : 1.75}rem` }}
+      >
+        {level === 0 ? <item.icon className='size-4 shrink-0' /> : <CircleSmallIcon className='size-4 shrink-0' />}
+        <span className='text-sm'>{item.name}</span>
+      </div>
+    )
+  }
+
+  return (
+    <Collapsible className='flex flex-col gap-1.5' style={{ paddingLeft: `${level === 0 ? 0 : 1.5}rem` }}>
+      <CollapsibleTrigger className='focus-visible:ring-ring/50 flex items-center gap-2 rounded-md p-1 outline-none focus-visible:ring-[3px]'>
+        {level === 0 ? <item.icon className='size-4 shrink-0' /> : <CircleSmallIcon className='size-4 shrink-0' />}
+        <span className='flex-1 text-start text-sm'>{item.name}</span>
+        <ChevronRightIcon className='size-4 shrink-0 transition-transform [[data-state="open"]>&]:rotate-90' />
+      </CollapsibleTrigger>
+      <CollapsibleContent className='data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down flex flex-col gap-1.5 overflow-hidden transition-all duration-300'>
+        {item.children.map(item => (
+          <NavigationMenu key={item.name} item={item} level={level + 1} />
+        ))}
+      </CollapsibleContent>
+    </Collapsible>
+  )
+}
+
+const SheetWithNavigationMenuDemo = () => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant='outline'>Navigation Menu</Button>
+      </SheetTrigger>
+      <SheetContent side='left' className='w-75'>
+        <SheetHeader>
+          <SheetTitle>Menu</SheetTitle>
+        </SheetHeader>
+        <div className='flex flex-col gap-2.5 p-4 pt-0'>
+          {navigationMenu.map(item => (
+            <NavigationMenu key={item.name} item={item} level={0} />
+          ))}
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+const DataTableDensityDemo = () => {
+  const [tableData, setTableData] = useState(data)
+  const [globalFilter, setGlobalFilter] = useState('')
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({})
+  const [rowSelection, setRowSelection] = useState({})
+  const [isSheetOpen, setIsSheetOpen] = useState(false)
+
+  // Form state for adding new user
+  const [newUser, setNewUser] = useState({
+    name: '',
+    email: '',
+    amount: '',
+    status: 'pending' as Payment['status']
+  })
+
+  // Function to handle form submission
+  const handleAddUser = () => {
+    if (!newUser.name || !newUser.email || !newUser.amount) {
+      return // Basic validation
+    }
+
+    const newPayment: Payment = {
+      id: String(tableData.length + 1),
+      name: newUser.name,
+      email: newUser.email,
+      amount: parseFloat(newUser.amount),
+      status: newUser.status
+    }
+
+    setTableData([...tableData, newPayment])
+
+    // Reset form
+    setNewUser({
+      name: '',
+      email: '',
+      amount: '',
+      status: 'pending'
+    })
+
+    setIsSheetOpen(false)
+  }
+
+  const table = useReactTable({
+    data: tableData,
+    columns,
+    onSortingChange: setSorting,
+    onColumnFiltersChange: setColumnFilters,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onGlobalFilterChange: setGlobalFilter,
+    globalFilterFn: 'includesString',
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      rowSelection,
+      globalFilter
+    }
+  })
+
+  return (
+    <div className='w-full'>
+      <div className='flex justify-between gap-2 py-4 max-sm:flex-col sm:items-center'>
+        <Input
+          placeholder='Search all columns...'
+          value={globalFilter ?? ''}
+          onChange={event => setGlobalFilter(String(event.target.value))}
+          className='max-w-2xs'
+        />
+        <Sheet open={isSheetOpen} onOpenChange={setIsSheetOpen}>
+          <SheetTrigger asChild>
+            <Button variant='outline'>
+              <PlusIcon />
+              Add Users
+            </Button>
+          </SheetTrigger>
+          <SheetContent>
+            <SheetHeader>
+              <SheetTitle>Add New User</SheetTitle>
+              <SheetDescription>Add a new user to the table. Fill in all the required information.</SheetDescription>
+            </SheetHeader>
+            <div className='grid flex-1 auto-rows-min gap-6 px-4'>
+              <div className='grid gap-3'>
+                <Label htmlFor='user-name'>Name</Label>
+                <Input
+                  id='user-name'
+                  value={newUser.name}
+                  onChange={e => setNewUser({ ...newUser, name: e.target.value })}
+                  placeholder='Enter user name'
+                />
+              </div>
+              <div className='grid gap-3'>
+                <Label htmlFor='user-email'>Email</Label>
+                <Input
+                  id='user-email'
+                  type='email'
+                  value={newUser.email}
+                  onChange={e => setNewUser({ ...newUser, email: e.target.value })}
+                  placeholder='Enter email address'
+                />
+              </div>
+              <div className='grid gap-3'>
+                <Label htmlFor='user-amount'>Amount</Label>
+                <Input
+                  id='user-amount'
+                  type='number'
+                  value={newUser.amount}
+                  onChange={e => setNewUser({ ...newUser, amount: e.target.value })}
+                  placeholder='Enter amount'
+                />
+              </div>
+              <div className='grid gap-3'>
+                <Label htmlFor='user-status'>Status</Label>
+                <Select
+                  value={newUser.status}
+                  onValueChange={(value: Payment['status']) => setNewUser({ ...newUser, status: value })}
+                >
+                  <SelectTrigger className='w-full'>
+                    <SelectValue placeholder='Select status' />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value='pending'>Pending</SelectItem>
+                    <SelectItem value='processing'>Processing</SelectItem>
+                    <SelectItem value='success'>Success</SelectItem>
+                    <SelectItem value='failed'>Failed</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+            <SheetFooter>
+              <Button type='button' onClick={handleAddUser}>
+                Add User
+              </Button>
+              <SheetClose asChild>
+                <Button variant='outline'>Cancel</Button>
+              </SheetClose>
+            </SheetFooter>
+          </SheetContent>
+        </Sheet>
+      </div>
+      <div className='rounded-md border'>
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map(headerGroup => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map(header => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map(row => (
+                <TableRow key={row.id} data-state={row.getIsSelected() && 'selected'}>
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className='h-24 text-center'>
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <p className='text-muted-foreground mt-4 text-center text-sm'>Add new user with sheet</p>
+    </div>
+  )
+} */