react-shadcn-kit 0.2.2 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (111) hide show
  1. package/dist/assets/global.css +1 -1
  2. package/dist/components/composites/ComponentSearch.js +1 -0
  3. package/dist/components/composites/ComponentSearch.js.map +1 -1
  4. package/dist/components/composites/action-button.js +1 -0
  5. package/dist/components/composites/action-button.js.map +1 -1
  6. package/dist/components/composites/theme-toggle.js +1 -0
  7. package/dist/components/composites/theme-toggle.js.map +1 -1
  8. package/dist/components/composites/user-menu.js +1 -0
  9. package/dist/components/composites/user-menu.js.map +1 -1
  10. package/dist/components/data-table/data-table-column-header.js +37 -0
  11. package/dist/components/data-table/data-table-column-header.js.map +1 -0
  12. package/dist/components/data-table/data-table-faceted-filter.js +87 -0
  13. package/dist/components/data-table/data-table-faceted-filter.js.map +1 -0
  14. package/dist/components/data-table/data-table-pagination.js +97 -0
  15. package/dist/components/data-table/data-table-pagination.js.map +1 -0
  16. package/dist/components/data-table/data-table-toolbar.js +65 -0
  17. package/dist/components/data-table/data-table-toolbar.js.map +1 -0
  18. package/dist/components/data-table/data-table-view-options.js +32 -0
  19. package/dist/components/data-table/data-table-view-options.js.map +1 -0
  20. package/dist/components/data-table/data-table.js +143 -0
  21. package/dist/components/data-table/data-table.js.map +1 -0
  22. package/dist/components/kanban/kanban.js +293 -0
  23. package/dist/components/kanban/kanban.js.map +1 -0
  24. package/dist/components/marketing/hero.js +1 -0
  25. package/dist/components/marketing/hero.js.map +1 -1
  26. package/dist/components/marketing/social-proof.js +1 -0
  27. package/dist/components/marketing/social-proof.js.map +1 -1
  28. package/dist/components/marketing/value-props.js +1 -0
  29. package/dist/components/marketing/value-props.js.map +1 -1
  30. package/dist/components/primitives/aspect-ratio.js +1 -0
  31. package/dist/components/primitives/aspect-ratio.js.map +1 -1
  32. package/dist/components/primitives/badge.js +1 -0
  33. package/dist/components/primitives/badge.js.map +1 -1
  34. package/dist/components/primitives/button-group.js +1 -0
  35. package/dist/components/primitives/button-group.js.map +1 -1
  36. package/dist/components/primitives/button.js +1 -0
  37. package/dist/components/primitives/button.js.map +1 -1
  38. package/dist/components/primitives/calendar.js +1 -0
  39. package/dist/components/primitives/calendar.js.map +1 -1
  40. package/dist/components/primitives/carousel.js +1 -0
  41. package/dist/components/primitives/carousel.js.map +1 -1
  42. package/dist/components/primitives/chart.js +1 -0
  43. package/dist/components/primitives/chart.js.map +1 -1
  44. package/dist/components/primitives/checkbox.js +1 -0
  45. package/dist/components/primitives/checkbox.js.map +1 -1
  46. package/dist/components/primitives/context-menu.js +1 -0
  47. package/dist/components/primitives/context-menu.js.map +1 -1
  48. package/dist/components/primitives/custom-button.js +1 -0
  49. package/dist/components/primitives/custom-button.js.map +1 -1
  50. package/dist/components/primitives/drawer.js +1 -0
  51. package/dist/components/primitives/drawer.js.map +1 -1
  52. package/dist/components/primitives/dropdown-menu.js +3 -0
  53. package/dist/components/primitives/dropdown-menu.js.map +1 -1
  54. package/dist/components/primitives/field.js +1 -0
  55. package/dist/components/primitives/field.js.map +1 -1
  56. package/dist/components/primitives/form-context.js +1 -0
  57. package/dist/components/primitives/form-context.js.map +1 -1
  58. package/dist/components/primitives/form.js +1 -0
  59. package/dist/components/primitives/form.js.map +1 -1
  60. package/dist/components/primitives/hover-card.js +1 -0
  61. package/dist/components/primitives/hover-card.js.map +1 -1
  62. package/dist/components/primitives/input-group.js +1 -0
  63. package/dist/components/primitives/input-group.js.map +1 -1
  64. package/dist/components/primitives/input-otp.js +1 -0
  65. package/dist/components/primitives/input-otp.js.map +1 -1
  66. package/dist/components/primitives/label.js +1 -0
  67. package/dist/components/primitives/label.js.map +1 -1
  68. package/dist/components/primitives/loading-swap.js +1 -0
  69. package/dist/components/primitives/loading-swap.js.map +1 -1
  70. package/dist/components/primitives/navigation-menu.js +1 -0
  71. package/dist/components/primitives/navigation-menu.js.map +1 -1
  72. package/dist/components/primitives/popover.js +1 -0
  73. package/dist/components/primitives/popover.js.map +1 -1
  74. package/dist/components/primitives/radio-group.js +1 -0
  75. package/dist/components/primitives/radio-group.js.map +1 -1
  76. package/dist/components/primitives/scroll-area.js +1 -0
  77. package/dist/components/primitives/scroll-area.js.map +1 -1
  78. package/dist/components/primitives/separator.js +1 -0
  79. package/dist/components/primitives/separator.js.map +1 -1
  80. package/dist/components/primitives/sidebar-context.js +1 -0
  81. package/dist/components/primitives/sidebar-context.js.map +1 -1
  82. package/dist/components/primitives/sidebar.js +1 -0
  83. package/dist/components/primitives/sidebar.js.map +1 -1
  84. package/dist/components/primitives/slider.js +1 -0
  85. package/dist/components/primitives/slider.js.map +1 -1
  86. package/dist/components/primitives/sonner.js +1 -0
  87. package/dist/components/primitives/sonner.js.map +1 -1
  88. package/dist/components/primitives/switch.js +1 -0
  89. package/dist/components/primitives/switch.js.map +1 -1
  90. package/dist/components/primitives/tabs.js +1 -0
  91. package/dist/components/primitives/tabs.js.map +1 -1
  92. package/dist/components/primitives/theme-provider.js +1 -0
  93. package/dist/components/primitives/theme-provider.js.map +1 -1
  94. package/dist/components/primitives/toggle-group.js +1 -0
  95. package/dist/components/primitives/toggle-group.js.map +1 -1
  96. package/dist/components/primitives/toggle.js +1 -0
  97. package/dist/components/primitives/toggle.js.map +1 -1
  98. package/dist/components/primitives/tooltip.js +1 -0
  99. package/dist/components/primitives/tooltip.js.map +1 -1
  100. package/dist/hooks/use-aria-live.js +1 -0
  101. package/dist/hooks/use-aria-live.js.map +1 -1
  102. package/dist/hooks/use-focus-visible.js +1 -0
  103. package/dist/hooks/use-focus-visible.js.map +1 -1
  104. package/dist/hooks/use-mobile.js +1 -0
  105. package/dist/hooks/use-mobile.js.map +1 -1
  106. package/dist/hooks/use-screen-reader-only.js +1 -0
  107. package/dist/hooks/use-screen-reader-only.js.map +1 -1
  108. package/dist/index.d.ts +144 -0
  109. package/dist/index.js +266 -245
  110. package/dist/index.js.map +1 -1
  111. package/package.json +17 -1
@@ -0,0 +1,143 @@
1
+ "use client";
2
+ import { jsxs as r, jsx as t } from "react/jsx-runtime";
3
+ import * as l from "react";
4
+ import { useReactTable as O, getFacetedUniqueValues as U, getFacetedRowModel as B, getSortedRowModel as W, getPaginationRowModel as J, getFilteredRowModel as K, getCoreRowModel as L, getExpandedRowModel as Q, flexRender as S } from "@tanstack/react-table";
5
+ import { Table as X, TableHeader as Y, TableRow as c, TableHead as Z, TableBody as _, TableCell as u } from "../primitives/table.js";
6
+ import { DataTablePagination as ee } from "./data-table-pagination.js";
7
+ import { DataTableToolbar as te } from "./data-table-toolbar.js";
8
+ function ae({
9
+ columns: g,
10
+ data: R,
11
+ searchKey: x,
12
+ onRowClick: m,
13
+ renderSubComponent: h,
14
+ enableRowExpansion: a = !1,
15
+ enableColumnSizing: i = !1,
16
+ enableColumnPinning: d = !1,
17
+ enableGlobalFilter: v = !1,
18
+ enableColumnOrdering: p = !1,
19
+ enableRowPinning: f = !1,
20
+ facetedFilters: w
21
+ }) {
22
+ const [C, b] = l.useState({}), [M, F] = l.useState({}), [T, y] = l.useState([]), [P, z] = l.useState(""), [N, I] = l.useState([]), [$, D] = l.useState({}), [V, H] = l.useState({}), [k, j] = l.useState([]), [q, A] = l.useState({
23
+ left: [],
24
+ right: []
25
+ }), [E, G] = l.useState({
26
+ top: [],
27
+ bottom: []
28
+ }), s = O({
29
+ data: R,
30
+ columns: g,
31
+ state: {
32
+ sorting: N,
33
+ columnVisibility: M,
34
+ rowSelection: C,
35
+ columnFilters: T,
36
+ globalFilter: P,
37
+ ...a && { expanded: $ },
38
+ ...i && { columnSizing: V },
39
+ ...d && { columnPinning: q },
40
+ ...p && { columnOrder: k },
41
+ ...f && { rowPinning: E }
42
+ },
43
+ defaultColumn: {
44
+ minSize: 50,
45
+ maxSize: 500
46
+ },
47
+ enableRowSelection: !0,
48
+ ...a && { getExpandedRowModel: Q() },
49
+ onRowSelectionChange: b,
50
+ onSortingChange: I,
51
+ onColumnFiltersChange: y,
52
+ onGlobalFilterChange: z,
53
+ onColumnVisibilityChange: F,
54
+ ...a && { onExpandedChange: D },
55
+ ...i && { onColumnSizingChange: H },
56
+ ...d && { onColumnPinningChange: A },
57
+ ...p && { onColumnOrderChange: j },
58
+ ...f && { onRowPinningChange: G },
59
+ getCoreRowModel: L(),
60
+ getFilteredRowModel: K(),
61
+ getPaginationRowModel: J(),
62
+ getSortedRowModel: W(),
63
+ getFacetedRowModel: B(),
64
+ getFacetedUniqueValues: U()
65
+ });
66
+ return /* @__PURE__ */ r("div", { className: "space-y-4", children: [
67
+ /* @__PURE__ */ t(
68
+ te,
69
+ {
70
+ table: s,
71
+ searchKey: x,
72
+ enableGlobalFilter: v,
73
+ facetedFilters: w
74
+ }
75
+ ),
76
+ /* @__PURE__ */ t("div", { className: "rounded-md border overflow-x-auto", children: /* @__PURE__ */ r(X, { style: i ? { minWidth: s.getTotalSize() } : void 0, children: [
77
+ /* @__PURE__ */ t(Y, { children: s.getHeaderGroups().map((n) => /* @__PURE__ */ t(c, { children: n.headers.map((e) => {
78
+ const o = d ? e.column.getIsPinned() : !1;
79
+ return /* @__PURE__ */ r(
80
+ Z,
81
+ {
82
+ colSpan: e.colSpan,
83
+ className: "relative",
84
+ style: {
85
+ width: i ? `${e.getSize()}px` : void 0,
86
+ position: o ? "sticky" : void 0,
87
+ left: o === "left" ? `${e.column.getStart()}px` : void 0,
88
+ right: o === "right" ? `${e.column.getAfter()}px` : void 0,
89
+ zIndex: o ? 1 : void 0,
90
+ backgroundColor: o ? "rgba(0, 0, 0, 0.02)" : void 0
91
+ },
92
+ children: [
93
+ e.isPlaceholder ? null : S(e.column.columnDef.header, e.getContext()),
94
+ i && /* @__PURE__ */ t(
95
+ "div",
96
+ {
97
+ onMouseDown: e.getResizeHandler(),
98
+ onTouchStart: e.getResizeHandler(),
99
+ className: `absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none hover:bg-primary/50 ${e.column.getIsResizing() ? "bg-primary" : "bg-border"}`
100
+ }
101
+ )
102
+ ]
103
+ },
104
+ e.id
105
+ );
106
+ }) }, n.id)) }),
107
+ /* @__PURE__ */ t(_, { children: s.getRowModel().rows?.length ? s.getRowModel().rows.map((n) => /* @__PURE__ */ r(l.Fragment, { children: [
108
+ /* @__PURE__ */ t(
109
+ c,
110
+ {
111
+ onClick: () => m?.(n),
112
+ className: m ? "cursor-pointer" : "",
113
+ "data-state": n.getIsSelected() && "selected",
114
+ children: n.getVisibleCells().map((e) => {
115
+ const o = d ? e.column.getIsPinned() : !1;
116
+ return /* @__PURE__ */ t(
117
+ u,
118
+ {
119
+ style: {
120
+ width: i ? `${e.column.getSize()}px` : void 0,
121
+ position: o ? "sticky" : void 0,
122
+ left: o === "left" ? `${e.column.getStart()}px` : void 0,
123
+ right: o === "right" ? `${e.column.getAfter()}px` : void 0,
124
+ zIndex: o ? 1 : void 0,
125
+ backgroundColor: o ? "rgba(0, 0, 0, 0.02)" : void 0
126
+ },
127
+ children: S(e.column.columnDef.cell, e.getContext())
128
+ },
129
+ e.id
130
+ );
131
+ })
132
+ }
133
+ ),
134
+ a && n.getIsExpanded() && /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(u, { colSpan: g.length, className: "p-0", children: h ? h({ row: n }) : null }) })
135
+ ] }, n.id)) : /* @__PURE__ */ t(c, { children: /* @__PURE__ */ t(u, { colSpan: g.length, className: "h-24 text-center", children: "No results." }) }) })
136
+ ] }) }),
137
+ /* @__PURE__ */ t(ee, { table: s })
138
+ ] });
139
+ }
140
+ export {
141
+ ae as DataTable
142
+ };
143
+ //# sourceMappingURL=data-table.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"data-table.js","sources":["../../../src/components/data-table/data-table.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport type { Row } from \"@tanstack/react-table\";\nimport {\n ColumnDef,\n ColumnFiltersState,\n ColumnPinningState,\n ColumnSizingState,\n ExpandedState,\n SortingState,\n VisibilityState,\n ColumnOrderState,\n RowPinningState,\n flexRender,\n getCoreRowModel,\n getExpandedRowModel,\n getFacetedRowModel,\n getFacetedUniqueValues,\n getFilteredRowModel,\n getPaginationRowModel,\n getSortedRowModel,\n useReactTable,\n} from \"@tanstack/react-table\";\n\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from \"../primitives/table\";\n\nimport { DataTablePagination } from \"./data-table-pagination\";\nimport { DataTableToolbar } from \"./data-table-toolbar\";\n\ninterface DataTableProps<TData, TValue> {\n columns: ColumnDef<TData, TValue>[];\n data: TData[];\n searchKey?: string;\n onRowClick?: (row: Row<TData>) => void;\n renderSubComponent?: (props: { row: Row<TData> }) => React.ReactNode;\n enableRowExpansion?: boolean;\n\n enableColumnSizing?: boolean;\n enableColumnPinning?: boolean;\n enableGlobalFilter?: boolean;\n enableColumnOrdering?: boolean;\n enableRowPinning?: boolean;\n facetedFilters?: {\n columnId: string;\n title: string;\n options: {\n label: string;\n value: string;\n icon?: React.ComponentType<{ className?: string }>;\n }[];\n }[];\n}\n\nexport function DataTable<TData, TValue>({\n columns,\n data,\n searchKey,\n onRowClick,\n renderSubComponent,\n enableRowExpansion = false,\n\n enableColumnSizing = false,\n enableColumnPinning = false,\n enableGlobalFilter = false,\n enableColumnOrdering = false,\n enableRowPinning = false,\n facetedFilters,\n}: DataTableProps<TData, TValue>) {\n const [rowSelection, setRowSelection] = React.useState({});\n const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});\n const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);\n const [globalFilter, setGlobalFilter] = React.useState<string>(\"\");\n const [sorting, setSorting] = React.useState<SortingState>([]);\n const [expanded, setExpanded] = React.useState<ExpandedState>({});\n\n const [columnSizing, setColumnSizing] = React.useState<ColumnSizingState>({});\n const [columnOrder, setColumnOrder] = React.useState<ColumnOrderState>([]);\n const [columnPinning, setColumnPinning] = React.useState<ColumnPinningState>({\n left: [],\n right: [],\n });\n const [rowPinning, setRowPinning] = React.useState<RowPinningState>({\n top: [],\n bottom: [],\n });\n\n const table = useReactTable({\n data,\n columns,\n state: {\n sorting,\n columnVisibility,\n rowSelection,\n columnFilters,\n globalFilter,\n ...(enableRowExpansion && { expanded }),\n\n ...(enableColumnSizing && { columnSizing }),\n ...(enableColumnPinning && { columnPinning }),\n ...(enableColumnOrdering && { columnOrder }),\n ...(enableRowPinning && { rowPinning }),\n },\n defaultColumn: {\n minSize: 50,\n maxSize: 500,\n },\n enableRowSelection: true,\n ...(enableRowExpansion && { getExpandedRowModel: getExpandedRowModel() }),\n\n onRowSelectionChange: setRowSelection,\n onSortingChange: setSorting,\n onColumnFiltersChange: setColumnFilters,\n onGlobalFilterChange: setGlobalFilter,\n onColumnVisibilityChange: setColumnVisibility,\n ...(enableRowExpansion && { onExpandedChange: setExpanded }),\n\n ...(enableColumnSizing && { onColumnSizingChange: setColumnSizing }),\n ...(enableColumnPinning && { onColumnPinningChange: setColumnPinning }),\n ...(enableColumnOrdering && { onColumnOrderChange: setColumnOrder }),\n ...(enableRowPinning && { onRowPinningChange: setRowPinning }),\n getCoreRowModel: getCoreRowModel(),\n getFilteredRowModel: getFilteredRowModel(),\n getPaginationRowModel: getPaginationRowModel(),\n getSortedRowModel: getSortedRowModel(),\n getFacetedRowModel: getFacetedRowModel(),\n getFacetedUniqueValues: getFacetedUniqueValues(),\n });\n\n return (\n <div className=\"space-y-4\">\n <DataTableToolbar\n table={table}\n searchKey={searchKey}\n enableGlobalFilter={enableGlobalFilter}\n facetedFilters={facetedFilters}\n />\n <div className=\"rounded-md border overflow-x-auto\">\n <Table style={enableColumnSizing ? { minWidth: table.getTotalSize() } : undefined}>\n <TableHeader>\n {table.getHeaderGroups().map((headerGroup) => (\n <TableRow key={headerGroup.id}>\n {headerGroup.headers.map((header) => {\n const isPinned = enableColumnPinning ? header.column.getIsPinned() : false;\n return (\n <TableHead\n key={header.id}\n colSpan={header.colSpan}\n className=\"relative\"\n style={{\n width: enableColumnSizing ? `${header.getSize()}px` : undefined,\n position: isPinned ? \"sticky\" : undefined,\n left: isPinned === \"left\" ? `${header.column.getStart()}px` : undefined,\n right: isPinned === \"right\" ? `${header.column.getAfter()}px` : undefined,\n zIndex: isPinned ? 1 : undefined,\n backgroundColor: isPinned ? \"rgba(0, 0, 0, 0.02)\" : undefined,\n }}\n >\n {header.isPlaceholder\n ? null\n : flexRender(header.column.columnDef.header, header.getContext())}\n {enableColumnSizing && (\n <div\n onMouseDown={header.getResizeHandler()}\n onTouchStart={header.getResizeHandler()}\n className={`absolute right-0 top-0 h-full w-1 cursor-col-resize select-none touch-none hover:bg-primary/50 ${\n header.column.getIsResizing() ? \"bg-primary\" : \"bg-border\"\n }`}\n />\n )}\n </TableHead>\n );\n })}\n </TableRow>\n ))}\n </TableHeader>\n <TableBody>\n {table.getRowModel().rows?.length ? (\n table.getRowModel().rows.map((row) => (\n <React.Fragment key={row.id}>\n <TableRow\n onClick={() => onRowClick?.(row)}\n className={onRowClick ? \"cursor-pointer\" : \"\"}\n data-state={row.getIsSelected() && \"selected\"}\n >\n {row.getVisibleCells().map((cell) => {\n const isPinned = enableColumnPinning ? cell.column.getIsPinned() : false;\n return (\n <TableCell\n key={cell.id}\n style={{\n width: enableColumnSizing ? `${cell.column.getSize()}px` : undefined,\n position: isPinned ? \"sticky\" : undefined,\n left: isPinned === \"left\" ? `${cell.column.getStart()}px` : undefined,\n right: isPinned === \"right\" ? `${cell.column.getAfter()}px` : undefined,\n zIndex: isPinned ? 1 : undefined,\n backgroundColor: isPinned ? \"rgba(0, 0, 0, 0.02)\" : undefined,\n }}\n >\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableCell>\n );\n })}\n </TableRow>\n {enableRowExpansion && row.getIsExpanded() && (\n <TableRow>\n <TableCell colSpan={columns.length} className=\"p-0\">\n {renderSubComponent ? renderSubComponent({ row }) : null}\n </TableCell>\n </TableRow>\n )}\n </React.Fragment>\n ))\n ) : (\n <TableRow>\n <TableCell colSpan={columns.length} className=\"h-24 text-center\">\n No results.\n </TableCell>\n </TableRow>\n )}\n </TableBody>\n </Table>\n </div>\n <DataTablePagination table={table} />\n </div>\n );\n}\n"],"names":[],"mappings":";AAsDO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAkC;AACvC;AACA;AACA;AACA;AACA;AACqB;AAEA;AACC;AACD;AACE;AACJ;AAErB;AACE;AAS6E;AACrE;AACC;AAE2D;AAC7D;AACG;AAGkB;AAC1B;AACA;AACO;AACL;AACA;AACA;AACA;AACA;AAC4B;AAEA;AACC;AACC;AACJ;AAAW;AAExB;AACJ;AACA;AAAA;AAES;AACiD;AAE/C;AACL;AACM;AACD;AACI;AACoB;AAEI;AACE;AACD;AACL;AAC7B;AACI;AACE;AACJ;AACC;AACI;AAG1B;AAEI;AAAA;AAAC;AAAA;AACC;AACA;AACA;AACA;AAAA;AAAA;AAIE;AAIQ;AACA;AACE;AAAC;AAAA;AAEiB;AACN;AACH;AACiD;AACtB;AAC8B;AACE;AACzC;AAC6B;AAAA;AAGrD;AAEiE;AAEhE;AAAC;AAAA;AACqB;AACC;AAGrB;AAAA;AAAA;AACF;AAAA;AAtBU;AAAA;AA6BxB;AAKQ;AAAA;AAAC;AAAA;AACgC;AACY;AACR;AAGjC;AACA;AACE;AAAC;AAAA;AAEQ;AACsD;AAC3B;AAC4B;AACE;AACvC;AAC6B;AAAA;AAGG;AAAA;AAV/C;AAAA;AAaf;AAAA;AAAA;AAOD;AAWV;AAEJ;AACmC;AAGzC;;;;"}
@@ -0,0 +1,293 @@
1
+ "use client";
2
+ import { jsx as r, jsxs as w } from "react/jsx-runtime";
3
+ import * as l from "react";
4
+ import { createPortal as L } from "react-dom";
5
+ import { useSensors as $, useSensor as N, PointerSensor as q, KeyboardSensor as z, defaultDropAnimationSideEffects as F, DndContext as J, DragOverlay as Q } from "@dnd-kit/core";
6
+ import { sortableKeyboardCoordinates as U, useSortable as A, SortableContext as V, arrayMove as K } from "@dnd-kit/sortable";
7
+ import { CSS as E } from "@dnd-kit/utilities";
8
+ import { cn as u } from "../../lib/utils.js";
9
+ function dt({
10
+ items: t,
11
+ columns: e = [],
12
+ onItemUpdate: x,
13
+ onItemClick: I,
14
+ renderCard: f,
15
+ className: S
16
+ }) {
17
+ const [s, v] = l.useState(null), [g, m] = l.useState(null), [n, p] = l.useState(t);
18
+ l.useEffect(() => {
19
+ s || p(t);
20
+ }, [t, s]);
21
+ const D = $(
22
+ N(q, {
23
+ activationConstraint: {
24
+ distance: 10
25
+ }
26
+ }),
27
+ N(z, {
28
+ coordinateGetter: U
29
+ })
30
+ ), b = l.useMemo(() => g === "Card" && s ? n.find((a) => a.id === s) : null, [s, g, n]);
31
+ function T(a) {
32
+ if (a.active.data.current?.type === "Card") {
33
+ v(a.active.id), m("Card"), p(t);
34
+ return;
35
+ }
36
+ }
37
+ function j(a) {
38
+ const { active: o, over: h } = a;
39
+ if (!h) return;
40
+ const y = o.id, C = h.id;
41
+ if (y === C) return;
42
+ const k = o.data.current?.type === "Card", P = h.data.current?.type === "Card", G = h.data.current?.type === "Column";
43
+ if (k) {
44
+ if (k && P) {
45
+ const d = n.findIndex((i) => i.id === y), c = n.findIndex((i) => i.id === C);
46
+ if (n[d].status !== n[c].status) {
47
+ const i = [...n];
48
+ i[d] = {
49
+ ...i[d],
50
+ status: n[c].status
51
+ };
52
+ const H = K(i, d, c);
53
+ p(H);
54
+ } else {
55
+ const i = K(n, d, c);
56
+ p(i);
57
+ }
58
+ }
59
+ if (k && G) {
60
+ const d = n.findIndex((i) => i.id === y), c = [...n];
61
+ c[d] = {
62
+ ...c[d],
63
+ status: C
64
+ }, p(c);
65
+ }
66
+ }
67
+ }
68
+ function M(a) {
69
+ const { active: o, over: h } = a, y = o.id;
70
+ if (v(null), m(null), !h) return;
71
+ const C = n.find((k) => k.id === y);
72
+ C && x(y, C.status);
73
+ }
74
+ const R = l.useMemo(() => {
75
+ const a = {};
76
+ return e.forEach((o) => {
77
+ a[o.id] = [];
78
+ }), n.forEach((o) => {
79
+ a[o.status] ? a[o.status].push(o) : e.length > 0 && a[e[0].id].push(o);
80
+ }), a;
81
+ }, [n, e]), B = {
82
+ sideEffects: F({
83
+ styles: {
84
+ active: {
85
+ opacity: "0.5"
86
+ }
87
+ }
88
+ })
89
+ };
90
+ return /* @__PURE__ */ r(
91
+ "div",
92
+ {
93
+ "data-slot": "kanban",
94
+ className: u(
95
+ "flex h-full w-full items-start overflow-x-auto overflow-y-hidden py-4",
96
+ S
97
+ ),
98
+ children: /* @__PURE__ */ w(
99
+ J,
100
+ {
101
+ sensors: D,
102
+ onDragStart: T,
103
+ onDragOver: j,
104
+ onDragEnd: M,
105
+ children: [
106
+ /* @__PURE__ */ r("div", { className: "flex gap-4 pb-4", children: e.map((a) => /* @__PURE__ */ r(
107
+ W,
108
+ {
109
+ column: a,
110
+ items: R[a.id] || [],
111
+ onCardClick: I,
112
+ renderCard: f
113
+ },
114
+ a.id
115
+ )) }),
116
+ typeof document < "u" && L(
117
+ /* @__PURE__ */ r(Q, { dropAnimation: B, children: b && /* @__PURE__ */ r(O, { card: b, renderCard: f }) }),
118
+ document.body
119
+ )
120
+ ]
121
+ }
122
+ )
123
+ }
124
+ );
125
+ }
126
+ function W({
127
+ column: t,
128
+ items: e,
129
+ onCardClick: x,
130
+ renderCard: I,
131
+ className: f
132
+ }) {
133
+ const S = l.useMemo(() => e.map((b) => b.id), [e]), { setNodeRef: s, attributes: v, listeners: g, transform: m, transition: n, isDragging: p } = A({
134
+ id: t.id,
135
+ data: {
136
+ type: "Column",
137
+ column: t
138
+ },
139
+ disabled: !0
140
+ // Disable column reordering by default
141
+ }), D = {
142
+ transition: n,
143
+ transform: E.Transform.toString(m)
144
+ };
145
+ return p ? /* @__PURE__ */ r(
146
+ "div",
147
+ {
148
+ ref: s,
149
+ style: D,
150
+ "data-slot": "kanban-column",
151
+ className: "bg-muted/30 opacity-40 border-2 border-primary/30 w-[300px] min-w-[300px] h-[600px] max-h-[600px] rounded-md flex flex-col"
152
+ }
153
+ ) : /* @__PURE__ */ w(
154
+ "div",
155
+ {
156
+ ref: s,
157
+ style: D,
158
+ "data-slot": "kanban-column",
159
+ className: u(
160
+ "bg-muted/10 w-[300px] min-w-[300px] h-[600px] max-h-[600px] rounded-xl flex flex-col border",
161
+ f
162
+ ),
163
+ children: [
164
+ /* @__PURE__ */ w(X, { ...v, ...g, children: [
165
+ /* @__PURE__ */ r(Y, { children: e.length }),
166
+ t.title
167
+ ] }),
168
+ /* @__PURE__ */ r(Z, { children: /* @__PURE__ */ r(V, { items: S, children: e.map((b) => /* @__PURE__ */ r(
169
+ O,
170
+ {
171
+ card: b,
172
+ onCardClick: x,
173
+ renderCard: I
174
+ },
175
+ b.id
176
+ )) }) })
177
+ ]
178
+ }
179
+ );
180
+ }
181
+ function X({ className: t, ...e }) {
182
+ return /* @__PURE__ */ r(
183
+ "div",
184
+ {
185
+ "data-slot": "kanban-column-header",
186
+ className: u(
187
+ "bg-background/50 backdrop-blur-sm text-md h-[60px] rounded-t-xl p-4 font-semibold border-b border-border/50 flex items-center justify-between",
188
+ t
189
+ ),
190
+ ...e
191
+ }
192
+ );
193
+ }
194
+ function Y({ className: t, ...e }) {
195
+ return /* @__PURE__ */ r(
196
+ "div",
197
+ {
198
+ "data-slot": "kanban-column-badge",
199
+ className: u(
200
+ "flex justify-center items-center bg-primary/10 text-primary px-2.5 py-0.5 text-xs font-medium rounded-full",
201
+ t
202
+ ),
203
+ ...e
204
+ }
205
+ );
206
+ }
207
+ function Z({ className: t, ...e }) {
208
+ return /* @__PURE__ */ r(
209
+ "div",
210
+ {
211
+ "data-slot": "kanban-column-content",
212
+ className: u("flex grow flex-col gap-3 p-3 overflow-x-hidden overflow-y-auto", t),
213
+ ...e
214
+ }
215
+ );
216
+ }
217
+ const _ = ({
218
+ card: t,
219
+ onCardClick: e,
220
+ renderCard: x,
221
+ className: I
222
+ }) => {
223
+ const { setNodeRef: f, attributes: S, listeners: s, transform: v, transition: g, isDragging: m } = A({
224
+ id: t.id,
225
+ data: {
226
+ type: "Card",
227
+ card: t
228
+ }
229
+ }), n = {
230
+ transition: g,
231
+ transform: E.Transform.toString(v)
232
+ };
233
+ return m ? /* @__PURE__ */ r(
234
+ "div",
235
+ {
236
+ ref: f,
237
+ style: n,
238
+ "data-slot": "kanban-card",
239
+ className: "opacity-30 bg-background p-3 rounded-xl border border-primary/50 cursor-grab relative h-[100px]"
240
+ }
241
+ ) : /* @__PURE__ */ r(
242
+ "div",
243
+ {
244
+ ref: f,
245
+ style: n,
246
+ "data-slot": "kanban-card",
247
+ ...S,
248
+ ...s,
249
+ onClick: () => {
250
+ m || e?.(t);
251
+ },
252
+ className: u(
253
+ "bg-background p-3 rounded-xl hover:ring-2 hover:ring-primary/20 hover:ring-inset cursor-grab relative border border-border/50 shadow-sm space-y-2 group transition-all",
254
+ I
255
+ ),
256
+ children: x ? x(t) : /* @__PURE__ */ w("div", { className: "space-y-1", children: [
257
+ /* @__PURE__ */ r(tt, { children: t.title || t.name || `Item ${t.id}` }),
258
+ t.description && /* @__PURE__ */ r(et, { children: t.description })
259
+ ] })
260
+ }
261
+ );
262
+ }, O = l.memo(_);
263
+ function tt({ className: t, ...e }) {
264
+ return /* @__PURE__ */ r(
265
+ "div",
266
+ {
267
+ "data-slot": "kanban-card-title",
268
+ className: u("font-medium text-sm line-clamp-1", t),
269
+ ...e
270
+ }
271
+ );
272
+ }
273
+ function et({ className: t, ...e }) {
274
+ return /* @__PURE__ */ r(
275
+ "div",
276
+ {
277
+ "data-slot": "kanban-card-description",
278
+ className: u("text-xs text-muted-foreground line-clamp-2", t),
279
+ ...e
280
+ }
281
+ );
282
+ }
283
+ export {
284
+ dt as Kanban,
285
+ O as KanbanCard,
286
+ et as KanbanCardDescription,
287
+ tt as KanbanCardTitle,
288
+ W as KanbanColumn,
289
+ Y as KanbanColumnBadge,
290
+ Z as KanbanColumnContent,
291
+ X as KanbanColumnHeader
292
+ };
293
+ //# sourceMappingURL=kanban.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"kanban.js","sources":["../../../src/components/kanban/kanban.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n DndContext,\n DragOverlay,\n DragStartEvent,\n DragEndEvent,\n DragOverEvent,\n useSensor,\n useSensors,\n PointerSensor,\n KeyboardSensor,\n defaultDropAnimationSideEffects,\n DropAnimation,\n} from \"@dnd-kit/core\";\nimport {\n arrayMove,\n sortableKeyboardCoordinates,\n SortableContext,\n useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\n\nimport { cn } from \"@/lib/utils\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type KanbanId = string | number;\n\nexport interface KanbanColumnDef {\n id: string;\n title: string;\n}\n\nexport interface KanbanItem {\n id: KanbanId;\n status: string;\n title?: string;\n name?: string;\n description?: string;\n [key: string]: unknown;\n}\n\n// ============================================================================\n// Kanban Root\n// ============================================================================\n\ninterface KanbanRootProps<T extends KanbanItem> {\n items: T[];\n columns?: KanbanColumnDef[];\n onItemUpdate: (itemId: KanbanId, newStatus: string) => void;\n onItemClick?: (item: T) => void;\n renderCard?: (item: T) => React.ReactNode;\n className?: string;\n}\n\nfunction KanbanRoot<T extends KanbanItem>({\n items,\n columns = [],\n onItemUpdate,\n onItemClick,\n renderCard,\n className,\n}: KanbanRootProps<T>) {\n const [activeDragId, setActiveDragId] = React.useState<KanbanId | null>(null);\n const [activeDragType, setActiveDragType] = React.useState<\"Column\" | \"Card\" | null>(null);\n const [localItems, setLocalItems] = React.useState<T[]>(items);\n\n // Sync local items when props change (if not dragging)\n React.useEffect(() => {\n if (!activeDragId) {\n setLocalItems(items);\n }\n }, [items, activeDragId]);\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n distance: 10,\n },\n }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\n\n const activeItem = React.useMemo(() => {\n if (activeDragType === \"Card\" && activeDragId) {\n return localItems.find((l) => l.id === activeDragId);\n }\n return null;\n }, [activeDragId, activeDragType, localItems]);\n\n function handleDragStart(event: DragStartEvent) {\n if (event.active.data.current?.type === \"Card\") {\n setActiveDragId(event.active.id as KanbanId);\n setActiveDragType(\"Card\");\n setLocalItems(items);\n return;\n }\n }\n\n function handleDragOver(event: DragOverEvent) {\n const { active, over } = event;\n if (!over) return;\n\n const activeId = active.id;\n const overId = over.id;\n\n if (activeId === overId) return;\n\n const isActiveACard = active.data.current?.type === \"Card\";\n const isOverACard = over.data.current?.type === \"Card\";\n const isOverAColumn = over.data.current?.type === \"Column\";\n\n if (!isActiveACard) return;\n\n // Dropping a Card over another Card\n if (isActiveACard && isOverACard) {\n const activeIndex = localItems.findIndex((t) => t.id === activeId);\n const overIndex = localItems.findIndex((t) => t.id === overId);\n\n if (localItems[activeIndex].status !== localItems[overIndex].status) {\n const newItems = [...localItems];\n newItems[activeIndex] = {\n ...newItems[activeIndex],\n status: localItems[overIndex].status,\n };\n const reorderedItems = arrayMove(newItems, activeIndex, overIndex);\n setLocalItems(reorderedItems);\n } else {\n const reorderedItems = arrayMove(localItems, activeIndex, overIndex);\n setLocalItems(reorderedItems);\n }\n }\n\n // Dropping a Card over a Column\n if (isActiveACard && isOverAColumn) {\n const activeIndex = localItems.findIndex((t) => t.id === activeId);\n const newItems = [...localItems];\n newItems[activeIndex] = {\n ...newItems[activeIndex],\n status: overId as string,\n };\n setLocalItems(newItems);\n }\n }\n\n function handleDragEnd(event: DragEndEvent) {\n const { active, over } = event;\n const activeItemId = active.id as KanbanId;\n\n // Reset drag state\n setActiveDragId(null);\n setActiveDragType(null);\n\n if (!over) return;\n\n const currentItem = localItems.find((l) => l.id === activeItemId);\n if (currentItem) {\n onItemUpdate(activeItemId, currentItem.status);\n }\n }\n\n const itemsByStatus = React.useMemo(() => {\n const grouped: Record<string, T[]> = {};\n columns.forEach((col) => {\n grouped[col.id] = [];\n });\n localItems.forEach((item) => {\n if (grouped[item.status]) {\n grouped[item.status].push(item);\n } else if (columns.length > 0) {\n grouped[columns[0].id].push(item);\n }\n });\n return grouped;\n }, [localItems, columns]);\n\n const dropAnimation: DropAnimation = {\n sideEffects: defaultDropAnimationSideEffects({\n styles: {\n active: {\n opacity: \"0.5\",\n },\n },\n }),\n };\n\n return (\n <div\n data-slot=\"kanban\"\n className={cn(\n \"flex h-full w-full items-start overflow-x-auto overflow-y-hidden py-4\",\n className,\n )}\n >\n <DndContext\n sensors={sensors}\n onDragStart={handleDragStart}\n onDragOver={handleDragOver}\n onDragEnd={handleDragEnd}\n >\n <div className=\"flex gap-4 pb-4\">\n {columns.map((col) => (\n <KanbanColumn<T>\n key={col.id}\n column={col}\n items={itemsByStatus[col.id] || []}\n onCardClick={onItemClick}\n renderCard={renderCard}\n />\n ))}\n </div>\n\n {typeof document !== \"undefined\" &&\n createPortal(\n <DragOverlay dropAnimation={dropAnimation}>\n {activeItem && <KanbanCard<T> card={activeItem} renderCard={renderCard} />}\n </DragOverlay>,\n document.body,\n )}\n </DndContext>\n </div>\n );\n}\n\n// ============================================================================\n// Kanban Column\n// ============================================================================\n\ninterface KanbanColumnProps<T extends KanbanItem> {\n column: KanbanColumnDef;\n items: T[];\n onCardClick?: (item: T) => void;\n renderCard?: (item: T) => React.ReactNode;\n className?: string;\n}\n\nfunction KanbanColumn<T extends KanbanItem>({\n column,\n items,\n onCardClick,\n renderCard,\n className,\n}: KanbanColumnProps<T>) {\n const itemIds = React.useMemo(() => {\n return items.map((item) => item.id);\n }, [items]);\n\n const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({\n id: column.id,\n data: {\n type: \"Column\",\n column,\n },\n disabled: true, // Disable column reordering by default\n });\n\n const style = {\n transition,\n transform: CSS.Transform.toString(transform),\n };\n\n if (isDragging) {\n return (\n <div\n ref={setNodeRef}\n style={style}\n data-slot=\"kanban-column\"\n className=\"bg-muted/30 opacity-40 border-2 border-primary/30 w-[300px] min-w-[300px] h-[600px] max-h-[600px] rounded-md flex flex-col\"\n />\n );\n }\n\n return (\n <div\n ref={setNodeRef}\n style={style}\n data-slot=\"kanban-column\"\n className={cn(\n \"bg-muted/10 w-[300px] min-w-[300px] h-[600px] max-h-[600px] rounded-xl flex flex-col border\",\n className,\n )}\n >\n <KanbanColumnHeader {...attributes} {...listeners}>\n <KanbanColumnBadge>{items.length}</KanbanColumnBadge>\n {column.title}\n </KanbanColumnHeader>\n\n <KanbanColumnContent>\n <SortableContext items={itemIds}>\n {items.map((item) => (\n <KanbanCard<T>\n key={item.id}\n card={item}\n onCardClick={onCardClick}\n renderCard={renderCard}\n />\n ))}\n </SortableContext>\n </KanbanColumnContent>\n </div>\n );\n}\n\n// ============================================================================\n// Kanban Column Header\n// ============================================================================\n\nfunction KanbanColumnHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"kanban-column-header\"\n className={cn(\n \"bg-background/50 backdrop-blur-sm text-md h-[60px] rounded-t-xl p-4 font-semibold border-b border-border/50 flex items-center justify-between\",\n className,\n )}\n {...props}\n />\n );\n}\n\n// ============================================================================\n// Kanban Column Badge\n// ============================================================================\n\nfunction KanbanColumnBadge({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"kanban-column-badge\"\n className={cn(\n \"flex justify-center items-center bg-primary/10 text-primary px-2.5 py-0.5 text-xs font-medium rounded-full\",\n className,\n )}\n {...props}\n />\n );\n}\n\n// ============================================================================\n// Kanban Column Content\n// ============================================================================\n\nfunction KanbanColumnContent({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"kanban-column-content\"\n className={cn(\"flex grow flex-col gap-3 p-3 overflow-x-hidden overflow-y-auto\", className)}\n {...props}\n />\n );\n}\n\n// ============================================================================\n// Kanban Card\n// ============================================================================\n\ninterface KanbanCardProps<T extends KanbanItem> {\n card: T;\n onCardClick?: (item: T) => void;\n renderCard?: (item: T) => React.ReactNode;\n className?: string;\n}\n\nconst KanbanCardInner = <T extends KanbanItem>({\n card,\n onCardClick,\n renderCard,\n className,\n}: KanbanCardProps<T>) => {\n const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({\n id: card.id,\n data: {\n type: \"Card\",\n card,\n },\n });\n\n const style = {\n transition,\n transform: CSS.Transform.toString(transform),\n };\n\n if (isDragging) {\n return (\n <div\n ref={setNodeRef}\n style={style}\n data-slot=\"kanban-card\"\n className=\"opacity-30 bg-background p-3 rounded-xl border border-primary/50 cursor-grab relative h-[100px]\"\n />\n );\n }\n\n return (\n <div\n ref={setNodeRef}\n style={style}\n data-slot=\"kanban-card\"\n {...attributes}\n {...listeners}\n onClick={() => {\n if (!isDragging) {\n onCardClick?.(card);\n }\n }}\n className={cn(\n \"bg-background p-3 rounded-xl hover:ring-2 hover:ring-primary/20 hover:ring-inset cursor-grab relative border border-border/50 shadow-sm space-y-2 group transition-all\",\n className,\n )}\n >\n {renderCard ? (\n renderCard(card)\n ) : (\n <div className=\"space-y-1\">\n <KanbanCardTitle>{card.title || card.name || `Item ${card.id}`}</KanbanCardTitle>\n {card.description && <KanbanCardDescription>{card.description}</KanbanCardDescription>}\n </div>\n )}\n </div>\n );\n};\n\nconst KanbanCard = React.memo(KanbanCardInner) as typeof KanbanCardInner;\n\n// ============================================================================\n// Kanban Card Title\n// ============================================================================\n\nfunction KanbanCardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"kanban-card-title\"\n className={cn(\"font-medium text-sm line-clamp-1\", className)}\n {...props}\n />\n );\n}\n\n// ============================================================================\n// Kanban Card Description\n// ============================================================================\n\nfunction KanbanCardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n return (\n <div\n data-slot=\"kanban-card-description\"\n className={cn(\"text-xs text-muted-foreground line-clamp-2\", className)}\n {...props}\n />\n );\n}\n\n// ============================================================================\n// Exports\n// ============================================================================\n\nexport {\n KanbanRoot as Kanban,\n KanbanColumn,\n KanbanColumnHeader,\n KanbanColumnBadge,\n KanbanColumnContent,\n KanbanCard,\n KanbanCardTitle,\n KanbanCardDescription,\n};\n"],"names":[],"mappings":";AA4DA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA0C;AACxC;AACU;AACV;AACA;AACA;AAEF;AACE;AAKA;AACE;AACqB;AAIvB;AAAgB;AACW;AACD;AACV;AAAA;AAEb;AACyB;AACN;AACnB;AAUH;AACE;AACE;AAGA;AAAA;AACF;AAGF;AACE;AACA;AAEA;AAGA;AAEA;AAIA;AAGA;AACE;AAGA;AACE;AACA;AAAwB;AACC;AACO;AAEhC;AACA;AAA4B;AAE5B;AACA;AAA4B;AAC9B;AAIF;AACE;AAEA;AAAwB;AACC;AACf;AAEY;AACxB;AAAA;AAGF;AACE;AAOA;AAEA;AACA;AAC+C;AAIjD;AACE;AACA;AACE;AAAkB;AAGlB;AAGkC;AAG7B;AAG4B;AACU;AACnC;AACE;AACG;AAAA;AACX;AAEH;AAGH;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAGF;AAAC;AAAA;AACC;AACa;AACD;AACD;AAEX;AAEI;AAAC;AAAA;AAES;AACwB;AACnB;AACb;AAAA;AAJS;AAOf;AAGE;AAGE;AACS;AAAA;AACX;AAAA;AAAA;AACJ;AAGN;AAcA;AAA4C;AAC1C;AACA;AACA;AACA;AAEF;AACE;AAI6F;AAChF;AACL;AACE;AACN;AAAA;AAEQ;AAAA;AAGE;AACZ;AAC2C;AAG7C;AAEI;AAAC;AAAA;AACM;AACL;AACU;AACA;AAAA;AAMd;AAAC;AAAA;AACM;AACL;AACU;AACC;AACT;AACA;AAAA;AAGF;AACE;AAAiC;AACzB;AACV;AAKM;AAAC;AAAA;AAEO;AACN;AACA;AAAA;AAHU;AAOlB;AAAA;AAAA;AAGN;AAMA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAMA;AACE;AACE;AAAC;AAAA;AACW;AACC;AACT;AACA;AAAA;AAEE;AAAA;AAGV;AAMA;AACE;AACE;AAAC;AAAA;AACW;AAC+E;AACrF;AAAA;AAGV;AAaA;AAA+C;AAC7C;AACA;AACA;AAEF;AACE;AAA6F;AAClF;AACH;AACE;AACN;AAAA;AAIU;AACZ;AAC2C;AAG7C;AAEI;AAAC;AAAA;AACM;AACL;AACU;AACA;AAAA;AAMd;AAAC;AAAA;AACM;AACL;AACU;AACN;AACA;AAEF;AACoB;AAEtB;AACW;AACT;AACA;AAAA;AAOE;AAA+D;AACD;AAChE;AAAA;AAIR;AAQA;AACE;AACE;AAAC;AAAA;AACW;AACiD;AACvD;AAAA;AAGV;AAMA;AACE;AACE;AAAC;AAAA;AACW;AAC2D;AACjE;AAAA;AAGV;;;;;;;;;;;"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsxs as t, jsx as e } from "react/jsx-runtime";
2
3
  import * as p from "react";
3
4
  import { CustomButton as n } from "../primitives/custom-button.js";
@@ -1 +1 @@
1
- {"version":3,"file":"hero.js","sources":["../../../src/components/marketing/hero.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { CustomButton } from \"../primitives/custom-button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface HeroSectionProps extends React.HTMLAttributes<HTMLElement> {\n title: string;\n subtitle?: string;\n ctaText?: string;\n ctaHref?: string;\n secondaryCtaText?: string;\n secondaryCtaHref?: string;\n badge?: string;\n}\n\nconst HeroSection = React.forwardRef<HTMLElement, HeroSectionProps>(\n (\n {\n title,\n subtitle,\n ctaText,\n ctaHref = \"#\",\n secondaryCtaText,\n secondaryCtaHref = \"#\",\n badge,\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <section\n ref={ref}\n className={cn(\n \"relative flex flex-col items-center justify-center overflow-hidden px-6 py-24 text-center sm:py-32 lg:px-8\",\n className,\n )}\n {...props}\n >\n {/* Abstract Background Decoration */}\n <div\n className=\"absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80\"\n aria-hidden=\"true\"\n >\n <div\n className=\"relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75\"\n style={{\n clipPath:\n \"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)\",\n }}\n />\n </div>\n\n <div className=\"mx-auto max-w-2xl\">\n {badge && (\n <div className=\"mb-8 flex justify-center\">\n <div className=\"relative rounded-full px-3 py-1 text-sm leading-6 text-muted-foreground ring-1 ring-border hover:ring-border/80 transition-all\">\n {badge}{\" \"}\n <a href={ctaHref} className=\"font-semibold text-primary\">\n <span className=\"absolute inset-0\" aria-hidden=\"true\" />\n Read more <span aria-hidden=\"true\">&rarr;</span>\n </a>\n </div>\n </div>\n )}\n <h1 className=\"text-4xl font-bold tracking-tight text-foreground sm:text-6xl bg-clip-text\">\n {title}\n </h1>\n {subtitle && <p className=\"mt-6 text-lg leading-8 text-muted-foreground\">{subtitle}</p>}\n <div className=\"mt-10 flex items-center justify-center gap-x-6\">\n {ctaText && (\n <a href={ctaHref}>\n <CustomButton size=\"lg\" effect=\"expandIcon\">\n {ctaText}\n </CustomButton>\n </a>\n )}\n {secondaryCtaText && (\n <a href={secondaryCtaHref}>\n <CustomButton variant=\"ghost\" size=\"lg\">\n {secondaryCtaText} <span aria-hidden=\"true\">→</span>\n </CustomButton>\n </a>\n )}\n </div>\n </div>\n\n <div\n className=\"absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]\"\n aria-hidden=\"true\"\n >\n <div\n className=\"relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75\"\n style={{\n clipPath:\n \"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)\",\n }}\n />\n </div>\n </section>\n );\n },\n);\n\nHeroSection.displayName = \"HeroSection\";\n\nexport { HeroSection };\n"],"names":["jsxs","jsx","React","CustomButton","cn","HeroSection","title","subtitle","ctaText","ctaHref","secondaryCtaText","secondaryCtaHref","badge","className","props","ref"],"mappings":"AAgBA,SAAA,QAAAA,GAAA,OAAAC,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,gBAAAC,SAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,MAAMC,IAAcH,EAAM;AAAA,EACxB,CACE;AAAA,IACE,OAAAI;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,SAAAC,IAAU;AAAA,IACV,kBAAAC;AAAA,IACA,kBAAAC,IAAmB;AAAA,IACnB,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAELC,MAGE,gBAAAf;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAe;AAAA,MACA,WAAWX;AAAA,QACT;AAAA,QACAS;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAGJ,UAAA;AAAA,QAAA,gBAAAb;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ,UAAA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,UACE;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,QAGF,gBAAAD,EAAC,OAAA,EAAI,WAAU,qBACZ,UAAA;AAAA,UAAAY,uBACE,OAAA,EAAI,WAAU,4BACb,UAAA,gBAAAZ,EAAC,OAAA,EAAI,WAAU,kIACZ,UAAA;AAAA,YAAAY;AAAA,YAAO;AAAA,YACR,gBAAAZ,EAAC,KAAA,EAAE,MAAMS,GAAS,WAAU,8BAC1B,UAAA;AAAA,cAAA,gBAAAR,EAAC,QAAA,EAAK,WAAU,oBAAmB,eAAY,QAAO;AAAA,cAAE;AAAA,cAC9C,gBAAAA,EAAC,QAAA,EAAK,eAAY,QAAO,UAAA,IAAA,CAAM;AAAA,YAAA,EAAA,CAC3C;AAAA,UAAA,EAAA,CACF,EAAA,CACF;AAAA,UAEF,gBAAAA,EAAC,MAAA,EAAG,WAAU,8EACX,UAAAK,GACH;AAAA,UACCC,KAAY,gBAAAN,EAAC,KAAA,EAAE,WAAU,gDAAgD,UAAAM,GAAS;AAAA,UACnF,gBAAAP,EAAC,OAAA,EAAI,WAAU,kDACZ,UAAA;AAAA,YAAAQ,KACC,gBAAAP,EAAC,KAAA,EAAE,MAAMQ,GACP,UAAA,gBAAAR,EAACE,GAAA,EAAa,MAAK,MAAK,QAAO,cAC5B,UAAAK,EAAA,CACH,GACF;AAAA,YAEDE,KACC,gBAAAT,EAAC,KAAA,EAAE,MAAMU,GACP,4BAACR,GAAA,EAAa,SAAQ,SAAQ,MAAK,MAChC,UAAA;AAAA,cAAAO;AAAA,cAAiB;AAAA,cAAC,gBAAAT,EAAC,QAAA,EAAK,eAAY,QAAO,UAAA,IAAA,CAAC;AAAA,YAAA,EAAA,CAC/C,EAAA,CACF;AAAA,UAAA,EAAA,CAEJ;AAAA,QAAA,GACF;AAAA,QAEA,gBAAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEZ,UAAA,gBAAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,OAAO;AAAA,kBACL,UACE;AAAA,gBAAA;AAAA,cACJ;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;AAEAI,EAAY,cAAc;"}
1
+ {"version":3,"file":"hero.js","sources":["../../../src/components/marketing/hero.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { CustomButton } from \"../primitives/custom-button\";\nimport { cn } from \"@/lib/utils\";\n\ninterface HeroSectionProps extends React.HTMLAttributes<HTMLElement> {\n title: string;\n subtitle?: string;\n ctaText?: string;\n ctaHref?: string;\n secondaryCtaText?: string;\n secondaryCtaHref?: string;\n badge?: string;\n}\n\nconst HeroSection = React.forwardRef<HTMLElement, HeroSectionProps>(\n (\n {\n title,\n subtitle,\n ctaText,\n ctaHref = \"#\",\n secondaryCtaText,\n secondaryCtaHref = \"#\",\n badge,\n className,\n ...props\n },\n ref,\n ) => {\n return (\n <section\n ref={ref}\n className={cn(\n \"relative flex flex-col items-center justify-center overflow-hidden px-6 py-24 text-center sm:py-32 lg:px-8\",\n className,\n )}\n {...props}\n >\n {/* Abstract Background Decoration */}\n <div\n className=\"absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80\"\n aria-hidden=\"true\"\n >\n <div\n className=\"relative left-[calc(50%-11rem)] aspect-1155/678 w-144.5 -translate-x-1/2 rotate-30 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%-30rem)] sm:w-288.75\"\n style={{\n clipPath:\n \"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)\",\n }}\n />\n </div>\n\n <div className=\"mx-auto max-w-2xl\">\n {badge && (\n <div className=\"mb-8 flex justify-center\">\n <div className=\"relative rounded-full px-3 py-1 text-sm leading-6 text-muted-foreground ring-1 ring-border hover:ring-border/80 transition-all\">\n {badge}{\" \"}\n <a href={ctaHref} className=\"font-semibold text-primary\">\n <span className=\"absolute inset-0\" aria-hidden=\"true\" />\n Read more <span aria-hidden=\"true\">&rarr;</span>\n </a>\n </div>\n </div>\n )}\n <h1 className=\"text-4xl font-bold tracking-tight text-foreground sm:text-6xl bg-clip-text\">\n {title}\n </h1>\n {subtitle && <p className=\"mt-6 text-lg leading-8 text-muted-foreground\">{subtitle}</p>}\n <div className=\"mt-10 flex items-center justify-center gap-x-6\">\n {ctaText && (\n <a href={ctaHref}>\n <CustomButton size=\"lg\" effect=\"expandIcon\">\n {ctaText}\n </CustomButton>\n </a>\n )}\n {secondaryCtaText && (\n <a href={secondaryCtaHref}>\n <CustomButton variant=\"ghost\" size=\"lg\">\n {secondaryCtaText} <span aria-hidden=\"true\">→</span>\n </CustomButton>\n </a>\n )}\n </div>\n </div>\n\n <div\n className=\"absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]\"\n aria-hidden=\"true\"\n >\n <div\n className=\"relative left-[calc(50%+3rem)] aspect-1155/678 w-144.5 -translate-x-1/2 bg-linear-to-tr from-[#ff80b5] to-[#9089fc] opacity-20 sm:left-[calc(50%+36rem)] sm:w-288.75\"\n style={{\n clipPath:\n \"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)\",\n }}\n />\n </div>\n </section>\n );\n },\n);\n\nHeroSection.displayName = \"HeroSection\";\n\nexport { HeroSection };\n"],"names":["HeroSection"],"mappings":";AAgBA;AAAA;AAAA;AAAA;AAAA;AAA0B;AAEtB;AACE;AACA;AACA;AACU;AACV;AACmB;AACnB;AACA;AACG;AAKH;AAAC;AAAA;AACC;AACW;AACT;AACA;AAAA;AAEE;AAGJ;AAAA;AAAC;AAAA;AACW;AACE;AAEZ;AAAC;AAAA;AACW;AACH;AAEH;AAAA;AACJ;AAAA;AACF;AAAA;AAIC;AAGM;AAAA;AAAO;AAEN;AAAsD;AAAE;AACf;AAC3C;AAEJ;AAIF;AACmF;AAEhF;AAKC;AAKK;AAAA;AAAiB;AAA2B;AAEjD;AAEJ;AACF;AAEA;AAAC;AAAA;AACW;AACE;AAEZ;AAAC;AAAA;AACW;AACH;AAEH;AAAA;AACJ;AAAA;AACF;AAAA;AACF;AAAA;AAIR;AAEAA;;;;"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx as e, jsxs as m } from "react/jsx-runtime";
2
3
  import * as i from "react";
3
4
  import { cn as c } from "../../lib/utils.js";
@@ -1 +1 @@
1
- {"version":3,"file":"social-proof.js","sources":["../../../src/components/marketing/social-proof.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SocialProofProps extends React.HTMLAttributes<HTMLElement> {\n logos: { name: string; src: string }[];\n title?: string;\n}\n\nconst SocialProof = React.forwardRef<HTMLElement, SocialProofProps>(\n ({ logos, title = \"Trusted by the world's most innovative teams\", className, ...props }, ref) => {\n return (\n <section ref={ref} className={cn(\"py-24 sm:py-32 bg-secondary/30\", className)} {...props}>\n <div className=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <h2 className=\"text-center text-lg font-semibold leading-8 text-muted-foreground\">\n {title}\n </h2>\n <div className=\"mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5\">\n {logos.map((logo) => (\n <div\n key={logo.name}\n className=\"flex items-center justify-center grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-300\"\n >\n <span className=\"text-xl font-bold italic text-muted-foreground\">{logo.name}</span>\n </div>\n ))}\n </div>\n </div>\n </section>\n );\n },\n);\n\nSocialProof.displayName = \"SocialProof\";\n\nexport { SocialProof };\n"],"names":["jsx","jsxs","React","cn","SocialProof","logos","title","className","props","ref","logo"],"mappings":"AAUA,SAAA,OAAAA,GAAA,QAAAC,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,MAAMC,IAAcF,EAAM;AAAA,EACxB,CAAC,EAAE,OAAAG,GAAO,OAAAC,IAAQ,gDAAgD,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAErF,gBAAAT,EAAC,WAAA,EAAQ,KAAAS,GAAU,WAAWN,EAAG,kCAAkCI,CAAS,GAAI,GAAGC,GACjF,UAAA,gBAAAP,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,IAAA,gBAAAD,EAAC,MAAA,EAAG,WAAU,qEACX,UAAAM,GACH;AAAA,sBACC,OAAA,EAAI,WAAU,qJACZ,UAAAD,EAAM,IAAI,CAACK,MACV,gBAAAV;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA,gBAAAA,EAAC,QAAA,EAAK,WAAU,kDAAkD,YAAK,KAAA,CAAK;AAAA,MAAA;AAAA,MAHvEU,EAAK;AAAA,IAAA,CAKb,EAAA,CACH;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAGN;AAEAN,EAAY,cAAc;"}
1
+ {"version":3,"file":"social-proof.js","sources":["../../../src/components/marketing/social-proof.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface SocialProofProps extends React.HTMLAttributes<HTMLElement> {\n logos: { name: string; src: string }[];\n title?: string;\n}\n\nconst SocialProof = React.forwardRef<HTMLElement, SocialProofProps>(\n ({ logos, title = \"Trusted by the world's most innovative teams\", className, ...props }, ref) => {\n return (\n <section ref={ref} className={cn(\"py-24 sm:py-32 bg-secondary/30\", className)} {...props}>\n <div className=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <h2 className=\"text-center text-lg font-semibold leading-8 text-muted-foreground\">\n {title}\n </h2>\n <div className=\"mx-auto mt-10 grid max-w-lg grid-cols-4 items-center gap-x-8 gap-y-10 sm:max-w-xl sm:grid-cols-6 sm:gap-x-10 lg:mx-0 lg:max-w-none lg:grid-cols-5\">\n {logos.map((logo) => (\n <div\n key={logo.name}\n className=\"flex items-center justify-center grayscale opacity-50 hover:grayscale-0 hover:opacity-100 transition-all duration-300\"\n >\n <span className=\"text-xl font-bold italic text-muted-foreground\">{logo.name}</span>\n </div>\n ))}\n </div>\n </div>\n </section>\n );\n },\n);\n\nSocialProof.displayName = \"SocialProof\";\n\nexport { SocialProof };\n"],"names":["SocialProof"],"mappings":";AAUA;AAAA;AAAA;AAAA;AAA0B;AAKhB;AAEA;AAGI;AAAC;AAAA;AAEW;AAEkE;AAAA;AAHlE;AAMhB;AAKV;AAEAA;;;;"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx as e, jsxs as l } from "react/jsx-runtime";
2
3
  import * as x from "react";
3
4
  import { cn as c } from "../../lib/utils.js";
@@ -1 +1 @@
1
- {"version":3,"file":"value-props.js","sources":["../../../src/components/marketing/value-props.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\ninterface Feature {\n name: string;\n description: string;\n icon?: React.ElementType;\n}\n\ninterface ValuePropsProps extends React.HTMLAttributes<HTMLElement> {\n features: Feature[];\n title: string;\n subtitle?: string;\n badge?: string;\n}\n\nconst ValueProps = React.forwardRef<HTMLElement, ValuePropsProps>(\n ({ features, title, subtitle, badge, className, ...props }, ref) => {\n return (\n <section ref={ref} className={cn(\"py-24 sm:py-32\", className)} {...props}>\n <div className=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div className=\"mx-auto max-w-2xl lg:text-center\">\n {badge && <h2 className=\"text-base font-semibold leading-7 text-primary\">{badge}</h2>}\n <p className=\"mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl\">\n {title}\n </p>\n {subtitle && <p className=\"mt-6 text-lg leading-8 text-muted-foreground\">{subtitle}</p>}\n </div>\n <div className=\"mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none\">\n <dl className=\"grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3\">\n {features.map((feature) => (\n <div key={feature.name} className=\"flex flex-col\">\n <dt className=\"flex items-center gap-x-3 text-base font-semibold leading-7 text-foreground\">\n {feature.icon ? (\n <feature.icon className=\"size-5 flex-none text-primary\" aria-hidden=\"true\" />\n ) : (\n <CheckIcon className=\"size-5 flex-none text-primary\" aria-hidden=\"true\" />\n )}\n {feature.name}\n </dt>\n <dd className=\"mt-4 flex flex-auto flex-col text-base leading-7 text-muted-foreground\">\n <p className=\"flex-auto\">{feature.description}</p>\n </dd>\n </div>\n ))}\n </dl>\n </div>\n </div>\n </section>\n );\n },\n);\n\nValueProps.displayName = \"ValueProps\";\n\nexport { ValueProps };\n"],"names":["jsx","jsxs","React","cn","CheckIcon","ValueProps","features","title","subtitle","badge","className","props","ref","feature"],"mappings":"AAmBA,SAAA,OAAAA,GAAA,QAAAC,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,SAAA,aAAAC,SAAA;AAAA,MAAMC,IAAaH,EAAM;AAAA,EACvB,CAAC,EAAE,UAAAI,GAAU,OAAAC,GAAO,UAAAC,GAAU,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAExD,gBAAAZ,EAAC,WAAA,EAAQ,KAAAY,GAAU,WAAWT,EAAG,kBAAkBO,CAAS,GAAI,GAAGC,GACjE,UAAA,gBAAAV,EAAC,OAAA,EAAI,WAAU,kCACb,UAAA;AAAA,IAAA,gBAAAA,EAAC,OAAA,EAAI,WAAU,oCACZ,UAAA;AAAA,MAAAQ,KAAS,gBAAAT,EAAC,MAAA,EAAG,WAAU,kDAAkD,UAAAS,GAAM;AAAA,MAChF,gBAAAT,EAAC,KAAA,EAAE,WAAU,sEACV,UAAAO,GACH;AAAA,MACCC,KAAY,gBAAAR,EAAC,KAAA,EAAE,WAAU,gDAAgD,UAAAQ,EAAA,CAAS;AAAA,IAAA,GACrF;AAAA,IACA,gBAAAR,EAAC,OAAA,EAAI,WAAU,2DACb,4BAAC,MAAA,EAAG,WAAU,2EACX,UAAAM,EAAS,IAAI,CAACO,MACb,gBAAAZ,EAAC,OAAA,EAAuB,WAAU,iBAChC,UAAA;AAAA,MAAA,gBAAAA,EAAC,MAAA,EAAG,WAAU,+EACX,UAAA;AAAA,QAAAY,EAAQ,OACP,gBAAAb,EAACa,EAAQ,MAAR,EAAa,WAAU,iCAAgC,eAAY,OAAA,CAAO,IAE3E,gBAAAb,EAACI,GAAA,EAAU,WAAU,iCAAgC,eAAY,QAAO;AAAA,QAEzES,EAAQ;AAAA,MAAA,GACX;AAAA,MACA,gBAAAb,EAAC,MAAA,EAAG,WAAU,0EACZ,UAAA,gBAAAA,EAAC,OAAE,WAAU,aAAa,UAAAa,EAAQ,YAAA,CAAY,EAAA,CAChD;AAAA,IAAA,EAAA,GAXQA,EAAQ,IAYlB,CACD,EAAA,CACH,EAAA,CACF;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAGN;AAEAR,EAAW,cAAc;"}
1
+ {"version":3,"file":"value-props.js","sources":["../../../src/components/marketing/value-props.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { CheckIcon } from \"lucide-react\";\n\ninterface Feature {\n name: string;\n description: string;\n icon?: React.ElementType;\n}\n\ninterface ValuePropsProps extends React.HTMLAttributes<HTMLElement> {\n features: Feature[];\n title: string;\n subtitle?: string;\n badge?: string;\n}\n\nconst ValueProps = React.forwardRef<HTMLElement, ValuePropsProps>(\n ({ features, title, subtitle, badge, className, ...props }, ref) => {\n return (\n <section ref={ref} className={cn(\"py-24 sm:py-32\", className)} {...props}>\n <div className=\"mx-auto max-w-7xl px-6 lg:px-8\">\n <div className=\"mx-auto max-w-2xl lg:text-center\">\n {badge && <h2 className=\"text-base font-semibold leading-7 text-primary\">{badge}</h2>}\n <p className=\"mt-2 text-3xl font-bold tracking-tight text-foreground sm:text-4xl\">\n {title}\n </p>\n {subtitle && <p className=\"mt-6 text-lg leading-8 text-muted-foreground\">{subtitle}</p>}\n </div>\n <div className=\"mx-auto mt-16 max-w-2xl sm:mt-20 lg:mt-24 lg:max-w-none\">\n <dl className=\"grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3\">\n {features.map((feature) => (\n <div key={feature.name} className=\"flex flex-col\">\n <dt className=\"flex items-center gap-x-3 text-base font-semibold leading-7 text-foreground\">\n {feature.icon ? (\n <feature.icon className=\"size-5 flex-none text-primary\" aria-hidden=\"true\" />\n ) : (\n <CheckIcon className=\"size-5 flex-none text-primary\" aria-hidden=\"true\" />\n )}\n {feature.name}\n </dt>\n <dd className=\"mt-4 flex flex-auto flex-col text-base leading-7 text-muted-foreground\">\n <p className=\"flex-auto\">{feature.description}</p>\n </dd>\n </div>\n ))}\n </dl>\n </div>\n </div>\n </section>\n );\n },\n);\n\nValueProps.displayName = \"ValueProps\";\n\nexport { ValueProps };\n"],"names":["ValueProps"],"mappings":";AAmBA;AAAA;AAAA;AAAA;AAAA;AAAyB;AAKf;AACG;AAA+E;AAGhF;AACmF;AACrF;AAKQ;AACG;AAGyE;AAEjE;AACX;AAGA;AAIR;AAKV;AAEAA;;;;"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx as o } from "react/jsx-runtime";
2
3
  import * as i from "@radix-ui/react-aspect-ratio";
3
4
  function a({ ...t }) {
@@ -1 +1 @@
1
- {"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/primitives/aspect-ratio.tsx"],"sourcesContent":["\"use client\";\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\";\n\nfunction AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n return <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props} />;\n}\n\nexport { AspectRatio };\n"],"names":["jsx","AspectRatioPrimitive","AspectRatio","props"],"mappings":"AAIA,SAAA,OAAAA,SAAA;AAAA,YAAAC,OAAA;AAAA,SAASC,EAAY,EAAE,GAAGC,KAAiE;AACzF,2BAAQF,EAAqB,MAArB,EAA0B,aAAU,gBAAgB,GAAGE,GAAO;AACxE;"}
1
+ {"version":3,"file":"aspect-ratio.js","sources":["../../../src/components/primitives/aspect-ratio.tsx"],"sourcesContent":["\"use client\";\n\nimport * as AspectRatioPrimitive from \"@radix-ui/react-aspect-ratio\";\n\nfunction AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {\n return <AspectRatioPrimitive.Root data-slot=\"aspect-ratio\" {...props} />;\n}\n\nexport { AspectRatio };\n"],"names":[],"mappings":";AAIA;AAAA;AAAA;AACE;AACF;;;;"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx as e } from "react/jsx-runtime";
2
3
  import * as s from "react";
3
4
  import { Slot as p } from "@radix-ui/react-slot";
@@ -1 +1 @@
1
- {"version":3,"file":"badge.js","sources":["../../../src/components/primitives/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { badgeVariants } from \"./badge-variants\";\n\ninterface BadgeProps extends React.ComponentProps<\"span\">, VariantProps<typeof badgeVariants> {\n asChild?: boolean;\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"span\";\n\n return (\n <Comp\n ref={ref}\n data-slot=\"badge\"\n className={cn(badgeVariants({ variant, className }))}\n {...props}\n />\n );\n },\n);\n\nBadge.displayName = \"Badge\";\n\nexport { Badge };\nexport type { BadgeProps };\n"],"names":["jsx","React","Slot","cn","badgeVariants","Badge","className","variant","asChild","props","ref"],"mappings":"AAYA,SAAA,OAAAA,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,SAAA,iBAAAC,SAAA;AAAA,MAAMC,IAAQJ,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAK,GAAW,SAAAC,GAAS,SAAAC,IAAU,IAAO,GAAGC,EAAA,GAASC,MAIhD,gBAAAV;AAAA,IAHWQ,IAAUN,IAAO;AAAA,IAG3B;AAAA,MACC,KAAAQ;AAAA,MACA,aAAU;AAAA,MACV,WAAWP,EAAGC,EAAc,EAAE,SAAAG,GAAS,WAAAD,EAAA,CAAW,CAAC;AAAA,MAClD,GAAGG;AAAA,IAAA;AAAA,EAAA;AAIZ;AAEAJ,EAAM,cAAc;"}
1
+ {"version":3,"file":"badge.js","sources":["../../../src/components/primitives/badge.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { badgeVariants } from \"./badge-variants\";\n\ninterface BadgeProps extends React.ComponentProps<\"span\">, VariantProps<typeof badgeVariants> {\n asChild?: boolean;\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n ({ className, variant, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"span\";\n\n return (\n <Comp\n ref={ref}\n data-slot=\"badge\"\n className={cn(badgeVariants({ variant, className }))}\n {...props}\n />\n );\n },\n);\n\nBadge.displayName = \"Badge\";\n\nexport { Badge };\nexport type { BadgeProps };\n"],"names":["Badge"],"mappings":";AAYA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAoB;AAKd;AAH4B;AAG3B;AACC;AACU;AACyC;AAC/C;AAAA;AAIZ;AAEAA;;;;"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx as e } from "react/jsx-runtime";
2
3
  import * as s from "react";
3
4
  import { Slot as p } from "@radix-ui/react-slot";
@@ -1 +1 @@
1
- {"version":3,"file":"button-group.js","sources":["../../../src/components/primitives/button-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"../primitives/separator\";\nimport { buttonGroupVariants } from \"./button-group-variants\";\n\ninterface ButtonGroupProps\n extends React.ComponentProps<\"div\">,\n VariantProps<typeof buttonGroupVariants> {}\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n ({ className, orientation, ...props }, ref) => {\n return (\n <div\n ref={ref}\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation || \"horizontal\"}\n className={cn(buttonGroupVariants({ orientation }), className)}\n {...props}\n />\n );\n },\n);\n\ninterface ButtonGroupTextProps extends React.ComponentProps<\"div\"> {\n asChild?: boolean;\n}\n\nconst ButtonGroupText = React.forwardRef<HTMLDivElement, ButtonGroupTextProps>(\n ({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"div\";\n\n return (\n <Comp\n ref={ref}\n className={cn(\n \"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n );\n },\n);\n\nconst ButtonGroupSeparator = React.forwardRef<\n React.ElementRef<typeof Separator>,\n React.ComponentPropsWithoutRef<typeof Separator>\n>(({ className, orientation = \"vertical\", ...props }, ref) => {\n return (\n <Separator\n ref={ref}\n data-slot=\"button-group-separator\"\n orientation={orientation}\n className={cn(\n \"bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto\",\n className,\n )}\n {...props}\n />\n );\n});\n\nButtonGroup.displayName = \"ButtonGroup\";\nButtonGroupText.displayName = \"ButtonGroupText\";\nButtonGroupSeparator.displayName = \"ButtonGroupSeparator\";\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };\nexport type { ButtonGroupProps, ButtonGroupTextProps };\n"],"names":["jsx","React","Slot","cn","Separator","buttonGroupVariants","ButtonGroup","className","orientation","props","ref","ButtonGroupText","asChild","ButtonGroupSeparator"],"mappings":"AAaA,SAAA,OAAAA,SAAA;AAAA,YAAAC,OAAA;AAAA,SAAA,QAAAC,SAAA;AAAA,SAAA,MAAAC,SAAA;AAAA,SAAA,aAAAC,SAAA;AAAA,SAAA,uBAAAC,SAAA;AAAA,MAAMC,IAAcL,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAM,GAAW,aAAAC,GAAa,GAAGC,EAAA,GAASC,MAEnC,gBAAAV;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAU;AAAA,MACA,MAAK;AAAA,MACL,aAAU;AAAA,MACV,oBAAkBF,KAAe;AAAA,MACjC,WAAWL,EAAGE,EAAoB,EAAE,aAAAG,EAAA,CAAa,GAAGD,CAAS;AAAA,MAC5D,GAAGE;AAAA,IAAA;AAAA,EAAA;AAIZ,GAMME,IAAkBV,EAAM;AAAA,EAC5B,CAAC,EAAE,WAAAM,GAAW,SAAAK,IAAU,IAAO,GAAGH,EAAA,GAASC,MAIvC,gBAAAV;AAAA,IAHWY,IAAUV,IAAO;AAAA,IAG3B;AAAA,MACC,KAAAQ;AAAA,MACA,WAAWP;AAAA,QACT;AAAA,QACAI;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAIZ,GAEMI,IAAuBZ,EAAM,WAGjC,CAAC,EAAE,WAAAM,GAAW,aAAAC,IAAc,YAAY,GAAGC,EAAA,GAASC,MAElD,gBAAAV;AAAA,EAACI;AAAA,EAAA;AAAA,IACC,KAAAM;AAAA,IACA,aAAU;AAAA,IACV,aAAAF;AAAA,IACA,WAAWL;AAAA,MACT;AAAA,MACAI;AAAA,IAAA;AAAA,IAED,GAAGE;AAAA,EAAA;AAAA,CAGT;AAEDH,EAAY,cAAc;AAC1BK,EAAgB,cAAc;AAC9BE,EAAqB,cAAc;"}
1
+ {"version":3,"file":"button-group.js","sources":["../../../src/components/primitives/button-group.tsx"],"sourcesContent":["\"use client\";\n\nimport * as React from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { type VariantProps } from \"class-variance-authority\";\nimport { cn } from \"@/lib/utils\";\nimport { Separator } from \"../primitives/separator\";\nimport { buttonGroupVariants } from \"./button-group-variants\";\n\ninterface ButtonGroupProps\n extends React.ComponentProps<\"div\">,\n VariantProps<typeof buttonGroupVariants> {}\n\nconst ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(\n ({ className, orientation, ...props }, ref) => {\n return (\n <div\n ref={ref}\n role=\"group\"\n data-slot=\"button-group\"\n data-orientation={orientation || \"horizontal\"}\n className={cn(buttonGroupVariants({ orientation }), className)}\n {...props}\n />\n );\n },\n);\n\ninterface ButtonGroupTextProps extends React.ComponentProps<\"div\"> {\n asChild?: boolean;\n}\n\nconst ButtonGroupText = React.forwardRef<HTMLDivElement, ButtonGroupTextProps>(\n ({ className, asChild = false, ...props }, ref) => {\n const Comp = asChild ? Slot : \"div\";\n\n return (\n <Comp\n ref={ref}\n className={cn(\n \"bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n className,\n )}\n {...props}\n />\n );\n },\n);\n\nconst ButtonGroupSeparator = React.forwardRef<\n React.ElementRef<typeof Separator>,\n React.ComponentPropsWithoutRef<typeof Separator>\n>(({ className, orientation = \"vertical\", ...props }, ref) => {\n return (\n <Separator\n ref={ref}\n data-slot=\"button-group-separator\"\n orientation={orientation}\n className={cn(\n \"bg-input relative m-0! self-stretch data-[orientation=vertical]:h-auto\",\n className,\n )}\n {...props}\n />\n );\n});\n\nButtonGroup.displayName = \"ButtonGroup\";\nButtonGroupText.displayName = \"ButtonGroupText\";\nButtonGroupSeparator.displayName = \"ButtonGroupSeparator\";\n\nexport { ButtonGroup, ButtonGroupSeparator, ButtonGroupText };\nexport type { ButtonGroupProps, ButtonGroupTextProps };\n"],"names":["ButtonGroup","ButtonGroupText","ButtonGroupSeparator"],"mappings":";AAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAA0B;AAGpB;AAAC;AAAA;AACC;AACK;AACK;AACuB;AAC4B;AACzD;AAAA;AAIZ;AAM8B;AAKxB;AAH4B;AAG3B;AACC;AACW;AACT;AACA;AAAA;AAEE;AAAA;AAIZ;AAOI;AAAC;AAAA;AACC;AACU;AACV;AACW;AACT;AACA;AAAA;AAEE;AAAA;AAKVA;AACAC;AACAC;;;;;;"}
@@ -1,3 +1,4 @@
1
+ "use client";
1
2
  import { jsx as s } from "react/jsx-runtime";
2
3
  import * as p from "react";
3
4
  import { Slot as f } from "@radix-ui/react-slot";