@devalok/shilp-sutra 0.32.0 → 0.33.0

package/dist/ui/split-button.d.ts

@@ -0,0 +1,45 @@
+"use client";
+import { Placement } from '@floating-ui/dom';
+import { VariantProps } from 'class-variance-authority';
+import { buttonVariants } from './button';
+import * as React from 'react';
+type SplitButtonVariant = 'solid' | 'soft' | 'outline';
+type SplitButtonColor = NonNullable<VariantProps<typeof buttonVariants>['color']>;
+type SplitButtonSize = 'xs' | 'sm' | 'md' | 'icon-xs' | 'icon-sm' | 'icon-md';
+export interface SplitButtonProps {
+    /** Primary action content (left side). */
+    children: React.ReactNode;
+    /** Primary click handler (left side). */
+    onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Content rendered inside the floating dropdown panel. */
+    dropdownContent?: React.ReactNode;
+    /** Controlled open state. */
+    open?: boolean;
+    /** Called when open state changes. Uncontrolled if omitted. */
+    onOpenChange?: (open: boolean) => void;
+    /** @default 'solid' */
+    variant?: SplitButtonVariant;
+    /** @default 'accent' */
+    color?: SplitButtonColor;
+    /** @default 'md' */
+    size?: SplitButtonSize;
+    /** Disable both halves. */
+    disabled?: boolean;
+    /** aria-label for the primary button. */
+    'aria-label'?: string;
+    /** aria-label for the dropdown trigger. @default 'More options' */
+    dropdownLabel?: string;
+    /** Custom icon for the dropdown trigger. Defaults to chevron-down. */
+    dropdownIcon?: React.ReactNode;
+    /** Which side the dropdown trigger sits on. @default 'right' */
+    triggerSide?: 'left' | 'right';
+    /** Preferred placement for the dropdown panel. @default 'top-end' */
+    placement?: Placement;
+    /** Width of the trigger (chevron) half. @default 'auto' */
+    triggerWidth?: number | string;
+    className?: string;
+}
+declare const SplitButton: React.ForwardRefExoticComponent<SplitButtonProps & React.RefAttributes<HTMLDivElement>>;
+export { SplitButton };
+export type { SplitButtonVariant, SplitButtonColor, SplitButtonSize };
+//# sourceMappingURL=split-button.d.ts.map

package/dist/ui/split-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"split-button.d.ts","sourceRoot":"","sources":["../../src/ui/split-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAoD,KAAK,SAAS,EAAE,MAAM,kBAAkB,CAAA;AAEnG,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAKzC,KAAK,kBAAkB,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;AACtD,KAAK,gBAAgB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,OAAO,CAAC,CAAC,CAAA;AACjF,KAAK,eAAe,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,SAAS,GAAG,SAAS,GAAG,SAAS,CAAA;AAE7E,MAAM,WAAW,gBAAgB;IAC/B,0CAA0C;IAC1C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,yCAAyC;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IACzD,2DAA2D;IAC3D,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACjC,6BAA6B;IAC7B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,+DAA+D;IAC/D,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IACtC,uBAAuB;IACvB,OAAO,CAAC,EAAE,kBAAkB,CAAA;IAC5B,wBAAwB;IACxB,KAAK,CAAC,EAAE,gBAAgB,CAAA;IACxB,oBAAoB;IACpB,IAAI,CAAC,EAAE,eAAe,CAAA;IACtB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,yCAAyC;IACzC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mEAAmE;IACnE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sEAAsE;IACtE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,gEAAgE;IAChE,WAAW,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC9B,qEAAqE;IACrE,SAAS,CAAC,EAAE,SAAS,CAAA;IACrB,2DAA2D;IAC3D,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AA2FD,QAAA,MAAM,WAAW,yFAuNhB,CAAA;AAID,OAAO,EAAE,WAAW,EAAE,CAAA;AACtB,YAAY,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,CAAA"}

package/dist/ui/split-button.js

@@ -0,0 +1,282 @@
+"use client";
+import { jsxs as m, Fragment as C, jsx as s } from "react/jsx-runtime";
+import * as n from "react";
+import { d as G, q as J, i as Q, e as T, g as V } from "../_chunks/vendor-client.js";
+import { cn as o } from "./lib/utils.js";
+import { A as X, m as Y } from "../_chunks/framer.js";
+const A = {
+  solid: {
+    accent: "bg-accent-11/20",
+    error: "bg-error-11/20",
+    success: "bg-success-11/20",
+    warning: "bg-warning-11/20",
+    neutral: "bg-neutral-8/30"
+  },
+  soft: {
+    accent: "bg-accent-6",
+    error: "bg-error-6",
+    success: "bg-success-6",
+    warning: "bg-warning-6",
+    neutral: "bg-surface-border"
+  },
+  outline: {
+    accent: "bg-accent-7",
+    error: "bg-error-7",
+    success: "bg-success-7",
+    warning: "bg-warning-7",
+    neutral: "bg-surface-border-strong"
+  }
+}, N = {
+  xs: "h-ds-xs-plus",
+  sm: "h-ds-sm",
+  md: "h-ds-md",
+  "icon-xs": "h-ds-xs-plus",
+  "icon-sm": "h-ds-sm",
+  "icon-md": "h-ds-md"
+}, Z = {
+  xs: "text-ds-sm",
+  sm: "text-ds-sm",
+  md: "text-ds-md",
+  "icon-xs": "text-ds-sm",
+  "icon-sm": "text-ds-sm",
+  "icon-md": "text-ds-md"
+}, _ = {
+  xs: "px-ds-03 gap-1",
+  sm: "px-ds-04 gap-1.5",
+  md: "px-ds-05 gap-2",
+  "icon-xs": "px-ds-02",
+  "icon-sm": "px-ds-03",
+  "icon-md": "px-ds-04"
+}, I = {
+  xs: "px-ds-02",
+  sm: "px-ds-02",
+  md: "px-ds-03",
+  "icon-xs": "px-ds-01",
+  "icon-sm": "px-ds-02",
+  "icon-md": "px-ds-02"
+}, W = {
+  xs: "rounded-ds-md",
+  sm: "rounded-ds-md",
+  md: "rounded-ds-lg",
+  "icon-xs": "rounded-ds-sm",
+  "icon-sm": "rounded-ds-md",
+  "icon-md": "rounded-ds-md"
+};
+function z(c, i) {
+  const u = {
+    solid: {
+      accent: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-11",
+      error: "bg-error-9 text-error-fg hover:bg-error-10 active:bg-error-11",
+      success: "bg-success-9 text-success-fg hover:bg-success-10 active:bg-success-11",
+      warning: "bg-warning-9 text-warning-fg hover:bg-warning-10 active:bg-warning-11",
+      neutral: "bg-neutral-5 text-surface-fg hover:bg-neutral-7 active:bg-neutral-8"
+    },
+    soft: {
+      accent: "bg-accent-3 text-accent-11 hover:bg-accent-4 active:bg-accent-5",
+      error: "bg-error-3 text-error-11 hover:bg-error-4 active:bg-error-5",
+      success: "bg-success-3 text-success-11 hover:bg-success-4 active:bg-success-5",
+      warning: "bg-warning-3 text-warning-11 hover:bg-warning-4 active:bg-warning-5",
+      neutral: "bg-surface-raised-hover text-surface-fg-muted hover:bg-surface-raised-active active:bg-neutral-5"
+    },
+    outline: {
+      accent: "bg-transparent text-accent-11 hover:bg-accent-3 active:bg-accent-4",
+      error: "bg-transparent text-error-11 hover:bg-error-3 active:bg-error-4",
+      success: "bg-transparent text-success-11 hover:bg-success-3 active:bg-success-4",
+      warning: "bg-transparent text-warning-11 hover:bg-warning-3 active:bg-warning-4",
+      neutral: "bg-transparent text-surface-fg hover:bg-surface-raised-hover active:bg-surface-raised-active"
+    }
+  };
+  return u[c][i] ?? u[c].accent;
+}
+function ee(c) {
+  const i = {
+    accent: "border-accent-7",
+    error: "border-error-7",
+    success: "border-success-7",
+    warning: "border-warning-7",
+    neutral: "border-surface-border-strong"
+  };
+  return i[c] ?? i.accent;
+}
+function M({ className: c }) {
+  return /* @__PURE__ */ s("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", className: c, "aria-hidden": "true", children: /* @__PURE__ */ s("path", { d: "M3 4.5L6 7.5L9 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+const se = n.forwardRef(
+  function({
+    children: i,
+    onClick: u,
+    dropdownContent: E,
+    open: j,
+    onOpenChange: p,
+    variant: l = "solid",
+    color: v = "accent",
+    size: r = "md",
+    disabled: x = !1,
+    "aria-label": L,
+    dropdownLabel: R = "More options",
+    dropdownIcon: B,
+    triggerSide: O = "right",
+    placement: S = "top-end",
+    triggerWidth: g,
+    className: q
+  }, D) {
+    const [F, H] = n.useState(!1), h = j !== void 0, e = h ? j : F, b = n.useRef(null), f = n.useRef(null), w = n.useId(), d = n.useCallback(
+      (t) => {
+        p && p(t), h || H(t);
+      },
+      [p, h]
+    );
+    n.useEffect(() => {
+      if (!e || !b.current || !f.current) return;
+      const t = b.current, a = f.current;
+      return G(t, a, () => {
+        J(t, a, {
+          placement: S,
+          middleware: [
+            Q(8),
+            T({ fallbackPlacements: ["bottom-end", "top-start", "bottom-start"] }),
+            V({ padding: 8 })
+          ]
+        }).then(({ x: K, y: U }) => {
+          Object.assign(a.style, { left: `${K}px`, top: `${U}px` });
+        });
+      });
+    }, [e, S]), n.useEffect(() => {
+      if (!e) return;
+      const t = (a) => {
+        const k = a.target;
+        b.current?.contains(k) || f.current?.contains(k) || d(!1);
+      };
+      return document.addEventListener("mousedown", t), () => document.removeEventListener("mousedown", t);
+    }, [e, d]), n.useEffect(() => {
+      if (!e) return;
+      const t = (a) => {
+        a.key === "Escape" && d(!1);
+      };
+      return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+    }, [e, d]);
+    const y = z(l, v), $ = A[l][v] ?? A[l].accent, P = g != null ? { width: typeof g == "number" ? `${g}px` : g } : void 0;
+    return /* @__PURE__ */ m(C, { children: [
+      /* @__PURE__ */ s(
+        "div",
+        {
+          ref: D,
+          role: "group",
+          "aria-label": L ?? void 0,
+          className: o("relative inline-flex", q),
+          children: /* @__PURE__ */ m(
+            "div",
+            {
+              ref: b,
+              className: o(
+                "inline-flex items-stretch overflow-hidden",
+                W[r],
+                l === "solid" && "shadow-raised",
+                l === "outline" && `border ${ee(v)}`
+              ),
+              children: [
+                O === "left" && /* @__PURE__ */ m(C, { children: [
+                  /* @__PURE__ */ s(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => d(!e),
+                      disabled: x,
+                      "aria-label": R,
+                      "aria-haspopup": "menu",
+                      "aria-expanded": e,
+                      "aria-controls": e ? w : void 0,
+                      className: o(
+                        "inline-flex items-center justify-center select-none",
+                        "transition-colors duration-fast-01 ease-productive-standard",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset",
+                        "disabled:pointer-events-none disabled:opacity-action-disabled",
+                        y,
+                        N[r],
+                        I[r]
+                      ),
+                      style: P,
+                      children: B ?? /* @__PURE__ */ s(M, {})
+                    }
+                  ),
+                  /* @__PURE__ */ s("div", { className: o("w-px self-stretch", $) })
+                ] }),
+                /* @__PURE__ */ s(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: u,
+                    disabled: x,
+                    "aria-label": L,
+                    className: o(
+                      "inline-flex items-center justify-center font-semibold select-none whitespace-nowrap",
+                      "transition-colors duration-fast-01 ease-productive-standard",
+                      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset",
+                      "disabled:pointer-events-none disabled:opacity-action-disabled",
+                      y,
+                      N[r],
+                      Z[r],
+                      _[r]
+                    ),
+                    children: i
+                  }
+                ),
+                O === "right" && /* @__PURE__ */ m(C, { children: [
+                  /* @__PURE__ */ s("div", { className: o("w-px self-stretch", $) }),
+                  /* @__PURE__ */ s(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => d(!e),
+                      disabled: x,
+                      "aria-label": R,
+                      "aria-haspopup": "menu",
+                      "aria-expanded": e,
+                      "aria-controls": e ? w : void 0,
+                      className: o(
+                        "inline-flex items-center justify-center select-none",
+                        "transition-colors duration-fast-01 ease-productive-standard",
+                        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-inset",
+                        "disabled:pointer-events-none disabled:opacity-action-disabled",
+                        y,
+                        N[r],
+                        I[r]
+                      ),
+                      style: P,
+                      children: B ?? /* @__PURE__ */ s(M, {})
+                    }
+                  )
+                ] })
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ s(X, { children: e && E && /* @__PURE__ */ s(
+        "div",
+        {
+          ref: f,
+          id: w,
+          role: "menu",
+          className: "fixed z-popover",
+          style: { top: 0, left: 0 },
+          children: /* @__PURE__ */ s(
+            Y.div,
+            {
+              initial: { opacity: 0, scale: 0.95 },
+              animate: { opacity: 1, scale: 1 },
+              exit: { opacity: 0, scale: 0.95 },
+              transition: { duration: 0.15 },
+              className: "rounded-ds-lg border border-surface-border-strong bg-surface-overlay shadow-floating",
+              children: E
+            }
+          )
+        }
+      ) })
+    ] });
+  }
+);
+se.displayName = "SplitButton";
+export {
+  se as SplitButton
+};

package/docs/components/composed/emoji-picker.md

@@ -41,3 +41,12 @@ EmojiPicker, EmojiPickerPopover
 - Wraps `@emoji-mart/react` which is lazy-loaded — shows a Skeleton placeholder while loading
 - `theme="auto"` reads the `.dark` class on `<html>` to pick light/dark
 - EmojiPickerPopover auto-closes after selection
+
+## Changes
+
+### v0.33.0
+- **Added** `set` prop on EmojiPicker and EmojiPickerPopover — `EmojiSet` type: 'native' | 'apple' | 'google' | 'twitter' | 'facebook'
+- **Added** `EmojiNode` TipTap extension — inline atom node with spritesheet rendering for consistent emoji art styles
+- **Added** `createEmojiSuggestion(set?)` factory — replaces `EmojiSuggestion` named export
+- **Added** `EmojiSet` type exported from barrel
+- **Breaking** `EmojiSuggestion` named export removed — use `createEmojiSuggestion()` factory

package/docs/components/composed/rich-chat-input.md

@@ -0,0 +1,88 @@
+# RichChatInput
+
+- Import: @devalok/shilp-sutra/composed/rich-chat-input
+- Server-safe: No
+- Category: composed
+
+Compact rich text chat input for unified human+AI workspaces. Built on TipTap.
+
+## Props
+
+### RichChatInputProps
+    onSubmit: (html: string, plainText: string) => void (REQUIRED)
+    placeholder: string (default: "Type a message...")
+    disabled: boolean (default: false)
+    variant: 'compact' | 'expanded' | 'minimal' (default: 'compact')
+    maxRows: number
+    enterBehavior: 'send' | 'newline' (default: 'send')
+    maxLength: number — enables character counter
+    mentions: MentionItem[] — static list for @mention autocomplete
+    onMentionSearch: (query: string) => Promise<MentionItem[]> — async search
+    onMentionSelect: (item: MentionItem) => void
+    onFileUpload: (file: File) => Promise<{ url: string; name: string; size: number }>
+    onImageUpload: (file: File) => Promise<string>
+    slashCommands: SlashCommandGroup[] — enables / command palette
+    onTyping: (isTyping: boolean) => void — typing indicator callback
+    onEmpty: (isEmpty: boolean) => void
+    isStreaming: boolean (default: false) — shows stop button instead of send
+    onCancel: () => void — called when stop button is clicked
+    leadingSlot: ReactNode — rendered above the editor
+    trailingSlot: ReactNode — rendered below the toolbar
+    disclaimer: string — small text below the input
+    toolbar: boolean | ChatToolbarItem[] (default: true)
+
+ChatToolbarItem: 'bold' | 'italic' | 'underline' | 'strike' | 'highlight' | 'code' | 'bulletList' | 'orderedList' | 'mention' | 'emoji' | 'attach' | 'slash'
+
+MentionItem: { id: string; label: string; avatar?: string }
+
+SlashCommand: { id: string; label: string; description?: string; icon?: ComponentType; action: (editor: Editor) => void }
+
+SlashCommandGroup: { label: string; commands: SlashCommand[] }
+
+## Variants
+- `compact` (default) — 2-3 lines, inline toolbar
+- `expanded` — 5+ lines, always-visible toolbar, suited for AI prompts
+- `minimal` — single line, toolbar appears on focus
+
+## Example
+```jsx
+<RichChatInput
+  onSubmit={(html, text) => sendMessage(html)}
+  mentions={teamMembers}
+  onFileUpload={uploadFile}
+  slashCommands={[{ label: 'Actions', commands: [...] }]}
+/>
+
+<RichChatInput
+  variant="expanded"
+  onSubmit={handleSubmit}
+  maxLength={2000}
+  disclaimer="AI-generated content may be inaccurate."
+/>
+
+<RichChatInput
+  variant="minimal"
+  enterBehavior="newline"
+  onSubmit={handleReply}
+/>
+```
+
+## Gotchas
+- Tiptap is bundled — no need to install `@tiptap/*` packages separately
+- Enter sends by default; use `enterBehavior="newline"` for long-form composition (Cmd/Ctrl+Enter always sends)
+- `maxLength` enables both a character limit and the visual counter in the toolbar
+- File/image upload buttons only appear when the corresponding handler is provided
+- Slash command button only appears when `slashCommands` is provided
+- Mention button only appears when `mentions` or `onMentionSearch` is provided
+
+## Changes
+### v0.33.0
+- **Added** Custom EmojiNode with spritesheet rendering — `emojiSet` prop
+- **Added** `onSchedule` prop — schedule send with smart presets + DateTimePicker, SplitButton UX
+- **Added** `actionButton` prop — composable left-side button (replaces default attach, or pass false to hide)
+- **Added** Animated mic ↔ send button transitions (AnimatePresence)
+- **Changed** Voice recording buttons from outline to soft variant
+- **Fixed** ToolbarButton width for custom-width buttons (e.g. "Refine" with text label)
+
+### v0.32.0
+- Initial release

package/docs/components/composed/rich-text-editor.md

@@ -55,6 +55,11 @@ MentionItem: { id: string; label: string; avatar?: string }
 - Features: bold, italic, underline, strikethrough, highlight, headings, blockquote, lists, task lists, code, links, images, file attachments, mentions, emoji, text alignment, horizontal rule
 
 ## Changes
+### v0.33.0
+- **Added** `emojiSet` prop — `EmojiSet` type for consistent emoji art style rendering
+- **Changed** TipTap v2 → v3 upgrade (useEditorState, immediatelyRender: false for SSR, ListKit)
+- **Added** EmojiNode + createEmojiSuggestion(set) registered internally
+
 ### v0.30.0
 - **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.
 

package/docs/components/ui/button-group.md

@@ -25,6 +25,15 @@
 - Children can override variant/size individually
 
 ## Changes
+### v0.33.0
+- **Rebuilt** with compound component pattern — Button reads position from ButtonGroup context and applies border-radius inline
+- **Added** `disabled` prop (propagates to all children via context)
+- **Added** `attached` prop (default true; false = spaced with gap)
+- **Added** `fullWidth` prop (stretch to fill container)
+- **Added** Tonal divider elements between buttons for solid/soft/ghost variants
+- **Added** Focus z-index isolation (focused button rises above siblings)
+- **Fixed** Border-radius not working with custom `rounded-ds-*` design tokens
+
 ### v0.4.2
 - **Fixed** `Omit<HTMLAttributes, 'color'>` resolves TS2320 conflict with CVA color prop
 

package/docs/components/ui/button.md

@@ -47,6 +47,10 @@
 - Grain children (DevalokGrain) are auto-separated and rendered as direct button children for absolute positioning
 
 ## Changes
+### v0.33.0
+- **Added** `disabled` inherited from ButtonGroup context
+- **Added** Position-aware border-radius when inside an attached ButtonGroup (compound component pattern)
+
 ### v0.29.0
 - **Added** `soft` variant — tinted background, colored text (new middle ground between solid and ghost)
 - **Added** 5 color options: `accent` (default), `error`, `success`, `warning`, `neutral` (replaces old `default`/`error`-only axis)

package/docs/components/ui/split-button.md

@@ -0,0 +1,41 @@
+# SplitButton
+
+A compound button that combines a primary action with a dropdown trigger, rendered as a single visual unit `[Action | ▼]`.
+
+## Import
+
+```ts
+import { SplitButton } from '@devalok/shilp-sutra'
+```
+
+## Usage
+
+```tsx
+<SplitButton onClick={handleSave} dropdownContent={<SaveOptions />}>
+  Save
+</SplitButton>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| children | ReactNode | — | Primary action content (left side) |
+| onClick | (e) => void | — | Primary click handler |
+| dropdownContent | ReactNode | — | Content rendered inside floating dropdown |
+| variant | 'solid' \| 'soft' \| 'outline' | 'solid' | Visual style |
+| color | 'accent' \| 'error' \| 'success' \| 'warning' \| 'neutral' | 'accent' | Color scheme |
+| size | 'xs' \| 'sm' \| 'md' \| 'icon-xs' \| 'icon-sm' \| 'icon-md' | 'md' | Size |
+| triggerSide | 'left' \| 'right' | 'right' | Which side the dropdown chevron sits on |
+| triggerWidth | number \| string | auto | Custom width for the trigger half |
+| placement | Placement | 'top-end' | Floating UI placement for dropdown |
+| disabled | boolean | false | Disable both halves |
+| open | boolean | — | Controlled open state |
+| onOpenChange | (open: boolean) => void | — | Open state callback |
+| dropdownLabel | string | 'More options' | aria-label for trigger |
+| dropdownIcon | ReactNode | chevron-down | Custom trigger icon |
+
+## Changes
+
+### v0.33.0
+- **Added** Initial release