@rojaostudio/ds 1.0.2 → 2.0.0-next.0

package/dist/components/paywall-banner.js

@@ -1,58 +0,0 @@
-import "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Lock, AlertTriangle } from "lucide-react";
-const STYLES = {
-  warn: {
-    container: "border-warning-border bg-warning-soft",
-    title: "text-warning-text",
-    desc: "text-warning-text/85",
-    cta: "bg-surface-default border border-warning-border hover:bg-warning-soft text-warning-text",
-    Icon: AlertTriangle,
-    iconColor: "text-warning-text"
-  },
-  blocked: {
-    container: "border-danger-border bg-danger-soft",
-    title: "text-danger-text",
-    desc: "text-danger-text/85",
-    cta: "bg-danger text-fg-inverse hover:bg-danger-text",
-    Icon: Lock,
-    iconColor: "text-danger-text"
-  }
-};
-function DefaultLink({ href, className, children }) {
-  return /* @__PURE__ */ jsx("a", { href, className, children });
-}
-function PaywallBanner({
-  variant,
-  title,
-  description,
-  ctaLabel = "Ver planos",
-  ctaHref,
-  onCta,
-  linkAs: LinkAs = DefaultLink,
-  className = ""
-}) {
-  const s = STYLES[variant];
-  const Icon = s.Icon;
-  const ctaClass = ["text-caption font-semibold px-3 py-1.5 rounded-(--radius-card) shrink-0 transition-colors", s.cta].join(" ");
-  const cta = ctaHref ? /* @__PURE__ */ jsxs(LinkAs, { href: ctaHref, className: ctaClass, children: [
-    ctaLabel,
-    " \u2192"
-  ] }) : onCta ? /* @__PURE__ */ jsxs("button", { type: "button", onClick: onCta, className: ctaClass, children: [
-    ctaLabel,
-    " \u2192"
-  ] }) : null;
-  return /* @__PURE__ */ jsxs("div", { className: ["rounded-(--radius-card) border px-4 py-3 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2", s.container, className].join(" "), children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-2.5 min-w-0", children: [
-      /* @__PURE__ */ jsx(Icon, { size: 18, className: ["shrink-0 mt-0.5", s.iconColor].join(" ") }),
-      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx("p", { className: ["text-label font-semibold", s.title].join(" "), children: title }),
-        /* @__PURE__ */ jsx("div", { className: ["text-caption mt-0.5", s.desc].join(" "), children: description })
-      ] })
-    ] }),
-    cta
-  ] });
-}
-export {
-  PaywallBanner
-};

package/dist/components/paywall.d.ts

@@ -1,44 +0,0 @@
-import * as react from 'react';
-import { ComponentType, ReactNode } from 'react';
-import { EmptyStateIcon } from './empty-state.js';
-import 'lucide-react';
-
-type PaywallReason = 'feature' | 'limit' | 'trial_value';
-type LinkComponent = ComponentType<{
-    href: string;
-    className?: string;
-    onClick?: () => void;
-    children: ReactNode;
-}>;
-interface PaywallContentProps {
-    /** Ícone por categoria da feature (catalog/channels/commercial/operation/
-     *  intelligence/billing). Default: lock. */
-    icon?: EmptyStateIcon;
-    title: string;
-    description?: string;
-    /** 'feature' → "Disponível no {planLabel}"; 'limit' → "Limite atingido".
-     *  Sem cor de alerta — friendly, não erro. */
-    reason?: PaywallReason;
-    /** Rótulo do plano mínimo (ex.: "Essencial") — usado quando reason='feature'. */
-    planLabel?: string;
-    ctaLabel?: string;
-    ctaHref?: string;
-    onCta?: () => void;
-    /** Componente de link do app (next/link). Sem ele → âncora nativa <a>. */
-    linkAs?: LinkComponent;
-}
-/** Visual puro do paywall — compartilhado por PaywallState e PaywallModal. */
-declare function PaywallContent({ icon, title, description, reason, planLabel, ctaLabel, ctaHref, onCta, linkAs: Link, }: PaywallContentProps): react.JSX.Element;
-interface PaywallStateProps extends PaywallContentProps {
-    className?: string;
-}
-/** Estado-de-página: ocupa a altura disponível, mesmo visual do modal. */
-declare function PaywallState({ className, ...content }: PaywallStateProps): react.JSX.Element;
-interface PaywallModalProps extends PaywallContentProps {
-    open: boolean;
-    onClose: () => void;
-}
-/** Modal compacto: o controle de ação fica visível na tela; ao clicar, abre isto. */
-declare function PaywallModal({ open, onClose, ...content }: PaywallModalProps): react.JSX.Element;
-
-export { PaywallContent, type PaywallContentProps, PaywallModal, type PaywallModalProps, type PaywallReason, PaywallState, type PaywallStateProps };

package/dist/components/paywall.js

@@ -1,65 +0,0 @@
-"use client";
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Lock, Sparkles } from "lucide-react";
-import { ICON_MAP } from "./empty-state.js";
-import { Modal } from "./modal.js";
-const CTA_CLASS = "inline-flex items-center justify-center w-full rounded-(--radius-control) px-4 py-3 text-label font-semibold bg-brand-primary text-brand-on-primary hover:bg-brand-hover transition-colors";
-function planLineText(reason, planLabel) {
-  if (reason === "trial_value") return "Incluso no seu teste Pro";
-  if (reason === "limit") return "Limite atingido";
-  return planLabel ? `Dispon\xEDvel no ${planLabel}` : "Fa\xE7a upgrade";
-}
-function PaywallContent({
-  icon = "lock",
-  title,
-  description,
-  reason = "feature",
-  planLabel,
-  ctaLabel = "Ver planos",
-  ctaHref,
-  onCta,
-  linkAs: Link
-}) {
-  var _a;
-  const Icon = (_a = ICON_MAP[icon]) != null ? _a : Lock;
-  const isTrial = reason === "trial_value";
-  const cta = ctaHref && Link ? /* @__PURE__ */ jsx(Link, { href: ctaHref, className: CTA_CLASS, onClick: onCta, children: ctaLabel }) : ctaHref ? /* @__PURE__ */ jsx("a", { href: ctaHref, className: CTA_CLASS, onClick: onCta, children: ctaLabel }) : /* @__PURE__ */ jsx("button", { type: "button", className: CTA_CLASS, onClick: onCta, children: ctaLabel });
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center text-center px-2", children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative mb-4 text-fg-secondary", children: [
-      /* @__PURE__ */ jsx(Icon, { size: 52, strokeWidth: 1.25 }),
-      /* @__PURE__ */ jsx("span", { className: `absolute -bottom-1 -right-1 flex h-6 w-6 items-center justify-center rounded-full ${isTrial ? "bg-amber-500 text-white" : "bg-brand-primary text-brand-on-primary"}`, children: isTrial ? /* @__PURE__ */ jsx(Sparkles, { size: 12, strokeWidth: 2.5 }) : /* @__PURE__ */ jsx(Lock, { size: 12, strokeWidth: 2.5 }) })
-    ] }),
-    /* @__PURE__ */ jsx("span", { className: `inline-flex items-center rounded-full px-2.5 py-1 text-caption font-medium ${isTrial ? "bg-amber-100 text-amber-900" : "bg-surface-raised text-fg-secondary"}`, children: planLineText(reason, planLabel) }),
-    /* @__PURE__ */ jsx("p", { className: "text-body font-semibold text-fg-primary mt-3 mb-1.5", children: title }),
-    description && /* @__PURE__ */ jsx("p", { className: "text-label text-fg-muted max-w-sm leading-relaxed mb-5", children: description }),
-    /* @__PURE__ */ jsx("div", { className: "w-full max-w-xs", children: cta })
-  ] });
-}
-function PaywallState(_a) {
-  var _b = _a, { className = "" } = _b, content = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: ["flex flex-col items-center justify-center min-h-[320px] flex-1 py-10", className].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx(PaywallContent, __spreadValues({}, content))
-    }
-  );
-}
-function PaywallModal(_c) {
-  var _d = _c, { open, onClose } = _d, content = __objRest(_d, ["open", "onClose"]);
-  return /* @__PURE__ */ jsx(Modal, { open, onClose, size: "sm", children: /* @__PURE__ */ jsx("div", { className: "py-2", children: /* @__PURE__ */ jsx(PaywallContent, __spreadProps(__spreadValues({}, content), { onCta: () => {
-    var _a;
-    (_a = content.onCta) == null ? void 0 : _a.call(content);
-    onClose();
-  } })) }) });
-}
-export {
-  PaywallContent,
-  PaywallModal,
-  PaywallState
-};

package/dist/components/phone-frame.d.ts

@@ -1,9 +0,0 @@
-import * as react from 'react';
-
-interface PhoneFrameProps {
-    children: React.ReactNode;
-    className?: string;
-}
-declare function PhoneFrame({ children, className }: PhoneFrameProps): react.JSX.Element;
-
-export { PhoneFrame, type PhoneFrameProps };

package/dist/components/phone-frame.js

@@ -1,19 +0,0 @@
-import "../chunk-ORMEWXMH.js";
-import { jsx } from "react/jsx-runtime";
-function PhoneFrame({ children, className = "" }) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: [
-        // rojao-detect-disable over-rounding
-        "relative rounded-[2.5rem] border-[6px] border-(--text-primary)",
-        "bg-white overflow-hidden shadow-2xl",
-        className
-      ].filter(Boolean).join(" "),
-      children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto overflow-x-hidden scrollbar-none", children })
-    }
-  );
-}
-export {
-  PhoneFrame
-};

package/dist/components/pix-icon.d.ts

@@ -1,8 +0,0 @@
-import * as react from 'react';
-import { SVGProps } from 'react';
-
-declare function PixIcon({ size, ...props }: {
-    size?: number;
-} & SVGProps<SVGSVGElement>): react.JSX.Element;
-
-export { PixIcon };

package/dist/components/search.d.ts

@@ -1,30 +0,0 @@
-import * as react from 'react';
-import { InputHTMLAttributes } from 'react';
-
-/**
- * Search — input dedicado de busca. Ícone leading + botão clear quando tem valor.
- *
- * Uso (uncontrolled):
- *   <Search placeholder="Buscar pedidos..." onSearch={q => doSearch(q)} />
- *
- * Uso (controlled):
- *   <Search value={q} onChange={e => setQ(e.target.value)} onClear={() => setQ('')} />
- *
- * Disparos de busca:
- *   - onSearch(query): debounce automático (default 250ms) ou Enter pressed
- *   - onChange: cada keystroke (caso queira live-search direto)
- */
-interface SearchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'size'> {
-    onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
-    /** Callback debounced (250ms) ou em Enter. */
-    onSearch?: (query: string) => void;
-    /** Callback do botão clear. */
-    onClear?: () => void;
-    /** Tamanho. default = md. */
-    size?: 'sm' | 'md' | 'lg';
-    /** Largura full ou hug. default = full. */
-    width?: 'full' | 'hug';
-}
-declare const Search: react.ForwardRefExoticComponent<SearchProps & react.RefAttributes<HTMLInputElement>>;
-
-export { Search, type SearchProps };

package/dist/components/search.js

@@ -1,86 +0,0 @@
-"use client";
-import {
-  __objRest,
-  __spreadValues
-} from "../chunk-ORMEWXMH.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useRef } from "react";
-import { Search as SearchIcon, X } from "lucide-react";
-const SIZE_CLASS = {
-  sm: "h-control-sm text-caption pl-8 pr-7",
-  md: "h-control-md text-label pl-9 pr-8",
-  lg: "h-control-lg text-body pl-10 pr-9"
-};
-const ICON_SIZE = { sm: 14, md: 16, lg: 18 };
-const ICON_POS = { sm: "left-2.5", md: "left-3", lg: "left-3.5" };
-const CLEAR_POS = { sm: "right-1.5", md: "right-2", lg: "right-2.5" };
-const Search = forwardRef(function Search2(_a, ref) {
-  var _b = _a, { size = "md", width = "full", onSearch, onClear, onChange, value, className = "" } = _b, rest = __objRest(_b, ["size", "width", "onSearch", "onClear", "onChange", "value", "className"]);
-  const hasValue = !!(value != null ? value : "");
-  const debounceRef = useRef(null);
-  useEffect(() => () => {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-  }, []);
-  function handleChange(e) {
-    onChange == null ? void 0 : onChange(e);
-    if (onSearch) {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      debounceRef.current = setTimeout(() => onSearch(e.target.value), 250);
-    }
-  }
-  function handleClear() {
-    if (debounceRef.current) clearTimeout(debounceRef.current);
-    onClear == null ? void 0 : onClear();
-  }
-  return /* @__PURE__ */ jsxs("div", { className: ["relative inline-flex", width === "full" ? "w-full" : "w-auto"].join(" "), children: [
-    /* @__PURE__ */ jsx(
-      SearchIcon,
-      {
-        size: ICON_SIZE[size],
-        className: ["absolute top-1/2 -translate-y-1/2 text-fg-muted pointer-events-none", ICON_POS[size]].join(" ")
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "input",
-      __spreadValues({
-        ref,
-        type: "search",
-        role: "searchbox",
-        value,
-        onChange: handleChange,
-        onKeyDown: (e) => {
-          if (e.key === "Enter") {
-            if (debounceRef.current) clearTimeout(debounceRef.current);
-            onSearch == null ? void 0 : onSearch(e.target.value);
-          }
-        },
-        className: [
-          "w-full rounded-(--radius-control) bg-surface-default text-fg-primary placeholder:text-fg-placeholder",
-          "border border-stroke-control transition-colors outline-none",
-          "focus:border-stroke-focus focus:ring-2 focus:ring-stroke-focus/20",
-          "[&::-webkit-search-cancel-button]:hidden",
-          SIZE_CLASS[size],
-          className
-        ].join(" ")
-      }, rest)
-    ),
-    hasValue && /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: handleClear,
-        "aria-label": "Limpar busca",
-        className: [
-          "absolute top-1/2 -translate-y-1/2 inline-flex items-center justify-center",
-          "rounded-(--radius-control) text-fg-muted hover:text-fg-primary transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stroke-focus",
-          CLEAR_POS[size]
-        ].join(" "),
-        children: /* @__PURE__ */ jsx(X, { size: ICON_SIZE[size] - 2 })
-      }
-    )
-  ] });
-});
-export {
-  Search
-};

package/dist/components/themed.d.ts

@@ -1,36 +0,0 @@
-import * as react from 'react';
-import { HTMLAttributes, ReactNode } from 'react';
-
-/**
- * className for a brand theme: `theme-<name>` (+ ` dark`). The DS theme CSS is
- * class-scoped, so apply this wherever you want the theme to take effect — on
- * `<html>`/`<body>` for the whole app, or via <Themed> for a subtree.
- *
- *   <html className={themeClass('padaria', isDark)}>
- */
-declare const themeClass: (theme: string, dark?: boolean) => string;
-interface ThemedProps extends HTMLAttributes<HTMLDivElement> {
-    /** Brand theme name → `.theme-<name>` (the served sheet's selector). */
-    theme: string;
-    /** Apply dark mode (`.dark`). */
-    dark?: boolean;
-    /** Merge the theme class onto the single child element instead of wrapping a
-     *  `<div>` (no extra DOM node — apply the theme to a `<main>`, `<section>`…). */
-    asChild?: boolean;
-    children: ReactNode;
-}
-/**
- * Scopes a brand theme to its subtree via the `.theme-<name>` class. Because the
- * theme CSS is class-scoped (not :root), this can NEST — different subtrees can
- * render different themes on the same page. For the whole app, prefer putting
- * `themeClass()` on `<html>` instead of wrapping everything in a div.
- *
- *   <Themed theme="padaria">…</Themed>
- *   <Themed theme="pet" dark>…</Themed>
- *   <Themed theme="cafe" asChild><main>…</main></Themed>
- *
- * Pair with your theme sheet + base.css.
- */
-declare function Themed({ theme, dark, asChild, className, children, ...rest }: ThemedProps): react.JSX.Element;
-
-export { Themed, type ThemedProps, themeClass };

package/dist/components/themed.js

@@ -1,23 +0,0 @@
-import {
-  __objRest,
-  __spreadProps,
-  __spreadValues
-} from "../chunk-ORMEWXMH.js";
-import { jsx } from "react/jsx-runtime";
-import { cloneElement, isValidElement } from "react";
-const themeClass = (theme, dark = false) => `theme-${theme}${dark ? " dark" : ""}`;
-function Themed(_a) {
-  var _b = _a, { theme, dark = false, asChild = false, className, children } = _b, rest = __objRest(_b, ["theme", "dark", "asChild", "className", "children"]);
-  const cls = themeClass(theme, dark);
-  if (asChild && isValidElement(children)) {
-    const child = children;
-    return cloneElement(child, __spreadProps(__spreadValues({}, rest), {
-      className: [cls, child.props.className, className].filter(Boolean).join(" ")
-    }));
-  }
-  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: [cls, className].filter(Boolean).join(" ") }, rest), { children }));
-}
-export {
-  Themed,
-  themeClass
-};

package/dist/components/toaster.d.ts

@@ -1,84 +0,0 @@
-import * as react from 'react';
-
-/**
- * Toaster — comportamento de snackbar M3, visual de notification card.
- *
- * Comportamento (M3):
- *   • Um por vez (novo substitui o anterior).
- *   • Action label OU close icon — não os dois.
- *   • Duração: 4s sem action, 7s com action; persistente em loading.
- *   • Posição default: bottom-center.
- *   • Motion: 150ms ease-out enter, 75ms ease-in exit, slide vertical + fade.
- *   • Não rouba foco. aria-live="polite" default, "assertive" pra erro.
- *
- * Visual (notification card):
- *   • Card escuro nos DOIS themes (inverse surface, tokens --toast-*).
- *   • Feedback variants: tint da cor semântica entra pela esquerda (gradiente)
- *     + badge circular sólido com halo — ícone em tom escuro da própria cor.
- *   • Título (message) + description opcional em --toast-text-muted.
- *   • default/loading: card neutro sem tint nem badge.
- *
- * API:
- *   import { toast } from '@rojaostudio/ds/components';
- *   toast('Salvo');
- *   toast.success('Salvo', { description: 'Pedido #1042 confirmado.' });
- *   toast.error('...'), toast.warning('...'), toast.info('...'), toast.loading('...');
- *   toast.dismiss(id?);
- *   toast.promise(p, { loading, success, error });
- */
-type ToastVariant = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading';
-type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
-interface ToastOptions {
-    variant?: ToastVariant;
-    /** Linha secundária — message vira título (semibold) quando presente. */
-    description?: string;
-    /** ms até auto-dismiss. Omitido → fallback do Material (1500 curto · 2750 com ação/erro · 0 loading). */
-    duration?: number;
-    action?: {
-        label: string;
-        onClick: () => void;
-    };
-    id?: string;
-}
-interface ToastFn {
-    (message: string, options?: ToastOptions): string;
-    success: (msg: string, opts?: Omit<ToastOptions, 'variant'>) => string;
-    error: (msg: string, opts?: Omit<ToastOptions, 'variant'>) => string;
-    warning: (msg: string, opts?: Omit<ToastOptions, 'variant'>) => string;
-    info: (msg: string, opts?: Omit<ToastOptions, 'variant'>) => string;
-    loading: (msg: string, opts?: Omit<ToastOptions, 'variant' | 'duration'>) => string;
-    dismiss: (id?: string) => void;
-    promise: <T>(promise: Promise<T>, msgs: {
-        loading: string;
-        success: string | ((data: T) => string);
-        error: string | ((err: unknown) => string);
-    }) => Promise<T>;
-}
-declare const toast: ToastFn;
-interface ToastVisualProps {
-    message: string;
-    /** Linha secundária — message vira título (semibold) quando presente. */
-    description?: string;
-    variant?: ToastVariant;
-    action?: {
-        label: string;
-        onClick?: () => void;
-    };
-    /** Quando true, renderiza a animação de entrada. default = false. */
-    animate?: boolean;
-    /** Top vs bottom afeta a direção da animação enter. default = 'bottom'. */
-    origin?: 'top' | 'bottom';
-    /** Mostra o botão de close (X). default = true se não houver action; M3
-     *  prescreve action OU close, não ambos. */
-    dismissible?: boolean;
-    /** Handler do close (opcional). Sem handler, o X aparece mas é decorativo. */
-    onDismiss?: () => void;
-}
-declare function ToastVisual({ message, description, variant, action, animate, origin, dismissible, onDismiss, }: ToastVisualProps): react.JSX.Element;
-interface ToasterProps {
-    /** Posição. default = bottom-center (M3 recomenda bottom). */
-    position?: ToastPosition;
-}
-declare function Toaster({ position }?: ToasterProps): react.ReactPortal | null;
-
-export { type ToastOptions, type ToastPosition, type ToastVariant, ToastVisual, type ToastVisualProps, Toaster, type ToasterProps, toast };