@suryapamenang/ui 0.1.0

package/README.md

@@ -0,0 +1,81 @@
+# @suryapamenang/ui
+
+Shared React UI primitives, composite components and styles for Surya Pamenang application frontends.
+
+Built on [shadcn/ui](https://ui.shadcn.com/) primitives, Tailwind CSS v4 and Radix UI.
+
+## Requirements
+
+- Node.js >= 22
+- pnpm >= 10
+
+## Installation
+
+```sh
+pnpm add @suryapamenang/ui
+```
+
+Peer dependencies are installed automatically by pnpm (`auto-install-peers=true`). With npm/yarn you must install them manually, see `peerDependencies` in `package.json`.
+
+### Add the styles
+
+The package ships a prebuilt Tailwind browser `.css` containing the design tokens. Import it once in your app (e.g. `app.css`):
+
+```css
+@import "@suryapamenang/ui/styles.css";
+```
+
+> Note: the stylesheet already includes Tailwind, animations ([tw-animate-css](https://github.com/originjs/tw-animate-css)) and the `tailwind-scrollbar-hide` plugin. Do **not** import `tailwindcss` twice in the consuming app.
+
+### Import components
+
+```tsx
+import { Button } from "@suryapamenang/ui/primitives/button";
+import { Card, CardContent } from "@suryapamenang/ui/primitives/card";
+import { cn } from "@suryapamenang/ui/lib/utils";
+import { useIsMobile } from "@suryapamenang/ui/hooks/use-mobile";
+```
+
+Exports are split by folder:
+
+- `@suryapamenang/ui/primitives/*` – low-level UI primitives (button, dialog, select, …)
+- `@suryapamenang/ui/components/*` – composite components (plate editor, file upload, multi-step viewer, …)
+- `@suryapamenang/ui/hooks/*` – shared hooks
+- `@suryapamenang/ui/lib/utils` – `cn()` helper
+
+### Theming
+
+Theme tokens are plain CSS variables defined in `src/styles/styles.css` (`--background`, `--primary`, `--brand`, `--highlight`, …). Override them after the stylesheet import to theme your app:
+
+```css
+@import "@suryapamenang/ui/styles.css";
+
+:root {
+  --primary: oklch(0.45 0.2 150);
+}
+```
+
+Dark mode is a `.dark` class strategy (`@custom-variant dark (&:is(.dark *))`).
+
+## Development
+
+```sh
+pnpm install
+pnpm dev:styles    # tailwind watch -> dist/index.css
+pnpm dev:components # tsc watch -> dist
+pnpm build         # styles + components
+pnpm check-types
+pnpm lint          # biome
+```
+
+New shadcn-style components can be added with the CLI and the bundled `components.json`.
+
+## Publishing
+
+Releases are managed with [release-please](https://github.com/googleapis/release-please-action). On merge to `main`, release-please opens a release PR; when merged, `.github/workflows/release.yaml` publishes via npm [trusted publishing (OIDC)](https://docs.npmjs.com/trusted-publishers) — no npm token is stored in CI. Both workflows run inside the nix development shell (see `flake.nix`).
+
+The first version must be published manually (`npm login`, then `npm publish`) so the package exists on the registry, then configure the trusted publisher on the package's npm access page pointing at this repository's `release.yaml` workflow.
+
+## License
+
+Proprietary. Internal Surya Pamenang library.

package/dist/components/basic-blocks-base-kit.d.ts

@@ -0,0 +1,6 @@
+export declare const BaseBasicBlocksKit: (import("platejs").SlatePlugin<import("platejs").PluginConfig<"p", {}, {}, {}, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<any, {}, {}, Record<any, {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"blockquote", {}, {}, Record<"blockquote", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"hr", {}, {}, {}, {}>>)[];
+//# sourceMappingURL=basic-blocks-base-kit.d.ts.map

package/dist/components/basic-blocks-base-kit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-blocks-base-kit.d.ts","sourceRoot":"","sources":["../../src/components/basic-blocks-base-kit.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,kBAAkB;;;;iGAU9B,CAAC"}

package/dist/components/basic-blocks-base-kit.js

@@ -0,0 +1,17 @@
+import { BaseBlockquotePlugin, BaseH1Plugin, BaseH2Plugin, BaseH3Plugin, BaseH4Plugin, BaseH5Plugin, BaseH6Plugin, BaseHorizontalRulePlugin, } from "@platejs/basic-nodes";
+import { BaseParagraphPlugin } from "platejs";
+import { BlockquoteElementStatic } from "../primitives/blockquote-node-static";
+import { H1ElementStatic, H2ElementStatic, H3ElementStatic, H4ElementStatic, H5ElementStatic, H6ElementStatic, } from "../primitives/heading-node-static";
+import { HrElementStatic } from "../primitives/hr-node-static";
+import { ParagraphElementStatic } from "../primitives/paragraph-node-static";
+export const BaseBasicBlocksKit = [
+    BaseParagraphPlugin.withComponent(ParagraphElementStatic),
+    BaseH1Plugin.withComponent(H1ElementStatic),
+    BaseH2Plugin.withComponent(H2ElementStatic),
+    BaseH3Plugin.withComponent(H3ElementStatic),
+    BaseH4Plugin.withComponent(H4ElementStatic),
+    BaseH5Plugin.withComponent(H5ElementStatic),
+    BaseH6Plugin.withComponent(H6ElementStatic),
+    BaseBlockquotePlugin.withComponent(BlockquoteElementStatic),
+    BaseHorizontalRulePlugin.withComponent(HrElementStatic),
+];

package/dist/components/basic-blocks-kit.d.ts

@@ -0,0 +1,6 @@
+export declare const BasicBlocksKit: (import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"p", {}, {}, {}, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<any, {}, {}, Record<any, {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"blockquote", {}, {}, Record<"blockquote", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"hr", {}, {}, {}, {}>>)[];
+//# sourceMappingURL=basic-blocks-kit.d.ts.map

package/dist/components/basic-blocks-kit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-blocks-kit.d.ts","sourceRoot":"","sources":["../../src/components/basic-blocks-kit.tsx"],"names":[],"mappings":"AAwBA,eAAO,MAAM,cAAc;;;;uGA6D1B,CAAC"}

package/dist/components/basic-blocks-kit.js

@@ -0,0 +1,68 @@
+import { BlockquotePlugin, H1Plugin, H2Plugin, H3Plugin, H4Plugin, H5Plugin, H6Plugin, HorizontalRulePlugin, } from "@platejs/basic-nodes/react";
+import { ParagraphPlugin } from "platejs/react";
+import { BlockquoteElement } from "../primitives/blockquote-node";
+import { H1Element, H2Element, H3Element, H4Element, H5Element, H6Element, } from "../primitives/heading-node";
+import { HrElement } from "../primitives/hr-node";
+import { ParagraphElement } from "../primitives/paragraph-node";
+export const BasicBlocksKit = [
+    ParagraphPlugin.withComponent(ParagraphElement),
+    H1Plugin.configure({
+        node: {
+            component: H1Element,
+        },
+        rules: {
+            break: { empty: "reset" },
+        },
+        shortcuts: { toggle: { keys: "mod+alt+1" } },
+    }),
+    H2Plugin.configure({
+        node: {
+            component: H2Element,
+        },
+        rules: {
+            break: { empty: "reset" },
+        },
+        shortcuts: { toggle: { keys: "mod+alt+2" } },
+    }),
+    H3Plugin.configure({
+        node: {
+            component: H3Element,
+        },
+        rules: {
+            break: { empty: "reset" },
+        },
+        shortcuts: { toggle: { keys: "mod+alt+3" } },
+    }),
+    H4Plugin.configure({
+        node: {
+            component: H4Element,
+        },
+        rules: {
+            break: { empty: "reset" },
+        },
+        shortcuts: { toggle: { keys: "mod+alt+4" } },
+    }),
+    H5Plugin.configure({
+        node: {
+            component: H5Element,
+        },
+        rules: {
+            break: { empty: "reset" },
+        },
+        shortcuts: { toggle: { keys: "mod+alt+5" } },
+    }),
+    H6Plugin.configure({
+        node: {
+            component: H6Element,
+        },
+        rules: {
+            break: { empty: "reset" },
+        },
+        shortcuts: { toggle: { keys: "mod+alt+6" } },
+    }),
+    BlockquotePlugin.configure({
+        node: { component: BlockquoteElement },
+        shortcuts: { toggle: { keys: "mod+shift+period" } },
+    }),
+    HorizontalRulePlugin.withComponent(HrElement),
+];

package/dist/components/basic-marks-base-kit.d.ts

@@ -0,0 +1,20 @@
+export declare const BaseBasicMarksKit: (import("platejs").SlatePlugin<import("platejs").PluginConfig<"bold", {}, {}, Record<"bold", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"italic", {}, {}, Record<"italic", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"underline", {}, {}, Record<"underline", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"code", {}, {}, Record<"code", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"strikethrough", {}, {}, Record<"strikethrough", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"subscript", {}, {}, Record<"subscript", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"superscript", {}, {}, Record<"superscript", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"highlight", {}, {}, Record<"highlight", {
+    toggle: () => void;
+}>, {}>> | import("platejs").SlatePlugin<import("platejs").PluginConfig<"kbd", {}, {}, Record<"kbd", {
+    toggle: () => void;
+}>, {}>>)[];
+//# sourceMappingURL=basic-marks-base-kit.d.ts.map

package/dist/components/basic-marks-base-kit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-marks-base-kit.d.ts","sourceRoot":"","sources":["../../src/components/basic-marks-base-kit.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;WAU7B,CAAC"}

package/dist/components/basic-marks-base-kit.js

@@ -0,0 +1,15 @@
+import { BaseBoldPlugin, BaseCodePlugin, BaseHighlightPlugin, BaseItalicPlugin, BaseKbdPlugin, BaseStrikethroughPlugin, BaseSubscriptPlugin, BaseSuperscriptPlugin, BaseUnderlinePlugin, } from "@platejs/basic-nodes";
+import { CodeLeafStatic } from "../primitives/code-node-static";
+import { HighlightLeafStatic } from "../primitives/highlight-node-static";
+import { KbdLeafStatic } from "../primitives/kbd-node-static";
+export const BaseBasicMarksKit = [
+    BaseBoldPlugin,
+    BaseItalicPlugin,
+    BaseUnderlinePlugin,
+    BaseCodePlugin.withComponent(CodeLeafStatic),
+    BaseStrikethroughPlugin,
+    BaseSubscriptPlugin,
+    BaseSuperscriptPlugin,
+    BaseHighlightPlugin.withComponent(HighlightLeafStatic),
+    BaseKbdPlugin.withComponent(KbdLeafStatic),
+];

package/dist/components/basic-marks-kit.d.ts

@@ -0,0 +1,20 @@
+export declare const BasicMarksKit: (import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"bold", {}, {}, Record<"bold", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"italic", {}, {}, Record<"italic", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"underline", {}, {}, Record<"underline", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"code", {}, {}, Record<"code", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"strikethrough", {}, {}, Record<"strikethrough", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"subscript", {}, {}, Record<"subscript", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"superscript", {}, {}, Record<"superscript", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"highlight", {}, {}, Record<"highlight", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"kbd", {}, {}, Record<"kbd", {
+    toggle: () => void;
+}>, {}>>)[];
+//# sourceMappingURL=basic-marks-kit.d.ts.map

package/dist/components/basic-marks-kit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-marks-kit.d.ts","sourceRoot":"","sources":["../../src/components/basic-marks-kit.tsx"],"names":[],"mappings":"AAgBA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;WAsBzB,CAAC"}

package/dist/components/basic-marks-kit.js

@@ -0,0 +1,27 @@
+import { BoldPlugin, CodePlugin, HighlightPlugin, ItalicPlugin, KbdPlugin, StrikethroughPlugin, SubscriptPlugin, SuperscriptPlugin, UnderlinePlugin, } from "@platejs/basic-nodes/react";
+import { CodeLeaf } from "../primitives/code-node";
+import { HighlightLeaf } from "../primitives/highlight-node";
+import { KbdLeaf } from "../primitives/kbd-node";
+export const BasicMarksKit = [
+    BoldPlugin,
+    ItalicPlugin,
+    UnderlinePlugin,
+    CodePlugin.configure({
+        node: { component: CodeLeaf },
+        shortcuts: { toggle: { keys: "mod+e" } },
+    }),
+    StrikethroughPlugin.configure({
+        shortcuts: { toggle: { keys: "mod+shift+x" } },
+    }),
+    SubscriptPlugin.configure({
+        shortcuts: { toggle: { keys: "mod+comma" } },
+    }),
+    SuperscriptPlugin.configure({
+        shortcuts: { toggle: { keys: "mod+period" } },
+    }),
+    HighlightPlugin.configure({
+        node: { component: HighlightLeaf },
+        shortcuts: { toggle: { keys: "mod+shift+h" } },
+    }),
+    KbdPlugin.withComponent(KbdLeaf),
+];

package/dist/components/basic-nodes-kit.d.ts

@@ -0,0 +1,24 @@
+export declare const BasicNodesKit: (import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"p", {}, {}, {}, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<any, {}, {}, Record<any, {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"blockquote", {}, {}, Record<"blockquote", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"hr", {}, {}, {}, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"bold", {}, {}, Record<"bold", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"italic", {}, {}, Record<"italic", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"underline", {}, {}, Record<"underline", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"code", {}, {}, Record<"code", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"strikethrough", {}, {}, Record<"strikethrough", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"subscript", {}, {}, Record<"subscript", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"superscript", {}, {}, Record<"superscript", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"highlight", {}, {}, Record<"highlight", {
+    toggle: () => void;
+}>, {}>> | import("platejs/react").PlatePlugin<import("platejs").PluginConfig<"kbd", {}, {}, Record<"kbd", {
+    toggle: () => void;
+}>, {}>>)[];
+//# sourceMappingURL=basic-nodes-kit.d.ts.map

package/dist/components/basic-nodes-kit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"basic-nodes-kit.d.ts","sourceRoot":"","sources":["../../src/components/basic-nodes-kit.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;WAAwC,CAAC"}

package/dist/components/basic-nodes-kit.js

@@ -0,0 +1,3 @@
+import { BasicBlocksKit } from "./basic-blocks-kit";
+import { BasicMarksKit } from "./basic-marks-kit";
+export const BasicNodesKit = [...BasicBlocksKit, ...BasicMarksKit];

package/dist/components/file-upload.d.ts

@@ -0,0 +1,15 @@
+export declare function FileUpload({ maxFiles, maxSize, placeholder, required, setValue, accept, name, disabled, }: {
+    maxFiles: number;
+    maxSize: number;
+    placeholder?: string;
+    required?: boolean;
+    disabled?: boolean;
+    setValue: (name: string, value: any, options?: {
+        shouldValidate?: boolean;
+        shouldDirty?: boolean;
+        shouldTouch?: boolean;
+    }) => void;
+    accept?: string;
+    name: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=file-upload.d.ts.map

package/dist/components/file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AA4BA,wBAAgB,UAAU,CAAC,EACzB,QAAQ,EACR,OAAO,EACP,WAAW,EAEX,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,IAAI,EACJ,QAAQ,GACT,EAAE;IACD,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,CACR,IAAI,EAAE,MAAM,EACZ,KAAK,EAAE,GAAG,EACV,OAAO,CAAC,EAAE;QACR,cAAc,CAAC,EAAE,OAAO,CAAC;QACzB,WAAW,CAAC,EAAE,OAAO,CAAC;QACtB,WAAW,CAAC,EAAE,OAAO,CAAC;KACvB,KACE,IAAI,CAAC;IACV,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;CACd,+BAyHA"}

package/dist/components/file-upload.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** biome-ignore-all lint/a11y/useKeyWithClickEvents: 3rd party component */
+/** biome-ignore-all lint/suspicious/noExplicitAny: 3rd party copy paste component */
+/** biome-ignore-all lint/a11y/useSemanticElements: 3rd party copy paste component */
+/** biome-ignore-all lint/a11y/useFocusableInteractive: 3rd party component */
+import { AlertCircleIcon, CloudUpload, File, XIcon } from "lucide-react";
+import { formatBytes, useFileUpload } from "../hooks/use-file-upload";
+import { Button } from "../primitives/button";
+const getFileIcon = (file) => {
+    const fileType = file.file.type;
+    if (fileType.startsWith("image/")) {
+        return (_jsx("div", { className: "aspect-square size-10 overflow-hidden rounded-md", children: _jsx("img", { src: URL.createObjectURL(file.file), alt: "hehe", className: "object-fill" }) }));
+    }
+    return (_jsx("div", { className: "aspect-square size-10 flex items-center justify-center overflow-hidden rounded-full", children: _jsx(File, { className: "size-5 opacity-60" }) }));
+};
+export function FileUpload({ maxFiles, maxSize, placeholder, 
+// description,
+required, setValue, accept, name, disabled, }) {
+    const [{ files, isDragging, errors }, { handleDragEnter, handleDragLeave, handleDragOver, handleDrop, openFileDialog, removeFile, clearFiles, getInputProps, },] = useFileUpload({
+        multiple: maxFiles > 1,
+        maxFiles,
+        maxSize,
+        accept,
+        onFilesChange: (files) => {
+            setValue(name, files.map((file) => file.file), { shouldValidate: true, shouldDirty: true, shouldTouch: true });
+        },
+    });
+    return (_jsxs("div", { className: "flex flex-col gap-2 pb-2", children: [_jsxs("div", { role: "button", onClick: openFileDialog, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, "data-dragging": isDragging || undefined, className: "border-input hover:bg-accent/50 data-[dragging=true]:bg-accent/50 has-[input:focus]:border-ring has-[input:focus]:ring-ring/50 flex min-h-32 flex-col items-center justify-center rounded-md border border-dashed p-4 transition-colors has-disabled:pointer-events-none has-disabled:opacity-50 has-[input:focus]:ring-[3px] hover:cursor-pointer", children: [_jsx("input", { ...getInputProps(), className: "sr-only", "aria-label": "Upload files", required: required, disabled: disabled }), _jsxs("div", { className: "flex flex-col items-center justify-center text-center", children: [_jsx("div", { className: "bg-secondary mb-2 flex size-11 shrink-0 items-center justify-center rounded-full border", "aria-hidden": "true", children: _jsx(CloudUpload, { className: "size-4 opacity-60" }) }), _jsx("p", { className: "text-foreground font-medium text-sm mb-2", children: "Drag & drop or click to browse" }), _jsx("div", { className: "text-muted-foreground/70 flex flex-wrap justify-center gap-1 text-xs", children: placeholder })] })] }), errors.length > 0 && (_jsxs("div", { className: "text-destructive flex items-center gap-1 text-xs", role: "alert", children: [_jsx(AlertCircleIcon, { className: "size-3 shrink-0" }), _jsx("span", { children: errors[0] })] })), files.length > 0 && (_jsxs("div", { className: "space-y-2", children: [files.map((file) => (_jsxs("div", { className: "flex items-center justify-between gap-2 rounded-lg border p-2 pe-3", children: [_jsxs("div", { className: "flex items-center gap-1.5 overflow-hidden", children: [getFileIcon(file), _jsxs("div", { className: "flex min-w-0 flex-col gap-0.5", children: [_jsx("p", { className: "truncate text-[11px] font-medium max-w-[200px]", children: file.file.name }), _jsx("p", { className: "text-muted-foreground text-xs", children: formatBytes(file.file.size) })] })] }), _jsx(Button, { size: "icon", variant: "ghost", className: "text-muted-foreground/80 hover:text-foreground -me-2 size-8 hover:bg-transparent", onClick: () => removeFile(file.id), "aria-label": "Remove file", children: _jsx(XIcon, { className: "size-4", "aria-hidden": "true" }) })] }, file.id))), files.length > 1 && (_jsx("div", { className: "flex justify-end", children: _jsx(Button, { size: "sm", variant: "outline", onClick: clearFiles, children: "Remove all files" }) }))] }))] }));
+}

package/dist/components/multi-step-viewer.d.ts

@@ -0,0 +1,23 @@
+import type { VariantProps } from "class-variance-authority";
+import { type MotionProps } from "motion/react";
+import type * as React from "react";
+import { type buttonVariants } from "../primitives/button";
+declare const NextButton: (props: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}) => React.JSX.Element | null;
+declare const PreviousButton: (props: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}) => React.JSX.Element | null;
+declare const SubmitButton: (props: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}) => React.JSX.Element | null;
+declare const ResetButton: (props: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+}) => React.JSX.Element;
+declare const FormHeader: (props: React.ComponentProps<"div">) => React.JSX.Element;
+declare const StepIndicator: (props: React.ComponentProps<"div">) => React.JSX.Element;
+declare const FormFooter: (props: React.ComponentProps<"div">) => React.JSX.Element;
+declare const StepFields: (props: React.ComponentProps<"div"> & MotionProps) => React.JSX.Element | null;
+declare function MultiStepFormContent(props: React.ComponentProps<"div">): React.JSX.Element;
+export { MultiStepFormContent, FormHeader, FormFooter, StepFields, StepIndicator, NextButton, PreviousButton, SubmitButton, ResetButton, };
+//# sourceMappingURL=multi-step-viewer.d.ts.map

package/dist/components/multi-step-viewer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"multi-step-viewer.d.ts","sourceRoot":"","sources":["../../src/components/multi-step-viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAE7D,OAAO,EAAmB,KAAK,WAAW,EAAU,MAAM,cAAc,CAAC;AACzE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAU,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAGnE,QAAA,MAAM,UAAU,GACd,OAAO,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACnC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,6BAOJ,CAAC;AAEF,QAAA,MAAM,cAAc,GAClB,OAAO,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACnC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,6BAaJ,CAAC;AAEF,QAAA,MAAM,YAAY,GAChB,OAAO,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACnC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,6BAKJ,CAAC;AAEF,QAAA,MAAM,WAAW,GACf,OAAO,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GACnC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,sBAGJ,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,sBAWrD,CAAC;AAEF,QAAA,MAAM,aAAa,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,sBA0ExD,CAAC;AACF,QAAA,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,sBAOrD,CAAC;AAEF,QAAA,MAAM,UAAU,GAAI,OAAO,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG,WAAW,6BAwBnE,CAAC;AAEF,iBAAS,oBAAoB,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,qBAE/D;AAED,OAAO,EACL,oBAAoB,EACpB,UAAU,EACV,UAAU,EACV,UAAU,EACV,aAAa,EAEb,UAAU,EACV,cAAc,EACd,YAAY,EACZ,WAAW,GACZ,CAAC"}

package/dist/components/multi-step-viewer.js

@@ -0,0 +1,73 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { AnimatePresence, motion } from "motion/react";
+import { useMultiStepForm } from "../hooks/use-multi-step-viewer";
+import { Button } from "../primitives/button";
+import { Progress } from "../primitives/progress";
+const NextButton = (props) => {
+    const { isLastStep, goToNext } = useMultiStepForm();
+    if (isLastStep)
+        return null;
+    return (_jsx(Button, { size: "sm", type: "button", onClick: () => goToNext(), ...props }));
+};
+const PreviousButton = (props) => {
+    const { isFirstStep, goToPrevious } = useMultiStepForm();
+    if (isFirstStep)
+        return null;
+    return (_jsx(Button, { size: "sm", type: "button", variant: "outline", onClick: () => goToPrevious(), ...props }));
+};
+const SubmitButton = (props) => {
+    const { isLastStep } = useMultiStepForm();
+    if (!isLastStep)
+        return null;
+    return _jsx(Button, { size: "sm", type: "button", ...props });
+};
+const ResetButton = (props) => {
+    return _jsx(Button, { size: "sm", type: "button", variant: "ghost", ...props });
+};
+const FormHeader = (props) => {
+    const { currentStepIndex, steps } = useMultiStepForm();
+    return (_jsxs("div", { className: "flex flex-col items-start justify-center gap-3 pb-4", ...props, children: [_jsx(StepIndicator, {}), _jsx(Progress, { value: (currentStepIndex / steps.length) * 100 })] }));
+};
+const StepIndicator = (props) => {
+    const { currentStepIndex, steps, goToStep } = useMultiStepForm();
+    const currentStep = steps[currentStepIndex - 1];
+    const StepIcon = currentStep?.icon;
+    return (_jsxs("div", { className: "w-full", ...props, children: [_jsx("div", { className: "flex flex-col items-center gap-2 md:hidden", children: _jsxs("div", { className: "flex items-center gap-2", children: [StepIcon && _jsx(StepIcon, { className: "w-4 h-4 text-primary" }), _jsx("span", { className: "text-sm font-medium text-primary", children: currentStep?.title || `Step ${currentStepIndex}` })] }) }), _jsx("div", { className: "hidden md:flex items-center justify-between w-full gap-2 px-1", children: steps.map((step, index) => {
+                    const stepNum = index + 1;
+                    const isCurrent = stepNum === currentStepIndex;
+                    const isCompleted = stepNum < currentStepIndex;
+                    const typedStep = step;
+                    const Icon = typedStep.icon;
+                    return (_jsxs("button", { type: "button", onClick: () => goToStep(stepNum), className: `flex flex-col items-center gap-1.5 min-w-20 ${isCurrent
+                            ? "text-primary"
+                            : isCompleted
+                                ? "text-muted-foreground cursor-pointer"
+                                : "text-muted-foreground/50 cursor-pointer"}`, children: [_jsx("div", { className: `w-8 h-8 rounded-full flex items-center justify-center border-2 transition-colors shrink-0 ${isCurrent
+                                    ? "border-primary bg-primary text-primary-foreground"
+                                    : isCompleted
+                                        ? "border-primary bg-primary text-primary-foreground"
+                                        : "border-muted-foreground/30"}`, children: isCompleted ? (_jsx(Check, { className: "w-4 h-4" })) : Icon ? (_jsx(Icon, { className: "w-4 h-4" })) : (stepNum) }), _jsx("span", { className: `text-xs text-center leading-tight whitespace-nowrap ${isCurrent
+                                    ? "text-primary font-medium"
+                                    : "text-muted-foreground"}`, children: typedStep.title || `Step ${stepNum}` })] }, stepNum));
+                }) })] }));
+};
+const FormFooter = (props) => {
+    return (_jsx("div", { className: "w-full pt-3 flex items-center justify-end gap-3", ...props }));
+};
+const StepFields = (props) => {
+    const { currentStepIndex, steps } = useMultiStepForm();
+    const currentFormStep = steps[currentStepIndex - 1];
+    if (!currentFormStep ||
+        currentStepIndex < 1 ||
+        currentStepIndex > steps.length) {
+        return null;
+    }
+    return (_jsx(AnimatePresence, { mode: "popLayout", children: _jsx(motion.div, { initial: { opacity: 0, x: 15 }, animate: { opacity: 1, x: 0 }, exit: { opacity: 0, x: -15 }, transition: { duration: 0.4, type: "spring" }, ...props, children: currentFormStep.component }, currentStepIndex) }));
+};
+function MultiStepFormContent(props) {
+    return _jsx("div", { className: "flex flex-col gap-2 pt-3", ...props });
+}
+export { MultiStepFormContent, FormHeader, FormFooter, StepFields, StepIndicator, 
+// Form Actions
+NextButton, PreviousButton, SubmitButton, ResetButton, };

package/dist/components/plate-editor.d.ts

@@ -0,0 +1,2 @@
+export declare function PlateEditor(): import("react").JSX.Element;
+//# sourceMappingURL=plate-editor.d.ts.map

package/dist/components/plate-editor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plate-editor.d.ts","sourceRoot":"","sources":["../../src/components/plate-editor.tsx"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,gCAa1B"}

package/dist/components/plate-editor.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { normalizeNodeId } from "platejs";
+import { Plate, usePlateEditor } from "platejs/react";
+import { BasicNodesKit } from "../components/basic-nodes-kit";
+import { Editor, EditorContainer } from "../primitives/editor";
+export function PlateEditor() {
+    const editor = usePlateEditor({
+        plugins: BasicNodesKit,
+        value,
+    });
+    return (_jsx(Plate, { editor: editor, children: _jsx(EditorContainer, { children: _jsx(Editor, { variant: "demo", placeholder: "Type..." }) }) }));
+}
+const value = normalizeNodeId([
+    {
+        children: [{ text: "Basic Editor" }],
+        type: "h1",
+    },
+    {
+        children: [{ text: "Heading 2" }],
+        type: "h2",
+    },
+    {
+        children: [{ text: "Heading 3" }],
+        type: "h3",
+    },
+    {
+        children: [{ text: "This is a blockquote element" }],
+        type: "blockquote",
+    },
+    {
+        children: [
+            { text: "Basic marks: " },
+            { bold: true, text: "bold" },
+            { text: ", " },
+            { italic: true, text: "italic" },
+            { text: ", " },
+            { text: "underline", underline: true },
+            { text: ", " },
+            { strikethrough: true, text: "strikethrough" },
+            { text: "." },
+        ],
+        type: "p",
+    },
+]);

package/dist/hooks/use-file-upload.d.ts

@@ -0,0 +1,46 @@
+import type React from "react";
+import { type ChangeEvent, type DragEvent, type InputHTMLAttributes } from "react";
+export type FileMetadata = {
+    name: string;
+    size: number;
+    type: string;
+    url: string;
+    id: string;
+};
+export type FileWithPreview = {
+    file: File | FileMetadata;
+    id: string;
+    preview?: string;
+};
+export type FileUploadOptions = {
+    maxFiles?: number;
+    maxSize?: number;
+    accept?: string;
+    multiple?: boolean;
+    initialFiles?: FileMetadata[];
+    onFilesChange?: (files: FileWithPreview[]) => void;
+    onFilesAdded?: (addedFiles: FileWithPreview[]) => void;
+};
+export type FileUploadState = {
+    files: FileWithPreview[];
+    isDragging: boolean;
+    errors: string[];
+};
+export type FileUploadActions = {
+    addFiles: (files: FileList | File[]) => void;
+    removeFile: (id: string) => void;
+    clearFiles: () => void;
+    clearErrors: () => void;
+    handleDragEnter: (e: DragEvent<HTMLElement>) => void;
+    handleDragLeave: (e: DragEvent<HTMLElement>) => void;
+    handleDragOver: (e: DragEvent<HTMLElement>) => void;
+    handleDrop: (e: DragEvent<HTMLElement>) => void;
+    handleFileChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    openFileDialog: () => void;
+    getInputProps: (props?: InputHTMLAttributes<HTMLInputElement>) => InputHTMLAttributes<HTMLInputElement> & {
+        ref: React.Ref<HTMLInputElement>;
+    };
+};
+export declare const useFileUpload: (options?: FileUploadOptions) => [FileUploadState, FileUploadActions];
+export declare const formatBytes: (bytes: number, decimals?: number) => string;
+//# sourceMappingURL=use-file-upload.d.ts.map

package/dist/hooks/use-file-upload.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-upload.d.ts","sourceRoot":"","sources":["../../src/hooks/use-file-upload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,mBAAmB,EAIzB,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,YAAY,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,IAAI,EAAE,IAAI,GAAG,YAAY,CAAC;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,YAAY,EAAE,CAAC;IAC9B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACnD,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CACxD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG;IAC5B,KAAK,EAAE,eAAe,EAAE,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,MAAM,EAAE,MAAM,EAAE,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,QAAQ,EAAE,CAAC,KAAK,EAAE,QAAQ,GAAG,IAAI,EAAE,KAAK,IAAI,CAAC;IAC7C,UAAU,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,UAAU,EAAE,MAAM,IAAI,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrD,eAAe,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACrD,cAAc,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IACpD,UAAU,EAAE,CAAC,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAChD,gBAAgB,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAC7D,cAAc,EAAE,MAAM,IAAI,CAAC;IAC3B,aAAa,EAAE,CACb,KAAK,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,KAC1C,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;QAC3C,GAAG,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;KAClC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,aAAa,GACxB,UAAS,iBAAsB,KAC9B,CAAC,eAAe,EAAE,iBAAiB,CA2RrC,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,OAAO,MAAM,EAAE,iBAAY,KAAG,MAezD,CAAC"}