@igstack/app-catalog-frontend-core 0.0.1

package/dist/esm/ui/dropdown-menu.d.ts

@@ -0,0 +1,25 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as React from 'react';
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Group>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>): import("react/jsx-runtime").JSX.Element;
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, };

package/dist/esm/ui/dropdown-menu.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import "lucide-react";
+import { cn } from "../lib/utils.js";
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Separator,
+    {
+      "data-slot": "dropdown-menu-separator",
+      className: cn("bg-border -mx-1 my-1 h-px", className),
+      ...props
+    }
+  );
+}
+export {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger
+};
+//# sourceMappingURL=dropdown-menu.js.map

package/dist/esm/ui/dropdown-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-menu.js","sources":["../../../src/ui/dropdown-menu.tsx"],"sourcesContent":["import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu'\nimport { CheckIcon, ChevronRightIcon, CircleIcon } from 'lucide-react'\nimport * as React from 'react'\n\nimport { cn } from '~/lib/utils'\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        className={cn(\n          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',\n          className,\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: 'default' | 'destructive'\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CheckIcon className=\"size-4\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n        <DropdownMenuPrimitive.ItemIndicator>\n          <CircleIcon className=\"size-2 fill-current\" />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        'px-2 py-1.5 text-sm font-medium data-inset:pl-8',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn('bg-border -mx-1 my-1 h-px', className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        'text-muted-foreground ml-auto text-xs tracking-widest',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <ChevronRightIcon className=\"ml-auto size-4\" />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n}\n"],"names":[],"mappings":";;;;AAMA,SAAS,aAAa;AAAA,EACpB,GAAG;AACL,GAA4D;AAC1D,6BAAQ,sBAAsB,MAAtB,EAA2B,aAAU,iBAAiB,GAAG,OAAO;AAC1E;AAUA,SAAS,oBAAoB;AAAA,EAC3B,GAAG;AACL,GAA+D;AAC7D,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,aAAU;AAAA,MACT,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA,aAAa;AAAA,EACb,GAAG;AACL,GAA+D;AAC7D,SACE,oBAAC,sBAAsB,QAAtB,EACC,UAAA;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,aAAU;AAAA,MACV;AAAA,MACA,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ;AAUA,SAAS,iBAAiB;AAAA,EACxB;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAGG;AACD,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,aAAU;AAAA,MACV,cAAY;AAAA,MACZ,gBAAc;AAAA,MACd,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAmFA,SAAS,sBAAsB;AAAA,EAC7B;AAAA,EACA,GAAG;AACL,GAAiE;AAC/D,SACE;AAAA,IAAC,sBAAsB;AAAA,IAAtB;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,6BAA6B,SAAS;AAAA,MACnD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/ui/editable-list/EditableListField.d.ts

@@ -0,0 +1,2 @@
+import { EditableListFieldProps } from './types.js';
+export declare function EditableListField<T>({ value, onChange, columns, renderForm, createEmpty, getItemKey, label, addButtonLabel, emptyMessage, disabled, }: EditableListFieldProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/esm/ui/editable-list/EditableListField.js

@@ -0,0 +1,130 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { useReactTable, getCoreRowModel, flexRender } from "@tanstack/react-table";
+import { Pencil, Trash2, Plus } from "lucide-react";
+import { Button } from "../button.js";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "../table.js";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../dialog.js";
+import { Label } from "../label.js";
+function EditableListField({
+  value,
+  onChange,
+  columns,
+  renderForm,
+  createEmpty,
+  getItemKey,
+  label,
+  addButtonLabel = "Add",
+  emptyMessage = "No items",
+  disabled = false
+}) {
+  const [dialogState, setDialogState] = useState({
+    open: false
+  });
+  const columnsWithActions = [
+    ...columns,
+    {
+      id: "actions",
+      header: "",
+      cell: ({ row }) => /* @__PURE__ */ jsxs("div", { className: "flex justify-end gap-1", children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => setDialogState({
+              open: true,
+              mode: "edit",
+              index: row.index,
+              item: row.original
+            }),
+            disabled,
+            children: /* @__PURE__ */ jsx(Pencil, { className: "h-3 w-3" })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            onClick: () => {
+              const newValue = value.filter((_, i) => i !== row.index);
+              onChange(newValue);
+            },
+            disabled,
+            children: /* @__PURE__ */ jsx(Trash2, { className: "h-3 w-3 text-destructive" })
+          }
+        )
+      ] }),
+      size: 60
+    }
+  ];
+  const table = useReactTable({
+    data: value,
+    columns: columnsWithActions,
+    getCoreRowModel: getCoreRowModel(),
+    getRowId: (row, index) => getItemKey(row, index)
+  });
+  const handleSave = useCallback(
+    (item) => {
+      if (!dialogState.open) return;
+      if (dialogState.mode === "create") {
+        onChange([...value, item]);
+      } else {
+        const newValue = [...value];
+        newValue[dialogState.index] = item;
+        onChange(newValue);
+      }
+      setDialogState({ open: false });
+    },
+    [dialogState, value, onChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    label && /* @__PURE__ */ jsx(Label, { children: label }),
+    /* @__PURE__ */ jsx("div", { className: "border rounded-md", children: value.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-4 text-center text-sm text-muted-foreground", children: emptyMessage }) : /* @__PURE__ */ jsxs(Table, { children: [
+      /* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, { className: "h-8 text-xs", children: header.isPlaceholder ? null : flexRender(
+        header.column.columnDef.header,
+        header.getContext()
+      ) }, header.id)) }, headerGroup.id)) }),
+      /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, { className: "py-1 text-sm", children: flexRender(
+        cell.column.columnDef.cell,
+        cell.getContext()
+      ) }, cell.id)) }, row.id)) })
+    ] }) }),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "outline",
+        size: "sm",
+        onClick: () => setDialogState({ open: true, mode: "create", index: null }),
+        disabled,
+        children: [
+          /* @__PURE__ */ jsx(Plus, { className: "h-3 w-3 mr-1" }),
+          addButtonLabel
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Dialog,
+      {
+        open: dialogState.open,
+        onOpenChange: (open) => !open && setDialogState({ open: false }),
+        children: /* @__PURE__ */ jsxs(DialogContent, { children: [
+          /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialogState.open && dialogState.mode === "create" ? "Add Item" : "Edit Item" }) }),
+          dialogState.open && renderForm({
+            item: dialogState.mode === "edit" ? dialogState.item : createEmpty(),
+            onSave: handleSave,
+            onCancel: () => setDialogState({ open: false })
+          })
+        ] })
+      }
+    )
+  ] });
+}
+export {
+  EditableListField
+};
+//# sourceMappingURL=EditableListField.js.map

package/dist/esm/ui/editable-list/EditableListField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableListField.js","sources":["../../../../src/ui/editable-list/EditableListField.tsx"],"sourcesContent":["import { useCallback, useState } from 'react'\nimport {\n  flexRender,\n  getCoreRowModel,\n  useReactTable,\n} from '@tanstack/react-table'\nimport { Pencil, Plus, Trash2 } from 'lucide-react'\nimport { Button } from '~/ui/button'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '~/ui/table'\nimport { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/ui/dialog'\nimport { Label } from '~/ui/label'\nimport type { EditableListFieldProps } from './types'\n\ntype DialogState<T> =\n  | { open: false }\n  | { open: true; mode: 'create'; index: null }\n  | { open: true; mode: 'edit'; index: number; item: T }\n\nexport function EditableListField<T>({\n  value,\n  onChange,\n  columns,\n  renderForm,\n  createEmpty,\n  getItemKey,\n  label,\n  addButtonLabel = 'Add',\n  emptyMessage = 'No items',\n  disabled = false,\n}: EditableListFieldProps<T>) {\n  const [dialogState, setDialogState] = useState<DialogState<T>>({\n    open: false,\n  })\n\n  // Add action column\n  const columnsWithActions = [\n    ...columns,\n    {\n      id: 'actions',\n      header: '',\n      cell: ({ row }: { row: { original: T; index: number } }) => (\n        <div className=\"flex justify-end gap-1\">\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() =>\n              setDialogState({\n                open: true,\n                mode: 'edit',\n                index: row.index,\n                item: row.original,\n              })\n            }\n            disabled={disabled}\n          >\n            <Pencil className=\"h-3 w-3\" />\n          </Button>\n          <Button\n            type=\"button\"\n            variant=\"ghost\"\n            size=\"sm\"\n            onClick={() => {\n              const newValue = value.filter((_, i) => i !== row.index)\n              onChange(newValue)\n            }}\n            disabled={disabled}\n          >\n            <Trash2 className=\"h-3 w-3 text-destructive\" />\n          </Button>\n        </div>\n      ),\n      size: 60,\n    },\n  ]\n\n  const table = useReactTable({\n    data: value,\n    columns: columnsWithActions,\n    getCoreRowModel: getCoreRowModel(),\n    getRowId: (row, index) => getItemKey(row, index),\n  })\n\n  const handleSave = useCallback(\n    (item: T) => {\n      if (!dialogState.open) return\n\n      if (dialogState.mode === 'create') {\n        onChange([...value, item])\n      } else {\n        const newValue = [...value]\n        newValue[dialogState.index] = item\n        onChange(newValue)\n      }\n      setDialogState({ open: false })\n    },\n    [dialogState, value, onChange],\n  )\n\n  return (\n    <div className=\"space-y-2\">\n      {label && <Label>{label}</Label>}\n\n      <div className=\"border rounded-md\">\n        {value.length === 0 ? (\n          <div className=\"p-4 text-center text-sm text-muted-foreground\">\n            {emptyMessage}\n          </div>\n        ) : (\n          <Table>\n            <TableHeader>\n              {table.getHeaderGroups().map((headerGroup) => (\n                <TableRow key={headerGroup.id}>\n                  {headerGroup.headers.map((header) => (\n                    <TableHead key={header.id} className=\"h-8 text-xs\">\n                      {header.isPlaceholder\n                        ? null\n                        : flexRender(\n                            header.column.columnDef.header,\n                            header.getContext(),\n                          )}\n                    </TableHead>\n                  ))}\n                </TableRow>\n              ))}\n            </TableHeader>\n            <TableBody>\n              {table.getRowModel().rows.map((row) => (\n                <TableRow key={row.id}>\n                  {row.getVisibleCells().map((cell) => (\n                    <TableCell key={cell.id} className=\"py-1 text-sm\">\n                      {flexRender(\n                        cell.column.columnDef.cell,\n                        cell.getContext(),\n                      )}\n                    </TableCell>\n                  ))}\n                </TableRow>\n              ))}\n            </TableBody>\n          </Table>\n        )}\n      </div>\n\n      <Button\n        type=\"button\"\n        variant=\"outline\"\n        size=\"sm\"\n        onClick={() =>\n          setDialogState({ open: true, mode: 'create', index: null })\n        }\n        disabled={disabled}\n      >\n        <Plus className=\"h-3 w-3 mr-1\" />\n        {addButtonLabel}\n      </Button>\n\n      <Dialog\n        open={dialogState.open}\n        onOpenChange={(open) => !open && setDialogState({ open: false })}\n      >\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>\n              {dialogState.open && dialogState.mode === 'create'\n                ? 'Add Item'\n                : 'Edit Item'}\n            </DialogTitle>\n          </DialogHeader>\n          {dialogState.open &&\n            renderForm({\n              item:\n                dialogState.mode === 'edit' ? dialogState.item : createEmpty(),\n              onSave: handleSave,\n              onCancel: () => setDialogState({ open: false }),\n            })}\n        </DialogContent>\n      </Dialog>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO,SAAS,kBAAqB;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,eAAe;AAAA,EACf,WAAW;AACb,GAA8B;AAC5B,QAAM,CAAC,aAAa,cAAc,IAAI,SAAyB;AAAA,IAC7D,MAAM;AAAA,EAAA,CACP;AAGD,QAAM,qBAAqB;AAAA,IACzB,GAAG;AAAA,IACH;AAAA,MACE,IAAI;AAAA,MACJ,QAAQ;AAAA,MACR,MAAM,CAAC,EAAE,UACP,qBAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,QAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS,MACP,eAAe;AAAA,cACb,MAAM;AAAA,cACN,MAAM;AAAA,cACN,OAAO,IAAI;AAAA,cACX,MAAM,IAAI;AAAA,YAAA,CACX;AAAA,YAEH;AAAA,YAEA,UAAA,oBAAC,QAAA,EAAO,WAAU,UAAA,CAAU;AAAA,UAAA;AAAA,QAAA;AAAA,QAE9B;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS,MAAM;AACb,oBAAM,WAAW,MAAM,OAAO,CAAC,GAAG,MAAM,MAAM,IAAI,KAAK;AACvD,uBAAS,QAAQ;AAAA,YACnB;AAAA,YACA;AAAA,YAEA,UAAA,oBAAC,QAAA,EAAO,WAAU,2BAAA,CAA2B;AAAA,UAAA;AAAA,QAAA;AAAA,MAC/C,GACF;AAAA,MAEF,MAAM;AAAA,IAAA;AAAA,EACR;AAGF,QAAM,QAAQ,cAAc;AAAA,IAC1B,MAAM;AAAA,IACN,SAAS;AAAA,IACT,iBAAiB,gBAAA;AAAA,IACjB,UAAU,CAAC,KAAK,UAAU,WAAW,KAAK,KAAK;AAAA,EAAA,CAChD;AAED,QAAM,aAAa;AAAA,IACjB,CAAC,SAAY;AACX,UAAI,CAAC,YAAY,KAAM;AAEvB,UAAI,YAAY,SAAS,UAAU;AACjC,iBAAS,CAAC,GAAG,OAAO,IAAI,CAAC;AAAA,MAC3B,OAAO;AACL,cAAM,WAAW,CAAC,GAAG,KAAK;AAC1B,iBAAS,YAAY,KAAK,IAAI;AAC9B,iBAAS,QAAQ;AAAA,MACnB;AACA,qBAAe,EAAE,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,CAAC,aAAa,OAAO,QAAQ;AAAA,EAAA;AAG/B,SACE,qBAAC,OAAA,EAAI,WAAU,aACZ,UAAA;AAAA,IAAA,SAAS,oBAAC,SAAO,UAAA,MAAA,CAAM;AAAA,IAExB,oBAAC,OAAA,EAAI,WAAU,qBACZ,gBAAM,WAAW,IAChB,oBAAC,OAAA,EAAI,WAAU,iDACZ,UAAA,aAAA,CACH,yBAEC,OAAA,EACC,UAAA;AAAA,MAAA,oBAAC,aAAA,EACE,gBAAM,gBAAA,EAAkB,IAAI,CAAC,oCAC3B,UAAA,EACE,UAAA,YAAY,QAAQ,IAAI,CAAC,WACxB,oBAAC,WAAA,EAA0B,WAAU,eAClC,UAAA,OAAO,gBACJ,OACA;AAAA,QACE,OAAO,OAAO,UAAU;AAAA,QACxB,OAAO,WAAA;AAAA,MAAW,EACpB,GANU,OAAO,EAOvB,CACD,KAVY,YAAY,EAW3B,CACD,GACH;AAAA,MACA,oBAAC,aACE,UAAA,MAAM,cAAc,KAAK,IAAI,CAAC,QAC7B,oBAAC,YACE,UAAA,IAAI,kBAAkB,IAAI,CAAC,SAC1B,oBAAC,WAAA,EAAwB,WAAU,gBAChC,UAAA;AAAA,QACC,KAAK,OAAO,UAAU;AAAA,QACtB,KAAK,WAAA;AAAA,MAAW,EAClB,GAJc,KAAK,EAKrB,CACD,KARY,IAAI,EASnB,CACD,EAAA,CACH;AAAA,IAAA,EAAA,CACF,EAAA,CAEJ;AAAA,IAEA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,SAAQ;AAAA,QACR,MAAK;AAAA,QACL,SAAS,MACP,eAAe,EAAE,MAAM,MAAM,MAAM,UAAU,OAAO,MAAM;AAAA,QAE5D;AAAA,QAEA,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAK,WAAU,eAAA,CAAe;AAAA,UAC9B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGH;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAM,YAAY;AAAA,QAClB,cAAc,CAAC,SAAS,CAAC,QAAQ,eAAe,EAAE,MAAM,OAAO;AAAA,QAE/D,+BAAC,eAAA,EACC,UAAA;AAAA,UAAA,oBAAC,cAAA,EACC,UAAA,oBAAC,aAAA,EACE,UAAA,YAAY,QAAQ,YAAY,SAAS,WACtC,aACA,YAAA,CACN,GACF;AAAA,UACC,YAAY,QACX,WAAW;AAAA,YACT,MACE,YAAY,SAAS,SAAS,YAAY,OAAO,YAAA;AAAA,YACnD,QAAQ;AAAA,YACR,UAAU,MAAM,eAAe,EAAE,MAAM,OAAO;AAAA,UAAA,CAC/C;AAAA,QAAA,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/esm/ui/editable-list/index.d.ts

@@ -0,0 +1,2 @@
+export { EditableListField } from './EditableListField.js';
+export type { EditableListFieldProps } from './types.js';

package/dist/esm/ui/editable-list/types.d.ts

@@ -0,0 +1,17 @@
+import { ColumnDef } from '@tanstack/react-table';
+export interface EditableListFieldProps<T> {
+    value: Array<T>;
+    onChange: (value: Array<T>) => void;
+    columns: Array<ColumnDef<T>>;
+    renderForm: (props: {
+        item: T | null;
+        onSave: (item: T) => void;
+        onCancel: () => void;
+    }) => React.ReactNode;
+    createEmpty: () => T;
+    getItemKey: (item: T, index: number) => string;
+    label?: string;
+    addButtonLabel?: string;
+    emptyMessage?: string;
+    disabled?: boolean;
+}

package/dist/esm/ui/empty.d.ts

@@ -0,0 +1,11 @@
+import { VariantProps } from 'class-variance-authority';
+declare function Empty({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<'p'>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };

package/dist/esm/ui/empty.js

@@ -0,0 +1,103 @@
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils.js";
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+const emptyMediaVariants = cva(
+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(emptyMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("text-lg font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-content",
+      className: cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      ),
+      ...props
+    }
+  );
+}
+export {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle
+};
+//# sourceMappingURL=empty.js.map

package/dist/esm/ui/empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","sources":["../../../src/ui/empty.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { VariantProps } from 'class-variance-authority'\n\nimport { cn } from '~/lib/utils'\n\nfunction Empty({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\n        'flex max-w-sm flex-col items-center gap-2 text-center',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst emptyMediaVariants = cva(\n  'flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0',\n  {\n    variants: {\n      variant: {\n        default: 'bg-transparent',\n        icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n    },\n  },\n)\n\nfunction EmptyMedia({\n  className,\n  variant = 'default',\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({ variant, className }))}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn('text-lg font-medium tracking-tight', className)}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyDescription({ className, ...props }: React.ComponentProps<'p'>) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction EmptyContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        'flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n}\n"],"names":[],"mappings":";;;AAKA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAsC;AACnE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;AACzE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,MAAM,qBAAqB;AAAA,EACzB;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,MAAM;AAAA,MAAA;AAAA,IACR;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,IAAA;AAAA,EACX;AAEJ;AAEA,SAAS,WAAW;AAAA,EAClB;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAA0E;AACxE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,gBAAc;AAAA,MACd,WAAW,GAAG,mBAAmB,EAAE,SAAS,UAAA,CAAW,CAAC;AAAA,MACvD,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;AACxE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW,GAAG,sCAAsC,SAAS;AAAA,MAC5D,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;AAC5E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;AAC1E,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,aAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MAAA;AAAA,MAED,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/esm/ui/error/NotFoundError.d.ts

@@ -0,0 +1 @@
+export declare function NotFoundError(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/ui/error/NotFoundError.js

@@ -0,0 +1,17 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Link } from "@tanstack/react-router";
+import { MainLayout } from "../layout/MainLayout.js";
+function NotFoundError() {
+  return /* @__PURE__ */ jsx(MainLayout, { children: /* @__PURE__ */ jsxs("main", { className: "mt-8 text-center", children: [
+    /* @__PURE__ */ jsx("h1", { children: "404 Not Found" }),
+    /* @__PURE__ */ jsx("p", { children: "Sorry, I don't recognize this URL. Probably this was old link?" }),
+    /* @__PURE__ */ jsxs("p", { children: [
+      "Navigate to ",
+      /* @__PURE__ */ jsx(Link, { to: "/", children: "Home page" })
+    ] })
+  ] }) });
+}
+export {
+  NotFoundError
+};
+//# sourceMappingURL=NotFoundError.js.map

package/dist/esm/ui/error/NotFoundError.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NotFoundError.js","sources":["../../../../src/ui/error/NotFoundError.tsx"],"sourcesContent":["import { Link } from '@tanstack/react-router'\nimport { MainLayout } from '~/ui/layout/MainLayout'\n\nexport function NotFoundError() {\n  return (\n    <MainLayout>\n      <main className={'mt-8 text-center'}>\n        <h1>404 Not Found</h1>\n        <p>Sorry, I don't recognize this URL. Probably this was old link?</p>\n        <p>\n          Navigate to <Link to={'/'}>Home page</Link>\n        </p>\n      </main>\n    </MainLayout>\n  )\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,gBAAgB;AAC9B,SACE,oBAAC,YAAA,EACC,UAAA,qBAAC,QAAA,EAAK,WAAW,oBACf,UAAA;AAAA,IAAA,oBAAC,QAAG,UAAA,gBAAA,CAAa;AAAA,IACjB,oBAAC,OAAE,UAAA,iEAAA,CAA8D;AAAA,yBAChE,KAAA,EAAE,UAAA;AAAA,MAAA;AAAA,MACW,oBAAC,MAAA,EAAK,IAAI,KAAK,UAAA,YAAA,CAAS;AAAA,IAAA,EAAA,CACtC;AAAA,EAAA,EAAA,CACF,EAAA,CACF;AAEJ;"}

package/dist/esm/ui/form.d.ts

@@ -0,0 +1,56 @@
+import { Slot } from '@radix-ui/react-slot';
+import { FieldValues, Controller } from 'react-hook-form';
+import type * as LabelPrimitive from '@radix-ui/react-label';
+import * as React from 'react';
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: {
+    ({ ref: _ref, ...props }: React.ComponentPropsWithoutRef<typeof Controller> & {
+        name: any;
+    } & {
+        ref?: React.RefObject<React.ElementRef<typeof Controller> | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import('react-hook-form').FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: {
+    ({ ref, className, ...props }: React.HTMLAttributes<HTMLDivElement> & {
+        ref?: React.RefObject<HTMLDivElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const FormLabel: {
+    ({ ref, className, ...props }: React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & {
+        ref?: React.RefObject<React.ElementRef<typeof LabelPrimitive.Root> | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const FormControl: {
+    ({ ref, ...props }: React.ComponentPropsWithoutRef<typeof Slot> & {
+        ref?: React.RefObject<React.ElementRef<typeof Slot> | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const FormDescription: {
+    ({ ref, className, ...props }: React.HTMLAttributes<HTMLParagraphElement> & {
+        ref?: React.RefObject<HTMLParagraphElement | null>;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+declare const FormMessage: {
+    ({ ref, className, ...props }: React.HTMLAttributes<HTMLParagraphElement> & {
+        ref?: React.RefObject<HTMLParagraphElement | null>;
+    }): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, };

package/dist/esm/ui/form.js

@@ -0,0 +1,134 @@
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { use } from "react";
+import { FormProvider, Controller, useFormContext } from "../node_modules/.pnpm/react-hook-form@7.71.1_react@19.1.2/node_modules/react-hook-form/dist/index.esm.js";
+import { cn } from "../lib/utils.js";
+import { Label } from "./label.js";
+const Form = FormProvider;
+const FormFieldContext = React.createContext(
+  {}
+);
+const FormField = ({
+  ref: _ref,
+  ...props
+}) => {
+  const fieldContextValue = React.useMemo(
+    () => ({ name: props.name }),
+    [props.name]
+  );
+  return /* @__PURE__ */ jsx(FormFieldContext, { value: fieldContextValue, children: /* @__PURE__ */ jsx(Controller, { ...props }) });
+};
+FormField.displayName = "FormField";
+const useFormField = () => {
+  const fieldContext = use(FormFieldContext);
+  const itemContext = use(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+  const fieldState = getFieldState(fieldContext.name, formState);
+  const { id } = itemContext;
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState
+  };
+};
+const FormItemContext = React.createContext(
+  {}
+);
+const FormItem = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const id = React.useId();
+  const formItemValue = React.useMemo(() => ({ id }), [id]);
+  return /* @__PURE__ */ jsx(FormItemContext, { value: formItemValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("space-y-2", className), ...props }) });
+};
+FormItem.displayName = "FormItem";
+const FormLabel = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const { error, formItemId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Label,
+    {
+      ref,
+      htmlFor: formItemId,
+      className: cn(error && "text-destructive", className),
+      ...props
+    }
+  );
+};
+FormLabel.displayName = "FormLabel";
+const FormControl = ({
+  ref,
+  ...props
+}) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    Slot,
+    {
+      ref,
+      id: formItemId,
+      "aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+      "aria-invalid": !!error,
+      ...props
+    }
+  );
+};
+FormControl.displayName = "FormControl";
+const FormDescription = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const { formDescriptionId } = useFormField();
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formDescriptionId,
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+};
+FormDescription.displayName = "FormDescription";
+const FormMessage = ({
+  ref,
+  className,
+  ...props
+}) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error.message) : "";
+  if (!error) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: formMessageId,
+      className: cn("text-sm font-medium text-destructive", className),
+      ...props,
+      children: body
+    }
+  );
+};
+FormMessage.displayName = "FormMessage";
+export {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  useFormField
+};
+//# sourceMappingURL=form.js.map