@rojaostudio/ds 1.0.0

package/dist/components/context-menu.js

@@ -0,0 +1,70 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { forwardRef, useState, useEffect, useRef, useImperativeHandle } from "react";
+import { createPortal } from "react-dom";
+const ContextMenu = forwardRef(function ContextMenu2({
+  children,
+  menu,
+  minWidth = 180,
+  disabled = false,
+  className = ""
+}, ref) {
+  const [pos, setPos] = useState(null);
+  const [mounted, setMounted] = useState(false);
+  const containerRef = useRef(null);
+  const menuRef = useRef(null);
+  useImperativeHandle(ref, () => containerRef.current);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  useEffect(() => {
+    if (!pos) return;
+    const close = () => setPos(null);
+    const handleClick = (e) => {
+      var _a;
+      if ((_a = menuRef.current) == null ? void 0 : _a.contains(e.target)) return;
+      close();
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") close();
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    document.addEventListener("scroll", close, true);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+      document.removeEventListener("scroll", close, true);
+    };
+  }, [pos]);
+  useEffect(() => {
+    if (!pos || !menuRef.current) return;
+    const rect = menuRef.current.getBoundingClientRect();
+    const { innerWidth: vw, innerHeight: vh } = window;
+    let { x, y } = pos;
+    if (x + rect.width > vw - 8) x = vw - rect.width - 8;
+    if (y + rect.height > vh - 8) y = vh - rect.height - 8;
+    if (x !== pos.x || y !== pos.y) setPos({ x, y });
+  }, [pos]);
+  function handleContext(e) {
+    if (disabled) return;
+    e.preventDefault();
+    setPos({ x: e.clientX, y: e.clientY });
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { ref: containerRef, onContextMenu: handleContext, className }, children), mounted && pos && createPortal(
+    /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        ref: menuRef,
+        role: "menu",
+        className: "fixed z-[1000] rounded-(--radius-card) border border-stroke-default bg-surface-default shadow-lg py-1",
+        style: { top: pos.y, left: pos.x, minWidth }
+      },
+      typeof menu === "function" ? menu({ close: () => setPos(null) }) : menu
+    ),
+    document.body
+  ));
+});
+export {
+  ContextMenu
+};

package/dist/components/copilot-hint.d.ts

@@ -0,0 +1,18 @@
+import * as react from 'react';
+
+type CopilotHintPriority = 'high' | 'medium' | 'low';
+interface CopilotHintProps {
+    id: string;
+    title: string;
+    description?: string;
+    cta?: {
+        label: string;
+        href: string;
+    };
+    dismissible?: boolean;
+    priority?: CopilotHintPriority;
+    className?: string;
+}
+declare function CopilotHint({ id, title, description, cta, dismissible, priority, className, }: CopilotHintProps): react.JSX.Element | null;
+
+export { CopilotHint, type CopilotHintPriority, type CopilotHintProps };

package/dist/components/copilot-hint.js

@@ -0,0 +1,63 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useState, useEffect } from "react";
+function CopilotHint({
+  id,
+  title,
+  description,
+  cta,
+  dismissible = true,
+  priority = "medium",
+  className = ""
+}) {
+  const [dismissed, setDismissed] = useState(true);
+  useEffect(() => {
+    setDismissed(localStorage.getItem(`copilot-dismissed:${id}`) === "1");
+  }, [id]);
+  if (dismissed) return null;
+  function dismiss() {
+    localStorage.setItem(`copilot-dismissed:${id}`, "1");
+    setDismissed(true);
+  }
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: [
+        "rounded-(--radius-card) border bg-(--surface-raised) p-4 flex gap-3",
+        priority === "high" ? "border-brand-primary" : "border-stroke-default",
+        className
+      ].filter(Boolean).join(" ")
+    },
+    priority === "high" && /* @__PURE__ */ React.createElement("div", { className: "w-1 self-stretch rounded-full bg-(--brand-primary) shrink-0" }),
+    /* @__PURE__ */ React.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: "text-label font-medium text-(--text-primary)" }, title), description && /* @__PURE__ */ React.createElement("p", { className: "text-caption text-(--text-muted) mt-0.5 leading-relaxed" }, description), cta && /* @__PURE__ */ React.createElement(
+      "a",
+      {
+        href: cta.href,
+        className: "mt-2 inline-flex text-caption font-medium text-(--brand-primary) hover:underline"
+      },
+      cta.label,
+      " \u2192"
+    )),
+    dismissible && /* @__PURE__ */ React.createElement(
+      "button",
+      {
+        type: "button",
+        onClick: dismiss,
+        "aria-label": "Dispensar",
+        className: "text-(--text-disabled) hover:text-(--text-secondary) transition-colors shrink-0 self-start"
+      },
+      /* @__PURE__ */ React.createElement("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none" }, /* @__PURE__ */ React.createElement(
+        "path",
+        {
+          d: "M1 1l12 12M13 1L1 13",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round"
+        }
+      ))
+    )
+  );
+}
+export {
+  CopilotHint
+};

package/dist/components/copy-field.d.ts

@@ -0,0 +1,16 @@
+import * as react from 'react';
+
+interface CopyFieldProps {
+    /** Texto copiado pro clipboard. */
+    value: string;
+    /** Rótulo do botão em repouso. */
+    label?: string;
+    /** Rótulo após copiar (feedback). */
+    copiedLabel?: string;
+    /** Largura total do container. */
+    fullWidth?: boolean;
+    className?: string;
+}
+declare function CopyField({ value, label, copiedLabel, fullWidth, className, }: CopyFieldProps): react.JSX.Element;
+
+export { CopyField, type CopyFieldProps };

package/dist/components/copy-field.js

@@ -0,0 +1,41 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+function CopyField({
+  value,
+  label = "Copiar",
+  copiedLabel = "Copiado!",
+  fullWidth = false,
+  className = ""
+}) {
+  const [copied, setCopied] = useState(false);
+  async function handleCopy() {
+    try {
+      await navigator.clipboard.writeText(value);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (e) {
+    }
+  }
+  return /* @__PURE__ */ React.createElement(
+    "button",
+    {
+      type: "button",
+      onClick: handleCopy,
+      "aria-label": label,
+      className: [
+        "inline-flex items-center justify-center gap-2 h-control-md px-4 rounded-(--radius-card)",
+        "border border-stroke-default text-fg-secondary text-sm font-semibold",
+        "hover:bg-surface-hover transition-colors focus-visible:ring-2 focus-visible:ring-stroke-focus",
+        fullWidth ? "w-full" : "",
+        className
+      ].join(" ")
+    },
+    copied ? /* @__PURE__ */ React.createElement(Check, { className: "size-4 shrink-0 text-success-text" }) : /* @__PURE__ */ React.createElement(Copy, { className: "size-4 shrink-0" }),
+    copied ? copiedLabel : label
+  );
+}
+export {
+  CopyField
+};

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

@@ -0,0 +1,32 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface CurrencyInputProps {
+    /** Label renderada acima do controle (mesmo padrão do Input do DS). */
+    label?: ReactNode;
+    /** Nome do hidden input pra submission (server actions, forms). */
+    name: string;
+    /** ISO 4217 — 'BRL', 'USD', 'JPY', etc. Quando passada, resolve symbol/decimals/locale automaticamente. */
+    currency?: string;
+    /** Símbolo da moeda exibido à esquerda (R$, $, €, ₿). Obrigatório se `currency` não for passada. */
+    symbol?: string;
+    /** Casas decimais. BRL/USD = 2, JPY = 0, BTC = 8. Obrigatório se `currency` não for passada. */
+    decimals?: number;
+    /** Locale pra formatação. Default depende de `currency` (BRL→pt-BR etc) ou 'en'. */
+    locale?: string;
+    /** Valor inicial em SUBUNITS (integer). Ex: 9900 = R$99,00. */
+    defaultValueSubunits?: number | null;
+    placeholder?: string;
+    disabled?: boolean;
+    /** Callback com valor atual em subunits a cada mudança. */
+    onChange?: (subunits: number) => void;
+    /** Máximo de dígitos. default = 10 → R$ 99.999.999,99. */
+    maxDigits?: number;
+    /** Mostrar "0,00" em vez do placeholder quando valor é zero. default = false. */
+    showZero?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    className?: string;
+}
+declare function CurrencyInput({ label, name, currency, symbol: symbolProp, decimals: decimalsProp, locale: localeProp, defaultValueSubunits, placeholder, disabled, onChange, maxDigits, showZero, size, className, }: CurrencyInputProps): react.JSX.Element;
+
+export { CurrencyInput, type CurrencyInputProps };

package/dist/components/currency-input.js

@@ -0,0 +1,138 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { useState, useRef, useId, useMemo } from "react";
+const CURRENCY_LOCALE = {
+  BRL: "pt-BR",
+  USD: "en-US",
+  EUR: "de-DE",
+  GBP: "en-GB",
+  JPY: "ja-JP",
+  CNY: "zh-CN",
+  KRW: "ko-KR",
+  INR: "en-IN",
+  MXN: "es-MX",
+  COP: "es-CO",
+  ARS: "es-AR",
+  CLP: "es-CL",
+  PEN: "es-PE",
+  UYU: "es-UY",
+  CAD: "en-CA",
+  AUD: "en-AU",
+  CHF: "de-CH",
+  SGD: "en-SG",
+  HKD: "zh-HK",
+  TWD: "zh-TW"
+};
+function resolveCurrency(currency, explicitLocale) {
+  var _a, _b, _c, _d;
+  const locale = (_a = explicitLocale != null ? explicitLocale : CURRENCY_LOCALE[currency]) != null ? _a : "en";
+  try {
+    const fmt = new Intl.NumberFormat(locale, { style: "currency", currency, currencyDisplay: "narrowSymbol" });
+    const decimals = (_b = fmt.resolvedOptions().maximumFractionDigits) != null ? _b : 2;
+    const symbol = (_d = (_c = fmt.formatToParts(0).find((p) => p.type === "currency")) == null ? void 0 : _c.value) != null ? _d : currency;
+    return { symbol, decimals, locale };
+  } catch (e) {
+    return { symbol: currency, decimals: 2, locale };
+  }
+}
+const SIZE_INPUT = {
+  sm: "h-control-sm text-caption pl-7  pr-3",
+  md: "h-control-md text-label pl-9  pr-3",
+  lg: "h-control-lg text-body pl-10 pr-3"
+};
+const SIZE_SYMBOL = {
+  sm: "left-2.5 text-caption",
+  md: "left-3   text-label",
+  lg: "left-3.5 text-body"
+};
+function formatSubunits(subunits, decimals, locale) {
+  const divisor = Math.pow(10, decimals);
+  const decimal = subunits / divisor;
+  return new Intl.NumberFormat(locale, {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals
+  }).format(decimal);
+}
+function CurrencyInput({
+  label,
+  name,
+  currency,
+  symbol: symbolProp,
+  decimals: decimalsProp,
+  locale: localeProp,
+  defaultValueSubunits,
+  placeholder,
+  disabled,
+  onChange,
+  maxDigits = 10,
+  showZero = false,
+  size = "md",
+  className = ""
+}) {
+  const id = useId();
+  const inputRef = useRef(null);
+  const [subunits, setSubunits] = useState(defaultValueSubunits != null ? defaultValueSubunits : 0);
+  const { symbol, decimals, locale } = useMemo(() => {
+    if (currency) {
+      const resolved = resolveCurrency(currency, localeProp);
+      return {
+        symbol: symbolProp != null ? symbolProp : resolved.symbol,
+        decimals: decimalsProp != null ? decimalsProp : resolved.decimals,
+        locale: resolved.locale
+      };
+    }
+    return {
+      symbol: symbolProp != null ? symbolProp : "$",
+      decimals: decimalsProp != null ? decimalsProp : 2,
+      locale: localeProp != null ? localeProp : "en-US"
+    };
+  }, [currency, symbolProp, decimalsProp, localeProp]);
+  function update(next) {
+    setSubunits(next);
+    onChange == null ? void 0 : onChange(next);
+  }
+  function handleChange(e) {
+    if (disabled) return;
+    const digits = e.target.value.replace(/\D/g, "").slice(0, maxDigits);
+    update(digits === "" ? 0 : parseInt(digits, 10));
+  }
+  const isEmpty = subunits === 0 && !showZero;
+  const displayValue = isEmpty ? "" : formatSubunits(subunits, decimals, locale);
+  const placeholderText = placeholder != null ? placeholder : formatSubunits(0, decimals, locale);
+  const control = /* @__PURE__ */ React.createElement("div", { className: ["relative flex items-center", label ? "" : className].join(" ") }, /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      className: [
+        "absolute select-none pointer-events-none",
+        SIZE_SYMBOL[size],
+        disabled ? "text-fg-disabled" : "text-fg-muted"
+      ].join(" ")
+    },
+    symbol
+  ), /* @__PURE__ */ React.createElement(
+    "input",
+    {
+      ref: inputRef,
+      id,
+      type: "text",
+      inputMode: "numeric",
+      value: displayValue,
+      placeholder: placeholderText,
+      onChange: handleChange,
+      disabled,
+      className: [
+        "w-full rounded-(--radius-control) border border-stroke-control bg-surface-default",
+        "placeholder:text-fg-placeholder",
+        "focus:outline-none focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
+        "transition-colors",
+        SIZE_INPUT[size],
+        disabled ? "bg-surface-raised text-fg-disabled cursor-not-allowed" : "text-fg-primary cursor-text"
+      ].join(" ")
+    }
+  ), /* @__PURE__ */ React.createElement("input", { type: "hidden", name, value: subunits }));
+  if (!label) return control;
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex flex-col gap-1.5", className].join(" ") }, /* @__PURE__ */ React.createElement("label", { htmlFor: id, className: "text-label font-medium text-fg-primary" }, label), control);
+}
+export {
+  CurrencyInput
+};

package/dist/components/danger-zone.d.ts

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+interface DangerZoneProps {
+    title?: string;
+    description?: string;
+    children: ReactNode;
+    className?: string;
+}
+declare function DangerZone({ title, description, children, className }: DangerZoneProps): react.JSX.Element;
+interface DangerZoneItemProps {
+    title: ReactNode;
+    description?: ReactNode;
+    /** Ação à direita — normalmente um Button variant="outline" color="danger" size="sm". */
+    action?: ReactNode;
+    className?: string;
+}
+declare function DangerZoneItem({ title, description, action, className }: DangerZoneItemProps): react.JSX.Element;
+
+export { DangerZone, DangerZoneItem, type DangerZoneItemProps, type DangerZoneProps };

package/dist/components/danger-zone.js

@@ -0,0 +1,21 @@
+"use client";
+import "../chunk-ORMEWXMH.js";
+import { AlertTriangle } from "lucide-react";
+import { FormCardHeader } from "./form-card-header.js";
+function DangerZone({ title, description, children, className = "" }) {
+  return /* @__PURE__ */ React.createElement("section", { className: ["space-y-4", className].filter(Boolean).join(" ") }, (title || description) && /* @__PURE__ */ React.createElement(
+    FormCardHeader,
+    {
+      icon: /* @__PURE__ */ React.createElement(AlertTriangle, { size: 18, strokeWidth: 1.5 }),
+      title,
+      subtitle: description
+    }
+  ), /* @__PURE__ */ React.createElement("div", { className: "rounded-(--radius-card) border p-5 bg-danger-soft border-danger-border" }, children));
+}
+function DangerZoneItem({ title, description, action, className = "" }) {
+  return /* @__PURE__ */ React.createElement("div", { className: ["flex items-start justify-between gap-4 py-4 first:pt-0 last:pb-0", className].filter(Boolean).join(" ") }, /* @__PURE__ */ React.createElement("div", { className: "min-w-0" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-medium text-(--text-primary)" }, title), description && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-(--text-muted) mt-0.5 leading-relaxed" }, description)), action && /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, action));
+}
+export {
+  DangerZone,
+  DangerZoneItem
+};

package/dist/components/data-table-header.d.ts

@@ -0,0 +1,43 @@
+import * as react from 'react';
+
+type DataTableHeaderSearch = {
+    value: string;
+    onChange: (v: string) => void;
+    placeholder?: string;
+};
+type DataTableFilterOption = {
+    value: string;
+    label: string;
+    count?: number;
+};
+type DataTableFilterDef = {
+    key: string;
+    label: string;
+    value: string;
+    options: DataTableFilterOption[];
+    onChange: (v: string) => void;
+};
+type DataTablePillDef = {
+    key: string;
+    label: string;
+    active: boolean;
+    count?: number;
+    onClick: () => void;
+};
+type DataTableHeaderProps = {
+    search?: DataTableHeaderSearch;
+    filters?: DataTableFilterDef[];
+    pillFilters?: DataTablePillDef[];
+    onClear?: () => void;
+    actions?: React.ReactNode;
+    className?: string;
+    /** Em mobile, move filters + actions para um BottomSheet. pillFilters sempre visíveis. */
+    mobileCollapse?: boolean;
+};
+declare function FilterDropdown({ f, placement }: {
+    f: DataTableFilterDef;
+    placement?: 'bottom-start' | 'bottom-end';
+}): react.JSX.Element;
+declare function DataTableHeader({ search, filters, pillFilters, onClear, actions, className, mobileCollapse, }: DataTableHeaderProps): react.JSX.Element;
+
+export { type DataTableFilterDef, type DataTableFilterOption, DataTableHeader, type DataTableHeaderProps, type DataTableHeaderSearch, type DataTablePillDef, FilterDropdown };