@rojaostudio/ds 1.0.0

package/dist/components/chat-bubble.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { MouseEvent, ReactNode } from 'react';
+
+type ChatBubbleVariant = 'bot' | 'user';
+type ChatBubbleState = 'sent' | 'editing' | 'pending';
+interface ChatBubbleProps {
+    variant: ChatBubbleVariant;
+    state?: ChatBubbleState;
+    dim?: boolean;
+    onClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    children: ReactNode;
+    ariaLabel?: string;
+}
+declare function ChatBubble({ variant, state, dim, onClick, children, ariaLabel, }: ChatBubbleProps): react.JSX.Element;
+
+export { ChatBubble, type ChatBubbleProps, type ChatBubbleState, type ChatBubbleVariant };

package/dist/components/chat-bubble.js

@@ -0,0 +1,55 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+function ChatBubble({
+  variant,
+  state = "sent",
+  dim = false,
+  onClick,
+  children,
+  ariaLabel
+}) {
+  const isBot = variant === "bot";
+  const interactive = !!onClick && !dim;
+  const wrapperClass = [
+    "w-full flex",
+    isBot ? "justify-start" : "justify-end"
+  ].join(" ");
+  const bubbleClass = [
+    "inline-block max-w-[var(--chat-bubble-max-width)]",
+    "px-[var(--chat-bubble-padding-x)] py-[var(--chat-bubble-padding-y)]",
+    "text-[length:var(--font-size-body)] leading-[var(--line-height-body)]",
+    "transition-all",
+    isBot ? "bg-[var(--chat-bubble-bot-bg)] text-[var(--chat-bubble-bot-text)]" : "bg-[var(--chat-bubble-user-bg)] text-[var(--chat-bubble-user-text)]",
+    dim ? "opacity-[var(--chat-bubble-dim-opacity)] pointer-events-none" : "",
+    state === "editing" ? "ring-2 ring-[var(--chat-bubble-editing-border)] ring-offset-1" : "",
+    interactive ? "cursor-pointer hover:brightness-95" : ""
+  ].filter(Boolean).join(" ");
+  const radiusStyle = isBot ? {
+    borderRadius: "var(--chat-bubble-radius-lg)",
+    borderTopLeftRadius: "var(--chat-bubble-radius-sm)"
+  } : {
+    borderRadius: "var(--chat-bubble-radius-lg)",
+    borderBottomRightRadius: "var(--chat-bubble-radius-sm)"
+  };
+  return /* @__PURE__ */ React.createElement("div", { className: wrapperClass }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: bubbleClass,
+      style: radiusStyle,
+      onClick: interactive ? onClick : void 0,
+      role: interactive ? "button" : void 0,
+      tabIndex: interactive ? 0 : void 0,
+      onKeyDown: interactive ? (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick == null ? void 0 : onClick(e);
+        }
+      } : void 0,
+      "aria-label": ariaLabel
+    },
+    children
+  ));
+}
+export {
+  ChatBubble
+};

package/dist/components/checkbox.d.ts

@@ -0,0 +1,14 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: ReactNode;
+    /** Texto secundário abaixo do label. */
+    description?: ReactNode;
+    indeterminate?: boolean;
+    error?: string;
+    size?: 'sm' | 'md';
+}
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Checkbox, type CheckboxProps };

package/dist/components/checkbox.js

@@ -0,0 +1,78 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef, useEffect, useId, useRef } from "react";
+const SIZE_CLASS = {
+  sm: { box: "size-3.5", svg: "size-3.5", label: "text-caption", icon: 12 },
+  md: { box: "size-4", svg: "size-4", label: "text-label", icon: 14 }
+};
+const Checkbox = forwardRef(function Checkbox2(_a, ref) {
+  var _b = _a, { label, description, indeterminate = false, error, size = "md", className = "", id } = _b, props = __objRest(_b, ["label", "description", "indeterminate", "error", "size", "className", "id"]);
+  const innerRef = useRef(null);
+  const setRef = (node) => {
+    innerRef.current = node;
+    if (typeof ref === "function") ref(node);
+    else if (ref) ref.current = node;
+  };
+  useEffect(() => {
+    if (innerRef.current) innerRef.current.indeterminate = indeterminate;
+  }, [indeterminate]);
+  const generatedId = useId();
+  const inputId = id != null ? id : generatedId;
+  const errId = `${inputId}-error`;
+  const sz = SIZE_CLASS[size];
+  return /* @__PURE__ */ React.createElement("div", { className: "inline-flex flex-col gap-0.5" }, /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      htmlFor: inputId,
+      className: [
+        "inline-flex items-start gap-2 cursor-pointer",
+        "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    /* @__PURE__ */ React.createElement("span", { className: ["relative flex shrink-0 mt-0.5", sz.box].join(" ") }, /* @__PURE__ */ React.createElement(
+      "input",
+      __spreadValues({
+        ref: setRef,
+        type: "checkbox",
+        id: inputId,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errId : void 0,
+        className: [
+          "peer appearance-none rounded shrink-0 cursor-pointer",
+          sz.box,
+          "bg-surface-default",
+          error ? "border border-danger checked:bg-danger checked:border-danger indeterminate:bg-danger indeterminate:border-danger" : "border border-stroke-control checked:bg-brand-primary checked:border-brand-primary indeterminate:bg-brand-primary indeterminate:border-brand-primary",
+          "focus-visible:ring-2 focus-visible:ring-stroke-focus/30 focus-visible:outline-none",
+          "disabled:cursor-not-allowed",
+          "transition-colors"
+        ].join(" ")
+      }, props)
+    ), /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        className: ["absolute inset-0 pointer-events-none hidden peer-checked:block text-brand-on-primary", sz.svg].join(" "),
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M3.5 8L6.5 11L12.5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    ), /* @__PURE__ */ React.createElement(
+      "svg",
+      {
+        className: ["absolute inset-0 pointer-events-none hidden peer-indeterminate:block text-brand-on-primary", sz.svg].join(" "),
+        viewBox: "0 0 16 16",
+        fill: "none",
+        "aria-hidden": "true"
+      },
+      /* @__PURE__ */ React.createElement("path", { d: "M4 8H12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+    )),
+    (label || description) && /* @__PURE__ */ React.createElement("span", { className: "flex flex-col gap-0.5 select-none" }, label && /* @__PURE__ */ React.createElement("span", { className: [sz.label, "text-fg-primary leading-snug"].join(" ") }, label), description && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted leading-snug" }, description))
+  ), error && /* @__PURE__ */ React.createElement("p", { id: errId, className: [sz.box === "size-3.5" ? "pl-5" : "pl-6", "text-caption text-danger-text"].join(" ") }, error));
+});
+export {
+  Checkbox
+};

package/dist/components/chip-input.d.ts

@@ -0,0 +1,26 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChipItem {
+    id: string;
+    label: string;
+}
+interface ChipInputProps {
+    value: ChipItem[];
+    onChange: (next: ChipItem[]) => void;
+    /** Available suggestions — filtered by current input text. */
+    suggestions?: ChipItem[];
+    placeholder?: string;
+    /** Helper text shown below the input. */
+    helper?: ReactNode;
+    /** When defined, free-form text confirms create the chip via this callback. */
+    onCreate?: (text: string) => Promise<ChipItem | null> | ChipItem | null;
+    /** Dropdown copy for the "create" option. */
+    createPrefix?: string;
+    creatingLabel?: string;
+    /** Custom aria-label for the chip remove button. */
+    removeAriaLabel?: (chip: ChipItem) => string;
+}
+declare function ChipInput({ value, onChange, suggestions, placeholder, helper, onCreate, createPrefix, creatingLabel, removeAriaLabel, }: ChipInputProps): react.JSX.Element;
+
+export { ChipInput, type ChipInputProps, type ChipItem };

package/dist/components/chip-input.js

@@ -0,0 +1,182 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+function ChipInput({
+  value,
+  onChange,
+  suggestions = [],
+  placeholder,
+  helper,
+  onCreate,
+  createPrefix = "Criar",
+  creatingLabel = "Criando...",
+  removeAriaLabel
+}) {
+  const [input, setInput] = useState("");
+  const [open, setOpen] = useState(false);
+  const [creating, setCreating] = useState(false);
+  const inputRef = useRef(null);
+  const containerRef = useRef(null);
+  const listRef = useRef(null);
+  const [pos, setPos] = useState(null);
+  useEffect(() => {
+    function onOutside(e) {
+      var _a, _b;
+      const target = e.target;
+      if (((_a = containerRef.current) == null ? void 0 : _a.contains(target)) || ((_b = listRef.current) == null ? void 0 : _b.contains(target))) return;
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, []);
+  useEffect(() => {
+    if (!open) return;
+    function update() {
+      const el = containerRef.current;
+      if (!el) return;
+      const r = el.getBoundingClientRect();
+      setPos({ top: r.bottom + 4, left: r.left, width: r.width });
+    }
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [open]);
+  const trimmed = input.trim();
+  const filtered = suggestions.filter(
+    (s) => !value.some((v) => v.id === s.id) && s.label.toLowerCase().includes(trimmed.toLowerCase())
+  );
+  const exactMatch = suggestions.some((s) => s.label.toLowerCase() === trimmed.toLowerCase());
+  const showCreate = !!onCreate && trimmed.length > 0 && !exactMatch;
+  function selectChip(chip) {
+    if (value.some((v) => v.id === chip.id)) return;
+    onChange([...value, chip]);
+    setInput("");
+    setOpen(false);
+  }
+  function removeChip(id) {
+    onChange(value.filter((v) => v.id !== id));
+  }
+  async function handleCreate() {
+    if (!onCreate || !trimmed || creating) return;
+    setCreating(true);
+    try {
+      const result = await onCreate(trimmed);
+      if (result) {
+        onChange([...value, result]);
+        setInput("");
+        setOpen(false);
+      }
+    } finally {
+      setCreating(false);
+    }
+  }
+  function handleKeyDown(e) {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      if (filtered.length > 0) {
+        selectChip(filtered[0]);
+        return;
+      }
+      if (showCreate) void handleCreate();
+      return;
+    }
+    if (e.key === "Backspace" && !input && value.length > 0) {
+      removeChip(value[value.length - 1].id);
+    }
+  }
+  return /* @__PURE__ */ React.createElement("div", { ref: containerRef, className: "relative" }, /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: "flex flex-wrap gap-1.5 px-2.5 py-2 min-h-[38px] border border-stroke-control rounded-(--radius-control) bg-surface-default focus-within:border-stroke-strong cursor-text",
+      onClick: () => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.focus();
+      }
+    },
+    value.map((chip) => {
+      var _a;
+      return /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          key: chip.id,
+          className: "inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full bg-(--brand-primary) text-(--text-inverse) text-caption font-medium"
+        },
+        chip.label,
+        /* @__PURE__ */ React.createElement(
+          "button",
+          {
+            type: "button",
+            onClick: (e) => {
+              e.stopPropagation();
+              removeChip(chip.id);
+            },
+            className: "ml-0.5 leading-none hover:opacity-70 transition-opacity",
+            "aria-label": (_a = removeAriaLabel == null ? void 0 : removeAriaLabel(chip)) != null ? _a : `Remove ${chip.label}`
+          },
+          /* @__PURE__ */ React.createElement(X, { size: 12, strokeWidth: 2.5 })
+        )
+      );
+    }),
+    /* @__PURE__ */ React.createElement(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: input,
+        onChange: (e) => {
+          setInput(e.target.value);
+          setOpen(true);
+        },
+        onKeyDown: handleKeyDown,
+        onFocus: () => setOpen(true),
+        placeholder: value.length === 0 ? placeholder : "",
+        className: "flex-1 min-w-[120px] bg-transparent text-label text-(--text-secondary) placeholder:text-(--text-disabled) focus:outline-none"
+      }
+    )
+  ), open && pos && (filtered.length > 0 || showCreate) && createPortal(
+    /* @__PURE__ */ React.createElement(
+      "ul",
+      {
+        ref: listRef,
+        style: { position: "fixed", top: pos.top, left: pos.left, width: pos.width },
+        className: "z-50 bg-surface-default border border-stroke-control rounded-(--radius-control) shadow-md max-h-48 overflow-auto"
+      },
+      filtered.map((s) => /* @__PURE__ */ React.createElement("li", { key: s.id }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onMouseDown: (e) => {
+            e.preventDefault();
+            selectChip(s);
+          },
+          className: "w-full text-left px-3 py-2 text-label text-(--text-secondary) hover:bg-(--surface-page) transition-colors"
+        },
+        s.label
+      ))),
+      showCreate && /* @__PURE__ */ React.createElement("li", { className: filtered.length > 0 ? "border-t border-stroke-subtle" : "" }, /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          disabled: creating,
+          onMouseDown: (e) => {
+            e.preventDefault();
+            void handleCreate();
+          },
+          className: "w-full text-left px-3 py-2 text-label font-medium text-(--text-primary) hover:bg-(--surface-page) transition-colors flex items-center gap-2 disabled:opacity-50"
+        },
+        /* @__PURE__ */ React.createElement("span", { className: "text-(--text-disabled)" }, "+"),
+        creating ? creatingLabel : /* @__PURE__ */ React.createElement(React.Fragment, null, createPrefix, " ", /* @__PURE__ */ React.createElement("span", { className: "font-semibold" }, `"${trimmed}"`))
+      ))
+    ),
+    document.body
+  ), helper && /* @__PURE__ */ React.createElement("p", { className: "mt-1 text-caption text-(--text-disabled)" }, helper));
+}
+export {
+  ChipInput
+};

package/dist/components/chips.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+import { ReactNode, MouseEvent } from 'react';
+
+interface ChipProps {
+    children: ReactNode;
+    onClick?: (e: MouseEvent<HTMLButtonElement | HTMLDivElement>) => void;
+    /** Leading slot — ícone, avatar, qualquer ReactNode. */
+    leading?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    /** Sem borda, background discreto. */
+    subtle?: boolean;
+    /** Destaca com cor primária. Usado com onRemove. */
+    selected?: boolean;
+    /** Exibe botão X de remover. Implica estrutura de div (não button). */
+    onRemove?: () => void;
+    /** Border tracejado + brand-secondary. Sinaliza sugestão de IA. */
+    highlight?: boolean;
+}
+declare function Chip({ children, onClick, leading, disabled, className, subtle, selected, onRemove, highlight, }: ChipProps): react.JSX.Element;
+
+export { Chip, type ChipProps };

package/dist/components/chips.js

@@ -0,0 +1,94 @@
+import "../chunk-ORMEWXMH.js";
+import { X } from "lucide-react";
+const BASE = "inline-flex items-center gap-1.5 px-3 h-7 text-caption font-medium rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus disabled:cursor-not-allowed disabled:opacity-50";
+function Chip({
+  children,
+  onClick,
+  leading,
+  disabled = false,
+  className = "",
+  subtle = false,
+  selected = false,
+  onRemove,
+  highlight = false
+}) {
+  if (onRemove !== void 0 || selected) {
+    let handleKey2 = function(e) {
+      if (!interactive) return;
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick == null ? void 0 : onClick(e);
+      }
+    };
+    var handleKey = handleKey2;
+    const interactive = !!onClick;
+    return /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive && !disabled ? 0 : void 0,
+        onClick: disabled ? void 0 : onClick,
+        onKeyDown: handleKey2,
+        className: [
+          BASE,
+          onRemove ? "pr-1.5" : "",
+          selected ? "border-brand-primary bg-brand-primary text-brand-on-primary" : "border-stroke-default bg-surface-default text-fg-primary",
+          interactive && !disabled ? "cursor-pointer hover:bg-surface-raised" : "",
+          disabled ? "opacity-50 cursor-not-allowed" : "",
+          className
+        ].join(" ")
+      },
+      leading && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-3.5" }, leading),
+      /* @__PURE__ */ React.createElement("span", { className: "truncate" }, children),
+      onRemove && /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          type: "button",
+          onClick: (e) => {
+            e.stopPropagation();
+            onRemove();
+          },
+          "aria-label": "Remover",
+          disabled,
+          className: "inline-flex items-center justify-center size-4 rounded-full opacity-60 hover:opacity-100 ml-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus transition-opacity"
+        },
+        /* @__PURE__ */ React.createElement(X, { size: 12 })
+      )
+    );
+  }
+  if (highlight) {
+    return /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick,
+        disabled,
+        className: [
+          BASE,
+          "border-dashed border-brand-secondary bg-brand-secondary/10 text-brand-secondary hover:bg-brand-secondary/20",
+          className
+        ].join(" ")
+      },
+      leading && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-3.5" }, leading),
+      children
+    );
+  }
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: [
+        BASE,
+        subtle ? "border-transparent bg-surface-raised text-fg-secondary hover:bg-stroke-default hover:text-fg-primary" : "border-stroke-default bg-surface-default text-fg-primary hover:bg-surface-raised",
+        className
+      ].join(" ")
+    },
+    leading && /* @__PURE__ */ React.createElement("span", { className: "shrink-0 [&_svg]:size-3.5" }, leading),
+    children
+  );
+}
+export {
+  Chip
+};

package/dist/components/choice-card.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChoiceCardProps {
+    selected: boolean;
+    onClick: () => void;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+    /** Override pontual (ex.: rounded-b-none quando há painel anexado embaixo). */
+    className?: string;
+}
+declare function ChoiceCard({ selected, onClick, label, description, icon, disabled, className }: ChoiceCardProps): react.JSX.Element;
+
+export { ChoiceCard, type ChoiceCardProps };

package/dist/components/choice-card.js

@@ -0,0 +1,60 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+function ChoiceCard({ selected, onClick, label, description, icon, disabled = false, className = "" }) {
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick,
+      disabled,
+      className: [
+        "w-full flex items-center gap-4 px-4 py-4 rounded-(--radius-card) border text-left transition-all",
+        selected ? "[border-color:var(--choice-card-border-active)] [background:var(--choice-card-bg-active)]" : "[border-color:var(--choice-card-border)] [background:var(--choice-card-bg)] hover:[border-color:var(--choice-card-border-hover)]",
+        disabled ? "opacity-50 cursor-not-allowed" : "",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    icon && /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: [
+          "shrink-0 w-9 h-9 rounded-(--radius-card) flex items-center justify-center transition-colors",
+          selected ? "[background:var(--choice-card-icon-bg-active)] [color:var(--choice-card-icon-active)]" : "[background:var(--choice-card-icon-bg)] [color:var(--choice-card-icon)]"
+        ].join(" ")
+      },
+      icon
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement(
+      "p",
+      {
+        className: [
+          "text-label font-semibold",
+          selected ? "[color:var(--choice-card-label-active)]" : "[color:var(--choice-card-label)]"
+        ].join(" ")
+      },
+      label
+    ), description && /* @__PURE__ */ React.createElement(
+      "p",
+      {
+        className: [
+          "text-caption mt-0.5",
+          selected ? "[color:var(--choice-card-description-active)]" : "[color:var(--choice-card-description)]"
+        ].join(" ")
+      },
+      description
+    )),
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: [
+          "shrink-0 w-4 h-4 rounded-full border-2 flex items-center justify-center transition-colors",
+          selected ? "[border-color:var(--choice-card-radio-border-active)]" : "[border-color:var(--choice-card-radio-border)]"
+        ].join(" ")
+      },
+      selected && /* @__PURE__ */ React.createElement("div", { className: "w-2 h-2 rounded-full [background:var(--choice-card-radio-dot)]" })
+    )
+  );
+}
+export {
+  ChoiceCard
+};

package/dist/components/choice-carousel.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface ChoiceCarouselProps<T> {
+    options: T[];
+    getKey: (option: T) => string;
+    renderCard: (option: T, isSelected: boolean) => ReactNode;
+    value: T | T[] | null;
+    onChange: (value: T | T[]) => void;
+    multiple?: boolean;
+    ariaLabel: string;
+    isDisabled?: (option: T) => boolean;
+}
+declare function ChoiceCarousel<T>({ options, getKey, renderCard, value, onChange, multiple, ariaLabel, isDisabled, }: ChoiceCarouselProps<T>): react.JSX.Element;
+
+export { ChoiceCarousel, type ChoiceCarouselProps };