@rojaostudio/ds 1.0.0

package/dist/components/toggle-group.js

@@ -0,0 +1,80 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useId } from "react";
+const SIZE_CLASS = {
+  sm: "h-control-sm text-caption px-2.5 gap-1",
+  md: "h-control-md text-label px-3 gap-1.5",
+  lg: "h-control-lg text-label px-4 gap-2"
+};
+function ToggleGroup(props) {
+  var _a, _b, _c, _d;
+  const options = props.options;
+  const size = (_a = props.size) != null ? _a : "md";
+  const className = (_b = props.className) != null ? _b : "";
+  const stretch = (_c = props.stretch) != null ? _c : false;
+  const label = props.label;
+  const selectedTone = (_d = props.selectedTone) != null ? _d : "brand";
+  const isMulti = props.type === "multi";
+  const groupId = useId();
+  function isActive(opt) {
+    return isMulti ? props.value.includes(opt.value) : props.value === opt.value;
+  }
+  function handleClick(opt) {
+    if (opt.disabled) return;
+    if (isMulti) {
+      const current = props.value;
+      const next = current.includes(opt.value) ? current.filter((v) => v !== opt.value) : [...current, opt.value];
+      props.onChange(next);
+    } else {
+      const single = props;
+      if (single.allowDeselect && single.value === opt.value) {
+        single.onChange(null);
+      } else {
+        single.onChange(opt.value);
+      }
+    }
+  }
+  const group = /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      id: groupId,
+      role: isMulti ? "group" : "radiogroup",
+      "aria-label": props["aria-label"],
+      className: [
+        stretch ? "flex w-full" : "inline-flex",
+        "rounded-(--radius-control) border border-stroke-default bg-surface-default p-0.5 gap-0.5",
+        label ? "" : className
+      ].join(" ")
+    },
+    options.map((opt) => {
+      const active = isActive(opt);
+      return /* @__PURE__ */ React.createElement(
+        "button",
+        {
+          key: opt.value,
+          type: "button",
+          role: isMulti ? "switch" : "radio",
+          "aria-checked": active,
+          disabled: opt.disabled,
+          style: opt.style,
+          onClick: () => handleClick(opt),
+          className: [
+            "inline-flex items-center justify-center rounded-(--radius-control) font-medium transition-colors",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus focus-visible:z-10",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            stretch ? "flex-1" : "",
+            SIZE_CLASS[size],
+            active ? selectedTone === "neutral" ? "bg-surface-invert text-fg-inverse" : "bg-brand-primary text-brand-on-primary" : "text-fg-secondary hover:text-fg-primary hover:bg-surface-raised"
+          ].join(" ")
+        },
+        opt.icon && /* @__PURE__ */ React.createElement("span", { className: "[&_svg]:size-4 shrink-0" }, opt.icon),
+        opt.label && /* @__PURE__ */ React.createElement("span", null, opt.label)
+      );
+    })
+  );
+  if (!label) return group;
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-1.5", className].join(" ") }, /* @__PURE__ */ React.createElement("label", { htmlFor: groupId, className: "text-label font-medium text-fg-primary" }, label), group);
+}
+export {
+  ToggleGroup
+};

package/dist/components/toggle.d.ts

@@ -0,0 +1,13 @@
+import * as react from 'react';
+import { InputHTMLAttributes, ReactNode } from 'react';
+
+interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    size?: 'sm' | 'md' | 'lg';
+    /** Posição do label em relação ao switch. default = "right". */
+    labelPosition?: 'left' | 'right';
+}
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLInputElement>>;
+
+export { Toggle, type ToggleProps };

package/dist/components/toggle.js

@@ -0,0 +1,64 @@
+"use client";
+import {
+  __objRest,
+  __spreadValues
+} from "../chunk-ORMEWXMH.js";
+import { forwardRef, useId } from "react";
+const SIZE = {
+  sm: { track: "h-4 w-7", thumb: "size-3 peer-checked:translate-x-3.5", text: "text-caption" },
+  md: { track: "h-5 w-9", thumb: "size-4 peer-checked:translate-x-4", text: "text-label" },
+  lg: { track: "h-6 w-11", thumb: "size-5 peer-checked:translate-x-5", text: "text-label" }
+};
+const Toggle = forwardRef(function Toggle2(_a, ref) {
+  var _b = _a, { label, description, size = "md", labelPosition = "right", className = "", id } = _b, props = __objRest(_b, ["label", "description", "size", "labelPosition", "className", "id"]);
+  const generatedId = useId();
+  const inputId = id != null ? id : generatedId;
+  const sz = SIZE[size];
+  const labelEl = (label || description) && /* @__PURE__ */ React.createElement("span", { className: "flex flex-col gap-0.5 select-none" }, label && /* @__PURE__ */ React.createElement("span", { className: [sz.text, "text-fg-primary leading-snug"].join(" ") }, label), description && /* @__PURE__ */ React.createElement("span", { className: "text-caption text-fg-muted leading-snug" }, description));
+  const switchEl = /* @__PURE__ */ React.createElement("span", { className: ["relative inline-flex shrink-0 items-center", sz.track].join(" ") }, /* @__PURE__ */ React.createElement(
+    "input",
+    __spreadValues({
+      ref,
+      type: "checkbox",
+      role: "switch",
+      id: inputId,
+      className: "peer sr-only"
+    }, props)
+  ), /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: [
+        "absolute inset-0 rounded-full transition-colors",
+        "bg-surface-raised border border-stroke-control",
+        "peer-checked:bg-(--toggle-track-active) peer-checked:border-transparent",
+        "peer-focus-visible:ring-2 peer-focus-visible:ring-stroke-focus/30",
+        "peer-disabled:cursor-not-allowed"
+      ].join(" ")
+    }
+  ), /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: [
+        "relative rounded-full bg-surface-default shadow-sm transition-transform translate-x-0.5",
+        sz.thumb
+      ].join(" ")
+    }
+  ));
+  return /* @__PURE__ */ React.createElement(
+    "label",
+    {
+      htmlFor: inputId,
+      className: [
+        "inline-flex items-start gap-2.5 cursor-pointer",
+        "has-[:disabled]:opacity-50 has-[:disabled]:cursor-not-allowed",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    labelPosition === "left" && labelEl,
+    /* @__PURE__ */ React.createElement("span", { className: "flex items-center pt-0.5" }, switchEl),
+    labelPosition === "right" && labelEl
+  );
+});
+export {
+  Toggle
+};

package/dist/components/tooltip.d.ts

@@ -0,0 +1,17 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    delay?: number;
+    /** Extra classes on the tooltip bubble — use to override whitespace-nowrap for rich content */
+    className?: string;
+    /** Classes on the trigger wrapper span — override the default `inline-flex items-center` when the
+     *  target must fill a flex/grid cell (e.g. `relative flex-1`, `block w-full`). */
+    wrapperClassName?: string;
+}
+declare function Tooltip({ content, children, side, delay, className, wrapperClassName }: TooltipProps): react.JSX.Element;
+
+export { Tooltip, type TooltipProps };

package/dist/components/tooltip.js

@@ -0,0 +1,89 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useState, useRef, useEffect, useId } from "react";
+const GAP = 8;
+function getFixedPos(rect, side) {
+  const vpW = typeof window !== "undefined" ? window.innerWidth : 1920;
+  const EDGE = 80;
+  switch (side) {
+    case "right":
+      return { top: rect.top + rect.height / 2, left: rect.right + GAP, transform: "translateY(-50%)" };
+    case "left":
+      return { top: rect.top + rect.height / 2, left: rect.left - GAP, transform: "translate(-100%, -50%)" };
+    case "bottom": {
+      const cx = rect.left + rect.width / 2;
+      if (cx > vpW - EDGE) return { top: rect.bottom + GAP, left: rect.right, transform: "translateX(-100%)" };
+      if (cx < EDGE) return { top: rect.bottom + GAP, left: rect.left, transform: "" };
+      return { top: rect.bottom + GAP, left: cx, transform: "translateX(-50%)" };
+    }
+    case "top":
+    default: {
+      const cx = rect.left + rect.width / 2;
+      if (cx > vpW - EDGE) return { top: rect.top - GAP, left: rect.right, transform: "translate(-100%, -100%)" };
+      if (cx < EDGE) return { top: rect.top - GAP, left: rect.left, transform: "translateY(-100%)" };
+      return { top: rect.top - GAP, left: cx, transform: "translate(-50%, -100%)" };
+    }
+  }
+}
+const ARROW_CLASSES = {
+  top: `bottom-0 left-1/2 -translate-x-1/2 translate-y-full border-t-[var(--tooltip-bg)] border-x-transparent border-b-transparent`,
+  bottom: `top-0 left-1/2 -translate-x-1/2 -translate-y-full border-b-[var(--tooltip-bg)] border-x-transparent border-t-transparent`,
+  left: `right-0 top-1/2 -translate-y-1/2 translate-x-full border-l-[var(--tooltip-bg)] border-y-transparent border-r-transparent`,
+  right: `left-0 top-1/2 -translate-y-1/2 -translate-x-full border-r-[var(--tooltip-bg)] border-y-transparent border-l-transparent`
+};
+function Tooltip({ content, children, side = "top", delay = 300, className, wrapperClassName }) {
+  const id = useId();
+  const ref = useRef(null);
+  const timer = useRef(null);
+  const [pos, setPos] = useState(null);
+  function show() {
+    timer.current = setTimeout(() => {
+      if (!ref.current) return;
+      setPos(getFixedPos(ref.current.getBoundingClientRect(), side));
+    }, delay);
+  }
+  function hide() {
+    if (timer.current) clearTimeout(timer.current);
+    setPos(null);
+  }
+  useEffect(() => () => {
+    if (timer.current) clearTimeout(timer.current);
+  }, []);
+  return /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ref,
+      className: wrapperClassName != null ? wrapperClassName : "inline-flex items-center",
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      "aria-describedby": pos ? id : void 0
+    },
+    children,
+    pos && /* @__PURE__ */ React.createElement(
+      "span",
+      {
+        id,
+        role: "tooltip",
+        style: { position: "fixed", top: pos.top, left: pos.left, transform: pos.transform },
+        className: `z-[9999] px-2.5 py-1.5 bg-[var(--tooltip-bg)] text-[var(--tooltip-text)] text-caption font-medium rounded-(--radius-tooltip) whitespace-nowrap pointer-events-none shadow-md${className ? ` ${className}` : ""}`
+      },
+      /* @__PURE__ */ React.createElement(
+        "span",
+        {
+          "aria-hidden": "true",
+          className: [
+            "absolute border-[5px]",
+            ARROW_CLASSES[side]
+          ].join(" "),
+          style: { width: 0, height: 0 }
+        }
+      ),
+      content
+    )
+  );
+}
+export {
+  Tooltip
+};

package/dist/components/typing-indicator.d.ts

@@ -0,0 +1,8 @@
+import * as react from 'react';
+
+interface TypingIndicatorProps {
+    ariaLabel?: string;
+}
+declare function TypingIndicator({ ariaLabel }: TypingIndicatorProps): react.JSX.Element;
+
+export { TypingIndicator, type TypingIndicatorProps };

package/dist/components/typing-indicator.js

@@ -0,0 +1,27 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { ChatBubble } from "./chat-bubble.js";
+function TypingIndicator({ ariaLabel = "Digitando" }) {
+  const dotStyle = (delay) => ({
+    width: "var(--typing-dot-size)",
+    height: "var(--typing-dot-size)",
+    background: "var(--typing-dot-color)",
+    borderRadius: "9999px",
+    animation: "rojao-typing-pulse 1400ms infinite",
+    animationDelay: delay
+  });
+  return /* @__PURE__ */ React.createElement(ChatBubble, { variant: "bot", ariaLabel }, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: "inline-flex items-center",
+      style: { gap: "var(--typing-dot-gap)" },
+      "aria-live": "polite"
+    },
+    /* @__PURE__ */ React.createElement("span", { style: dotStyle("0ms") }),
+    /* @__PURE__ */ React.createElement("span", { style: dotStyle("200ms") }),
+    /* @__PURE__ */ React.createElement("span", { style: dotStyle("400ms") })
+  ));
+}
+export {
+  TypingIndicator
+};

package/dist/components/use-dismiss.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+
+/**
+ * useDismiss — outside-click + ESC para overlays (dropdown, combobox, etc).
+ * Stale-closure safe: handler updates on every render via ref.
+ */
+declare function useDismiss(popupRef: RefObject<Element | null>, triggerRef: RefObject<Element | null>, onDismiss: () => void, active: boolean): void;
+
+export { useDismiss };

package/dist/components/use-dismiss.js

@@ -0,0 +1,28 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useEffect, useRef } from "react";
+function useDismiss(popupRef, triggerRef, onDismiss, active) {
+  const cb = useRef(onDismiss);
+  cb.current = onDismiss;
+  useEffect(() => {
+    if (!active) return;
+    const onMouse = (e) => {
+      var _a, _b;
+      const t = e.target;
+      if (((_a = popupRef.current) == null ? void 0 : _a.contains(t)) || ((_b = triggerRef.current) == null ? void 0 : _b.contains(t))) return;
+      cb.current();
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") cb.current();
+    };
+    document.addEventListener("mousedown", onMouse);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onMouse);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [active]);
+}
+export {
+  useDismiss
+};

package/dist/components/use-focus-trap.d.ts

@@ -0,0 +1,5 @@
+import * as react from 'react';
+
+declare function useFocusTrap<T extends HTMLElement>(open: boolean): react.RefObject<T | null>;
+
+export { useFocusTrap };

package/dist/components/use-focus-trap.js

@@ -0,0 +1,54 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useEffect, useRef } from "react";
+const FOCUSABLE = [
+  "a[href]",
+  "button:not([disabled])",
+  "textarea:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(", ");
+function useFocusTrap(open) {
+  const ref = useRef(null);
+  useEffect(() => {
+    var _a;
+    if (!open) return;
+    const container = ref.current;
+    if (!container) return;
+    const previousFocus = document.activeElement;
+    const focusables = Array.from(container.querySelectorAll(FOCUSABLE));
+    ((_a = focusables[0]) != null ? _a : container).focus();
+    const trap = (e) => {
+      if (e.key !== "Tab") return;
+      const nodes = Array.from(container.querySelectorAll(FOCUSABLE));
+      if (nodes.length === 0) {
+        e.preventDefault();
+        return;
+      }
+      const first = nodes[0];
+      const last = nodes[nodes.length - 1];
+      if (!first || !last) return;
+      if (e.shiftKey) {
+        if (document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        }
+      } else {
+        if (document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+    document.addEventListener("keydown", trap);
+    return () => {
+      document.removeEventListener("keydown", trap);
+      previousFocus == null ? void 0 : previousFocus.focus();
+    };
+  }, [open]);
+  return ref;
+}
+export {
+  useFocusTrap
+};

package/dist/icons/index.d.ts

@@ -0,0 +1 @@
+export { AlertCircle, AlertTriangle, BarChart2, Check, CheckCircle, ChevronDown, ChevronLeft, ChevronRight, DollarSign, ExternalLink, FileText, GripVertical, House, Kanban, Layers, LayoutGrid, LayoutList, Loader2, LogOut, LucideIcon, LucideProps, Megaphone, Menu, MessagesSquare, Moon, Package, PanelLeftClose, PanelLeftOpen, Pencil, Plug, Plus, RefreshCw, Search, Settings, Star, Store, Sun, ThumbsUp, Trash2, Upload, Users, Wallet, X, Zap } from 'lucide-react';

package/dist/icons/index.js

@@ -0,0 +1,89 @@
+import "../chunk-ORMEWXMH.js";
+import {
+  AlertCircle,
+  AlertTriangle,
+  BarChart2,
+  Check,
+  CheckCircle,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  DollarSign,
+  ExternalLink,
+  FileText,
+  GripVertical,
+  House,
+  Kanban,
+  Layers,
+  LayoutGrid,
+  LayoutList,
+  Loader2,
+  LogOut,
+  Megaphone,
+  Menu,
+  MessagesSquare,
+  Moon,
+  Package,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Pencil,
+  Plug,
+  Plus,
+  RefreshCw,
+  Search,
+  Settings,
+  Star,
+  Store,
+  Sun,
+  ThumbsUp,
+  Trash2,
+  Upload,
+  Users,
+  Wallet,
+  X,
+  Zap
+} from "lucide-react";
+export {
+  AlertCircle,
+  AlertTriangle,
+  BarChart2,
+  Check,
+  CheckCircle,
+  ChevronDown,
+  ChevronLeft,
+  ChevronRight,
+  DollarSign,
+  ExternalLink,
+  FileText,
+  GripVertical,
+  House,
+  Kanban,
+  Layers,
+  LayoutGrid,
+  LayoutList,
+  Loader2,
+  LogOut,
+  Megaphone,
+  Menu,
+  MessagesSquare,
+  Moon,
+  Package,
+  PanelLeftClose,
+  PanelLeftOpen,
+  Pencil,
+  Plug,
+  Plus,
+  RefreshCw,
+  Search,
+  Settings,
+  Star,
+  Store,
+  Sun,
+  ThumbsUp,
+  Trash2,
+  Upload,
+  Users,
+  Wallet,
+  X,
+  Zap
+};

package/dist/targets/native/components/accordion.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type AccordionProps = {
+    children: ReactNode;
+    /** Permite vários itens abertos ao mesmo tempo. Default: false (single). */
+    allowMultiple?: boolean;
+};
+declare function Accordion({ children, allowMultiple }: AccordionProps): react.JSX.Element;
+type AccordionItemProps = {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+};
+declare function AccordionItem({ title, children, defaultOpen, disabled }: AccordionItemProps): react.JSX.Element;
+
+export { Accordion, AccordionItem, type AccordionItemProps, type AccordionProps };

package/dist/targets/native/components/accordion.js

@@ -0,0 +1,122 @@
+import "../../../chunk-ORMEWXMH.js";
+import { ChevronDown } from "lucide-react-native";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { Animated, LayoutAnimation, Platform, Pressable, StyleSheet, UIManager, View } from "react-native";
+import { Text } from "./text.js";
+import { useTheme } from "./theme.js";
+if (Platform.OS === "android" && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const AccordionContext = createContext(null);
+function Accordion({ children, allowMultiple = false }) {
+  const t = useTheme();
+  const registry = useRef(/* @__PURE__ */ new Map());
+  const register = useCallback((id, close) => {
+    registry.current.set(id, close);
+    return () => {
+      registry.current.delete(id);
+    };
+  }, []);
+  const notifyOpen = useCallback(
+    (id) => {
+      if (allowMultiple) return;
+      registry.current.forEach((close, key) => {
+        if (key !== id) close();
+      });
+    },
+    [allowMultiple]
+  );
+  return /* @__PURE__ */ React.createElement(AccordionContext.Provider, { value: { notifyOpen, register, allowMultiple } }, /* @__PURE__ */ React.createElement(
+    View,
+    {
+      style: [
+        styles.group,
+        { borderColor: t["--border-default"], backgroundColor: t["--surface-default"] }
+      ]
+    },
+    children
+  ));
+}
+let nextId = 0;
+function AccordionItem({ title, children, defaultOpen = false, disabled = false }) {
+  const t = useTheme();
+  const ctx = useContext(AccordionContext);
+  const idRef = useRef(nextId++);
+  const [open, setOpen] = useState(defaultOpen);
+  const rotate = useRef(new Animated.Value(defaultOpen ? 1 : 0)).current;
+  const close = useCallback(() => setOpen(false), []);
+  useEffect(() => {
+    if (!ctx) return;
+    return ctx.register(idRef.current, close);
+  }, [ctx, close]);
+  useEffect(() => {
+    Animated.timing(rotate, {
+      toValue: open ? 1 : 0,
+      duration: 180,
+      useNativeDriver: true
+    }).start();
+  }, [open, rotate]);
+  const toggle = useCallback(() => {
+    LayoutAnimation.configureNext(LayoutAnimation.create(180, "easeInEaseOut", "opacity"));
+    setOpen((prev) => {
+      const next = !prev;
+      if (next && ctx) ctx.notifyOpen(idRef.current);
+      return next;
+    });
+  }, [ctx]);
+  const spin = rotate.interpolate({ inputRange: [0, 1], outputRange: ["0deg", "180deg"] });
+  return /* @__PURE__ */ React.createElement(View, { style: [styles.item, { borderBottomColor: t["--border-default"] }] }, /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      accessibilityRole: "button",
+      accessibilityState: { expanded: open, disabled },
+      accessibilityLabel: title,
+      disabled,
+      hitSlop: 4,
+      onPress: toggle,
+      style: ({ pressed }) => [
+        styles.header,
+        {
+          backgroundColor: pressed && !disabled ? t["--surface-raised"] : "transparent",
+          opacity: disabled ? 0.5 : 1
+        }
+      ]
+    },
+    /* @__PURE__ */ React.createElement(Text, { variant: "label", style: styles.title, numberOfLines: 1 }, title),
+    /* @__PURE__ */ React.createElement(Animated.View, { style: { transform: [{ rotate: spin }] } }, /* @__PURE__ */ React.createElement(ChevronDown, { size: 20, color: t["--text-muted"] }))
+  ), open ? /* @__PURE__ */ React.createElement(View, { style: styles.body }, typeof children === "string" ? /* @__PURE__ */ React.createElement(Text, { variant: "body-sm", color: "secondary" }, children) : children) : null);
+}
+const styles = StyleSheet.create({
+  group: {
+    borderWidth: 1,
+    borderRadius: 12,
+    overflow: "hidden"
+  },
+  item: {
+    borderBottomWidth: StyleSheet.hairlineWidth
+  },
+  header: {
+    minHeight: 48,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    paddingHorizontal: 16,
+    paddingVertical: 12
+  },
+  title: { flex: 1 },
+  body: {
+    paddingHorizontal: 16,
+    paddingBottom: 16
+  }
+});
+export {
+  Accordion,
+  AccordionItem
+};

package/dist/targets/native/components/alert.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type AlertVariant = 'success' | 'danger' | 'warning' | 'info';
+interface AlertProps {
+    variant?: AlertVariant;
+    title?: string;
+    children?: ReactNode;
+    /** Botão close (X). Quando presente, renderiza o alvo de toque. */
+    onClose?: () => void;
+    /** Esconde o ícone leading. default = false. */
+    hideIcon?: boolean;
+}
+declare function Alert({ variant, title, children, onClose, hideIcon }: AlertProps): react.JSX.Element;
+
+export { Alert, type AlertProps, type AlertVariant };