@assure-one/design-system 0.12.0 → 0.13.0

package/dist/index.d.ts

@@ -2364,7 +2364,7 @@ type MessageBubbleComponent = React.ForwardRefExoticComponent<MessageBubbleProps
  *       <QuickReplyChips … />
  *     </ThreadComposer.Accessory>
  *     <ThreadComposer.Input>
- *       <MentionInput … />
+ *       <MentionInput … />     // no chrome-override classes needed
  *     </ThreadComposer.Input>
  *     <ThreadComposer.Footer
  *       start={<Switch size="sm" … /> Show activity}
@@ -2373,10 +2373,30 @@ type MessageBubbleComponent = React.ForwardRefExoticComponent<MessageBubbleProps
  *   </ThreadComposer>
  *
  * The composer owns the rounded card chrome, hairline border, and the
- * subtle focus-within shadow lift. The input slot's child should be
- * borderless — the card chrome is the input's chrome.
- */
-type ThreadComposerProps = React.HTMLAttributes<HTMLDivElement>;
+ * subtle focus-within shadow lift. The `Input` slot bakes-in a chrome
+ * reset on its direct children — so a `<MentionInput>` (or any wrapper
+ * that paints its own `rounded-xl border bg-input-background shadow`)
+ * drops to borderless automatically without the consumer having to
+ * neutralise six classes inline.
+ *
+ * Disabled state: pass `disabled` on the root to grey-out the whole
+ * card, block pointer events, and set `aria-disabled` + `data-state`
+ * for analytics/CSS targeting. Input children that own their own
+ * editing state (Tiptap, contenteditable) should also read
+ * `aria-disabled` from the root and refuse edits themselves.
+ *
+ * Footer slot API: `start`/`end` props (rather than children) — Footer
+ * has a fixed two-region horizontal layout, and arbitrary children
+ * would invite consumers to over-pack it. Accessory and Input take
+ * children because their content is open-ended.
+ */
+interface ThreadComposerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** When true, the composer renders disabled: 60% opacity, pointer
+     * events blocked, `aria-disabled` set, `data-state="disabled"`.
+     * Input children that own editing state should also refuse edits
+     * themselves (e.g. pass `editable={!disabled}` to Tiptap). */
+    disabled?: boolean;
+}
 declare const ThreadComposer: ThreadComposerComponent;
 type ThreadComposerAccessoryProps = React.HTMLAttributes<HTMLDivElement>;
 declare const ThreadComposerAccessory: React$1.ForwardRefExoticComponent<ThreadComposerAccessoryProps & React$1.RefAttributes<HTMLDivElement>>;

package/dist/index.js

@@ -2627,16 +2627,16 @@ function BrandIcon({
   );
 }
 function AssureProBrandIcon({ size = 24, ...props }) {
-  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "#6C42F8", title: "Assure Pro", ...props });
+  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "var(--color-brand-pro)", title: "Assure Pro", ...props });
 }
 function AssureAuditBrandIcon({ size = 24, ...props }) {
-  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "#0066ff", title: "Assure Audit", ...props });
+  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "var(--color-brand-audit)", title: "Assure Audit", ...props });
 }
 function AssureBooksBrandIcon({ size = 24, ...props }) {
-  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "#2da85a", title: "Assure Books", ...props });
+  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "var(--color-brand-books)", title: "Assure Books", ...props });
 }
 function AssureTaxBrandIcon({ size = 24, ...props }) {
-  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "#e0793b", title: "Assure Tax", ...props });
+  return /* @__PURE__ */ jsx(BrandIcon, { size, accent: "var(--color-brand-tax)", title: "Assure Tax", ...props });
 }
 var Breadcrumb = forwardRef(function Breadcrumb2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx("nav", { ref, "aria-label": "Breadcrumb", className: cn(className), ...props });
@@ -9532,16 +9532,20 @@ MessageBubbleAction.displayName = "MessageBubble.Action";
 MessageBubble.Tombstone = MessageBubbleTombstone;
 MessageBubble.Action = MessageBubbleAction;
 var ThreadComposer = forwardRef(
-  function ThreadComposer2({ className, children, ...props }, ref) {
+  function ThreadComposer2({ disabled = false, className, children, ...props }, ref) {
     return /* @__PURE__ */ jsx(
       "div",
       {
         ref,
+        "data-slot": "thread-composer",
+        "data-state": disabled ? "disabled" : "idle",
+        "aria-disabled": disabled || void 0,
         className: cn(
           "relative flex flex-col",
           "border-rule bg-input-background rounded-xl border",
           "transition-shadow duration-150",
           "focus-within:border-accent-ring focus-within:bg-surface focus-within:shadow-sm",
+          disabled && "pointer-events-none opacity-60",
           className
         ),
         ...props,
@@ -9557,6 +9561,7 @@ var ThreadComposerAccessory = forwardRef(
       "div",
       {
         ref,
+        "data-slot": "thread-composer-accessory",
         className: cn(
           "flex shrink-0 items-center gap-1.5 overflow-x-auto px-3 pt-2",
           className
@@ -9570,7 +9575,29 @@ var ThreadComposerAccessory = forwardRef(
 ThreadComposerAccessory.displayName = "ThreadComposer.Accessory";
 var ThreadComposerInput = forwardRef(
   function ThreadComposerInput2({ className, children, ...props }, ref) {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("min-h-0 flex-1 px-1 pt-1", className), ...props, children });
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-slot": "thread-composer-input",
+        className: cn(
+          "min-h-0 flex-1 px-1 pt-1",
+          // Bake-in chrome reset: the composer's outer card IS the input's
+          // chrome. Direct child wrappers (e.g. mention/textarea wrappers
+          // that paint their own border, bg, or shadow) drop that chrome
+          // when nested here so consumers don't need to neutralise it
+          // class-by-class at the call site. `!` is justified because the
+          // composer's contract is "I own chrome; child input is
+          // decoration-free."
+          "[&>*]:!rounded-none [&>*]:!border-0 [&>*]:!bg-transparent [&>*]:!shadow-none",
+          "[&>*:hover]:!border-0",
+          "[&>*:focus-within]:!border-0 [&>*:focus-within]:!bg-transparent [&>*:focus-within]:!shadow-none",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
   }
 );
 ThreadComposerInput.displayName = "ThreadComposer.Input";
@@ -9580,6 +9607,7 @@ var ThreadComposerFooter = forwardRef(
       "div",
       {
         ref,
+        "data-slot": "thread-composer-footer",
         className: cn(
           "flex shrink-0 items-center justify-between gap-2 px-3 pb-2.5 pt-1.5",
           className