@devalok/shilp-sutra 0.31.0 → 0.33.0

package/llms.txt

@@ -4,6 +4,54 @@
 > Built on the same primitives as shadcn/ui but with key API differences.
 > Read this file BEFORE writing any UI code. Do NOT guess from shadcn/ui knowledge.
 
+## BREAKING CHANGES (v0.33.0)
+
+- **EmojiSuggestion:** Named export removed. Use `createEmojiSuggestion(set?)` factory. Default: `createEmojiSuggestion()` (native set).
+- **Emoji HTML output:** Non-native `emojiSet` renders emoji as `<span data-emoji-id="..." data-emoji-set="..." role="img">native</span>` nodes, not raw Unicode. `plainText` still returns Unicode.
+
+## CHANGES (v0.33.0)
+
+- **RichChatInput v2** — Complete rewrite. Structured output (`html`, `plainText`, `attachments?`, `voiceNote?`). Zone architecture. 4 variants: `compact` (default), `expanded`, `minimal`, `inline`. Props: `onSubmit`, `onSchedule?(msg, date)`, `mentions?`, `slashCommands?`, `onFileUpload?`, `onImageUpload?`, `onVoiceRecord?`, `onTranscribe?`, `replyTo?`, `toolbar?`, `emojiSet?`, `actionButton?`, `enterBehavior?`, `maxLength?`, `isStreaming?`, `disclaimer?`, `sendOptions?`, `leadingSlot?`, `trailingSlot?`.
+- **Custom EmojiNode** — TipTap inline atom node. Renders emoji via spritesheet images for consistent Apple/Google/Twitter/Facebook art styles. `emojiSet` prop on `EmojiPicker`, `EmojiPickerPopover`, `RichChatInput`, `RichTextEditor`. Sets: `native` (default), `apple`, `google`, `twitter`, `facebook`.
+- **SplitButton** (`ui/`) — `[Action | ▼]` button with dropdown. Props: `variant(solid|soft|outline)`, `color`, `size`, `triggerSide(left|right)`, `triggerWidth`, `placement` (Floating UI), `dropdownContent`. Proper ARIA: `role="group"`, `aria-haspopup`, `aria-expanded`.
+- **Schedule Send** — `onSchedule?(msg, date)` on RichChatInput. Smart presets (time-of-day aware) + DateTimePicker. Banner shows scheduled time. Send button morphs to SplitButton.
+- **ButtonGroup rebuild** — Compound component pattern. Button reads position from context, applies radius inline. New props: `disabled` (propagates), `attached` (true/false), `fullWidth`. Tonal dividers for solid/soft/ghost variants. Focus z-index isolation.
+- **TipTap v2 → v3** — `useEditorState`, `immediatelyRender: false` (SSR-safe), `ListKit`. Fixes React 19 `removeChild` crash.
+- **Composable toolbar** — Exported: `ToolbarButton`, `ToolbarDivider`, `ToolbarGroup`, `BoldButton`, `ItalicButton`, `UnderlineButton`, `StrikeButton`, `HighlightButton`, `CodeButton`, `BulletListButton`, `OrderedListButton`, `BlockquoteButton`, `LinkButton`, `EmojiButton`.
+- **Button `disabled`** — Now inherited from ButtonGroup context.
+
+## BREAKING CHANGES (v0.32.0)
+
+- **Button:** `variant="default"` removed (use `"solid"`), `variant="destructive"` removed (use `variant="solid" color="error"`), `color="default"` removed (use `"accent"`).
+- **Chip:** Removed. Use `Badge` instead.
+- **SegmentedControl:** Rewritten. `variant="filled"` → `"accent"`, `variant="tonal"` → `"default"`. `SegmentedControlItem` no longer exported. Legacy sizes `small`/`medium`/`big` removed.
+- **TopBar:** Now renders as `<header>` (was `<div>`).
+- **Sidebar:** Now renders as `<aside>` (was `<div>`).
+- **InfoBlock:** `role="status"` (was `role="alert"`).
+- **Border tokens:** One step darker system-wide.
+- **Dark mode button text:** Pure white `neutral-0` (#fff) on brand-colored buttons.
+- **BottomNavbar:** Bottom padding is now `pb-safe` (safe-area-inset).
+- **ResponsiveOverlay:** Deprecated. Use Dialog or Sheet directly.
+- **iOS inputs:** Forced to `font-size: max(16px, 1em)` on mobile via preset.
+
+## CHANGES (v0.32.0)
+
+- **Mobile Responsiveness:**
+  - Dialog auto-fullScreens on mobile (<768px). Opt out: `<DialogContent responsive={false}>`.
+  - Sheet auto-bottom with swipe-to-dismiss on mobile. Drag handle, 30% threshold. Opt out: `<SheetContent responsive={false}>`.
+  - Popover renders as bottom drawer on mobile automatically.
+  - `.touch-target` utility — 44px invisible hit area for Apple HIG compliance.
+  - `.pt-safe`, `.pb-safe`, `.pl-safe`, `.pr-safe`, `.p-safe` — safe area inset utilities.
+  - `useTouchDevice()` — detects touch capability (vs viewport width).
+  - `useViewportHeight()` — dynamic viewport height via Visual Viewport API.
+  - Sidebar has swipe-to-close on mobile.
+- **DataTable `mobileView="card"`** — Rows render as stacked cards below 640px. First column = card title, rest = label-value pairs.
+- **DataTable `aria-sort`** — Sortable column headers include `aria-sort`.
+- **Charts `ariaLabel` prop** — Configurable screen reader label on all chart components.
+- **SegmentedControl** — Redesigned: `variant="default"` (white pill + shadow-sm) | `variant="accent"` (brand pill). Inset radius, snappy spring animation.
+- **`--shadow-kbd` token** — Keyboard shortcut badge shadow. Use `shadow-kbd` utility.
+- **Checkbox/Radio `size` prop** — `sm | md (default) | lg`.
+
 ## CHANGES (v0.31.0)
 - **Alert `size` prop** — `sm | md (default) | lg`. Scales padding, gap, icon, text.
 - **Card `color` prop** — `default | accent | error | success | warning | info | neutral`. Semantic border color.
@@ -327,6 +375,8 @@ Components with two-axis system: Button, Badge, Alert, Banner, Progress, StatusB
 ### Inputs & Controls
 - Button: variant(solid|soft|outline|ghost|link) color(accent|error|success|warning|neutral) size(xs|sm|md|lg|compact-xs|compact-sm|compact-md|icon-xs|icon-sm|icon-md|icon-lg) shape(default|pill) weight(semibold|normal) + loading, startIcon, endIcon, asChild, processing?('ambient'|'working'|'urgent'|boolean — marching ants SVG border, forces soft variant), processingColor?('accent'|'error'|'success'|'warning'|'neutral'), processingDisabled?(boolean, default true — set false for cancel-by-click). onClickAsync auto-activates processing='working' during loading phase. Layout animation always on. Deprecated aliases still work: variant="default"→solid, variant="destructive"→solid+error, color="default"→accent
 - IconButton: icon(ReactNode, required) shape(square|circle) size(sm|md|lg) + aria-label required
+- SplitButton: [Action | ▼] button with dropdown. Props: variant(solid|soft|outline), color, size(xs|sm|md|icon-xs|icon-sm|icon-md), triggerSide(left|right, default right), triggerWidth?(number|string), placement?(Floating UI Placement, default top-end), dropdownContent(ReactNode), open?, onOpenChange?, dropdownLabel?, dropdownIcon?. ARIA: role="group", aria-haspopup="menu", aria-expanded.
+- ButtonGroup: Visually merges adjacent Buttons. Props: variant, color, size, disabled (propagates), orientation(horizontal|vertical), attached(true|false, default true), fullWidth. Compound pattern: Button reads position from context, applies radius + border-removal inline. Tonal dividers for solid/soft/ghost. Focus z-index isolation.
 - Icon: `<Icon icon={IconPlus} />` — context-aware wrapper for Tabler icons. Size tiers: xs(14px) sm(16px) md(18px) lg(20px) xl(24px) 2xl(32px). Default: md. Stroke: light(1.5) regular(2) bold(2.5). Default: regular. Scales per size tier. Reads size from parent Button/IconGroup via IconContext. Explicit props override. Accessibility: aria-hidden by default. Pass label="Add item" for accessible icons. Animation: animate="spin|pulse|bounce|draw". `draw` renders SVG path-draw animation (check/X icons draw progressively via pathLength; other icons fall back to static). State machine: state="idle|loading|success|error". Button integration: startIcon={<Icon icon={IconPlus} />} (NOT raw <IconPlus />). IconGroup: <IconGroup size="sm" gap="tight"> for toolbar patterns.
 - Input: size(xs|sm|md|lg) state(InputState) + startSection(ReactNode), endSection(ReactNode), startSectionClickable(bool), endSectionClickable(bool), startSectionType('icon'|'label'), endSectionType('icon'|'label'), wrapperClassName(string). Container-level focus ring wraps input + sections as one unit. Sections are pointer-events-none by default; use *SectionClickable for interactive content (clear buttons, toggles). Section type auto-inferred: strings→'label' (tinted bg + border separator), React elements→'icon' (fixed-width centered). Override with *SectionType. Flexbox section layout. Icons auto-size via IconProvider per input size. className targets <input>, wrapperClassName targets wrapper div. Deprecated aliases: startIcon→startSection, endIcon→endSection, inputVariants→inputWrapperVariants. Type: InputState = 'default' | 'error' | 'warning' | 'success'
 - SearchInput: size(xs|sm|md|lg) + loading, onClear. Delegates to Input v2 sections internally.
@@ -427,8 +477,9 @@ Import: `@devalok/shilp-sutra/ui/chat`
 - Presets: date range quick-select buttons — presets(PresetKey[]), onSelect(start, end). Keys: today, yesterday, last7days, last30days, thisMonth, lastMonth, thisYear
 - useCalendar: hook for calendar month state — returns currentMonth, goToPreviousMonth, goToNextMonth, goToMonth, goToYear
 - (UploadProgress REMOVED — upload tracking is now built into toast.upload())
-- RichTextEditor: Tiptap editor — bold/italic/underline/strike/highlight, headings, blockquote, lists (bullet/ordered/task), code, links, images (paste/drop/upload), file attachments, @mentions, emoji picker + :shortcode:, text alignment, HR. Props: onImageUpload?, onFileUpload?, mentions?, onMentionSearch?, onMentionSelect?(item: MentionItem)
+- RichTextEditor: Tiptap editor — bold/italic/underline/strike/highlight, headings, blockquote, lists (bullet/ordered/task), code, links, images (paste/drop/upload), file attachments, @mentions, emoji picker + :shortcode:, text alignment, HR. Props: onImageUpload?, onFileUpload?, mentions?, onMentionSearch?, onMentionSelect?(item: MentionItem), emojiSet?(native|apple|google|twitter|facebook)
 - RichTextViewer: read-only renderer for RichTextEditor HTML content (renders all above content types)
+- RichChatInput: compact rich text chat input for AI/messaging. Output: RichChatInputMessage { html, plainText, attachments?, voiceNote? }. Variants: compact(default), expanded, minimal, inline. Key props: onSubmit(msg), onSchedule?(msg,date), emojiSet?, mentions?, slashCommands?, onFileUpload?, onImageUpload?, onVoiceRecord?, replyTo?, toolbar?(bool|items[]|ReactNode), actionButton?(ReactNode|false), enterBehavior?(send|newline), maxLength?, isStreaming?, onCancel?, disclaimer?, sendOptions?, leadingSlot?, trailingSlot?. Composable toolbar primitives exported: ToolbarButton, ToolbarDivider, ToolbarGroup, BoldButton, ItalicButton, etc.
 - ActivityFeed: items(ActivityItem[]), onLoadMore, loading, hasMore, emptyState, compact, maxInitialItems, groupBy?('time'|'none'), groupLabels?({ today, yesterday, thisWeek, older }), renderItem?((item, index) => ReactNode|undefined, custom renderer per item — return ReactNode for custom, undefined for default). Type: ActivityItem = { id, actor?, action, timestamp, icon?, color?, detail? }. Utility: groupItemsByTime(items, labels) exported.
 - CommandPalette: open, defaultOpen, onOpenChange (controlled/uncontrolled), keybinding(string|string[]|false), maxHeight, emptyState(ReactNode), footerHints(FooterHint[]|false). CommandItem: label(string|ReactNode), description(string|ReactNode), renderLabel(query=>ReactNode), filterValue(string), shortcut(rendered as keycap badges). Keyboard shortcuts rendered per-key with platform-aware Cmd/Ctrl. Reduced-motion support via MotionProvider.
 - MemberPicker: thin wrapper around MultiSelectPopover with Avatar rendering
@@ -441,7 +492,8 @@ Import: `@devalok/shilp-sutra/ui/chat`
 - MasterDetail: selected, onBack, masterWidth, breakpoint(sm|md|lg). Compound: MasterDetail.List, MasterDetail.Detail, MasterDetail.ListItem(active). Desktop=grid, mobile=stacked with back button.
 - ResponsiveOverlay: open, onOpenChange, title, description, breakpoint(sm|md). Dialog on desktop, bottom Sheet on mobile.
 - MarkdownViewer: content(string), compact?, allowHtml?(false), linkTarget?('_blank'). Renders markdown with design system tokens.
-- EmojiPicker: onSelect(emoji), theme(auto|light|dark). Also EmojiPickerPopover wraps in Popover. Lazy-loads emoji-mart.
+- EmojiPicker: onSelect(emoji), set?(native|apple|google|twitter|facebook), theme(auto|light|dark). EmojiPickerPopover wraps in Popover. Lazy-loads emoji-mart with set-specific data.
+- EmojiNode: TipTap inline atom node for spritesheet emoji rendering. Attrs: id, native, set, x, y. Use createEmojiSuggestion(set) to wire :shortcode: autocomplete. Export: EmojiNode, EmojiNodeAttrs, createEmojiSuggestion.
 - FilePreview: url, type?(image|pdf|video|audio|embed), mimeType?, alt?. Auto-detects type. Image zoom, PDF iframe, native video/audio, embed for Figma/YouTube/Loom.
 - ErrorDisplay, GlobalLoading
 - Loading skeletons: CardSkeleton, TableSkeleton, BoardSkeleton, ListSkeleton

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",
@@ -103,11 +103,6 @@
       "default": "./dist/ui/color-swatch.js",
       "types": "./dist/ui/color-swatch.d.ts"
     },
-    "./ui/chip": {
-      "import": "./dist/ui/chip.js",
-      "default": "./dist/ui/chip.js",
-      "types": "./dist/ui/chip.d.ts"
-    },
     "./ui/code": {
       "import": "./dist/ui/code.js",
       "default": "./dist/ui/code.js",
@@ -523,6 +518,11 @@
       "default": "./dist/composed/rich-text-editor.js",
       "types": "./dist/composed/rich-text-editor.d.ts"
     },
+    "./composed/rich-chat-input": {
+      "import": "./dist/composed/rich-chat-input.js",
+      "default": "./dist/composed/rich-chat-input.js",
+      "types": "./dist/composed/rich-chat-input.d.ts"
+    },
     "./composed/simple-tooltip": {
       "import": "./dist/composed/simple-tooltip.js",
       "default": "./dist/composed/simple-tooltip.js",
@@ -706,16 +706,6 @@
     "llms.txt",
     "llms-full.txt"
   ],
-  "scripts": {
-    "build": "vite build && node scripts/post-build.mjs",
-    "build:tokens": "node scripts/copy-tokens.mjs",
-    "build:docs": "node scripts/build-component-docs.mjs",
-    "build:docs:check": "node scripts/build-component-docs.mjs --check",
-    "typecheck": "tsc --noEmit",
-    "lint": "eslint src/",
-    "test": "vitest run",
-    "prepublishOnly": "pnpm build"
-  },
   "peerDependencies": {
     "@emoji-mart/data": "^1.0.0",
     "@emoji-mart/react": "^1.0.0",
@@ -814,19 +804,14 @@
     "@tabler/icons-react": "^3.37.1",
     "@tanstack/react-table": "^8.21.2",
     "@tanstack/react-virtual": "^3.13.19",
-    "@tiptap/core": "^2.27.2",
-    "@tiptap/extension-highlight": "^2.27.2",
-    "@tiptap/extension-image": "^2.27.2",
-    "@tiptap/extension-link": "^2.27.2",
-    "@tiptap/extension-mention": "^2.27.2",
-    "@tiptap/extension-placeholder": "^2.27.2",
-    "@tiptap/extension-task-item": "^2.27.2",
-    "@tiptap/extension-task-list": "^2.27.2",
-    "@tiptap/extension-text-align": "^2.27.2",
-    "@tiptap/extension-underline": "^2.27.2",
-    "@tiptap/react": "^2.27.2",
-    "@tiptap/starter-kit": "^2.27.2",
-    "@tiptap/suggestion": "^2.27.2",
+    "@tiptap/core": "^3.22.3",
+    "@tiptap/extension-highlight": "^3.22.3",
+    "@tiptap/extension-image": "^3.22.3",
+    "@tiptap/extension-mention": "^3.22.3",
+    "@tiptap/extension-text-align": "^3.22.3",
+    "@tiptap/react": "^3.22.3",
+    "@tiptap/starter-kit": "^3.22.3",
+    "@tiptap/suggestion": "^3.22.3",
     "@types/react-syntax-highlighter": "^15.5.13",
     "aria-hidden": "^1.2.4",
     "class-variance-authority": "^0.7.1",
@@ -857,5 +842,19 @@
   "engines": {
     "node": ">=20.19.0"
   },
-  "packageManager": "pnpm@10.0.0"
-}
+  "dependencies": {
+    "@floating-ui/dom": "^1.6.0",
+    "@tiptap/extension-list": "^3.22.3",
+    "@tiptap/extensions": "^3.22.3",
+    "prosemirror-state": "^1.4.4"
+  },
+  "scripts": {
+    "build": "vite build && node scripts/post-build.mjs",
+    "build:tokens": "node scripts/copy-tokens.mjs",
+    "build:docs": "node scripts/build-component-docs.mjs",
+    "build:docs:check": "node scripts/build-component-docs.mjs --check",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src/",
+    "test": "vitest run"
+  }
+}

package/dist/ui/chip.d.ts

@@ -1,19 +0,0 @@
-"use client";
-import { BadgeProps } from './badge';
-import * as React from 'react';
-/**
- * @deprecated Use `<Badge onClick={...}>` instead of `<Chip>`.
- * This wrapper maps the old Chip API (label prop) to Badge (children).
- */
-interface ChipProps extends Omit<BadgeProps, 'children'> {
-    label: string;
-    icon?: React.ReactElement | null;
-}
-declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLElement>>;
-/**
- * @deprecated Use `<Badge.Group>` for overflow. For exit animations, wrap in `<AnimatePresence>`.
- */
-declare const ChipGroup: ({ children, custom, initial, onExitComplete, presenceAffectsLayout, mode, propagate, anchorX, anchorY, root }: React.PropsWithChildren<import('framer-motion').AnimatePresenceProps>) => import("react/jsx-runtime").JSX.Element | null;
-export { Chip, ChipGroup };
-export type { ChipProps };
-//# sourceMappingURL=chip.d.ts.map

package/dist/ui/chip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/ui/chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAGzC;;;GAGG;AACH,UAAU,SAAU,SAAQ,IAAI,CAAC,UAAU,EAAE,UAAU,CAAC;IACtD,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;CACjC;AAED,QAAA,MAAM,IAAI,+EAMT,CAAA;AAGD;;GAEG;AACH,QAAA,MAAM,SAAS,0OAAkB,CAAA;AAEjC,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,CAAA;AAC1B,YAAY,EAAE,SAAS,EAAE,CAAA"}

package/dist/ui/chip.js

@@ -1,14 +0,0 @@
-"use client";
-import { jsx as p } from "react/jsx-runtime";
-import * as t from "react";
-import { B as a } from "../_chunks/badge-group.js";
-import { A as e } from "../_chunks/framer.js";
-const s = t.forwardRef(
-  ({ label: o, icon: r, ...i }, m) => /* @__PURE__ */ p(a, { ref: m, startIcon: r ?? void 0, ...i, children: o })
-);
-s.displayName = "Chip";
-const f = e;
-export {
-  s as Chip,
-  f as ChipGroup
-};

package/dist/ui/lib/use-ripple.d.ts

@@ -1,14 +0,0 @@
-"use client";
-import { MouseEvent } from 'react';
-interface Ripple {
-    id: number;
-    x: number;
-    y: number;
-    size: number;
-}
-export declare function useRipple(duration?: number): {
-    ripples: Ripple[];
-    createRipple: (e: MouseEvent<HTMLElement>) => void;
-};
-export {};
-//# sourceMappingURL=use-ripple.d.ts.map

package/dist/ui/lib/use-ripple.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-ripple.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/use-ripple.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,KAAK,UAAU,EAAE,MAAM,OAAO,CAAA;AAEjF,UAAU,MAAM;IACd,EAAE,EAAE,MAAM,CAAA;IACV,CAAC,EAAE,MAAM,CAAA;IACT,CAAC,EAAE,MAAM,CAAA;IACT,IAAI,EAAE,MAAM,CAAA;CACb;AAED,wBAAgB,SAAS,CAAC,QAAQ,SAAM;;sBAQD,UAAU,CAAC,WAAW,CAAC;EAgB7D"}