@warmio/ui 1.0.0 → 1.1.0

package/README.md

@@ -4,10 +4,25 @@ Portable React components shared by Warm products. Install this package with the
 `@warmio/design@1.0.0` CSS contract, import `@warmio/design/globals.css` once, and add the package's
 compiled files to Tailwind's source detection:
 
+## Why these files are separate
+
+Independently deployed Warm products cannot import runtime code from the private `warm-app`
+workspace, so `libraries/public-ui/` must be a standalone public package rather than another private
+workspace entry point. `tools/tasks/check-ui-package.mjs` is a dedicated package-boundary check
+because the existing application checks do not build, pack, and inspect a public npm tarball.
+`.github/workflows/publish-ui.yml` is separate from application deployment workflows so npm trusted
+publishing can bind credentials to one reviewable package-release boundary without granting an app
+deployment permission to publish packages.
+
 ```css
 @import '@warmio/design/globals.css';
 @source '../node_modules/@warmio/ui/dist';
 ```
 
-The initial public surface contains the Warm badge, logo, and complete responsive sidebar family.
+The `1.1.0` public surface contains the Warm badge, logo, Button, Text and `StackedDisplay`,
+DropdownMenu, Sheet, and complete responsive Sidebar family including `SidebarBrand` and
+`SidebarAccountTrigger`. Styling is sealed: use documented semantic presentations and layout
+wrappers, never `className` or `style` overrides. DropdownMenu interaction feedback requires the
+exact public peer `cuelume@0.1.0`.
+
 The published artifact is standalone and never imports private `warm-app` workspace packages.

package/dist/button.js

@@ -0,0 +1,10 @@
+import {
+  Button,
+  ButtonLink
+} from "./chunks/chunk-KCEDMF2I.js";
+import "./chunks/chunk-T2TXMN3G.js";
+import "./chunks/chunk-VIB7OX7D.js";
+export {
+  Button,
+  ButtonLink
+};

package/dist/chunks/chunk-D25QMXJR.js

@@ -0,0 +1,85 @@
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/text.tsx
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var textClassNameByVariant = {
+  display: "block text-[1.35rem] font-normal leading-snug tracking-normal [font-family:var(--font-display)] @3xl/main:text-[1.875rem]",
+  displayCompact: "block text-xl font-normal leading-snug tracking-normal [font-family:var(--font-display)] @3xl/main:text-2xl",
+  overline: "block font-mono text-xs font-bold uppercase tracking-[0.18em]",
+  micro: "text-[10px] font-normal leading-tight",
+  microStrong: "text-[10px] font-bold leading-tight",
+  body: "text-sm",
+  caption: "text-xs",
+  helper: "text-xs",
+  sectionTitle: "text-sm font-bold leading-6"
+};
+var defaultTextElementByVariant = {
+  display: "span",
+  displayCompact: "span",
+  overline: "span",
+  micro: "span",
+  microStrong: "span",
+  body: "p",
+  caption: "span",
+  helper: "small",
+  sectionTitle: "h3"
+};
+var textClassNameByTone = {
+  default: "",
+  muted: "text-muted-foreground",
+  foreground: "text-foreground",
+  primary: "text-primary",
+  success: "text-success",
+  warning: "text-warning"
+};
+var textClassNameByAlign = {
+  start: "text-left",
+  center: "text-center",
+  end: "text-right"
+};
+function Text({
+  as,
+  variant = "micro",
+  tone = "default",
+  align,
+  numeric = false,
+  truncate = false,
+  className: _className,
+  style: _style,
+  ...props
+}) {
+  const Component = as ?? defaultTextElementByVariant[variant];
+  return React.createElement(Component, {
+    ...props,
+    className: cn(
+      textClassNameByVariant[variant],
+      textClassNameByTone[tone],
+      align && textClassNameByAlign[align],
+      numeric && "tabular-nums",
+      truncate && "truncate"
+    )
+  });
+}
+Text.displayName = "WarmText";
+function StackedDisplay({
+  align = "start",
+  firstLine,
+  presentation = "dashboard",
+  secondLine
+}) {
+  const firstLineClassName = presentation === "welcome" ? "block text-muted-foreground font-editorial" : "block text-foreground";
+  const secondLineClassName = presentation === "welcome" ? "block text-foreground" : "block text-muted-foreground font-editorial";
+  return /* @__PURE__ */ jsxs(Text, { as: "span", variant: "displayCompact", align, children: [
+    /* @__PURE__ */ jsx("span", { className: firstLineClassName, children: firstLine }),
+    /* @__PURE__ */ jsx("span", { className: secondLineClassName, children: secondLine })
+  ] });
+}
+StackedDisplay.displayName = "WarmStackedDisplay";
+
+export {
+  Text,
+  StackedDisplay
+};

package/dist/chunks/chunk-KCEDMF2I.js

@@ -0,0 +1,124 @@
+import {
+  Button,
+  buttonVariants
+} from "./chunk-T2TXMN3G.js";
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/warmio/button.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var buttonPresentationSize = {
+  assistantIcon: "icon-xs",
+  assistantRoundIcon: "icon-round",
+  composerIcon: "icon-sm",
+  default: "default",
+  compact: "sm",
+  controlPeer: "default",
+  editPill: "sm",
+  hero: "lg",
+  menuOption: "option",
+  promptCategory: "default",
+  promptOption: "option",
+  sidebarIcon: "icon",
+  tableHeader: "default",
+  threadMore: "icon-xs",
+  threadNew: "sm",
+  touch: "default"
+};
+var buttonPresentationClasses = {
+  assistantIcon: "size-6 p-1 active:scale-90",
+  composerIcon: "size-7 p-1",
+  editPill: "rounded-full px-3",
+  hero: "h-12 rounded-xl bg-clip-border px-6 py-2 text-base font-bold",
+  promptCategory: "h-9 gap-1.5 rounded-full border border-border bg-background px-3.5 text-sm font-normal text-foreground shadow-xs transition-colors hover:bg-muted",
+  promptOption: "min-h-16 items-start justify-start gap-2 rounded-xl px-3 py-3 text-sm",
+  sidebarIcon: "bg-clip-border text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground dark:hover:bg-white/6 dark:hover:text-sidebar-foreground",
+  // Flush with WarmTableHead/Cell edge inset so labels align with row content.
+  tableHeader: "h-auto min-h-0 w-full justify-start gap-1 rounded-lg px-0 py-0 font-normal text-muted-foreground hover:bg-transparent hover:text-foreground data-[align=end]:justify-end",
+  touch: "min-h-11",
+  threadMore: "size-6 p-0",
+  threadNew: "h-8 justify-start gap-2 rounded-lg px-2.5 text-sm font-normal hover:bg-muted data-active:bg-muted"
+};
+var buttonVariantBase = {
+  apple: "outline",
+  default: "default",
+  destructive: "destructive",
+  ghost: "ghost",
+  outline: "outline"
+};
+var buttonVariantClasses = {
+  apple: "border-black bg-black text-white hover:bg-black/90 hover:text-white [&_.warm-loader-logo]:invert"
+};
+var buttonInputAlignmentClasses = {
+  default: "bg-clip-border py-1"
+};
+function resolveButton(presentation, size, variant) {
+  const resolvedSize = size ?? buttonPresentationSize[presentation];
+  const presentationClassName = !size && buttonPresentationClasses[presentation] ? buttonPresentationClasses[presentation] : buttonInputAlignmentClasses[resolvedSize];
+  return {
+    presentationClassName,
+    primitiveVariant: buttonVariantBase[variant],
+    resolvedSize,
+    variantClassName: buttonVariantClasses[variant]
+  };
+}
+var Button2 = React.forwardRef(function Button3({
+  className: _className,
+  presentation = "default",
+  size,
+  style: _style,
+  variant = "default",
+  width,
+  ...props
+}, ref) {
+  const { presentationClassName, primitiveVariant, resolvedSize, variantClassName } = resolveButton(
+    presentation,
+    size,
+    variant
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      ...props,
+      ref,
+      variant: primitiveVariant,
+      size: resolvedSize,
+      "data-variant": variant,
+      className: cn(presentationClassName, variantClassName, width === "full" && "w-full")
+    }
+  );
+});
+Button2.displayName = "WarmButton";
+var ButtonLink = React.forwardRef(function ButtonLink2({ children, presentation = "default", size, variant = "default", width, ...props }, ref) {
+  const { presentationClassName, primitiveVariant, resolvedSize, variantClassName } = resolveButton(
+    presentation,
+    size,
+    variant
+  );
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      ...props,
+      ref,
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": resolvedSize,
+      className: cn(
+        buttonVariants({ size: resolvedSize, variant: primitiveVariant }),
+        presentationClassName,
+        variantClassName,
+        "focus-visible:outline-2 focus-visible:outline-solid focus-visible:outline-offset-2 focus-visible:outline-ring",
+        width === "full" && "w-full"
+      ),
+      children
+    }
+  );
+});
+ButtonLink.displayName = "WarmButtonLink";
+
+export {
+  Button2 as Button,
+  ButtonLink
+};

package/dist/chunks/chunk-OWDC2VC6.js

@@ -0,0 +1,135 @@
+import {
+  Button
+} from "./chunk-T2TXMN3G.js";
+import {
+  cn
+} from "./chunk-VIB7OX7D.js";
+
+// ../ui/src/components/sheet.tsx
+import * as React from "react";
+import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
+import { XIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Sheet(props) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Root, { ...props });
+}
+function SheetTrigger({ asChild = false, children, render, ...props }) {
+  const resolvedRender = render ?? (asChild && React.isValidElement(children) ? children : void 0);
+  return /* @__PURE__ */ jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
+}
+function SheetClose({ asChild = false, children, render, ...props }) {
+  const resolvedRender = render ?? (asChild && React.isValidElement(children) ? children : void 0);
+  return /* @__PURE__ */ jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", render: resolvedRender, ...props, children: resolvedRender ? void 0 : children });
+}
+function SheetPortal({ ...props }) {
+  return /* @__PURE__ */ jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Backdrop,
+    {
+      "data-slot": "sheet-overlay",
+      className: cn(
+        "fixed inset-0 z-[var(--z-overlay-backdrop)] bg-black/20 duration-100 supports-backdrop-filter:backdrop-blur data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
+  overlayClassName,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
+    /* @__PURE__ */ jsxs(
+      SheetPrimitive.Popup,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-[calc(var(--z-overlay-backdrop)+1)] flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:max-h-[calc(100dvh-var(--safe-area-inset-top)-var(--safe-area-inset-bottom))] data-[side=bottom]:overflow-y-auto data-[side=bottom]:border-t data-[side=bottom]:pb-[var(--safe-area-inset-bottom)] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:pt-[var(--safe-area-inset-top)] data-[side=left]:pb-[var(--safe-area-inset-bottom)] data-[side=left]:pl-[var(--safe-area-inset-left)] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:pt-[var(--safe-area-inset-top)] data-[side=right]:pr-[var(--safe-area-inset-right)] data-[side=right]:pb-[var(--safe-area-inset-bottom)] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:max-h-[calc(100dvh-var(--safe-area-inset-top)-var(--safe-area-inset-bottom))] data-[side=top]:overflow-y-auto data-[side=top]:border-b data-[side=top]:pt-[var(--safe-area-inset-top)] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10 motion-reduce:animate-none motion-reduce:transition-none",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            SheetPrimitive.Close,
+            {
+              "data-slot": "sheet-close",
+              render: /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  className: "absolute top-[max(1rem,var(--safe-area-inset-top))] right-[max(1rem,var(--safe-area-inset-right))]",
+                  size: "icon-sm"
+                }
+              ),
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-1.5 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn("font-heading font-bold text-foreground", className),
+      ...props
+    }
+  );
+}
+function SheetDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    SheetPrimitive.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription
+};