diff --git a/apps/v4/app/(app)/(root)/cards/skeleton/ui-elements.tsx b/apps/v4/app/(app)/(root)/cards/skeleton/ui-elements.tsx index 3ab321df4fb..d58dea791da 100644 --- a/apps/v4/app/(app)/(root)/cards/skeleton/ui-elements.tsx +++ b/apps/v4/app/(app)/(root)/cards/skeleton/ui-elements.tsx @@ -35,7 +35,7 @@ export function UIElements() {
- +
diff --git a/apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx b/apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx index 58c7fef6562..0ba2f328794 100644 --- a/apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx +++ b/apps/v4/app/(app)/examples/authentication/components/user-auth-form.tsx @@ -57,7 +57,7 @@ export function UserAuthForm({ Or continue with diff --git a/apps/v4/app/(app)/examples/authentication/page.tsx b/apps/v4/app/(app)/examples/authentication/page.tsx index aa0147f6954..70871ca0da1 100644 --- a/apps/v4/app/(app)/examples/authentication/page.tsx +++ b/apps/v4/app/(app)/examples/authentication/page.tsx @@ -54,7 +54,7 @@ export default function AuthenticationPage() { strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" - className="mr-2 h-6 w-6" + className="mr-2 size-6" > diff --git a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx index def0a697fe3..9c667a7e6e7 100644 --- a/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx +++ b/apps/v4/app/(app)/examples/dashboard/components/data-table.tsx @@ -567,7 +567,7 @@ export function DataTable({
\n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-luma/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-luma/dashboard-01.json b/apps/v4/public/r/styles/base-luma/dashboard-01.json index 210b6a6fec0..8940f998828 100644 --- a/apps/v4/public/r/styles/base-luma/dashboard-01.json +++ b/apps/v4/public/r/styles/base-luma/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/base-luma/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-luma/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-luma/ui/chart\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-luma/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-luma/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-luma/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/base-luma/sidebar-16.json b/apps/v4/public/r/styles/base-luma/sidebar-16.json index 8a9c5b90c3d..da31be97bd4 100644 --- a/apps/v4/public/r/styles/base-luma/sidebar-16.json +++ b/apps/v4/public/r/styles/base-luma/sidebar-16.json @@ -52,7 +52,7 @@ }, { "path": "registry/base-luma/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-luma/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-luma/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\nimport { useSidebar } from \"@/registry/base-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-luma/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-luma/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport { Separator } from \"@/registry/base-luma/ui/separator\"\nimport { useSidebar } from \"@/registry/base-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-lyra/chart.json b/apps/v4/public/r/styles/base-lyra/chart.json index c50fb48c2b0..e7746e3206b 100644 --- a/apps/v4/public/r/styles/base-lyra/chart.json +++ b/apps/v4/public/r/styles/base-lyra/chart.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-lyra/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-lyra/dashboard-01.json b/apps/v4/public/r/styles/base-lyra/dashboard-01.json index 48732352890..4044765db4a 100644 --- a/apps/v4/public/r/styles/base-lyra/dashboard-01.json +++ b/apps/v4/public/r/styles/base-lyra/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/base-lyra/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-lyra/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/base-lyra/sidebar-16.json b/apps/v4/public/r/styles/base-lyra/sidebar-16.json index 35f477f3fd1..67155cd18b4 100644 --- a/apps/v4/public/r/styles/base-lyra/sidebar-16.json +++ b/apps/v4/public/r/styles/base-lyra/sidebar-16.json @@ -52,7 +52,7 @@ }, { "path": "registry/base-lyra/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { useSidebar } from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-lyra/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { useSidebar } from \"@/registry/base-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-maia/chart.json b/apps/v4/public/r/styles/base-maia/chart.json index 3ae8f7200e1..ea5af63777b 100644 --- a/apps/v4/public/r/styles/base-maia/chart.json +++ b/apps/v4/public/r/styles/base-maia/chart.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-maia/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-maia/dashboard-01.json b/apps/v4/public/r/styles/base-maia/dashboard-01.json index 28ddea88f36..6b52894017e 100644 --- a/apps/v4/public/r/styles/base-maia/dashboard-01.json +++ b/apps/v4/public/r/styles/base-maia/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/base-maia/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-maia/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/base-maia/sidebar-16.json b/apps/v4/public/r/styles/base-maia/sidebar-16.json index b946bd07421..c1876f07dd6 100644 --- a/apps/v4/public/r/styles/base-maia/sidebar-16.json +++ b/apps/v4/public/r/styles/base-maia/sidebar-16.json @@ -52,7 +52,7 @@ }, { "path": "registry/base-maia/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { useSidebar } from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-maia/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { useSidebar } from \"@/registry/base-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-mira/chart.json b/apps/v4/public/r/styles/base-mira/chart.json index fa63e93cf4d..f8854e2c66e 100644 --- a/apps/v4/public/r/styles/base-mira/chart.json +++ b/apps/v4/public/r/styles/base-mira/chart.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-mira/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-mira/dashboard-01.json b/apps/v4/public/r/styles/base-mira/dashboard-01.json index e29e1bf47ab..ebbc4ef3445 100644 --- a/apps/v4/public/r/styles/base-mira/dashboard-01.json +++ b/apps/v4/public/r/styles/base-mira/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/base-mira/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-mira/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/base-mira/sidebar-16.json b/apps/v4/public/r/styles/base-mira/sidebar-16.json index e565f46e513..8e116632197 100644 --- a/apps/v4/public/r/styles/base-mira/sidebar-16.json +++ b/apps/v4/public/r/styles/base-mira/sidebar-16.json @@ -52,7 +52,7 @@ }, { "path": "registry/base-mira/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-mira/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { useSidebar } from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-mira/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { useSidebar } from \"@/registry/base-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-nova/chart.json b/apps/v4/public/r/styles/base-nova/chart.json index cb215615bfd..b6c874757b4 100644 --- a/apps/v4/public/r/styles/base-nova/chart.json +++ b/apps/v4/public/r/styles/base-nova/chart.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-nova/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-nova/dashboard-01.json b/apps/v4/public/r/styles/base-nova/dashboard-01.json index 670b281b742..ba942f7856c 100644 --- a/apps/v4/public/r/styles/base-nova/dashboard-01.json +++ b/apps/v4/public/r/styles/base-nova/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/base-nova/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-nova/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/base-nova/sidebar-16.json b/apps/v4/public/r/styles/base-nova/sidebar-16.json index 5a477812c3f..279cf477389 100644 --- a/apps/v4/public/r/styles/base-nova/sidebar-16.json +++ b/apps/v4/public/r/styles/base-nova/sidebar-16.json @@ -52,7 +52,7 @@ }, { "path": "registry/base-nova/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-nova/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { useSidebar } from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-nova/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { useSidebar } from \"@/registry/base-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-rhea/chart.json b/apps/v4/public/r/styles/base-rhea/chart.json index 9e27dbb1ca5..ceff89245f6 100644 --- a/apps/v4/public/r/styles/base-rhea/chart.json +++ b/apps/v4/public/r/styles/base-rhea/chart.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-rhea/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-rhea/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-rhea/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-rhea/dashboard-01.json b/apps/v4/public/r/styles/base-rhea/dashboard-01.json index ddac2be9d5b..e7b446d93a6 100644 --- a/apps/v4/public/r/styles/base-rhea/dashboard-01.json +++ b/apps/v4/public/r/styles/base-rhea/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/base-rhea/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-rhea/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-rhea/ui/badge\"\nimport { Button } from \"@/registry/base-rhea/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-rhea/ui/chart\"\nimport { Checkbox } from \"@/registry/base-rhea/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-rhea/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-rhea/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-rhea/ui/input\"\nimport { Label } from \"@/registry/base-rhea/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-rhea/ui/select\"\nimport { Separator } from \"@/registry/base-rhea/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-rhea/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-rhea/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-rhea/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-rhea/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/base-rhea/sidebar-16.json b/apps/v4/public/r/styles/base-rhea/sidebar-16.json index c2f535a93c6..f81476cfa76 100644 --- a/apps/v4/public/r/styles/base-rhea/sidebar-16.json +++ b/apps/v4/public/r/styles/base-rhea/sidebar-16.json @@ -52,7 +52,7 @@ }, { "path": "registry/base-rhea/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-rhea/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-rhea/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-rhea/ui/button\"\nimport { Separator } from \"@/registry/base-rhea/ui/separator\"\nimport { useSidebar } from \"@/registry/base-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-rhea/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-rhea/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-rhea/ui/button\"\nimport { Separator } from \"@/registry/base-rhea/ui/separator\"\nimport { useSidebar } from \"@/registry/base-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-sera/chart.json b/apps/v4/public/r/styles/base-sera/chart.json index d31a18d0e5e..171aa28681b 100644 --- a/apps/v4/public/r/styles/base-sera/chart.json +++ b/apps/v4/public/r/styles/base-sera/chart.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-sera/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-sera/dashboard-01.json b/apps/v4/public/r/styles/base-sera/dashboard-01.json index 0fd7321c3bf..2da633b5970 100644 --- a/apps/v4/public/r/styles/base-sera/dashboard-01.json +++ b/apps/v4/public/r/styles/base-sera/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/base-sera/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-sera/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-sera/ui/chart\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-sera/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-sera/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-sera/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/base-sera/sidebar-16.json b/apps/v4/public/r/styles/base-sera/sidebar-16.json index 480a9e272af..3351aa8b7f7 100644 --- a/apps/v4/public/r/styles/base-sera/sidebar-16.json +++ b/apps/v4/public/r/styles/base-sera/sidebar-16.json @@ -52,7 +52,7 @@ }, { "path": "registry/base-sera/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-sera/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport { useSidebar } from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-sera/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport { useSidebar } from \"@/registry/base-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/base-vega/chart.json b/apps/v4/public/r/styles/base-vega/chart.json index 1fc69974ad4..78975e8c1dc 100644 --- a/apps/v4/public/r/styles/base-vega/chart.json +++ b/apps/v4/public/r/styles/base-vega/chart.json @@ -10,7 +10,7 @@ "files": [ { "path": "registry/base-vega/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/base-vega/dashboard-01.json b/apps/v4/public/r/styles/base-vega/dashboard-01.json index a353d12eb5f..888f76f1219 100644 --- a/apps/v4/public/r/styles/base-vega/dashboard-01.json +++ b/apps/v4/public/r/styles/base-vega/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/base-vega/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/base-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/base-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/base-vega/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n return (\n \n \n Drag to reorder\n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n )\n}\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n if (isAssigned) {\n return row.original.reviewer\n }\n return (\n <>\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n \n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n }\n >\n \n Open menu\n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n return (\n \n
\n \n \n \n \n \n \n \n Outline\n Past Performance\n Key Personnel\n Focus Documents\n \n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n }\n >\n \n Columns\n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n items={[10, 20, 30, 40, 50].map((pageSize) => ({\n label: `${pageSize}`,\n value: `${pageSize}`,\n }))}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\nconst chartData = [\n {\n month: \"January\",\n desktop: 186,\n mobile: 80,\n },\n {\n month: \"February\",\n desktop: 305,\n mobile: 200,\n },\n {\n month: \"March\",\n desktop: 237,\n mobile: 120,\n },\n {\n month: \"April\",\n desktop: 73,\n mobile: 190,\n },\n {\n month: \"May\",\n desktop: 209,\n mobile: 130,\n },\n {\n month: \"June\",\n desktop: 214,\n mobile: 140,\n },\n]\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n Table of Contents\n \n \n Executive Summary\n \n \n Technical Approach\n \n Design\n Capabilities\n \n Focus Documents\n \n Narrative\n Cover Page\n \n \n \n
\n
\n \n \n \n \n \n \n \n Done\n In Progress\n Not Started\n \n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n Eddie Lake\n \n Jamik Tashpulatov\n \n Emily Whalen\n \n \n \n
\n
\n
\n \n \n \n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n }\n >\n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/base-vega/sidebar-16.json b/apps/v4/public/r/styles/base-vega/sidebar-16.json index d927dc28f05..6c1fbb613f5 100644 --- a/apps/v4/public/r/styles/base-vega/sidebar-16.json +++ b/apps/v4/public/r/styles/base-vega/sidebar-16.json @@ -52,7 +52,7 @@ }, { "path": "registry/base-vega/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-vega/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { useSidebar } from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/base-vega/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/base-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { useSidebar } from \"@/registry/base-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/breadcrumb-responsive.json b/apps/v4/public/r/styles/new-york-v4/breadcrumb-responsive.json index 5c2a19b43d7..7f019efd6e8 100644 --- a/apps/v4/public/r/styles/new-york-v4/breadcrumb-responsive.json +++ b/apps/v4/public/r/styles/new-york-v4/breadcrumb-responsive.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/breadcrumb-responsive.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst items = [\n { href: \"#\", label: \"Home\" },\n { href: \"#\", label: \"Documentation\" },\n { href: \"#\", label: \"Build Your Application\" },\n { href: \"#\", label: \"Data Fetching\" },\n { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n return (\n \n \n \n \n {items[0].label}\n \n \n \n {items.length > ITEMS_TO_DISPLAY ? (\n <>\n \n {isDesktop ? (\n \n \n \n \n \n {items.slice(1, -2).map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n ) : (\n \n \n \n \n \n \n Navigate to\n \n Select a page to navigate to.\n \n \n
\n {items.slice(1, -2).map((item, index) => (\n \n {item.label}\n \n ))}\n
\n \n \n \n \n \n \n \n )}\n \n \n \n ) : null}\n {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n \n {item.href ? (\n <>\n \n {item.label}\n \n \n \n ) : (\n \n {item.label}\n \n )}\n \n ))}\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport Link from \"next/link\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport {\n Breadcrumb,\n BreadcrumbEllipsis,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst items = [\n { href: \"#\", label: \"Home\" },\n { href: \"#\", label: \"Documentation\" },\n { href: \"#\", label: \"Build Your Application\" },\n { href: \"#\", label: \"Data Fetching\" },\n { label: \"Caching and Revalidating\" },\n]\n\nconst ITEMS_TO_DISPLAY = 3\n\nexport default function BreadcrumbResponsive() {\n const [open, setOpen] = React.useState(false)\n const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n\n return (\n \n \n \n \n {items[0].label}\n \n \n \n {items.length > ITEMS_TO_DISPLAY ? (\n <>\n \n {isDesktop ? (\n \n \n \n \n \n {items.slice(1, -2).map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n ) : (\n \n \n \n \n \n \n Navigate to\n \n Select a page to navigate to.\n \n \n
\n {items.slice(1, -2).map((item, index) => (\n \n {item.label}\n \n ))}\n
\n \n \n \n \n \n \n \n )}\n \n \n \n ) : null}\n {items.slice(-ITEMS_TO_DISPLAY + 1).map((item, index) => (\n \n {item.href ? (\n <>\n \n {item.label}\n \n \n \n ) : (\n \n {item.label}\n \n )}\n \n ))}\n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json b/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json index b92a234f998..69081bb4d1c 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-axes.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-axes.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with axes\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaAxes() {\n return (\n \n \n Area Chart - Axes\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n \n } />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with axes\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaAxes() {\n return (\n \n \n Area Chart - Axes\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n \n } />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-default.json b/apps/v4/public/r/styles/new-york-v4/chart-area-default.json index c4f2490bab5..1c9ecf3d885 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-default.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-default.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-default.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple area chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaDefault() {\n return (\n \n \n Area Chart\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple area chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaDefault() {\n return (\n \n \n Area Chart\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json b/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json index fb6b255c549..18a67220598 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-gradient.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-gradient.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with gradient fill\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaGradient() {\n return (\n \n \n Area Chart - Gradient\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with gradient fill\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaGradient() {\n return (\n \n \n Area Chart - Gradient\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json b/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json index 1c6556f0781..2c1852288b1 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-icons.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-icons.tsx", - "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with icons\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n icon: TrendingDown,\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n icon: TrendingUp,\n },\n} satisfies ChartConfig\n\nexport function ChartAreaIcons() {\n return (\n \n \n Area Chart - Icons\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n } />\n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingDown, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with icons\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n icon: TrendingDown,\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n icon: TrendingUp,\n },\n} satisfies ChartConfig\n\nexport function ChartAreaIcons() {\n return (\n \n \n Area Chart - Icons\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n } />\n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json b/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json index f5425a2c0a4..7d911d959b7 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-legend.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-legend.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with a legend\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaLegend() {\n return (\n \n \n Area Chart - Legend\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n } />\n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"An area chart with a legend\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaLegend() {\n return (\n \n \n Area Chart - Legend\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n } />\n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json b/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json index 64685e01ea4..8296a888ef3 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-linear.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-linear.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear area chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaLinear() {\n return (\n \n \n Area Chart - Linear\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear area chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaLinear() {\n return (\n \n \n Area Chart - Linear\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json index 443ae99a35a..8ec693fee0d 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked-expand.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-stacked-expand.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart with expand stacking\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-3)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaStackedExpand() {\n return (\n \n \n Area Chart - Stacked Expanded\n \n Showing total visitors for the last 6months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart with expand stacking\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80, other: 45 },\n { month: \"February\", desktop: 305, mobile: 200, other: 100 },\n { month: \"March\", desktop: 237, mobile: 120, other: 150 },\n { month: \"April\", desktop: 73, mobile: 190, other: 50 },\n { month: \"May\", desktop: 209, mobile: 130, other: 100 },\n { month: \"June\", desktop: 214, mobile: 140, other: 160 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-3)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaStackedExpand() {\n return (\n \n \n Area Chart - Stacked Expanded\n \n Showing total visitors for the last 6months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json index eb6e4f050af..fa5979e062b 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-stacked.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-stacked.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaStacked() {\n return (\n \n \n Area Chart - Stacked\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked area chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartAreaStacked() {\n return (\n \n \n Area Chart - Stacked\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-area-step.json b/apps/v4/public/r/styles/new-york-v4/chart-area-step.json index dc4e308b883..8a73100fec4 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-area-step.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-area-step.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-area-step.tsx", - "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A step area chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n icon: Activity,\n },\n} satisfies ChartConfig\n\nexport function ChartAreaStep() {\n return (\n \n \n Area Chart - Step\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { Activity, TrendingUp } from \"lucide-react\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A step area chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n icon: Activity,\n },\n} satisfies ChartConfig\n\nexport function ChartAreaStep() {\n return (\n \n \n Area Chart - Step\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json index b2edaf6beec..e3fe71536f3 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-active.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\nimport type { BarShapeProps } from \"recharts/types/cartesian/Bar\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 2\n\nexport function ChartBarActive() {\n return (\n \n \n Bar Chart - Active\n January - June 2024\n \n \n \n \n \n \n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n }\n />\n \n index === ACTIVE_INDEX ? (\n \n ) : (\n \n )\n }\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\nimport type { BarShapeProps } from \"recharts/types/cartesian/Bar\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 2\n\nexport function ChartBarActive() {\n return (\n \n \n Bar Chart - Active\n January - June 2024\n \n \n \n \n \n \n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n }\n />\n \n index === ACTIVE_INDEX ? (\n \n ) : (\n \n )\n }\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json index b55c7c7d469..bdbe10227c2 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-default.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-default.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDefault() {\n return (\n \n \n Bar Chart\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarDefault() {\n return (\n \n \n Bar Chart\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json index ce4a1720f1b..af75b59391c 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-horizontal.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-horizontal.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A horizontal bar chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarHorizontal() {\n return (\n \n \n Bar Chart - Horizontal\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A horizontal bar chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarHorizontal() {\n return (\n \n \n Bar Chart - Horizontal\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json index 1829f1a322c..8675bbe4ab4 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-label-custom.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-label-custom.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a custom label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-2)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n label: {\n color: \"var(--background)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarLabelCustom() {\n return (\n \n \n Bar Chart - Custom Label\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n hide\n />\n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a custom label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-2)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n label: {\n color: \"var(--background)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarLabelCustom() {\n return (\n \n \n Bar Chart - Custom Label\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n hide\n />\n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json index 82a9edf5889..a477c43c24b 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-label.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-label.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarLabel() {\n return (\n \n \n Bar Chart - Label\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, LabelList, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with a label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarLabel() {\n return (\n \n \n Bar Chart - Label\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json index 06510b8b5f4..11e78351650 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-mixed.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-mixed.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A mixed bar chart\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarMixed() {\n return (\n \n \n Bar Chart - Mixed\n January - June 2024\n \n \n \n \n \n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, XAxis, YAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A mixed bar chart\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarMixed() {\n return (\n \n \n Bar Chart - Mixed\n January - June 2024\n \n \n \n \n \n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json index e62ed1e07da..164f58ec00f 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-multiple.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-multiple.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple bar chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarMultiple() {\n return (\n \n \n Bar Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple bar chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarMultiple() {\n return (\n \n \n Bar Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json index 958c4721d12..6467999e8dd 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-negative.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-negative.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with negative values\"\n\nconst chartData = [\n { month: \"January\", visitors: 186 },\n { month: \"February\", visitors: 205 },\n { month: \"March\", visitors: -207 },\n { month: \"April\", visitors: 173 },\n { month: \"May\", visitors: -209 },\n { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarNegative() {\n return (\n \n \n Bar Chart - Negative\n January - June 2024\n \n \n \n \n \n }\n />\n \n \n {chartData.map((item) => (\n 0 ? \"var(--chart-1)\" : \"var(--chart-2)\"}\n />\n ))}\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Cell, LabelList } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with negative values\"\n\nconst chartData = [\n { month: \"January\", visitors: 186 },\n { month: \"February\", visitors: 205 },\n { month: \"March\", visitors: -207 },\n { month: \"April\", visitors: 173 },\n { month: \"May\", visitors: -209 },\n { month: \"June\", visitors: 214 },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarNegative() {\n return (\n \n \n Bar Chart - Negative\n January - June 2024\n \n \n \n \n \n }\n />\n \n \n {chartData.map((item) => (\n 0 ? \"var(--chart-1)\" : \"var(--chart-2)\"}\n />\n ))}\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json index 42de02b72ea..d3950767509 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-stacked.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-bar-stacked.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarStacked() {\n return (\n \n \n Bar Chart - Stacked + Legend\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n } />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartBarStacked() {\n return (\n \n \n Bar Chart - Stacked + Legend\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n } />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-default.json b/apps/v4/public/r/styles/new-york-v4/chart-line-default.json index 92dabee542c..6bd4ba3949a 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-default.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-default.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-default.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineDefault() {\n return (\n \n \n Line Chart\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineDefault() {\n return (\n \n \n Line Chart\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json index dc620e7a2cd..5a7f0ccda2b 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-colors.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-dots-colors.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots and colors\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"var(--chart-2)\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineDotsColors() {\n return (\n \n \n Line Chart - Dots Colors\n January - June 2024\n \n \n \n \n \n \n }\n />\n {\n return (\n \n )\n }}\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Dot, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots and colors\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"var(--chart-2)\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineDotsColors() {\n return (\n \n \n Line Chart - Dots Colors\n January - June 2024\n \n \n \n \n \n \n }\n />\n {\n return (\n \n )\n }}\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json index 78e6e964eb5..d3937eee7e0 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots-custom.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-dots-custom.tsx", - "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with custom dots\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineDotsCustom() {\n return (\n \n \n Line Chart - Custom Dots\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n {\n if (cx == null || cy == null) {\n return null\n }\n\n const r = 24\n\n return (\n \n )\n }}\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { GitCommitVertical, TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with custom dots\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineDotsCustom() {\n return (\n \n \n Line Chart - Custom Dots\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n {\n if (cx == null || cy == null) {\n return null\n }\n\n const r = 24\n\n return (\n \n )\n }}\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json b/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json index db61ec4edd0..4c0f6fe73e1 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-dots.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-dots.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineDots() {\n return (\n \n \n Line Chart - Dots\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with dots\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineDots() {\n return (\n \n \n Line Chart - Dots\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json index 8910a45628c..6f5ea1a0066 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-label-custom.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-label-custom.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a custom label\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"var(--chart-2)\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineLabelCustom() {\n return (\n \n \n Line Chart - Custom Label\n January - June 2024\n \n \n \n \n \n \n }\n />\n \n \n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a custom label\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n color: \"var(--chart-2)\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineLabelCustom() {\n return (\n \n \n Line Chart - Custom Label\n January - June 2024\n \n \n \n \n \n \n }\n />\n \n \n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-label.json b/apps/v4/public/r/styles/new-york-v4/chart-line-label.json index 3e0d2f132b3..3b17cab58ec 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-label.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-label.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-label.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineLabel() {\n return (\n \n \n Line Chart - Label\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, LabelList, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with a label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineLabel() {\n return (\n \n \n Line Chart - Label\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json b/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json index 69708ed805b..152b488b70f 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-linear.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-linear.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear line chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineLinear() {\n return (\n \n \n Line Chart - Linear\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A linear line chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineLinear() {\n return (\n \n \n Line Chart - Linear\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json index 61cba68adc8..bdb834b8ea0 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-multiple.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-multiple.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple line chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineMultiple() {\n return (\n \n \n Line Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n
\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A multiple line chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineMultiple() {\n return (\n \n \n Line Chart - Multiple\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n } />\n \n \n \n \n \n \n
\n
\n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n
\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-line-step.json b/apps/v4/public/r/styles/new-york-v4/chart-line-step.json index 9596ff0820c..6be5d003e04 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-line-step.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-line-step.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-line-step.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with step\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineStep() {\n return (\n \n \n Line Chart - Step\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { CartesianGrid, Line, LineChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A line chart with step\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 73 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartLineStep() {\n return (\n \n \n Line Chart - Step\n January - June 2024\n \n \n \n \n \n value.slice(0, 3)}\n />\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json index ed137c95db9..9ba12f9038d 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorShapeProps } from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 0\n\nexport function ChartPieDonutActive() {\n return (\n \n \n Pie Chart - Donut Active\n January - June 2024\n \n \n \n \n }\n />\n \n index === ACTIVE_INDEX ? (\n \n ) : (\n \n )\n }\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorShapeProps } from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 0\n\nexport function ChartPieDonutActive() {\n return (\n \n \n Pie Chart - Donut Active\n January - June 2024\n \n \n \n \n }\n />\n \n index === ACTIVE_INDEX ? (\n \n ) : (\n \n )\n }\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json index c672e336a19..ea7f5993a66 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-text.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-donut-text.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with text\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieDonutText() {\n const totalVisitors = React.useMemo(() => {\n return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n \n \n Pie Chart - Donut with Text\n January - June 2024\n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {totalVisitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with text\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 287, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 190, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieDonutText() {\n const totalVisitors = React.useMemo(() => {\n return chartData.reduce((acc, curr) => acc + curr.visitors, 0)\n }, [])\n\n return (\n \n \n Pie Chart - Donut with Text\n January - June 2024\n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {totalVisitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json index 5fa708f67fa..0bb3a36a57a 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-donut.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieDonut() {\n return (\n \n \n Pie Chart - Donut\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieDonut() {\n return (\n \n \n Pie Chart - Donut\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json index 9879027b00b..6b96aad4f6c 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-interactive.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type {\n PieSectorDataItem,\n PieSectorShapeProps,\n} from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartStyle,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport const description = \"An interactive pie chart\"\n\nconst desktopData = [\n { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n desktop: {\n label: \"Desktop\",\n },\n mobile: {\n label: \"Mobile\",\n },\n january: {\n label: \"January\",\n color: \"var(--chart-1)\",\n },\n february: {\n label: \"February\",\n color: \"var(--chart-2)\",\n },\n march: {\n label: \"March\",\n color: \"var(--chart-3)\",\n },\n april: {\n label: \"April\",\n color: \"var(--chart-4)\",\n },\n may: {\n label: \"May\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieInteractive() {\n const id = \"pie-interactive\"\n const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n const activeIndex = React.useMemo(\n () => desktopData.findIndex((item) => item.month === activeMonth),\n [activeMonth]\n )\n const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n const renderPieShape = React.useCallback(\n ({ index, outerRadius = 0, ...props }: PieSectorShapeProps) => {\n if (index === activeIndex) {\n return (\n \n \n \n \n )\n }\n\n return \n },\n [activeIndex]\n )\n\n return (\n \n \n \n
\n Pie Chart - Interactive\n January - June 2024\n
\n \n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {desktopData[activeIndex].desktop.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type {\n PieSectorDataItem,\n PieSectorShapeProps,\n} from \"recharts/types/polar/Pie\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartStyle,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport const description = \"An interactive pie chart\"\n\nconst desktopData = [\n { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n desktop: {\n label: \"Desktop\",\n },\n mobile: {\n label: \"Mobile\",\n },\n january: {\n label: \"January\",\n color: \"var(--chart-1)\",\n },\n february: {\n label: \"February\",\n color: \"var(--chart-2)\",\n },\n march: {\n label: \"March\",\n color: \"var(--chart-3)\",\n },\n april: {\n label: \"April\",\n color: \"var(--chart-4)\",\n },\n may: {\n label: \"May\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieInteractive() {\n const id = \"pie-interactive\"\n const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n const activeIndex = React.useMemo(\n () => desktopData.findIndex((item) => item.month === activeMonth),\n [activeMonth]\n )\n const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n const renderPieShape = React.useCallback(\n ({ index, outerRadius = 0, ...props }: PieSectorShapeProps) => {\n if (index === activeIndex) {\n return (\n \n \n \n \n )\n }\n\n return \n },\n [activeIndex]\n )\n\n return (\n \n \n \n
\n Pie Chart - Interactive\n January - June 2024\n
\n \n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {desktopData[activeIndex].desktop.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json index 437c44569ab..8f1f6890427 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieLabelCustom() {\n return (\n \n \n Pie Chart - Custom Label\n January - June 2024\n \n \n \n \n }\n />\n {\n return (\n \n {payload.visitors}\n \n )\n }}\n nameKey=\"browser\"\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieLabelCustom() {\n return (\n \n \n Pie Chart - Custom Label\n January - June 2024\n \n \n \n \n }\n />\n {\n return (\n \n {payload.visitors}\n \n )\n }}\n nameKey=\"browser\"\n />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json index 9a17db23ace..809055e9c93 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-list.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-label-list.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label list\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieLabelList() {\n return (\n \n \n Pie Chart - Label List\n January - June 2024\n \n \n \n \n }\n />\n \n \n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label list\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieLabelList() {\n return (\n \n \n Pie Chart - Label List\n January - June 2024\n \n \n \n \n }\n />\n \n \n chartConfig[value as keyof typeof chartConfig]?.label\n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json index cc163ad517a..a9310ea31c3 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-label.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieLabel() {\n return (\n \n \n Pie Chart - Label\n January - June 2024\n \n \n \n \n } />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a label\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieLabel() {\n return (\n \n \n Pie Chart - Label\n January - June 2024\n \n \n \n \n } />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json index c28dffc448b..9a043f0c207 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-separator-none.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-separator-none.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with no separator\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieSeparatorNone() {\n return (\n \n \n Pie Chart - Separator None\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with no separator\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieSeparatorNone() {\n return (\n \n \n Pie Chart - Separator None\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json index 1465aab8d4f..56caef87e16 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-simple.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-simple.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple pie chart\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieSimple() {\n return (\n \n \n Pie Chart\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A simple pie chart\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieSimple() {\n return (\n \n \n Pie Chart\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json index f69c93fcac2..33c6aa208e1 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-stacked.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-pie-stacked.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with stacked sections\"\n\nconst desktopData = [\n { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n desktop: {\n label: \"Desktop\",\n },\n mobile: {\n label: \"Mobile\",\n },\n january: {\n label: \"January\",\n color: \"var(--chart-1)\",\n },\n february: {\n label: \"February\",\n color: \"var(--chart-2)\",\n },\n march: {\n label: \"March\",\n color: \"var(--chart-3)\",\n },\n april: {\n label: \"April\",\n color: \"var(--chart-4)\",\n },\n may: {\n label: \"May\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieStacked() {\n return (\n \n \n Pie Chart - Stacked\n January - June 2024\n \n \n \n \n {\n return chartConfig[\n payload?.[0].dataKey as keyof typeof chartConfig\n ].label\n }}\n />\n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with stacked sections\"\n\nconst desktopData = [\n { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst mobileData = [\n { month: \"january\", mobile: 80, fill: \"var(--color-january)\" },\n { month: \"february\", mobile: 200, fill: \"var(--color-february)\" },\n { month: \"march\", mobile: 120, fill: \"var(--color-march)\" },\n { month: \"april\", mobile: 190, fill: \"var(--color-april)\" },\n { month: \"may\", mobile: 130, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n desktop: {\n label: \"Desktop\",\n },\n mobile: {\n label: \"Mobile\",\n },\n january: {\n label: \"January\",\n color: \"var(--chart-1)\",\n },\n february: {\n label: \"February\",\n color: \"var(--chart-2)\",\n },\n march: {\n label: \"March\",\n color: \"var(--chart-3)\",\n },\n april: {\n label: \"April\",\n color: \"var(--chart-4)\",\n },\n may: {\n label: \"May\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartPieStacked() {\n return (\n \n \n Pie Chart - Stacked\n January - June 2024\n \n \n \n \n {\n return chartConfig[\n payload?.[0].dataKey as keyof typeof chartConfig\n ].label\n }}\n />\n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json index 0ddbe0fd891..8082c574fa6 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-default.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-default.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarDefault() {\n return (\n \n \n Radar Chart\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n } />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarDefault() {\n return (\n \n \n Radar Chart\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n } />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json index 1cd6df6fb9e..231a694d8bc 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-dots.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-dots.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with dots\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarDots() {\n return (\n \n \n Radar Chart - Dots\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n } />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with dots\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarDots() {\n return (\n \n \n Radar Chart - Dots\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n } />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json index 8e2b2b25262..fe3cbac0e11 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-fill.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-grid-circle-fill.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 285 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleFill() {\n return (\n \n \n Radar Chart - Grid Circle Filled\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n } />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 285 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleFill() {\n return (\n \n \n Radar Chart - Grid Circle Filled\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n } />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json index ab2d745cb49..16272712757 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle-no-lines.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-grid-circle-no-lines.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleNoLines() {\n return (\n \n \n Radar Chart - Grid Circle - No lines\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle fill\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircleNoLines() {\n return (\n \n \n Radar Chart - Grid Circle - No lines\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json index 11429d4e68b..ac6a567e495 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-circle.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-grid-circle.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircle() {\n return (\n \n \n Radar Chart - Grid Circle\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid and circle\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCircle() {\n return (\n \n \n Radar Chart - Grid Circle\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json index 64ed452e4d7..de9c95149e2 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-custom.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-grid-custom.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom grid\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCustom() {\n return (\n \n \n Radar Chart - Grid Custom\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom grid\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridCustom() {\n return (\n \n \n Radar Chart - Grid Custom\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json index 91e94a2144a..0307a6d5307 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-fill.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-grid-fill.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid filled\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 285 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridFill() {\n return (\n \n \n Radar Chart - Grid Filled\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a grid filled\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 285 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 203 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 264 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridFill() {\n return (\n \n \n Radar Chart - Grid Filled\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json index d9fb43736bd..7427cf039f3 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-grid-none.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-grid-none.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with no grid\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridNone() {\n return (\n \n \n Radar Chart - Grid None\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with no grid\"\n\nconst chartData = [\n { month: \"January\", desktop: 186 },\n { month: \"February\", desktop: 305 },\n { month: \"March\", desktop: 237 },\n { month: \"April\", desktop: 273 },\n { month: \"May\", desktop: 209 },\n { month: \"June\", desktop: 214 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarGridNone() {\n return (\n \n \n Radar Chart - Grid None\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json index f96fdc63281..628f9223f8d 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-icons.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-icons.tsx", - "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with icons\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n icon: ArrowDownFromLine,\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n icon: ArrowUpFromLine,\n },\n} satisfies ChartConfig\n\nexport function ChartRadarIcons() {\n return (\n \n \n Radar Chart - Icons\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n } />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { ArrowDownFromLine, ArrowUpFromLine, TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with icons\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n icon: ArrowDownFromLine,\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n icon: ArrowUpFromLine,\n },\n} satisfies ChartConfig\n\nexport function ChartRadarIcons() {\n return (\n \n \n Radar Chart - Icons\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n } />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json index 64d203f5754..32274a9f1ad 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-label-custom.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-label-custom.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarLabelCustom() {\n return (\n \n \n Radar Chart - Custom Label\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n {\n const data = chartData[index]\n const yValue = typeof y === \"number\" ? y : 0\n\n return (\n \n {data.desktop}\n /\n {data.mobile}\n \n {data.month}\n \n \n )\n }}\n />\n\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a custom label\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarLabelCustom() {\n return (\n \n \n Radar Chart - Custom Label\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n {\n const data = chartData[index]\n const yValue = typeof y === \"number\" ? y : 0\n\n return (\n \n {data.desktop}\n /\n {data.mobile}\n \n {data.month}\n \n \n )\n }}\n />\n\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json index 1a62644e409..a9dd8112ccd 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-legend.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-legend.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a legend\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarLegend() {\n return (\n \n \n Radar Chart - Legend\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n } />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a legend\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarLegend() {\n return (\n \n \n Radar Chart - Legend\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n } />\n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json index 0930d972660..d7a53e538a7 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-lines-only.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-lines-only.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with lines only\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 160 },\n { month: \"February\", desktop: 185, mobile: 170 },\n { month: \"March\", desktop: 207, mobile: 180 },\n { month: \"April\", desktop: 173, mobile: 160 },\n { month: \"May\", desktop: 160, mobile: 190 },\n { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarLinesOnly() {\n return (\n \n \n Radar Chart - Lines Only\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with lines only\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 160 },\n { month: \"February\", desktop: 185, mobile: 170 },\n { month: \"March\", desktop: 207, mobile: 180 },\n { month: \"April\", desktop: 173, mobile: 160 },\n { month: \"May\", desktop: 160, mobile: 190 },\n { month: \"June\", desktop: 174, mobile: 204 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarLinesOnly() {\n return (\n \n \n Radar Chart - Lines Only\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json index d91416064c1..313fd0669b8 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-multiple.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-multiple.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with multiple data\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarMultiple() {\n return (\n \n \n Radar Chart - Multiple\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarAngleAxis, PolarGrid, Radar, RadarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with multiple data\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarMultiple() {\n return (\n \n \n Radar Chart - Multiple\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json index 80ca18f508a..6ca3a9bc4e3 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radar-radius.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n return (\n \n \n Radar Chart - Radius Axis\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n PolarAngleAxis,\n PolarGrid,\n PolarRadiusAxis,\n Radar,\n RadarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n return (\n \n \n Radar Chart - Radius Axis\n \n Showing total visitors for the last 6 months\n \n \n \n \n \n \n }\n />\n \n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n January - June 2024\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json index b2d9f213e70..96aa44ae0df 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-grid.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radial-grid.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a grid\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialGrid() {\n return (\n \n \n Radial Chart - Grid\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { PolarGrid, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a grid\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialGrid() {\n return (\n \n \n Radial Chart - Grid\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json index a4919c12ee9..808694974ec 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-label.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radial-label.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a label\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialLabel() {\n return (\n \n \n Radial Chart - Label\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { LabelList, RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a label\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialLabel() {\n return (\n \n \n Radial Chart - Label\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json index c2ba29d17c0..b2b54b3df23 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-shape.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radial-shape.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialShape() {\n return (\n \n \n Radial Chart - Shape\n January - June 2024\n \n \n \n \n \n \n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {chartData[0].visitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with a custom shape\"\n\nconst chartData = [\n { browser: \"safari\", visitors: 1260, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialShape() {\n return (\n \n \n Radial Chart - Shape\n January - June 2024\n \n \n \n \n \n \n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {chartData[0].visitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json index ae368d9dfe0..021f7c6c8d1 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-simple.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radial-simple.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialSimple() {\n return (\n \n \n Radial Chart\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { RadialBar, RadialBarChart } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart\"\n\nconst chartData = [\n { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n chrome: {\n label: \"Chrome\",\n color: \"var(--chart-1)\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n firefox: {\n label: \"Firefox\",\n color: \"var(--chart-3)\",\n },\n edge: {\n label: \"Edge\",\n color: \"var(--chart-4)\",\n },\n other: {\n label: \"Other\",\n color: \"var(--chart-5)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialSimple() {\n return (\n \n \n Radial Chart\n January - June 2024\n \n \n \n \n }\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json index 41768661c79..0eeae28abcb 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-stacked.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radial-stacked.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", mobile: 570, desktop: 1260 }]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialStacked() {\n const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n return (\n \n \n Radial Chart - Stacked\n January - June 2024\n \n \n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {totalVisitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with stacked sections\"\n\nconst chartData = [{ month: \"january\", mobile: 570, desktop: 1260 }]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--chart-1)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialStacked() {\n const totalVisitors = chartData[0].desktop + chartData[0].mobile\n\n return (\n \n \n Radial Chart - Stacked\n January - June 2024\n \n \n \n \n \n \n }\n />\n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {totalVisitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json b/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json index 91e32e3010f..1d12c101c1b 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-radial-text.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-radial-text.tsx", - "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with text\"\n\nconst chartData = [\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialText() {\n return (\n \n \n Radial Chart - Text\n January - June 2024\n \n \n \n \n \n \n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {chartData[0].visitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n Label,\n PolarGrid,\n PolarRadiusAxis,\n RadialBar,\n RadialBarChart,\n} from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radial chart with text\"\n\nconst chartData = [\n { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n]\n\nconst chartConfig = {\n visitors: {\n label: \"Visitors\",\n },\n safari: {\n label: \"Safari\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartRadialText() {\n return (\n \n \n Radial Chart - Text\n January - June 2024\n \n \n \n \n \n \n \n {\n if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n return (\n \n \n {chartData[0].visitors.toLocaleString()}\n \n \n Visitors\n \n \n )\n }\n }}\n />\n \n \n \n \n \n
\n Trending up by 5.2% this month \n
\n
\n Showing total visitors for the last 6 months\n
\n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json index 10bbf29b371..0facb260d7d 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-advanced.json @@ -8,7 +8,7 @@ "files": [ { "path": "registry/new-york-v4/charts/chart-tooltip-advanced.tsx", - "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"var(--chart-1)\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartTooltipAdvanced() {\n return (\n \n \n Tooltip - Advanced\n \n Tooltip with custom formatter and total.\n \n \n \n \n \n {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n \n \n (\n <>\n \n {chartConfig[name as keyof typeof chartConfig]?.label ||\n name}\n
\n {value}\n \n kcal\n \n
\n {/* Add this after the last item */}\n {index === 1 && (\n
\n Total\n
\n {item.payload.running + item.payload.swimming}\n \n kcal\n \n
\n
\n )}\n \n )}\n />\n }\n cursor={false}\n defaultIndex={1}\n />\n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport { Bar, BarChart, XAxis } from \"recharts\"\n\nimport {\n Card,\n CardContent,\n CardDescription,\n CardHeader,\n CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A stacked bar chart with a legend\"\n\nconst chartData = [\n { date: \"2024-07-15\", running: 450, swimming: 300 },\n { date: \"2024-07-16\", running: 380, swimming: 420 },\n { date: \"2024-07-17\", running: 520, swimming: 120 },\n { date: \"2024-07-18\", running: 140, swimming: 550 },\n { date: \"2024-07-19\", running: 600, swimming: 350 },\n { date: \"2024-07-20\", running: 480, swimming: 400 },\n]\n\nconst chartConfig = {\n running: {\n label: \"Running\",\n color: \"var(--chart-1)\",\n },\n swimming: {\n label: \"Swimming\",\n color: \"var(--chart-2)\",\n },\n} satisfies ChartConfig\n\nexport function ChartTooltipAdvanced() {\n return (\n \n \n Tooltip - Advanced\n \n Tooltip with custom formatter and total.\n \n \n \n \n \n {\n return new Date(value).toLocaleDateString(\"en-US\", {\n weekday: \"short\",\n })\n }}\n />\n \n \n (\n <>\n \n {chartConfig[name as keyof typeof chartConfig]?.label ||\n name}\n
\n {value}\n \n kcal\n \n
\n {/* Add this after the last item */}\n {index === 1 && (\n
\n Total\n
\n {item.payload.running + item.payload.swimming}\n \n kcal\n \n
\n
\n )}\n \n )}\n />\n }\n cursor={false}\n defaultIndex={1}\n />\n \n \n \n \n )\n}\n", "type": "registry:block" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json index 56e44dbdf4d..a2d9b2819b4 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json +++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/new-york-v4/examples/chart-tooltip-demo.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n return (\n
div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n
\n
\n Label\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n Name\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n Indicator\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n )\n}\n\nfunction TooltipDemo({\n indicator = \"dot\",\n label,\n payload,\n hideLabel,\n hideIndicator,\n className,\n}: {\n label: string\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n payload: {\n name: string\n value: number\n fill: string\n }[]\n nameKey?: string\n labelKey?: string\n} & React.ComponentProps<\"div\">) {\n const tooltipLabel = hideLabel ? null : (\n
{label}
\n )\n\n if (!payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const indicatorColor = item.fill\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n <>\n {!hideIndicator && (\n \n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n {item.name}\n
\n \n {item.value.toLocaleString()}\n \n
\n \n \n )\n })}\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n return (\n
div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n
\n
\n Label\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n
\n Name\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n \n
\n
\n
\n Indicator\n
\n \n \n \n \n \n \n \n \n \n \n \n
\n
\n )\n}\n\nfunction TooltipDemo({\n indicator = \"dot\",\n label,\n payload,\n hideLabel,\n hideIndicator,\n className,\n}: {\n label: string\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n payload: {\n name: string\n value: number\n fill: string\n }[]\n nameKey?: string\n labelKey?: string\n} & React.ComponentProps<\"div\">) {\n const tooltipLabel = hideLabel ? null : (\n
{label}
\n )\n\n if (!payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload.map((item, index) => {\n const indicatorColor = item.fill\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n <>\n {!hideIndicator && (\n \n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n {item.name}\n
\n \n {item.value.toLocaleString()}\n \n
\n \n \n )\n })}\n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/chart.json b/apps/v4/public/r/styles/new-york-v4/chart.json index ad9612ff9c7..2c7dc6329e5 100644 --- a/apps/v4/public/r/styles/new-york-v4/chart.json +++ b/apps/v4/public/r/styles/new-york-v4/chart.json @@ -11,7 +11,7 @@ "files": [ { "path": "registry/new-york-v4/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\n// Helper to extract item config from a payload.\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/dashboard-01.json b/apps/v4/public/r/styles/new-york-v4/dashboard-01.json index b61c6aab43a..06e603ff2c7 100644 --- a/apps/v4/public/r/styles/new-york-v4/dashboard-01.json +++ b/apps/v4/public/r/styles/new-york-v4/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/new-york-v4/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n IconChevronDown,\n IconChevronLeft,\n IconChevronRight,\n IconChevronsLeft,\n IconChevronsRight,\n IconCircleCheckFilled,\n IconDotsVertical,\n IconGripVertical,\n IconLayoutColumns,\n IconLoader,\n IconPlus,\n IconTrendingUp,\n} from \"@tabler/icons-react\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/new-york-v4/ui/tabs\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n IconChevronDown,\n IconChevronLeft,\n IconChevronRight,\n IconChevronsLeft,\n IconChevronsRight,\n IconCircleCheckFilled,\n IconDotsVertical,\n IconGripVertical,\n IconLayoutColumns,\n IconLoader,\n IconPlus,\n IconTrendingUp,\n} from \"@tabler/icons-react\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/new-york-v4/hooks/use-mobile\"\nimport { Badge } from \"@/registry/new-york-v4/ui/badge\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport { Label } from \"@/registry/new-york-v4/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/new-york-v4/ui/tabs\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/new-york-v4/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n IconCreditCard,\n IconDotsVertical,\n IconLogout,\n IconNotification,\n IconUserCircle,\n} from \"@tabler/icons-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n IconCreditCard,\n IconDotsVertical,\n IconLogout,\n IconNotification,\n IconUserCircle,\n} from \"@tabler/icons-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/new-york-v4/data-table-demo.json b/apps/v4/public/r/styles/new-york-v4/data-table-demo.json index e1e42d20617..9fc2cd9e649 100644 --- a/apps/v4/public/r/styles/new-york-v4/data-table-demo.json +++ b/apps/v4/public/r/styles/new-york-v4/data-table-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/data-table-demo.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst data: Payment[] = [\n {\n id: \"m5gr84i9\",\n amount: 316,\n status: \"success\",\n email: \"ken99@example.com\",\n },\n {\n id: \"3u1reuv4\",\n amount: 242,\n status: \"success\",\n email: \"Abe45@example.com\",\n },\n {\n id: \"derv1ws0\",\n amount: 837,\n status: \"processing\",\n email: \"Monserrat44@example.com\",\n },\n {\n id: \"5kma53ae\",\n amount: 874,\n status: \"success\",\n email: \"Silas22@example.com\",\n },\n {\n id: \"bhqecj4p\",\n amount: 721,\n status: \"failed\",\n email: \"carmella@example.com\",\n },\n]\n\nexport type Payment = {\n id: string\n amount: number\n status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n email: string\n}\n\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n
{row.getValue(\"status\")}
\n ),\n },\n {\n accessorKey: \"email\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Email\n \n \n )\n },\n cell: ({ row }) =>
{row.getValue(\"email\")}
,\n },\n {\n accessorKey: \"amount\",\n header: () =>
Amount
,\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"amount\"))\n\n // Format the amount as a dollar amount\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n\n return
{formatted}
\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const payment = row.original\n\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(payment.id)}\n >\n Copy payment ID\n \n \n View customer\n View payment details\n \n \n )\n },\n },\n]\n\nexport default function DataTableDemo() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n
\n
\n \n table.getColumn(\"email\")?.setFilterValue(event.target.value)\n }\n className=\"max-w-sm\"\n />\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n flexRender,\n getCoreRowModel,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { ArrowUpDown, ChevronDown, MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Checkbox } from \"@/registry/new-york-v4/ui/checkbox\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport { Input } from \"@/registry/new-york-v4/ui/input\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/new-york-v4/ui/table\"\n\nconst data: Payment[] = [\n {\n id: \"m5gr84i9\",\n amount: 316,\n status: \"success\",\n email: \"ken99@example.com\",\n },\n {\n id: \"3u1reuv4\",\n amount: 242,\n status: \"success\",\n email: \"Abe45@example.com\",\n },\n {\n id: \"derv1ws0\",\n amount: 837,\n status: \"processing\",\n email: \"Monserrat44@example.com\",\n },\n {\n id: \"5kma53ae\",\n amount: 874,\n status: \"success\",\n email: \"Silas22@example.com\",\n },\n {\n id: \"bhqecj4p\",\n amount: 721,\n status: \"failed\",\n email: \"carmella@example.com\",\n },\n]\n\nexport type Payment = {\n id: string\n amount: number\n status: \"pending\" | \"processing\" | \"success\" | \"failed\"\n email: string\n}\n\nexport const columns: ColumnDef[] = [\n {\n id: \"select\",\n header: ({ table }) => (\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n ),\n cell: ({ row }) => (\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n
{row.getValue(\"status\")}
\n ),\n },\n {\n accessorKey: \"email\",\n header: ({ column }) => {\n return (\n column.toggleSorting(column.getIsSorted() === \"asc\")}\n >\n Email\n \n \n )\n },\n cell: ({ row }) =>
{row.getValue(\"email\")}
,\n },\n {\n accessorKey: \"amount\",\n header: () =>
Amount
,\n cell: ({ row }) => {\n const amount = parseFloat(row.getValue(\"amount\"))\n\n // Format the amount as a dollar amount\n const formatted = new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)\n\n return
{formatted}
\n },\n },\n {\n id: \"actions\",\n enableHiding: false,\n cell: ({ row }) => {\n const payment = row.original\n\n return (\n \n \n \n \n \n Actions\n navigator.clipboard.writeText(payment.id)}\n >\n Copy payment ID\n \n \n View customer\n View payment details\n \n \n )\n },\n },\n]\n\nexport default function DataTableDemo() {\n const [sorting, setSorting] = React.useState([])\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [rowSelection, setRowSelection] = React.useState({})\n\n const table = useReactTable({\n data,\n columns,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n getCoreRowModel: getCoreRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n onColumnVisibilityChange: setColumnVisibility,\n onRowSelectionChange: setRowSelection,\n state: {\n sorting,\n columnFilters,\n columnVisibility,\n rowSelection,\n },\n })\n\n return (\n
\n
\n \n table.getColumn(\"email\")?.setFilterValue(event.target.value)\n }\n className=\"max-w-sm\"\n />\n \n \n \n \n \n {table\n .getAllColumns()\n .filter((column) => column.getCanHide())\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n
\n
\n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(\n cell.column.columnDef.cell,\n cell.getContext()\n )}\n \n ))}\n \n ))\n ) : (\n \n \n No results.\n \n \n )}\n \n
\n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Previous\n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Next\n \n
\n
\n
\n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/drawer-demo.json b/apps/v4/public/r/styles/new-york-v4/drawer-demo.json index 929f785d925..84f2a30a0a9 100644 --- a/apps/v4/public/r/styles/new-york-v4/drawer-demo.json +++ b/apps/v4/public/r/styles/new-york-v4/drawer-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/drawer-demo.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport default function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n \n \n \n \n \n
\n \n Move Goal\n Set your daily activity goal.\n \n
\n
\n onClick(-10)}\n disabled={goal <= 200}\n >\n \n Decrease\n \n
\n
\n {goal}\n
\n
\n Calories/day\n
\n
\n onClick(10)}\n disabled={goal >= 400}\n >\n \n Increase\n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Minus, Plus } from \"lucide-react\"\nimport { Bar, BarChart, ResponsiveContainer } from \"recharts\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/new-york-v4/ui/drawer\"\n\nconst data = [\n {\n goal: 400,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 239,\n },\n {\n goal: 300,\n },\n {\n goal: 200,\n },\n {\n goal: 278,\n },\n {\n goal: 189,\n },\n {\n goal: 349,\n },\n]\n\nexport default function DrawerDemo() {\n const [goal, setGoal] = React.useState(350)\n\n function onClick(adjustment: number) {\n setGoal(Math.max(200, Math.min(400, goal + adjustment)))\n }\n\n return (\n \n \n \n \n \n
\n \n Move Goal\n Set your daily activity goal.\n \n
\n
\n onClick(-10)}\n disabled={goal <= 200}\n >\n \n Decrease\n \n
\n
\n {goal}\n
\n
\n Calories/day\n
\n
\n onClick(10)}\n disabled={goal >= 400}\n >\n \n Increase\n \n
\n
\n \n \n \n \n \n
\n
\n \n \n \n \n \n \n
\n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/input-otp.json b/apps/v4/public/r/styles/new-york-v4/input-otp.json index 5fb3866be26..de9fffe3087 100644 --- a/apps/v4/public/r/styles/new-york-v4/input-otp.json +++ b/apps/v4/public/r/styles/new-york-v4/input-otp.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/input-otp.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps & {\n containerClassName?: string\n}) {\n return (\n \n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n \n {char}\n {hasFakeCaret && (\n
\n
\n
\n )}\n
\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\nimport { MinusIcon } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction InputOTP({\n className,\n containerClassName,\n ...props\n}: React.ComponentProps & {\n containerClassName?: string\n}) {\n return (\n \n )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n \n )\n}\n\nfunction InputOTPSlot({\n index,\n className,\n ...props\n}: React.ComponentProps<\"div\"> & {\n index: number\n}) {\n const inputOTPContext = React.useContext(OTPInputContext)\n const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n return (\n \n {char}\n {hasFakeCaret && (\n
\n
\n
\n )}\n
\n )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n return (\n
\n \n
\n )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/menubar.json b/apps/v4/public/r/styles/new-york-v4/menubar.json index 5000cd21ed6..a3ddf582404 100644 --- a/apps/v4/public/r/styles/new-york-v4/menubar.json +++ b/apps/v4/public/r/styles/new-york-v4/menubar.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/menubar.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Menubar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction MenubarItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction MenubarSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarLabel,\n MenubarItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from \"lucide-react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Menubar({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarMenu({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarGroup({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarPortal({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarRadioGroup({\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarTrigger({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarContent({\n className,\n align = \"start\",\n alignOffset = -4,\n sideOffset = 8,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction MenubarItem({\n className,\n inset,\n variant = \"default\",\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n variant?: \"default\" | \"destructive\"\n}) {\n return (\n \n )\n}\n\nfunction MenubarCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n \n \n \n {children}\n \n )\n}\n\nfunction MenubarLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n )\n}\n\nfunction MenubarSeparator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction MenubarShortcut({\n className,\n ...props\n}: React.ComponentProps<\"span\">) {\n return (\n \n )\n}\n\nfunction MenubarSub({\n ...props\n}: React.ComponentProps) {\n return \n}\n\nfunction MenubarSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps & {\n inset?: boolean\n}) {\n return (\n \n {children}\n \n \n )\n}\n\nfunction MenubarSubContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nexport {\n Menubar,\n MenubarPortal,\n MenubarMenu,\n MenubarTrigger,\n MenubarContent,\n MenubarGroup,\n MenubarSeparator,\n MenubarLabel,\n MenubarItem,\n MenubarShortcut,\n MenubarCheckboxItem,\n MenubarRadioGroup,\n MenubarRadioItem,\n MenubarSub,\n MenubarSubTrigger,\n MenubarSubContent,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/mode-toggle.json b/apps/v4/public/r/styles/new-york-v4/mode-toggle.json index 525d9cccc4a..f9b035f3d1c 100644 --- a/apps/v4/public/r/styles/new-york-v4/mode-toggle.json +++ b/apps/v4/public/r/styles/new-york-v4/mode-toggle.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/new-york-v4/examples/mode-toggle.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n const { setTheme } = useTheme()\n\n return (\n \n \n \n \n \n setTheme(\"light\")}>\n Light\n \n setTheme(\"dark\")}>\n Dark\n \n setTheme(\"system\")}>\n System\n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Moon, Sun } from \"lucide-react\"\nimport { useTheme } from \"next-themes\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nexport default function ModeToggle() {\n const { setTheme } = useTheme()\n\n return (\n \n \n \n \n \n setTheme(\"light\")}>\n Light\n \n setTheme(\"dark\")}>\n Dark\n \n setTheme(\"system\")}>\n System\n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/navigation-menu.json b/apps/v4/public/r/styles/new-york-v4/navigation-menu.json index 895989e8627..1cd926fe303 100644 --- a/apps/v4/public/r/styles/new-york-v4/navigation-menu.json +++ b/apps/v4/public/r/styles/new-york-v4/navigation-menu.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { ChevronDownIcon } from \"lucide-react\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-[color,box-shadow] outline-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=open]:bg-accent/50 data-[state=open]:text-accent-foreground data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-07.json b/apps/v4/public/r/styles/new-york-v4/sidebar-07.json index 060b64f7fd3..97bb5f529e5 100644 --- a/apps/v4/public/r/styles/new-york-v4/sidebar-07.json +++ b/apps/v4/public/r/styles/new-york-v4/sidebar-07.json @@ -34,7 +34,7 @@ }, { "path": "registry/new-york-v4/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-08.json b/apps/v4/public/r/styles/new-york-v4/sidebar-08.json index fe4057f5405..a822db85af6 100644 --- a/apps/v4/public/r/styles/new-york-v4/sidebar-08.json +++ b/apps/v4/public/r/styles/new-york-v4/sidebar-08.json @@ -39,7 +39,7 @@ }, { "path": "registry/new-york-v4/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-09.json b/apps/v4/public/r/styles/new-york-v4/sidebar-09.json index bd3f3f4ee10..35525b65e7e 100644 --- a/apps/v4/public/r/styles/new-york-v4/sidebar-09.json +++ b/apps/v4/public/r/styles/new-york-v4/sidebar-09.json @@ -26,7 +26,7 @@ }, { "path": "registry/new-york-v4/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-10.json b/apps/v4/public/r/styles/new-york-v4/sidebar-10.json index fd89a7ae3e7..6193a83b4c8 100644 --- a/apps/v4/public/r/styles/new-york-v4/sidebar-10.json +++ b/apps/v4/public/r/styles/new-york-v4/sidebar-10.json @@ -24,7 +24,7 @@ }, { "path": "registry/new-york-v4/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArrowDown,\n ArrowUp,\n Bell,\n Copy,\n CornerUpLeft,\n CornerUpRight,\n FileText,\n GalleryVerticalEnd,\n LineChart,\n Link,\n MoreHorizontal,\n Settings2,\n Star,\n Trash,\n Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: Settings2,\n },\n {\n label: \"Turn into wiki\",\n icon: FileText,\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: Link,\n },\n {\n label: \"Duplicate\",\n icon: Copy,\n },\n {\n label: \"Move to\",\n icon: CornerUpRight,\n },\n {\n label: \"Move to Trash\",\n icon: Trash2,\n },\n ],\n [\n {\n label: \"Undo\",\n icon: CornerUpLeft,\n },\n {\n label: \"View analytics\",\n icon: LineChart,\n },\n {\n label: \"Version History\",\n icon: GalleryVerticalEnd,\n },\n {\n label: \"Show delete pages\",\n icon: Trash,\n },\n {\n label: \"Notifications\",\n icon: Bell,\n },\n ],\n [\n {\n label: \"Import\",\n icon: ArrowUp,\n },\n {\n label: \"Export\",\n icon: ArrowDown,\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n ArrowDown,\n ArrowUp,\n Bell,\n Copy,\n CornerUpLeft,\n CornerUpRight,\n FileText,\n GalleryVerticalEnd,\n LineChart,\n Link,\n MoreHorizontal,\n Settings2,\n Star,\n Trash,\n Trash2,\n} from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/new-york-v4/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: Settings2,\n },\n {\n label: \"Turn into wiki\",\n icon: FileText,\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: Link,\n },\n {\n label: \"Duplicate\",\n icon: Copy,\n },\n {\n label: \"Move to\",\n icon: CornerUpRight,\n },\n {\n label: \"Move to Trash\",\n icon: Trash2,\n },\n ],\n [\n {\n label: \"Undo\",\n icon: CornerUpLeft,\n },\n {\n label: \"View analytics\",\n icon: LineChart,\n },\n {\n label: \"Version History\",\n icon: GalleryVerticalEnd,\n },\n {\n label: \"Show delete pages\",\n icon: Trash,\n },\n {\n label: \"Notifications\",\n icon: Bell,\n },\n ],\n [\n {\n label: \"Import\",\n icon: ArrowUp,\n },\n {\n label: \"Export\",\n icon: ArrowDown,\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-12.json b/apps/v4/public/r/styles/new-york-v4/sidebar-12.json index 70ce4d805fd..0b28e54026f 100644 --- a/apps/v4/public/r/styles/new-york-v4/sidebar-12.json +++ b/apps/v4/public/r/styles/new-york-v4/sidebar-12.json @@ -35,7 +35,7 @@ }, { "path": "registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-15.json b/apps/v4/public/r/styles/new-york-v4/sidebar-15.json index 6754038ebe6..85924832c9c 100644 --- a/apps/v4/public/r/styles/new-york-v4/sidebar-15.json +++ b/apps/v4/public/r/styles/new-york-v4/sidebar-15.json @@ -46,7 +46,7 @@ }, { "path": "registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/new-york-v4/sidebar-16.json b/apps/v4/public/r/styles/new-york-v4/sidebar-16.json index 3e1a7db4e11..124b3be0392 100644 --- a/apps/v4/public/r/styles/new-york-v4/sidebar-16.json +++ b/apps/v4/public/r/styles/new-york-v4/sidebar-16.json @@ -41,7 +41,7 @@ }, { "path": "registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n BadgeCheck,\n Bell,\n ChevronsUpDown,\n CreditCard,\n LogOut,\n Sparkles,\n} from \"lucide-react\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/new-york-v4/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -51,7 +51,7 @@ }, { "path": "registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SidebarIcon } from \"lucide-react\"\n\nimport { SearchForm } from \"@/registry/new-york-v4/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/new-york-v4/ui/breadcrumb\"\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport { Separator } from \"@/registry/new-york-v4/ui/separator\"\nimport { useSidebar } from \"@/registry/new-york-v4/ui/sidebar\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/skeleton-demo.json b/apps/v4/public/r/styles/new-york-v4/skeleton-demo.json index 5a831896849..f24875b354b 100644 --- a/apps/v4/public/r/styles/new-york-v4/skeleton-demo.json +++ b/apps/v4/public/r/styles/new-york-v4/skeleton-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/skeleton-demo.tsx", - "content": "import { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n return (\n
\n \n
\n \n \n
\n
\n )\n}\n", + "content": "import { Skeleton } from \"@/registry/new-york-v4/ui/skeleton\"\n\nexport default function SkeletonDemo() {\n return (\n
\n \n
\n \n \n
\n
\n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-disabled.json b/apps/v4/public/r/styles/new-york-v4/toggle-disabled.json index a4da9b8a204..3cfc594b085 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-disabled.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-disabled.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-disabled.tsx", - "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDisabled() {\n return (\n \n \n \n )\n}\n", + "content": "import { Underline } from \"lucide-react\"\n\nimport { Toggle } from \"@/registry/new-york-v4/ui/toggle\"\n\nexport default function ToggleDisabled() {\n return (\n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-demo.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-demo.json index 05d0bbdfa4d..8a2b333ff9d 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-group-demo.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-demo.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-group-demo.tsx", - "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-disabled.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-disabled.json index 5aedec47d44..b6cc4c4a3f5 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-group-disabled.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-disabled.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-group-disabled.tsx", - "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-lg.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-lg.json index 2250d607605..755b5d7a059 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-group-lg.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-lg.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-group-lg.tsx", - "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-outline.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-outline.json index acb08f2fdf3..e59a0a3fcc2 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-group-outline.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-outline.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-group-outline.tsx", - "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-single.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-single.json index 2ece7ab8420..8a8b57acc64 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-group-single.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-single.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-group-single.tsx", - "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/new-york-v4/toggle-group-sm.json b/apps/v4/public/r/styles/new-york-v4/toggle-group-sm.json index a4cf3ad8157..797615da1fb 100644 --- a/apps/v4/public/r/styles/new-york-v4/toggle-group-sm.json +++ b/apps/v4/public/r/styles/new-york-v4/toggle-group-sm.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/new-york-v4/examples/toggle-group-sm.tsx", - "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", + "content": "import { Bold, Italic, Underline } from \"lucide-react\"\n\nimport {\n ToggleGroup,\n ToggleGroupItem,\n} from \"@/registry/new-york-v4/ui/toggle-group\"\n\nexport default function ToggleGroupDemo() {\n return (\n \n \n \n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:example" } ], diff --git a/apps/v4/public/r/styles/radix-luma/chart.json b/apps/v4/public/r/styles/radix-luma/chart.json index 55b7e57d578..f35c9bca71e 100644 --- a/apps/v4/public/r/styles/radix-luma/chart.json +++ b/apps/v4/public/r/styles/radix-luma/chart.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-luma/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-luma/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-luma/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-luma/dashboard-01.json b/apps/v4/public/r/styles/radix-luma/dashboard-01.json index 04ad1473b30..b4930c59170 100644 --- a/apps/v4/public/r/styles/radix-luma/dashboard-01.json +++ b/apps/v4/public/r/styles/radix-luma/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/radix-luma/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-luma/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-luma/ui/badge\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-luma/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-luma/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-luma/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport { Label } from \"@/registry/radix-luma/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-luma/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-luma/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-luma/ui/badge\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-luma/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-luma/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-luma/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport { Label } from \"@/registry/radix-luma/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-luma/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-luma/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/radix-luma/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-luma/navigation-menu.json b/apps/v4/public/r/styles/radix-luma/navigation-menu.json index 67e25e8cff7..352c89330e0 100644 --- a/apps/v4/public/r/styles/radix-luma/navigation-menu.json +++ b/apps/v4/public/r/styles/radix-luma/navigation-menu.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-luma/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-luma/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-3xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-luma/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-3xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-luma/sidebar-07.json b/apps/v4/public/r/styles/radix-luma/sidebar-07.json index 27125e25c51..285ade8b338 100644 --- a/apps/v4/public/r/styles/radix-luma/sidebar-07.json +++ b/apps/v4/public/r/styles/radix-luma/sidebar-07.json @@ -35,7 +35,7 @@ }, { "path": "registry/radix-luma/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-luma/sidebar-08.json b/apps/v4/public/r/styles/radix-luma/sidebar-08.json index 7b4b989cddd..aa75794b990 100644 --- a/apps/v4/public/r/styles/radix-luma/sidebar-08.json +++ b/apps/v4/public/r/styles/radix-luma/sidebar-08.json @@ -40,7 +40,7 @@ }, { "path": "registry/radix-luma/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-luma/sidebar-09.json b/apps/v4/public/r/styles/radix-luma/sidebar-09.json index 709632bb257..77a3e163a16 100644 --- a/apps/v4/public/r/styles/radix-luma/sidebar-09.json +++ b/apps/v4/public/r/styles/radix-luma/sidebar-09.json @@ -27,7 +27,7 @@ }, { "path": "registry/radix-luma/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-luma/sidebar-10.json b/apps/v4/public/r/styles/radix-luma/sidebar-10.json index e1e9b7e0884..0bc89c87e26 100644 --- a/apps/v4/public/r/styles/radix-luma/sidebar-10.json +++ b/apps/v4/public/r/styles/radix-luma/sidebar-10.json @@ -25,7 +25,7 @@ }, { "path": "registry/radix-luma/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-luma/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-luma/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-luma/sidebar-12.json b/apps/v4/public/r/styles/radix-luma/sidebar-12.json index 9af5b510cdb..ccd0819c88e 100644 --- a/apps/v4/public/r/styles/radix-luma/sidebar-12.json +++ b/apps/v4/public/r/styles/radix-luma/sidebar-12.json @@ -36,7 +36,7 @@ }, { "path": "registry/radix-luma/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-luma/sidebar-15.json b/apps/v4/public/r/styles/radix-luma/sidebar-15.json index 3a988ee3891..ac52e0cf475 100644 --- a/apps/v4/public/r/styles/radix-luma/sidebar-15.json +++ b/apps/v4/public/r/styles/radix-luma/sidebar-15.json @@ -47,7 +47,7 @@ }, { "path": "registry/radix-luma/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-luma/sidebar-16.json b/apps/v4/public/r/styles/radix-luma/sidebar-16.json index 56440fa4356..9f7ea4e8e00 100644 --- a/apps/v4/public/r/styles/radix-luma/sidebar-16.json +++ b/apps/v4/public/r/styles/radix-luma/sidebar-16.json @@ -42,7 +42,7 @@ }, { "path": "registry/radix-luma/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -52,7 +52,7 @@ }, { "path": "registry/radix-luma/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-luma/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-luma/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-luma/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-luma/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport { Separator } from \"@/registry/radix-luma/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-luma/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-lyra/chart.json b/apps/v4/public/r/styles/radix-lyra/chart.json index e1c63a251f9..bd18d3f1ce6 100644 --- a/apps/v4/public/r/styles/radix-lyra/chart.json +++ b/apps/v4/public/r/styles/radix-lyra/chart.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-lyra/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-lyra/dashboard-01.json b/apps/v4/public/r/styles/radix-lyra/dashboard-01.json index 2d3cb3a3089..ed466cfe664 100644 --- a/apps/v4/public/r/styles/radix-lyra/dashboard-01.json +++ b/apps/v4/public/r/styles/radix-lyra/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/radix-lyra/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-lyra/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-lyra/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-lyra/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-lyra/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-lyra/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-lyra/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/radix-lyra/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-lyra/navigation-menu.json b/apps/v4/public/r/styles/radix-lyra/navigation-menu.json index 5888a2f9e34..c41c9a1114f 100644 --- a/apps/v4/public/r/styles/radix-lyra/navigation-menu.json +++ b/apps/v4/public/r/styles/radix-lyra/navigation-menu.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-lyra/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-2.5 py-1.5 text-xs font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-2.5 py-1.5 text-xs font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-1 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-07.json b/apps/v4/public/r/styles/radix-lyra/sidebar-07.json index 2464aa795fa..86874ad9d3d 100644 --- a/apps/v4/public/r/styles/radix-lyra/sidebar-07.json +++ b/apps/v4/public/r/styles/radix-lyra/sidebar-07.json @@ -35,7 +35,7 @@ }, { "path": "registry/radix-lyra/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-08.json b/apps/v4/public/r/styles/radix-lyra/sidebar-08.json index fcbf88dd781..0623595aa0b 100644 --- a/apps/v4/public/r/styles/radix-lyra/sidebar-08.json +++ b/apps/v4/public/r/styles/radix-lyra/sidebar-08.json @@ -40,7 +40,7 @@ }, { "path": "registry/radix-lyra/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-09.json b/apps/v4/public/r/styles/radix-lyra/sidebar-09.json index 09ba78fa45e..d27aa34ad6e 100644 --- a/apps/v4/public/r/styles/radix-lyra/sidebar-09.json +++ b/apps/v4/public/r/styles/radix-lyra/sidebar-09.json @@ -27,7 +27,7 @@ }, { "path": "registry/radix-lyra/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-10.json b/apps/v4/public/r/styles/radix-lyra/sidebar-10.json index c714e44c698..c2c75f4c679 100644 --- a/apps/v4/public/r/styles/radix-lyra/sidebar-10.json +++ b/apps/v4/public/r/styles/radix-lyra/sidebar-10.json @@ -25,7 +25,7 @@ }, { "path": "registry/radix-lyra/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-lyra/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-12.json b/apps/v4/public/r/styles/radix-lyra/sidebar-12.json index 109221b34ac..cb92fc6c401 100644 --- a/apps/v4/public/r/styles/radix-lyra/sidebar-12.json +++ b/apps/v4/public/r/styles/radix-lyra/sidebar-12.json @@ -36,7 +36,7 @@ }, { "path": "registry/radix-lyra/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-15.json b/apps/v4/public/r/styles/radix-lyra/sidebar-15.json index 5fdaa07cdd5..5a65006c2c2 100644 --- a/apps/v4/public/r/styles/radix-lyra/sidebar-15.json +++ b/apps/v4/public/r/styles/radix-lyra/sidebar-15.json @@ -47,7 +47,7 @@ }, { "path": "registry/radix-lyra/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-lyra/sidebar-16.json b/apps/v4/public/r/styles/radix-lyra/sidebar-16.json index 5468ebf94e9..30264eac0ba 100644 --- a/apps/v4/public/r/styles/radix-lyra/sidebar-16.json +++ b/apps/v4/public/r/styles/radix-lyra/sidebar-16.json @@ -42,7 +42,7 @@ }, { "path": "registry/radix-lyra/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -52,7 +52,7 @@ }, { "path": "registry/radix-lyra/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-lyra/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-lyra/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-lyra/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Separator } from \"@/registry/radix-lyra/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-lyra/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-maia/chart.json b/apps/v4/public/r/styles/radix-maia/chart.json index 61cf8546867..557db706ca6 100644 --- a/apps/v4/public/r/styles/radix-maia/chart.json +++ b/apps/v4/public/r/styles/radix-maia/chart.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-maia/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-maia/dashboard-01.json b/apps/v4/public/r/styles/radix-maia/dashboard-01.json index fa13b3a97f6..27a019ecf57 100644 --- a/apps/v4/public/r/styles/radix-maia/dashboard-01.json +++ b/apps/v4/public/r/styles/radix-maia/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/radix-maia/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-maia/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-maia/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-maia/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-maia/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-maia/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-maia/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/radix-maia/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-maia/navigation-menu.json b/apps/v4/public/r/styles/radix-maia/navigation-menu.json index b51a5f18fcc..bb99a9837a5 100644 --- a/apps/v4/public/r/styles/radix-maia/navigation-menu.json +++ b/apps/v4/public/r/styles/radix-maia/navigation-menu.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-maia/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-07.json b/apps/v4/public/r/styles/radix-maia/sidebar-07.json index 11e2525cab5..fcf597b65b9 100644 --- a/apps/v4/public/r/styles/radix-maia/sidebar-07.json +++ b/apps/v4/public/r/styles/radix-maia/sidebar-07.json @@ -35,7 +35,7 @@ }, { "path": "registry/radix-maia/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-08.json b/apps/v4/public/r/styles/radix-maia/sidebar-08.json index 0e89b708526..b5be6f1e435 100644 --- a/apps/v4/public/r/styles/radix-maia/sidebar-08.json +++ b/apps/v4/public/r/styles/radix-maia/sidebar-08.json @@ -40,7 +40,7 @@ }, { "path": "registry/radix-maia/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-09.json b/apps/v4/public/r/styles/radix-maia/sidebar-09.json index a8b030fbbb1..3f98d172a2e 100644 --- a/apps/v4/public/r/styles/radix-maia/sidebar-09.json +++ b/apps/v4/public/r/styles/radix-maia/sidebar-09.json @@ -27,7 +27,7 @@ }, { "path": "registry/radix-maia/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-10.json b/apps/v4/public/r/styles/radix-maia/sidebar-10.json index 5709c38a115..13f7eb651b2 100644 --- a/apps/v4/public/r/styles/radix-maia/sidebar-10.json +++ b/apps/v4/public/r/styles/radix-maia/sidebar-10.json @@ -25,7 +25,7 @@ }, { "path": "registry/radix-maia/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-maia/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-12.json b/apps/v4/public/r/styles/radix-maia/sidebar-12.json index 19e8762a2fc..59d2cf1ca47 100644 --- a/apps/v4/public/r/styles/radix-maia/sidebar-12.json +++ b/apps/v4/public/r/styles/radix-maia/sidebar-12.json @@ -36,7 +36,7 @@ }, { "path": "registry/radix-maia/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-15.json b/apps/v4/public/r/styles/radix-maia/sidebar-15.json index d17b3103288..8bce4dec298 100644 --- a/apps/v4/public/r/styles/radix-maia/sidebar-15.json +++ b/apps/v4/public/r/styles/radix-maia/sidebar-15.json @@ -47,7 +47,7 @@ }, { "path": "registry/radix-maia/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-maia/sidebar-16.json b/apps/v4/public/r/styles/radix-maia/sidebar-16.json index 5908cb4a668..dd2a7288c52 100644 --- a/apps/v4/public/r/styles/radix-maia/sidebar-16.json +++ b/apps/v4/public/r/styles/radix-maia/sidebar-16.json @@ -42,7 +42,7 @@ }, { "path": "registry/radix-maia/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -52,7 +52,7 @@ }, { "path": "registry/radix-maia/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-maia/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-maia/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-maia/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Separator } from \"@/registry/radix-maia/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-maia/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-mira/chart.json b/apps/v4/public/r/styles/radix-mira/chart.json index b5e64849f0a..28023d743c8 100644 --- a/apps/v4/public/r/styles/radix-mira/chart.json +++ b/apps/v4/public/r/styles/radix-mira/chart.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-mira/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-mira/dashboard-01.json b/apps/v4/public/r/styles/radix-mira/dashboard-01.json index 287cfc3e8e8..e6d8c3d214c 100644 --- a/apps/v4/public/r/styles/radix-mira/dashboard-01.json +++ b/apps/v4/public/r/styles/radix-mira/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/radix-mira/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-mira/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-mira/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-mira/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-mira/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-mira/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-mira/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/radix-mira/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-mira/navigation-menu.json b/apps/v4/public/r/styles/radix-mira/navigation-menu.json index 46ed7834ff1..c11c75065d0 100644 --- a/apps/v4/public/r/styles/radix-mira/navigation-menu.json +++ b/apps/v4/public/r/styles/radix-mira/navigation-menu.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-mira/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-xs/relaxed font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-xs/relaxed font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-07.json b/apps/v4/public/r/styles/radix-mira/sidebar-07.json index 16bb737036a..d434ad13d39 100644 --- a/apps/v4/public/r/styles/radix-mira/sidebar-07.json +++ b/apps/v4/public/r/styles/radix-mira/sidebar-07.json @@ -35,7 +35,7 @@ }, { "path": "registry/radix-mira/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-08.json b/apps/v4/public/r/styles/radix-mira/sidebar-08.json index 5f7548ccff5..3c7743d6854 100644 --- a/apps/v4/public/r/styles/radix-mira/sidebar-08.json +++ b/apps/v4/public/r/styles/radix-mira/sidebar-08.json @@ -40,7 +40,7 @@ }, { "path": "registry/radix-mira/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-09.json b/apps/v4/public/r/styles/radix-mira/sidebar-09.json index bbb0bc5de63..7dc48713d38 100644 --- a/apps/v4/public/r/styles/radix-mira/sidebar-09.json +++ b/apps/v4/public/r/styles/radix-mira/sidebar-09.json @@ -27,7 +27,7 @@ }, { "path": "registry/radix-mira/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-10.json b/apps/v4/public/r/styles/radix-mira/sidebar-10.json index 3b4fd82c403..42910198d2b 100644 --- a/apps/v4/public/r/styles/radix-mira/sidebar-10.json +++ b/apps/v4/public/r/styles/radix-mira/sidebar-10.json @@ -25,7 +25,7 @@ }, { "path": "registry/radix-mira/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-mira/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-12.json b/apps/v4/public/r/styles/radix-mira/sidebar-12.json index e3bfd663094..2fe45f9cab1 100644 --- a/apps/v4/public/r/styles/radix-mira/sidebar-12.json +++ b/apps/v4/public/r/styles/radix-mira/sidebar-12.json @@ -36,7 +36,7 @@ }, { "path": "registry/radix-mira/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-15.json b/apps/v4/public/r/styles/radix-mira/sidebar-15.json index 7129bf151ca..2db2c610269 100644 --- a/apps/v4/public/r/styles/radix-mira/sidebar-15.json +++ b/apps/v4/public/r/styles/radix-mira/sidebar-15.json @@ -47,7 +47,7 @@ }, { "path": "registry/radix-mira/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-mira/sidebar-16.json b/apps/v4/public/r/styles/radix-mira/sidebar-16.json index fe0e559c7ca..96a231c6294 100644 --- a/apps/v4/public/r/styles/radix-mira/sidebar-16.json +++ b/apps/v4/public/r/styles/radix-mira/sidebar-16.json @@ -42,7 +42,7 @@ }, { "path": "registry/radix-mira/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -52,7 +52,7 @@ }, { "path": "registry/radix-mira/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-mira/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-mira/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-mira/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Separator } from \"@/registry/radix-mira/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-mira/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-nova/chart.json b/apps/v4/public/r/styles/radix-nova/chart.json index 4a7d5e330cf..d264bc30559 100644 --- a/apps/v4/public/r/styles/radix-nova/chart.json +++ b/apps/v4/public/r/styles/radix-nova/chart.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-nova/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-nova/dashboard-01.json b/apps/v4/public/r/styles/radix-nova/dashboard-01.json index 1387326fee4..278621ec2a0 100644 --- a/apps/v4/public/r/styles/radix-nova/dashboard-01.json +++ b/apps/v4/public/r/styles/radix-nova/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/radix-nova/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-nova/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-nova/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-nova/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-nova/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-nova/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-nova/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/radix-nova/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-nova/navigation-menu.json b/apps/v4/public/r/styles/radix-nova/navigation-menu.json index 696471afea8..0f5bbf60fa6 100644 --- a/apps/v4/public/r/styles/radix-nova/navigation-menu.json +++ b/apps/v4/public/r/styles/radix-nova/navigation-menu.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-nova/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-07.json b/apps/v4/public/r/styles/radix-nova/sidebar-07.json index 3d64e6e2380..429ef3aa4de 100644 --- a/apps/v4/public/r/styles/radix-nova/sidebar-07.json +++ b/apps/v4/public/r/styles/radix-nova/sidebar-07.json @@ -35,7 +35,7 @@ }, { "path": "registry/radix-nova/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-08.json b/apps/v4/public/r/styles/radix-nova/sidebar-08.json index 6859293ebe9..78e0d33eeb4 100644 --- a/apps/v4/public/r/styles/radix-nova/sidebar-08.json +++ b/apps/v4/public/r/styles/radix-nova/sidebar-08.json @@ -40,7 +40,7 @@ }, { "path": "registry/radix-nova/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-09.json b/apps/v4/public/r/styles/radix-nova/sidebar-09.json index 42d896e8032..ab0928fcc78 100644 --- a/apps/v4/public/r/styles/radix-nova/sidebar-09.json +++ b/apps/v4/public/r/styles/radix-nova/sidebar-09.json @@ -27,7 +27,7 @@ }, { "path": "registry/radix-nova/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-10.json b/apps/v4/public/r/styles/radix-nova/sidebar-10.json index 79aa0c57692..39bdcff99d8 100644 --- a/apps/v4/public/r/styles/radix-nova/sidebar-10.json +++ b/apps/v4/public/r/styles/radix-nova/sidebar-10.json @@ -25,7 +25,7 @@ }, { "path": "registry/radix-nova/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-nova/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-12.json b/apps/v4/public/r/styles/radix-nova/sidebar-12.json index b3392e9b5a1..dd97ebd8357 100644 --- a/apps/v4/public/r/styles/radix-nova/sidebar-12.json +++ b/apps/v4/public/r/styles/radix-nova/sidebar-12.json @@ -36,7 +36,7 @@ }, { "path": "registry/radix-nova/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-15.json b/apps/v4/public/r/styles/radix-nova/sidebar-15.json index 94bd1981658..2c9f2e81e67 100644 --- a/apps/v4/public/r/styles/radix-nova/sidebar-15.json +++ b/apps/v4/public/r/styles/radix-nova/sidebar-15.json @@ -47,7 +47,7 @@ }, { "path": "registry/radix-nova/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-nova/sidebar-16.json b/apps/v4/public/r/styles/radix-nova/sidebar-16.json index cf25855e1de..ac1ee5d3d5b 100644 --- a/apps/v4/public/r/styles/radix-nova/sidebar-16.json +++ b/apps/v4/public/r/styles/radix-nova/sidebar-16.json @@ -42,7 +42,7 @@ }, { "path": "registry/radix-nova/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -52,7 +52,7 @@ }, { "path": "registry/radix-nova/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-nova/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-nova/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-nova/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Separator } from \"@/registry/radix-nova/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-nova/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-rhea/chart.json b/apps/v4/public/r/styles/radix-rhea/chart.json index 4a4de80d790..ecac4b1fdfc 100644 --- a/apps/v4/public/r/styles/radix-rhea/chart.json +++ b/apps/v4/public/r/styles/radix-rhea/chart.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-rhea/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-rhea/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-rhea/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-rhea/dashboard-01.json b/apps/v4/public/r/styles/radix-rhea/dashboard-01.json index f337c616f70..876ffb5d69d 100644 --- a/apps/v4/public/r/styles/radix-rhea/dashboard-01.json +++ b/apps/v4/public/r/styles/radix-rhea/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/radix-rhea/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-rhea/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-rhea/ui/badge\"\nimport { Button } from \"@/registry/radix-rhea/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-rhea/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-rhea/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-rhea/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-rhea/ui/input\"\nimport { Label } from \"@/registry/radix-rhea/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-rhea/ui/select\"\nimport { Separator } from \"@/registry/radix-rhea/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-rhea/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-rhea/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-rhea/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-rhea/ui/badge\"\nimport { Button } from \"@/registry/radix-rhea/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-rhea/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-rhea/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-rhea/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-rhea/ui/input\"\nimport { Label } from \"@/registry/radix-rhea/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-rhea/ui/select\"\nimport { Separator } from \"@/registry/radix-rhea/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-rhea/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-rhea/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/radix-rhea/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-rhea/navigation-menu.json b/apps/v4/public/r/styles/radix-rhea/navigation-menu.json index dbf71f2d700..c8faaf50c28 100644 --- a/apps/v4/public/r/styles/radix-rhea/navigation-menu.json +++ b/apps/v4/public/r/styles/radix-rhea/navigation-menu.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-rhea/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-rhea/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-2xl px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-rhea/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-2xl px-2.5 py-1.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-rhea/sidebar-07.json b/apps/v4/public/r/styles/radix-rhea/sidebar-07.json index ca50c3941fd..83093faf02d 100644 --- a/apps/v4/public/r/styles/radix-rhea/sidebar-07.json +++ b/apps/v4/public/r/styles/radix-rhea/sidebar-07.json @@ -35,7 +35,7 @@ }, { "path": "registry/radix-rhea/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-rhea/sidebar-08.json b/apps/v4/public/r/styles/radix-rhea/sidebar-08.json index bf4856cea9f..149bd3aa5c5 100644 --- a/apps/v4/public/r/styles/radix-rhea/sidebar-08.json +++ b/apps/v4/public/r/styles/radix-rhea/sidebar-08.json @@ -40,7 +40,7 @@ }, { "path": "registry/radix-rhea/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-rhea/sidebar-09.json b/apps/v4/public/r/styles/radix-rhea/sidebar-09.json index 3b0da7d55f2..733bef7a6bc 100644 --- a/apps/v4/public/r/styles/radix-rhea/sidebar-09.json +++ b/apps/v4/public/r/styles/radix-rhea/sidebar-09.json @@ -27,7 +27,7 @@ }, { "path": "registry/radix-rhea/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-rhea/sidebar-10.json b/apps/v4/public/r/styles/radix-rhea/sidebar-10.json index ad006dc8659..20ecd5b7cd6 100644 --- a/apps/v4/public/r/styles/radix-rhea/sidebar-10.json +++ b/apps/v4/public/r/styles/radix-rhea/sidebar-10.json @@ -25,7 +25,7 @@ }, { "path": "registry/radix-rhea/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-rhea/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-rhea/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-rhea/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-rhea/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-rhea/sidebar-12.json b/apps/v4/public/r/styles/radix-rhea/sidebar-12.json index 99e8575b6cd..54bc1bb185b 100644 --- a/apps/v4/public/r/styles/radix-rhea/sidebar-12.json +++ b/apps/v4/public/r/styles/radix-rhea/sidebar-12.json @@ -36,7 +36,7 @@ }, { "path": "registry/radix-rhea/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-rhea/sidebar-15.json b/apps/v4/public/r/styles/radix-rhea/sidebar-15.json index 88d14d79682..b10c3403fa1 100644 --- a/apps/v4/public/r/styles/radix-rhea/sidebar-15.json +++ b/apps/v4/public/r/styles/radix-rhea/sidebar-15.json @@ -47,7 +47,7 @@ }, { "path": "registry/radix-rhea/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-rhea/sidebar-16.json b/apps/v4/public/r/styles/radix-rhea/sidebar-16.json index ef948bbc974..8682dd1a341 100644 --- a/apps/v4/public/r/styles/radix-rhea/sidebar-16.json +++ b/apps/v4/public/r/styles/radix-rhea/sidebar-16.json @@ -42,7 +42,7 @@ }, { "path": "registry/radix-rhea/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-rhea/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-rhea/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -52,7 +52,7 @@ }, { "path": "registry/radix-rhea/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-rhea/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-rhea/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-rhea/ui/button\"\nimport { Separator } from \"@/registry/radix-rhea/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-rhea/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-rhea/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-rhea/ui/button\"\nimport { Separator } from \"@/registry/radix-rhea/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-rhea/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-sera/chart.json b/apps/v4/public/r/styles/radix-sera/chart.json index b01b5c2acf8..4a36abcdfb2 100644 --- a/apps/v4/public/r/styles/radix-sera/chart.json +++ b/apps/v4/public/r/styles/radix-sera/chart.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-sera/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-sera/dashboard-01.json b/apps/v4/public/r/styles/radix-sera/dashboard-01.json index 0631fdcc71b..e7dc823cab4 100644 --- a/apps/v4/public/r/styles/radix-sera/dashboard-01.json +++ b/apps/v4/public/r/styles/radix-sera/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/radix-sera/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-sera/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-sera/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-sera/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-sera/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-sera/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-sera/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-sera/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-sera/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-sera/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/radix-sera/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-sera/navigation-menu.json b/apps/v4/public/r/styles/radix-sera/navigation-menu.json index 020e1d31d1d..83303cffc00 100644 --- a/apps/v4/public/r/styles/radix-sera/navigation-menu.json +++ b/apps/v4/public/r/styles/radix-sera/navigation-menu.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-sera/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-07.json b/apps/v4/public/r/styles/radix-sera/sidebar-07.json index cb9d098a0de..01c10ed84b6 100644 --- a/apps/v4/public/r/styles/radix-sera/sidebar-07.json +++ b/apps/v4/public/r/styles/radix-sera/sidebar-07.json @@ -35,7 +35,7 @@ }, { "path": "registry/radix-sera/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-08.json b/apps/v4/public/r/styles/radix-sera/sidebar-08.json index 67706cc48db..1a22689073d 100644 --- a/apps/v4/public/r/styles/radix-sera/sidebar-08.json +++ b/apps/v4/public/r/styles/radix-sera/sidebar-08.json @@ -40,7 +40,7 @@ }, { "path": "registry/radix-sera/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-09.json b/apps/v4/public/r/styles/radix-sera/sidebar-09.json index 1ef0e33b96d..5b82fda2509 100644 --- a/apps/v4/public/r/styles/radix-sera/sidebar-09.json +++ b/apps/v4/public/r/styles/radix-sera/sidebar-09.json @@ -27,7 +27,7 @@ }, { "path": "registry/radix-sera/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-10.json b/apps/v4/public/r/styles/radix-sera/sidebar-10.json index 707467a398e..9e718b14d9d 100644 --- a/apps/v4/public/r/styles/radix-sera/sidebar-10.json +++ b/apps/v4/public/r/styles/radix-sera/sidebar-10.json @@ -25,7 +25,7 @@ }, { "path": "registry/radix-sera/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-sera/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-sera/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-12.json b/apps/v4/public/r/styles/radix-sera/sidebar-12.json index d8d52468f8c..fd3b506411b 100644 --- a/apps/v4/public/r/styles/radix-sera/sidebar-12.json +++ b/apps/v4/public/r/styles/radix-sera/sidebar-12.json @@ -36,7 +36,7 @@ }, { "path": "registry/radix-sera/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-15.json b/apps/v4/public/r/styles/radix-sera/sidebar-15.json index ab804635721..e7518362085 100644 --- a/apps/v4/public/r/styles/radix-sera/sidebar-15.json +++ b/apps/v4/public/r/styles/radix-sera/sidebar-15.json @@ -47,7 +47,7 @@ }, { "path": "registry/radix-sera/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-sera/sidebar-16.json b/apps/v4/public/r/styles/radix-sera/sidebar-16.json index fcd0b1e70ce..a426617f052 100644 --- a/apps/v4/public/r/styles/radix-sera/sidebar-16.json +++ b/apps/v4/public/r/styles/radix-sera/sidebar-16.json @@ -42,7 +42,7 @@ }, { "path": "registry/radix-sera/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -52,7 +52,7 @@ }, { "path": "registry/radix-sera/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-sera/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-sera/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-sera/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-sera/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-vega/chart.json b/apps/v4/public/r/styles/radix-vega/chart.json index 3437f87eb70..387f894da82 100644 --- a/apps/v4/public/r/styles/radix-vega/chart.json +++ b/apps/v4/public/r/styles/radix-vega/chart.json @@ -7,7 +7,7 @@ "files": [ { "path": "registry/radix-vega/ui/chart.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n
\n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\nimport type { TooltipValueType } from \"recharts\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nconst INITIAL_DIMENSION = { width: 320, height: 200 } as const\ntype TooltipNameType = number | string\n\nexport type ChartConfig = Record<\n string,\n {\n label?: React.ReactNode\n icon?: React.ComponentType\n } & (\n | { color?: string; theme?: never }\n | { color?: never; theme: Record }\n )\n>\n\ntype ChartContextProps = {\n config: ChartConfig\n}\n\nconst ChartContext = React.createContext(null)\n\nfunction useChart() {\n const context = React.useContext(ChartContext)\n\n if (!context) {\n throw new Error(\"useChart must be used within a \")\n }\n\n return context\n}\n\nfunction ChartContainer({\n id,\n className,\n children,\n config,\n initialDimension = INITIAL_DIMENSION,\n ...props\n}: React.ComponentProps<\"div\"> & {\n config: ChartConfig\n children: React.ComponentProps<\n typeof RechartsPrimitive.ResponsiveContainer\n >[\"children\"]\n initialDimension?: {\n width: number\n height: number\n }\n}) {\n const uniqueId = React.useId()\n const chartId = `chart-${id ?? uniqueId.replace(/:/g, \"\")}`\n\n return (\n \n \n \n \n {children}\n \n \n \n )\n}\n\nconst ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {\n const colorConfig = Object.entries(config).filter(\n ([, config]) => config.theme ?? config.color\n )\n\n if (!colorConfig.length) {\n return null\n }\n\n return (\n `\n${prefix} [data-chart=${id}] {\n${colorConfig\n .map(([key, itemConfig]) => {\n const color =\n itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ??\n itemConfig.color\n return color ? ` --color-${key}: ${color};` : null\n })\n .join(\"\\n\")}\n}\n`\n )\n .join(\"\\n\"),\n }}\n />\n )\n}\n\nconst ChartTooltip = RechartsPrimitive.Tooltip\n\nfunction ChartTooltipContent({\n active,\n payload,\n className,\n indicator = \"dot\",\n hideLabel = false,\n hideIndicator = false,\n label,\n labelFormatter,\n labelClassName,\n formatter,\n color,\n nameKey,\n labelKey,\n}: React.ComponentProps &\n React.ComponentProps<\"div\"> & {\n hideLabel?: boolean\n hideIndicator?: boolean\n indicator?: \"line\" | \"dot\" | \"dashed\"\n nameKey?: string\n labelKey?: string\n } & Omit<\n RechartsPrimitive.DefaultTooltipContentProps<\n TooltipValueType,\n TooltipNameType\n >,\n \"accessibilityLayer\"\n >) {\n const { config } = useChart()\n\n const tooltipLabel = React.useMemo(() => {\n if (hideLabel || !payload?.length) {\n return null\n }\n\n const [item] = payload\n const key = `${labelKey ?? item?.dataKey ?? item?.name ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const value =\n !labelKey && typeof label === \"string\"\n ? (config[label]?.label ?? label)\n : itemConfig?.label\n\n if (labelFormatter) {\n return (\n
\n {labelFormatter(value, payload)}\n
\n )\n }\n\n if (!value) {\n return null\n }\n\n return
{value}
\n }, [\n label,\n labelFormatter,\n payload,\n hideLabel,\n labelClassName,\n config,\n labelKey,\n ])\n\n if (!active || !payload?.length) {\n return null\n }\n\n const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n return (\n \n {!nestLabel ? tooltipLabel : null}\n
\n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.name ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n const indicatorColor = color ?? item.payload?.fill ?? item.color\n\n return (\n svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n indicator === \"dot\" && \"items-center\"\n )}\n >\n {formatter && item?.value !== undefined && item.name ? (\n formatter(item.value, item.name, item, index, item.payload)\n ) : (\n <>\n {itemConfig?.icon ? (\n \n ) : (\n !hideIndicator && (\n \n )\n )}\n \n
\n {nestLabel ? tooltipLabel : null}\n \n {itemConfig?.label ?? item.name}\n \n
\n {item.value != null && (\n \n {typeof item.value === \"number\"\n ? item.value.toLocaleString()\n : String(item.value)}\n \n )}\n
\n \n )}\n \n )\n })}\n \n \n )\n}\n\nconst ChartLegend = RechartsPrimitive.Legend\n\nfunction ChartLegendContent({\n className,\n hideIcon = false,\n payload,\n verticalAlign = \"bottom\",\n nameKey,\n}: React.ComponentProps<\"div\"> & {\n hideIcon?: boolean\n nameKey?: string\n} & RechartsPrimitive.DefaultLegendContentProps) {\n const { config } = useChart()\n\n if (!payload?.length) {\n return null\n }\n\n return (\n \n {payload\n .filter((item) => item.type !== \"none\")\n .map((item, index) => {\n const key = `${nameKey ?? item.dataKey ?? \"value\"}`\n const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n return (\n svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground\"\n )}\n >\n {itemConfig?.icon && !hideIcon ? (\n \n ) : (\n \n )}\n {itemConfig?.label}\n \n )\n })}\n \n )\n}\n\nfunction getPayloadConfigFromPayload(\n config: ChartConfig,\n payload: unknown,\n key: string\n) {\n if (typeof payload !== \"object\" || payload === null) {\n return undefined\n }\n\n const payloadPayload =\n \"payload\" in payload &&\n typeof payload.payload === \"object\" &&\n payload.payload !== null\n ? payload.payload\n : undefined\n\n let configLabelKey: string = key\n\n if (\n key in payload &&\n typeof payload[key as keyof typeof payload] === \"string\"\n ) {\n configLabelKey = payload[key as keyof typeof payload] as string\n } else if (\n payloadPayload &&\n key in payloadPayload &&\n typeof payloadPayload[key as keyof typeof payloadPayload] === \"string\"\n ) {\n configLabelKey = payloadPayload[\n key as keyof typeof payloadPayload\n ] as string\n }\n\n return configLabelKey in config ? config[configLabelKey] : config[key]\n}\n\nexport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n ChartLegend,\n ChartLegendContent,\n ChartStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-vega/dashboard-01.json b/apps/v4/public/r/styles/radix-vega/dashboard-01.json index a7f407b91b8..3c7e2bba064 100644 --- a/apps/v4/public/r/styles/radix-vega/dashboard-01.json +++ b/apps/v4/public/r/styles/radix-vega/dashboard-01.json @@ -57,7 +57,7 @@ }, { "path": "registry/radix-vega/blocks/dashboard-01/components/data-table.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-vega/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n closestCenter,\n DndContext,\n KeyboardSensor,\n MouseSensor,\n TouchSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type UniqueIdentifier,\n} from \"@dnd-kit/core\"\nimport { restrictToVerticalAxis } from \"@dnd-kit/modifiers\"\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\"\nimport { CSS } from \"@dnd-kit/utilities\"\nimport {\n flexRender,\n getCoreRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n type ColumnDef,\n type ColumnFiltersState,\n type Row,\n type SortingState,\n type VisibilityState,\n} from \"@tanstack/react-table\"\nimport { Area, AreaChart, CartesianGrid, XAxis } from \"recharts\"\nimport { toast } from \"sonner\"\nimport { z } from \"zod\"\n\nimport { useIsMobile } from \"@/registry/radix-vega/hooks/use-mobile\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n ChartContainer,\n ChartTooltip,\n ChartTooltipContent,\n type ChartConfig,\n} from \"@/registry/radix-vega/ui/chart\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n Drawer,\n DrawerClose,\n DrawerContent,\n DrawerDescription,\n DrawerFooter,\n DrawerHeader,\n DrawerTitle,\n DrawerTrigger,\n} from \"@/registry/radix-vega/ui/drawer\"\nimport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectGroup,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/registry/radix-vega/ui/table\"\nimport {\n Tabs,\n TabsContent,\n TabsList,\n TabsTrigger,\n} from \"@/registry/radix-vega/ui/tabs\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport const schema = z.object({\n id: z.number(),\n header: z.string(),\n type: z.string(),\n status: z.string(),\n target: z.string(),\n limit: z.string(),\n reviewer: z.string(),\n})\n\n// Create a separate component for the drag handle\nfunction DragHandle({ id }: { id: number }) {\n const { attributes, listeners } = useSortable({\n id,\n })\n\n return (\n \n \n Drag to reorder\n \n )\n}\n\nconst columns: ColumnDef>[] = [\n {\n id: \"drag\",\n header: () => null,\n cell: ({ row }) => ,\n },\n {\n id: \"select\",\n header: ({ table }) => (\n
\n table.toggleAllPageRowsSelected(!!value)}\n aria-label=\"Select all\"\n />\n
\n ),\n cell: ({ row }) => (\n
\n row.toggleSelected(!!value)}\n aria-label=\"Select row\"\n />\n
\n ),\n enableSorting: false,\n enableHiding: false,\n },\n {\n accessorKey: \"header\",\n header: \"Header\",\n cell: ({ row }) => {\n return \n },\n enableHiding: false,\n },\n {\n accessorKey: \"type\",\n header: \"Section Type\",\n cell: ({ row }) => (\n
\n \n {row.original.type}\n \n
\n ),\n },\n {\n accessorKey: \"status\",\n header: \"Status\",\n cell: ({ row }) => (\n \n {row.original.status === \"Done\" ? (\n \n ) : (\n \n )}\n {row.original.status}\n \n ),\n },\n {\n accessorKey: \"target\",\n header: () =>
Target
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"limit\",\n header: () =>
Limit
,\n cell: ({ row }) => (\n {\n e.preventDefault()\n toast.promise(new Promise((resolve) => setTimeout(resolve, 1000)), {\n loading: `Saving ${row.original.header}`,\n success: \"Done\",\n error: \"Error\",\n })\n }}\n >\n \n \n \n ),\n },\n {\n accessorKey: \"reviewer\",\n header: \"Reviewer\",\n cell: ({ row }) => {\n const isAssigned = row.original.reviewer !== \"Assign reviewer\"\n\n if (isAssigned) {\n return row.original.reviewer\n }\n\n return (\n <>\n \n \n \n )\n },\n },\n {\n id: \"actions\",\n cell: () => (\n \n \n \n \n Open menu\n \n \n \n Edit\n Make a copy\n Favorite\n \n Delete\n \n \n ),\n },\n]\n\nfunction DraggableRow({ row }: { row: Row> }) {\n const { transform, transition, setNodeRef, isDragging } = useSortable({\n id: row.original.id,\n })\n\n return (\n \n {row.getVisibleCells().map((cell) => (\n \n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n \n ))}\n \n )\n}\n\nexport function DataTable({\n data: initialData,\n}: {\n data: z.infer[]\n}) {\n const [data, setData] = React.useState(() => initialData)\n const [rowSelection, setRowSelection] = React.useState({})\n const [columnVisibility, setColumnVisibility] =\n React.useState({})\n const [columnFilters, setColumnFilters] = React.useState(\n []\n )\n const [sorting, setSorting] = React.useState([])\n const [pagination, setPagination] = React.useState({\n pageIndex: 0,\n pageSize: 10,\n })\n const sortableId = React.useId()\n const sensors = useSensors(\n useSensor(MouseSensor, {}),\n useSensor(TouchSensor, {}),\n useSensor(KeyboardSensor, {})\n )\n\n const dataIds = React.useMemo(\n () => data?.map(({ id }) => id) || [],\n [data]\n )\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n pagination,\n },\n getRowId: (row) => row.id.toString(),\n enableRowSelection: true,\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onColumnVisibilityChange: setColumnVisibility,\n onPaginationChange: setPagination,\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n })\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event\n if (active && over && active.id !== over.id) {\n setData((data) => {\n const oldIndex = dataIds.indexOf(active.id)\n const newIndex = dataIds.indexOf(over.id)\n return arrayMove(data, oldIndex, newIndex)\n })\n }\n }\n\n return (\n \n
\n \n \n \n Outline\n \n Past Performance 3\n \n \n Key Personnel 2\n \n Focus Documents\n \n
\n \n \n \n \n \n {table\n .getAllColumns()\n .filter(\n (column) =>\n typeof column.accessorFn !== \"undefined\" &&\n column.getCanHide()\n )\n .map((column) => {\n return (\n \n column.toggleVisibility(!!value)\n }\n >\n {column.id}\n \n )\n })}\n \n \n \n
\n
\n \n
\n \n \n \n {table.getHeaderGroups().map((headerGroup) => (\n \n {headerGroup.headers.map((header) => {\n return (\n \n {header.isPlaceholder\n ? null\n : flexRender(\n header.column.columnDef.header,\n header.getContext()\n )}\n \n )\n })}\n \n ))}\n \n \n {table.getRowModel().rows?.length ? (\n \n {table.getRowModel().rows.map((row) => (\n \n ))}\n \n ) : (\n \n \n No results.\n \n \n )}\n \n
\n \n
\n
\n
\n {table.getFilteredSelectedRowModel().rows.length} of{\" \"}\n {table.getFilteredRowModel().rows.length} row(s) selected.\n
\n
\n
\n \n {\n table.setPageSize(Number(value))\n }}\n >\n \n \n \n \n \n {[10, 20, 30, 40, 50].map((pageSize) => (\n \n {pageSize}\n \n ))}\n \n \n \n
\n
\n Page {table.getState().pagination.pageIndex + 1} of{\" \"}\n {table.getPageCount()}\n
\n
\n table.setPageIndex(0)}\n disabled={!table.getCanPreviousPage()}\n >\n Go to first page\n \n \n table.previousPage()}\n disabled={!table.getCanPreviousPage()}\n >\n Go to previous page\n \n \n table.nextPage()}\n disabled={!table.getCanNextPage()}\n >\n Go to next page\n \n \n table.setPageIndex(table.getPageCount() - 1)}\n disabled={!table.getCanNextPage()}\n >\n Go to last page\n \n \n
\n
\n
\n \n \n
\n \n \n
\n \n \n
\n \n \n )\n}\n\nconst chartData = [\n { month: \"January\", desktop: 186, mobile: 80 },\n { month: \"February\", desktop: 305, mobile: 200 },\n { month: \"March\", desktop: 237, mobile: 120 },\n { month: \"April\", desktop: 73, mobile: 190 },\n { month: \"May\", desktop: 209, mobile: 130 },\n { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n desktop: {\n label: \"Desktop\",\n color: \"var(--primary)\",\n },\n mobile: {\n label: \"Mobile\",\n color: \"var(--primary)\",\n },\n} satisfies ChartConfig\n\nfunction TableCellViewer({ item }: { item: z.infer }) {\n const isMobile = useIsMobile()\n\n return (\n \n \n \n \n \n \n {item.header}\n \n Showing total visitors for the last 6 months\n \n \n
\n {!isMobile && (\n <>\n \n \n \n value.slice(0, 3)}\n hide\n />\n }\n />\n \n \n \n \n \n
\n
\n Trending up by 5.2% this month{\" \"}\n \n
\n
\n Showing total visitors for the last 6 months. This is just\n some random text to test the layout. It spans multiple lines\n and should wrap around.\n
\n
\n \n \n )}\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n \n \n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -77,7 +77,7 @@ }, { "path": "registry/radix-vega/blocks/dashboard-01/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n \n {user.email}\n \n
\n
\n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-vega/navigation-menu.json b/apps/v4/public/r/styles/radix-vega/navigation-menu.json index 084fa2b4a29..618cb8d7d04 100644 --- a/apps/v4/public/r/styles/radix-vega/navigation-menu.json +++ b/apps/v4/public/r/styles/radix-vega/navigation-menu.json @@ -4,7 +4,7 @@ "files": [ { "path": "registry/radix-vega/ui/navigation-menu.tsx", - "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", + "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n className,\n children,\n viewport = true,\n ...props\n}: React.ComponentProps & {\n viewport?: boolean\n}) {\n return (\n \n {children}\n {viewport && }\n \n )\n}\n\nfunction NavigationMenuList({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuItem({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nconst navigationMenuTriggerStyle = cva(\n \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n className,\n children,\n ...props\n}: React.ComponentProps) {\n return (\n \n {children}{\" \"}\n \n \n )\n}\n\nfunction NavigationMenuContent({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuViewport({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n
\n )\n}\n\nfunction NavigationMenuLink({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n )\n}\n\nfunction NavigationMenuIndicator({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n
\n \n )\n}\n\nexport {\n NavigationMenu,\n NavigationMenuList,\n NavigationMenuItem,\n NavigationMenuContent,\n NavigationMenuTrigger,\n NavigationMenuLink,\n NavigationMenuIndicator,\n NavigationMenuViewport,\n navigationMenuTriggerStyle,\n}\n", "type": "registry:ui" } ], diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-07.json b/apps/v4/public/r/styles/radix-vega/sidebar-07.json index 6e59086c4a8..bbc6d04bdef 100644 --- a/apps/v4/public/r/styles/radix-vega/sidebar-07.json +++ b/apps/v4/public/r/styles/radix-vega/sidebar-07.json @@ -35,7 +35,7 @@ }, { "path": "registry/radix-vega/blocks/sidebar-07/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-08.json b/apps/v4/public/r/styles/radix-vega/sidebar-08.json index 2bb8cda7e2a..3e13c7f05e9 100644 --- a/apps/v4/public/r/styles/radix-vega/sidebar-08.json +++ b/apps/v4/public/r/styles/radix-vega/sidebar-08.json @@ -40,7 +40,7 @@ }, { "path": "registry/radix-vega/blocks/sidebar-08/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-09.json b/apps/v4/public/r/styles/radix-vega/sidebar-09.json index 05571b0d502..e5b6ed25ac5 100644 --- a/apps/v4/public/r/styles/radix-vega/sidebar-09.json +++ b/apps/v4/public/r/styles/radix-vega/sidebar-09.json @@ -27,7 +27,7 @@ }, { "path": "registry/radix-vega/blocks/sidebar-09/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-10.json b/apps/v4/public/r/styles/radix-vega/sidebar-10.json index b83dcc3fa76..6bbf3693600 100644 --- a/apps/v4/public/r/styles/radix-vega/sidebar-10.json +++ b/apps/v4/public/r/styles/radix-vega/sidebar-10.json @@ -25,7 +25,7 @@ }, { "path": "registry/radix-vega/blocks/sidebar-10/components/nav-actions.tsx", - "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", + "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/registry/radix-vega/ui/popover\"\nimport {\n Sidebar,\n SidebarContent,\n SidebarGroup,\n SidebarGroupContent,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst data = [\n [\n {\n label: \"Customize Page\",\n icon: (\n \n ),\n },\n {\n label: \"Turn into wiki\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Copy Link\",\n icon: (\n \n ),\n },\n {\n label: \"Duplicate\",\n icon: (\n \n ),\n },\n {\n label: \"Move to\",\n icon: (\n \n ),\n },\n {\n label: \"Move to Trash\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Undo\",\n icon: (\n \n ),\n },\n {\n label: \"View analytics\",\n icon: (\n \n ),\n },\n {\n label: \"Version History\",\n icon: (\n \n ),\n },\n {\n label: \"Show delete pages\",\n icon: (\n \n ),\n },\n {\n label: \"Notifications\",\n icon: (\n \n ),\n },\n ],\n [\n {\n label: \"Import\",\n icon: (\n \n ),\n },\n {\n label: \"Export\",\n icon: (\n \n ),\n },\n ],\n]\n\nexport function NavActions() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n React.useEffect(() => {\n setIsOpen(true)\n }, [])\n\n return (\n
\n
\n Edit Oct 08\n
\n \n \n \n \n \n \n \n \n \n \n {data.map((group, index) => (\n \n \n \n {group.map((item, index) => (\n \n \n {item.icon} {item.label}\n \n \n ))}\n \n \n \n ))}\n \n \n \n \n
\n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-12.json b/apps/v4/public/r/styles/radix-vega/sidebar-12.json index 89f7b51c609..87c86093eef 100644 --- a/apps/v4/public/r/styles/radix-vega/sidebar-12.json +++ b/apps/v4/public/r/styles/radix-vega/sidebar-12.json @@ -36,7 +36,7 @@ }, { "path": "registry/radix-vega/blocks/sidebar-12/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-15.json b/apps/v4/public/r/styles/radix-vega/sidebar-15.json index 906dc368c9e..9e03cc77448 100644 --- a/apps/v4/public/r/styles/radix-vega/sidebar-15.json +++ b/apps/v4/public/r/styles/radix-vega/sidebar-15.json @@ -47,7 +47,7 @@ }, { "path": "registry/radix-vega/blocks/sidebar-15/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { diff --git a/apps/v4/public/r/styles/radix-vega/sidebar-16.json b/apps/v4/public/r/styles/radix-vega/sidebar-16.json index 7b9565ff5f1..ee021eeca95 100644 --- a/apps/v4/public/r/styles/radix-vega/sidebar-16.json +++ b/apps/v4/public/r/styles/radix-vega/sidebar-16.json @@ -42,7 +42,7 @@ }, { "path": "registry/radix-vega/blocks/sidebar-16/components/nav-user.tsx", - "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", + "content": "\"use client\"\n\nimport {\n Avatar,\n AvatarFallback,\n AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport {\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n useSidebar,\n} from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function NavUser({\n user,\n}: {\n user: {\n name: string\n email: string\n avatar: string\n }\n}) {\n const { isMobile } = useSidebar()\n\n return (\n \n \n \n \n \n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n \n \n \n \n \n
\n \n \n CN\n \n
\n {user.name}\n {user.email}\n
\n
\n \n \n \n \n \n Upgrade to Pro\n \n \n \n \n \n \n Account\n \n \n \n Billing\n \n \n \n Notifications\n \n \n \n \n \n Log out\n \n \n \n \n \n )\n}\n", "type": "registry:component" }, { @@ -52,7 +52,7 @@ }, { "path": "registry/radix-vega/blocks/sidebar-16/components/site-header.tsx", - "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-vega/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", + "content": "\"use client\"\n\nimport { SearchForm } from \"@/registry/radix-vega/blocks/sidebar-16/components/search-form\"\nimport {\n Breadcrumb,\n BreadcrumbItem,\n BreadcrumbLink,\n BreadcrumbList,\n BreadcrumbPage,\n BreadcrumbSeparator,\n} from \"@/registry/radix-vega/ui/breadcrumb\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Separator } from \"@/registry/radix-vega/ui/separator\"\nimport { useSidebar } from \"@/registry/radix-vega/ui/sidebar\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport function SiteHeader() {\n const { toggleSidebar } = useSidebar()\n\n return (\n
\n
\n \n \n \n \n \n \n \n Build Your Application\n \n \n \n Data Fetching\n \n \n \n \n
\n
\n )\n}\n", "type": "registry:component" } ], diff --git a/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx b/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx index c49d0bd224e..fa598bf2f87 100644 --- a/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx +++ b/apps/v4/registry/bases/base/blocks/dashboard-01/components/data-table.tsx @@ -615,7 +615,7 @@ export function DataTable({
@@ -118,7 +118,7 @@ export function NavActions() { diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx index 8f40d2059c0..8fefd7e0ff8 100644 --- a/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx +++ b/apps/v4/registry/new-york-v4/blocks/sidebar-12/components/nav-user.tsx @@ -50,7 +50,7 @@ export function NavUser({ size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" > - + CN @@ -69,7 +69,7 @@ export function NavUser({ >
- + CN diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx index 8f40d2059c0..8fefd7e0ff8 100644 --- a/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx +++ b/apps/v4/registry/new-york-v4/blocks/sidebar-15/components/nav-user.tsx @@ -50,7 +50,7 @@ export function NavUser({ size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" > - + CN @@ -69,7 +69,7 @@ export function NavUser({ >
- + CN diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx index c3b9de977b3..2683eb18e53 100644 --- a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx +++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/nav-user.tsx @@ -50,7 +50,7 @@ export function NavUser({ size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground" > - + CN @@ -69,7 +69,7 @@ export function NavUser({ >
- + CN diff --git a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx index 559eec5acbb..925cb20e9d2 100644 --- a/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx +++ b/apps/v4/registry/new-york-v4/blocks/sidebar-16/components/site-header.tsx @@ -22,7 +22,7 @@ export function SiteHeader() {
diff --git a/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx b/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx index cc54734149c..bb44c8378a7 100644 --- a/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx +++ b/apps/v4/registry/new-york-v4/examples/drawer-demo.tsx @@ -81,7 +81,7 @@ export default function DrawerDemo() { diff --git a/apps/v4/registry/new-york-v4/examples/skeleton-demo.tsx b/apps/v4/registry/new-york-v4/examples/skeleton-demo.tsx index d55e6bae179..7db302eaff7 100644 --- a/apps/v4/registry/new-york-v4/examples/skeleton-demo.tsx +++ b/apps/v4/registry/new-york-v4/examples/skeleton-demo.tsx @@ -3,7 +3,7 @@ import { Skeleton } from "@/registry/new-york-v4/ui/skeleton" export default function SkeletonDemo() { return (
- +
diff --git a/apps/v4/registry/new-york-v4/examples/toggle-disabled.tsx b/apps/v4/registry/new-york-v4/examples/toggle-disabled.tsx index 65002dfb734..469c41db26b 100644 --- a/apps/v4/registry/new-york-v4/examples/toggle-disabled.tsx +++ b/apps/v4/registry/new-york-v4/examples/toggle-disabled.tsx @@ -5,7 +5,7 @@ import { Toggle } from "@/registry/new-york-v4/ui/toggle" export default function ToggleDisabled() { return ( - + ) } diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-demo.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-demo.tsx index 521f0421a6b..6f41c873141 100644 --- a/apps/v4/registry/new-york-v4/examples/toggle-group-demo.tsx +++ b/apps/v4/registry/new-york-v4/examples/toggle-group-demo.tsx @@ -9,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-disabled.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-disabled.tsx index 2d3ed882fee..2ae0e75414f 100644 --- a/apps/v4/registry/new-york-v4/examples/toggle-group-disabled.tsx +++ b/apps/v4/registry/new-york-v4/examples/toggle-group-disabled.tsx @@ -9,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-lg.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-lg.tsx index 2a5db576bd0..187a073a36a 100644 --- a/apps/v4/registry/new-york-v4/examples/toggle-group-lg.tsx +++ b/apps/v4/registry/new-york-v4/examples/toggle-group-lg.tsx @@ -9,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-outline.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-outline.tsx index f018c69ba73..b538416697e 100644 --- a/apps/v4/registry/new-york-v4/examples/toggle-group-outline.tsx +++ b/apps/v4/registry/new-york-v4/examples/toggle-group-outline.tsx @@ -9,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-single.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-single.tsx index 3913a779458..f1073b5dd46 100644 --- a/apps/v4/registry/new-york-v4/examples/toggle-group-single.tsx +++ b/apps/v4/registry/new-york-v4/examples/toggle-group-single.tsx @@ -9,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/v4/registry/new-york-v4/examples/toggle-group-sm.tsx b/apps/v4/registry/new-york-v4/examples/toggle-group-sm.tsx index 08424d7a86b..33986901dbe 100644 --- a/apps/v4/registry/new-york-v4/examples/toggle-group-sm.tsx +++ b/apps/v4/registry/new-york-v4/examples/toggle-group-sm.tsx @@ -9,13 +9,13 @@ export default function ToggleGroupDemo() { return ( - + - + - + ) diff --git a/apps/v4/registry/new-york-v4/ui/chart.tsx b/apps/v4/registry/new-york-v4/ui/chart.tsx index 011836a0fbc..c20949448ed 100644 --- a/apps/v4/registry/new-york-v4/ui/chart.tsx +++ b/apps/v4/registry/new-york-v4/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
{children} - + ) } diff --git a/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx b/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx index 0a673f513c9..54fee1941b2 100644 --- a/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx +++ b/apps/v4/registry/new-york-v4/ui/navigation-menu.tsx @@ -150,7 +150,7 @@ function NavigationMenuIndicator({ )} {...props} > -
+
) } diff --git a/apps/v4/styles/base-luma/ui/chart.tsx b/apps/v4/styles/base-luma/ui/chart.tsx index 17a5927a695..26d25baa368 100644 --- a/apps/v4/styles/base-luma/ui/chart.tsx +++ b/apps/v4/styles/base-luma/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/base-lyra/ui/chart.tsx b/apps/v4/styles/base-lyra/ui/chart.tsx index 9f4839b0e6f..5a40c89769b 100644 --- a/apps/v4/styles/base-lyra/ui/chart.tsx +++ b/apps/v4/styles/base-lyra/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/base-maia/ui/chart.tsx b/apps/v4/styles/base-maia/ui/chart.tsx index 7c2dc847267..60eb44b15fa 100644 --- a/apps/v4/styles/base-maia/ui/chart.tsx +++ b/apps/v4/styles/base-maia/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/base-mira/ui/chart.tsx b/apps/v4/styles/base-mira/ui/chart.tsx index e381a99e7ae..0005183ffab 100644 --- a/apps/v4/styles/base-mira/ui/chart.tsx +++ b/apps/v4/styles/base-mira/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/base-nova/ui-rtl/chart.tsx b/apps/v4/styles/base-nova/ui-rtl/chart.tsx index 7c2dc847267..60eb44b15fa 100644 --- a/apps/v4/styles/base-nova/ui-rtl/chart.tsx +++ b/apps/v4/styles/base-nova/ui-rtl/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/base-nova/ui/chart.tsx b/apps/v4/styles/base-nova/ui/chart.tsx index 7c2dc847267..60eb44b15fa 100644 --- a/apps/v4/styles/base-nova/ui/chart.tsx +++ b/apps/v4/styles/base-nova/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/base-rhea/ui/chart.tsx b/apps/v4/styles/base-rhea/ui/chart.tsx index 17a5927a695..26d25baa368 100644 --- a/apps/v4/styles/base-rhea/ui/chart.tsx +++ b/apps/v4/styles/base-rhea/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/base-sera/ui/chart.tsx b/apps/v4/styles/base-sera/ui/chart.tsx index 812b9ce9f3d..8170fb43b33 100644 --- a/apps/v4/styles/base-sera/ui/chart.tsx +++ b/apps/v4/styles/base-sera/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/base-vega/ui/chart.tsx b/apps/v4/styles/base-vega/ui/chart.tsx index 7c2dc847267..60eb44b15fa 100644 --- a/apps/v4/styles/base-vega/ui/chart.tsx +++ b/apps/v4/styles/base-vega/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-luma/ui/chart.tsx b/apps/v4/styles/radix-luma/ui/chart.tsx index 17a5927a695..26d25baa368 100644 --- a/apps/v4/styles/radix-luma/ui/chart.tsx +++ b/apps/v4/styles/radix-luma/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-lyra/ui/chart.tsx b/apps/v4/styles/radix-lyra/ui/chart.tsx index 9f4839b0e6f..5a40c89769b 100644 --- a/apps/v4/styles/radix-lyra/ui/chart.tsx +++ b/apps/v4/styles/radix-lyra/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-maia/ui/chart.tsx b/apps/v4/styles/radix-maia/ui/chart.tsx index 7c2dc847267..60eb44b15fa 100644 --- a/apps/v4/styles/radix-maia/ui/chart.tsx +++ b/apps/v4/styles/radix-maia/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-mira/ui/chart.tsx b/apps/v4/styles/radix-mira/ui/chart.tsx index e381a99e7ae..0005183ffab 100644 --- a/apps/v4/styles/radix-mira/ui/chart.tsx +++ b/apps/v4/styles/radix-mira/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-nova/ui-rtl/chart.tsx b/apps/v4/styles/radix-nova/ui-rtl/chart.tsx index 7c2dc847267..60eb44b15fa 100644 --- a/apps/v4/styles/radix-nova/ui-rtl/chart.tsx +++ b/apps/v4/styles/radix-nova/ui-rtl/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-nova/ui/chart.tsx b/apps/v4/styles/radix-nova/ui/chart.tsx index 7c2dc847267..60eb44b15fa 100644 --- a/apps/v4/styles/radix-nova/ui/chart.tsx +++ b/apps/v4/styles/radix-nova/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-rhea/ui/chart.tsx b/apps/v4/styles/radix-rhea/ui/chart.tsx index 17a5927a695..26d25baa368 100644 --- a/apps/v4/styles/radix-rhea/ui/chart.tsx +++ b/apps/v4/styles/radix-rhea/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-sera/ui/chart.tsx b/apps/v4/styles/radix-sera/ui/chart.tsx index 812b9ce9f3d..8170fb43b33 100644 --- a/apps/v4/styles/radix-sera/ui/chart.tsx +++ b/apps/v4/styles/radix-sera/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) } diff --git a/apps/v4/styles/radix-vega/ui/chart.tsx b/apps/v4/styles/radix-vega/ui/chart.tsx index 7c2dc847267..60eb44b15fa 100644 --- a/apps/v4/styles/radix-vega/ui/chart.tsx +++ b/apps/v4/styles/radix-vega/ui/chart.tsx @@ -224,7 +224,7 @@ function ChartTooltipContent({ className={cn( "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", { - "h-2.5 w-2.5": indicator === "dot", + "size-2.5": indicator === "dot", "w-1": indicator === "line", "w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed", @@ -313,7 +313,7 @@ function ChartLegendContent({ ) : (
-
+
) }