@catalystsoftware/ui 1.0.5 → 1.0.7

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

@@ -1,668 +0,0 @@
-/**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>
-  )
-} */