@burdenoff/microfe-workspaces 2026.510.50

package/dist/components/CreateWorkspaceDialog.js

@@ -0,0 +1,172 @@
+import { useWorkspacesStore as e } from "../store/workspacesStore.js";
+import { useCreateWorkspace as t } from "../hooks/useWorkspaceMutations.js";
+import { useMyOrganizations as n, useMyTenants as r } from "../hooks/useTenants.js";
+import { generateSlug as i } from "../utils/slug.js";
+import { useEffect as a, useMemo as o } from "react";
+import { AlertCircle as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Button as u, Dialog as d, DialogContent as f, DialogFooter as p, DialogHeader as m, DialogTitle as h, Skeleton as g } from "@burdenoff/fe-libs/ui";
+import { FormControl as _, FormDescription as v, FormField as y, FormItem as b, FormLabel as x, FormMessage as S, FormProvider as C, Input as w, Select as T, SelectContent as E, SelectItem as D, SelectTrigger as O, SelectValue as k, useForm as A, z as j } from "@burdenoff/fe-libs/form";
+//#region src/components/CreateWorkspaceDialog.tsx
+var M = j.object({
+	name: j.string().min(2, "Name must be at least 2 characters").max(100),
+	slug: j.string().min(2, "Slug must be at least 2 characters").max(50).regex(/^[a-z0-9-]+$/, "Slug can only contain lowercase letters, numbers, and hyphens"),
+	tenantId: j.string().min(1, "Please select a tenant"),
+	organizationId: j.string().min(1, "Please select an organization"),
+	type: j.enum(["TEAM", "PERSONAL"]).optional()
+});
+function N() {
+	let { isCreateWorkspaceDialogOpen: j, closeCreateWorkspaceDialog: N } = e(), { mutate: P, isPending: F } = t(), { data: I, isLoading: L, error: R } = r(), { data: z, isLoading: B, error: V } = n(), H = I?.items ?? [], U = z?.items ?? [], W = A({
+		schema: M,
+		defaultValues: {
+			name: "",
+			slug: "",
+			tenantId: "",
+			organizationId: "",
+			type: "TEAM"
+		}
+	}), G = W.watch("tenantId"), K = W.watch("name"), q = o(() => G ? U.filter((e) => e.tenantId === G) : [], [G, U]);
+	a(() => {
+		W.setValue("slug", K ? i(K) : "");
+	}, [K, W]), a(() => {
+		W.setValue("organizationId", "");
+	}, [G, W]);
+	let J = (e) => {
+		P({
+			name: e.name,
+			slug: e.slug,
+			tenantId: e.tenantId,
+			organizationId: e.organizationId,
+			type: e.type
+		}, { onSuccess: () => {
+			N(), W.reset();
+		} });
+	};
+	return /* @__PURE__ */ c(d, {
+		open: j,
+		onOpenChange: N,
+		children: /* @__PURE__ */ l(f, {
+			className: "sm:max-w-[500px]",
+			children: [/* @__PURE__ */ c(m, { children: /* @__PURE__ */ c(h, { children: "Create Workspace" }) }), /* @__PURE__ */ c(C, {
+				...W,
+				children: /* @__PURE__ */ l("form", {
+					onSubmit: W.handleSubmit(J),
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ c(y, {
+							control: W.control,
+							name: "name",
+							render: ({ field: e }) => /* @__PURE__ */ l(b, { children: [
+								/* @__PURE__ */ c(x, { children: "Workspace Name *" }),
+								/* @__PURE__ */ c(_, { children: /* @__PURE__ */ c(w, {
+									placeholder: "My Workspace",
+									...e
+								}) }),
+								/* @__PURE__ */ c(v, { children: "A descriptive name for your workspace" }),
+								/* @__PURE__ */ c(S, {})
+							] })
+						}),
+						/* @__PURE__ */ c(y, {
+							control: W.control,
+							name: "slug",
+							render: ({ field: e }) => /* @__PURE__ */ l(b, { children: [
+								/* @__PURE__ */ c(x, { children: "Slug *" }),
+								/* @__PURE__ */ c(_, { children: /* @__PURE__ */ c(w, {
+									placeholder: "my-workspace",
+									...e
+								}) }),
+								/* @__PURE__ */ c(v, { children: "URL-friendly identifier (auto-generated)" }),
+								/* @__PURE__ */ c(S, {})
+							] })
+						}),
+						/* @__PURE__ */ c(y, {
+							control: W.control,
+							name: "tenantId",
+							render: ({ field: e }) => /* @__PURE__ */ l(b, { children: [
+								/* @__PURE__ */ c(x, { children: "Tenant *" }),
+								L ? /* @__PURE__ */ c(g, { className: "h-10 w-full" }) : R ? /* @__PURE__ */ l("div", {
+									className: "flex items-center gap-2 text-destructive text-sm",
+									children: [/* @__PURE__ */ c(s, { size: 16 }), "Failed to load tenants"]
+								}) : H.length === 0 ? /* @__PURE__ */ c("div", {
+									className: "text-muted-foreground text-sm",
+									children: "No tenants available. Contact your administrator."
+								}) : /* @__PURE__ */ l(T, {
+									onValueChange: e.onChange,
+									value: e.value,
+									children: [/* @__PURE__ */ c(_, { children: /* @__PURE__ */ c(O, { children: /* @__PURE__ */ c(k, { placeholder: "Select a tenant" }) }) }), /* @__PURE__ */ c(E, { children: H.map((e) => /* @__PURE__ */ c(D, {
+										value: e.id,
+										children: e.name
+									}, e.id)) })]
+								}),
+								/* @__PURE__ */ c(v, { children: "Select which tenant this workspace belongs to" }),
+								/* @__PURE__ */ c(S, {})
+							] })
+						}),
+						/* @__PURE__ */ c(y, {
+							control: W.control,
+							name: "organizationId",
+							render: ({ field: e }) => /* @__PURE__ */ l(b, { children: [
+								/* @__PURE__ */ c(x, { children: "Organization *" }),
+								B ? /* @__PURE__ */ c(g, { className: "h-10 w-full" }) : V ? /* @__PURE__ */ l("div", {
+									className: "flex items-center gap-2 text-destructive text-sm",
+									children: [/* @__PURE__ */ c(s, { size: 16 }), "Failed to load organizations"]
+								}) : G ? q.length === 0 ? /* @__PURE__ */ c("div", {
+									className: "text-muted-foreground text-sm",
+									children: "No organizations found for this tenant"
+								}) : /* @__PURE__ */ l(T, {
+									onValueChange: e.onChange,
+									value: e.value,
+									disabled: !G,
+									children: [/* @__PURE__ */ c(_, { children: /* @__PURE__ */ c(O, { children: /* @__PURE__ */ c(k, { placeholder: "Select an organization" }) }) }), /* @__PURE__ */ c(E, { children: q.map((e) => /* @__PURE__ */ c(D, {
+										value: e.id,
+										children: e.name
+									}, e.id)) })]
+								}) : /* @__PURE__ */ c("div", {
+									className: "text-muted-foreground text-sm",
+									children: "Please select a tenant first"
+								}),
+								/* @__PURE__ */ c(v, { children: "Select which organization owns this workspace" }),
+								/* @__PURE__ */ c(S, {})
+							] })
+						}),
+						/* @__PURE__ */ c(y, {
+							control: W.control,
+							name: "type",
+							render: ({ field: e }) => /* @__PURE__ */ l(b, { children: [
+								/* @__PURE__ */ c(x, { children: "Workspace Type" }),
+								/* @__PURE__ */ l(T, {
+									onValueChange: e.onChange,
+									defaultValue: e.value,
+									children: [/* @__PURE__ */ c(_, { children: /* @__PURE__ */ c(O, { children: /* @__PURE__ */ c(k, { placeholder: "Select type" }) }) }), /* @__PURE__ */ l(E, { children: [/* @__PURE__ */ c(D, {
+										value: "TEAM",
+										children: "Team Workspace"
+									}), /* @__PURE__ */ c(D, {
+										value: "PERSONAL",
+										children: "Personal Workspace"
+									})] })]
+								}),
+								/* @__PURE__ */ c(v, { children: "Choose between a collaborative workspace or a personal one" }),
+								/* @__PURE__ */ c(S, {})
+							] })
+						}),
+						/* @__PURE__ */ l(p, { children: [/* @__PURE__ */ c(u, {
+							type: "button",
+							variant: "outline",
+							onClick: N,
+							disabled: F,
+							children: "Cancel"
+						}), /* @__PURE__ */ c(u, {
+							type: "submit",
+							disabled: F || L || B,
+							children: F ? "Creating..." : "Create Workspace"
+						})] })
+					]
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { N as CreateWorkspaceDialog };
+
+//# sourceMappingURL=CreateWorkspaceDialog.js.map

package/dist/components/CreateWorkspaceDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateWorkspaceDialog.js","names":[],"sources":["../../src/components/CreateWorkspaceDialog.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { AlertCircle } from 'lucide-react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogFooter,\n  Button,\n  Skeleton,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormMessage,\n  FormDescription,\n  Input,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n  useForm,\n  FormProvider,\n  z,\n} from '@burdenoff/fe-libs/form';\nimport { useWorkspacesStore } from '../store/workspacesStore';\nimport { useCreateWorkspace } from '../hooks/useWorkspaceMutations';\nimport { useMyTenants, useMyOrganizations } from '../hooks/useTenants';\nimport { generateSlug } from '../utils/slug';\n\nconst createWorkspaceSchema = z.object({\n  name: z.string().min(2, 'Name must be at least 2 characters').max(100),\n  slug: z\n    .string()\n    .min(2, 'Slug must be at least 2 characters')\n    .max(50)\n    .regex(/^[a-z0-9-]+$/, 'Slug can only contain lowercase letters, numbers, and hyphens'),\n  tenantId: z.string().min(1, 'Please select a tenant'),\n  organizationId: z.string().min(1, 'Please select an organization'),\n  type: z.enum(['TEAM', 'PERSONAL']).optional(),\n});\n\ntype CreateWorkspaceFormData = z.infer<typeof createWorkspaceSchema>;\n\nexport function CreateWorkspaceDialog() {\n  const { isCreateWorkspaceDialogOpen, closeCreateWorkspaceDialog } = useWorkspacesStore();\n  const { mutate: createWorkspace, isPending } = useCreateWorkspace();\n  const { data: tenantsData, isLoading: isLoadingTenants, error: tenantsError } = useMyTenants();\n  const {\n    data: organizationsData,\n    isLoading: isLoadingOrganizations,\n    error: organizationsError,\n  } = useMyOrganizations();\n\n  const tenants = tenantsData?.items ?? [];\n  const allOrganizations = organizationsData?.items ?? [];\n\n  const form = useForm<CreateWorkspaceFormData>({\n    schema: createWorkspaceSchema,\n    defaultValues: {\n      name: '',\n      slug: '',\n      tenantId: '',\n      organizationId: '',\n      type: 'TEAM',\n    },\n  });\n\n  const selectedTenantId = form.watch('tenantId');\n  const workspaceName = form.watch('name');\n\n  // Filter organizations by selected tenant\n  const filteredOrganizations = useMemo(() => {\n    if (!selectedTenantId) return [];\n    return allOrganizations.filter((org) => org.tenantId === selectedTenantId);\n  }, [selectedTenantId, allOrganizations]);\n\n  // Auto-generate slug from name (clear when name is empty)\n  useEffect(() => {\n    form.setValue('slug', workspaceName ? generateSlug(workspaceName) : '');\n  }, [workspaceName, form]);\n\n  // Reset organizationId when tenant changes\n  useEffect(() => {\n    form.setValue('organizationId', '');\n  }, [selectedTenantId, form]);\n\n  const onSubmit = (data: CreateWorkspaceFormData) => {\n    createWorkspace(\n      {\n        name: data.name,\n        slug: data.slug,\n        tenantId: data.tenantId,\n        organizationId: data.organizationId,\n        type: data.type,\n      },\n      {\n        onSuccess: () => {\n          closeCreateWorkspaceDialog();\n          form.reset();\n        },\n      }\n    );\n  };\n\n  return (\n    <Dialog open={isCreateWorkspaceDialogOpen} onOpenChange={closeCreateWorkspaceDialog}>\n      <DialogContent className=\"sm:max-w-[500px]\">\n        <DialogHeader>\n          <DialogTitle>Create Workspace</DialogTitle>\n        </DialogHeader>\n\n        <FormProvider {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n            {/* Workspace Name */}\n            <FormField\n              control={form.control}\n              name=\"name\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Workspace Name *</FormLabel>\n                  <FormControl>\n                    <Input placeholder=\"My Workspace\" {...field} />\n                  </FormControl>\n                  <FormDescription>A descriptive name for your workspace</FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            {/* Slug */}\n            <FormField\n              control={form.control}\n              name=\"slug\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Slug *</FormLabel>\n                  <FormControl>\n                    <Input placeholder=\"my-workspace\" {...field} />\n                  </FormControl>\n                  <FormDescription>URL-friendly identifier (auto-generated)</FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            {/* Tenant Selection */}\n            <FormField\n              control={form.control}\n              name=\"tenantId\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Tenant *</FormLabel>\n                  {isLoadingTenants ? (\n                    <Skeleton className=\"h-10 w-full\" />\n                  ) : tenantsError ? (\n                    <div className=\"flex items-center gap-2 text-destructive text-sm\">\n                      <AlertCircle size={16} />\n                      Failed to load tenants\n                    </div>\n                  ) : tenants.length === 0 ? (\n                    <div className=\"text-muted-foreground text-sm\">\n                      No tenants available. Contact your administrator.\n                    </div>\n                  ) : (\n                    <Select onValueChange={field.onChange} value={field.value}>\n                      <FormControl>\n                        <SelectTrigger>\n                          <SelectValue placeholder=\"Select a tenant\" />\n                        </SelectTrigger>\n                      </FormControl>\n                      <SelectContent>\n                        {tenants.map((tenant) => (\n                          <SelectItem key={tenant.id} value={tenant.id}>\n                            {tenant.name}\n                          </SelectItem>\n                        ))}\n                      </SelectContent>\n                    </Select>\n                  )}\n                  <FormDescription>Select which tenant this workspace belongs to</FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            {/* Organization Selection */}\n            <FormField\n              control={form.control}\n              name=\"organizationId\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Organization *</FormLabel>\n                  {isLoadingOrganizations ? (\n                    <Skeleton className=\"h-10 w-full\" />\n                  ) : organizationsError ? (\n                    <div className=\"flex items-center gap-2 text-destructive text-sm\">\n                      <AlertCircle size={16} />\n                      Failed to load organizations\n                    </div>\n                  ) : !selectedTenantId ? (\n                    <div className=\"text-muted-foreground text-sm\">\n                      Please select a tenant first\n                    </div>\n                  ) : filteredOrganizations.length === 0 ? (\n                    <div className=\"text-muted-foreground text-sm\">\n                      No organizations found for this tenant\n                    </div>\n                  ) : (\n                    <Select\n                      onValueChange={field.onChange}\n                      value={field.value}\n                      disabled={!selectedTenantId}\n                    >\n                      <FormControl>\n                        <SelectTrigger>\n                          <SelectValue placeholder=\"Select an organization\" />\n                        </SelectTrigger>\n                      </FormControl>\n                      <SelectContent>\n                        {filteredOrganizations.map((org) => (\n                          <SelectItem key={org.id} value={org.id}>\n                            {org.name}\n                          </SelectItem>\n                        ))}\n                      </SelectContent>\n                    </Select>\n                  )}\n                  <FormDescription>Select which organization owns this workspace</FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            {/* Workspace Type */}\n            <FormField\n              control={form.control}\n              name=\"type\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Workspace Type</FormLabel>\n                  <Select onValueChange={field.onChange} defaultValue={field.value}>\n                    <FormControl>\n                      <SelectTrigger>\n                        <SelectValue placeholder=\"Select type\" />\n                      </SelectTrigger>\n                    </FormControl>\n                    <SelectContent>\n                      <SelectItem value=\"TEAM\">Team Workspace</SelectItem>\n                      <SelectItem value=\"PERSONAL\">Personal Workspace</SelectItem>\n                    </SelectContent>\n                  </Select>\n                  <FormDescription>\n                    Choose between a collaborative workspace or a personal one\n                  </FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <DialogFooter>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                onClick={closeCreateWorkspaceDialog}\n                disabled={isPending}\n              >\n                Cancel\n              </Button>\n              <Button\n                type=\"submit\"\n                disabled={isPending || isLoadingTenants || isLoadingOrganizations}\n              >\n                {isPending ? 'Creating...' : 'Create Workspace'}\n              </Button>\n            </DialogFooter>\n          </form>\n        </FormProvider>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

package/dist/components/InviteMemberDialog.d.ts

@@ -0,0 +1,7 @@
+interface InviteMemberDialogProps {
+    /** Workspace ID to invite the member to (from URL params) */
+    workspaceId?: string;
+}
+export declare function InviteMemberDialog({ workspaceId }: InviteMemberDialogProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=InviteMemberDialog.d.ts.map

package/dist/components/InviteMemberDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InviteMemberDialog.d.ts","sourceRoot":"","sources":["../../src/components/InviteMemberDialog.tsx"],"names":[],"mappings":"AAoCA,UAAU,uBAAuB;IAC/B,6DAA6D;IAC7D,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,WAAW,EAAE,EAAE,uBAAuB,2CAkL1E"}

package/dist/components/InviteMemberDialog.js

@@ -0,0 +1,148 @@
+import { useWorkspacesStore as e } from "../store/workspacesStore.js";
+import { useCreateInvitation as t } from "../hooks/useMemberMutations.js";
+import { useWorkspaceRoles as n } from "../hooks/useWorkspaceRoles.js";
+import { useState as r } from "react";
+import { AlertCircle as i } from "lucide-react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Badge as s, Button as c, Dialog as l, DialogContent as u, DialogDescription as d, DialogHeader as f, DialogTitle as p } from "@burdenoff/fe-libs/ui";
+import { FormControl as m, FormDescription as h, FormField as g, FormItem as _, FormLabel as v, FormMessage as y, FormProvider as b, Input as x, useForm as S, z as C } from "@burdenoff/fe-libs/form";
+//#region src/components/InviteMemberDialog.tsx
+var w = C.object({
+	email: C.string().email("Invalid email address"),
+	roleIds: C.array(C.string())
+});
+function T({ workspaceId: C }) {
+	let { isInviteMemberDialogOpen: T, closeInviteMemberDialog: E } = e(), { mutate: D, isPending: O } = t(C), { data: k = [], isLoading: A } = n(C), [j, M] = r(null), N = S({
+		schema: w,
+		defaultValues: {
+			email: "",
+			roleIds: []
+		}
+	}), P = (e) => {
+		if (M(null), !C) {
+			M("No workspace selected. Please select a workspace first.");
+			return;
+		}
+		D({
+			email: e.email,
+			roleIds: e.roleIds,
+			workspaceId: C
+		}, {
+			onSuccess: () => {
+				E(), N.reset(), M(null);
+			},
+			onError: (e) => {
+				let t = e instanceof Error ? e.message : "Failed to send invitation";
+				console.error("Failed to create invitation:", e), M(t);
+			}
+		});
+	}, F = (e) => {
+		e || (E(), N.reset(), M(null));
+	};
+	return /* @__PURE__ */ a(l, {
+		open: T,
+		onOpenChange: F,
+		children: /* @__PURE__ */ o(u, {
+			className: "sm:max-w-[500px]",
+			children: [/* @__PURE__ */ o(f, { children: [/* @__PURE__ */ a(p, { children: "Invite Member" }), /* @__PURE__ */ a(d, { children: "Invite a new member to this workspace by email. They'll receive an invitation link to join." })] }), /* @__PURE__ */ a(b, {
+				...N,
+				children: /* @__PURE__ */ o("form", {
+					onSubmit: N.handleSubmit(P),
+					className: "space-y-4",
+					children: [
+						j && /* @__PURE__ */ o("div", {
+							className: "flex items-center gap-2 p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md",
+							children: [/* @__PURE__ */ a(i, { className: "h-4 w-4 flex-shrink-0" }), /* @__PURE__ */ a("span", { children: j })]
+						}),
+						/* @__PURE__ */ a(g, {
+							control: N.control,
+							name: "email",
+							render: ({ field: e }) => /* @__PURE__ */ o(_, { children: [
+								/* @__PURE__ */ a(v, { children: "Email Address *" }),
+								/* @__PURE__ */ a(m, { children: /* @__PURE__ */ a(x, {
+									type: "email",
+									placeholder: "member@example.com",
+									...e,
+									disabled: O,
+									onChange: (t) => {
+										e.onChange(t), M(null);
+									}
+								}) }),
+								/* @__PURE__ */ a(h, { children: "Enter the email address of the person you want to invite" }),
+								/* @__PURE__ */ a(y, {})
+							] })
+						}),
+						/* @__PURE__ */ a(g, {
+							control: N.control,
+							name: "roleIds",
+							render: ({ field: e }) => /* @__PURE__ */ o(_, { children: [
+								/* @__PURE__ */ o("div", {
+									className: "flex items-center justify-between gap-2",
+									children: [/* @__PURE__ */ a(v, { children: "Roles (Optional)" }), e.value.length > 0 && /* @__PURE__ */ o(s, {
+										variant: "secondary",
+										children: [e.value.length, " selected"]
+									})]
+								}),
+								/* @__PURE__ */ a(m, { children: /* @__PURE__ */ a("div", {
+									className: "grid grid-cols-1 gap-2 sm:grid-cols-2",
+									children: A ? /* @__PURE__ */ a("p", {
+										className: "text-sm text-muted-foreground",
+										children: "Loading roles…"
+									}) : k.length === 0 ? /* @__PURE__ */ a("p", {
+										className: "text-sm text-muted-foreground",
+										children: "No assignable roles were returned for this workspace."
+									}) : k.map((t) => {
+										let n = e.value.includes(t.id);
+										return /* @__PURE__ */ o("button", {
+											type: "button",
+											"aria-pressed": n,
+											disabled: O,
+											onClick: () => {
+												let r = n ? e.value.filter((e) => e !== t.id) : [...e.value, t.id];
+												e.onChange(r);
+											},
+											className: `rounded-md border p-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${n ? "border-primary bg-primary/10 text-foreground" : "border-border bg-background text-foreground hover:bg-accent"}`,
+											children: [/* @__PURE__ */ o("div", {
+												className: "flex items-center justify-between gap-2",
+												children: [/* @__PURE__ */ a("span", {
+													className: "font-medium",
+													children: t.name
+												}), t.isSystem && /* @__PURE__ */ a(s, {
+													variant: "outline",
+													children: "System"
+												})]
+											}), t.description && /* @__PURE__ */ a("p", {
+												className: "mt-1 text-xs text-muted-foreground",
+												children: t.description
+											})]
+										}, t.id);
+									})
+								}) }),
+								/* @__PURE__ */ a(h, { children: "Choose the roles to assign once the invitation is accepted." }),
+								/* @__PURE__ */ a(y, {})
+							] })
+						}),
+						/* @__PURE__ */ o("div", {
+							className: "flex justify-end gap-3 pt-4",
+							children: [/* @__PURE__ */ a(c, {
+								type: "button",
+								variant: "outline",
+								onClick: () => F(!1),
+								disabled: O,
+								children: "Cancel"
+							}), /* @__PURE__ */ a(c, {
+								type: "submit",
+								disabled: O,
+								children: O ? "Sending..." : "Send Invitation"
+							})]
+						})
+					]
+				})
+			})]
+		})
+	});
+}
+//#endregion
+export { T as InviteMemberDialog };
+
+//# sourceMappingURL=InviteMemberDialog.js.map

package/dist/components/InviteMemberDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InviteMemberDialog.js","names":[],"sources":["../../src/components/InviteMemberDialog.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { AlertCircle } from 'lucide-react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  Button,\n  Badge,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  FormField,\n  FormItem,\n  FormLabel,\n  FormControl,\n  FormMessage,\n  FormDescription,\n  Input,\n  useForm,\n  FormProvider,\n  z,\n} from '@burdenoff/fe-libs/form';\nimport { useWorkspacesStore } from '../store/workspacesStore';\nimport { useCreateInvitation } from '../hooks/useMemberMutations';\nimport { useWorkspaceRoles } from '../hooks/useWorkspaceRoles';\n\nconst inviteMemberSchema = z.object({\n  email: z.string().email('Invalid email address'),\n  // Using a lambda default instead of `.default([])` to keep input type required\n  // (zod v4 widens defaulted inputs to `T | undefined`, which breaks useForm typing).\n  roleIds: z.array(z.string()),\n});\n\ntype InviteMemberFormData = z.infer<typeof inviteMemberSchema>;\n\ninterface InviteMemberDialogProps {\n  /** Workspace ID to invite the member to (from URL params) */\n  workspaceId?: string;\n}\n\nexport function InviteMemberDialog({ workspaceId }: InviteMemberDialogProps) {\n  const { isInviteMemberDialogOpen, closeInviteMemberDialog } = useWorkspacesStore();\n  const { mutate: createInvitation, isPending } = useCreateInvitation(workspaceId);\n  const { data: availableRoles = [], isLoading: isLoadingRoles } = useWorkspaceRoles(workspaceId);\n  const [error, setError] = useState<string | null>(null);\n\n  const form = useForm<InviteMemberFormData>({\n    schema: inviteMemberSchema,\n    defaultValues: {\n      email: '',\n      roleIds: [],\n    },\n  });\n\n  const onSubmit = (data: InviteMemberFormData) => {\n    setError(null);\n\n    if (!workspaceId) {\n      setError('No workspace selected. Please select a workspace first.');\n      return;\n    }\n\n    createInvitation(\n      {\n        email: data.email,\n        roleIds: data.roleIds,\n        workspaceId,\n      },\n      {\n        onSuccess: () => {\n          closeInviteMemberDialog();\n          form.reset();\n          setError(null);\n        },\n        onError: (err) => {\n          const errorMessage = err instanceof Error ? err.message : 'Failed to send invitation';\n          console.error('Failed to create invitation:', err);\n          setError(errorMessage);\n        },\n      }\n    );\n  };\n\n  const handleOpenChange = (open: boolean) => {\n    if (!open) {\n      closeInviteMemberDialog();\n      form.reset();\n      setError(null);\n    }\n  };\n\n  return (\n    <Dialog open={isInviteMemberDialogOpen} onOpenChange={handleOpenChange}>\n      <DialogContent className=\"sm:max-w-[500px]\">\n        <DialogHeader>\n          <DialogTitle>Invite Member</DialogTitle>\n          <DialogDescription>\n            Invite a new member to this workspace by email. They'll receive an invitation link to\n            join.\n          </DialogDescription>\n        </DialogHeader>\n\n        <FormProvider {...form}>\n          <form onSubmit={form.handleSubmit(onSubmit)} className=\"space-y-4\">\n            {error && (\n              <div className=\"flex items-center gap-2 p-3 text-sm text-destructive bg-destructive/10 border border-destructive/20 rounded-md\">\n                <AlertCircle className=\"h-4 w-4 flex-shrink-0\" />\n                <span>{error}</span>\n              </div>\n            )}\n\n            <FormField\n              control={form.control}\n              name=\"email\"\n              render={({ field }) => (\n                <FormItem>\n                  <FormLabel>Email Address *</FormLabel>\n                  <FormControl>\n                    <Input\n                      type=\"email\"\n                      placeholder=\"member@example.com\"\n                      {...field}\n                      disabled={isPending}\n                      onChange={(e) => {\n                        field.onChange(e);\n                        setError(null); // Clear error when user types\n                      }}\n                    />\n                  </FormControl>\n                  <FormDescription>\n                    Enter the email address of the person you want to invite\n                  </FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <FormField\n              control={form.control}\n              name=\"roleIds\"\n              render={({ field }) => (\n                <FormItem>\n                  <div className=\"flex items-center justify-between gap-2\">\n                    <FormLabel>Roles (Optional)</FormLabel>\n                    {field.value.length > 0 && (\n                      <Badge variant=\"secondary\">{field.value.length} selected</Badge>\n                    )}\n                  </div>\n                  <FormControl>\n                    <div className=\"grid grid-cols-1 gap-2 sm:grid-cols-2\">\n                      {isLoadingRoles ? (\n                        <p className=\"text-sm text-muted-foreground\">Loading roles…</p>\n                      ) : availableRoles.length === 0 ? (\n                        <p className=\"text-sm text-muted-foreground\">\n                          No assignable roles were returned for this workspace.\n                        </p>\n                      ) : (\n                        availableRoles.map((role) => {\n                          const isSelected = field.value.includes(role.id);\n                          return (\n                            <button\n                              key={role.id}\n                              type=\"button\"\n                              aria-pressed={isSelected}\n                              disabled={isPending}\n                              onClick={() => {\n                                const nextValue = isSelected\n                                  ? field.value.filter((id) => id !== role.id)\n                                  : [...field.value, role.id];\n                                field.onChange(nextValue);\n                              }}\n                              className={`rounded-md border p-3 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 ${\n                                isSelected\n                                  ? 'border-primary bg-primary/10 text-foreground'\n                                  : 'border-border bg-background text-foreground hover:bg-accent'\n                              }`}\n                            >\n                              <div className=\"flex items-center justify-between gap-2\">\n                                <span className=\"font-medium\">{role.name}</span>\n                                {role.isSystem && <Badge variant=\"outline\">System</Badge>}\n                              </div>\n                              {role.description && (\n                                <p className=\"mt-1 text-xs text-muted-foreground\">\n                                  {role.description}\n                                </p>\n                              )}\n                            </button>\n                          );\n                        })\n                      )}\n                    </div>\n                  </FormControl>\n                  <FormDescription>\n                    Choose the roles to assign once the invitation is accepted.\n                  </FormDescription>\n                  <FormMessage />\n                </FormItem>\n              )}\n            />\n\n            <div className=\"flex justify-end gap-3 pt-4\">\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                onClick={() => handleOpenChange(false)}\n                disabled={isPending}\n              >\n                Cancel\n              </Button>\n              <Button type=\"submit\" disabled={isPending}>\n                {isPending ? 'Sending...' : 'Send Invitation'}\n              </Button>\n            </div>\n          </form>\n        </FormProvider>\n      </DialogContent>\n    </Dialog>\n  );\n}\n"],"mappings":"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"}

package/dist/components/MemberListItem.d.ts

@@ -0,0 +1,11 @@
+import { WorkspaceMember } from '../types';
+
+export interface MemberListItemProps {
+    member: WorkspaceMember;
+    onUpdateRoles?: (memberId: string, roleIds: string[]) => void;
+    selected?: boolean;
+    onToggleSelect?: (checked: boolean) => void;
+    canRemove?: boolean;
+}
+export declare function MemberListItem({ member, selected, onToggleSelect, canRemove, }: MemberListItemProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MemberListItem.d.ts.map

package/dist/components/MemberListItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemberListItem.d.ts","sourceRoot":"","sources":["../../src/components/MemberListItem.tsx"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAmBhD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,eAAe,CAAC;IACxB,aAAa,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,cAAc,CAAC,EAC7B,MAAM,EACN,QAAgB,EAChB,cAAc,EACd,SAAiB,GAClB,EAAE,mBAAmB,2CAwHrB"}

package/dist/components/MemberListItem.js

@@ -0,0 +1,118 @@
+import { nativeImpact as e, nativeNotify as t } from "../utils/nativeBridge.js";
+import { useRemoveWorkspaceMember as n } from "../hooks/useMemberMutations.js";
+import { formatRelativeTime as r } from "../utils/formatters.js";
+import { useState as i } from "react";
+import { MoreHorizontal as a, UserMinus as o } from "lucide-react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { AlertDialog as u, AlertDialogAction as d, AlertDialogCancel as f, AlertDialogContent as p, AlertDialogDescription as m, AlertDialogFooter as h, AlertDialogHeader as g, AlertDialogTitle as _, Badge as v, Button as y, Card as b, CardContent as x, DropdownMenu as S, DropdownMenuContent as C, DropdownMenuTrigger as w } from "@burdenoff/fe-libs/ui";
+//#region src/components/MemberListItem.tsx
+function T(e, t) {
+	for (let n of t) {
+		let t = e?.[n];
+		if (typeof t == "string" && t.trim()) return t;
+	}
+	return null;
+}
+function E(e) {
+	return e.split(/\s+|@/).map((e) => e.trim()).filter(Boolean).slice(0, 2).map((e) => e[0]?.toUpperCase() ?? "").join("") || "U";
+}
+function D({ member: D, selected: O = !1, onToggleSelect: k, canRemove: A = !1 }) {
+	let [j, M] = i(!1), { mutate: N, isPending: P } = n(D.workspaceId), F = D.context?.metadata, I = T(F, [
+		"displayName",
+		"name",
+		"email"
+	]) ?? `User ${D.userId}`, L = T(F, ["avatarUrl", "avatar"]);
+	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(b, {
+		className: `hover:bg-accent/5 transition-all duration-200 ${O ? "ring-2 ring-primary/25 border-primary/50" : ""}`,
+		children: /* @__PURE__ */ c(x, {
+			className: "p-4",
+			children: /* @__PURE__ */ l("div", {
+				className: "flex items-center justify-between gap-4",
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex items-center gap-3 flex-1 min-w-0",
+					children: [
+						k && /* @__PURE__ */ c("input", {
+							type: "checkbox",
+							checked: O,
+							onChange: (e) => k(e.target.checked),
+							className: "h-4 w-4 rounded border-border text-primary",
+							"aria-label": `Select member ${D.userId}`
+						}),
+						/* @__PURE__ */ c("div", {
+							className: "w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 transition-colors",
+							children: L ? /* @__PURE__ */ c("img", {
+								src: L,
+								alt: I,
+								className: "h-full w-full rounded-full object-cover"
+							}) : /* @__PURE__ */ c("span", {
+								className: "text-sm font-semibold text-primary",
+								children: E(I)
+							})
+						}),
+						/* @__PURE__ */ l("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ l("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ c("p", {
+									className: "font-medium text-sm text-primary truncate",
+									children: I
+								}), /* @__PURE__ */ c(v, {
+									variant: "secondary",
+									className: "text-xs",
+									children: "Workspace member"
+								})]
+							}), /* @__PURE__ */ l("p", {
+								className: "text-xs text-muted-foreground",
+								children: ["Joined ", r(D.createdAt)]
+							})]
+						})
+					]
+				}), A && /* @__PURE__ */ l(S, { children: [/* @__PURE__ */ c(w, {
+					asChild: !0,
+					children: /* @__PURE__ */ l(y, {
+						variant: "ghost",
+						size: "icon",
+						className: "h-8 w-8 flex-shrink-0",
+						children: [/* @__PURE__ */ c(a, { className: "h-4 w-4" }), /* @__PURE__ */ c("span", {
+							className: "sr-only",
+							children: "Open member actions"
+						})]
+					})
+				}), /* @__PURE__ */ c(C, {
+					align: "end",
+					children: /* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => M(!0),
+						className: "flex w-full items-center rounded-sm px-2 py-1.5 text-sm text-destructive outline-none transition-colors hover:bg-accent hover:text-destructive focus:bg-accent focus:text-destructive",
+						children: [/* @__PURE__ */ c(o, { className: "mr-2 h-4 w-4" }), "Remove Member"]
+					})
+				})] })]
+			})
+		})
+	}), /* @__PURE__ */ c(u, {
+		open: j,
+		onOpenChange: M,
+		children: /* @__PURE__ */ l(p, { children: [/* @__PURE__ */ l(g, { children: [/* @__PURE__ */ c(_, { children: "Remove Member" }), /* @__PURE__ */ c(m, { children: "Are you sure you want to remove this member from the workspace? This action cannot be undone." })] }), /* @__PURE__ */ l(h, { children: [/* @__PURE__ */ c(f, {
+			disabled: P,
+			children: "Cancel"
+		}), /* @__PURE__ */ c(d, {
+			onClick: () => {
+				e("medium"), N(D.id, {
+					onSuccess: () => {
+						t("success"), M(!1);
+					},
+					onError: () => {
+						t("error");
+					}
+				});
+			},
+			disabled: P,
+			className: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+			children: P ? "Removing..." : "Remove Member"
+		})] })] })
+	})] });
+}
+//#endregion
+export { D as MemberListItem };
+
+//# sourceMappingURL=MemberListItem.js.map

package/dist/components/MemberListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MemberListItem.js","names":[],"sources":["../../src/components/MemberListItem.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  Card,\n  CardContent,\n  Button,\n  Badge,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuTrigger,\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n} from '@burdenoff/fe-libs/ui';\nimport { MoreHorizontal, UserMinus } from 'lucide-react';\nimport { useRemoveWorkspaceMember } from '../hooks/useMemberMutations';\nimport { nativeImpact, nativeNotify } from '../utils/nativeBridge';\nimport { formatRelativeTime } from '../utils/formatters';\nimport type { WorkspaceMember } from '../types';\n\nfunction getMetadataString(metadata: Record<string, unknown> | undefined, keys: string[]) {\n  for (const key of keys) {\n    const value = metadata?.[key];\n    if (typeof value === 'string' && value.trim()) return value;\n  }\n  return null;\n}\n\nfunction getInitials(value: string) {\n  const parts = value\n    .split(/\\s+|@/)\n    .map((part) => part.trim())\n    .filter(Boolean);\n  const initials = parts.slice(0, 2).map((part) => part[0]?.toUpperCase() ?? '');\n  return initials.join('') || 'U';\n}\n\nexport interface MemberListItemProps {\n  member: WorkspaceMember;\n  onUpdateRoles?: (memberId: string, roleIds: string[]) => void;\n  selected?: boolean;\n  onToggleSelect?: (checked: boolean) => void;\n  canRemove?: boolean;\n}\n\nexport function MemberListItem({\n  member,\n  selected = false,\n  onToggleSelect,\n  canRemove = false,\n}: MemberListItemProps) {\n  const [showRemoveDialog, setShowRemoveDialog] = useState(false);\n  const { mutate: removeMember, isPending: isRemoving } = useRemoveWorkspaceMember(\n    member.workspaceId\n  );\n  const metadata = member.context?.metadata;\n  const displayName =\n    getMetadataString(metadata, ['displayName', 'name', 'email']) ?? `User ${member.userId}`;\n  const avatarUrl = getMetadataString(metadata, ['avatarUrl', 'avatar']);\n\n  const handleRemove = () => {\n    void nativeImpact('medium');\n    removeMember(member.id, {\n      onSuccess: () => {\n        void nativeNotify('success');\n        setShowRemoveDialog(false);\n      },\n      onError: () => {\n        void nativeNotify('error');\n      },\n    });\n  };\n\n  return (\n    <>\n      <Card\n        className={`hover:bg-accent/5 transition-all duration-200 ${\n          selected ? 'ring-2 ring-primary/25 border-primary/50' : ''\n        }`}\n      >\n        <CardContent className=\"p-4\">\n          <div className=\"flex items-center justify-between gap-4\">\n            {/* Member Info */}\n            <div className=\"flex items-center gap-3 flex-1 min-w-0\">\n              {onToggleSelect && (\n                <input\n                  type=\"checkbox\"\n                  checked={selected}\n                  onChange={(event) => onToggleSelect(event.target.checked)}\n                  className=\"h-4 w-4 rounded border-border text-primary\"\n                  aria-label={`Select member ${member.userId}`}\n                />\n              )}\n              <div className=\"w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center flex-shrink-0 transition-colors\">\n                {avatarUrl ? (\n                  <img\n                    src={avatarUrl}\n                    alt={displayName}\n                    className=\"h-full w-full rounded-full object-cover\"\n                  />\n                ) : (\n                  <span className=\"text-sm font-semibold text-primary\">\n                    {getInitials(displayName)}\n                  </span>\n                )}\n              </div>\n\n              {/* Member Details */}\n              <div className=\"flex-1 min-w-0\">\n                <div className=\"flex items-center gap-2\">\n                  <p className=\"font-medium text-sm text-primary truncate\">{displayName}</p>\n                  <Badge variant=\"secondary\" className=\"text-xs\">\n                    Workspace member\n                  </Badge>\n                </div>\n                <p className=\"text-xs text-muted-foreground\">\n                  Joined {formatRelativeTime(member.createdAt)}\n                </p>\n              </div>\n            </div>\n\n            {/* Actions */}\n            {canRemove && (\n              <DropdownMenu>\n                <DropdownMenuTrigger asChild>\n                  <Button variant=\"ghost\" size=\"icon\" className=\"h-8 w-8 flex-shrink-0\">\n                    <MoreHorizontal className=\"h-4 w-4\" />\n                    <span className=\"sr-only\">Open member actions</span>\n                  </Button>\n                </DropdownMenuTrigger>\n                <DropdownMenuContent align=\"end\">\n                  <button\n                    type=\"button\"\n                    onClick={() => setShowRemoveDialog(true)}\n                    className=\"flex w-full items-center rounded-sm px-2 py-1.5 text-sm text-destructive outline-none transition-colors hover:bg-accent hover:text-destructive focus:bg-accent focus:text-destructive\"\n                  >\n                    <UserMinus className=\"mr-2 h-4 w-4\" />\n                    Remove Member\n                  </button>\n                </DropdownMenuContent>\n              </DropdownMenu>\n            )}\n          </div>\n        </CardContent>\n      </Card>\n\n      {/* Remove Confirmation Dialog */}\n      <AlertDialog open={showRemoveDialog} onOpenChange={setShowRemoveDialog}>\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Remove Member</AlertDialogTitle>\n            <AlertDialogDescription>\n              Are you sure you want to remove this member from the workspace? This action cannot be\n              undone.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel disabled={isRemoving}>Cancel</AlertDialogCancel>\n            <AlertDialogAction\n              onClick={handleRemove}\n              disabled={isRemoving}\n              className=\"bg-destructive text-destructive-foreground hover:bg-destructive/90\"\n            >\n              {isRemoving ? 'Removing...' : 'Remove Member'}\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </>\n  );\n}\n"],"mappings":";;;;;;;;AAwBA,SAAS,EAAkB,GAA+C,GAAgB;AACxF,MAAK,IAAM,KAAO,GAAM;EACtB,IAAM,IAAQ,IAAW;AACzB,MAAI,OAAO,KAAU,YAAY,EAAM,MAAM,CAAE,QAAO;;AAExD,QAAO;;AAGT,SAAS,EAAY,GAAe;AAMlC,QALc,EACX,MAAM,QAAQ,CACd,KAAK,MAAS,EAAK,MAAM,CAAC,CAC1B,OAAO,QAAQ,CACK,MAAM,GAAG,EAAE,CAAC,KAAK,MAAS,EAAK,IAAI,aAAa,IAAI,GAAG,CAC9D,KAAK,GAAG,IAAI;;AAW9B,SAAgB,EAAe,EAC7B,WACA,cAAW,IACX,mBACA,eAAY,MACU;CACtB,IAAM,CAAC,GAAkB,KAAuB,EAAS,GAAM,EACzD,EAAE,QAAQ,GAAc,WAAW,MAAe,EACtD,EAAO,YACR,EACK,IAAW,EAAO,SAAS,UAC3B,IACJ,EAAkB,GAAU;EAAC;EAAe;EAAQ;EAAQ,CAAC,IAAI,QAAQ,EAAO,UAC5E,IAAY,EAAkB,GAAU,CAAC,aAAa,SAAS,CAAC;AAetE,QACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,GAAD;EACE,WAAW,iDACT,IAAW,6CAA6C;YAG1D,kBAAC,GAAD;GAAa,WAAU;aACrB,kBAAC,OAAD;IAAK,WAAU;cAAf,CAEE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACG,KACC,kBAAC,SAAD;OACE,MAAK;OACL,SAAS;OACT,WAAW,MAAU,EAAe,EAAM,OAAO,QAAQ;OACzD,WAAU;OACV,cAAY,iBAAiB,EAAO;OACpC,CAAA;MAEJ,kBAAC,OAAD;OAAK,WAAU;iBACZ,IACC,kBAAC,OAAD;QACE,KAAK;QACL,KAAK;QACL,WAAU;QACV,CAAA,GAEF,kBAAC,QAAD;QAAM,WAAU;kBACb,EAAY,EAAY;QACpB,CAAA;OAEL,CAAA;MAGN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA6C;SAAgB,CAAA,EAC1E,kBAAC,GAAD;SAAO,SAAQ;SAAY,WAAU;mBAAU;SAEvC,CAAA,CACJ;WACN,kBAAC,KAAD;QAAG,WAAU;kBAAb,CAA6C,WACnC,EAAmB,EAAO,UAAU,CAC1C;UACA;;MACF;QAGL,KACC,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;KAAqB,SAAA;eACnB,kBAAC,GAAD;MAAQ,SAAQ;MAAQ,MAAK;MAAO,WAAU;gBAA9C,CACE,kBAAC,GAAD,EAAgB,WAAU,WAAY,CAAA,EACtC,kBAAC,QAAD;OAAM,WAAU;iBAAU;OAA0B,CAAA,CAC7C;;KACW,CAAA,EACtB,kBAAC,GAAD;KAAqB,OAAM;eACzB,kBAAC,UAAD;MACE,MAAK;MACL,eAAe,EAAoB,GAAK;MACxC,WAAU;gBAHZ,CAKE,kBAAC,GAAD,EAAW,WAAU,gBAAiB,CAAA,EAAA,gBAE/B;;KACW,CAAA,CACT,EAAA,CAAA,CAEb;;GACM,CAAA;EACT,CAAA,EAGP,kBAAC,GAAD;EAAa,MAAM;EAAkB,cAAc;YACjD,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UAAkB,iBAAgC,CAAA,EAClD,kBAAC,GAAD,EAAA,UAAwB,iGAGC,CAAA,CACP,EAAA,CAAA,EACpB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAmB,UAAU;aAAY;GAA0B,CAAA,EACnE,kBAAC,GAAD;GACE,eAnGe;AAEzB,IADK,EAAa,SAAS,EAC3B,EAAa,EAAO,IAAI;KACtB,iBAAiB;AAEf,MADK,EAAa,UAAU,EAC5B,EAAoB,GAAM;;KAE5B,eAAe;AACR,QAAa,QAAQ;;KAE7B,CAAC;;GA0FQ,UAAU;GACV,WAAU;aAET,IAAa,gBAAgB;GACZ,CAAA,CACF,EAAA,CAAA,CACD,EAAA,CAAA;EACT,CAAA,CACb,EAAA,CAAA"}

package/dist/components/ProjectCard.d.ts

@@ -0,0 +1,13 @@
+import { Project, ProjectTag } from '../types';
+
+interface ProjectCardProps {
+    project: Project;
+    selected?: boolean;
+    onToggleSelect?: (checked: boolean) => void;
+    onTagClick?: (tag: ProjectTag) => void;
+    canArchive?: boolean;
+    canDelete?: boolean;
+}
+export declare function ProjectCard({ project, selected, onToggleSelect, onTagClick, canArchive, canDelete, }: ProjectCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ProjectCard.d.ts.map

package/dist/components/ProjectCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectCard.d.ts","sourceRoot":"","sources":["../../src/components/ProjectCard.tsx"],"names":[],"mappings":"AAgBA,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAapD,UAAU,gBAAgB;IACxB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,UAAU,CAAC,EAAE,CAAC,GAAG,EAAE,UAAU,KAAK,IAAI,CAAC;IACvC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,QAAgB,EAChB,cAAc,EACd,UAAU,EACV,UAAkB,EAClB,SAAiB,GAClB,EAAE,gBAAgB,2CA4JlB"}