@devalok/shilp-sutra 0.32.0 → 0.33.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/_chunks/date-time-picker.js +851 -0
- package/dist/_chunks/framer.js +1777 -1728
- package/dist/_chunks/mention-suggestion.js +362 -0
- package/dist/_chunks/tiptap.js +11595 -7731
- package/dist/_chunks/use-calendar.js +115 -956
- package/dist/_chunks/vendor-client.js +1062 -878
- package/dist/composed/date-picker/index.js +9 -8
- package/dist/composed/emoji-picker.d.ts +8 -2
- package/dist/composed/emoji-picker.d.ts.map +1 -1
- package/dist/composed/emoji-picker.js +65 -56
- package/dist/composed/extensions/emoji-data.d.ts +35 -0
- package/dist/composed/extensions/emoji-data.d.ts.map +1 -0
- package/dist/composed/extensions/emoji-node.d.ts +11 -0
- package/dist/composed/extensions/emoji-node.d.ts.map +1 -0
- package/dist/composed/extensions/emoji-suggestion.d.ts +4 -6
- package/dist/composed/extensions/emoji-suggestion.d.ts.map +1 -1
- package/dist/composed/extensions/slash-command.d.ts +35 -0
- package/dist/composed/extensions/slash-command.d.ts.map +1 -0
- package/dist/composed/index.d.ts +7 -1
- package/dist/composed/index.d.ts.map +1 -1
- package/dist/composed/index.js +79 -70
- package/dist/composed/rich-chat-input/attachment-strip.d.ts +15 -0
- package/dist/composed/rich-chat-input/attachment-strip.d.ts.map +1 -0
- package/dist/composed/rich-chat-input/audio-player.d.ts +11 -0
- package/dist/composed/rich-chat-input/audio-player.d.ts.map +1 -0
- package/dist/composed/rich-chat-input/audio-waveform.d.ts +24 -0
- package/dist/composed/rich-chat-input/audio-waveform.d.ts.map +1 -0
- package/dist/composed/rich-chat-input/chat-toolbar.d.ts +51 -0
- package/dist/composed/rich-chat-input/chat-toolbar.d.ts.map +1 -0
- package/dist/composed/rich-chat-input/recording-overlay.d.ts +15 -0
- package/dist/composed/rich-chat-input/recording-overlay.d.ts.map +1 -0
- package/dist/composed/rich-chat-input/reply-banner.d.ts +8 -0
- package/dist/composed/rich-chat-input/reply-banner.d.ts.map +1 -0
- package/dist/composed/rich-chat-input/schedule-send.d.ts +22 -0
- package/dist/composed/rich-chat-input/schedule-send.d.ts.map +1 -0
- package/dist/composed/rich-chat-input/use-voice-recorder.d.ts +18 -0
- package/dist/composed/rich-chat-input/use-voice-recorder.d.ts.map +1 -0
- package/dist/composed/rich-chat-input.d.ts +91 -0
- package/dist/composed/rich-chat-input.d.ts.map +1 -0
- package/dist/composed/rich-chat-input.js +1861 -0
- package/dist/composed/rich-text-editor.d.ts +3 -0
- package/dist/composed/rich-text-editor.d.ts.map +1 -1
- package/dist/composed/rich-text-editor.js +278 -448
- package/dist/ui/button-group.d.ts +27 -37
- package/dist/ui/button-group.d.ts.map +1 -1
- package/dist/ui/button-group.js +95 -29
- package/dist/ui/button.d.ts.map +1 -1
- package/dist/ui/button.js +110 -106
- package/dist/ui/index.d.ts +1 -0
- package/dist/ui/index.d.ts.map +1 -1
- package/dist/ui/index.js +335 -333
- package/dist/ui/lib/index.d.ts +1 -0
- package/dist/ui/lib/index.d.ts.map +1 -1
- package/dist/ui/split-button.d.ts +45 -0
- package/dist/ui/split-button.d.ts.map +1 -0
- package/dist/ui/split-button.js +282 -0
- package/docs/components/composed/emoji-picker.md +9 -0
- package/docs/components/composed/rich-chat-input.md +88 -0
- package/docs/components/composed/rich-text-editor.md +5 -0
- package/docs/components/ui/button-group.md +9 -0
- package/docs/components/ui/button.md +4 -0
- package/docs/components/ui/split-button.md +41 -0
- package/llms-full.txt +157 -1
- package/llms.txt +22 -2
- package/package.json +38 -34
package/llms-full.txt
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
> All variant values and props verified from source CVA definitions.
|
|
6
6
|
>
|
|
7
7
|
> Package: @devalok/shilp-sutra
|
|
8
|
-
> Version: 0.
|
|
8
|
+
> Version: 0.33.1
|
|
9
9
|
|
|
10
10
|
---
|
|
11
11
|
|
|
@@ -667,6 +667,10 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
|
|
|
667
667
|
- Grain children (DevalokGrain) are auto-separated and rendered as direct button children for absolute positioning
|
|
668
668
|
|
|
669
669
|
## Changes
|
|
670
|
+
### v0.33.0
|
|
671
|
+
- **Added** `disabled` inherited from ButtonGroup context
|
|
672
|
+
- **Added** Position-aware border-radius when inside an attached ButtonGroup (compound component pattern)
|
|
673
|
+
|
|
670
674
|
### v0.29.0
|
|
671
675
|
- **Added** `soft` variant — tinted background, colored text (new middle ground between solid and ghost)
|
|
672
676
|
- **Added** 5 color options: `accent` (default), `error`, `success`, `warning`, `neutral` (replaces old `default`/`error`-only axis)
|
|
@@ -734,6 +738,15 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
|
|
|
734
738
|
- Children can override variant/size individually
|
|
735
739
|
|
|
736
740
|
## Changes
|
|
741
|
+
### v0.33.0
|
|
742
|
+
- **Rebuilt** with compound component pattern — Button reads position from ButtonGroup context and applies border-radius inline
|
|
743
|
+
- **Added** `disabled` prop (propagates to all children via context)
|
|
744
|
+
- **Added** `attached` prop (default true; false = spaced with gap)
|
|
745
|
+
- **Added** `fullWidth` prop (stretch to fill container)
|
|
746
|
+
- **Added** Tonal divider elements between buttons for solid/soft/ghost variants
|
|
747
|
+
- **Added** Focus z-index isolation (focused button rises above siblings)
|
|
748
|
+
- **Fixed** Border-radius not working with custom `rounded-ds-*` design tokens
|
|
749
|
+
|
|
737
750
|
### v0.4.2
|
|
738
751
|
- **Fixed** `Omit<HTMLAttributes, 'color'>` resolves TS2320 conflict with CVA color prop
|
|
739
752
|
|
|
@@ -3014,6 +3027,47 @@ const { size, stroke } = useIconContext()
|
|
|
3014
3027
|
|
|
3015
3028
|
### v0.1.0
|
|
3016
3029
|
- **Added** Initial release
|
|
3030
|
+
# SplitButton
|
|
3031
|
+
|
|
3032
|
+
A compound button that combines a primary action with a dropdown trigger, rendered as a single visual unit `[Action | ▼]`.
|
|
3033
|
+
|
|
3034
|
+
## Import
|
|
3035
|
+
|
|
3036
|
+
```ts
|
|
3037
|
+
import { SplitButton } from '@devalok/shilp-sutra'
|
|
3038
|
+
```
|
|
3039
|
+
|
|
3040
|
+
## Usage
|
|
3041
|
+
|
|
3042
|
+
```tsx
|
|
3043
|
+
<SplitButton onClick={handleSave} dropdownContent={<SaveOptions />}>
|
|
3044
|
+
Save
|
|
3045
|
+
</SplitButton>
|
|
3046
|
+
```
|
|
3047
|
+
|
|
3048
|
+
## Props
|
|
3049
|
+
|
|
3050
|
+
| Prop | Type | Default | Description |
|
|
3051
|
+
|------|------|---------|-------------|
|
|
3052
|
+
| children | ReactNode | — | Primary action content (left side) |
|
|
3053
|
+
| onClick | (e) => void | — | Primary click handler |
|
|
3054
|
+
| dropdownContent | ReactNode | — | Content rendered inside floating dropdown |
|
|
3055
|
+
| variant | 'solid' \| 'soft' \| 'outline' | 'solid' | Visual style |
|
|
3056
|
+
| color | 'accent' \| 'error' \| 'success' \| 'warning' \| 'neutral' | 'accent' | Color scheme |
|
|
3057
|
+
| size | 'xs' \| 'sm' \| 'md' \| 'icon-xs' \| 'icon-sm' \| 'icon-md' | 'md' | Size |
|
|
3058
|
+
| triggerSide | 'left' \| 'right' | 'right' | Which side the dropdown chevron sits on |
|
|
3059
|
+
| triggerWidth | number \| string | auto | Custom width for the trigger half |
|
|
3060
|
+
| placement | Placement | 'top-end' | Floating UI placement for dropdown |
|
|
3061
|
+
| disabled | boolean | false | Disable both halves |
|
|
3062
|
+
| open | boolean | — | Controlled open state |
|
|
3063
|
+
| onOpenChange | (open: boolean) => void | — | Open state callback |
|
|
3064
|
+
| dropdownLabel | string | 'More options' | aria-label for trigger |
|
|
3065
|
+
| dropdownIcon | ReactNode | chevron-down | Custom trigger icon |
|
|
3066
|
+
|
|
3067
|
+
## Changes
|
|
3068
|
+
|
|
3069
|
+
### v0.33.0
|
|
3070
|
+
- **Added** Initial release
|
|
3017
3071
|
# Stack
|
|
3018
3072
|
|
|
3019
3073
|
- Import: @devalok/shilp-sutra/ui/stack
|
|
@@ -4233,6 +4287,15 @@ EmojiPicker, EmojiPickerPopover
|
|
|
4233
4287
|
- Wraps `@emoji-mart/react` which is lazy-loaded — shows a Skeleton placeholder while loading
|
|
4234
4288
|
- `theme="auto"` reads the `.dark` class on `<html>` to pick light/dark
|
|
4235
4289
|
- EmojiPickerPopover auto-closes after selection
|
|
4290
|
+
|
|
4291
|
+
## Changes
|
|
4292
|
+
|
|
4293
|
+
### v0.33.0
|
|
4294
|
+
- **Added** `set` prop on EmojiPicker and EmojiPickerPopover — `EmojiSet` type: 'native' | 'apple' | 'google' | 'twitter' | 'facebook'
|
|
4295
|
+
- **Added** `EmojiNode` TipTap extension — inline atom node with spritesheet rendering for consistent emoji art styles
|
|
4296
|
+
- **Added** `createEmojiSuggestion(set?)` factory — replaces `EmojiSuggestion` named export
|
|
4297
|
+
- **Added** `EmojiSet` type exported from barrel
|
|
4298
|
+
- **Breaking** `EmojiSuggestion` named export removed — use `createEmojiSuggestion()` factory
|
|
4236
4299
|
# EmptyState
|
|
4237
4300
|
|
|
4238
4301
|
- Import: @devalok/shilp-sutra/composed/empty-state
|
|
@@ -4867,6 +4930,94 @@ Priority = 'LOW' | 'MEDIUM' | 'HIGH' | 'URGENT' | 'low' | 'medium' | 'high' | 'u
|
|
|
4867
4930
|
- Renders a centered Dialog on desktop and a bottom Sheet on mobile — same content, different container
|
|
4868
4931
|
- Uses `window.matchMedia` internally — SSR defaults to desktop (Dialog) until hydration
|
|
4869
4932
|
- Title and description are optional; if omitted, no header is rendered in either mode
|
|
4933
|
+
# RichChatInput
|
|
4934
|
+
|
|
4935
|
+
- Import: @devalok/shilp-sutra/composed/rich-chat-input
|
|
4936
|
+
- Server-safe: No
|
|
4937
|
+
- Category: composed
|
|
4938
|
+
|
|
4939
|
+
Compact rich text chat input for unified human+AI workspaces. Built on TipTap.
|
|
4940
|
+
|
|
4941
|
+
## Props
|
|
4942
|
+
|
|
4943
|
+
### RichChatInputProps
|
|
4944
|
+
onSubmit: (html: string, plainText: string) => void (REQUIRED)
|
|
4945
|
+
placeholder: string (default: "Type a message...")
|
|
4946
|
+
disabled: boolean (default: false)
|
|
4947
|
+
variant: 'compact' | 'expanded' | 'minimal' (default: 'compact')
|
|
4948
|
+
maxRows: number
|
|
4949
|
+
enterBehavior: 'send' | 'newline' (default: 'send')
|
|
4950
|
+
maxLength: number — enables character counter
|
|
4951
|
+
mentions: MentionItem[] — static list for @mention autocomplete
|
|
4952
|
+
onMentionSearch: (query: string) => Promise<MentionItem[]> — async search
|
|
4953
|
+
onMentionSelect: (item: MentionItem) => void
|
|
4954
|
+
onFileUpload: (file: File) => Promise<{ url: string; name: string; size: number }>
|
|
4955
|
+
onImageUpload: (file: File) => Promise<string>
|
|
4956
|
+
slashCommands: SlashCommandGroup[] — enables / command palette
|
|
4957
|
+
onTyping: (isTyping: boolean) => void — typing indicator callback
|
|
4958
|
+
onEmpty: (isEmpty: boolean) => void
|
|
4959
|
+
isStreaming: boolean (default: false) — shows stop button instead of send
|
|
4960
|
+
onCancel: () => void — called when stop button is clicked
|
|
4961
|
+
leadingSlot: ReactNode — rendered above the editor
|
|
4962
|
+
trailingSlot: ReactNode — rendered below the toolbar
|
|
4963
|
+
disclaimer: string — small text below the input
|
|
4964
|
+
toolbar: boolean | ChatToolbarItem[] (default: true)
|
|
4965
|
+
|
|
4966
|
+
ChatToolbarItem: 'bold' | 'italic' | 'underline' | 'strike' | 'highlight' | 'code' | 'bulletList' | 'orderedList' | 'mention' | 'emoji' | 'attach' | 'slash'
|
|
4967
|
+
|
|
4968
|
+
MentionItem: { id: string; label: string; avatar?: string }
|
|
4969
|
+
|
|
4970
|
+
SlashCommand: { id: string; label: string; description?: string; icon?: ComponentType; action: (editor: Editor) => void }
|
|
4971
|
+
|
|
4972
|
+
SlashCommandGroup: { label: string; commands: SlashCommand[] }
|
|
4973
|
+
|
|
4974
|
+
## Variants
|
|
4975
|
+
- `compact` (default) — 2-3 lines, inline toolbar
|
|
4976
|
+
- `expanded` — 5+ lines, always-visible toolbar, suited for AI prompts
|
|
4977
|
+
- `minimal` — single line, toolbar appears on focus
|
|
4978
|
+
|
|
4979
|
+
## Example
|
|
4980
|
+
```jsx
|
|
4981
|
+
<RichChatInput
|
|
4982
|
+
onSubmit={(html, text) => sendMessage(html)}
|
|
4983
|
+
mentions={teamMembers}
|
|
4984
|
+
onFileUpload={uploadFile}
|
|
4985
|
+
slashCommands={[{ label: 'Actions', commands: [...] }]}
|
|
4986
|
+
/>
|
|
4987
|
+
|
|
4988
|
+
<RichChatInput
|
|
4989
|
+
variant="expanded"
|
|
4990
|
+
onSubmit={handleSubmit}
|
|
4991
|
+
maxLength={2000}
|
|
4992
|
+
disclaimer="AI-generated content may be inaccurate."
|
|
4993
|
+
/>
|
|
4994
|
+
|
|
4995
|
+
<RichChatInput
|
|
4996
|
+
variant="minimal"
|
|
4997
|
+
enterBehavior="newline"
|
|
4998
|
+
onSubmit={handleReply}
|
|
4999
|
+
/>
|
|
5000
|
+
```
|
|
5001
|
+
|
|
5002
|
+
## Gotchas
|
|
5003
|
+
- Tiptap is bundled — no need to install `@tiptap/*` packages separately
|
|
5004
|
+
- Enter sends by default; use `enterBehavior="newline"` for long-form composition (Cmd/Ctrl+Enter always sends)
|
|
5005
|
+
- `maxLength` enables both a character limit and the visual counter in the toolbar
|
|
5006
|
+
- File/image upload buttons only appear when the corresponding handler is provided
|
|
5007
|
+
- Slash command button only appears when `slashCommands` is provided
|
|
5008
|
+
- Mention button only appears when `mentions` or `onMentionSearch` is provided
|
|
5009
|
+
|
|
5010
|
+
## Changes
|
|
5011
|
+
### v0.33.0
|
|
5012
|
+
- **Added** Custom EmojiNode with spritesheet rendering — `emojiSet` prop
|
|
5013
|
+
- **Added** `onSchedule` prop — schedule send with smart presets + DateTimePicker, SplitButton UX
|
|
5014
|
+
- **Added** `actionButton` prop — composable left-side button (replaces default attach, or pass false to hide)
|
|
5015
|
+
- **Added** Animated mic ↔ send button transitions (AnimatePresence)
|
|
5016
|
+
- **Changed** Voice recording buttons from outline to soft variant
|
|
5017
|
+
- **Fixed** ToolbarButton width for custom-width buttons (e.g. "Refine" with text label)
|
|
5018
|
+
|
|
5019
|
+
### v0.32.0
|
|
5020
|
+
- Initial release
|
|
4870
5021
|
# RichTextEditor
|
|
4871
5022
|
|
|
4872
5023
|
- Import: @devalok/shilp-sutra/composed/rich-text-editor
|
|
@@ -4924,6 +5075,11 @@ MentionItem: { id: string; label: string; avatar?: string }
|
|
|
4924
5075
|
- Features: bold, italic, underline, strikethrough, highlight, headings, blockquote, lists, task lists, code, links, images, file attachments, mentions, emoji, text alignment, horizontal rule
|
|
4925
5076
|
|
|
4926
5077
|
## Changes
|
|
5078
|
+
### v0.33.0
|
|
5079
|
+
- **Added** `emojiSet` prop — `EmojiSet` type for consistent emoji art style rendering
|
|
5080
|
+
- **Changed** TipTap v2 → v3 upgrade (useEditorState, immediatelyRender: false for SSR, ListKit)
|
|
5081
|
+
- **Added** EmojiNode + createEmojiSuggestion(set) registered internally
|
|
5082
|
+
|
|
4927
5083
|
### v0.30.0
|
|
4928
5084
|
- **Added** `toolbar` prop — whitelist of `ToolbarItem` names to control which toolbar buttons appear. Dividers render only between groups that have visible items. `ToolbarItem` type exported from barrel.
|
|
4929
5085
|
|
package/llms.txt
CHANGED
|
@@ -4,6 +4,22 @@
|
|
|
4
4
|
> Built on the same primitives as shadcn/ui but with key API differences.
|
|
5
5
|
> Read this file BEFORE writing any UI code. Do NOT guess from shadcn/ui knowledge.
|
|
6
6
|
|
|
7
|
+
## BREAKING CHANGES (v0.33.0)
|
|
8
|
+
|
|
9
|
+
- **EmojiSuggestion:** Named export removed. Use `createEmojiSuggestion(set?)` factory. Default: `createEmojiSuggestion()` (native set).
|
|
10
|
+
- **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.
|
|
11
|
+
|
|
12
|
+
## CHANGES (v0.33.0)
|
|
13
|
+
|
|
14
|
+
- **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?`.
|
|
15
|
+
- **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`.
|
|
16
|
+
- **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`.
|
|
17
|
+
- **Schedule Send** — `onSchedule?(msg, date)` on RichChatInput. Smart presets (time-of-day aware) + DateTimePicker. Banner shows scheduled time. Send button morphs to SplitButton.
|
|
18
|
+
- **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.
|
|
19
|
+
- **TipTap v2 → v3** — `useEditorState`, `immediatelyRender: false` (SSR-safe), `ListKit`. Fixes React 19 `removeChild` crash.
|
|
20
|
+
- **Composable toolbar** — Exported: `ToolbarButton`, `ToolbarDivider`, `ToolbarGroup`, `BoldButton`, `ItalicButton`, `UnderlineButton`, `StrikeButton`, `HighlightButton`, `CodeButton`, `BulletListButton`, `OrderedListButton`, `BlockquoteButton`, `LinkButton`, `EmojiButton`.
|
|
21
|
+
- **Button `disabled`** — Now inherited from ButtonGroup context.
|
|
22
|
+
|
|
7
23
|
## BREAKING CHANGES (v0.32.0)
|
|
8
24
|
|
|
9
25
|
- **Button:** `variant="default"` removed (use `"solid"`), `variant="destructive"` removed (use `variant="solid" color="error"`), `color="default"` removed (use `"accent"`).
|
|
@@ -359,6 +375,8 @@ Components with two-axis system: Button, Badge, Alert, Banner, Progress, StatusB
|
|
|
359
375
|
### Inputs & Controls
|
|
360
376
|
- 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
|
|
361
377
|
- IconButton: icon(ReactNode, required) shape(square|circle) size(sm|md|lg) + aria-label required
|
|
378
|
+
- 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.
|
|
379
|
+
- 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.
|
|
362
380
|
- 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.
|
|
363
381
|
- 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'
|
|
364
382
|
- SearchInput: size(xs|sm|md|lg) + loading, onClear. Delegates to Input v2 sections internally.
|
|
@@ -459,8 +477,9 @@ Import: `@devalok/shilp-sutra/ui/chat`
|
|
|
459
477
|
- Presets: date range quick-select buttons — presets(PresetKey[]), onSelect(start, end). Keys: today, yesterday, last7days, last30days, thisMonth, lastMonth, thisYear
|
|
460
478
|
- useCalendar: hook for calendar month state — returns currentMonth, goToPreviousMonth, goToNextMonth, goToMonth, goToYear
|
|
461
479
|
- (UploadProgress REMOVED — upload tracking is now built into toast.upload())
|
|
462
|
-
- 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)
|
|
480
|
+
- 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)
|
|
463
481
|
- RichTextViewer: read-only renderer for RichTextEditor HTML content (renders all above content types)
|
|
482
|
+
- 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.
|
|
464
483
|
- 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.
|
|
465
484
|
- 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.
|
|
466
485
|
- MemberPicker: thin wrapper around MultiSelectPopover with Avatar rendering
|
|
@@ -473,7 +492,8 @@ Import: `@devalok/shilp-sutra/ui/chat`
|
|
|
473
492
|
- MasterDetail: selected, onBack, masterWidth, breakpoint(sm|md|lg). Compound: MasterDetail.List, MasterDetail.Detail, MasterDetail.ListItem(active). Desktop=grid, mobile=stacked with back button.
|
|
474
493
|
- ResponsiveOverlay: open, onOpenChange, title, description, breakpoint(sm|md). Dialog on desktop, bottom Sheet on mobile.
|
|
475
494
|
- MarkdownViewer: content(string), compact?, allowHtml?(false), linkTarget?('_blank'). Renders markdown with design system tokens.
|
|
476
|
-
- EmojiPicker: onSelect(emoji), theme(auto|light|dark).
|
|
495
|
+
- 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.
|
|
496
|
+
- 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.
|
|
477
497
|
- 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.
|
|
478
498
|
- ErrorDisplay, GlobalLoading
|
|
479
499
|
- Loading skeletons: CardSkeleton, TableSkeleton, BoardSkeleton, ListSkeleton
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@devalok/shilp-sutra",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.33.1",
|
|
4
4
|
"description": "Devalok Design System — tokens, components, and patterns for Next.js",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
@@ -518,6 +518,11 @@
|
|
|
518
518
|
"default": "./dist/composed/rich-text-editor.js",
|
|
519
519
|
"types": "./dist/composed/rich-text-editor.d.ts"
|
|
520
520
|
},
|
|
521
|
+
"./composed/rich-chat-input": {
|
|
522
|
+
"import": "./dist/composed/rich-chat-input.js",
|
|
523
|
+
"default": "./dist/composed/rich-chat-input.js",
|
|
524
|
+
"types": "./dist/composed/rich-chat-input.d.ts"
|
|
525
|
+
},
|
|
521
526
|
"./composed/simple-tooltip": {
|
|
522
527
|
"import": "./dist/composed/simple-tooltip.js",
|
|
523
528
|
"default": "./dist/composed/simple-tooltip.js",
|
|
@@ -701,16 +706,6 @@
|
|
|
701
706
|
"llms.txt",
|
|
702
707
|
"llms-full.txt"
|
|
703
708
|
],
|
|
704
|
-
"scripts": {
|
|
705
|
-
"build": "vite build && node scripts/post-build.mjs",
|
|
706
|
-
"build:tokens": "node scripts/copy-tokens.mjs",
|
|
707
|
-
"build:docs": "node scripts/build-component-docs.mjs",
|
|
708
|
-
"build:docs:check": "node scripts/build-component-docs.mjs --check",
|
|
709
|
-
"typecheck": "tsc --noEmit",
|
|
710
|
-
"lint": "eslint src/",
|
|
711
|
-
"test": "vitest run",
|
|
712
|
-
"prepublishOnly": "pnpm build"
|
|
713
|
-
},
|
|
714
709
|
"peerDependencies": {
|
|
715
710
|
"@emoji-mart/data": "^1.0.0",
|
|
716
711
|
"@emoji-mart/react": "^1.0.0",
|
|
@@ -805,25 +800,20 @@
|
|
|
805
800
|
"devDependencies": {
|
|
806
801
|
"@emoji-mart/data": "^1.2.1",
|
|
807
802
|
"@emoji-mart/react": "^1.1.1",
|
|
808
|
-
"@floating-ui/react-dom": "^2.1.
|
|
809
|
-
"@tabler/icons-react": "^3.
|
|
810
|
-
"@tanstack/react-table": "^8.21.
|
|
811
|
-
"@tanstack/react-virtual": "^3.13.
|
|
812
|
-
"@tiptap/core": "^
|
|
813
|
-
"@tiptap/extension-highlight": "^
|
|
814
|
-
"@tiptap/extension-image": "^
|
|
815
|
-
"@tiptap/extension-
|
|
816
|
-
"@tiptap/extension-
|
|
817
|
-
"@tiptap/
|
|
818
|
-
"@tiptap/
|
|
819
|
-
"@tiptap/
|
|
820
|
-
"@tiptap/extension-text-align": "^2.27.2",
|
|
821
|
-
"@tiptap/extension-underline": "^2.27.2",
|
|
822
|
-
"@tiptap/react": "^2.27.2",
|
|
823
|
-
"@tiptap/starter-kit": "^2.27.2",
|
|
824
|
-
"@tiptap/suggestion": "^2.27.2",
|
|
803
|
+
"@floating-ui/react-dom": "^2.1.8",
|
|
804
|
+
"@tabler/icons-react": "^3.41.1",
|
|
805
|
+
"@tanstack/react-table": "^8.21.3",
|
|
806
|
+
"@tanstack/react-virtual": "^3.13.23",
|
|
807
|
+
"@tiptap/core": "^3.22.3",
|
|
808
|
+
"@tiptap/extension-highlight": "^3.22.3",
|
|
809
|
+
"@tiptap/extension-image": "^3.22.3",
|
|
810
|
+
"@tiptap/extension-mention": "^3.22.3",
|
|
811
|
+
"@tiptap/extension-text-align": "^3.22.3",
|
|
812
|
+
"@tiptap/react": "^3.22.3",
|
|
813
|
+
"@tiptap/starter-kit": "^3.22.3",
|
|
814
|
+
"@tiptap/suggestion": "^3.22.3",
|
|
825
815
|
"@types/react-syntax-highlighter": "^15.5.13",
|
|
826
|
-
"aria-hidden": "^1.2.
|
|
816
|
+
"aria-hidden": "^1.2.6",
|
|
827
817
|
"class-variance-authority": "^0.7.1",
|
|
828
818
|
"clsx": "^2.1.1",
|
|
829
819
|
"d3-array": "^3.2.4",
|
|
@@ -836,13 +826,13 @@
|
|
|
836
826
|
"d3-time-format": "^4.1.0",
|
|
837
827
|
"d3-transition": "^3.0.1",
|
|
838
828
|
"date-fns": "^4.1.0",
|
|
839
|
-
"esbuild": "^0.
|
|
840
|
-
"framer-motion": "^12.
|
|
829
|
+
"esbuild": "^0.28.0",
|
|
830
|
+
"framer-motion": "^12.38.0",
|
|
841
831
|
"input-otp": "^1.4.2",
|
|
842
832
|
"react-colorful": "^5.6.1",
|
|
843
833
|
"react-markdown": "^10.1.0",
|
|
844
834
|
"react-pdf": "^10.4.1",
|
|
845
|
-
"react-remove-scroll": "^2.
|
|
835
|
+
"react-remove-scroll": "^2.7.2",
|
|
846
836
|
"react-syntax-highlighter": "^16.1.1",
|
|
847
837
|
"react-zoom-pan-pinch": "^3.7.0",
|
|
848
838
|
"remark-gfm": "^4.0.1",
|
|
@@ -852,5 +842,19 @@
|
|
|
852
842
|
"engines": {
|
|
853
843
|
"node": ">=20.19.0"
|
|
854
844
|
},
|
|
855
|
-
"
|
|
856
|
-
|
|
845
|
+
"dependencies": {
|
|
846
|
+
"@floating-ui/dom": "^1.7.6",
|
|
847
|
+
"@tiptap/extension-list": "^3.22.3",
|
|
848
|
+
"@tiptap/extensions": "^3.22.3",
|
|
849
|
+
"prosemirror-state": "^1.4.4"
|
|
850
|
+
},
|
|
851
|
+
"scripts": {
|
|
852
|
+
"build": "vite build && node scripts/post-build.mjs",
|
|
853
|
+
"build:tokens": "node scripts/copy-tokens.mjs",
|
|
854
|
+
"build:docs": "node scripts/build-component-docs.mjs",
|
|
855
|
+
"build:docs:check": "node scripts/build-component-docs.mjs --check",
|
|
856
|
+
"typecheck": "tsc --noEmit",
|
|
857
|
+
"lint": "eslint src/",
|
|
858
|
+
"test": "vitest run"
|
|
859
|
+
}
|
|
860
|
+
}
|