@attrus-ds/core 0.2.0 → 1.0.0

package/dist/react/Card/Card.tsx

@@ -1,93 +1,93 @@
-import * as React from 'react';
-
-/**
- * ATTRUS Card — typed wrapper over the canonical `.card` system
- * (preview/components/cards.css). CSS stays the visual source of truth.
- *
- * Slots: compose with <CardHeader/>, <CardBody/>, <CardFooter/>,
- * <CardCanvas/>, <CardDivider/> — the CSS `:has()` rules drop the base
- * padding automatically when slots are present (each slot pads itself).
- */
-
-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`) — wrap the card in an <a>/<button>, or pass onClick. */
-  interactive?: boolean;
-}
-
-export const Card: React.FC<CardProps> = ({
-  variant = 'default',
-  accent,
-  density = 'default',
-  clip = false,
-  interactive = false,
-  className,
-  style,
-  children,
-  ...rest
-}) => {
-  const cls = [
-    'card',
-    variant !== 'default' ? variant : '',
-    accent ? `accent-${accent}` : '',
-    density !== 'default' ? density : '',
-    interactive ? 'interactive' : '',
-    className || '',
-  ]
-    .filter(Boolean)
-    .join(' ');
-  return (
-    <div className={cls} style={clip ? { overflow: 'hidden', ...style } : style} {...rest}>
-      {children}
-    </div>
-  );
-};
-
-export interface CardSlotProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export const CardHeader: React.FC<CardSlotProps> = ({ className, ...rest }) => (
-  <div className={['card-header', className || ''].filter(Boolean).join(' ')} {...rest} />
-);
-export const CardBody: React.FC<CardSlotProps> = ({ className, ...rest }) => (
-  <div className={['card-body', className || ''].filter(Boolean).join(' ')} {...rest} />
-);
-export const CardFooter: React.FC<CardSlotProps> = ({ className, ...rest }) => (
-  <div className={['card-footer', className || ''].filter(Boolean).join(' ')} {...rest} />
-);
-export const CardCanvas: React.FC<CardSlotProps> = ({ className, ...rest }) => (
-  <div className={['card-canvas', className || ''].filter(Boolean).join(' ')} {...rest} />
-);
-export const CardDivider: React.FC<CardSlotProps> = ({ className, ...rest }) => (
-  <div className={['card-divider', className || ''].filter(Boolean).join(' ')} {...rest} />
-);
-
-/** KPI/stat layout inside a card — `.card-stat` (mono label, bold value, tinted delta). */
-export interface CardStatProps extends React.HTMLAttributes<HTMLDivElement> {
-  label: React.ReactNode;
-  value: React.ReactNode;
-  /** Delta text, e.g. "+8.2%". */
-  delta?: React.ReactNode;
-  /** Direction tints the delta: up=success, down=danger, flat=muted. Default: 'flat'. */
-  deltaDirection?: 'up' | 'down' | 'flat';
-}
-export const CardStat: React.FC<CardStatProps> = ({ label, value, delta, deltaDirection = 'flat', className, children, ...rest }) => (
-  <div className={['card-stat', className || ''].filter(Boolean).join(' ')} {...rest}>
-    <span className="stat-label">{label}</span>
-    <span className="stat-value">{value}</span>
-    {delta != null ? <span className={`stat-delta ${deltaDirection}`}>{delta}</span> : null}
-    {children}
-  </div>
-);
-
-export default Card;
+import * as React from 'react';
+
+/**
+ * ATTRUS Card — typed wrapper over the canonical `.card` system
+ * (preview/components/cards.css). CSS stays the visual source of truth.
+ *
+ * Slots: compose with <CardHeader/>, <CardBody/>, <CardFooter/>,
+ * <CardCanvas/>, <CardDivider/> — the CSS `:has()` rules drop the base
+ * padding automatically when slots are present (each slot pads itself).
+ */
+
+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`) — wrap the card in an <a>/<button>, or pass onClick. */
+  interactive?: boolean;
+}
+
+export const Card: React.FC<CardProps> = ({
+  variant = 'default',
+  accent,
+  density = 'default',
+  clip = false,
+  interactive = false,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const cls = [
+    'card',
+    variant !== 'default' ? variant : '',
+    accent ? `accent-${accent}` : '',
+    density !== 'default' ? density : '',
+    interactive ? 'interactive' : '',
+    className || '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+  return (
+    <div className={cls} style={clip ? { overflow: 'hidden', ...style } : style} {...rest}>
+      {children}
+    </div>
+  );
+};
+
+export interface CardSlotProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+export const CardHeader: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-header', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const CardBody: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-body', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const CardFooter: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-footer', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const CardCanvas: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-canvas', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+export const CardDivider: React.FC<CardSlotProps> = ({ className, ...rest }) => (
+  <div className={['card-divider', className || ''].filter(Boolean).join(' ')} {...rest} />
+);
+
+/** KPI/stat layout inside a card — `.card-stat` (mono label, bold value, tinted delta). */
+export interface CardStatProps extends React.HTMLAttributes<HTMLDivElement> {
+  label: React.ReactNode;
+  value: React.ReactNode;
+  /** Delta text, e.g. "+8.2%". */
+  delta?: React.ReactNode;
+  /** Direction tints the delta: up=success, down=danger, flat=muted. Default: 'flat'. */
+  deltaDirection?: 'up' | 'down' | 'flat';
+}
+export const CardStat: React.FC<CardStatProps> = ({ label, value, delta, deltaDirection = 'flat', className, children, ...rest }) => (
+  <div className={['card-stat', className || ''].filter(Boolean).join(' ')} {...rest}>
+    <span className="stat-label">{label}</span>
+    <span className="stat-value">{value}</span>
+    {delta != null ? <span className={`stat-delta ${deltaDirection}`}>{delta}</span> : null}
+    {children}
+  </div>
+);
+
+export default Card;

package/dist/react/Combobox/Combobox.d.ts

@@ -1,52 +1,52 @@
-import * as React from 'react';
-
-export interface ComboOption {
-  value: string;
-  label: React.ReactNode;
-  /** Secondary line under the label. */
-  meta?: React.ReactNode;
-  /** Right-aligned mono hint (e.g. a code). */
-  trailing?: React.ReactNode;
-  /** Optional group header this option sits under. */
-  group?: string;
-  /** Non-selectable (`.is-disabled`). */
-  disabled?: boolean;
-  /** Text used by the search filter when label isn't a plain string. */
-  searchText?: string;
-}
-
-export type ComboboxStatus = 'default' | 'error';
-
-export interface ComboboxProps {
-  options: ComboOption[];
-  value?: string | null;
-  onChange?: (value: string) => void;
-  placeholder?: string;
-  /** Shows the search header inside the popover. */
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  /** Trigger leading icon (`.combobox-trigger-icon`). */
-  icon?: React.ReactNode;
-  /** Validation state — error ring on the trigger (`.combobox.is-invalid` on the wrapper). */
-  status?: ComboboxStatus;
-  /** Filter-chip row inside the popover (`.combobox-filters`). */
-  filters?: React.ReactNode;
-  /** Results meta line above the list (`.combobox-meta`). */
-  meta?: React.ReactNode;
-  /** Muted meta line below the list (`.combobox-foot-meta`). */
-  footMeta?: React.ReactNode;
-  /** Popover starts open (galleries/docs). */
-  defaultOpen?: boolean;
-  /** Footer action (e.g. "Create new counterparty"). */
-  footer?: React.ReactNode;
-  onFooterClick?: () => void;
-  emptyTitle?: React.ReactNode;
-  emptySub?: React.ReactNode;
-  disabled?: boolean;
-  className?: string;
-  style?: React.CSSProperties;
-  'aria-label'?: string;
-}
-
-export declare const Combobox: React.FC<ComboboxProps>;
-export default Combobox;
+import * as React from 'react';
+
+export interface ComboOption {
+  value: string;
+  label: React.ReactNode;
+  /** Secondary line under the label. */
+  meta?: React.ReactNode;
+  /** Right-aligned mono hint (e.g. a code). */
+  trailing?: React.ReactNode;
+  /** Optional group header this option sits under. */
+  group?: string;
+  /** Non-selectable (`.is-disabled`). */
+  disabled?: boolean;
+  /** Text used by the search filter when label isn't a plain string. */
+  searchText?: string;
+}
+
+export type ComboboxStatus = 'default' | 'error';
+
+export interface ComboboxProps {
+  options: ComboOption[];
+  value?: string | null;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  /** Shows the search header inside the popover. */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  /** Trigger leading icon (`.combobox-trigger-icon`). */
+  icon?: React.ReactNode;
+  /** Validation state — error ring on the trigger (`.combobox.is-invalid` on the wrapper). */
+  status?: ComboboxStatus;
+  /** Filter-chip row inside the popover (`.combobox-filters`). */
+  filters?: React.ReactNode;
+  /** Results meta line above the list (`.combobox-meta`). */
+  meta?: React.ReactNode;
+  /** Muted meta line below the list (`.combobox-foot-meta`). */
+  footMeta?: React.ReactNode;
+  /** Popover starts open (galleries/docs). */
+  defaultOpen?: boolean;
+  /** Footer action (e.g. "Create new counterparty"). */
+  footer?: React.ReactNode;
+  onFooterClick?: () => void;
+  emptyTitle?: React.ReactNode;
+  emptySub?: React.ReactNode;
+  disabled?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+  'aria-label'?: string;
+}
+
+export declare const Combobox: React.FC<ComboboxProps>;
+export default Combobox;