agentic-ds-kit 0.1.0 → 0.2.0

package/ui/RadioGroup/RadioGroup.tsx

@@ -1,116 +0,0 @@
-"use client";
-
-import { useId, useState } from "react";
-import { Badge } from "../Badge";
-import type { RadioGroupProps } from "./RadioGroup.types";
-import styles from "./RadioGroup.module.css";
-
-export type {
-  RadioGroupProps,
-  RadioGroupOption,
-  RadioGroupOrientation,
-  RadioGroupSize,
-  RadioGroupLayout,
-} from "./RadioGroup.types";
-
-export function RadioGroup({
-  name,
-  legend,
-  hideLegend = false,
-  size = "md",
-  orientation = "vertical",
-  layout = "list",
-  options,
-  defaultValue,
-  value: valueProp,
-  onChange,
-  disabled = false,
-  error,
-  hint,
-}: RadioGroupProps) {
-  const uid = useId();
-  const isControlled = valueProp !== undefined;
-  const [uncontrolled, setUncontrolled] = useState(defaultValue);
-  const value = isControlled ? valueProp : uncontrolled;
-  const message = error || hint;
-  const messageId = message ? `${uid}-message` : undefined;
-
-  function emit(next: string) {
-    if (disabled) return;
-    if (!isControlled) setUncontrolled(next);
-    onChange?.(next);
-  }
-
-  return (
-    <fieldset
-      className={`${styles.group} ${styles[size]} ${layout === "card" ? styles.card : ""}${error ? ` ${styles.groupError}` : ""}`}
-      disabled={disabled}
-      aria-invalid={error ? true : undefined}
-      aria-describedby={messageId}
-    >
-      <legend className={hideLegend ? styles.legendHidden : styles.legend}>{legend}</legend>
-      <div
-        className={`${styles.options} ${orientation === "horizontal" && layout !== "card" ? styles.horizontal : ""}`}
-      >
-        {options.map((option) => {
-          const optionId = `${uid}-${option.value || "empty"}`;
-          const optionDisabled = Boolean(disabled || option.disabled);
-          const checked = value === option.value;
-          return (
-            <label
-              key={option.value}
-              className={styles.radio}
-              htmlFor={optionId}
-              data-checked={checked || undefined}
-              data-disabled={optionDisabled || undefined}
-            >
-              <input
-                id={optionId}
-                className={styles.input}
-                type="radio"
-                name={name}
-                value={option.value}
-                checked={checked}
-                disabled={optionDisabled}
-                aria-invalid={error ? true : undefined}
-                onChange={() => emit(option.value)}
-              />
-              {layout === "card" ? (
-                <span className={styles.copy}>
-                  <span className={styles.titleRow}>
-                    <span className={styles.label}>{option.label}</span>
-                    {option.badge ? (
-                      <Badge size="sm" tone={option.badgeTone ?? "neutral"}>
-                        {option.badge}
-                      </Badge>
-                    ) : null}
-                  </span>
-                  {option.description ? (
-                    <span className={styles.description}>{option.description}</span>
-                  ) : null}
-                </span>
-              ) : (
-                <>
-                  <span className={styles.control} aria-hidden>
-                    <span className={styles.dot} />
-                  </span>
-                  <span className={styles.label}>{option.label}</span>
-                </>
-              )}
-              {layout === "card" ? (
-                <span className={styles.control} aria-hidden>
-                  <span className={styles.dot} />
-                </span>
-              ) : null}
-            </label>
-          );
-        })}
-      </div>
-      {message ? (
-        <p id={messageId} className={`${styles.message}${error ? ` ${styles.messageError}` : ""}`}>
-          {message}
-        </p>
-      ) : null}
-    </fieldset>
-  );
-}

package/ui/RadioGroup/RadioGroup.types.ts

@@ -1,30 +0,0 @@
-import type { BadgeTone } from "../Badge/Badge.types";
-
-export type RadioGroupSize = "sm" | "md" | "lg";
-export type RadioGroupOrientation = "vertical" | "horizontal";
-export type RadioGroupLayout = "list" | "card";
-
-export interface RadioGroupOption {
-  value: string;
-  label: string;
-  description?: string;
-  badge?: string;
-  badgeTone?: BadgeTone;
-  disabled?: boolean;
-}
-
-export interface RadioGroupProps {
-  name: string;
-  legend: string;
-  hideLegend?: boolean;
-  size?: RadioGroupSize;
-  orientation?: RadioGroupOrientation;
-  layout?: RadioGroupLayout;
-  options: RadioGroupOption[];
-  defaultValue?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  disabled?: boolean;
-  error?: string;
-  hint?: string;
-}

package/ui/RadioGroup/index.ts

@@ -1,8 +0,0 @@
-export { RadioGroup } from "./RadioGroup";
-export type {
-  RadioGroupProps,
-  RadioGroupOption,
-  RadioGroupOrientation,
-  RadioGroupSize,
-  RadioGroupLayout,
-} from "./RadioGroup.types";

package/ui/Scoreboard/Scoreboard.tsx

@@ -1,41 +0,0 @@
-import { Carousel } from "../Carousel";
-import { Scorecard } from "../Scorecard";
-import type { ScoreboardProps } from "./Scoreboard.types";
-import styles from "./Scoreboard.module.css";
-
-export type { ScoreboardProps } from "./Scoreboard.types";
-
-const STRIP_MAX = 4;
-
-export function Scoreboard({
-  items,
-  "aria-label": ariaLabel = "Key metrics",
-  className = "",
-}: ScoreboardProps) {
-  const cards = items.map((item) => (
-    <Scorecard key={item.label} {...item} fill />
-  ));
-
-  if (items.length > STRIP_MAX) {
-    return (
-      <div className={`${styles.overflow} ${className}`.trim()}>
-        <Carousel items={cards} slidesPerView={4} ariaLabel={ariaLabel} />
-      </div>
-    );
-  }
-
-  const countClass =
-    items.length <= 1
-      ? styles.count1
-      : items.length === 2
-        ? styles.count2
-        : items.length === 3
-          ? styles.count3
-          : styles.count4;
-
-  return (
-    <section className={styles.scoreboard} aria-label={ariaLabel}>
-      <div className={`${styles.grid} ${countClass} ${className}`.trim()}>{cards}</div>
-    </section>
-  );
-}

package/ui/Scoreboard/Scoreboard.types.ts

@@ -1,7 +0,0 @@
-import type { ScorecardProps } from "../Scorecard/Scorecard.types";
-
-export interface ScoreboardProps {
-  items: ScorecardProps[];
-  "aria-label"?: string;
-  className?: string;
-}

package/ui/Scoreboard/index.ts

@@ -1,2 +0,0 @@
-export { Scoreboard } from "./Scoreboard";
-export type { ScoreboardProps } from "./Scoreboard.types";

package/ui/Scorecard/Scorecard.tsx

@@ -1,92 +0,0 @@
-"use client";
-
-import { useId } from "react";
-import { Badge } from "../Badge";
-import { LucideByName } from "../Button/lucideName";
-import type { ScorecardProps, ScorecardTrend } from "./Scorecard.types";
-import styles from "./Scorecard.module.css";
-
-export type { ScorecardProps, ScorecardTrend, ScorecardSize } from "./Scorecard.types";
-
-const TREND_ICON: Record<ScorecardTrend, string> = {
-  up: "TrendingUp",
-  down: "TrendingDown",
-  flat: "Minus",
-  neutral: "Minus",
-};
-
-const TREND_CLASS: Record<ScorecardTrend, string> = {
-  up: styles.up,
-  down: styles.down,
-  flat: styles.flat,
-  neutral: styles.neutral,
-};
-
-export function Scorecard({
-  label,
-  value,
-  delta,
-  trend = "neutral",
-  hint,
-  size = "md",
-  badge,
-  badgeTone = "neutral",
-  onClick,
-  fill = false,
-}: ScorecardProps) {
-  const labelId = useId();
-  const valueId = useId();
-  const labelledBy = label ? `${labelId} ${valueId}` : valueId;
-  const className = [styles.card, styles[size], fill ? styles.fill : "", onClick ? styles.interactive : ""]
-    .filter(Boolean)
-    .join(" ");
-
-  const body = (
-    <>
-      {label || badge ? (
-        <span className={styles.header}>
-          {label ? (
-            <span id={labelId} className={styles.label}>
-              {label}
-            </span>
-          ) : null}
-          {badge ? (
-            <span className={styles.badgeSlot}>
-              <Badge size="sm" tone={badgeTone}>
-                {badge}
-              </Badge>
-            </span>
-          ) : null}
-        </span>
-      ) : null}
-      <span id={valueId} className={styles.value}>
-        {value}
-      </span>
-      {delta || hint ? (
-        <span className={styles.footer}>
-          {delta ? (
-            <span className={`${styles.delta} ${TREND_CLASS[trend]}`}>
-              <LucideByName name={TREND_ICON[trend]} size={15} className={styles.icon} />
-              {delta}
-            </span>
-          ) : null}
-          {hint ? <span className={styles.hint}>{hint}</span> : null}
-        </span>
-      ) : null}
-    </>
-  );
-
-  if (onClick) {
-    return (
-      <button type="button" className={className} onClick={onClick} aria-labelledby={labelledBy}>
-        {body}
-      </button>
-    );
-  }
-
-  return (
-    <article className={className} aria-labelledby={labelledBy}>
-      {body}
-    </article>
-  );
-}

package/ui/Scorecard/Scorecard.types.ts

@@ -1,18 +0,0 @@
-import type { BadgeTone } from "../Badge/Badge.types";
-
-export type ScorecardTrend = "up" | "down" | "flat" | "neutral";
-
-export type ScorecardSize = "sm" | "md" | "lg";
-
-export interface ScorecardProps {
-  label: string;
-  value: string;
-  delta?: string;
-  trend?: ScorecardTrend;
-  hint?: string;
-  size?: ScorecardSize;
-  badge?: string;
-  badgeTone?: BadgeTone;
-  onClick?: () => void;
-  fill?: boolean;
-}

package/ui/Scorecard/index.ts

@@ -1,2 +0,0 @@
-export { Scorecard } from "./Scorecard";
-export type { ScorecardProps, ScorecardTrend, ScorecardSize } from "./Scorecard.types";

package/ui/Section/Section.tsx

@@ -1,75 +0,0 @@
-"use client";
-
-import { useId, useState } from "react";
-import { LucideByName } from "../Button/lucideName";
-import type { SectionProps } from "./Section.types";
-import styles from "./Section.module.css";
-
-export type { SectionProps, SectionSize } from "./Section.types";
-
-export function Section({
-  title,
-  description,
-  size = "md",
-  actions,
-  children,
-  collapsible = true,
-  defaultOpen = true,
-  open: openProp,
-  onOpenChange,
-}: SectionProps) {
-  const headingId = useId();
-  const panelId = useId();
-  const canCollapse = Boolean(collapsible && title);
-  const isControlled = typeof openProp === "boolean";
-  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
-  const open = canCollapse ? (isControlled ? openProp : uncontrolledOpen) : true;
-
-  function setOpen(next: boolean) {
-    if (!isControlled) setUncontrolledOpen(next);
-    onOpenChange?.(next);
-  }
-
-  const showHeader = Boolean(title || description || actions);
-
-  return (
-    <section
-      className={`${styles.section} ${styles[size]}${canCollapse ? ` ${styles.collapsible}` : ""}`}
-      aria-labelledby={title ? headingId : undefined}
-    >
-      {showHeader ? (
-        <header className={styles.header}>
-          <div className={styles.heading}>
-            {title ? (
-              <h2 id={headingId} className={styles.title}>
-                {canCollapse ? (
-                  <button
-                    type="button"
-                    className={styles.trigger}
-                    aria-expanded={open}
-                    aria-controls={panelId}
-                    onClick={() => setOpen(!open)}
-                  >
-                    <LucideByName
-                      name={open ? "ChevronDown" : "ChevronRight"}
-                      size={18}
-                      className={styles.chevron}
-                    />
-                    {title}
-                  </button>
-                ) : (
-                  title
-                )}
-              </h2>
-            ) : null}
-            {description ? <p className={styles.description}>{description}</p> : null}
-          </div>
-          {actions ? <div className={styles.actions}>{actions}</div> : null}
-        </header>
-      ) : null}
-      <div id={canCollapse ? panelId : undefined} className={styles.body} hidden={canCollapse ? !open : undefined}>
-        {children}
-      </div>
-    </section>
-  );
-}

package/ui/Section/Section.types.ts

@@ -1,15 +0,0 @@
-import type { ReactNode } from "react";
-
-export type SectionSize = "sm" | "md" | "lg";
-
-export interface SectionProps {
-  title?: string;
-  description?: string;
-  size?: SectionSize;
-  actions?: ReactNode;
-  children: ReactNode;
-  collapsible?: boolean;
-  defaultOpen?: boolean;
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-}

package/ui/Section/index.ts

@@ -1,2 +0,0 @@
-export { Section } from "./Section";
-export type { SectionProps, SectionSize } from "./Section.types";

package/ui/Select/Select.module.css

@@ -1,7 +0,0 @@
-.select {
-  cursor: pointer;
-}
-
-.select:disabled {
-  cursor: not-allowed;
-}

package/ui/Select/Select.tsx

@@ -1,113 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { DropdownMenu } from "../DropdownMenu";
-import type { SelectProps } from "./Select.types";
-
-export type { SelectProps, SelectOption, SelectSize, SelectItemCheck } from "./Select.types";
-
-function optionId(value: string): string {
-  return value === "" ? "__empty" : value;
-}
-
-function asList(value: string | string[] | undefined): string[] {
-  if (value === undefined) return [];
-  if (Array.isArray(value)) return value;
-  return [value];
-}
-
-function initialValue(
-  multiple: boolean,
-  placeholder: string | undefined,
-  defaultValue: string | string[] | undefined,
-  first: string | undefined,
-): string | string[] {
-  if (defaultValue !== undefined) return defaultValue;
-  if (multiple) return [];
-  if (placeholder) return "";
-  return first ?? "";
-}
-
-export function Select({
-  id,
-  size = "md",
-  options,
-  disabled = false,
-  error = false,
-  multiple = false,
-  itemCheck = "check",
-  maxVisible,
-  searchable = false,
-  placeholder,
-  defaultValue,
-  value: valueProp,
-  onChange,
-  name,
-  ariaLabel,
-  describedBy,
-}: SelectProps) {
-  const [uncontrolled, setUncontrolled] = useState<string | string[]>(() =>
-    initialValue(multiple, placeholder, defaultValue, options[0]?.value),
-  );
-  const isControlled = valueProp !== undefined;
-  const raw = isControlled ? valueProp : uncontrolled;
-  const values = asList(raw);
-  const selectedOptions = options.filter((option) => values.includes(option.value));
-  const overflow =
-    multiple && maxVisible !== undefined && selectedOptions.length > maxVisible
-      ? selectedOptions.length - maxVisible
-      : 0;
-  const shown = overflow > 0 ? selectedOptions.slice(0, maxVisible) : selectedOptions;
-  const trigger =
-    shown.length > 0 ? shown.map((option) => option.label).join(", ") : placeholder || "Select";
-  const muted = selectedOptions.length === 0;
-  const useCheckbox = multiple && itemCheck === "checkbox";
-
-  function emit(next: string | string[]) {
-    if (!isControlled) setUncontrolled(next);
-    onChange?.(next);
-  }
-
-  return (
-    <>
-      {name ? (
-        <input type="hidden" name={name} value={multiple ? values.join(",") : (values[0] ?? "")} />
-      ) : null}
-      <DropdownMenu
-        id={id}
-        triggerStyle="field"
-        trigger={trigger}
-        triggerMuted={muted}
-        triggerBadge={overflow > 0 ? `+${overflow}` : undefined}
-        iconEnd="ChevronsUpDown"
-        size={size === "sm" ? "sm" : "md"}
-        disabled={disabled}
-        error={error}
-        describedBy={describedBy}
-        ariaLabel={ariaLabel}
-        closeOnSelect={!multiple}
-        searchable={searchable}
-        groups={[
-          {
-            items: options.map((option) => ({
-              id: optionId(option.value),
-              label: option.label,
-              selected: values.includes(option.value),
-              checkbox: useCheckbox || undefined,
-            })),
-          },
-        ]}
-        onSelect={(next) => {
-          const match = options.find((option) => optionId(option.value) === next);
-          if (!match) return;
-          if (multiple) {
-            const has = values.includes(match.value);
-            emit(has ? values.filter((value) => value !== match.value) : [...values, match.value]);
-            return;
-          }
-          emit(match.value);
-        }}
-      />
-    </>
-  );
-}

package/ui/Select/Select.types.ts

@@ -1,26 +0,0 @@
-export type SelectSize = "sm" | "md";
-export type SelectItemCheck = "check" | "checkbox";
-
-export interface SelectOption {
-  value: string;
-  label: string;
-}
-
-export interface SelectProps {
-  id: string;
-  size?: SelectSize;
-  options: SelectOption[];
-  disabled?: boolean;
-  error?: boolean;
-  multiple?: boolean;
-  itemCheck?: SelectItemCheck;
-  maxVisible?: number;
-  searchable?: boolean;
-  placeholder?: string;
-  defaultValue?: string | string[];
-  value?: string | string[];
-  onChange?: (value: string | string[]) => void;
-  name?: string;
-  ariaLabel?: string;
-  describedBy?: string;
-}

package/ui/Select/index.ts

@@ -1,2 +0,0 @@
-export { Select } from "./Select";
-export type { SelectProps, SelectOption, SelectSize, SelectItemCheck } from "./Select.types";

package/ui/ShimmerText/ShimmerText.tsx

@@ -1,48 +0,0 @@
-import type { CSSProperties } from "react";
-import type { ShimmerTextProps, ShimmerTextSpeed } from "./ShimmerText.types";
-import styles from "./ShimmerText.module.css";
-
-export type { ShimmerTextProps, ShimmerTextSize, ShimmerTextSpeed } from "./ShimmerText.types";
-
-const NAMED_SPEED_FACTORS: Record<Exclude<ShimmerTextSpeed, number>, number> = {
-  slow: 6,
-  normal: 4,
-  fast: 3,
-};
-
-function getDurationFactor(speed: ShimmerTextSpeed): number {
-  if (typeof speed === "number") return speed;
-  return NAMED_SPEED_FACTORS[speed];
-}
-
-export function ShimmerText({
-  children,
-  size = "md",
-  speed = "normal",
-  className = "",
-  style,
-}: ShimmerTextProps) {
-  const text = String(children);
-  const characters = Array.from(text);
-  const phaseSpan = Math.max(characters.length - 1, 1);
-  const cssVars = {
-    "--shimmer-duration-factor": getDurationFactor(speed),
-    ...style,
-  } as CSSProperties;
-
-  return (
-    <span className={`${styles.root} ${styles[size]} ${className}`.trim()} style={cssVars} aria-label={text}>
-      <span className={styles.content} aria-hidden="true">
-        {characters.map((character, index) => (
-          <span
-            className={styles.character}
-            style={{ "--shimmer-phase": 1 - index / phaseSpan } as CSSProperties}
-            key={`${character}-${index}`}
-          >
-            {character}
-          </span>
-        ))}
-      </span>
-    </span>
-  );
-}

package/ui/ShimmerText/ShimmerText.types.ts

@@ -1,12 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-export type ShimmerTextSize = "sm" | "md" | "lg";
-export type ShimmerTextSpeed = number | "slow" | "normal" | "fast";
-
-export interface ShimmerTextProps {
-  children: ReactNode;
-  size?: ShimmerTextSize;
-  speed?: ShimmerTextSpeed;
-  className?: string;
-  style?: CSSProperties;
-}

package/ui/ShimmerText/index.ts

@@ -1,2 +0,0 @@
-export { ShimmerText } from "./ShimmerText";
-export type { ShimmerTextProps, ShimmerTextSize, ShimmerTextSpeed } from "./ShimmerText.types";