@kamaldgrt/ui 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kamal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,106 @@
-# Temporary Holding Version
+# @kamaldgrt/ui
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Shared React UI primitives styled with Tailwind CSS theme tokens:
+
+- **`Modal`**: centered dialog. Backdrop click and Escape close it, and the first field gets focus on open.
+- **`ConfirmModal`**: message plus Cancel and Confirm, with an optional `danger` style and an optional secondary action.
+- **`PromptModal`**: one or more labeled text inputs plus Cancel and OK. It replaces `window.prompt`.
+- **`Drawer`**: right-side slide-over panel with an enter and exit transition and an optional header icon.
+
+All components are client components (`"use client"` is included in the build).
+
+## Requirements
+
+- React 19
+- `lucide-react` (peer dependency, used by `Drawer`)
+- Tailwind CSS v4 in the consuming app
+
+## Install
+
+```bash
+npm i @kamaldgrt/ui
+```
+
+## Setup in the consuming app
+
+The components carry Tailwind class names, so the app's Tailwind build has to scan the package. Add this to the app's main stylesheet. The path is relative to that file:
+
+```css
+@import "tailwindcss";
+@source "../../node_modules/@kamaldgrt/ui/dist";
+```
+
+Without the `@source` line, Tailwind never sees the package's classes and the components render unstyled.
+
+### Theme tokens
+
+The components use semantic color tokens, so each app keeps its own look. The app must define these under `@theme` as `--color-*` variables:
+
+| Token | Used for |
+|---|---|
+| `surface`, `surface-elevated`, `surface-hover` | backgrounds, dialog card, hover state |
+| `foreground`, `muted` | text |
+| `border`, `border-subtle` | borders |
+| `cta`, `cta-foreground`, `cta-hover` | primary button |
+| `danger-bg`, `danger-text` | destructive button |
+| `warning-bg`, `warning-text` | drawer icon chip |
+
+```css
+@theme {
+  --color-surface: #ffffff;
+  --color-foreground: #111827;
+  /* ...and so on for every token above */
+}
+```
+
+## Usage
+
+```tsx
+import { ConfirmModal, Drawer, Modal, PromptModal } from "@kamaldgrt/ui";
+
+<ConfirmModal
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  onConfirm={remove}
+  title="Delete item"
+  message="This cannot be undone."
+  confirmLabel="Delete"
+  danger
+/>
+
+<Drawer isOpen={open} onClose={() => setOpen(false)} title="New item" icon={Plus}>
+  <ItemForm />
+</Drawer>
+
+<PromptModal
+  isOpen={open}
+  onClose={() => setOpen(false)}
+  onSubmit={({ name }) => rename(name)}
+  title="Rename"
+  fields={[{ name: "name", label: "Name", defaultValue: current }]}
+/>
+```
+
+Behavior worth knowing:
+
+- A `Drawer` stays mounted for 200 ms after `isOpen` turns false so the slide-out can play. Its children remount on every open, so forms start fresh.
+- Pressing Escape inside a `Drawer` that contains an open dialog closes only the dialog.
+- `Modal` takes an optional `className` that replaces the default card styling.
+- There is no focus trap. One dialog at a time is the supported case.
+
+## Development
+
+```bash
+npm install
+npm test            # vitest (jsdom, testing-library)
+npm run typecheck   # tsc --noEmit
+npm run build       # tsup -> dist/ (ESM + .d.ts)
+```
+
+## API changes
+
+Everything is imported from the package root. Treat exported names, props and the list of theme tokens as a public API:
+
+- Additive changes (new optional props, new components, new tokens with a fallback) bump the minor version.
+- Breaking changes (removed or renamed props, new required tokens) bump the major version.
+- Tag each release (`vX.Y.Z`) to match the published version.

package/dist/index.d.ts

@@ -0,0 +1,50 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { LucideIcon } from 'lucide-react';
+
+declare function ConfirmModal({ isOpen, onClose, onConfirm, title, message, confirmLabel, danger, secondaryLabel, onSecondary, }: {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    danger?: boolean;
+    secondaryLabel?: string;
+    onSecondary?: () => void;
+}): react.JSX.Element;
+
+declare function Drawer({ isOpen, onClose, title, icon: Icon, children, }: {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    icon?: LucideIcon;
+    children: ReactNode;
+}): react.JSX.Element | null;
+
+declare function Modal({ isOpen, onClose, title, children, className, }: {
+    isOpen: boolean;
+    onClose: () => void;
+    title: string;
+    children: ReactNode;
+    className?: string;
+}): react.JSX.Element | null;
+
+type PromptField = {
+    name: string;
+    label: string;
+    placeholder?: string;
+    defaultValue?: string;
+    optional?: boolean;
+};
+declare function PromptModal({ isOpen, onClose, onSubmit, title, fields, submitLabel, }: {
+    isOpen: boolean;
+    onClose: () => void;
+    onSubmit: (values: Record<string, string>) => void;
+    title: string;
+    fields: PromptField[];
+    submitLabel?: string;
+}): react.JSX.Element;
+
+export { ConfirmModal, Drawer, Modal, PromptModal };
+export type { PromptField };

package/dist/index.js

@@ -0,0 +1,293 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+
+// src/Modal.tsx
+import { useEffect, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  className
+}) {
+  const cardRef = useRef(null);
+  useEffect(() => {
+    var _a, _b;
+    if (!isOpen) return;
+    (_b = (_a = cardRef.current) == null ? void 0 : _a.querySelector("input, button, textarea, select")) == null ? void 0 : _b.focus();
+  }, [isOpen]);
+  useEffect(() => {
+    if (!isOpen) return;
+    function handleKeyDown(e) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+  if (!isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-50 flex items-center justify-center bg-black/40",
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: cardRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          onClick: (e) => e.stopPropagation(),
+          className: className != null ? className : "w-80 rounded-lg border-2 border-border bg-surface-elevated p-4",
+          children: [
+            /* @__PURE__ */ jsx("p", { className: "mb-3 text-sm font-semibold text-foreground", children: title }),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/ConfirmModal.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+function ConfirmModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  confirmLabel = "Confirm",
+  danger = false,
+  // Optional third button, rendered between Cancel and Confirm — for
+  // dialogs offering a safe alternative to a destructive Confirm (e.g.
+  // "Mark Inactive" next to "Delete Permanently"). Never itself styled
+  // `danger`; that's reserved for the main destructive action.
+  secondaryLabel,
+  onSecondary
+}) {
+  return /* @__PURE__ */ jsxs2(Modal, { isOpen, onClose, title, children: [
+    /* @__PURE__ */ jsx2("p", { className: "mb-4 text-sm text-foreground", children: message }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex justify-end gap-2", children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: "rounded-md px-3 py-1.5 text-sm text-muted hover:bg-surface-hover",
+          children: "Cancel"
+        }
+      ),
+      secondaryLabel && onSecondary && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: onSecondary,
+          className: "rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground hover:bg-surface-hover",
+          children: secondaryLabel
+        }
+      ),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          onClick: onConfirm,
+          className: danger ? "rounded-md bg-danger-bg px-3 py-1.5 text-sm font-medium text-danger-text hover:opacity-90" : "rounded-md bg-cta px-3 py-1.5 text-sm font-medium text-cta-foreground hover:bg-cta-hover hover:font-semibold",
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/Drawer.tsx
+import { X } from "lucide-react";
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+
+// src/constants.ts
+var DRAWER_TRANSITION_DURATION_MS = 200;
+
+// src/Drawer.tsx
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+function Drawer({
+  isOpen,
+  onClose,
+  title,
+  icon: Icon,
+  children
+}) {
+  const [mounted, setMounted] = useState(isOpen);
+  const [visible, setVisible] = useState(false);
+  const contentRef = useRef2(null);
+  useEffect2(() => {
+    if (isOpen) {
+      setMounted(true);
+      const raf = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    setVisible(false);
+    const timer = setTimeout(() => setMounted(false), DRAWER_TRANSITION_DURATION_MS);
+    return () => clearTimeout(timer);
+  }, [isOpen]);
+  useEffect2(() => {
+    var _a, _b;
+    if (!isOpen) return;
+    (_b = (_a = contentRef.current) == null ? void 0 : _a.querySelector("input, button, textarea, select")) == null ? void 0 : _b.focus();
+  }, [isOpen]);
+  useEffect2(() => {
+    if (!isOpen) return;
+    function handleKeyDown(e) {
+      var _a;
+      if (e.key !== "Escape") return;
+      if ((_a = contentRef.current) == null ? void 0 : _a.querySelector('[role="dialog"]')) return;
+      onClose();
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose]);
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: `fixed inset-0 z-50 bg-black/40 transition-opacity duration-200 ${visible ? "opacity-100" : "opacity-0"}`,
+      onClick: onClose,
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          onClick: (e) => e.stopPropagation(),
+          className: `fixed inset-y-0 right-0 flex w-full flex-col border-l border-border-subtle bg-surface-elevated shadow-lg transition-transform duration-200 sm:max-w-md ${visible ? "translate-x-0" : "translate-x-full"}`,
+          children: [
+            /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-between border-b border-border-subtle px-4 py-3", children: [
+              /* @__PURE__ */ jsxs3("p", { className: "flex min-w-0 items-center gap-2.5 text-sm font-semibold text-foreground", children: [
+                Icon && /* @__PURE__ */ jsx3("span", { className: "flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-warning-bg text-warning-text", children: /* @__PURE__ */ jsx3(Icon, { "aria-hidden": true, className: "h-4 w-4" }) }),
+                /* @__PURE__ */ jsx3("span", { className: "break-words", children: title })
+              ] }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  onClick: onClose,
+                  "aria-label": "Close",
+                  className: "rounded p-1 text-muted hover:bg-surface-hover hover:text-foreground",
+                  children: /* @__PURE__ */ jsx3(X, { "aria-hidden": true, className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx3("div", { ref: contentRef, className: "flex-1 overflow-y-auto p-4", children })
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/PromptModal.tsx
+import { useEffect as useEffect3, useState as useState2 } from "react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+function PromptModal({
+  isOpen,
+  onClose,
+  onSubmit,
+  title,
+  fields,
+  submitLabel = "OK"
+}) {
+  const [values, setValues] = useState2({});
+  useEffect3(() => {
+    if (isOpen) {
+      setValues(
+        Object.fromEntries(fields.map((f) => {
+          var _a;
+          return [f.name, (_a = f.defaultValue) != null ? _a : ""];
+        }))
+      );
+    }
+  }, [isOpen]);
+  const canSubmit = fields.every(
+    (f) => {
+      var _a;
+      return f.optional || ((_a = values[f.name]) != null ? _a : "").trim();
+    }
+  );
+  function handleSubmit() {
+    if (!canSubmit) return;
+    onSubmit(
+      Object.fromEntries(fields.map((f) => [f.name, values[f.name].trim()]))
+    );
+  }
+  return /* @__PURE__ */ jsx4(Modal, { isOpen, onClose, title, children: /* @__PURE__ */ jsxs4(
+    "form",
+    {
+      onSubmit: (e) => {
+        e.preventDefault();
+        handleSubmit();
+      },
+      children: [
+        /* @__PURE__ */ jsx4("div", { className: "mb-4 space-y-3", children: fields.map((f) => {
+          var _a;
+          return /* @__PURE__ */ jsxs4("label", { className: "block", children: [
+            /* @__PURE__ */ jsx4("span", { className: "mb-1 block text-xs font-medium text-muted", children: f.label }),
+            /* @__PURE__ */ jsx4(
+              "input",
+              {
+                type: "text",
+                value: (_a = values[f.name]) != null ? _a : "",
+                onChange: (e) => setValues((prev) => __spreadProps(__spreadValues({}, prev), { [f.name]: e.target.value })),
+                placeholder: f.placeholder,
+                className: "w-full rounded-md border border-border bg-surface px-2 py-1.5 text-sm text-foreground"
+              }
+            )
+          ] }, f.name);
+        }) }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex justify-end gap-2", children: [
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "rounded-md px-3 py-1.5 text-sm text-muted hover:bg-surface-hover",
+              children: "Cancel"
+            }
+          ),
+          /* @__PURE__ */ jsx4(
+            "button",
+            {
+              type: "submit",
+              disabled: !canSubmit,
+              className: "rounded-md bg-cta px-3 py-1.5 text-sm font-medium text-cta-foreground hover:bg-cta-hover hover:font-semibold disabled:opacity-50",
+              children: submitLabel
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+export {
+  ConfirmModal,
+  Drawer,
+  Modal,
+  PromptModal
+};

package/package.json

@@ -1,6 +1,46 @@
 {
   "name": "@kamaldgrt/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Shared React UI primitives (modals, drawer) styled with Tailwind theme tokens.",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/KamalDGRT/nico-ui.git"
+  },
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "npm run typecheck && npm test && npm run build"
+  },
+  "peerDependencies": {
+    "lucide-react": "^1.37.0",
+    "react": "^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.8",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "jsdom": "^29.1.1",
+    "lucide-react": "^1.61.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "tsup": "^9.0.0",
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.12"
+  }
+}