@otfdashkit/ui 0.1.8 → 0.1.10

package/dist/index.d.mts

@@ -1668,7 +1668,7 @@ type RichEditorProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onCh
     onChange?: (html: string) => void;
     /** Placeholder shown when the document is empty. */
     placeholder?: string;
-    /** Default true. When false the toolbar is visually disabled and content read-only. */
+    /** Default true. When false the content is read-only and no toolbar is shown. */
     editable?: boolean;
     /** Toolbar layout. Default 'full'. */
     toolbar?: RichEditorToolbarVariant;
@@ -1684,7 +1684,7 @@ declare const RichEditor: React__default.ForwardRefExoticComponent<Omit<React__d
     onChange?: (html: string) => void;
     /** Placeholder shown when the document is empty. */
     placeholder?: string;
-    /** Default true. When false the toolbar is visually disabled and content read-only. */
+    /** Default true. When false the content is read-only and no toolbar is shown. */
     editable?: boolean;
     /** Toolbar layout. Default 'full'. */
     toolbar?: RichEditorToolbarVariant;

package/dist/index.d.ts

@@ -1668,7 +1668,7 @@ type RichEditorProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onCh
     onChange?: (html: string) => void;
     /** Placeholder shown when the document is empty. */
     placeholder?: string;
-    /** Default true. When false the toolbar is visually disabled and content read-only. */
+    /** Default true. When false the content is read-only and no toolbar is shown. */
     editable?: boolean;
     /** Toolbar layout. Default 'full'. */
     toolbar?: RichEditorToolbarVariant;
@@ -1684,7 +1684,7 @@ declare const RichEditor: React__default.ForwardRefExoticComponent<Omit<React__d
     onChange?: (html: string) => void;
     /** Placeholder shown when the document is empty. */
     placeholder?: string;
-    /** Default true. When false the toolbar is visually disabled and content read-only. */
+    /** Default true. When false the content is read-only and no toolbar is shown. */
     editable?: boolean;
     /** Toolbar layout. Default 'full'. */
     toolbar?: RichEditorToolbarVariant;

package/dist/index.js

@@ -3503,7 +3503,7 @@ function DataTableColumnHeader({ column, title }) {
       className: "flex items-center gap-1 hover:text-[hsl(var(--foreground))]",
       children: [
         title,
-        sorted === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3 w-3 opacity-50" })
+        sorted === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3 w-3" })
       ]
     }
   );
@@ -6998,24 +6998,12 @@ var RichEditor = React137__namespace.default.forwardRef(
         className: cn(
           "overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]",
           "focus-within:ring-2 focus-within:ring-[hsl(var(--ring))]",
-          !editable && "opacity-90",
           className
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              className: cn(
-                !editable && "pointer-events-none select-none opacity-60"
-              ),
-              "aria-hidden": !editable || void 0,
-              children: [
-                toolbar === "full" ? /* @__PURE__ */ jsxRuntime.jsx(FullToolbar, { editor }) : null,
-                toolbar === "minimal" ? /* @__PURE__ */ jsxRuntime.jsx(MinimalToolbar, { editor }) : null
-              ]
-            }
-          ),
+          editable && toolbar === "full" ? /* @__PURE__ */ jsxRuntime.jsx(FullToolbar, { editor }) : null,
+          editable && toolbar === "minimal" ? /* @__PURE__ */ jsxRuntime.jsx(MinimalToolbar, { editor }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(react$1.EditorContent, { editor }),
           toolbar === "bubble" && editable ? /* @__PURE__ */ jsxRuntime.jsx(BubbleToolbar, { editor }) : null,
           maxLength != null ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-end border-t border-[hsl(var(--border))] bg-[hsl(var(--muted))]/30 px-3 py-1.5", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -10845,7 +10833,7 @@ function Checkbox2({
 function SortIcon({ dir }) {
   if (dir === "asc") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUp, { className: "h-3.5 w-3.5 shrink-0" });
   if (dir === "desc") return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowDown, { className: "h-3.5 w-3.5 shrink-0" });
-  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-30" });
+  return /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0" });
 }
 function ColumnVisibilityDropdown({
   columns,
@@ -11298,7 +11286,7 @@ var EventCalendar = React137__namespace.default.forwardRef(
             "div",
             {
               "data-slot": "event-calendar-header",
-              className: "flex items-center justify-between gap-2 border-b border-border px-3 py-2",
+              className: "flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2",
               children: [
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsxRuntime.jsx(
@@ -11338,7 +11326,7 @@ var EventCalendar = React137__namespace.default.forwardRef(
                   "div",
                   {
                     "data-slot": "event-calendar-title",
-                    className: "text-sm font-medium tabular-nums",
+                    className: "whitespace-nowrap text-sm font-medium tabular-nums",
                     children: headerLabel
                   }
                 ),
@@ -11430,7 +11418,16 @@ function MonthView({
     return Array.from({ length: 7 }, (_, i) => dateFns.format(dateFns.addDays(start, i), "EEE"));
   }, [weekStartsOn]);
   const today = /* @__PURE__ */ new Date();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", "data-slot": "event-calendar-month", children: [
+  const gridRef = React137__namespace.default.useRef(null);
+  const [compact, setCompact] = React137__namespace.default.useState(false);
+  React137__namespace.default.useEffect(() => {
+    const el = gridRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setCompact(el.clientWidth / 7 < 72));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: gridRef, className: "flex flex-col", "data-slot": "event-calendar-month", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-7 border-b border-border", children: weekdayLabels.map((label) => /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -11493,6 +11490,7 @@ function MonthView({
                 EventChip,
                 {
                   event: ev,
+                  compact,
                   onClick: () => onEventClick?.(ev)
                 },
                 ev.id
@@ -11534,6 +11532,7 @@ function MonthView({
 }
 function EventChip({
   event,
+  compact,
   onClick
 }) {
   const color = event.color ?? DEFAULT_COLOR3;
@@ -11547,7 +11546,10 @@ function EventChip({
         onClick?.();
       },
       title: event.title,
-      className: "group/chip flex w-full items-center gap-1.5 truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium text-foreground hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className: cn(
+        "group/chip flex w-full items-center gap-1.5 truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium text-foreground hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        compact && "h-4 justify-center px-0"
+      ),
       style: {
         backgroundColor: `color-mix(in oklab, ${color} 22%, transparent)`
       },
@@ -11560,7 +11562,7 @@ function EventChip({
             style: { backgroundColor: color }
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate", children: event.title })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: compact ? "sr-only" : "truncate", children: event.title })
       ]
     }
   );

package/dist/index.mjs

@@ -3450,7 +3450,7 @@ function DataTableColumnHeader({ column, title }) {
       className: "flex items-center gap-1 hover:text-[hsl(var(--foreground))]",
       children: [
         title,
-        sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3 opacity-50" })
+        sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-3 w-3" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3 w-3" })
       ]
     }
   );
@@ -6945,24 +6945,12 @@ var RichEditor = React137__default.forwardRef(
         className: cn(
           "overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]",
           "focus-within:ring-2 focus-within:ring-[hsl(var(--ring))]",
-          !editable && "opacity-90",
           className
         ),
         ...rest,
         children: [
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: cn(
-                !editable && "pointer-events-none select-none opacity-60"
-              ),
-              "aria-hidden": !editable || void 0,
-              children: [
-                toolbar === "full" ? /* @__PURE__ */ jsx(FullToolbar, { editor }) : null,
-                toolbar === "minimal" ? /* @__PURE__ */ jsx(MinimalToolbar, { editor }) : null
-              ]
-            }
-          ),
+          editable && toolbar === "full" ? /* @__PURE__ */ jsx(FullToolbar, { editor }) : null,
+          editable && toolbar === "minimal" ? /* @__PURE__ */ jsx(MinimalToolbar, { editor }) : null,
           /* @__PURE__ */ jsx(EditorContent, { editor }),
           toolbar === "bubble" && editable ? /* @__PURE__ */ jsx(BubbleToolbar, { editor }) : null,
           maxLength != null ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end border-t border-[hsl(var(--border))] bg-[hsl(var(--muted))]/30 px-3 py-1.5", children: /* @__PURE__ */ jsxs(
@@ -10792,7 +10780,7 @@ function Checkbox2({
 function SortIcon({ dir }) {
   if (dir === "asc") return /* @__PURE__ */ jsx(ArrowUp, { className: "h-3.5 w-3.5 shrink-0" });
   if (dir === "desc") return /* @__PURE__ */ jsx(ArrowDown, { className: "h-3.5 w-3.5 shrink-0" });
-  return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0 opacity-30" });
+  return /* @__PURE__ */ jsx(ArrowUpDown, { className: "h-3.5 w-3.5 shrink-0" });
 }
 function ColumnVisibilityDropdown({
   columns,
@@ -11245,7 +11233,7 @@ var EventCalendar = React137__default.forwardRef(
             "div",
             {
               "data-slot": "event-calendar-header",
-              className: "flex items-center justify-between gap-2 border-b border-border px-3 py-2",
+              className: "flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2",
               children: [
                 /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
                   /* @__PURE__ */ jsx(
@@ -11285,7 +11273,7 @@ var EventCalendar = React137__default.forwardRef(
                   "div",
                   {
                     "data-slot": "event-calendar-title",
-                    className: "text-sm font-medium tabular-nums",
+                    className: "whitespace-nowrap text-sm font-medium tabular-nums",
                     children: headerLabel
                   }
                 ),
@@ -11377,7 +11365,16 @@ function MonthView({
     return Array.from({ length: 7 }, (_, i) => format(addDays(start, i), "EEE"));
   }, [weekStartsOn]);
   const today = /* @__PURE__ */ new Date();
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", "data-slot": "event-calendar-month", children: [
+  const gridRef = React137__default.useRef(null);
+  const [compact, setCompact] = React137__default.useState(false);
+  React137__default.useEffect(() => {
+    const el = gridRef.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(() => setCompact(el.clientWidth / 7 < 72));
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { ref: gridRef, className: "flex flex-col", "data-slot": "event-calendar-month", children: [
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-7 border-b border-border", children: weekdayLabels.map((label) => /* @__PURE__ */ jsx(
       "div",
       {
@@ -11440,6 +11437,7 @@ function MonthView({
                 EventChip,
                 {
                   event: ev,
+                  compact,
                   onClick: () => onEventClick?.(ev)
                 },
                 ev.id
@@ -11481,6 +11479,7 @@ function MonthView({
 }
 function EventChip({
   event,
+  compact,
   onClick
 }) {
   const color = event.color ?? DEFAULT_COLOR3;
@@ -11494,7 +11493,10 @@ function EventChip({
         onClick?.();
       },
       title: event.title,
-      className: "group/chip flex w-full items-center gap-1.5 truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium text-foreground hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      className: cn(
+        "group/chip flex w-full items-center gap-1.5 truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium text-foreground hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        compact && "h-4 justify-center px-0"
+      ),
       style: {
         backgroundColor: `color-mix(in oklab, ${color} 22%, transparent)`
       },
@@ -11507,7 +11509,7 @@ function EventChip({
             style: { backgroundColor: color }
           }
         ),
-        /* @__PURE__ */ jsx("span", { className: "truncate", children: event.title })
+        /* @__PURE__ */ jsx("span", { className: compact ? "sr-only" : "truncate", children: event.title })
       ]
     }
   );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@otfdashkit/ui",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "OTF UI: 150+ React components for web apps (primitives, blocks, layouts and charts), themed by @otfdashkit/tokens. Works with Tailwind CSS v3 and v4. Shares component names and tokens with @otfdashkit/ui-native.",
   "keywords": [
     "otfdashkit",

package/src/advanced/rich-editor.tsx

@@ -63,7 +63,7 @@ export type RichEditorProps = Omit<
   onChange?: (html: string) => void
   /** Placeholder shown when the document is empty. */
   placeholder?: string
-  /** Default true. When false the toolbar is visually disabled and content read-only. */
+  /** Default true. When false the content is read-only and no toolbar is shown. */
   editable?: boolean
   /** Toolbar layout. Default 'full'. */
   toolbar?: RichEditorToolbarVariant
@@ -657,20 +657,12 @@ export const RichEditor = React.forwardRef<HTMLDivElement, RichEditorProps>(
           className={cn(
             'overflow-hidden rounded-md border border-[hsl(var(--border))] bg-[hsl(var(--card))] text-[hsl(var(--card-foreground))]',
             'focus-within:ring-2 focus-within:ring-[hsl(var(--ring))]',
-            !editable && 'opacity-90',
             className
           )}
           {...rest}
         >
-          <div
-            className={cn(
-              !editable && 'pointer-events-none select-none opacity-60'
-            )}
-            aria-hidden={!editable || undefined}
-          >
-            {toolbar === 'full' ? <FullToolbar editor={editor} /> : null}
-            {toolbar === 'minimal' ? <MinimalToolbar editor={editor} /> : null}
-          </div>
+          {editable && toolbar === 'full' ? <FullToolbar editor={editor} /> : null}
+          {editable && toolbar === 'minimal' ? <MinimalToolbar editor={editor} /> : null}
 
           <EditorContent editor={editor} />
 

package/src/components/DataTable/DataTable.tsx

@@ -34,7 +34,7 @@ export function DataTableColumnHeader({ column, title }: { column: any; title: s
       className="flex items-center gap-1 hover:text-[hsl(var(--foreground))]"
     >
       {title}
-      {sorted === 'asc' ? <ArrowUp className="h-3 w-3" /> : sorted === 'desc' ? <ArrowDown className="h-3 w-3" /> : <ArrowUpDown className="h-3 w-3 opacity-50" />}
+      {sorted === 'asc' ? <ArrowUp className="h-3 w-3" /> : sorted === 'desc' ? <ArrowDown className="h-3 w-3" /> : <ArrowUpDown className="h-3 w-3" />}
     </button>
   )
 }

package/src/data/DataGrid.tsx

@@ -91,7 +91,7 @@ export interface DataGridProps<T extends object> {
 function SortIcon({ dir }: { dir: 'asc' | 'desc' | false }) {
   if (dir === 'asc') return <ArrowUp className="h-3.5 w-3.5 shrink-0" />
   if (dir === 'desc') return <ArrowDown className="h-3.5 w-3.5 shrink-0" />
-  return <ArrowUpDown className="h-3.5 w-3.5 shrink-0 opacity-30" />
+  return <ArrowUpDown className="h-3.5 w-3.5 shrink-0" />
 }
 
 // ── Column visibility dropdown ───────────────────────────────────

package/src/data/EventCalendar.tsx

@@ -181,7 +181,7 @@ export const EventCalendar = React.forwardRef<HTMLDivElement, EventCalendarProps
         {/* Header */}
         <div
           data-slot="event-calendar-header"
-          className="flex items-center justify-between gap-2 border-b border-border px-3 py-2"
+          className="flex flex-wrap items-center justify-between gap-2 border-b border-border px-3 py-2"
         >
           <div className="flex items-center gap-1">
             <Button
@@ -214,7 +214,7 @@ export const EventCalendar = React.forwardRef<HTMLDivElement, EventCalendarProps
 
           <div
             data-slot="event-calendar-title"
-            className="text-sm font-medium tabular-nums"
+            className="whitespace-nowrap text-sm font-medium tabular-nums"
           >
             {headerLabel}
           </div>
@@ -314,9 +314,19 @@ function MonthView({
   }, [weekStartsOn])
 
   const today = new Date()
+  // Day cells under ~72px cannot hold a readable title, so chips collapse to their colour dot.
+  const gridRef = React.useRef<HTMLDivElement>(null)
+  const [compact, setCompact] = React.useState(false)
+  React.useEffect(() => {
+    const el = gridRef.current
+    if (!el || typeof ResizeObserver === 'undefined') return
+    const ro = new ResizeObserver(() => setCompact(el.clientWidth / 7 < 72))
+    ro.observe(el)
+    return () => ro.disconnect()
+  }, [])
 
   return (
-    <div className="flex flex-col" data-slot="event-calendar-month">
+    <div ref={gridRef} className="flex flex-col" data-slot="event-calendar-month">
       <div className="grid grid-cols-7 border-b border-border">
         {weekdayLabels.map((label) => (
           <div
@@ -388,6 +398,7 @@ function MonthView({
                   <EventChip
                     key={ev.id}
                     event={ev}
+                    compact={compact}
                     onClick={() => onEventClick?.(ev)}
                   />
                 ))}
@@ -432,9 +443,11 @@ function MonthView({
 
 function EventChip({
   event,
+  compact,
   onClick,
 }: {
   event: CalendarEvent
+  compact?: boolean
   onClick?: () => void
 }) {
   const color = event.color ?? DEFAULT_COLOR
@@ -447,7 +460,10 @@ function EventChip({
         onClick?.()
       }}
       title={event.title}
-      className="group/chip flex w-full items-center gap-1.5 truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium text-foreground hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      className={cn(
+        'group/chip flex w-full items-center gap-1.5 truncate rounded px-1.5 py-0.5 text-left text-[11px] font-medium text-foreground hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        compact && 'h-4 justify-center px-0'
+      )}
       style={{
         backgroundColor: `color-mix(in oklab, ${color} 22%, transparent)`,
       }}
@@ -457,7 +473,7 @@ function EventChip({
         className="h-2 w-2 flex-shrink-0 rounded-full"
         style={{ backgroundColor: color }}
       />
-      <span className="truncate">{event.title}</span>
+      <span className={compact ? 'sr-only' : 'truncate'}>{event.title}</span>
     </button>
   )
 }