@gentleduck/registry-ui 0.2.1

package/CHANGELOG.md

@@ -0,0 +1,62 @@
+# @gentleduck/registry-ui
+
+## 0.2.1
+
+### Patch Changes
+
+- ad86755: Fix popover width, update calendar and date-picker examples, and migrate registry packages.
+- Updated dependencies [ad86755]
+- Updated dependencies [ad86755]
+  - @gentleduck/primitives@0.2.1
+  - @gentleduck/hooks@0.1.9
+  - @gentleduck/libs@0.1.12
+  - @gentleduck/variants@0.1.17
+  - @gentleduck/motion@0.1.14
+  - @gentleduck/vim@0.1.13
+
+## 0.2.0
+
+### Minor Changes
+
+- 36f9364: Add json-editor component with inline, sheet, and popover editing modes for JSON data with validation. Includes registry entries and three example demos.
+
+### Patch Changes
+
+- d46534e: Upgrade recharts peer dependency from v2 to v3.7.0
+- Updated dependencies [36f9364]
+  - @gentleduck/primitives@0.2.0
+
+## 0.1.17
+
+### Patch Changes
+
+- Updated dependencies [4f93768]
+  - @gentleduck/primitives@0.1.45
+
+## 0.1.16
+
+### Patch Changes
+
+- Updated dependencies [d0a2c1d]
+- Updated dependencies [d0a2c1d]
+  - @gentleduck/primitives@0.1.44
+
+## 0.1.15
+
+### Patch Changes
+
+- Updated dependencies [45ec82f]
+  - @gentleduck/primitives@0.1.43
+
+## 0.1.14
+
+### Patch Changes
+
+- Updated dependencies [cd47e32]
+  - @gentleduck/primitives@0.1.42
+
+## 0.1.13
+
+### Patch Changes
+
+- df94032: publish for internal use only

package/index.css

@@ -0,0 +1,3 @@
+@import "tailwindcss";
+
+@import "../../apps/duck-ui-docs/app/globals.css";

package/package.json

@@ -0,0 +1,59 @@
+{
+  "$schema": "https://json.schemastore.org/package.json",
+  "engines": {
+    "node": ">=22.0.0"
+  },
+  "dependencies": {
+    "@gentleduck/hooks": "workspace:*",
+    "@gentleduck/libs": "workspace:*",
+    "@gentleduck/motion": "workspace:*",
+    "@gentleduck/primitives": "workspace:*",
+    "@gentleduck/variants": "workspace:*",
+    "@gentleduck/vim": "workspace:*",
+    "embla-carousel-react": "8.6.0",
+    "lucide-react": "0.562.0",
+    "next-themes": "^0.4.6",
+    "react": "^19.2.3",
+    "react-day-picker": "^9.8.1",
+    "react-dom": "^19.2.3",
+    "react-hook-form": "^7.71.1",
+    "react-resizable-panels": "^3.0.6",
+    "recharts": "^3.7.0",
+    "sonner": "^2.0.7",
+    "tailwindcss": "^4.2.0",
+    "uuidv7": "^1.1.0",
+    "vaul": "1.1.2",
+    "zod": "4.2.1"
+  },
+  "devDependencies": {
+    "@gentleduck/typescript-config": "workspace:*",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "typescript": "5.9.3"
+  },
+  "exports": {
+    "./*": "./src/*/index.ts"
+  },
+  "name": "@gentleduck/registry-ui",
+  "author": "gentleduck contributors",
+  "license": "MIT",
+  "homepage": "https://github.com/gentleeduck/duck-ui/tree/master/packages/registry-ui#readme",
+  "bugs": {
+    "url": "https://github.com/gentleeduck/duck-ui/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gentleeduck/duck-ui.git",
+    "directory": "packages/registry-ui"
+  },
+  "packageManager": "bun@1.3.5",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "check-types": "tsc -p tsconfig.json --noEmit --pretty false --skipLibCheck"
+  },
+  "type": "module",
+  "version": "0.2.1"
+}

package/src/_old/_table/index.ts

@@ -0,0 +1,5 @@
+export * from './table'
+export * from './table.constants'
+export * from './table.hook'
+export * from './table.lib'
+export * from './table.types'

package/src/_old/_table/table-advanced.constants.tsx

@@ -0,0 +1,24 @@
+import { ArrowDownIcon, ArrowUpIcon, EyeOff } from 'lucide-react'
+import { TableColumnSortableType } from './table-advanced.types'
+
+export const dropdownMenuOptions: TableColumnSortableType[] = [
+  {
+    children: 'ascending',
+    icon: <ArrowDownIcon className="mr-2 text-muted-foreground/80" />,
+    size: 'sm',
+    variant: 'ghost',
+  },
+
+  {
+    children: 'descending',
+    icon: <ArrowUpIcon className="mr-2 text-muted-foreground/80" />,
+    size: 'sm',
+    variant: 'ghost',
+  },
+  {
+    children: 'hide' as 'other',
+    icon: <EyeOff className="mr-2 text-muted-foreground/80" />,
+    size: 'sm',
+    variant: 'ghost',
+  },
+]

package/src/_old/_table/table-advanced.tsx

@@ -0,0 +1,311 @@
+import { cn } from '@gentleduck/libs/cn'
+import { ArrowDownIcon, ArrowUpDown, ArrowUpIcon } from 'lucide-react'
+import React from 'react'
+import { Button } from '../button'
+import { Checkbox } from '../checkbox'
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '../dropdown-menu'
+import { Input } from '../input'
+import { ScrollArea } from '../scroll-area/'
+import { TableHead, TableHeader, TableRow } from '../table'
+import { Table, TableBody } from './table'
+import { dropdownMenuOptions } from './table-advanced.constants'
+import {
+  DuckTableBodyProps,
+  DuckTableContextType,
+  DuckTableHeadCheckboxProps,
+  DuckTableHeaderProps,
+  DuckTableHeadSelectableProps,
+  DuckTableProps,
+  DuckTableProviderProps,
+  DuckTableRowCheckboxProps,
+  GetColumnLabel,
+  TableColumnType,
+  TableContentDataType,
+  TableSearchStateType,
+} from './table-advanced.types'
+
+export const DuckTableContext = React.createContext<DuckTableContextType<any> | null>(null)
+
+export function useDuckTable<TColumnName extends readonly TableColumnType[]>() {
+  const context = React.useContext<DuckTableContextType<GetColumnLabel<TColumnName>>>(
+    DuckTableContext as unknown as React.Context<DuckTableContextType<GetColumnLabel<TColumnName>>>,
+  )
+  if (!context) {
+    throw new Error('useTableProvider must be used within an TableProvider')
+  }
+  return context
+}
+
+export function DuckTableProvider<TColumnName extends string[]>({
+  table_rows,
+  table_columns,
+  children,
+  className,
+  ...props
+}: DuckTableProviderProps<TColumnName>) {
+  const [search, setSearch] = React.useState<TableSearchStateType>({
+    query: '',
+    queryBy: [],
+  })
+
+  const [tableColumns, setTableColumns] = React.useState<Map<string, TableColumnType>>(
+    new Map(table_columns.map((column) => [column.label, column])),
+  )
+
+  const [selectedRows, setSelectedRows] = React.useState<Set<TableContentDataType<TColumnName>>>(new Set())
+
+  const DuckTable = DuckTableContext //<TColumnName>()
+
+  return (
+    <DuckTable.Provider
+      value={{
+        search,
+        selectedRows,
+        setSearch,
+        setSelectedRows,
+        setTableColumns,
+        tableColumns,
+        tableRows: table_rows,
+      }}>
+      <div className={cn(`w-full- flex flex-col gap-4 w-[800px] h-[500px]`, className)} {...props}>
+        {children}
+      </div>
+    </DuckTable.Provider>
+  )
+}
+DuckTableProvider.displayName = 'DuckTableProvider'
+
+export function DuckTable({ wrapper, className, children, ...props }: DuckTableProps) {
+  const { className: wrapperClassName, ...wrapperProps } = wrapper! ?? {}
+
+  return (
+    <ScrollArea
+      className={cn('border border-border rounded-lg !overflow-visible relative', wrapperClassName)}
+      {...wrapperProps}>
+      <Table {...props}>{children}</Table>
+    </ScrollArea>
+  )
+}
+DuckTable.displayName = 'DuckTable'
+
+// ------------------------------------------------------------------------------------------------
+
+export function DuckTableHeader({}: DuckTableHeaderProps) {
+  const { tableColumns } = useDuckTable()
+  return (
+    <>
+      <TableHeader>
+        <TableRow>
+          {Array.from(tableColumns.values())?.map((column, idx) => {
+            const { children, className, sortable, label, showLabel, ...props } = column
+
+            const Component = () =>
+              sortable ? (
+                <DuckTableHeadSelectable column={column} label={(label as string) ?? children} showLabel={showLabel} />
+              ) : (
+                <span className="capitalize">{(label as string) ?? children}</span>
+              )
+
+            return (
+              !column['aria-hidden'] && (
+                <React.Fragment key={idx}>
+                  <TableHead
+                    className={cn('py-2', idx === 0 && 'justify-start ', sortable && 'px-2', className)}
+                    {...props}>
+                    {idx === 0 ? (
+                      <div className="flex items-center gap-4">
+                        <DuckTableHeadCheckbox className={cn(sortable && 'justify-end')} type="header" />
+                        {/*NOTE: Rendering Sorting else rendering label*/}
+                        <Component />
+                      </div>
+                    ) : (
+                      <Component />
+                    )}
+                  </TableHead>
+                </React.Fragment>
+              )
+            )
+          })}
+        </TableRow>
+      </TableHeader>
+    </>
+  )
+}
+DuckTableHeader.displayName = 'TableCustomViewHeader'
+
+export function DuckTableHeadCheckbox({ className, ...props }: DuckTableHeadCheckboxProps) {
+  const { selectedRows, setSelectedRows, tableRows } = useDuckTable()
+
+  return (
+    <div className={cn('flex items-center w-fit data-[state=open]:bg-accent text-xs capitalize', className)} {...props}>
+      <Checkbox
+        checked={
+          selectedRows.size === tableRows.length
+            ? true
+            : selectedRows.size < tableRows.length && selectedRows.size
+              ? 'indeterminate'
+              : false
+        }
+        className="border-border"
+        onClick={() => {
+          setSelectedRows(() => {
+            if (selectedRows.size === tableRows.length) {
+              return new Set()
+            }
+            return new Set(tableRows.map((item) => item))
+          })
+        }}
+      />
+    </div>
+  )
+}
+
+export function DuckTableHeadSelectable<TSort extends boolean = true>({
+  column,
+  label,
+  showLabel,
+  children,
+}: DuckTableHeadSelectableProps<TSort>) {
+  const { setTableColumns } = useDuckTable()
+
+  return (
+    <div className={cn('flex items-center space-x-2')}>
+      {(dropdownMenuOptions?.length ?? 0) > 0 && (
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              aria-controls="dropdown-menu"
+              aria-label="table-column-options"
+              aria-sort={column['aria-sort']}
+              className="data-[state=open]:bg-accent [&>div]:justify-between w-full [&>div]:w-full capitalize"
+              label={
+                showLabel
+                  ? {
+                      children: label.toString() + ' options',
+                      className: 'capitalize',
+                      showLabel: true,
+                      side: 'top',
+                    }
+                  : undefined
+              }
+              name="dropdown-menu-trigger"
+              secondIcon={
+                column['aria-sort'] === 'ascending' ? (
+                  <ArrowDownIcon className="text-muted-foreground" />
+                ) : column['aria-sort'] === 'descending' ? (
+                  <ArrowUpIcon className="text-muted-foreground" />
+                ) : (
+                  <ArrowUpDown className="text-muted-foreground" />
+                )
+              }
+              size="sm"
+              variant="ghost">
+              {(label as string) ?? children}
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-48">
+            <DropdownMenuGroup>
+              {dropdownMenuOptions.map((item, idx) => {
+                return (
+                  <>
+                    {idx === dropdownMenuOptions.length - 1 && <DropdownMenuSeparator />}
+                    <DropdownMenuItem
+                      className="p-0"
+                      key={idx}
+                      onClick={() => {
+                        setTableColumns((prev) => {
+                          const newSet = new Map(prev)
+
+                          if (item.children === ('hide' as 'other')) {
+                            newSet.set(label, {
+                              ...column,
+                              'aria-hidden': true,
+                              hidden: true,
+                            })
+                          } else {
+                            if (newSet.get(label)?.label === item.children) {
+                              newSet.set(label, {
+                                ...column,
+                                'aria-sort': 'none',
+                              })
+                            } else {
+                              newSet.set(label, {
+                                ...column,
+                                'aria-sort': item.children,
+                              })
+                            }
+                          }
+
+                          return newSet
+                        })
+                      }}>
+                      <Button {...item} className={cn('w-full justify-start capitalize', item.className)}>
+                        {item.children}
+                      </Button>
+                    </DropdownMenuItem>
+                  </>
+                )
+              })}
+            </DropdownMenuGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      )}
+    </div>
+  )
+}
+
+export function DuckTableBody({ children }: DuckTableBodyProps) {
+  return <TableBody>{children}</TableBody>
+}
+
+export function DuckTableRowCheckbox<TColumnName extends readonly TableColumnType[]>({
+  className,
+  tableRow,
+  ...props
+}: DuckTableRowCheckboxProps<TColumnName>) {
+  const { selectedRows, setSelectedRows } = useDuckTable()
+
+  return (
+    <div className={cn('flex items-center w-fit data-[state=open]:bg-accent text-xs capitalize', className)} {...props}>
+      <Checkbox
+        checked={selectedRows.has(tableRow) ? true : false}
+        className="border-border"
+        onClick={() => {
+          setSelectedRows(() => {
+            if (selectedRows.has(tableRow)) {
+              return new Set(Array.from(selectedRows.values()).filter((item) => item !== tableRow))
+            }
+            return new Set([...selectedRows, tableRow])
+          })
+        }}
+      />
+    </div>
+  )
+}
+
+export interface DuckTableTopBarProps extends React.HTMLProps<HTMLDivElement> {}
+
+export function DuckTableTopBar({ className, children, ...props }: DuckTableTopBarProps) {
+  return (
+    <div className={cn('', className)} {...props}>
+      {children}
+    </div>
+  )
+}
+
+export interface DuckTableSearchInputProps extends React.HTMLProps<HTMLDivElement> {}
+
+export function DuckTableSearchInput({ className, ...props }: DuckTableSearchInputProps) {
+  return (
+    <div className={cn('flex-1', className)} {...props}>
+      <Input placeholder="Search..." />
+    </div>
+  )
+}