@attrus-ds/core 0.2.0 → 1.0.0

package/dist/react/NumberInput/NumberInput.tsx

@@ -1,117 +1,117 @@
-import * as React from 'react';
-
-/**
- * ATTRUS NumberInput — typed wrapper over the canonical `.number-input`
- * (preview/components/number-input.css): − / + accelerator buttons
- * around a numeric field. For bounded quantities (counts, %, days).
- */
-
-export type NumberInputSize = 'sm' | 'md' | 'lg';
-
-export interface NumberInputProps {
-  value: number;
-  onChange?: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  size?: NumberInputSize;
-  /** Static cell before the field (e.g. "$"). */
-  prefix?: React.ReactNode;
-  /** Static cell after the field (e.g. "%", "days"). */
-  suffix?: React.ReactNode;
-  disabled?: boolean;
-  invalid?: boolean;
-  'aria-label'?: string;
-  id?: string;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const Minus: React.FC = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" aria-hidden="true">
-    <line x1="5" y1="12" x2="19" y2="12" />
-  </svg>
-);
-const Plus: React.FC = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" aria-hidden="true">
-    <line x1="12" y1="5" x2="12" y2="19" />
-    <line x1="5" y1="12" x2="19" y2="12" />
-  </svg>
-);
-
-function clamp(v: number, min?: number, max?: number): number {
-  if (min != null && v < min) return min;
-  if (max != null && v > max) return max;
-  return v;
-}
-
-export const NumberInput: React.FC<NumberInputProps> = ({
-  value,
-  onChange,
-  min,
-  max,
-  step = 1,
-  size = 'md',
-  prefix,
-  suffix,
-  disabled = false,
-  invalid = false,
-  className,
-  style,
-  ...rest
-}) => {
-  const cls = [
-    'number-input',
-    size !== 'md' ? `number-input-${size}` : '',
-    disabled ? 'is-disabled' : '',
-    invalid ? 'is-invalid' : '',
-    className || '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const set = (v: number) => {
-    if (!disabled && onChange) onChange(clamp(v, min, max));
-  };
-
-  return (
-    <div className={cls} style={style}>
-      <button
-        type="button"
-        className="number-input-btn"
-        aria-label="Decrease"
-        disabled={disabled || (min != null && value <= min)}
-        onClick={() => set(value - step)}
-      >
-        <Minus />
-      </button>
-      {prefix != null ? <span className="number-input-prefix">{prefix}</span> : null}
-      <input
-        type="number"
-        className="number-input-field"
-        value={value}
-        min={min}
-        max={max}
-        step={step}
-        disabled={disabled}
-        onChange={(e) => {
-          const v = parseFloat(e.target.value);
-          if (!isNaN(v)) set(v);
-        }}
-        {...rest}
-      />
-      {suffix != null ? <span className="number-input-suffix">{suffix}</span> : null}
-      <button
-        type="button"
-        className="number-input-btn"
-        aria-label="Increase"
-        disabled={disabled || (max != null && value >= max)}
-        onClick={() => set(value + step)}
-      >
-        <Plus />
-      </button>
-    </div>
-  );
-};
-
-export default NumberInput;
+import * as React from 'react';
+
+/**
+ * ATTRUS NumberInput — typed wrapper over the canonical `.number-input`
+ * (preview/components/number-input.css): − / + accelerator buttons
+ * around a numeric field. For bounded quantities (counts, %, days).
+ */
+
+export type NumberInputSize = 'sm' | 'md' | 'lg';
+
+export interface NumberInputProps {
+  value: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  size?: NumberInputSize;
+  /** Static cell before the field (e.g. "$"). */
+  prefix?: React.ReactNode;
+  /** Static cell after the field (e.g. "%", "days"). */
+  suffix?: React.ReactNode;
+  disabled?: boolean;
+  invalid?: boolean;
+  'aria-label'?: string;
+  id?: string;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const Minus: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" aria-hidden="true">
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+const Plus: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2.4} strokeLinecap="round" aria-hidden="true">
+    <line x1="12" y1="5" x2="12" y2="19" />
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+);
+
+function clamp(v: number, min?: number, max?: number): number {
+  if (min != null && v < min) return min;
+  if (max != null && v > max) return max;
+  return v;
+}
+
+export const NumberInput: React.FC<NumberInputProps> = ({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  size = 'md',
+  prefix,
+  suffix,
+  disabled = false,
+  invalid = false,
+  className,
+  style,
+  ...rest
+}) => {
+  const cls = [
+    'number-input',
+    size !== 'md' ? `number-input-${size}` : '',
+    disabled ? 'is-disabled' : '',
+    invalid ? 'is-invalid' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const set = (v: number) => {
+    if (!disabled && onChange) onChange(clamp(v, min, max));
+  };
+
+  return (
+    <div className={cls} style={style}>
+      <button
+        type="button"
+        className="number-input-btn"
+        aria-label="Decrease"
+        disabled={disabled || (min != null && value <= min)}
+        onClick={() => set(value - step)}
+      >
+        <Minus />
+      </button>
+      {prefix != null ? <span className="number-input-prefix">{prefix}</span> : null}
+      <input
+        type="number"
+        className="number-input-field"
+        value={value}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        onChange={(e) => {
+          const v = parseFloat(e.target.value);
+          if (!isNaN(v)) set(v);
+        }}
+        {...rest}
+      />
+      {suffix != null ? <span className="number-input-suffix">{suffix}</span> : null}
+      <button
+        type="button"
+        className="number-input-btn"
+        aria-label="Increase"
+        disabled={disabled || (max != null && value >= max)}
+        onClick={() => set(value + step)}
+      >
+        <Plus />
+      </button>
+    </div>
+  );
+};
+
+export default NumberInput;

package/dist/react/Pill/Pill.d.ts

@@ -1,31 +1,31 @@
-import * as React from 'react';
-
-export type PillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'brand';
-export type PillSize = 'sm' | 'md' | 'lg';
-export type PillAppearance = 'soft' | 'solid' | 'outline';
-
-export interface PillProps extends React.HTMLAttributes<HTMLElement> {
-  /** Semantic tone. Variant carries meaning; label is required. Default: 'neutral'. */
-  tone?: PillTone;
-  /** sm=20px, md=24px (default), lg=28px. */
-  size?: PillSize;
-  /** soft (tinted, default) | solid (filled) | outline (transparent bg). */
-  appearance?: PillAppearance;
-  /** Leading status dot (decorative — meaning lives in label + tone). */
-  dot?: boolean;
-  /** Leading icon slot. */
-  icon?: React.ReactNode;
-  /** Renders a <button> with hover/focus/selected states (filter chips). */
-  interactive?: boolean;
-  /** Selected state for interactive pills (sets aria-pressed). */
-  selected?: boolean;
-  /** Glassy translucent treatment for dark surfaces. */
-  onInverse?: boolean;
-  /** Renders the trailing close (×) — `.pill-x` — and calls back on click (removable filter chips). */
-  onRemove?: (e: React.MouseEvent) => void;
-  /** Dimmed, non-interactive. */
-  disabled?: boolean;
-}
-
-export declare const Pill: React.FC<PillProps>;
-export default Pill;
+import * as React from 'react';
+
+export type PillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'brand';
+export type PillSize = 'sm' | 'md' | 'lg';
+export type PillAppearance = 'soft' | 'solid' | 'outline';
+
+export interface PillProps extends React.HTMLAttributes<HTMLElement> {
+  /** Semantic tone. Variant carries meaning; label is required. Default: 'neutral'. */
+  tone?: PillTone;
+  /** sm=20px, md=24px (default), lg=28px. */
+  size?: PillSize;
+  /** soft (tinted, default) | solid (filled) | outline (transparent bg). */
+  appearance?: PillAppearance;
+  /** Leading status dot (decorative — meaning lives in label + tone). */
+  dot?: boolean;
+  /** Leading icon slot. */
+  icon?: React.ReactNode;
+  /** Renders a <button> with hover/focus/selected states (filter chips). */
+  interactive?: boolean;
+  /** Selected state for interactive pills (sets aria-pressed). */
+  selected?: boolean;
+  /** Glassy translucent treatment for dark surfaces. */
+  onInverse?: boolean;
+  /** Renders the trailing close (×) — `.pill-x` — and calls back on click (removable filter chips). */
+  onRemove?: (e: React.MouseEvent) => void;
+  /** Dimmed, non-interactive. */
+  disabled?: boolean;
+}
+
+export declare const Pill: React.FC<PillProps>;
+export default Pill;

package/dist/react/Pill/Pill.tsx

@@ -1,104 +1,104 @@
-import * as React from 'react';
-
-/**
- * ATTRUS Pill — typed wrapper over the canonical `.pill` system
- * (preview/components/status-pills.css). CSS stays the visual source
- * of truth; this component only composes class names.
- */
-
-export type PillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'brand';
-export type PillSize = 'sm' | 'md' | 'lg';
-export type PillAppearance = 'soft' | 'solid' | 'outline';
-
-export interface PillProps extends React.HTMLAttributes<HTMLElement> {
-  /** Semantic tone. Variant carries meaning; label is required. Default: 'neutral'. */
-  tone?: PillTone;
-  /** sm=20px, md=24px (default), lg=28px. */
-  size?: PillSize;
-  /** soft (tinted, default) | solid (filled) | outline (transparent bg). */
-  appearance?: PillAppearance;
-  /** Leading status dot (decorative — meaning lives in label + tone). */
-  dot?: boolean;
-  /** Leading icon slot. */
-  icon?: React.ReactNode;
-  /** Renders a <button> with hover/focus/selected states (filter chips). */
-  interactive?: boolean;
-  /** Selected state for interactive pills (sets aria-pressed). */
-  selected?: boolean;
-  /** Glassy translucent treatment for dark surfaces. */
-  onInverse?: boolean;
-  /** Renders the trailing close (×) — `.pill-x` — and calls back on click (removable filter chips). */
-  onRemove?: (e: React.MouseEvent) => void;
-  /** Dimmed, non-interactive. */
-  disabled?: boolean;
-}
-
-export const Pill: React.FC<PillProps> = ({
-  tone = 'neutral',
-  size = 'md',
-  appearance = 'soft',
-  dot = false,
-  icon,
-  interactive = false,
-  selected = false,
-  onInverse = false,
-  onRemove,
-  disabled = false,
-  className,
-  children,
-  ...rest
-}) => {
-  const cls = [
-    'pill',
-    tone,
-    size !== 'md' ? size : '',
-    appearance !== 'soft' ? appearance : '',
-    interactive ? 'interactive' : '',
-    onInverse ? 'on-inverse' : '',
-    className || '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-
-  const content = (
-    <React.Fragment>
-      {dot ? <span className="dot" /> : null}
-      {icon}
-      {children != null ? <span className="pill-label">{children}</span> : null}
-      {onRemove ? (
-        <span
-          className="pill-x"
-          role="button"
-          tabIndex={0}
-          aria-label="Remove"
-          onClick={(e) => { e.stopPropagation(); onRemove(e); }}
-          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); onRemove(e as unknown as React.MouseEvent); } }}
-        >
-          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
-        </span>
-      ) : null}
-    </React.Fragment>
-  );
-
-  if (interactive) {
-    return (
-      <button
-        type="button"
-        className={cls}
-        aria-pressed={selected}
-        disabled={disabled}
-        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
-      >
-        {content}
-      </button>
-    );
-  }
-
-  return (
-    <span className={cls} aria-disabled={disabled || undefined} {...rest}>
-      {content}
-    </span>
-  );
-};
-
-export default Pill;
+import * as React from 'react';
+
+/**
+ * ATTRUS Pill — typed wrapper over the canonical `.pill` system
+ * (preview/components/status-pills.css). CSS stays the visual source
+ * of truth; this component only composes class names.
+ */
+
+export type PillTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral' | 'brand';
+export type PillSize = 'sm' | 'md' | 'lg';
+export type PillAppearance = 'soft' | 'solid' | 'outline';
+
+export interface PillProps extends React.HTMLAttributes<HTMLElement> {
+  /** Semantic tone. Variant carries meaning; label is required. Default: 'neutral'. */
+  tone?: PillTone;
+  /** sm=20px, md=24px (default), lg=28px. */
+  size?: PillSize;
+  /** soft (tinted, default) | solid (filled) | outline (transparent bg). */
+  appearance?: PillAppearance;
+  /** Leading status dot (decorative — meaning lives in label + tone). */
+  dot?: boolean;
+  /** Leading icon slot. */
+  icon?: React.ReactNode;
+  /** Renders a <button> with hover/focus/selected states (filter chips). */
+  interactive?: boolean;
+  /** Selected state for interactive pills (sets aria-pressed). */
+  selected?: boolean;
+  /** Glassy translucent treatment for dark surfaces. */
+  onInverse?: boolean;
+  /** Renders the trailing close (×) — `.pill-x` — and calls back on click (removable filter chips). */
+  onRemove?: (e: React.MouseEvent) => void;
+  /** Dimmed, non-interactive. */
+  disabled?: boolean;
+}
+
+export const Pill: React.FC<PillProps> = ({
+  tone = 'neutral',
+  size = 'md',
+  appearance = 'soft',
+  dot = false,
+  icon,
+  interactive = false,
+  selected = false,
+  onInverse = false,
+  onRemove,
+  disabled = false,
+  className,
+  children,
+  ...rest
+}) => {
+  const cls = [
+    'pill',
+    tone,
+    size !== 'md' ? size : '',
+    appearance !== 'soft' ? appearance : '',
+    interactive ? 'interactive' : '',
+    onInverse ? 'on-inverse' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const content = (
+    <React.Fragment>
+      {dot ? <span className="dot" /> : null}
+      {icon}
+      {children != null ? <span className="pill-label">{children}</span> : null}
+      {onRemove ? (
+        <span
+          className="pill-x"
+          role="button"
+          tabIndex={0}
+          aria-label="Remove"
+          onClick={(e) => { e.stopPropagation(); onRemove(e); }}
+          onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.stopPropagation(); onRemove(e as unknown as React.MouseEvent); } }}
+        >
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
+        </span>
+      ) : null}
+    </React.Fragment>
+  );
+
+  if (interactive) {
+    return (
+      <button
+        type="button"
+        className={cls}
+        aria-pressed={selected}
+        disabled={disabled}
+        {...(rest as React.ButtonHTMLAttributes<HTMLButtonElement>)}
+      >
+        {content}
+      </button>
+    );
+  }
+
+  return (
+    <span className={cls} aria-disabled={disabled || undefined} {...rest}>
+      {content}
+    </span>
+  );
+};
+
+export default Pill;

package/dist/react/SearchPill/SearchPill.d.ts

@@ -1,14 +1,14 @@
-import * as React from 'react';
-
-export interface SearchPillProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /** Keyboard hint rendered as a .kbd chip (e.g. "⌘K"). */
-  shortcut?: string;
-  /** Leading icon — defaults to the canonical search glyph. */
-  icon?: React.ReactNode;
-  /** Wrapper (pill) className/style — the input itself fills it. */
-  wrapperClassName?: string;
-  wrapperStyle?: React.CSSProperties;
-}
-
-export declare const SearchPill: React.FC<SearchPillProps>;
-export default SearchPill;
+import * as React from 'react';
+
+export interface SearchPillProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Keyboard hint rendered as a .kbd chip (e.g. "⌘K"). */
+  shortcut?: string;
+  /** Leading icon — defaults to the canonical search glyph. */
+  icon?: React.ReactNode;
+  /** Wrapper (pill) className/style — the input itself fills it. */
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+}
+
+export declare const SearchPill: React.FC<SearchPillProps>;
+export default SearchPill;

package/dist/react/SearchPill/SearchPill.tsx

@@ -1,40 +1,40 @@
-import * as React from 'react';
-
-/**
- * ATTRUS SearchPill — typed wrapper over the canonical `.pill-search`
- * (preview/components/inputs.css): leading icon + borderless input +
- * optional .kbd shortcut hint. The ⌘K-style global search bar.
- */
-
-export interface SearchPillProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /** Keyboard hint rendered as a .kbd chip (e.g. "⌘K"). */
-  shortcut?: string;
-  /** Leading icon — defaults to the canonical search glyph. */
-  icon?: React.ReactNode;
-  /** Wrapper (pill) className/style — the input itself fills it. */
-  wrapperClassName?: string;
-  wrapperStyle?: React.CSSProperties;
-}
-
-const SearchGlyph: React.FC = () => (
-  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
-    <circle cx="11" cy="11" r="8" />
-    <path d="m21 21-4.3-4.3" />
-  </svg>
-);
-
-export const SearchPill: React.FC<SearchPillProps> = ({
-  shortcut,
-  icon,
-  wrapperClassName,
-  wrapperStyle,
-  ...rest
-}) => (
-  <div className={['pill-search', wrapperClassName || ''].filter(Boolean).join(' ')} style={wrapperStyle}>
-    {icon != null ? icon : <SearchGlyph />}
-    <input type="search" {...rest} />
-    {shortcut ? <span className="kbd">{shortcut}</span> : null}
-  </div>
-);
-
-export default SearchPill;
+import * as React from 'react';
+
+/**
+ * ATTRUS SearchPill — typed wrapper over the canonical `.pill-search`
+ * (preview/components/inputs.css): leading icon + borderless input +
+ * optional .kbd shortcut hint. The ⌘K-style global search bar.
+ */
+
+export interface SearchPillProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  /** Keyboard hint rendered as a .kbd chip (e.g. "⌘K"). */
+  shortcut?: string;
+  /** Leading icon — defaults to the canonical search glyph. */
+  icon?: React.ReactNode;
+  /** Wrapper (pill) className/style — the input itself fills it. */
+  wrapperClassName?: string;
+  wrapperStyle?: React.CSSProperties;
+}
+
+const SearchGlyph: React.FC = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+    <circle cx="11" cy="11" r="8" />
+    <path d="m21 21-4.3-4.3" />
+  </svg>
+);
+
+export const SearchPill: React.FC<SearchPillProps> = ({
+  shortcut,
+  icon,
+  wrapperClassName,
+  wrapperStyle,
+  ...rest
+}) => (
+  <div className={['pill-search', wrapperClassName || ''].filter(Boolean).join(' ')} style={wrapperStyle}>
+    {icon != null ? icon : <SearchGlyph />}
+    <input type="search" {...rest} />
+    {shortcut ? <span className="kbd">{shortcut}</span> : null}
+  </div>
+);
+
+export default SearchPill;