agentic-ds-kit 0.1.0

package/ui/Empty/Empty.tsx

@@ -0,0 +1,35 @@
+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

@@ -0,0 +1,10 @@
+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

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

package/ui/Field/Field.module.css

@@ -0,0 +1,66 @@
+.field {
+  width: 100%;
+  min-width: 0;
+}
+
+.top {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-2);
+}
+
+.start {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  column-gap: var(--space-3);
+  row-gap: var(--space-1);
+  align-items: center;
+}
+
+.start .label {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+.start .body {
+  grid-column: 2;
+  grid-row: 1;
+  min-width: 0;
+}
+
+.start .hint {
+  grid-column: 2;
+  grid-row: 2;
+}
+
+.start .error {
+  grid-column: 2;
+  grid-row: 3;
+}
+
+.label {
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-label);
+  color: var(--text-primary);
+}
+
+.body {
+  min-width: 0;
+}
+
+.hint {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+}
+
+.error {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-danger);
+}

package/ui/Field/Field.tsx

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,12 @@
+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

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

package/ui/FieldSet/FieldSet.module.css

@@ -0,0 +1,30 @@
+.fieldset {
+  display: grid;
+  gap: var(--space-2);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.legend {
+  padding: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-label);
+  font-weight: var(--type-weight-label);
+  color: var(--text-primary);
+}
+
+.description {
+  margin: 0;
+  font-family: var(--font-sans);
+  font-size: var(--type-size-body-sm);
+  line-height: var(--type-line-body);
+  color: var(--text-muted);
+}
+
+.body {
+  display: grid;
+  gap: var(--space-4);
+  min-width: 0;
+}

package/ui/FieldSet/FieldSet.tsx

@@ -0,0 +1,14 @@
+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

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

package/ui/FieldSet/index.ts

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

package/ui/HeaderCell/HeaderCell.module.css

@@ -0,0 +1,85 @@
+.cell {
+  display: inline-flex;
+  align-items: center;
+  box-sizing: border-box;
+  min-width: 0;
+  max-width: 100%;
+  width: 100%;
+  background-color: transparent;
+}
+
+.sm {
+  min-height: 2.25rem;
+  padding: var(--space-2) var(--space-4);
+  gap: var(--space-2);
+}
+
+.md {
+  min-height: 2.75rem;
+  padding: var(--space-2) var(--space-6);
+  gap: var(--space-2);
+}
+
+.start {
+  justify-content: flex-start;
+}
+
+.end {
+  justify-content: flex-end;
+}
+
+.center {
+  justify-content: center;
+}
+
+.checkboxOnly {
+  width: auto;
+  justify-content: center;
+  padding-inline: 0;
+}
+
+.label {
+  min-width: 0;
+  font-family: var(--font-sans);
+  font-weight: var(--type-weight-label);
+  line-height: var(--type-line-body);
+  color: var(--text-secondary);
+  overflow-wrap: anywhere;
+}
+
+.sm .label,
+.md .label {
+  font-size: var(--type-size-caption);
+}
+
+.sort {
+  display: inline-flex;
+  align-items: center;
+  justify-content: inherit;
+  gap: inherit;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+  color: inherit;
+  font: inherit;
+  text-align: inherit;
+}
+
+.sort:focus-visible {
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.sortIcon {
+  flex-shrink: 0;
+  color: var(--icon-muted);
+}
+
+.sortIconActive {
+  flex-shrink: 0;
+  color: var(--icon-primary);
+}

package/ui/HeaderCell/HeaderCell.tsx

@@ -0,0 +1,71 @@
+"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

@@ -0,0 +1,18 @@
+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

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

package/ui/Input/Input.module.css

@@ -0,0 +1,59 @@
+.shell {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  width: 100%;
+}
+
+.shell:hover:not([data-disabled]),
+.shell[data-demo="hover"]:not([data-disabled]) {
+  border-color: var(--border-strong);
+}
+
+.shell:focus-within,
+.shell[data-demo="focus"] {
+  border-color: var(--border-focus);
+  outline: var(--border-focus-width) solid var(--focus-ring);
+  outline-offset: var(--space-inset-2xs);
+}
+
+.shell.controlError:focus-within,
+.shell.controlError[data-demo="focus"] {
+  border-color: var(--status-danger);
+  outline-color: var(--status-danger);
+}
+
+.shell[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--surface-muted);
+}
+
+.native {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  outline: none;
+}
+
+.native:disabled {
+  cursor: not-allowed;
+}
+
+.slot {
+  flex-shrink: 0;
+  color: var(--text-muted);
+  line-height: 1;
+}
+
+.icon {
+  display: block;
+  flex-shrink: 0;
+  color: var(--icon-muted);
+}

package/ui/Input/Input.tsx

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,22 @@
+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

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