@attrus-ds/core 0.2.0 → 1.0.0

package/dist/react/Button/Button.d.ts

@@ -1,25 +1,25 @@
-import * as React from 'react';
-
-export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger' | 'danger-outline' | 'success' | 'link' | 'inverse';
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Visual emphasis. Default: 'primary'. */
-  variant?: ButtonVariant;
-  /** Control height: xs=24, sm=32, md=40 (default), lg=48. */
-  size?: ButtonSize;
-  /** Shows the canonical spinner and disables interaction. */
-  loading?: boolean;
-  /** Square icon-only button (.btn-icon) — width locks to the height. */
-  iconOnly?: boolean;
-  /** Leading slot — typically an <Icon/>. */
-  icon?: React.ReactNode;
-  /** Trailing slot — e.g. a chevron. */
-  iconRight?: React.ReactNode;
-  /** On dark/brand panels: remaps ghost/secondary to the inverse foreground scale (`.on-inverse`). */
-  onInverse?: boolean;
-}
-
-export declare const Button: React.FC<ButtonProps>;
-export declare const ButtonGroup: React.FC<React.HTMLAttributes<HTMLDivElement>>;
-export default Button;
+import * as React from 'react';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'danger' | 'danger-outline' | 'success' | 'link' | 'inverse';
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual emphasis. Default: 'primary'. */
+  variant?: ButtonVariant;
+  /** Control height: xs=24, sm=32, md=40 (default), lg=48. */
+  size?: ButtonSize;
+  /** Shows the canonical spinner and disables interaction. */
+  loading?: boolean;
+  /** Square icon-only button (.btn-icon) — width locks to the height. */
+  iconOnly?: boolean;
+  /** Leading slot — typically an <Icon/>. */
+  icon?: React.ReactNode;
+  /** Trailing slot — e.g. a chevron. */
+  iconRight?: React.ReactNode;
+  /** On dark/brand panels: remaps ghost/secondary to the inverse foreground scale (`.on-inverse`). */
+  onInverse?: boolean;
+}
+
+export declare const Button: React.FC<ButtonProps>;
+export declare const ButtonGroup: React.FC<React.HTMLAttributes<HTMLDivElement>>;
+export default Button;

package/dist/react/Button/Button.tsx

@@ -1,83 +1,83 @@
-import * as React from 'react';
-
-/**
- * ATTRUS Button — typed wrapper over the canonical `.btn` system
- * (preview/components/buttons.css). The CSS stays the single source
- * of visual truth; this component only composes class names.
- */
-
-export type ButtonVariant =
-  | 'primary'        /* brand fill — main action */
-  | 'secondary'      /* neutral fill + hairline border — alternative actions */
-  | 'tertiary'       /* soft neutral fill, borderless — quiet affirmative */
-  | 'ghost'          /* nothing until hover — toolbars, table rows */
-  | 'danger'         /* destructive solid */
-  | 'danger-outline' /* destructive contextual — outline, surface bg */
-  | 'success'        /* strong positive (rare) */
-  | 'link'           /* looks like an inline text link */
-  | 'inverse';       /* white on dark/brand panels */
-
-export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Visual emphasis. Default: 'primary'. */
-  variant?: ButtonVariant;
-  /** Control height: xs=24, sm=32, md=40 (default), lg=48. */
-  size?: ButtonSize;
-  /** Shows the canonical spinner and disables interaction. */
-  loading?: boolean;
-  /** Square icon-only button (.btn-icon) — width locks to the height. */
-  iconOnly?: boolean;
-  /** Leading slot — typically an <Icon/>. */
-  icon?: React.ReactNode;
-  /** Trailing slot — e.g. a chevron. */
-  iconRight?: React.ReactNode;
-  /** On dark/brand panels: remaps ghost/secondary to the inverse foreground
-   *  scale (`.on-inverse`). Only meaningful with variant 'ghost' | 'secondary'. */
-  onInverse?: boolean;
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  variant = 'primary',
-  size = 'md',
-  loading = false,
-  iconOnly = false,
-  icon,
-  iconRight,
-  onInverse = false,
-  className,
-  children,
-  disabled,
-  type = 'button',
-  ...rest
-}) => {
-  const cls = [
-    'btn',
-    `btn-${variant}`,
-    size !== 'md' ? `btn-${size}` : '',
-    iconOnly ? 'btn-icon' : '',
-    loading ? 'is-loading' : '',
-    onInverse ? 'on-inverse' : '',
-    className || '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  return (
-    <button type={type} className={cls} disabled={disabled || loading} aria-busy={loading || undefined} {...rest}>
-      {icon}
-      {children}
-      {iconRight}
-    </button>
-  );
-};
-
-export default Button;
-
-/** Segmented / toolbar cluster — children must be <Button>s (`.btn-group`):
- *  outer corners pill-rounded, inner seams collapsed. */
-export const ButtonGroup: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...rest }) => (
-  <div role="group" className={['btn-group', className || ''].filter(Boolean).join(' ')} {...rest}>
-    {children}
-  </div>
-);
+import * as React from 'react';
+
+/**
+ * ATTRUS Button — typed wrapper over the canonical `.btn` system
+ * (preview/components/buttons.css). The CSS stays the single source
+ * of visual truth; this component only composes class names.
+ */
+
+export type ButtonVariant =
+  | 'primary'        /* brand fill — main action */
+  | 'secondary'      /* neutral fill + hairline border — alternative actions */
+  | 'tertiary'       /* soft neutral fill, borderless — quiet affirmative */
+  | 'ghost'          /* nothing until hover — toolbars, table rows */
+  | 'danger'         /* destructive solid */
+  | 'danger-outline' /* destructive contextual — outline, surface bg */
+  | 'success'        /* strong positive (rare) */
+  | 'link'           /* looks like an inline text link */
+  | 'inverse';       /* white on dark/brand panels */
+
+export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Visual emphasis. Default: 'primary'. */
+  variant?: ButtonVariant;
+  /** Control height: xs=24, sm=32, md=40 (default), lg=48. */
+  size?: ButtonSize;
+  /** Shows the canonical spinner and disables interaction. */
+  loading?: boolean;
+  /** Square icon-only button (.btn-icon) — width locks to the height. */
+  iconOnly?: boolean;
+  /** Leading slot — typically an <Icon/>. */
+  icon?: React.ReactNode;
+  /** Trailing slot — e.g. a chevron. */
+  iconRight?: React.ReactNode;
+  /** On dark/brand panels: remaps ghost/secondary to the inverse foreground
+   *  scale (`.on-inverse`). Only meaningful with variant 'ghost' | 'secondary'. */
+  onInverse?: boolean;
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  variant = 'primary',
+  size = 'md',
+  loading = false,
+  iconOnly = false,
+  icon,
+  iconRight,
+  onInverse = false,
+  className,
+  children,
+  disabled,
+  type = 'button',
+  ...rest
+}) => {
+  const cls = [
+    'btn',
+    `btn-${variant}`,
+    size !== 'md' ? `btn-${size}` : '',
+    iconOnly ? 'btn-icon' : '',
+    loading ? 'is-loading' : '',
+    onInverse ? 'on-inverse' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <button type={type} className={cls} disabled={disabled || loading} aria-busy={loading || undefined} {...rest}>
+      {icon}
+      {children}
+      {iconRight}
+    </button>
+  );
+};
+
+export default Button;
+
+/** Segmented / toolbar cluster — children must be <Button>s (`.btn-group`):
+ *  outer corners pill-rounded, inner seams collapsed. */
+export const ButtonGroup: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ className, children, ...rest }) => (
+  <div role="group" className={['btn-group', className || ''].filter(Boolean).join(' ')} {...rest}>
+    {children}
+  </div>
+);

package/dist/react/Callout/Callout.d.ts

@@ -1,29 +1,29 @@
-import * as React from 'react';
-
-export type CalloutTone = 'info' | 'warn' | 'success' | 'danger' | 'neutral';
-
-export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Semantic tone. Default 'info' (brand royal tint). */
-  tone?: CalloutTone;
-  /** Compact density for dense panels & forms. */
-  small?: boolean;
-  /** Leading icon slot (18px, 16px when small). */
-  icon?: React.ReactNode;
-  /** Bold heading line — wraps content in the rich vertical layout. */
-  title?: React.ReactNode;
-  /** Action row (canonical Buttons). Implies the rich layout. */
-  actions?: React.ReactNode;
-  /** Full-width alert bar: centered row, left accent rule, actions inline-right. */
-  bar?: boolean;
-  /** On a bar: re-adds radius + full border for in-container use. */
-  rounded?: boolean;
-  /** Content-sized, single line (badges, hero notices). */
-  inline?: boolean;
-  /** Glassy translucent tint + light text for dark surfaces. */
-  onInverse?: boolean;
-  /** When set, renders the × dismiss button and calls back on click. */
-  onDismiss?: () => void;
-}
-
-export declare const Callout: React.FC<CalloutProps>;
-export default Callout;
+import * as React from 'react';
+
+export type CalloutTone = 'info' | 'warn' | 'success' | 'danger' | 'neutral';
+
+export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Semantic tone. Default 'info' (brand royal tint). */
+  tone?: CalloutTone;
+  /** Compact density for dense panels & forms. */
+  small?: boolean;
+  /** Leading icon slot (18px, 16px when small). */
+  icon?: React.ReactNode;
+  /** Bold heading line — wraps content in the rich vertical layout. */
+  title?: React.ReactNode;
+  /** Action row (canonical Buttons). Implies the rich layout. */
+  actions?: React.ReactNode;
+  /** Full-width alert bar: centered row, left accent rule, actions inline-right. */
+  bar?: boolean;
+  /** On a bar: re-adds radius + full border for in-container use. */
+  rounded?: boolean;
+  /** Content-sized, single line (badges, hero notices). */
+  inline?: boolean;
+  /** Glassy translucent tint + light text for dark surfaces. */
+  onInverse?: boolean;
+  /** When set, renders the × dismiss button and calls back on click. */
+  onDismiss?: () => void;
+}
+
+export declare const Callout: React.FC<CalloutProps>;
+export default Callout;

package/dist/react/Callout/Callout.tsx

@@ -1,98 +1,98 @@
-import * as React from 'react';
-
-/**
- * ATTRUS Callout — typed wrapper over the canonical `.callout` system
- * (preview/components/callout.css). Scales from a one-line note up to a
- * rich panel (title + body + actions + dismiss) and a full-width alert bar.
- * CSS stays the visual source of truth.
- *
- * Action buttons convention: keep them SMALL and DISCREET — Button
- * size="xs" with ghost/tertiary/secondary; reserve solid fills and
- * danger for destructive actions.
- */
-
-export type CalloutTone = 'info' | 'warn' | 'success' | 'danger' | 'neutral';
-
-export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Semantic tone. Default 'info' (brand royal tint). */
-  tone?: CalloutTone;
-  /** Compact density for dense panels & forms. */
-  small?: boolean;
-  /** Leading icon slot (18px, 16px when small). */
-  icon?: React.ReactNode;
-  /** Bold heading line — wraps content in the rich vertical layout. */
-  title?: React.ReactNode;
-  /** Action row (canonical Buttons). Implies the rich layout. */
-  actions?: React.ReactNode;
-  /** Full-width alert bar: centered row, left accent rule, actions inline-right. */
-  bar?: boolean;
-  /** On a bar: re-adds radius + full border for in-container use. */
-  rounded?: boolean;
-  /** Content-sized, single line (badges, hero notices). */
-  inline?: boolean;
-  /** Glassy translucent tint + light text for dark surfaces. */
-  onInverse?: boolean;
-  /** When set, renders the × dismiss button and calls back on click. */
-  onDismiss?: () => void;
-}
-
-const DismissGlyph: React.FC = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" aria-hidden="true">
-    <line x1="6" y1="6" x2="18" y2="18" />
-    <line x1="18" y1="6" x2="6" y2="18" />
-  </svg>
-);
-
-export const Callout: React.FC<CalloutProps> = ({
-  tone = 'info',
-  small = false,
-  icon,
-  title,
-  actions,
-  bar = false,
-  rounded = false,
-  inline = false,
-  onInverse = false,
-  onDismiss,
-  className,
-  children,
-  ...rest
-}) => {
-  const cls = [
-    'callout',
-    `callout-${tone}`, /* always emitted — .callout-info pairs with .on-inverse in CSS */
-    small ? 'callout-sm' : '',
-    bar ? 'callout-bar' : '',
-    bar && rounded ? 'callout-rounded' : '',
-    inline ? 'callout-inline' : '',
-    onInverse ? 'on-inverse' : '',
-    className || '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const rich = Boolean(title || actions);
-  const body = children != null ? <div className="callout-body">{children}</div> : null;
-
-  return (
-    <div className={cls} role={tone === 'danger' ? 'alert' : 'status'} {...rest}>
-      {icon}
-      {rich ? (
-        <div className="callout-content">
-          {title ? <div className="callout-title">{title}</div> : null}
-          {body}
-          {actions ? <div className="callout-actions">{actions}</div> : null}
-        </div>
-      ) : (
-        body
-      )}
-      {onDismiss ? (
-        <button type="button" className="callout-dismiss" aria-label="Dismiss" onClick={onDismiss}>
-          <DismissGlyph />
-        </button>
-      ) : null}
-    </div>
-  );
-};
-
-export default Callout;
+import * as React from 'react';
+
+/**
+ * ATTRUS Callout — typed wrapper over the canonical `.callout` system
+ * (preview/components/callout.css). Scales from a one-line note up to a
+ * rich panel (title + body + actions + dismiss) and a full-width alert bar.
+ * CSS stays the visual source of truth.
+ *
+ * Action buttons convention: keep them SMALL and DISCREET — Button
+ * size="xs" with ghost/tertiary/secondary; reserve solid fills and
+ * danger for destructive actions.
+ */
+
+export type CalloutTone = 'info' | 'warn' | 'success' | 'danger' | 'neutral';
+
+export interface CalloutProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Semantic tone. Default 'info' (brand royal tint). */
+  tone?: CalloutTone;
+  /** Compact density for dense panels & forms. */
+  small?: boolean;
+  /** Leading icon slot (18px, 16px when small). */
+  icon?: React.ReactNode;
+  /** Bold heading line — wraps content in the rich vertical layout. */
+  title?: React.ReactNode;
+  /** Action row (canonical Buttons). Implies the rich layout. */
+  actions?: React.ReactNode;
+  /** Full-width alert bar: centered row, left accent rule, actions inline-right. */
+  bar?: boolean;
+  /** On a bar: re-adds radius + full border for in-container use. */
+  rounded?: boolean;
+  /** Content-sized, single line (badges, hero notices). */
+  inline?: boolean;
+  /** Glassy translucent tint + light text for dark surfaces. */
+  onInverse?: boolean;
+  /** When set, renders the × dismiss button and calls back on click. */
+  onDismiss?: () => void;
+}
+
+const DismissGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" aria-hidden="true">
+    <line x1="6" y1="6" x2="18" y2="18" />
+    <line x1="18" y1="6" x2="6" y2="18" />
+  </svg>
+);
+
+export const Callout: React.FC<CalloutProps> = ({
+  tone = 'info',
+  small = false,
+  icon,
+  title,
+  actions,
+  bar = false,
+  rounded = false,
+  inline = false,
+  onInverse = false,
+  onDismiss,
+  className,
+  children,
+  ...rest
+}) => {
+  const cls = [
+    'callout',
+    `callout-${tone}`, /* always emitted — .callout-info pairs with .on-inverse in CSS */
+    small ? 'callout-sm' : '',
+    bar ? 'callout-bar' : '',
+    bar && rounded ? 'callout-rounded' : '',
+    inline ? 'callout-inline' : '',
+    onInverse ? 'on-inverse' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const rich = Boolean(title || actions);
+  const body = children != null ? <div className="callout-body">{children}</div> : null;
+
+  return (
+    <div className={cls} role={tone === 'danger' ? 'alert' : 'status'} {...rest}>
+      {icon}
+      {rich ? (
+        <div className="callout-content">
+          {title ? <div className="callout-title">{title}</div> : null}
+          {body}
+          {actions ? <div className="callout-actions">{actions}</div> : null}
+        </div>
+      ) : (
+        body
+      )}
+      {onDismiss ? (
+        <button type="button" className="callout-dismiss" aria-label="Dismiss" onClick={onDismiss}>
+          <DismissGlyph />
+        </button>
+      ) : null}
+    </div>
+  );
+};
+
+export default Callout;

package/dist/react/Card/Card.d.ts

@@ -1,38 +1,38 @@
-import * as React from 'react';
-
-export type CardVariant = 'default' | 'flat' | 'subtle' | 'sunken' | 'raised' | 'floating' | 'hero' | 'inverse';
-export type CardAccent = 'success' | 'warning' | 'danger' | 'info';
-export type CardDensity = 'compact' | 'default' | 'spacious';
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Surface role. Default: surface + hairline + xs shadow. */
-  variant?: CardVariant;
-  /** Semantic banner tint (success/warning/danger/info). */
-  accent?: CardAccent;
-  /** Padding density for the card and its slots. */
-  density?: CardDensity;
-  /** Clip children to the rounded corners (tables, images). */
-  clip?: boolean;
-  /** Hover/press affordance (`.card.interactive`). */
-  interactive?: boolean;
-}
-
-export interface CardStatProps extends React.HTMLAttributes<HTMLDivElement> {
-  label: React.ReactNode;
-  value: React.ReactNode;
-  /** Delta text, e.g. "+8.2%". */
-  delta?: React.ReactNode;
-  /** up=success, down=danger, flat=muted. Default: 'flat'. */
-  deltaDirection?: 'up' | 'down' | 'flat';
-}
-
-export interface CardSlotProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export declare const Card: React.FC<CardProps>;
-export declare const CardHeader: React.FC<CardSlotProps>;
-export declare const CardBody: React.FC<CardSlotProps>;
-export declare const CardFooter: React.FC<CardSlotProps>;
-export declare const CardCanvas: React.FC<CardSlotProps>;
-export declare const CardDivider: React.FC<CardSlotProps>;
-export declare const CardStat: React.FC<CardStatProps>;
-export default Card;
+import * as React from 'react';
+
+export type CardVariant = 'default' | 'flat' | 'subtle' | 'sunken' | 'raised' | 'floating' | 'hero' | 'inverse';
+export type CardAccent = 'success' | 'warning' | 'danger' | 'info';
+export type CardDensity = 'compact' | 'default' | 'spacious';
+
+export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Surface role. Default: surface + hairline + xs shadow. */
+  variant?: CardVariant;
+  /** Semantic banner tint (success/warning/danger/info). */
+  accent?: CardAccent;
+  /** Padding density for the card and its slots. */
+  density?: CardDensity;
+  /** Clip children to the rounded corners (tables, images). */
+  clip?: boolean;
+  /** Hover/press affordance (`.card.interactive`). */
+  interactive?: boolean;
+}
+
+export interface CardStatProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  /** Delta text, e.g. "+8.2%". */
+  delta?: React.ReactNode;
+  /** up=success, down=danger, flat=muted. Default: 'flat'. */
+  deltaDirection?: 'up' | 'down' | 'flat';
+}
+
+export interface CardSlotProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export declare const Card: React.FC<CardProps>;
+export declare const CardHeader: React.FC<CardSlotProps>;
+export declare const CardBody: React.FC<CardSlotProps>;
+export declare const CardFooter: React.FC<CardSlotProps>;
+export declare const CardCanvas: React.FC<CardSlotProps>;
+export declare const CardDivider: React.FC<CardSlotProps>;
+export declare const CardStat: React.FC<CardStatProps>;
+export default Card;