@ship-it-ui/shipit 0.0.4 → 0.0.6

package/dist/index.cjs

@@ -46,6 +46,7 @@ __export(index_exports, {
   GraphMinimap: () => GraphMinimap,
   GraphNode: () => GraphNode,
   Hero: () => Hero,
+  NotifRow: () => NotifRow,
   PathOverlay: () => PathOverlay,
   PricingCard: () => PricingCard,
   ReasoningBlock: () => ReasoningBlock,
@@ -53,7 +54,7 @@ __export(index_exports, {
   SuggestionChip: () => SuggestionChip,
   Testimonial: () => Testimonial,
   ToolCallCard: () => ToolCallCard,
-  cn: () => import_ui29.cn,
+  cn: () => import_ui30.cn,
   entityColumn: () => entityColumn,
   entityTypeColumn: () => entityTypeColumn,
   getEntityTypeMeta: () => getEntityTypeMeta,
@@ -63,7 +64,7 @@ __export(index_exports, {
   resetEntityTypeRegistry: () => resetEntityTypeRegistry
 });
 module.exports = __toCommonJS(index_exports);
-var import_ui29 = require("@ship-it-ui/ui");
+var import_ui30 = require("@ship-it-ui/ui");
 
 // src/ai/AskBar.tsx
 var import_ui = require("@ship-it-ui/ui");
@@ -80,10 +81,12 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
   submitLabel = "Ask",
   disabled,
   maxWidth = 620,
+  density = "comfortable",
   className,
   children,
   ...props
 }, ref) {
+  const isTouch = density === "touch";
   const [value, setValue] = (0, import_ui.useControllableState)({
     value: valueProp,
     defaultValue: defaultValue ?? "",
@@ -111,16 +114,17 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
       ref,
       role: "search",
       onSubmit: handleSubmit,
-      style: { maxWidth },
+      style: { maxWidth: isTouch ? void 0 : maxWidth },
       className: (0, import_ui2.cn)(
-        "border-border-strong bg-panel w-full rounded-xl border p-[14px] shadow",
+        "border-border-strong bg-panel w-full border",
+        isTouch ? "rounded-m-card p-3" : "rounded-xl p-[14px] shadow",
         "focus-within:border-accent focus-within:ring-accent-dim focus-within:ring-[3px]",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "mb-[10px] flex items-start gap-[10px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "text-accent text-[16px]", children: "\u2726" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_ui2.cn)("flex items-start gap-[10px]", isTouch ? "mb-2" : "mb-[10px]"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: (0, import_ui2.cn)("text-accent", isTouch ? "text-[18px]" : "text-[16px]"), children: "\u2726" }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             "textarea",
             {
@@ -132,8 +136,9 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
               "aria-label": placeholder,
               rows: 1,
               className: (0, import_ui2.cn)(
-                "text-text flex-1 resize-none border-0 bg-transparent text-[14px] leading-[1.5] outline-none",
-                "placeholder:text-text-dim"
+                "text-text flex-1 resize-none border-0 bg-transparent leading-[1.5] outline-none",
+                "placeholder:text-text-dim",
+                isTouch ? "text-m-body" : "text-[14px]"
               )
             }
           ),
@@ -141,19 +146,23 @@ var AskBar = (0, import_react.forwardRef)(function AskBar2({
             "span",
             {
               "aria-hidden": true,
-              className: "bg-accent mt-[3px] inline-block h-4 w-px animate-[ship-pulse_1s_infinite]"
+              className: (0, import_ui2.cn)(
+                "bg-accent mt-[3px] inline-block w-px animate-[ship-pulse_1s_infinite]",
+                isTouch ? "h-5" : "h-4"
+              )
             }
           )
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-wrap items-center gap-[6px]", children: [
           children,
           /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "ml-auto flex items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "text-text-dim font-mono text-[11px]", children: "\u2318\u21B5" }),
+            !isTouch && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, className: "text-text-dim font-mono text-[11px]", children: "\u2318\u21B5" }),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               import_ui.Button,
               {
                 type: "submit",
-                size: "sm",
+                size: isTouch ? "md" : "sm",
+                density: isTouch ? "touch" : void 0,
                 variant: "primary",
                 disabled: disabled || !(value ?? "").trim(),
                 children: submitLabel
@@ -283,8 +292,49 @@ var import_ui6 = require("@ship-it-ui/ui");
 var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var CopilotMessage = (0, import_react4.forwardRef)(
-  function CopilotMessage2({ role, avatar, streaming, className, children, ...props }, ref) {
+  function CopilotMessage2({ role, avatar, streaming, density = "comfortable", className, children, ...props }, ref) {
     const isAssistant = role === "assistant";
+    const isTouch = density === "touch";
+    if (isTouch) {
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          ref,
+          className: (0, import_ui6.cn)(
+            "flex flex-col gap-[6px]",
+            isAssistant ? "items-start" : "items-end",
+            className
+          ),
+          "data-role": role,
+          ...props,
+          children: [
+            isAssistant && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "text-m-eyebrow text-accent inline-flex items-center gap-[6px] font-mono tracking-wide uppercase", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { "aria-hidden": true, children: "\u2726" }),
+              streaming ? "thinking" : "ShipIt"
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+              "div",
+              {
+                className: (0, import_ui6.cn)(
+                  "rounded-m-card text-m-body max-w-[85%] px-[14px] py-3 leading-normal",
+                  isAssistant ? "bg-panel border-border border" : "bg-accent text-on-accent"
+                ),
+                children: [
+                  children,
+                  streaming && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: "bg-accent ml-[2px] inline-block h-4 w-px animate-[ship-pulse_1s_infinite] align-middle"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "div",
       {
@@ -1337,6 +1387,88 @@ function entityTypeColumn(options = {}) {
     cell: (row) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(EntityBadge, { type: row.type, size: "sm" })
   };
 }
+
+// src/notifications/NotifRow.tsx
+var import_ui29 = require("@ship-it-ui/ui");
+var import_react25 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var toneClass = {
+  ok: "bg-ok",
+  warn: "bg-warn",
+  err: "bg-err",
+  neutral: "bg-accent-text"
+};
+var NotifRow = (0, import_react25.forwardRef)(function NotifRow2({
+  title,
+  body,
+  time,
+  tone = "neutral",
+  unread,
+  isFirst,
+  isLast,
+  href,
+  className,
+  onClick,
+  ...props
+}, ref) {
+  const content = /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "pt-1", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "div",
+      {
+        className: (0, import_ui29.cn)("h-2 w-2 rounded-full", unread ? toneClass[tone] : "bg-border-strong")
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "min-w-0 flex-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-baseline justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "truncate text-[14px] font-medium tracking-tight", children: title }),
+        time != null && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-text-muted shrink-0 font-mono text-[11px] whitespace-nowrap", children: time })
+      ] }),
+      body && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-text-muted mt-[3px] text-[13px] leading-tight", children: body })
+    ] })
+  ] });
+  const baseClass = (0, import_ui29.cn)(
+    "flex gap-3 p-[14px] bg-panel border-border border-l border-r",
+    isFirst ? "border-t rounded-t-m-card" : "",
+    "border-b",
+    isLast ? "rounded-b-m-card" : "",
+    href || onClick ? "cursor-pointer hover:bg-panel-2" : "",
+    className
+  );
+  if (href) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "a",
+      {
+        ref,
+        href,
+        onClick,
+        className: (0, import_ui29.cn)(
+          baseClass,
+          "text-text focus-visible:ring-accent-dim no-underline outline-none focus-visible:ring-[3px]"
+        ),
+        ...props,
+        children: content
+      }
+    );
+  }
+  if (onClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      "button",
+      {
+        type: "button",
+        ref,
+        onClick,
+        className: (0, import_ui29.cn)(
+          baseClass,
+          "focus-visible:ring-accent-dim text-left outline-none focus-visible:ring-[3px]"
+        ),
+        ...props,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: baseClass, ...props, children: content });
+});
+NotifRow.displayName = "NotifRow";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AskBar,
@@ -1363,6 +1495,7 @@ function entityTypeColumn(options = {}) {
   GraphMinimap,
   GraphNode,
   Hero,
+  NotifRow,
   PathOverlay,
   PricingCard,
   ReasoningBlock,