@attrus-ds/core 0.1.0 → 0.2.0

package/dist/react/AppTopbar/AppTopbar.tsx

@@ -0,0 +1,203 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS AppTopbar — typed wrapper over the canonical `.topbar` system
+ * (preview/components/topbar.css). The app's top edge: primary action,
+ * global search, and a right-aligned cluster of 36px controls
+ * (--tb-control-h drives every item). Includes the live indicator,
+ * notification bell and the account menu (identity + dropdown).
+ * (Named AppTopbar — "Shell"/"TopBar" collide with legacy app files.)
+ */
+
+export interface AppTopbarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Left CTA slot — the canonical Button (primary). */
+  primary?: React.ReactNode;
+  /** Search slot — the canonical SearchPill (grows to fill). */
+  search?: React.ReactNode;
+  /** Right-aligned cluster (.tb-spacer): TopbarControl/Live/Bell/Account. */
+  children?: React.ReactNode;
+}
+
+export const AppTopbar: React.FC<AppTopbarProps> = ({ primary, search, children, className, ...rest }) => (
+  <div className={['topbar', className || ''].filter(Boolean).join(' ')} {...rest}>
+    {primary}
+    {search}
+    <div className="tb-spacer">{children}</div>
+  </div>
+);
+
+/* ---------- Generic 36px control ---------- */
+
+export interface TopbarControlProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Leading slot (icon, flag…). */
+  icon?: React.ReactNode;
+  /** Square icon-only control (.tb-control.icon). */
+  iconOnly?: boolean;
+  /** Trailing disclosure chevron. */
+  chev?: boolean;
+}
+
+const ChevDown: React.FC = () => (
+  <span className="chev" aria-hidden="true">
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  </span>
+);
+
+export const TopbarControl: React.FC<TopbarControlProps> = ({ icon, iconOnly = false, chev = false, className, children, ...rest }) => (
+  <button
+    type="button"
+    className={['tb-control', iconOnly ? 'icon' : '', className || ''].filter(Boolean).join(' ')}
+    {...rest}
+  >
+    {icon}
+    {children}
+    {chev ? <ChevDown /> : null}
+  </button>
+);
+
+/* ---------- Live session indicator (non-interactive) ---------- */
+
+export interface TopbarLiveProps {
+  label?: React.ReactNode;
+  /** Elapsed mono clock (e.g. "0:19"). */
+  clock?: React.ReactNode;
+}
+
+export const TopbarLive: React.FC<TopbarLiveProps> = ({ label = 'Live', clock }) => (
+  <div className="tb-control tb-live">
+    <span className="dot" />
+    <span className="lbl">{label}</span>
+    {clock != null ? <span className="tb-clock">{clock}</span> : null}
+  </div>
+);
+
+/* ---------- Notification bell ---------- */
+
+export interface TopbarBellProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Unread red dot. */
+  badge?: boolean;
+}
+
+export const TopbarBell: React.FC<TopbarBellProps> = ({ badge = false, className, ...rest }) => (
+  <button
+    type="button"
+    className={['tb-control', 'icon', 'tb-bell', className || ''].filter(Boolean).join(' ')}
+    aria-label="Notifications"
+    {...rest}
+  >
+    <span className="badge-anchor">
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.75} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" style={{ width: 14, height: 14 }}>
+        <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
+        <path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
+      </svg>
+      {badge ? <span className="badge" /> : null}
+    </span>
+  </button>
+);
+
+/* ---------- Account menu (identity + dropdown) ---------- */
+
+export interface TopbarAccountItem {
+  key: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  danger?: boolean;
+  /** Renders a separator before this item. */
+  sep?: boolean;
+}
+
+export interface TopbarAccountProps {
+  initials: string;
+  name: React.ReactNode;
+  company: React.ReactNode;
+  /** Second line in the dropdown head (e.g. "Acme Corp · Admin"). */
+  detail?: React.ReactNode;
+  items?: TopbarAccountItem[];
+  onSelect?: (key: string) => void;
+  /** Hide name/company in the trigger (mobile). */
+  compact?: boolean;
+}
+
+export const TopbarAccount: React.FC<TopbarAccountProps> = ({
+  initials,
+  name,
+  company,
+  detail,
+  items = [],
+  onSelect,
+  compact = false,
+}) => {
+  const [open, setOpen] = React.useState(false);
+  const wrapRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (!open) return undefined;
+    const onDoc = (e: MouseEvent) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false);
+    };
+    document.addEventListener('mousedown', onDoc);
+    document.addEventListener('keydown', onKey);
+    return () => {
+      document.removeEventListener('mousedown', onDoc);
+      document.removeEventListener('keydown', onKey);
+    };
+  }, [open]);
+
+  return (
+    <div className="tb-account-wrap" ref={wrapRef}>
+      <button
+        type="button"
+        className={['tb-account', open ? 'is-open' : ''].filter(Boolean).join(' ')}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        aria-label="Account menu"
+        onClick={() => setOpen((o) => !o)}
+      >
+        <span className="tb-avatar">{initials}</span>
+        {!compact ? (
+          <span className="tb-account-id">
+            <span className="nm">{name}</span>
+            <span className="co">{company}</span>
+          </span>
+        ) : null}
+        {!compact ? <ChevDown /> : null}
+      </button>
+      {open ? (
+        <div className="tb-account-menu" role="menu">
+          <div className="tb-account-menu-head">
+            <span className="tb-avatar lg">{initials}</span>
+            <div className="tb-account-menu-id">
+              <span className="nm">{name}</span>
+              <span className="co">{detail != null ? detail : company}</span>
+            </div>
+          </div>
+          <div className="tb-account-menu-sep" />
+          {items.map((it) => (
+            <React.Fragment key={it.key}>
+              {it.sep ? <div className="tb-account-menu-sep" /> : null}
+              <button
+                type="button"
+                className={['tb-account-menu-item', it.danger ? 'is-danger' : ''].filter(Boolean).join(' ')}
+                role="menuitem"
+                onClick={() => {
+                  setOpen(false);
+                  if (onSelect) onSelect(it.key);
+                }}
+              >
+                {it.icon}
+                {it.label}
+              </button>
+            </React.Fragment>
+          ))}
+        </div>
+      ) : null}
+    </div>
+  );
+};
+
+export default AppTopbar;

package/dist/react/Atoms/Atoms.d.ts

@@ -0,0 +1,149 @@
+import * as React from 'react';
+
+export type MoneySize = 'sm' | 'md' | 'lg' | 'xl' | 'display';
+export type MoneyTone = 'pos' | 'neg' | 'muted';
+export interface MoneyProps extends React.HTMLAttributes<HTMLSpanElement> {
+  cur?: string;
+  amount: React.ReactNode;
+  frac?: React.ReactNode;
+  size?: MoneySize;
+  tone?: MoneyTone;
+}
+export declare const Money: React.FC<MoneyProps>;
+
+export type MetricSize = 'sm' | 'md' | 'lg';
+export type MetricTone = 'pos' | 'neg';
+export interface MetricProps extends React.HTMLAttributes<HTMLSpanElement> {
+  cur?: string;
+  amount: React.ReactNode;
+  frac?: React.ReactNode;
+  size?: MetricSize;
+  tone?: MetricTone;
+}
+export declare const Metric: React.FC<MetricProps>;
+
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type AvatarTone = 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral';
+export type AvatarDot = boolean | 'busy' | 'away' | 'off';
+export interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+  name?: string;
+  src?: string;
+  size?: AvatarSize;
+  tone?: AvatarTone;
+  dot?: AvatarDot;
+}
+export declare const Avatar: React.FC<AvatarProps>;
+
+export interface AvatarGroupProps extends React.HTMLAttributes<HTMLSpanElement> {
+  more?: number;
+  size?: AvatarSize;
+}
+export declare const AvatarGroup: React.FC<AvatarGroupProps>;
+
+export type EyebrowSize = 'xs' | 'sm' | 'md';
+export type EyebrowTone = 'muted' | 'secondary' | 'default' | 'brand' | 'inverse';
+export interface EyebrowProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: EyebrowSize;
+  tone?: EyebrowTone;
+  icon?: React.ReactNode;
+}
+export declare const Eyebrow: React.FC<EyebrowProps>;
+
+export type FlagCountry = 'BR' | 'MX' | 'CO' | 'CL' | 'US' | 'EU';
+export type FlagShape = 'rounded' | 'square';
+export interface FlagProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src'> {
+  country: FlagCountry;
+  size?: number;
+  shape?: FlagShape;
+  assetsBase?: string;
+}
+export declare const Flag: React.FC<FlagProps>;
+
+export interface IconProps extends React.SVGAttributes<SVGSVGElement> {
+  /** Lucide name — kebab-case ("arrow-left-right") or PascalCase. */
+  name: string;
+  size?: number;
+  stroke?: number;
+}
+export declare const Icon: React.FC<IconProps>;
+
+export type DividerWeight = 'default' | 'subtle' | 'strong';
+export interface DividerProps extends React.HTMLAttributes<HTMLElement> {
+  weight?: DividerWeight;
+  dashed?: boolean;
+  /** Vertical hairline for inline rows (1px × 1em). */
+  vertical?: boolean;
+  /** Midline label — renders the `.divider-labelled` layout. */
+  label?: React.ReactNode;
+}
+export declare const Divider: React.FC<DividerProps>;
+
+export interface FilterChipProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Selected state (aria-pressed). */
+  selected?: boolean;
+  icon?: React.ReactNode;
+  /** Trailing dropdown indicator (`.chip-chevron`). */
+  chevron?: boolean;
+}
+export declare const FilterChip: React.FC<FilterChipProps>;
+
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** 0–100. */
+  value: number;
+  /** Fill color — any token/var. */
+  fill?: string;
+  /** Track height px — feeds `--progress-h` (default 6). */
+  height?: number;
+}
+export declare const ProgressBar: React.FC<ProgressBarProps>;
+
+export interface DescTermProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode;
+  children?: React.ReactNode;
+}
+export declare const DescTerm: React.FC<DescTermProps>;
+
+export type StatDeltaDirection = 'up' | 'down' | 'flat';
+export interface StatProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Mono overline label. */
+  label: React.ReactNode;
+  /** Big tabular figure. */
+  value: React.ReactNode;
+  /** Delta text, e.g. "+8.2%". Arrow glyph derives from deltaDirection. */
+  delta?: React.ReactNode;
+  /** up=success ↑ · down=danger ↓ · flat=muted. Default: 'flat'. */
+  deltaDirection?: StatDeltaDirection;
+  /** Footnote line (.stat-foot). */
+  foot?: React.ReactNode;
+  /** Leading icon beside the label. */
+  icon?: React.ReactNode;
+  /** No tile chrome — for use inside a Card (.stat.is-bare). */
+  bare?: boolean;
+  /** Dense paddings (.stat-compact). */
+  compact?: boolean;
+}
+export declare const Stat: React.FC<StatProps>;
+
+export interface StatRowProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Equal columns — feeds `--stat-cols`. Default 3. */
+  cols?: number;
+}
+export declare const StatRow: React.FC<StatRowProps>;
+
+export declare const Atoms: {
+  Money: React.FC<MoneyProps>;
+  Metric: React.FC<MetricProps>;
+  Avatar: React.FC<AvatarProps>;
+  AvatarGroup: React.FC<AvatarGroupProps>;
+  Eyebrow: React.FC<EyebrowProps>;
+  Flag: React.FC<FlagProps>;
+  Icon: React.FC<IconProps>;
+  Divider: React.FC<DividerProps>;
+  FilterChip: React.FC<FilterChipProps>;
+  ProgressBar: React.FC<ProgressBarProps>;
+  DescTerm: React.FC<DescTermProps>;
+  Stat: React.FC<StatProps>;
+  StatRow: React.FC<StatRowProps>;
+};
+
+export default Atoms;