@attrus-ds/core 0.2.0 → 1.0.0

package/dist/react/Toast/Toast.tsx

@@ -1,94 +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;
+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

@@ -1,23 +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;
+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

@@ -1,80 +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;
+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

@@ -1,17 +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;
+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

@@ -1,45 +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;
+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

@@ -1,35 +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";
+/* ============================================================
+   @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";