gridsmith-ui 0.3.5 → 0.6.0
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.
- package/README.md +63 -3
- package/dist/charts.d.ts +246 -0
- package/dist/charts.js +1028 -0
- package/dist/charts.js.map +1 -0
- package/dist/chunk-4SDKQDYV.js +93 -0
- package/dist/chunk-4SDKQDYV.js.map +1 -0
- package/dist/chunk-CHNY75QI.js +278 -0
- package/dist/chunk-CHNY75QI.js.map +1 -0
- package/dist/chunk-DPF6776I.js +36 -0
- package/dist/chunk-DPF6776I.js.map +1 -0
- package/dist/{chunk-5XIPPVH7.js → chunk-IUBWNDUK.js} +15 -4
- package/dist/chunk-IUBWNDUK.js.map +1 -0
- package/dist/chunk-OUYJXVLQ.js +41 -0
- package/dist/chunk-OUYJXVLQ.js.map +1 -0
- package/dist/chunk-XUBVMRIE.js +149 -0
- package/dist/chunk-XUBVMRIE.js.map +1 -0
- package/dist/data-grid.d.ts +27 -0
- package/dist/data-grid.js +293 -0
- package/dist/data-grid.js.map +1 -0
- package/dist/editor.d.ts +18 -0
- package/dist/editor.js +632 -0
- package/dist/editor.js.map +1 -0
- package/dist/feather-V32UNIQL.js +71 -0
- package/dist/feather-V32UNIQL.js.map +1 -0
- package/dist/heroicons-CA5OQ76O.js +71 -0
- package/dist/heroicons-CA5OQ76O.js.map +1 -0
- package/dist/icons.d.ts +9 -1
- package/dist/icons.js +1 -2
- package/dist/index.d.ts +430 -133
- package/dist/index.js +10510 -98031
- package/dist/index.js.map +1 -1
- package/dist/kanban.d.ts +25 -0
- package/dist/kanban.js +224 -0
- package/dist/kanban.js.map +1 -0
- package/dist/lucide-AILUUOAJ.js +71 -0
- package/dist/lucide-AILUUOAJ.js.map +1 -0
- package/dist/phosphor-A4JOBGMT.js +71 -0
- package/dist/phosphor-A4JOBGMT.js.map +1 -0
- package/dist/resizable.d.ts +39 -0
- package/dist/resizable.js +89 -0
- package/dist/resizable.js.map +1 -0
- package/dist/roots.css +46 -11
- package/dist/tabler-TVOR6AFM.js +71 -0
- package/dist/tabler-TVOR6AFM.js.map +1 -0
- package/dist/use-breakpoint-Cn51IubK.d.ts +30 -0
- package/dist/utils.js +1 -2
- package/dist/virtualized.d.ts +16 -0
- package/dist/virtualized.js +55 -0
- package/dist/virtualized.js.map +1 -0
- package/package.json +144 -4
- package/dist/chunk-5WRI5ZAA.js +0 -29
- package/dist/chunk-5WRI5ZAA.js.map +0 -1
- package/dist/chunk-5XIPPVH7.js.map +0 -1
- package/dist/chunk-WVB3SRXW.js +0 -82
- package/dist/chunk-WVB3SRXW.js.map +0 -1
- package/dist/feather-N37QZ7LA.js +0 -72
- package/dist/feather-N37QZ7LA.js.map +0 -1
- package/dist/heroicons-HJTKMLIJ.js +0 -72
- package/dist/heroicons-HJTKMLIJ.js.map +0 -1
- package/dist/lucide-6TGT4G26.js +0 -67
- package/dist/lucide-6TGT4G26.js.map +0 -1
- package/dist/phosphor-BWDP4PU7.js +0 -72
- package/dist/phosphor-BWDP4PU7.js.map +0 -1
- package/dist/tabler-6TPNTLFV.js +0 -72
- package/dist/tabler-6TPNTLFV.js.map +0 -1
package/dist/kanban.d.ts
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
interface KanbanCard {
|
|
5
|
+
id: string;
|
|
6
|
+
title: string;
|
|
7
|
+
description?: string;
|
|
8
|
+
tags?: string[];
|
|
9
|
+
avatar?: string;
|
|
10
|
+
}
|
|
11
|
+
interface KanbanColumn {
|
|
12
|
+
id: string;
|
|
13
|
+
title: string;
|
|
14
|
+
cards: KanbanCard[];
|
|
15
|
+
color?: string;
|
|
16
|
+
}
|
|
17
|
+
interface KanbanBoardProps {
|
|
18
|
+
columns: KanbanColumn[];
|
|
19
|
+
onColumnsChange?: (columns: KanbanColumn[]) => void;
|
|
20
|
+
renderCard?: (card: KanbanCard) => ReactNode;
|
|
21
|
+
className?: string;
|
|
22
|
+
}
|
|
23
|
+
declare function KanbanBoard({ columns: controlledCols, onColumnsChange, renderCard, className, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
|
|
24
|
+
|
|
25
|
+
export { KanbanBoard };
|
package/dist/kanban.js
ADDED
|
@@ -0,0 +1,224 @@
|
|
|
1
|
+
import { Badge } from './chunk-4SDKQDYV.js';
|
|
2
|
+
import { useTextOverflow, Tooltip } from './chunk-CHNY75QI.js';
|
|
3
|
+
import { Icon } from './chunk-XUBVMRIE.js';
|
|
4
|
+
import { cn } from './chunk-IUBWNDUK.js';
|
|
5
|
+
import { useState } from 'react';
|
|
6
|
+
import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCorners, DragOverlay } from '@dnd-kit/core';
|
|
7
|
+
import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
|
|
8
|
+
import { CSS } from '@dnd-kit/utilities';
|
|
9
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
10
|
+
|
|
11
|
+
function SortableCard({
|
|
12
|
+
card,
|
|
13
|
+
renderCard
|
|
14
|
+
}) {
|
|
15
|
+
const {
|
|
16
|
+
attributes,
|
|
17
|
+
listeners,
|
|
18
|
+
setNodeRef,
|
|
19
|
+
transform,
|
|
20
|
+
transition,
|
|
21
|
+
isDragging
|
|
22
|
+
} = useSortable({ id: card.id });
|
|
23
|
+
const style = {
|
|
24
|
+
transform: CSS.Transform.toString(transform),
|
|
25
|
+
transition
|
|
26
|
+
};
|
|
27
|
+
return /* @__PURE__ */ jsx(
|
|
28
|
+
"div",
|
|
29
|
+
{
|
|
30
|
+
ref: setNodeRef,
|
|
31
|
+
style,
|
|
32
|
+
...attributes,
|
|
33
|
+
...listeners,
|
|
34
|
+
className: cn(
|
|
35
|
+
"rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
|
|
36
|
+
"bg-[var(--ds-bg-surface)] p-ds-3 cursor-grab active:cursor-grabbing",
|
|
37
|
+
"shadow-[var(--ds-shadow-button)]",
|
|
38
|
+
"transition-shadow duration-[var(--ds-transition-speed)]",
|
|
39
|
+
"focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]",
|
|
40
|
+
isDragging && "opacity-30 scale-[1.02]"
|
|
41
|
+
),
|
|
42
|
+
children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card })
|
|
43
|
+
}
|
|
44
|
+
);
|
|
45
|
+
}
|
|
46
|
+
function ClampedDescription({ children }) {
|
|
47
|
+
const { ref, isTruncated } = useTextOverflow({ lines: 2 });
|
|
48
|
+
const el = /* @__PURE__ */ jsx("p", { ref, className: "text-xs text-[var(--ds-text-secondary)] line-clamp-2", children });
|
|
49
|
+
if (!isTruncated) return el;
|
|
50
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
|
|
51
|
+
}
|
|
52
|
+
function TruncTitle({ children }) {
|
|
53
|
+
const { ref, isTruncated } = useTextOverflow({ lines: 1 });
|
|
54
|
+
const el = /* @__PURE__ */ jsx("p", { ref, className: "text-sm font-medium text-[var(--ds-text-primary)] truncate", children });
|
|
55
|
+
if (!isTruncated) return el;
|
|
56
|
+
return /* @__PURE__ */ jsx(Tooltip, { content: children, children: el });
|
|
57
|
+
}
|
|
58
|
+
function DefaultCard({ card }) {
|
|
59
|
+
return /* @__PURE__ */ jsxs("div", { className: "space-y-ds-2", children: [
|
|
60
|
+
/* @__PURE__ */ jsx(TruncTitle, { children: card.title }),
|
|
61
|
+
card.description && /* @__PURE__ */ jsx(ClampedDescription, { children: card.description }),
|
|
62
|
+
card.tags && card.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-ds-1", children: card.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "subtle", size: "sm", children: tag }, tag)) })
|
|
63
|
+
] });
|
|
64
|
+
}
|
|
65
|
+
function OverlayCard({
|
|
66
|
+
card,
|
|
67
|
+
renderCard
|
|
68
|
+
}) {
|
|
69
|
+
return /* @__PURE__ */ jsx(
|
|
70
|
+
"div",
|
|
71
|
+
{
|
|
72
|
+
className: cn(
|
|
73
|
+
"rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]",
|
|
74
|
+
"bg-[var(--ds-bg-surface)] p-ds-3 shadow-[var(--ds-shadow-card)]",
|
|
75
|
+
"rotate-2"
|
|
76
|
+
),
|
|
77
|
+
children: renderCard ? renderCard(card) : /* @__PURE__ */ jsx(DefaultCard, { card })
|
|
78
|
+
}
|
|
79
|
+
);
|
|
80
|
+
}
|
|
81
|
+
function KanbanBoard({
|
|
82
|
+
columns: controlledCols,
|
|
83
|
+
onColumnsChange,
|
|
84
|
+
renderCard,
|
|
85
|
+
className
|
|
86
|
+
}) {
|
|
87
|
+
const [internalCols, setInternalCols] = useState(controlledCols);
|
|
88
|
+
const columns = onColumnsChange ? controlledCols : internalCols;
|
|
89
|
+
const setCols = (next) => {
|
|
90
|
+
if (typeof next === "function") {
|
|
91
|
+
const updated = next(columns);
|
|
92
|
+
if (onColumnsChange) onColumnsChange(updated);
|
|
93
|
+
else setInternalCols(updated);
|
|
94
|
+
} else {
|
|
95
|
+
if (onColumnsChange) onColumnsChange(next);
|
|
96
|
+
else setInternalCols(next);
|
|
97
|
+
}
|
|
98
|
+
};
|
|
99
|
+
const [activeCard, setActiveCard] = useState(null);
|
|
100
|
+
const sensors = useSensors(
|
|
101
|
+
useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
|
|
102
|
+
useSensor(KeyboardSensor, {
|
|
103
|
+
coordinateGetter: sortableKeyboardCoordinates
|
|
104
|
+
})
|
|
105
|
+
);
|
|
106
|
+
const findColumnByCardId = (cardId) => columns.find((col) => col.cards.some((c) => c.id === cardId));
|
|
107
|
+
const handleDragStart = (event) => {
|
|
108
|
+
const col = findColumnByCardId(String(event.active.id));
|
|
109
|
+
const card = col?.cards.find((c) => c.id === String(event.active.id));
|
|
110
|
+
if (card) setActiveCard(card);
|
|
111
|
+
};
|
|
112
|
+
const handleDragOver = (event) => {
|
|
113
|
+
const { active, over } = event;
|
|
114
|
+
if (!over) return;
|
|
115
|
+
const activeId = String(active.id);
|
|
116
|
+
const overId = String(over.id);
|
|
117
|
+
if (activeId === overId) return;
|
|
118
|
+
const activeCol = findColumnByCardId(activeId);
|
|
119
|
+
const overCol = findColumnByCardId(overId) ?? columns.find((c) => c.id === overId);
|
|
120
|
+
if (!activeCol || !overCol || activeCol.id === overCol.id) return;
|
|
121
|
+
setCols(
|
|
122
|
+
(prev) => prev.map((col) => {
|
|
123
|
+
if (col.id === activeCol.id) {
|
|
124
|
+
return { ...col, cards: col.cards.filter((c) => c.id !== activeId) };
|
|
125
|
+
}
|
|
126
|
+
if (col.id === overCol.id) {
|
|
127
|
+
const card = activeCol.cards.find((c) => c.id === activeId);
|
|
128
|
+
if (!card) return col;
|
|
129
|
+
const overIdx = col.cards.findIndex((c) => c.id === overId);
|
|
130
|
+
const newCards = [...col.cards];
|
|
131
|
+
if (overIdx >= 0) {
|
|
132
|
+
newCards.splice(overIdx, 0, card);
|
|
133
|
+
} else {
|
|
134
|
+
newCards.push(card);
|
|
135
|
+
}
|
|
136
|
+
return { ...col, cards: newCards };
|
|
137
|
+
}
|
|
138
|
+
return col;
|
|
139
|
+
})
|
|
140
|
+
);
|
|
141
|
+
};
|
|
142
|
+
const handleDragEnd = (event) => {
|
|
143
|
+
const { active, over } = event;
|
|
144
|
+
setActiveCard(null);
|
|
145
|
+
if (!over || active.id === over.id) return;
|
|
146
|
+
const activeId = String(active.id);
|
|
147
|
+
const overId = String(over.id);
|
|
148
|
+
const col = findColumnByCardId(activeId);
|
|
149
|
+
if (!col) return;
|
|
150
|
+
const oldIdx = col.cards.findIndex((c) => c.id === activeId);
|
|
151
|
+
const newIdx = col.cards.findIndex((c) => c.id === overId);
|
|
152
|
+
if (oldIdx >= 0 && newIdx >= 0 && oldIdx !== newIdx) {
|
|
153
|
+
setCols(
|
|
154
|
+
(prev) => prev.map((c) => {
|
|
155
|
+
if (c.id !== col.id) return c;
|
|
156
|
+
const newCards = [...c.cards];
|
|
157
|
+
const [moved] = newCards.splice(oldIdx, 1);
|
|
158
|
+
newCards.splice(newIdx, 0, moved);
|
|
159
|
+
return { ...c, cards: newCards };
|
|
160
|
+
})
|
|
161
|
+
);
|
|
162
|
+
}
|
|
163
|
+
};
|
|
164
|
+
return /* @__PURE__ */ jsxs(
|
|
165
|
+
DndContext,
|
|
166
|
+
{
|
|
167
|
+
sensors,
|
|
168
|
+
collisionDetection: closestCorners,
|
|
169
|
+
onDragStart: handleDragStart,
|
|
170
|
+
onDragOver: handleDragOver,
|
|
171
|
+
onDragEnd: handleDragEnd,
|
|
172
|
+
children: [
|
|
173
|
+
/* @__PURE__ */ jsx("div", { className: cn("flex gap-ds-4 overflow-x-auto pb-ds-2 snap-x snap-mandatory sm:snap-none", className), children: columns.map((col) => /* @__PURE__ */ jsxs(
|
|
174
|
+
"div",
|
|
175
|
+
{
|
|
176
|
+
className: cn(
|
|
177
|
+
"flex flex-col shrink-0 w-[calc(100vw-4rem)] sm:w-[280px] snap-center",
|
|
178
|
+
"bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]",
|
|
179
|
+
"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]"
|
|
180
|
+
),
|
|
181
|
+
children: [
|
|
182
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-ds-3 py-ds-2.5", children: [
|
|
183
|
+
/* @__PURE__ */ jsxs("div", { className: "flex items-center gap-ds-2", children: [
|
|
184
|
+
col.color && /* @__PURE__ */ jsx(
|
|
185
|
+
"span",
|
|
186
|
+
{
|
|
187
|
+
className: "w-2.5 h-2.5 rounded-[var(--ds-radius-full)] shrink-0",
|
|
188
|
+
style: { backgroundColor: col.color }
|
|
189
|
+
}
|
|
190
|
+
),
|
|
191
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]", children: col.title }),
|
|
192
|
+
/* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--ds-text-muted)] tabular-nums", children: col.cards.length })
|
|
193
|
+
] }),
|
|
194
|
+
/* @__PURE__ */ jsx(Icon, { name: "plus", size: 14, className: "text-[var(--ds-text-muted)]" })
|
|
195
|
+
] }),
|
|
196
|
+
/* @__PURE__ */ jsx(
|
|
197
|
+
SortableContext,
|
|
198
|
+
{
|
|
199
|
+
items: col.cards.map((c) => c.id),
|
|
200
|
+
strategy: verticalListSortingStrategy,
|
|
201
|
+
id: col.id,
|
|
202
|
+
children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-ds-2.5 px-ds-3 pb-ds-3 min-h-[60px]", children: col.cards.map((card) => /* @__PURE__ */ jsx(
|
|
203
|
+
SortableCard,
|
|
204
|
+
{
|
|
205
|
+
card,
|
|
206
|
+
renderCard
|
|
207
|
+
},
|
|
208
|
+
card.id
|
|
209
|
+
)) })
|
|
210
|
+
}
|
|
211
|
+
)
|
|
212
|
+
]
|
|
213
|
+
},
|
|
214
|
+
col.id
|
|
215
|
+
)) }),
|
|
216
|
+
/* @__PURE__ */ jsx(DragOverlay, { children: activeCard && /* @__PURE__ */ jsx(OverlayCard, { card: activeCard, renderCard }) })
|
|
217
|
+
]
|
|
218
|
+
}
|
|
219
|
+
);
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
export { KanbanBoard };
|
|
223
|
+
//# sourceMappingURL=kanban.js.map
|
|
224
|
+
//# sourceMappingURL=kanban.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../showcase/src/components/KanbanBoard.tsx"],"names":[],"mappings":"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","file":"kanban.js","sourcesContent":["import { useState, type ReactNode } from \"react\";\nimport {\n DndContext,\n closestCorners,\n KeyboardSensor,\n PointerSensor,\n useSensor,\n useSensors,\n type DragEndEvent,\n type DragOverEvent,\n DragOverlay,\n type DragStartEvent,\n} from \"@dnd-kit/core\";\nimport {\n SortableContext,\n sortableKeyboardCoordinates,\n verticalListSortingStrategy,\n useSortable,\n} from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport { cn } from \"../lib/utils\";\nimport { Icon } from \"../lib/icons\";\nimport { Tooltip } from \"./Tooltip\";\nimport { useTextOverflow } from \"../lib/use-text-overflow\";\nimport { Badge } from \"./Badge\";\n\nexport interface KanbanCard {\n id: string;\n title: string;\n description?: string;\n tags?: string[];\n avatar?: string;\n}\n\nexport interface KanbanColumn {\n id: string;\n title: string;\n cards: KanbanCard[];\n color?: string;\n}\n\nexport interface KanbanBoardProps {\n columns: KanbanColumn[];\n onColumnsChange?: (columns: KanbanColumn[]) => void;\n renderCard?: (card: KanbanCard) => ReactNode;\n className?: string;\n}\n\nfunction SortableCard({\n card,\n renderCard,\n}: {\n card: KanbanCard;\n renderCard?: (card: KanbanCard) => ReactNode;\n}) {\n const {\n attributes,\n listeners,\n setNodeRef,\n transform,\n transition,\n isDragging,\n } = useSortable({ id: card.id });\n\n const style = {\n transform: CSS.Transform.toString(transform),\n transition,\n };\n\n return (\n <div\n ref={setNodeRef}\n style={style}\n {...attributes}\n {...listeners}\n className={cn(\n \"rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n \"bg-[var(--ds-bg-surface)] p-ds-3 cursor-grab active:cursor-grabbing\",\n \"shadow-[var(--ds-shadow-button)]\",\n \"transition-shadow duration-[var(--ds-transition-speed)]\",\n \"focus-visible:outline-none focus-visible:shadow-[var(--ds-shadow-focus)]\",\n isDragging && \"opacity-30 scale-[1.02]\",\n )}\n >\n {renderCard ? (\n renderCard(card)\n ) : (\n <DefaultCard card={card} />\n )}\n </div>\n );\n}\n\nfunction ClampedDescription({ children }: { children: string }) {\n const { ref, isTruncated } = useTextOverflow({ lines: 2 });\n const el = <p ref={ref} className=\"text-xs text-[var(--ds-text-secondary)] line-clamp-2\">{children}</p>;\n if (!isTruncated) return el;\n return <Tooltip content={children}>{el}</Tooltip>;\n}\n\nfunction TruncTitle({ children }: { children: string }) {\n const { ref, isTruncated } = useTextOverflow({ lines: 1 });\n const el = <p ref={ref} className=\"text-sm font-medium text-[var(--ds-text-primary)] truncate\">{children}</p>;\n if (!isTruncated) return el;\n return <Tooltip content={children}>{el}</Tooltip>;\n}\n\nfunction DefaultCard({ card }: { card: KanbanCard }) {\n return (\n <div className=\"space-y-ds-2\">\n <TruncTitle>{card.title}</TruncTitle>\n {card.description && (\n <ClampedDescription>{card.description}</ClampedDescription>\n )}\n {card.tags && card.tags.length > 0 && (\n <div className=\"flex flex-wrap gap-ds-1\">\n {card.tags.map((tag) => (\n <Badge key={tag} variant=\"subtle\" size=\"sm\">{tag}</Badge>\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction OverlayCard({\n card,\n renderCard,\n}: {\n card: KanbanCard;\n renderCard?: (card: KanbanCard) => ReactNode;\n}) {\n return (\n <div\n className={cn(\n \"rounded-[var(--ds-radius-md)] border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n \"bg-[var(--ds-bg-surface)] p-ds-3 shadow-[var(--ds-shadow-card)]\",\n \"rotate-2\",\n )}\n >\n {renderCard ? renderCard(card) : <DefaultCard card={card} />}\n </div>\n );\n}\n\nexport function KanbanBoard({\n columns: controlledCols,\n onColumnsChange,\n renderCard,\n className,\n}: KanbanBoardProps) {\n const [internalCols, setInternalCols] = useState<KanbanColumn[]>(controlledCols);\n const columns = onColumnsChange ? controlledCols : internalCols;\n const setCols = (next: KanbanColumn[] | ((prev: KanbanColumn[]) => KanbanColumn[])) => {\n if (typeof next === \"function\") {\n const updated = next(columns);\n if (onColumnsChange) onColumnsChange(updated);\n else setInternalCols(updated);\n } else {\n if (onColumnsChange) onColumnsChange(next);\n else setInternalCols(next);\n }\n };\n\n const [activeCard, setActiveCard] = useState<KanbanCard | null>(null);\n\n const sensors = useSensors(\n useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),\n useSensor(KeyboardSensor, {\n coordinateGetter: sortableKeyboardCoordinates,\n }),\n );\n\n const findColumnByCardId = (cardId: string) =>\n columns.find((col) => col.cards.some((c) => c.id === cardId));\n\n const handleDragStart = (event: DragStartEvent) => {\n const col = findColumnByCardId(String(event.active.id));\n const card = col?.cards.find((c) => c.id === String(event.active.id));\n if (card) setActiveCard(card);\n };\n\n const handleDragOver = (event: DragOverEvent) => {\n const { active, over } = event;\n if (!over) return;\n\n const activeId = String(active.id);\n const overId = String(over.id);\n if (activeId === overId) return;\n\n const activeCol = findColumnByCardId(activeId);\n const overCol =\n findColumnByCardId(overId) ?? columns.find((c) => c.id === overId);\n\n if (!activeCol || !overCol || activeCol.id === overCol.id) return;\n\n setCols((prev) =>\n prev.map((col) => {\n if (col.id === activeCol.id) {\n return { ...col, cards: col.cards.filter((c) => c.id !== activeId) };\n }\n if (col.id === overCol.id) {\n const card = activeCol.cards.find((c) => c.id === activeId);\n if (!card) return col;\n const overIdx = col.cards.findIndex((c) => c.id === overId);\n const newCards = [...col.cards];\n if (overIdx >= 0) {\n newCards.splice(overIdx, 0, card);\n } else {\n newCards.push(card);\n }\n return { ...col, cards: newCards };\n }\n return col;\n }),\n );\n };\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n setActiveCard(null);\n if (!over || active.id === over.id) return;\n\n const activeId = String(active.id);\n const overId = String(over.id);\n\n const col = findColumnByCardId(activeId);\n if (!col) return;\n\n const oldIdx = col.cards.findIndex((c) => c.id === activeId);\n const newIdx = col.cards.findIndex((c) => c.id === overId);\n\n if (oldIdx >= 0 && newIdx >= 0 && oldIdx !== newIdx) {\n setCols((prev) =>\n prev.map((c) => {\n if (c.id !== col.id) return c;\n const newCards = [...c.cards];\n const [moved] = newCards.splice(oldIdx, 1);\n newCards.splice(newIdx, 0, moved);\n return { ...c, cards: newCards };\n }),\n );\n }\n };\n\n return (\n <DndContext\n sensors={sensors}\n collisionDetection={closestCorners}\n onDragStart={handleDragStart}\n onDragOver={handleDragOver}\n onDragEnd={handleDragEnd}\n >\n <div className={cn(\"flex gap-ds-4 overflow-x-auto pb-ds-2 snap-x snap-mandatory sm:snap-none\", className)}>\n {columns.map((col) => (\n <div\n key={col.id}\n className={cn(\n \"flex flex-col shrink-0 w-[calc(100vw-4rem)] sm:w-[280px] snap-center\",\n \"bg-[var(--ds-bg-muted)] rounded-[var(--ds-radius-lg)]\",\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-subtle)]\",\n )}\n >\n <div className=\"flex items-center justify-between px-ds-3 py-ds-2.5\">\n <div className=\"flex items-center gap-ds-2\">\n {col.color && (\n <span\n className=\"w-2.5 h-2.5 rounded-[var(--ds-radius-full)] shrink-0\"\n style={{ backgroundColor: col.color }}\n />\n )}\n <span className=\"text-sm font-[var(--ds-weight-heading)] text-[var(--ds-text-primary)]\">\n {col.title}\n </span>\n <span className=\"text-xs text-[var(--ds-text-muted)] tabular-nums\">\n {col.cards.length}\n </span>\n </div>\n <Icon name=\"plus\" size={14} className=\"text-[var(--ds-text-muted)]\" />\n </div>\n\n <SortableContext\n items={col.cards.map((c) => c.id)}\n strategy={verticalListSortingStrategy}\n id={col.id}\n >\n <div className=\"flex flex-col gap-ds-2.5 px-ds-3 pb-ds-3 min-h-[60px]\">\n {col.cards.map((card) => (\n <SortableCard\n key={card.id}\n card={card}\n renderCard={renderCard}\n />\n ))}\n </div>\n </SortableContext>\n </div>\n ))}\n </div>\n\n <DragOverlay>\n {activeCard && <OverlayCard card={activeCard} renderCard={renderCard} />}\n </DragOverlay>\n </DndContext>\n );\n}\n"]}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { buildExtendedMap } from './chunk-GYVBRUO2.js';
|
|
2
|
+
import { Upload, Download, Bookmark, Star, Menu, Pencil, LogOut, Send, Paperclip, Mic, GripVertical, ArrowLeft, Redo2, Undo2, Trash2, ChevronDown, ChevronUp, Type, Highlighter, Subscript, Superscript, Minus, Quote, Code, Table, Image, Link, ListChecks, ListOrdered, List, AlignRight, AlignCenter, AlignLeft, Strikethrough, Underline, Italic, Bold, CalendarDays, Clock, AlertCircle, Info, AlertTriangle, Check, User, Bell, Search, Plus, X, ChevronRight, Settings, BarChart3, FolderKanban, Home } from 'lucide-react';
|
|
3
|
+
|
|
4
|
+
var curated = {
|
|
5
|
+
"home": Home,
|
|
6
|
+
"folder": FolderKanban,
|
|
7
|
+
"chart": BarChart3,
|
|
8
|
+
"settings": Settings,
|
|
9
|
+
"chevron-right": ChevronRight,
|
|
10
|
+
"close": X,
|
|
11
|
+
"plus": Plus,
|
|
12
|
+
"search": Search,
|
|
13
|
+
"bell": Bell,
|
|
14
|
+
"user": User,
|
|
15
|
+
"check": Check,
|
|
16
|
+
"warning": AlertTriangle,
|
|
17
|
+
"info": Info,
|
|
18
|
+
"error": AlertCircle,
|
|
19
|
+
"clock": Clock,
|
|
20
|
+
"calendar": CalendarDays,
|
|
21
|
+
"bold": Bold,
|
|
22
|
+
"italic": Italic,
|
|
23
|
+
"underline": Underline,
|
|
24
|
+
"strikethrough": Strikethrough,
|
|
25
|
+
"align-left": AlignLeft,
|
|
26
|
+
"align-center": AlignCenter,
|
|
27
|
+
"align-right": AlignRight,
|
|
28
|
+
"list": List,
|
|
29
|
+
"list-ordered": ListOrdered,
|
|
30
|
+
"list-checks": ListChecks,
|
|
31
|
+
"link": Link,
|
|
32
|
+
"image": Image,
|
|
33
|
+
"table": Table,
|
|
34
|
+
"code": Code,
|
|
35
|
+
"quote": Quote,
|
|
36
|
+
"minus": Minus,
|
|
37
|
+
"superscript": Superscript,
|
|
38
|
+
"subscript": Subscript,
|
|
39
|
+
"highlight": Highlighter,
|
|
40
|
+
"type": Type,
|
|
41
|
+
"chevron-up": ChevronUp,
|
|
42
|
+
"chevron-down": ChevronDown,
|
|
43
|
+
"trash": Trash2,
|
|
44
|
+
"undo": Undo2,
|
|
45
|
+
"redo": Redo2,
|
|
46
|
+
"arrow-left": ArrowLeft,
|
|
47
|
+
"grip-vertical": GripVertical,
|
|
48
|
+
"mic": Mic,
|
|
49
|
+
"paperclip": Paperclip,
|
|
50
|
+
"send": Send,
|
|
51
|
+
"log-out": LogOut,
|
|
52
|
+
"edit": Pencil,
|
|
53
|
+
"menu": Menu,
|
|
54
|
+
"star": Star,
|
|
55
|
+
"bookmark": Bookmark,
|
|
56
|
+
"download": Download,
|
|
57
|
+
"upload": Upload
|
|
58
|
+
};
|
|
59
|
+
function loadCurated() {
|
|
60
|
+
return curated;
|
|
61
|
+
}
|
|
62
|
+
async function loadExtended() {
|
|
63
|
+
const L = await import('lucide-react');
|
|
64
|
+
const extended = buildExtendedMap(L, {});
|
|
65
|
+
Object.assign(extended, curated);
|
|
66
|
+
return extended;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export { loadCurated, loadExtended };
|
|
70
|
+
//# sourceMappingURL=lucide-AILUUOAJ.js.map
|
|
71
|
+
//# sourceMappingURL=lucide-AILUUOAJ.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../showcase/src/lib/icon-packs/lucide.ts"],"names":[],"mappings":";;;AAqBA,IAAM,OAAA,GAAmB;AAAA,EACvB,MAAA,EAAQ,IAAA;AAAA,EAAM,QAAA,EAAU,YAAA;AAAA,EAAc,OAAA,EAAS,SAAA;AAAA,EAAW,UAAA,EAAY,QAAA;AAAA,EACtE,eAAA,EAAiB,YAAA;AAAA,EAAc,OAAA,EAAS,CAAA;AAAA,EAAG,MAAA,EAAQ,IAAA;AAAA,EAAM,QAAA,EAAU,MAAA;AAAA,EACnE,MAAA,EAAQ,IAAA;AAAA,EAAM,MAAA,EAAQ,IAAA;AAAA,EAAM,OAAA,EAAS,KAAA;AAAA,EAAO,SAAA,EAAW,aAAA;AAAA,EACvD,MAAA,EAAQ,IAAA;AAAA,EAAM,OAAA,EAAS,WAAA;AAAA,EAAa,OAAA,EAAS,KAAA;AAAA,EAAO,UAAA,EAAY,YAAA;AAAA,EAChE,MAAA,EAAQ,IAAA;AAAA,EAAM,QAAA,EAAU,MAAA;AAAA,EAAQ,WAAA,EAAa,SAAA;AAAA,EAAW,eAAA,EAAiB,aAAA;AAAA,EACzE,YAAA,EAAc,SAAA;AAAA,EAAW,cAAA,EAAgB,WAAA;AAAA,EAAa,aAAA,EAAe,UAAA;AAAA,EACrE,MAAA,EAAQ,IAAA;AAAA,EAAM,cAAA,EAAgB,WAAA;AAAA,EAAa,aAAA,EAAe,UAAA;AAAA,EAC1D,MAAA,EAAQ,IAAA;AAAA,EAAM,OAAA,EAAS,KAAA;AAAA,EAAO,OAAA,EAAS,KAAA;AAAA,EAAO,MAAA,EAAQ,IAAA;AAAA,EACtD,OAAA,EAAS,KAAA;AAAA,EAAO,OAAA,EAAS,KAAA;AAAA,EAAO,aAAA,EAAe,WAAA;AAAA,EAAa,WAAA,EAAa,SAAA;AAAA,EACzE,WAAA,EAAa,WAAA;AAAA,EAAa,MAAA,EAAQ,IAAA;AAAA,EAAM,YAAA,EAAc,SAAA;AAAA,EAAW,cAAA,EAAgB,WAAA;AAAA,EACjF,OAAA,EAAS,MAAA;AAAA,EAAQ,MAAA,EAAQ,KAAA;AAAA,EAAO,MAAA,EAAQ,KAAA;AAAA,EACxC,YAAA,EAAc,SAAA;AAAA,EAAW,eAAA,EAAiB,YAAA;AAAA,EAC1C,KAAA,EAAO,GAAA;AAAA,EAAK,WAAA,EAAa,SAAA;AAAA,EAAW,MAAA,EAAQ,IAAA;AAAA,EAC5C,SAAA,EAAW,MAAA;AAAA,EAAQ,MAAA,EAAQ,MAAA;AAAA,EAAQ,MAAA,EAAQ,IAAA;AAAA,EAC3C,MAAA,EAAQ,IAAA;AAAA,EAAM,UAAA,EAAY,QAAA;AAAA,EAC1B,UAAA,EAAY,QAAA;AAAA,EAAU,QAAA,EAAU;AAClC,CAAA;AAEO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAO,OAAA;AACT;AAEA,eAAsB,YAAA,GAAiC;AACrD,EAAA,MAAM,CAAA,GAAI,MAAM,OAAO,cAAc,CAAA;AACrC,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,CAAA,EAAyC,EAAE,CAAA;AAC7E,EAAA,MAAA,CAAO,MAAA,CAAO,UAAU,OAAO,CAAA;AAC/B,EAAA,OAAO,QAAA;AACT","file":"lucide-AILUUOAJ.js","sourcesContent":["import type { IconMap } from './types'\nimport { buildExtendedMap } from './utils'\nimport {\n Home, FolderKanban, BarChart3, Settings,\n ChevronRight, X, Plus, Search,\n Bell, User, Check, AlertTriangle,\n Info, AlertCircle, Clock, CalendarDays,\n Bold, Italic, Underline, Strikethrough,\n AlignLeft, AlignCenter, AlignRight,\n List, ListOrdered, ListChecks,\n Link, Image, Table, Code,\n Quote, Minus, Superscript, Subscript,\n Highlighter, Type, ChevronUp, ChevronDown,\n Trash2, Undo2, Redo2,\n ArrowLeft, GripVertical,\n Mic, Paperclip, Send,\n LogOut, Pencil, Menu,\n Star, Bookmark,\n Download, Upload,\n} from \"lucide-react\"\n\nconst curated: IconMap = {\n \"home\": Home, \"folder\": FolderKanban, \"chart\": BarChart3, \"settings\": Settings,\n \"chevron-right\": ChevronRight, \"close\": X, \"plus\": Plus, \"search\": Search,\n \"bell\": Bell, \"user\": User, \"check\": Check, \"warning\": AlertTriangle,\n \"info\": Info, \"error\": AlertCircle, \"clock\": Clock, \"calendar\": CalendarDays,\n \"bold\": Bold, \"italic\": Italic, \"underline\": Underline, \"strikethrough\": Strikethrough,\n \"align-left\": AlignLeft, \"align-center\": AlignCenter, \"align-right\": AlignRight,\n \"list\": List, \"list-ordered\": ListOrdered, \"list-checks\": ListChecks,\n \"link\": Link, \"image\": Image, \"table\": Table, \"code\": Code,\n \"quote\": Quote, \"minus\": Minus, \"superscript\": Superscript, \"subscript\": Subscript,\n \"highlight\": Highlighter, \"type\": Type, \"chevron-up\": ChevronUp, \"chevron-down\": ChevronDown,\n \"trash\": Trash2, \"undo\": Undo2, \"redo\": Redo2,\n \"arrow-left\": ArrowLeft, \"grip-vertical\": GripVertical,\n \"mic\": Mic, \"paperclip\": Paperclip, \"send\": Send,\n \"log-out\": LogOut, \"edit\": Pencil, \"menu\": Menu,\n \"star\": Star, \"bookmark\": Bookmark,\n \"download\": Download, \"upload\": Upload,\n}\n\nexport function loadCurated(): IconMap {\n return curated\n}\n\nexport async function loadExtended(): Promise<IconMap> {\n const L = await import(\"lucide-react\")\n const extended = buildExtendedMap(L as unknown as Record<string, unknown>, {})\n Object.assign(extended, curated)\n return extended\n}\n"]}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { buildExtendedMap } from './chunk-GYVBRUO2.js';
|
|
2
|
+
import { UploadSimple, DownloadSimple, BookmarkSimple, Star, List, PencilSimple, SignOut, PaperPlaneTilt, Paperclip, Microphone, DotsSixVertical, ArrowLeft, ArrowClockwise, ArrowCounterClockwise, Trash, CaretDown, CaretUp, TextT, Highlighter, TextSubscript, TextSuperscript, Minus, Quotes, Code, Table, Image, Link, ListChecks, ListNumbers, ListBullets, TextAlignRight, TextAlignCenter, TextAlignLeft, TextStrikethrough, TextUnderline, TextItalic, TextB, CalendarBlank, Clock, WarningCircle, Info, Warning, Check, User, Bell, MagnifyingGlass, Plus, X, CaretRight, Gear, ChartBar, FolderSimple, House } from '@phosphor-icons/react';
|
|
3
|
+
|
|
4
|
+
var curated = {
|
|
5
|
+
"home": House,
|
|
6
|
+
"folder": FolderSimple,
|
|
7
|
+
"chart": ChartBar,
|
|
8
|
+
"settings": Gear,
|
|
9
|
+
"chevron-right": CaretRight,
|
|
10
|
+
"close": X,
|
|
11
|
+
"plus": Plus,
|
|
12
|
+
"search": MagnifyingGlass,
|
|
13
|
+
"bell": Bell,
|
|
14
|
+
"user": User,
|
|
15
|
+
"check": Check,
|
|
16
|
+
"warning": Warning,
|
|
17
|
+
"info": Info,
|
|
18
|
+
"error": WarningCircle,
|
|
19
|
+
"clock": Clock,
|
|
20
|
+
"calendar": CalendarBlank,
|
|
21
|
+
"bold": TextB,
|
|
22
|
+
"italic": TextItalic,
|
|
23
|
+
"underline": TextUnderline,
|
|
24
|
+
"strikethrough": TextStrikethrough,
|
|
25
|
+
"align-left": TextAlignLeft,
|
|
26
|
+
"align-center": TextAlignCenter,
|
|
27
|
+
"align-right": TextAlignRight,
|
|
28
|
+
"list": ListBullets,
|
|
29
|
+
"list-ordered": ListNumbers,
|
|
30
|
+
"list-checks": ListChecks,
|
|
31
|
+
"link": Link,
|
|
32
|
+
"image": Image,
|
|
33
|
+
"table": Table,
|
|
34
|
+
"code": Code,
|
|
35
|
+
"quote": Quotes,
|
|
36
|
+
"minus": Minus,
|
|
37
|
+
"superscript": TextSuperscript,
|
|
38
|
+
"subscript": TextSubscript,
|
|
39
|
+
"highlight": Highlighter,
|
|
40
|
+
"type": TextT,
|
|
41
|
+
"chevron-up": CaretUp,
|
|
42
|
+
"chevron-down": CaretDown,
|
|
43
|
+
"trash": Trash,
|
|
44
|
+
"undo": ArrowCounterClockwise,
|
|
45
|
+
"redo": ArrowClockwise,
|
|
46
|
+
"arrow-left": ArrowLeft,
|
|
47
|
+
"grip-vertical": DotsSixVertical,
|
|
48
|
+
"mic": Microphone,
|
|
49
|
+
"paperclip": Paperclip,
|
|
50
|
+
"send": PaperPlaneTilt,
|
|
51
|
+
"log-out": SignOut,
|
|
52
|
+
"edit": PencilSimple,
|
|
53
|
+
"menu": List,
|
|
54
|
+
"star": Star,
|
|
55
|
+
"bookmark": BookmarkSimple,
|
|
56
|
+
"download": DownloadSimple,
|
|
57
|
+
"upload": UploadSimple
|
|
58
|
+
};
|
|
59
|
+
function loadCurated() {
|
|
60
|
+
return curated;
|
|
61
|
+
}
|
|
62
|
+
async function loadExtended() {
|
|
63
|
+
const P = await import('@phosphor-icons/react');
|
|
64
|
+
const extended = buildExtendedMap(P, {});
|
|
65
|
+
Object.assign(extended, curated);
|
|
66
|
+
return extended;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
export { loadCurated, loadExtended };
|
|
70
|
+
//# sourceMappingURL=phosphor-A4JOBGMT.js.map
|
|
71
|
+
//# sourceMappingURL=phosphor-A4JOBGMT.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../showcase/src/lib/icon-packs/phosphor.ts"],"names":[],"mappings":";;;AAwBA,IAAM,OAAA,GAAmB;AAAA,EACvB,MAAA,EAAQ,KAAA;AAAA,EAAO,QAAA,EAAU,YAAA;AAAA,EAAc,OAAA,EAAS,QAAA;AAAA,EAChD,UAAA,EAAY,IAAA;AAAA,EAAM,eAAA,EAAiB,UAAA;AAAA,EAAY,OAAA,EAAS,CAAA;AAAA,EACxD,MAAA,EAAQ,IAAA;AAAA,EAAM,QAAA,EAAU,eAAA;AAAA,EAAiB,MAAA,EAAQ,IAAA;AAAA,EAAM,MAAA,EAAQ,IAAA;AAAA,EAC/D,OAAA,EAAS,KAAA;AAAA,EAAO,SAAA,EAAW,OAAA;AAAA,EAAS,MAAA,EAAQ,IAAA;AAAA,EAC5C,OAAA,EAAS,aAAA;AAAA,EAAe,OAAA,EAAS,KAAA;AAAA,EAAO,UAAA,EAAY,aAAA;AAAA,EACpD,MAAA,EAAQ,KAAA;AAAA,EAAO,QAAA,EAAU,UAAA;AAAA,EAAY,WAAA,EAAa,aAAA;AAAA,EAClD,eAAA,EAAiB,iBAAA;AAAA,EAAmB,YAAA,EAAc,aAAA;AAAA,EAClD,cAAA,EAAgB,eAAA;AAAA,EAAiB,aAAA,EAAe,cAAA;AAAA,EAChD,MAAA,EAAQ,WAAA;AAAA,EAAa,cAAA,EAAgB,WAAA;AAAA,EAAa,aAAA,EAAe,UAAA;AAAA,EACjE,MAAA,EAAQ,IAAA;AAAA,EAAM,OAAA,EAAS,KAAA;AAAA,EAAO,OAAA,EAAS,KAAA;AAAA,EAAO,MAAA,EAAQ,IAAA;AAAA,EACtD,OAAA,EAAS,MAAA;AAAA,EAAQ,OAAA,EAAS,KAAA;AAAA,EAAO,aAAA,EAAe,eAAA;AAAA,EAChD,WAAA,EAAa,aAAA;AAAA,EAAe,WAAA,EAAa,WAAA;AAAA,EAAa,MAAA,EAAQ,KAAA;AAAA,EAC9D,YAAA,EAAc,OAAA;AAAA,EAAS,cAAA,EAAgB,SAAA;AAAA,EAAW,OAAA,EAAS,KAAA;AAAA,EAC3D,MAAA,EAAQ,qBAAA;AAAA,EAAuB,MAAA,EAAQ,cAAA;AAAA,EACvC,YAAA,EAAc,SAAA;AAAA,EAAW,eAAA,EAAiB,eAAA;AAAA,EAC1C,KAAA,EAAO,UAAA;AAAA,EAAY,WAAA,EAAa,SAAA;AAAA,EAAW,MAAA,EAAQ,cAAA;AAAA,EACnD,SAAA,EAAW,OAAA;AAAA,EAAS,MAAA,EAAQ,YAAA;AAAA,EAAc,MAAA,EAAQ,IAAA;AAAA,EAClD,MAAA,EAAQ,IAAA;AAAA,EAAM,UAAA,EAAY,cAAA;AAAA,EAC1B,UAAA,EAAY,cAAA;AAAA,EAAgB,QAAA,EAAU;AACxC,CAAA;AAEO,SAAS,WAAA,GAAuB;AACrC,EAAA,OAAO,OAAA;AACT;AAEA,eAAsB,YAAA,GAAiC;AACrD,EAAA,MAAM,CAAA,GAAI,MAAM,OAAO,uBAAuB,CAAA;AAC9C,EAAA,MAAM,QAAA,GAAW,gBAAA,CAAiB,CAAA,EAAyC,EAAE,CAAA;AAC7E,EAAA,MAAA,CAAO,MAAA,CAAO,UAAU,OAAO,CAAA;AAC/B,EAAA,OAAO,QAAA;AACT","file":"phosphor-A4JOBGMT.js","sourcesContent":["import type { IconMap } from './types'\nimport { buildExtendedMap } from './utils'\nimport {\n House, FolderSimple, ChartBar,\n Gear, CaretRight, X,\n Plus, MagnifyingGlass, Bell, User,\n Check, Warning, Info,\n WarningCircle, Clock, CalendarBlank,\n TextB, TextItalic, TextUnderline,\n TextStrikethrough, TextAlignLeft,\n TextAlignCenter, TextAlignRight,\n ListBullets, ListNumbers, ListChecks,\n Link, Image, Table, Code,\n Quotes, Minus, TextSuperscript,\n TextSubscript, Highlighter, TextT,\n CaretUp, CaretDown, Trash,\n ArrowCounterClockwise, ArrowClockwise,\n ArrowLeft, DotsSixVertical,\n Microphone, Paperclip, PaperPlaneTilt,\n SignOut, PencilSimple, List,\n Star, BookmarkSimple,\n DownloadSimple, UploadSimple,\n} from \"@phosphor-icons/react\"\n\nconst curated: IconMap = {\n \"home\": House, \"folder\": FolderSimple, \"chart\": ChartBar,\n \"settings\": Gear, \"chevron-right\": CaretRight, \"close\": X,\n \"plus\": Plus, \"search\": MagnifyingGlass, \"bell\": Bell, \"user\": User,\n \"check\": Check, \"warning\": Warning, \"info\": Info,\n \"error\": WarningCircle, \"clock\": Clock, \"calendar\": CalendarBlank,\n \"bold\": TextB, \"italic\": TextItalic, \"underline\": TextUnderline,\n \"strikethrough\": TextStrikethrough, \"align-left\": TextAlignLeft,\n \"align-center\": TextAlignCenter, \"align-right\": TextAlignRight,\n \"list\": ListBullets, \"list-ordered\": ListNumbers, \"list-checks\": ListChecks,\n \"link\": Link, \"image\": Image, \"table\": Table, \"code\": Code,\n \"quote\": Quotes, \"minus\": Minus, \"superscript\": TextSuperscript,\n \"subscript\": TextSubscript, \"highlight\": Highlighter, \"type\": TextT,\n \"chevron-up\": CaretUp, \"chevron-down\": CaretDown, \"trash\": Trash,\n \"undo\": ArrowCounterClockwise, \"redo\": ArrowClockwise,\n \"arrow-left\": ArrowLeft, \"grip-vertical\": DotsSixVertical,\n \"mic\": Microphone, \"paperclip\": Paperclip, \"send\": PaperPlaneTilt,\n \"log-out\": SignOut, \"edit\": PencilSimple, \"menu\": List,\n \"star\": Star, \"bookmark\": BookmarkSimple,\n \"download\": DownloadSimple, \"upload\": UploadSimple,\n}\n\nexport function loadCurated(): IconMap {\n return curated\n}\n\nexport async function loadExtended(): Promise<IconMap> {\n const P = await import(\"@phosphor-icons/react\")\n const extended = buildExtendedMap(P as unknown as Record<string, unknown>, {})\n Object.assign(extended, curated)\n return extended\n}\n"]}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import { Separator, Panel, Group } from 'react-resizable-panels';
|
|
3
|
+
import { ComponentProps } from 'react';
|
|
4
|
+
|
|
5
|
+
type PanelGroupProps = ComponentProps<typeof Group>;
|
|
6
|
+
type Direction = "horizontal" | "vertical";
|
|
7
|
+
interface ResizablePanelGroupProps extends Omit<PanelGroupProps, "className" | "orientation"> {
|
|
8
|
+
direction?: Direction;
|
|
9
|
+
stackOnMobile?: boolean;
|
|
10
|
+
className?: string;
|
|
11
|
+
/** Map of panel id → percentage (0–100). Must be an object, never an array. Panels need matching id props. */
|
|
12
|
+
defaultLayout?: {
|
|
13
|
+
[panelId: string]: number;
|
|
14
|
+
};
|
|
15
|
+
/** Called after resize ends. Receives { [panelId]: number }, not number[]. */
|
|
16
|
+
onLayoutChanged?: (layout: {
|
|
17
|
+
[panelId: string]: number;
|
|
18
|
+
}) => void;
|
|
19
|
+
}
|
|
20
|
+
declare function ResizablePanelGroup({ className, direction, stackOnMobile, ...props }: ResizablePanelGroupProps): react_jsx_runtime.JSX.Element;
|
|
21
|
+
type PanelProps = ComponentProps<typeof Panel>;
|
|
22
|
+
interface ResizablePanelProps extends Omit<PanelProps, "className"> {
|
|
23
|
+
className?: string;
|
|
24
|
+
id?: string;
|
|
25
|
+
/** number = px. "30%" or "30" = percent. "28rem" / "400px" also valid. */
|
|
26
|
+
defaultSize?: number | string;
|
|
27
|
+
minSize?: number | string;
|
|
28
|
+
maxSize?: number | string;
|
|
29
|
+
collapsible?: boolean;
|
|
30
|
+
}
|
|
31
|
+
declare function ResizablePanel({ className, ...props }: ResizablePanelProps): react_jsx_runtime.JSX.Element;
|
|
32
|
+
type PanelResizeHandleProps = ComponentProps<typeof Separator>;
|
|
33
|
+
interface ResizableHandleProps extends Omit<PanelResizeHandleProps, "className"> {
|
|
34
|
+
withHandle?: boolean;
|
|
35
|
+
className?: string;
|
|
36
|
+
}
|
|
37
|
+
declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): react_jsx_runtime.JSX.Element;
|
|
38
|
+
|
|
39
|
+
export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
|
|
@@ -0,0 +1,89 @@
|
|
|
1
|
+
import { useBreakpoint } from './chunk-DPF6776I.js';
|
|
2
|
+
import { Icon } from './chunk-XUBVMRIE.js';
|
|
3
|
+
import { cn } from './chunk-IUBWNDUK.js';
|
|
4
|
+
import { Group, Panel, Separator } from 'react-resizable-panels';
|
|
5
|
+
import { createContext, useContext } from 'react';
|
|
6
|
+
import { jsx } from 'react/jsx-runtime';
|
|
7
|
+
|
|
8
|
+
var DirectionCtx = createContext("horizontal");
|
|
9
|
+
var MobileCtx = createContext(false);
|
|
10
|
+
function ResizablePanelGroup({
|
|
11
|
+
className,
|
|
12
|
+
direction = "horizontal",
|
|
13
|
+
stackOnMobile = true,
|
|
14
|
+
...props
|
|
15
|
+
}) {
|
|
16
|
+
const isMobile = useBreakpoint("sm");
|
|
17
|
+
const shouldStack = stackOnMobile && isMobile && direction === "horizontal";
|
|
18
|
+
const effectiveDirection = shouldStack ? "vertical" : direction;
|
|
19
|
+
return /* @__PURE__ */ jsx(DirectionCtx.Provider, { value: effectiveDirection, children: /* @__PURE__ */ jsx(MobileCtx.Provider, { value: isMobile, children: /* @__PURE__ */ jsx(
|
|
20
|
+
Group,
|
|
21
|
+
{
|
|
22
|
+
className: cn(
|
|
23
|
+
"flex h-full w-full",
|
|
24
|
+
effectiveDirection === "vertical" && "flex-col",
|
|
25
|
+
className
|
|
26
|
+
),
|
|
27
|
+
orientation: effectiveDirection,
|
|
28
|
+
...props
|
|
29
|
+
}
|
|
30
|
+
) }) });
|
|
31
|
+
}
|
|
32
|
+
function ResizablePanel({ className, ...props }) {
|
|
33
|
+
return /* @__PURE__ */ jsx(Panel, { className: cn("", className), ...props });
|
|
34
|
+
}
|
|
35
|
+
function ResizableHandle({
|
|
36
|
+
withHandle,
|
|
37
|
+
className,
|
|
38
|
+
...props
|
|
39
|
+
}) {
|
|
40
|
+
const direction = useContext(DirectionCtx);
|
|
41
|
+
const isMobile = useContext(MobileCtx);
|
|
42
|
+
const isVertical = direction === "vertical";
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
Separator,
|
|
45
|
+
{
|
|
46
|
+
className: cn(
|
|
47
|
+
"relative flex items-center justify-center bg-[var(--ds-border-default)]",
|
|
48
|
+
isVertical ? cn(
|
|
49
|
+
"h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:content-['']",
|
|
50
|
+
isMobile ? "after:-top-3 after:-bottom-3" : "after:-top-1 after:-bottom-1"
|
|
51
|
+
) : cn(
|
|
52
|
+
"w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:content-['']",
|
|
53
|
+
isMobile ? "after:-left-3 after:-right-3" : "after:-left-1 after:-right-1"
|
|
54
|
+
),
|
|
55
|
+
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]",
|
|
56
|
+
"[&[data-resize-handle-state=drag]]:bg-[var(--ds-accent-primary)]",
|
|
57
|
+
"[&[data-resize-handle-state=hover]]:bg-[var(--ds-accent-primary)]",
|
|
58
|
+
className
|
|
59
|
+
),
|
|
60
|
+
...props,
|
|
61
|
+
children: withHandle && /* @__PURE__ */ jsx(
|
|
62
|
+
"div",
|
|
63
|
+
{
|
|
64
|
+
className: cn(
|
|
65
|
+
"z-10 flex items-center justify-center rounded-[var(--ds-radius-sm)]",
|
|
66
|
+
"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]",
|
|
67
|
+
"bg-[var(--ds-bg-surface)]",
|
|
68
|
+
isVertical ? isMobile ? "h-4 w-8" : "h-3 w-4" : isMobile ? "h-8 w-4" : "h-4 w-3"
|
|
69
|
+
),
|
|
70
|
+
children: /* @__PURE__ */ jsx(
|
|
71
|
+
Icon,
|
|
72
|
+
{
|
|
73
|
+
name: "grip-vertical",
|
|
74
|
+
size: isMobile ? 12 : 10,
|
|
75
|
+
className: cn(
|
|
76
|
+
"text-[var(--ds-text-muted)]",
|
|
77
|
+
isVertical && "rotate-90"
|
|
78
|
+
)
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
)
|
|
83
|
+
}
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export { ResizableHandle, ResizablePanel, ResizablePanelGroup };
|
|
88
|
+
//# sourceMappingURL=resizable.js.map
|
|
89
|
+
//# sourceMappingURL=resizable.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../showcase/src/components/ResizablePanels.tsx"],"names":["PanelGroup","PanelResizeHandle"],"mappings":";;;;;;;AAaA,IAAM,YAAA,GAAe,cAAyB,YAAY,CAAA;AAC1D,IAAM,SAAA,GAAY,cAAc,KAAK,CAAA;AAa9B,SAAS,mBAAA,CAAoB;AAAA,EAClC,SAAA;AAAA,EACA,SAAA,GAAY,YAAA;AAAA,EACZ,aAAA,GAAgB,IAAA;AAAA,EAChB,GAAG;AACL,CAAA,EAA6B;AAC3B,EAAA,MAAM,QAAA,GAAW,cAAc,IAAI,CAAA;AACnC,EAAA,MAAM,WAAA,GAAc,aAAA,IAAiB,QAAA,IAAY,SAAA,KAAc,YAAA;AAC/D,EAAA,MAAM,kBAAA,GAAqB,cAAc,UAAA,GAAa,SAAA;AAEtD,EAAA,uBACE,GAAA,CAAC,YAAA,CAAa,QAAA,EAAb,EAAsB,KAAA,EAAO,kBAAA,EAC5B,QAAA,kBAAA,GAAA,CAAC,SAAA,CAAU,QAAA,EAAV,EAAmB,KAAA,EAAO,QAAA,EACzB,QAAA,kBAAA,GAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oBAAA;AAAA,QACA,uBAAuB,UAAA,IAAc,UAAA;AAAA,QACrC;AAAA,OACF;AAAA,MACA,WAAA,EAAa,kBAAA;AAAA,MACZ,GAAG;AAAA;AAAA,KAER,CAAA,EACF,CAAA;AAEJ;AAcO,SAAS,cAAA,CAAe,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAC3E,EAAA,uBAAO,GAAA,CAAC,SAAM,SAAA,EAAW,EAAA,CAAG,IAAI,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AACzD;AAUO,SAAS,eAAA,CAAgB;AAAA,EAC9B,UAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAyB;AACvB,EAAA,MAAM,SAAA,GAAY,WAAW,YAAY,CAAA;AACzC,EAAA,MAAM,QAAA,GAAW,WAAW,SAAS,CAAA;AACrC,EAAA,MAAM,aAAa,SAAA,KAAc,UAAA;AAEjC,EAAA,uBACE,GAAA;AAAA,IAACC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,yEAAA;AAAA,QACA,UAAA,GACI,EAAA;AAAA,UACE,gGAAA;AAAA,UACA,WAAW,8BAAA,GAAiC;AAAA,SAC9C,GACA,EAAA;AAAA,UACE,8EAAA;AAAA,UACA,WAAW,8BAAA,GAAiC;AAAA,SAC9C;AAAA,QACJ,iGAAA;AAAA,QACA,kEAAA;AAAA,QACA,mEAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA,UAAA,oBACC,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,EAAA;AAAA,YACT,qEAAA;AAAA,YACA,0EAAA;AAAA,YACA,2BAAA;AAAA,YACA,UAAA,GACK,QAAA,GAAW,SAAA,GAAY,SAAA,GACvB,WAAW,SAAA,GAAY;AAAA,WAC9B;AAAA,UAEA,QAAA,kBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAK,eAAA;AAAA,cACL,IAAA,EAAM,WAAW,EAAA,GAAK,EAAA;AAAA,cACtB,SAAA,EAAW,EAAA;AAAA,gBACT,6BAAA;AAAA,gBACA,UAAA,IAAc;AAAA;AAChB;AAAA;AACF;AAAA;AACF;AAAA,GAEJ;AAEJ","file":"resizable.js","sourcesContent":["import {\n Panel,\n Group as PanelGroup,\n Separator as PanelResizeHandle,\n} from \"react-resizable-panels\";\nimport { createContext, useContext, type ComponentProps } from \"react\";\nimport { cn } from \"../lib/utils\";\nimport { useBreakpoint } from \"../lib/use-breakpoint\";\nimport { Icon } from \"../lib/icons\";\n\ntype PanelGroupProps = ComponentProps<typeof PanelGroup>;\n\ntype Direction = \"horizontal\" | \"vertical\";\nconst DirectionCtx = createContext<Direction>(\"horizontal\");\nconst MobileCtx = createContext(false);\n\nexport interface ResizablePanelGroupProps\n extends Omit<PanelGroupProps, \"className\" | \"orientation\"> {\n direction?: Direction;\n stackOnMobile?: boolean;\n className?: string;\n /** Map of panel id → percentage (0–100). Must be an object, never an array. Panels need matching id props. */\n defaultLayout?: { [panelId: string]: number };\n /** Called after resize ends. Receives { [panelId]: number }, not number[]. */\n onLayoutChanged?: (layout: { [panelId: string]: number }) => void;\n}\n\nexport function ResizablePanelGroup({\n className,\n direction = \"horizontal\",\n stackOnMobile = true,\n ...props\n}: ResizablePanelGroupProps) {\n const isMobile = useBreakpoint(\"sm\");\n const shouldStack = stackOnMobile && isMobile && direction === \"horizontal\";\n const effectiveDirection = shouldStack ? \"vertical\" : direction;\n\n return (\n <DirectionCtx.Provider value={effectiveDirection}>\n <MobileCtx.Provider value={isMobile}>\n <PanelGroup\n className={cn(\n \"flex h-full w-full\",\n effectiveDirection === \"vertical\" && \"flex-col\",\n className,\n )}\n orientation={effectiveDirection}\n {...props}\n />\n </MobileCtx.Provider>\n </DirectionCtx.Provider>\n );\n}\n\ntype PanelProps = ComponentProps<typeof Panel>;\n\nexport interface ResizablePanelProps extends Omit<PanelProps, \"className\"> {\n className?: string;\n id?: string;\n /** number = px. \"30%\" or \"30\" = percent. \"28rem\" / \"400px\" also valid. */\n defaultSize?: number | string;\n minSize?: number | string;\n maxSize?: number | string;\n collapsible?: boolean;\n}\n\nexport function ResizablePanel({ className, ...props }: ResizablePanelProps) {\n return <Panel className={cn(\"\", className)} {...props} />;\n}\n\ntype PanelResizeHandleProps = ComponentProps<typeof PanelResizeHandle>;\n\nexport interface ResizableHandleProps\n extends Omit<PanelResizeHandleProps, \"className\"> {\n withHandle?: boolean;\n className?: string;\n}\n\nexport function ResizableHandle({\n withHandle,\n className,\n ...props\n}: ResizableHandleProps) {\n const direction = useContext(DirectionCtx);\n const isMobile = useContext(MobileCtx);\n const isVertical = direction === \"vertical\";\n\n return (\n <PanelResizeHandle\n className={cn(\n \"relative flex items-center justify-center bg-[var(--ds-border-default)]\",\n isVertical\n ? cn(\n \"h-[var(--ds-border-width)] w-full after:absolute after:left-0 after:right-0 after:content-['']\",\n isMobile ? \"after:-top-3 after:-bottom-3\" : \"after:-top-1 after:-bottom-1\"\n )\n : cn(\n \"w-[var(--ds-border-width)] after:absolute after:inset-y-0 after:content-['']\",\n isMobile ? \"after:-left-3 after:-right-3\" : \"after:-left-1 after:-right-1\"\n ),\n \"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--ds-input-focus-ring)]\",\n \"[&[data-resize-handle-state=drag]]:bg-[var(--ds-accent-primary)]\",\n \"[&[data-resize-handle-state=hover]]:bg-[var(--ds-accent-primary)]\",\n className,\n )}\n {...props}\n >\n {withHandle && (\n <div\n className={cn(\n \"z-10 flex items-center justify-center rounded-[var(--ds-radius-sm)]\",\n \"border-[length:var(--ds-border-width)] border-[var(--ds-border-default)]\",\n \"bg-[var(--ds-bg-surface)]\",\n isVertical\n ? (isMobile ? \"h-4 w-8\" : \"h-3 w-4\")\n : (isMobile ? \"h-8 w-4\" : \"h-4 w-3\"),\n )}\n >\n <Icon\n name=\"grip-vertical\"\n size={isMobile ? 12 : 10}\n className={cn(\n \"text-[var(--ds-text-muted)]\",\n isVertical && \"rotate-90\",\n )}\n />\n </div>\n )}\n </PanelResizeHandle>\n );\n}\n"]}
|