agentic-ds-kit 0.1.0 → 0.2.0

package/ui/DropdownMenu/DropdownMenu.types.ts

@@ -1,48 +0,0 @@
-import type { ButtonSize, ButtonVariant } from "../Button/Button.types";
-
-export type DropdownMenuAlign = "start" | "end";
-export type DropdownMenuTriggerStyle = "button" | "field" | "nav";
-
-export interface DropdownMenuItem {
-  id: string;
-  label: string;
-  icon?: string;
-  shortcut?: string;
-  disabled?: boolean;
-  danger?: boolean;
-  description?: string;
-  href?: string;
-  selected?: boolean;
-  checkbox?: boolean;
-  submenu?: DropdownMenuGroup[];
-}
-
-export interface DropdownMenuGroup {
-  heading?: string;
-  items: DropdownMenuItem[];
-}
-
-export interface DropdownMenuProps {
-  trigger?: string;
-  triggerStyle?: DropdownMenuTriggerStyle;
-  iconStart?: string;
-  iconEnd?: string;
-  id?: string;
-  disabled?: boolean;
-  error?: boolean;
-  describedBy?: string;
-  ariaLabel?: string;
-  variant?: ButtonVariant;
-  size?: ButtonSize;
-  align?: DropdownMenuAlign;
-  columns?: 1 | 2;
-  groups: DropdownMenuGroup[];
-  open?: boolean;
-  onOpenChange?: (open: boolean) => void;
-  onSelect?: (id: string) => void;
-  closeOnSelect?: boolean;
-  triggerMuted?: boolean;
-  triggerBadge?: string;
-  searchable?: boolean;
-  searchPlaceholder?: string;
-}

package/ui/DropdownMenu/index.ts

@@ -1,8 +0,0 @@
-export { DropdownMenu } from "./DropdownMenu";
-export type {
-  DropdownMenuProps,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuAlign,
-  DropdownMenuTriggerStyle,
-} from "./DropdownMenu.types";

package/ui/Empty/Empty.tsx

@@ -1,35 +0,0 @@
-import { LucideByName } from "../Button/lucideName";
-import type { EmptyProps } from "./Empty.types";
-import styles from "./Empty.module.css";
-
-export type { EmptyProps } from "./Empty.types";
-
-const ICON_SIZE = 20;
-
-export function Empty({
-  title,
-  description,
-  icon,
-  media,
-  actions,
-  outlined = false,
-}: EmptyProps) {
-  const showIcon = Boolean(icon) && !media;
-  const showMedia = Boolean(media);
-
-  return (
-    <div className={`${styles.root}${outlined ? ` ${styles.outlined}` : ""}`}>
-      {showIcon ? (
-        <div className={styles.mediaWell} aria-hidden>
-          <LucideByName name={icon} size={ICON_SIZE} />
-        </div>
-      ) : null}
-      {showMedia ? <div className={styles.mediaSlot}>{media}</div> : null}
-      <div className={styles.copy}>
-        <h3 className={styles.title}>{title}</h3>
-        {description ? <p className={styles.description}>{description}</p> : null}
-      </div>
-      {actions ? <div className={styles.actions}>{actions}</div> : null}
-    </div>
-  );
-}

package/ui/Empty/Empty.types.ts

@@ -1,10 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface EmptyProps {
-  title: string;
-  description?: string;
-  icon?: string;
-  media?: ReactNode;
-  actions?: ReactNode;
-  outlined?: boolean;
-}

package/ui/Empty/index.ts

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

package/ui/Field/Field.tsx

@@ -1,46 +0,0 @@
-import { cloneElement, isValidElement, type ReactElement } from "react";
-import type { FieldProps } from "./Field.types";
-import styles from "./Field.module.css";
-
-export type { FieldProps, FieldLabelPosition } from "./Field.types";
-
-export function Field({
-  label,
-  htmlFor,
-  hint,
-  error,
-  labelPosition = "top",
-  children,
-}: FieldProps) {
-  const hintId = hint && !error ? `${htmlFor}-hint` : undefined;
-  const errorId = error ? `${htmlFor}-error` : undefined;
-  const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
-
-  const control =
-    describedBy && isValidElement(children)
-      ? cloneElement(children as ReactElement<{ describedBy?: string }>, { describedBy })
-      : children;
-
-  return (
-    <div
-      className={`${styles.field} ${styles[labelPosition]}`}
-      role="group"
-      data-invalid={error ? "true" : undefined}
-    >
-      <label className={styles.label} htmlFor={htmlFor}>
-        {label}
-      </label>
-      <div className={styles.body}>{control}</div>
-      {hint && !error ? (
-        <p id={hintId} className={styles.hint}>
-          {hint}
-        </p>
-      ) : null}
-      {error ? (
-        <p id={errorId} className={styles.error} role="alert">
-          {error}
-        </p>
-      ) : null}
-    </div>
-  );
-}

package/ui/Field/Field.types.ts

@@ -1,12 +0,0 @@
-import type { ReactNode } from "react";
-
-export type FieldLabelPosition = "top" | "start";
-
-export interface FieldProps {
-  label: string;
-  htmlFor: string;
-  hint?: string;
-  error?: string;
-  labelPosition?: FieldLabelPosition;
-  children: ReactNode;
-}

package/ui/Field/index.ts

@@ -1,2 +0,0 @@
-export { Field } from "./Field";
-export type { FieldProps, FieldLabelPosition } from "./Field.types";

package/ui/FieldSet/FieldSet.tsx

@@ -1,14 +0,0 @@
-import type { FieldSetProps } from "./FieldSet.types";
-import styles from "./FieldSet.module.css";
-
-export type { FieldSetProps } from "./FieldSet.types";
-
-export function FieldSet({ legend, description, children }: FieldSetProps) {
-  return (
-    <fieldset className={styles.fieldset}>
-      <legend className={styles.legend}>{legend}</legend>
-      {description ? <p className={styles.description}>{description}</p> : null}
-      <div className={styles.body}>{children}</div>
-    </fieldset>
-  );
-}

package/ui/FieldSet/FieldSet.types.ts

@@ -1,7 +0,0 @@
-import type { ReactNode } from "react";
-
-export interface FieldSetProps {
-  legend: string;
-  description?: string;
-  children: ReactNode;
-}

package/ui/FieldSet/index.ts

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

package/ui/HeaderCell/HeaderCell.tsx

@@ -1,71 +0,0 @@
-"use client";
-
-import { useId } from "react";
-import { Checkbox } from "../Checkbox";
-import { LucideByName } from "../Button/lucideName";
-import type { HeaderCellProps } from "./HeaderCell.types";
-import styles from "./HeaderCell.module.css";
-
-export type {
-  HeaderCellProps,
-  HeaderCellSize,
-  HeaderCellAlign,
-  HeaderCellSort,
-} from "./HeaderCell.types";
-
-export function HeaderCell({
-  label,
-  size = "md",
-  checkbox = false,
-  checked,
-  defaultChecked,
-  indeterminate,
-  onCheckedChange,
-  align = "start",
-  sortable = false,
-  sort,
-  onSort,
-  id,
-}: HeaderCellProps) {
-  const generatedId = useId();
-  const checkboxId = id ?? generatedId;
-  const aria = label ? `Select all ${label}` : "Select all rows";
-  const icon = sort === "asc" ? "ChevronUp" : sort === "desc" ? "ChevronDown" : "ChevronsUpDown";
-  const sortLabel =
-    sort === "asc"
-      ? `Sort ${label ?? "column"} descending`
-      : sort === "desc"
-        ? `Clear sort on ${label ?? "column"}`
-        : `Sort ${label ?? "column"} ascending`;
-  const checkboxOnly = checkbox && !label;
-
-  return (
-    <span
-      className={`${styles.cell} ${styles[size]} ${styles[align]}${checkboxOnly ? ` ${styles.checkboxOnly}` : ""}`}
-    >
-      {checkbox ? (
-        <Checkbox
-          id={checkboxId}
-          size="sm"
-          ariaLabel={aria}
-          checked={checked}
-          defaultChecked={defaultChecked}
-          indeterminate={indeterminate}
-          onChange={onCheckedChange}
-        />
-      ) : null}
-      {sortable && !checkbox ? (
-        <button type="button" className={styles.sort} onClick={onSort} aria-label={sortLabel}>
-          {label ? <span className={styles.label}>{label}</span> : null}
-          <LucideByName
-            name={icon}
-            size={14}
-            className={sort ? styles.sortIconActive : styles.sortIcon}
-          />
-        </button>
-      ) : label ? (
-        <span className={styles.label}>{label}</span>
-      ) : null}
-    </span>
-  );
-}

package/ui/HeaderCell/HeaderCell.types.ts

@@ -1,18 +0,0 @@
-export type HeaderCellSize = "sm" | "md";
-export type HeaderCellAlign = "start" | "end" | "center";
-export type HeaderCellSort = "asc" | "desc";
-
-export interface HeaderCellProps {
-  label?: string;
-  size?: HeaderCellSize;
-  checkbox?: boolean;
-  checked?: boolean;
-  defaultChecked?: boolean;
-  indeterminate?: boolean;
-  onCheckedChange?: (checked: boolean) => void;
-  align?: HeaderCellAlign;
-  sortable?: boolean;
-  sort?: HeaderCellSort;
-  onSort?: () => void;
-  id?: string;
-}

package/ui/HeaderCell/index.ts

@@ -1,2 +0,0 @@
-export { HeaderCell } from "./HeaderCell";
-export type { HeaderCellProps, HeaderCellSize, HeaderCellAlign, HeaderCellSort } from "./HeaderCell.types";

package/ui/Input/Input.tsx

@@ -1,65 +0,0 @@
-import { LucideByName } from "../Button/lucideName";
-import type { InputProps } from "./Input.types";
-import controlStyles from "../shared/controls.module.css";
-import styles from "./Input.module.css";
-
-export type { InputProps, InputSize, InputType } from "./Input.types";
-
-const ICON_PX = { sm: 14, md: 16, lg: 18 } as const;
-
-export function Input({
-  id,
-  type = "text",
-  size = "md",
-  placeholder,
-  disabled = false,
-  error = false,
-  defaultValue,
-  value,
-  onChange,
-  name,
-  start,
-  end,
-  iconStart,
-  iconEnd,
-  demo,
-  describedBy,
-  ariaLabel,
-}: InputProps) {
-  const iconPx = ICON_PX[size];
-
-  return (
-    <div
-      className={`${controlStyles.control} ${size === "sm" ? controlStyles.controlSm : size === "lg" ? controlStyles.controlLg : controlStyles.controlMd} ${error ? controlStyles.controlError : ""} ${styles.shell}`}
-      data-disabled={disabled || undefined}
-      data-demo={disabled ? undefined : demo}
-    >
-      <LucideByName name={iconStart} size={iconPx} className={styles.icon} />
-      {start ? (
-        <span className={styles.slot} aria-hidden>
-          {start}
-        </span>
-      ) : null}
-      <input
-        id={id}
-        name={name}
-        type={type}
-        placeholder={placeholder}
-        disabled={disabled}
-        value={value}
-        defaultValue={value === undefined ? defaultValue : undefined}
-        onChange={(event) => onChange?.(event.target.value)}
-        aria-invalid={error || undefined}
-        aria-label={ariaLabel}
-        aria-describedby={describedBy}
-        className={styles.native}
-      />
-      {end ? (
-        <span className={styles.slot} aria-hidden>
-          {end}
-        </span>
-      ) : null}
-      <LucideByName name={iconEnd} size={iconPx} className={styles.icon} />
-    </div>
-  );
-}

package/ui/Input/Input.types.ts

@@ -1,22 +0,0 @@
-export type InputSize = "sm" | "md" | "lg";
-export type InputType = "text" | "email" | "password" | "search";
-
-export interface InputProps {
-  id: string;
-  type?: InputType;
-  size?: InputSize;
-  placeholder?: string;
-  disabled?: boolean;
-  error?: boolean;
-  defaultValue?: string;
-  value?: string;
-  onChange?: (value: string) => void;
-  name?: string;
-  start?: string;
-  end?: string;
-  iconStart?: string;
-  iconEnd?: string;
-  demo?: "hover" | "focus";
-  describedBy?: string;
-  ariaLabel?: string;
-}

package/ui/Input/index.ts

@@ -1,2 +0,0 @@
-export { Input } from "./Input";
-export type { InputProps, InputSize, InputType } from "./Input.types";

package/ui/InputOTP/InputOTP.tsx

@@ -1,136 +0,0 @@
-"use client";
-
-import { Fragment, useRef, useState } from "react";
-import { LucideByName } from "../Button/lucideName";
-import type { InputOTPPattern, InputOTPProps, InputOTPSize } from "./InputOTP.types";
-import styles from "./InputOTP.module.css";
-
-export type { InputOTPProps, InputOTPSize, InputOTPPattern } from "./InputOTP.types";
-
-const ICON_PX: Record<InputOTPSize, number> = { sm: 12, md: 16, lg: 18 };
-
-function sanitize(raw: string, pattern: InputOTPPattern, length: number): string {
-  const next =
-    pattern === "digits"
-      ? raw.replace(/\D/g, "")
-      : raw.replace(/[^A-Za-z0-9]/g, "").toUpperCase();
-  return next.slice(0, length);
-}
-
-function resolveGroups(length: number, groups?: number[]): number[] {
-  if (groups && groups.length > 0) {
-    const sum = groups.reduce((total, count) => total + count, 0);
-    if (sum === length) return groups;
-  }
-  if (length === 6) return [3, 3];
-  return [length];
-}
-
-export function InputOTP({
-  id,
-  length = 6,
-  groups,
-  size = "md",
-  disabled = false,
-  error = false,
-  value,
-  defaultValue = "",
-  onChange,
-  onComplete,
-  pattern = "digits",
-  name,
-  autoComplete = "one-time-code",
-  ariaLabel,
-}: InputOTPProps) {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const isControlled = typeof value === "string";
-  const [uncontrolled, setUncontrolled] = useState(() =>
-    sanitize(defaultValue, pattern, length),
-  );
-  const current = sanitize(isControlled ? value : uncontrolled, pattern, length);
-  const slotGroups = resolveGroups(length, groups);
-  const activeIndex = current.length >= length ? length - 1 : current.length;
-  const iconPx = ICON_PX[size];
-
-  function commit(raw: string) {
-    const next = sanitize(raw, pattern, length);
-    if (!isControlled) setUncontrolled(next);
-    onChange?.(next);
-    if (next.length === length) onComplete?.(next);
-  }
-
-  function focusInput() {
-    if (disabled) return;
-    const el = inputRef.current;
-    if (!el) return;
-    el.focus();
-    const pos = current.length;
-    el.setSelectionRange(pos, pos);
-  }
-
-  let offset = 0;
-
-  return (
-    <div
-      className={`${styles.root} ${styles[size]}`}
-      data-disabled={disabled || undefined}
-      data-error={error || undefined}
-      onClick={focusInput}
-    >
-      <input
-        ref={inputRef}
-        id={id}
-        name={name}
-        className={styles.native}
-        value={current}
-        disabled={disabled}
-        maxLength={length}
-        autoComplete={autoComplete}
-        autoCapitalize="off"
-        spellCheck={false}
-        inputMode={pattern === "digits" ? "numeric" : "text"}
-        aria-invalid={error || undefined}
-        aria-label={ariaLabel}
-        onChange={(event) => commit(event.target.value)}
-        onPaste={(event) => {
-          event.preventDefault();
-          commit(event.clipboardData.getData("text"));
-        }}
-      />
-      {slotGroups.map((count, groupIndex) => {
-        const start = offset;
-        offset += count;
-        return (
-          <Fragment key={`group-${groupIndex}-${start}`}>
-            {groupIndex > 0 ? (
-              <span className={styles.separator} aria-hidden>
-                <LucideByName name="Minus" size={iconPx} />
-              </span>
-            ) : null}
-            <span className={styles.group}>
-              {Array.from({ length: count }, (_, slotIndex) => {
-                const index = start + slotIndex;
-                const char = current[index];
-                const isActive = index === activeIndex;
-                return (
-                  <span
-                    key={index}
-                    className={`${styles.slot}${isActive ? ` ${styles.slotActive}` : ""}`}
-                    data-active={isActive || undefined}
-                    aria-hidden
-                  >
-                    {char ? (
-                      <span className={styles.char}>{char}</span>
-                    ) : isActive ? (
-                      <span className={styles.caret} />
-                    ) : null}
-                  </span>
-                );
-              })}
-            </span>
-          </Fragment>
-        );
-      })}
-    </div>
-  );
-}

package/ui/InputOTP/InputOTP.types.ts

@@ -1,19 +0,0 @@
-export type InputOTPSize = "sm" | "md" | "lg";
-export type InputOTPPattern = "digits" | "alphanumeric";
-
-export interface InputOTPProps {
-  id: string;
-  length?: number;
-  groups?: number[];
-  size?: InputOTPSize;
-  disabled?: boolean;
-  error?: boolean;
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  onComplete?: (value: string) => void;
-  pattern?: InputOTPPattern;
-  name?: string;
-  autoComplete?: string;
-  ariaLabel?: string;
-}

package/ui/InsightCard/InsightCard.tsx

@@ -1,90 +0,0 @@
-import { useId } from "react";
-import { Button } from "../Button";
-import { LucideByName } from "../Button/lucideName";
-import type { InsightCardProps, InsightCardTone } from "./InsightCard.types";
-import styles from "./InsightCard.module.css";
-
-export type {
-  InsightCardProps,
-  InsightCardTone,
-  InsightCardSize,
-  InsightCardAction,
-} from "./InsightCard.types";
-
-const TONE_ICON: Record<InsightCardTone, string> = {
-  opportunity: "Sparkles",
-  warning: "TriangleAlert",
-  danger: "CircleX",
-  info: "Info",
-  neutral: "Sparkles",
-};
-
-const ICON_SIZE = { sm: 14, md: 16, lg: 18 } as const;
-
-export function InsightCard({
-  title,
-  description,
-  eyebrow = "Insight",
-  tone = "opportunity",
-  size = "md",
-  confidence,
-  source,
-  primaryAction,
-  secondaryAction,
-  onDismiss,
-}: InsightCardProps) {
-  const titleId = useId();
-  const descriptionId = useId();
-  const showFooter = Boolean(primaryAction || secondaryAction || onDismiss);
-  const buttonSize = size === "lg" ? "md" : "sm";
-
-  return (
-    <article
-      className={`${styles.card} ${styles[size]} ${styles[tone]}`}
-      aria-labelledby={titleId}
-      aria-describedby={description ? descriptionId : undefined}
-    >
-      <header className={styles.header}>
-        <div className={styles.lead}>
-          <LucideByName name={TONE_ICON[tone]} size={ICON_SIZE[size]} className={styles.icon} />
-          <span className={styles.eyebrow}>{eyebrow}</span>
-        </div>
-        {confidence ? <span className={styles.confidence}>{confidence}</span> : null}
-      </header>
-      <div className={styles.body}>
-        <h3 id={titleId} className={styles.title}>
-          {title}
-        </h3>
-        {description ? (
-          <p id={descriptionId} className={styles.description}>
-            {description}
-          </p>
-        ) : null}
-        {source ? <p className={styles.source}>{source}</p> : null}
-      </div>
-      {showFooter ? (
-        <footer className={styles.footer}>
-          {primaryAction || secondaryAction ? (
-            <div className={styles.actions}>
-              {primaryAction ? (
-                <Button variant="primary" size={buttonSize} onClick={primaryAction.onClick}>
-                  {primaryAction.label}
-                </Button>
-              ) : null}
-              {secondaryAction ? (
-                <Button variant="secondary" size={buttonSize} onClick={secondaryAction.onClick}>
-                  {secondaryAction.label}
-                </Button>
-              ) : null}
-            </div>
-          ) : null}
-          {onDismiss ? (
-            <button type="button" className={styles.dismiss} onClick={onDismiss}>
-              Dismiss
-            </button>
-          ) : null}
-        </footer>
-      ) : null}
-    </article>
-  );
-}

package/ui/InsightCard/InsightCard.types.ts

@@ -1,20 +0,0 @@
-export type InsightCardTone = "opportunity" | "warning" | "danger" | "info" | "neutral";
-export type InsightCardSize = "sm" | "md" | "lg";
-
-export interface InsightCardAction {
-  label: string;
-  onClick?: () => void;
-}
-
-export interface InsightCardProps {
-  title: string;
-  description?: string;
-  eyebrow?: string;
-  tone?: InsightCardTone;
-  size?: InsightCardSize;
-  confidence?: string;
-  source?: string;
-  primaryAction?: InsightCardAction;
-  secondaryAction?: InsightCardAction;
-  onDismiss?: () => void;
-}

package/ui/InsightCard/index.ts

@@ -1,7 +0,0 @@
-export { InsightCard } from "./InsightCard";
-export type {
-  InsightCardProps,
-  InsightCardTone,
-  InsightCardSize,
-  InsightCardAction,
-} from "./InsightCard.types";