@attrus-ds/core 0.1.1 → 0.2.0

package/dist/react/Toast/Toast.tsx

@@ -0,0 +1,94 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Toast — typed wrapper over the canonical `.toast` system
+ * (preview/components/toast.css). Ephemeral feedback: glassy surface,
+ * tone accent rule, optional action link, close button and auto-dismiss
+ * progress hairline. Compose inside a <ToastStack/> for positioning.
+ */
+
+export type ToastTone = 'success' | 'warning' | 'danger' | 'info' | 'brand' | 'inverse';
+export type ToastStackPosition = 'tr' | 'tl' | 'tc' | 'br' | 'bl' | 'bc';
+
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+  tone?: ToastTone;
+  /** Leading icon slot (.toast-icon). */
+  icon?: React.ReactNode;
+  /** Bold first line. */
+  title?: React.ReactNode;
+  /** Inline action link (.toast-action). */
+  action?: React.ReactNode;
+  onActionClick?: () => void;
+  /** Renders the × and calls back. */
+  onClose?: () => void;
+  /** Auto-dismiss countdown hairline (.toast-progress). */
+  progress?: boolean;
+  /** Exit animation hook (.is-leaving) — set just before removal. */
+  leaving?: boolean;
+}
+
+const XGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeLinecap="round" aria-hidden="true">
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+export const Toast: React.FC<ToastProps> = ({
+  tone,
+  icon,
+  title,
+  action,
+  onActionClick,
+  onClose,
+  progress = false,
+  leaving = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const cls = ['toast', tone ? `toast-${tone}` : '', leaving ? 'is-leaving' : '', className || '']
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <div className={cls} role={tone === 'danger' ? 'alert' : 'status'} {...rest}>
+      {icon != null ? <span className="toast-icon">{icon}</span> : <span />}
+      <div className="toast-body">
+        {title != null ? <div className="toast-title">{title}</div> : null}
+        {children != null ? <div className="toast-desc">{children}</div> : null}
+        {action != null ? (
+          <a
+            className="toast-action"
+            role="button"
+            tabIndex={0}
+            onClick={onActionClick}
+            style={{ cursor: 'pointer' }}
+          >
+            {action}
+          </a>
+        ) : null}
+      </div>
+      {onClose ? (
+        <button type="button" className="toast-close" aria-label="Dismiss" onClick={onClose}>
+          <XGlyph />
+        </button>
+      ) : (
+        <span />
+      )}
+      {progress ? <span className="toast-progress" /> : null}
+    </div>
+  );
+};
+
+export interface ToastStackProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Corner: tr (default) · tl · tc · br · bl · bc. */
+  position?: ToastStackPosition;
+}
+
+export const ToastStack: React.FC<ToastStackProps> = ({ position = 'tr', className, children, ...rest }) => (
+  <div className={['toast-stack', `toast-stack-${position}`, className || ''].filter(Boolean).join(' ')} {...rest}>
+    {children}
+  </div>
+);
+
+export default Toast;

package/dist/react/Tooltip/Tooltip.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Tooltip content — plain label, or rich blocks when rich=true. */
+  content: React.ReactNode;
+  placement?: TooltipPlacement;
+  /** Larger interactive panel (.tooltip-rich) that stays open on hover. */
+  rich?: boolean;
+  /** Force-show (testing / controlled cases) — .is-open. */
+  open?: boolean;
+  /** Keyboard hint — renders a trailing <kbd> (`.tooltip-kbd`). */
+  shortcut?: string;
+  /** The trigger element(s). */
+  children: React.ReactNode;
+}
+
+export declare const Tooltip: React.FC<TooltipProps>;
+export declare const TooltipTitle: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export declare const TooltipDesc: React.FC<React.HTMLAttributes<HTMLParagraphElement>>;
+export declare const TooltipRow: React.FC<{ k: React.ReactNode; v: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>>;
+export default Tooltip;

package/dist/react/Tooltip/Tooltip.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS Tooltip — typed wrapper over the canonical `.tooltip` system
+ * (preview/components/tooltip.css). Wraps the trigger in .tooltip-target;
+ * visibility is pure CSS (:hover / :focus-within) — no JS listeners.
+ * `rich` enables the larger interactive panel (title/desc/rows blocks).
+ */
+
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /** Tooltip content — plain label, or rich blocks when rich=true. */
+  content: React.ReactNode;
+  placement?: TooltipPlacement;
+  /** Larger interactive panel (.tooltip-rich) that stays open on hover. */
+  rich?: boolean;
+  /** Force-show (testing / controlled cases) — .is-open. */
+  open?: boolean;
+  /** Keyboard hint — renders a trailing <kbd> (`.tooltip-kbd`). */
+  shortcut?: string;
+  /** The trigger element(s). */
+  children: React.ReactNode;
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({
+  content,
+  placement = 'top',
+  rich = false,
+  open = false,
+  shortcut,
+  className,
+  children,
+  ...rest
+}) => {
+  const tipCls = [
+    'tooltip',
+    `tooltip-${placement}`,
+    rich ? 'tooltip-rich' : '',
+    shortcut ? 'tooltip-kbd' : '',
+    open ? 'is-open' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  // Escape hides the tooltip while focus stays on the target (doc a11y
+  // contract); suppression clears on blur or when the pointer re-enters.
+  const [suppressed, setSuppressed] = React.useState(false);
+  return (
+    <span
+      className={['tooltip-target', suppressed ? 'is-suppressed' : '', className || ''].filter(Boolean).join(' ')}
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === 'Escape') setSuppressed(true); }}
+      onBlur={() => setSuppressed(false)}
+      onMouseEnter={() => setSuppressed(false)}
+      {...rest}
+    >
+      {children}
+      <span className={tipCls} role="tooltip">
+        {content}
+        {shortcut ? <kbd>{shortcut}</kbd> : null}
+      </span>
+    </span>
+  );
+};
+
+/* Rich-panel slots — compose inside `content` with rich=true. */
+export const TooltipTitle: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...rest }) => (
+  <div className={['tooltip-title', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const TooltipDesc: React.FC<React.HTMLAttributes<HTMLParagraphElement>> = ({ className, ...rest }) => (
+  <p className={['tooltip-desc', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const TooltipRow: React.FC<{ k: React.ReactNode; v: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>> = ({ k, v, className, ...rest }) => (
+  <div className={['tooltip-row', className || ''].filter(Boolean).join(' ')} {...rest}>
+    <span className="k">{k}</span>
+    <span className="v">{v}</span>
+  </div>
+);
+
+export default Tooltip;

package/dist/react/ZeroState/ZeroState.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+
+export interface ZeroStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Illustration slot (.empty-illo) — SVG or image. */
+  illo?: React.ReactNode;
+  /** Heading (h4). */
+  title: React.ReactNode;
+  /** Action row (.empty-actions) — canonical Buttons. */
+  actions?: React.ReactNode;
+  /** Dense variant for cards/panels (.empty-compact). */
+  compact?: boolean;
+  /** Warning tone — tinted panel (.empty-warning). */
+  warning?: boolean;
+}
+
+export declare const ZeroState: React.FC<ZeroStateProps>;
+export default ZeroState;

package/dist/react/ZeroState/ZeroState.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+
+/**
+ * ATTRUS ZeroState — typed wrapper over the canonical `.empty` block
+ * (preview/components/empty-states.css): centered illustration + title +
+ * body + actions for zero-data surfaces.
+ * (Module named ZeroState — "EmptyState" collides with the legacy
+ * ui_kits/dashboard/EmptyState.jsx still consumed by the app.)
+ */
+
+export interface ZeroStateProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Illustration slot (.empty-illo) — SVG or image. */
+  illo?: React.ReactNode;
+  /** Heading (h4). */
+  title: React.ReactNode;
+  /** Action row (.empty-actions) — canonical Buttons. */
+  actions?: React.ReactNode;
+  /** Dense variant for cards/panels (.empty-compact). */
+  compact?: boolean;
+  /** Warning tone — tinted panel (.empty-warning). */
+  warning?: boolean;
+}
+
+export const ZeroState: React.FC<ZeroStateProps> = ({
+  illo,
+  title,
+  actions,
+  compact = false,
+  warning = false,
+  className,
+  children,
+  ...rest
+}) => (
+  <div
+    className={['empty', compact ? 'empty-compact' : 'empty-default', warning ? 'empty-warning' : '', className || ''].filter(Boolean).join(' ')}
+    {...rest}
+  >
+    {illo != null ? <span className="empty-illo">{illo}</span> : null}
+    <h4>{title}</h4>
+    {children != null ? <p>{children}</p> : null}
+    {actions != null ? <div className="empty-actions">{actions}</div> : null}
+  </div>
+);
+
+export default ZeroState;

package/dist/react/index.ts

@@ -0,0 +1,35 @@
+/* ============================================================
+   @attrus-ds/core/react — typed React component layer.
+
+   These components are thin, typed wrappers over the canonical
+   ATTRUS / Cabiros CSS (the CSS stays the single visual source of
+   truth — see ../components). They only compose class names and add
+   a typed API on top, so the markup-only consumer path stays valid.
+
+   Shipped as TSX source + .d.ts contracts (no bundler): your app's
+   toolchain compiles them. `react` is a peer dependency.
+
+   Styles are NOT imported here — load them once at your app root:
+     import "@attrus-ds/core/css";
+   ============================================================ */
+
+export * from "./AppSidebar/AppSidebar";
+export * from "./AppTopbar/AppTopbar";
+export * from "./Atoms/Atoms";
+export * from "./Button/Button";
+export * from "./Callout/Callout";
+export * from "./Card/Card";
+export * from "./Combobox/Combobox";
+export * from "./DataTable/DataTable";
+export * from "./Drawer/Drawer";
+export * from "./Input/Input";
+export * from "./Modal/Modal";
+export * from "./NumberInput/NumberInput";
+export * from "./Pill/Pill";
+export * from "./SearchPill/SearchPill";
+export * from "./SmartSearch/SmartSearch";
+export * from "./Stepper/Stepper";
+export * from "./Tabs/Tabs";
+export * from "./Toast/Toast";
+export * from "./Tooltip/Tooltip";
+export * from "./ZeroState/ZeroState";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@attrus-ds/core",
-  "version": "0.1.1",
-  "description": "ATTRUS / Cabiros design system — design tokens, component styles, brand assets and fonts. Visual layer only (no framework components).",
+  "version": "0.2.0",
+  "description": "ATTRUS / Cabiros design system — design tokens, component styles, brand assets, fonts and an optional typed React component layer.",
   "keywords": [
     "design-system",
     "design-tokens",
@@ -39,6 +39,8 @@
     "./tokens.json": "./dist/tokens/attrus-tokens.json",
     "./tokens.flat.json": "./dist/tokens/attrus-tokens.flat.json",
     "./components/*": "./dist/css/components/*",
+    "./react": "./dist/react/index.ts",
+    "./react/*": "./dist/react/*",
     "./assets/*": "./dist/assets/*",
     "./fonts/*": "./dist/fonts/*",
     "./package.json": "./package.json"
@@ -47,6 +49,14 @@
     "build": "node scripts/build.mjs",
     "prepublishOnly": "npm run build"
   },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@fontsource/jetbrains-mono": "^5.0.0",
     "@fontsource/lato": "^5.0.0"