@lessly/ui 1.3.0 → 1.4.0

package/README.md

@@ -42,9 +42,46 @@ import { Button, useTheme } from '@lessly/ui';
 import '@lessly/ui/styles.css';
 ```
 
-Your app's Tailwind config must use the preset so token utilities resolve. The
-preset needs Tailwind CSS >= 3.4 (declared as an optional peer dependency —
-only required if you consume the preset):
+Tailwind is what turns the kit's class names into CSS. The package ships **no
+compiled utility CSS** — every consumer runs its own Tailwind over the token
+preset (`tailwindcss >= 3.4`, an optional peer dependency, required only if you
+consume the preset).
+
+### Tailwind v4 (CSS-first)
+
+Everything is declared in your CSS entry:
+
+```css
+@import 'tailwindcss';
+/* The token preset. v4 has no `presets:` key of its own, so the preset is
+   loaded from a JS/TS config file — without this, `bg-bg-surface`,
+   `text-text-primary` and `gap-gutter` emit nothing at all. */
+@config './tailwind.config.ts';
+/* Token variables, `.light` overrides, fonts, base layer. */
+@import '@lessly/ui/styles.css';
+/* Scan the library. v4 does not scan `node_modules` on its own, and the kit's
+   components (Grid, Col, …) carry literal utilities (`md:col-span-5`,
+   `gap-gutter`) as strings inside `dist/index.js`. The glob matters: a bare
+   directory path is skipped, because Tailwind honours your `.gitignore` and
+   `node_modules/` is in it. */
+@source './node_modules/@lessly/ui/dist/**/*.js';
+```
+
+with the config file next to it holding nothing but the preset:
+
+```ts
+import type { Config } from 'tailwindcss';
+import { lesslyPreset } from '@lessly/ui/tailwind-preset';
+export default { presets: [lesslyPreset] } satisfies Config;
+```
+
+Paths in `@source` and `@config` are relative to the CSS file. If your CSS entry
+sits in `src/`, they read `'../tailwind.config.ts'` and
+`'../node_modules/@lessly/ui/dist/**/*.js'`.
+
+### Tailwind v3
+
+The preset and the library scan both go in the JS config:
 
 ```ts
 import { lesslyPreset } from '@lessly/ui/tailwind-preset';

package/dist/index.d.ts

@@ -128,6 +128,11 @@ interface CardProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, 'title'
      * action no bar is drawn at all, so a list starts at the top of the card.
      */
     title?: React$1.ReactNode;
+    /**
+     * The native HTML tooltip on the card's box, shown by the browser on hover. `title` is the
+     * visible heading here, so this is the only way to set the attribute.
+     */
+    tooltip?: string;
     action?: React$1.ReactNode;
     /**
      * `list` clips to the card's radius and hairlines between children.

package/dist/index.js

@@ -204,10 +204,11 @@ Button.displayName = "Button";
 import * as React3 from "react";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var Card = React3.forwardRef(
-  ({ className, title, action, variant = "default", children, ...props }, ref) => /* @__PURE__ */ jsxs2(
+  ({ className, title, tooltip, action, variant = "default", children, ...props }, ref) => /* @__PURE__ */ jsxs2(
     "div",
     {
       ref,
+      title: tooltip,
       className: cn(
         "rounded-xl border border-border-subtle bg-bg-surface text-text-primary shadow-sm",
         variant === "list" && "overflow-hidden",
@@ -3886,21 +3887,21 @@ var ImageCropper = React57.forwardRef(
     React57.useLayoutEffect(() => {
       const el = stageRef.current;
       if (!el) return void 0;
-      const read = () => {
-        const rect = el.getBoundingClientRect();
+      const read = (entry) => {
         const style = typeof getComputedStyle === "function" ? getComputedStyle(el) : null;
         const edge = (value) => value ? parseFloat(value) || 0 : 0;
         const bl = edge(style?.borderLeftWidth);
         const bt = edge(style?.borderTopWidth);
         inset.current = { left: bl, top: bt };
-        const w = rect.width - bl - edge(style?.borderRightWidth);
-        const h = rect.height - bt - edge(style?.borderBottomWidth);
+        const border = entry?.borderBoxSize?.[0];
+        const w = border ? border.inlineSize - bl - edge(style?.borderRightWidth) : el.clientWidth;
+        const h = border ? border.blockSize - bt - edge(style?.borderBottomWidth) : el.clientHeight;
         if (w <= 0 || h <= 0) return;
         setStage((prev) => prev.w === w && prev.h === h ? prev : { w, h });
       };
       read();
       if (typeof ResizeObserver === "undefined") return void 0;
-      const observer = new ResizeObserver(read);
+      const observer = new ResizeObserver((entries) => read(entries[0]));
       observer.observe(el);
       return () => observer.disconnect();
     }, []);
@@ -5107,13 +5108,13 @@ function ItemLabel({ item, kind }) {
   const name = nameOf(item);
   return /* @__PURE__ */ jsx85("span", { className: cn("min-w-0 flex-1 truncate", !name && "text-text-tertiary"), children: name ?? UNNAMED[kind] });
 }
-function Mark2({ item, size }) {
+function Mark2({ item, size, reserve }) {
   const box = size === "md" ? "size-7" : "size-5";
   if (item.icon) {
     return /* @__PURE__ */ jsx85("span", { className: cn("flex shrink-0 items-center justify-center overflow-hidden rounded-md", box), "aria-hidden": "true", children: item.icon });
   }
   const initial = nameOf(item)?.trim().charAt(0).toUpperCase();
-  if (!initial) return null;
+  if (!initial) return reserve ? /* @__PURE__ */ jsx85("span", { "aria-hidden": "true", className: cn("shrink-0", box) }) : null;
   return /* @__PURE__ */ jsx85(
     "span",
     {
@@ -5172,7 +5173,7 @@ function OrgProductSwitcher({
         children: [
           /* @__PURE__ */ jsx85(DropdownMenuLabel, { className: sectionLabel, children: "Organizations" }),
           organizations.map((o) => /* @__PURE__ */ jsxs56(DropdownMenuItem, { className: menuItem, onSelect: () => onOrgSelect(o.id), children: [
-            /* @__PURE__ */ jsx85(Mark2, { item: o, size: "sm" }),
+            /* @__PURE__ */ jsx85(Mark2, { item: o, size: "sm", reserve: true }),
             /* @__PURE__ */ jsx85(ItemLabel, { item: o, kind: "organization" }),
             o.id === activeOrgId && /* @__PURE__ */ jsx85(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
           ] }, o.id)),
@@ -5180,7 +5181,7 @@ function OrgProductSwitcher({
             /* @__PURE__ */ jsx85(DropdownMenuSeparator, { className: "mx-0 shrink-0 bg-border-subtle" }),
             /* @__PURE__ */ jsx85(DropdownMenuLabel, { className: sectionLabel, children: orgName ? `${orgName} \xB7 Products` : "Products" }),
             products.map((p) => /* @__PURE__ */ jsxs56(DropdownMenuItem, { className: menuItem, onSelect: () => onProductSelect?.(p.id), children: [
-              /* @__PURE__ */ jsx85(Mark2, { item: p, size: "sm" }),
+              /* @__PURE__ */ jsx85(Mark2, { item: p, size: "sm", reserve: true }),
               /* @__PURE__ */ jsx85(ItemLabel, { item: p, kind: "product" }),
               p.id === activeProductId && /* @__PURE__ */ jsx85(Check9, { className: "size-4 shrink-0 text-text-secondary", "aria-hidden": "true" })
             ] }, p.id))

package/dist/styles.css

@@ -643,6 +643,12 @@
 /* === Animation layer (tw-animate-css, compiled) — see scripts/build-styles.mjs === */
 /*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
 @layer properties;
+.slide-in-from-left-2 {
+  --tw-enter-translate-x: calc(2*var(--spacing)*-1);
+}
+.slide-in-from-top-2 {
+  --tw-enter-translate-y: calc(2*var(--spacing)*-1);
+}
 .data-\[motion\=from-end\]\:slide-in-from-right-52 {
   &[data-motion="from-end"] {
     --tw-enter-translate-x: calc(52*var(--spacing));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lessly/ui",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Lessly design system — shared UI primitives, tokens, and theme",
   "type": "module",
   "packageManager": "pnpm@10.30.3",