@dax-ui/detail-field 0.0.0-stage → 0.4.0

package/CHANGELOG.md

@@ -0,0 +1,12 @@
+# @dax-ui/detail-field
+
+## 0.4.0
+
+### Minor Changes
+
+- 14ab1d4: New `@dax-ui/skeleton` (loading placeholders), `@dax-ui/chip` (status pills, tags, removable chips) and `@dax-ui/detail-field` (icon + label + value fields, section headings, grids), included in `@dax-ui/react`.
+
+### Patch Changes
+
+- Updated dependencies [14ab1d4]
+  - @dax-ui/skeleton@0.4.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Digital Auxilius
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,147 @@
-# Temporary Holding Version
+# @dax-ui/detail-field
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Read-only details, the way a "view" modal or page shows a record: `DetailField` is a small
+muted label with an icon and the value below it; `DetailSection` groups fields under a
+colored title with a line running to the right; `DetailGrid` lays fields out in responsive
+columns. Values can be anything (text, chips, links); empty values show a placeholder,
+loading values a skeleton, and text values can be copied.
+
+## Installation
+
+```bash
+pnpm add @dax-ui/detail-field
+```
+
+MUI and Emotion are included; the app only needs React 18 or 19.
+
+One-time setup per app (skip if the app already uses dax-ui): install
+[`@dax-ui/theme`](https://www.npmjs.com/package/@dax-ui/theme) and wrap the app in its `UIProvider`.
+
+```bash
+pnpm add @dax-ui/theme
+```
+
+Any icon component works; the examples use [`lucide-react`](https://lucide.dev).
+
+## Usage
+
+```tsx
+import { DetailField, DetailGrid, DetailSection } from '@dax-ui/detail-field';
+import { Chip } from '@dax-ui/chip';
+import { CalendarDays, Clock, FileText, LayoutGrid, MapPin } from 'lucide-react';
+
+<DetailSection title="General Information">
+  <DetailGrid>
+    <DetailField label="Site" value="PK-nineToFive" icon={<MapPin />} copyable />
+    <DetailField label="Title" value="qwrwq" icon={<FileText />} />
+    <DetailField label="Event Type" value="Meeting" icon={<LayoutGrid />} />
+    <DetailField label="Priority" value={<Chip label="Medium" color="success" dot />} />
+  </DetailGrid>
+</DetailSection>
+
+<DetailSection title="Schedule" action={<Button size="sm" variant="ghost">Edit</Button>}>
+  <DetailGrid>
+    <DetailField label="Date" value="Nov 1, 2026" icon={<CalendarDays />} span="full" />
+    <DetailField label="Start Time" value={start} icon={<Clock />} loading={isLoading} />
+    <DetailField label="End Time" value={end} icon={<Clock />} loading={isLoading} />
+  </DetailGrid>
+</DetailSection>
+
+// Empty, custom colors, side by side
+<DetailField label="Department" value={null} emptyValue="Not set" />
+<DetailField label="Owner" value="Amina" labelColor="#0f766e" iconColor="#0f766e" icon={<UserIcon />} />
+<DetailField label="Created" value="Nov 2, 2026" orientation="inline" labelWidth={120} />
+```
+
+Inside a `DetailGrid` (a `<dl>`), fields render as `<dt>`/`<dd>` pairs; elsewhere as plain
+`<div>`s. `DetailSection` is a `<section>` named by its heading (`h3` by default, see
+`headingLevel`).
+
+### Customizing
+
+- Colors: `labelColor`, `valueColor`, `iconColor`, or `colors` (`label`, `value`, `icon`,
+  `empty`, `accent`) on a field; `titleColor`, `lineColor` or `colors` on a section. They're
+  CSS variables (`--dax-detail-field-<key>`, `--dax-detail-section-<key>`), so setting one on
+  an ancestor recolors every field inside it. Defaults follow light and dark mode
+  (`DEFAULT_DETAIL_FIELD_COLORS`, `DEFAULT_DETAIL_SECTION_COLORS` and their `_DARK_` twins).
+- Sizes: `size` `sm`, `md` or `lg`; `orientation` `stacked` or `inline`.
+- Layout: `span` (columns, or `'full'`), `maxLines`, `helperText`, `action`.
+- Anything else: `sx` on every component, and `slotProps.label` / `.value` / `.icon` on a field.
+
+## Props
+
+### DetailField
+
+<!-- props:start DetailField -->
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `label` *(required)* | `ReactNode` |  | What the value is, e.g. "Site". Shown small and muted above (or beside) the value. |
+| `action` | `ReactNode` |  | Shown at the end of the value row, e.g. an edit link or a small button. |
+| `children` | `ReactNode` |  | The value, when it reads better as children. `value` wins if both are set. |
+| `className` | `string` |  | Class name on the root element. |
+| `colors` | `Partial<DetailFieldColors>` |  | Overrides any of the field's colors. `labelColor`, `valueColor` and `iconColor` are shorthands that win over these. Unset keys keep the defaults (which follow light and dark mode). |
+| `copyable` | `string \| boolean` | `false` | Adds a button that copies the value to the clipboard. `true` copies the value when it's text or a number; a string copies that string instead (e.g. a full ID behind a short label). |
+| `copyLabel` | `string` | `'Copy <label>' (or 'Copy' when the label isn't text)` | Accessible name of the copy button. |
+| `emptyValue` | `ReactNode` | `—` | Shown when the value is empty. |
+| `helperText` | `ReactNode` |  | Small muted text under the value, e.g. a hint or a timestamp. |
+| `icon` | `ReactNode` |  | Icon before the label, e.g. `<MapPinIcon />`. Decorative: hidden from screen readers. |
+| `iconColor` | `string` |  | Icon color. Shorthand for `colors.icon`. |
+| `id` | `string` |  | Id of the root element. |
+| `labelColor` | `string` |  | Label color, e.g. `'#0f766e'`. Shorthand for `colors.label`. |
+| `labelWidth` | `string \| number` | `160` | Width of the label with `orientation="inline"`, in px or any CSS length. |
+| `loading` | `boolean` | `false` | Shows a skeleton in place of the value while it loads, and marks the field `aria-busy`. |
+| `loadingLines` | `number` | `1` | Number of skeleton lines while `loading`, for long values. |
+| `maxLines` | `number` |  | Cuts the value off after this many lines, ending in "…". |
+| `onCopy` | `((text: string) => void)` |  | Called with the copied text after a successful copy. |
+| `orientation` | `"stacked" \| "inline"` | `stacked` | `stacked` puts the value under the label; `inline` puts them side by side, the label `labelWidth` wide. |
+| `size` | `"sm" \| "md" \| "lg"` | `md` | Text sizes: `sm` (12px label, 14px value), `md` (14 / 16) or `lg` (15 / 19). |
+| `slotProps` | `{ label?: DetailFieldSlotProps; value?: DetailFieldSlotProps; icon?: DetailFieldSlotProps \| undefined; } \| undefined` | `{}` | Extra props and `sx` for the parts: `label`, `value` and `icon`. |
+| `span` | `number \| "full"` | `1` | Inside a `DetailGrid`: how many columns the field spans; `'full'` spans the whole row (e.g. a description). |
+| `style` | `CSSProperties` |  | Inline styles on the root element. |
+| `sx` | `SxProps<Theme>` |  | Style overrides on the root element. |
+| `value` | `ReactNode` |  | The value: text, a number, chips, a link, anything. Falls back to `children`; when both are empty (`null`, `undefined`, `''` or an empty array), `emptyValue` is shown. |
+| `valueColor` | `string` |  | Value color. Shorthand for `colors.value`. |
+<!-- props:end -->
+
+### DetailSection
+
+<!-- props:start DetailSection -->
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `title` *(required)* | `ReactNode` |  | Section title, e.g. "General Information". |
+| `action` | `ReactNode` |  | Shown at the right end of the title row, e.g. an "Edit" button. |
+| `children` | `ReactNode` |  | The section's content: usually a `DetailGrid` of fields. |
+| `className` | `string` |  | Class name on the root element. |
+| `collapsed` | `boolean` |  | Whether a `collapsible` section is collapsed. Pair with `onCollapsedChange` to control it. |
+| `collapsible` | `boolean` | `false` | Makes the title a button that shows and hides the content. |
+| `colors` | `Partial<DetailSectionColors>` |  | Overrides any of the section's colors. Unset keys keep the defaults. |
+| `defaultCollapsed` | `boolean` | `false` | Initial state of a `collapsible` section when `collapsed` isn't controlled. |
+| `description` | `ReactNode` |  | Muted text under the title. |
+| `gap` | `string \| number` | `20` | Space between the title row and the content, in px or any CSS length. |
+| `headingLevel` | `2 \| 3 \| 4 \| 5 \| 6` | `3` | Heading level of the title (`h2`…`h6`), to fit the page's outline. |
+| `hideLine` | `boolean` | `false` | Hides the line extending to the right of the title. |
+| `icon` | `ReactNode` |  | Icon before the title. Decorative: hidden from screen readers. |
+| `id` | `string` |  | Id of the root element. |
+| `lineColor` | `string` |  | Color of the line next to the title. Shorthand for `colors.line`. |
+| `onCollapsedChange` | `((collapsed: boolean) => void)` |  | Called when the title of a `collapsible` section is clicked. |
+| `style` | `CSSProperties` |  | Inline styles on the root element. |
+| `sx` | `SxProps<Theme>` |  | Style overrides on the root element. |
+| `titleColor` | `string` |  | Title color. Shorthand for `colors.title`. |
+<!-- props:end -->
+
+### DetailGrid
+
+<!-- props:start DetailGrid -->
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` |  | `DetailField`s. |
+| `className` | `string` |  | Class name on the root element. |
+| `columnGap` | `string \| number` | `32` | Space between columns, in px or any CSS length. |
+| `columns` | `1 \| 2 \| 3 \| 4` | `2` | Most columns side by side. Columns drop one at a time as the grid gets narrower than `minColumnWidth` per column, down to a single column on small screens. |
+| `gap` | `string \| number` |  | Space between rows and columns, in px or any CSS length. Sets both `rowGap` and `columnGap`. |
+| `id` | `string` |  | Id of the root element. |
+| `minColumnWidth` | `string \| number` | `200` | Narrowest a column may get before the grid drops a column, in px or any CSS length. |
+| `rowGap` | `string \| number` | `24` | Space between rows, in px or any CSS length. |
+| `style` | `CSSProperties` |  | Inline styles on the root element. |
+| `sx` | `SxProps<Theme>` |  | Style overrides on the root element. |
+<!-- props:end -->

package/lib/index.d.ts

@@ -0,0 +1,239 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode, HTMLAttributes } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+
+type DetailFieldSize = 'sm' | 'md' | 'lg';
+type DetailFieldOrientation = 'stacked' | 'inline';
+/** Every color a detail field uses. Any CSS color works. */
+interface DetailFieldColors {
+    /** The label text. */
+    label: string;
+    /** The value text. */
+    value: string;
+    /** The icon before the label. */
+    icon: string;
+    /** `emptyValue` text. */
+    empty: string;
+    /** Copy button on hover and its focus ring. */
+    accent: string;
+}
+/** Every color a detail section uses. */
+interface DetailSectionColors {
+    /** Section title. */
+    title: string;
+    /** The line extending to the right of the title. */
+    line: string;
+    /** Icon before the title. */
+    icon: string;
+    /** The `description` under the title. */
+    description: string;
+}
+/** Props for one part of a field: extra attributes, a class name and style overrides. */
+interface DetailFieldSlotProps extends HTMLAttributes<HTMLElement> {
+    /** Style overrides for this part. */
+    sx?: SxProps<Theme>;
+}
+interface StyleProps {
+    /** Class name on the root element. */
+    className?: string;
+    /** Inline styles on the root element. */
+    style?: CSSProperties;
+    /** Style overrides on the root element. */
+    sx?: SxProps<Theme>;
+    /** Id of the root element. */
+    id?: string;
+}
+interface DetailFieldProps extends StyleProps {
+    /** What the value is, e.g. "Site". Shown small and muted above (or beside) the value. */
+    label: ReactNode;
+    /**
+     * The value: text, a number, chips, a link, anything. Falls back to `children`; when both
+     * are empty (`null`, `undefined`, `''` or an empty array), `emptyValue` is shown.
+     */
+    value?: ReactNode;
+    /** The value, when it reads better as children. `value` wins if both are set. */
+    children?: ReactNode;
+    /** Icon before the label, e.g. `<MapPinIcon />`. Decorative: hidden from screen readers. */
+    icon?: ReactNode;
+    /** Label color, e.g. `'#0f766e'`. Shorthand for `colors.label`. */
+    labelColor?: string;
+    /** Value color. Shorthand for `colors.value`. */
+    valueColor?: string;
+    /** Icon color. Shorthand for `colors.icon`. */
+    iconColor?: string;
+    /**
+     * Text sizes: `sm` (12px label, 14px value), `md` (14 / 16) or `lg` (15 / 19).
+     * @default 'md'
+     */
+    size?: DetailFieldSize;
+    /**
+     * `stacked` puts the value under the label; `inline` puts them side by side, the label
+     * `labelWidth` wide.
+     * @default 'stacked'
+     */
+    orientation?: DetailFieldOrientation;
+    /**
+     * Width of the label with `orientation="inline"`, in px or any CSS length.
+     * @default 160
+     */
+    labelWidth?: number | string;
+    /**
+     * Shown when the value is empty.
+     * @default '—'
+     */
+    emptyValue?: ReactNode;
+    /**
+     * Shows a skeleton in place of the value while it loads, and marks the field `aria-busy`.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Number of skeleton lines while `loading`, for long values.
+     * @default 1
+     */
+    loadingLines?: number;
+    /**
+     * Adds a button that copies the value to the clipboard. `true` copies the value when it's
+     * text or a number; a string copies that string instead (e.g. a full ID behind a short label).
+     * @default false
+     */
+    copyable?: boolean | string;
+    /**
+     * Accessible name of the copy button.
+     * @default 'Copy <label>' (or 'Copy' when the label isn't text)
+     */
+    copyLabel?: string;
+    /** Called with the copied text after a successful copy. */
+    onCopy?: (text: string) => void;
+    /** Small muted text under the value, e.g. a hint or a timestamp. */
+    helperText?: ReactNode;
+    /** Shown at the end of the value row, e.g. an edit link or a small button. */
+    action?: ReactNode;
+    /** Cuts the value off after this many lines, ending in "…". */
+    maxLines?: number;
+    /**
+     * Inside a `DetailGrid`: how many columns the field spans; `'full'` spans the whole row
+     * (e.g. a description).
+     * @default 1
+     */
+    span?: number | 'full';
+    /**
+     * Overrides any of the field's colors. `labelColor`, `valueColor` and `iconColor` are
+     * shorthands that win over these. Unset keys keep the defaults (which follow light and dark mode).
+     */
+    colors?: Partial<DetailFieldColors>;
+    /** Extra props and `sx` for the parts: `label`, `value` and `icon`. */
+    slotProps?: {
+        /** The label row (icon + label text). */
+        label?: DetailFieldSlotProps;
+        /** The value. */
+        value?: DetailFieldSlotProps;
+        /** The icon wrapper. */
+        icon?: DetailFieldSlotProps;
+    };
+}
+interface DetailSectionProps extends StyleProps {
+    /** Section title, e.g. "General Information". */
+    title: ReactNode;
+    /** The section's content: usually a `DetailGrid` of fields. */
+    children?: ReactNode;
+    /** Icon before the title. Decorative: hidden from screen readers. */
+    icon?: ReactNode;
+    /** Shown at the right end of the title row, e.g. an "Edit" button. */
+    action?: ReactNode;
+    /** Muted text under the title. */
+    description?: ReactNode;
+    /** Title color. Shorthand for `colors.title`. */
+    titleColor?: string;
+    /** Color of the line next to the title. Shorthand for `colors.line`. */
+    lineColor?: string;
+    /**
+     * Hides the line extending to the right of the title.
+     * @default false
+     */
+    hideLine?: boolean;
+    /**
+     * Heading level of the title (`h2`…`h6`), to fit the page's outline.
+     * @default 3
+     */
+    headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /**
+     * Space between the title row and the content, in px or any CSS length.
+     * @default 20
+     */
+    gap?: number | string;
+    /**
+     * Makes the title a button that shows and hides the content.
+     * @default false
+     */
+    collapsible?: boolean;
+    /** Whether a `collapsible` section is collapsed. Pair with `onCollapsedChange` to control it. */
+    collapsed?: boolean;
+    /**
+     * Initial state of a `collapsible` section when `collapsed` isn't controlled.
+     * @default false
+     */
+    defaultCollapsed?: boolean;
+    /** Called when the title of a `collapsible` section is clicked. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** Overrides any of the section's colors. Unset keys keep the defaults. */
+    colors?: Partial<DetailSectionColors>;
+}
+type DetailGridColumns = 1 | 2 | 3 | 4;
+interface DetailGridProps extends StyleProps {
+    /** `DetailField`s. */
+    children?: ReactNode;
+    /**
+     * Most columns side by side. Columns drop one at a time as the grid gets narrower than
+     * `minColumnWidth` per column, down to a single column on small screens.
+     * @default 2
+     */
+    columns?: DetailGridColumns;
+    /**
+     * Narrowest a column may get before the grid drops a column, in px or any CSS length.
+     * @default 200
+     */
+    minColumnWidth?: number | string;
+    /** Space between rows and columns, in px or any CSS length. Sets both `rowGap` and `columnGap`. */
+    gap?: number | string;
+    /**
+     * Space between rows, in px or any CSS length.
+     * @default 24
+     */
+    rowGap?: number | string;
+    /**
+     * Space between columns, in px or any CSS length.
+     * @default 32
+     */
+    columnGap?: number | string;
+}
+
+/**
+ * A read-only "label + value" pair: a small muted label with an icon, and the value below
+ * (or beside) it. The value can be anything; empty values show a placeholder, loading values
+ * a skeleton, and text values can be copied.
+ */
+declare const DetailField: react.ForwardRefExoticComponent<DetailFieldProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * A titled group of details: a colored heading with a line extending to the right
+ * ("General Information ———"), an optional action, and the content below. Can collapse.
+ */
+declare const DetailSection: react.ForwardRefExoticComponent<DetailSectionProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * Lays `DetailField`s out in up to four columns, dropping columns as space runs out down to
+ * one on small screens. Renders a description list (`<dl>`), so each field is a term and its value.
+ */
+declare const DetailGrid: react.ForwardRefExoticComponent<DetailGridProps & react.RefAttributes<HTMLDListElement>>;
+
+/** Default field colors in light mode; override any of them with the `colors` prop. */
+declare const DEFAULT_DETAIL_FIELD_COLORS: DetailFieldColors;
+/** Default field colors in dark mode. */
+declare const DEFAULT_DETAIL_FIELD_DARK_COLORS: DetailFieldColors;
+/** Default section colors in light mode. */
+declare const DEFAULT_DETAIL_SECTION_COLORS: DetailSectionColors;
+/** Default section colors in dark mode. */
+declare const DEFAULT_DETAIL_SECTION_DARK_COLORS: DetailSectionColors;
+
+export { DEFAULT_DETAIL_FIELD_COLORS, DEFAULT_DETAIL_FIELD_DARK_COLORS, DEFAULT_DETAIL_SECTION_COLORS, DEFAULT_DETAIL_SECTION_DARK_COLORS, DetailField, type DetailFieldColors, type DetailFieldOrientation, type DetailFieldProps, type DetailFieldSize, type DetailFieldSlotProps, DetailGrid, type DetailGridColumns, type DetailGridProps, DetailSection, type DetailSectionColors, type DetailSectionProps };

package/lib/index.js

@@ -0,0 +1,479 @@
+"use client";
+
+// src/DetailField.tsx
+import { forwardRef, useContext } from "react";
+import Box2 from "@mui/material/Box";
+import { styled as styled2 } from "@mui/material/styles";
+import { Skeleton } from "@dax-ui/skeleton";
+
+// src/DetailField.constants.ts
+import { createContext } from "react";
+
+// src/colorVariables.ts
+var varKey = (key) => key.endsWith("label") ? `${key}-color` : key;
+function createColorVariables(prefix, light, dark) {
+  const keys = Object.keys(light);
+  const pick = (colors, infix) => Object.fromEntries(
+    Object.entries(colors).filter(([, value]) => value != null).map(([key, value]) => [`--dax-${prefix}-${infix}${varKey(key)}`, value])
+  );
+  return {
+    /** `cssVar.key` for use in styles. */
+    cssVar: Object.fromEntries(
+      keys.map((key) => [key, `var(--dax-${prefix}-${varKey(key)}, var(--dax-${prefix}-default-${varKey(key)}))`])
+    ),
+    /** Default colors for the current mode; spread into the root's styles. */
+    defaultColorStyles: (theme) => ({
+      ...pick(light, "default-"),
+      ...theme.applyStyles("dark", pick(dark, "default-"))
+    }),
+    /** The `colors` prop as inline CSS variables. */
+    colorVariables: (colors) => pick(colors ?? {}, "")
+  };
+}
+
+// src/DetailField.constants.ts
+var DEFAULT_DETAIL_FIELD_COLORS = {
+  label: "#64748b",
+  value: "#1e293b",
+  icon: "#64748b",
+  empty: "#64748b",
+  accent: "#1f4d5a"
+};
+var DEFAULT_DETAIL_FIELD_DARK_COLORS = {
+  label: "#94a3b8",
+  value: "#f1f5f9",
+  icon: "#94a3b8",
+  empty: "#94a3b8",
+  accent: "#7fd1c7"
+};
+var DEFAULT_DETAIL_SECTION_COLORS = {
+  title: "#1f4d5a",
+  line: "#e2e8f0",
+  icon: "#1f4d5a",
+  description: "#64748b"
+};
+var DEFAULT_DETAIL_SECTION_DARK_COLORS = {
+  title: "#7fd1c7",
+  line: "#1e293b",
+  icon: "#7fd1c7",
+  description: "#94a3b8"
+};
+var fieldColors = createColorVariables(
+  "detail-field",
+  DEFAULT_DETAIL_FIELD_COLORS,
+  DEFAULT_DETAIL_FIELD_DARK_COLORS
+);
+var sectionColors = createColorVariables(
+  "detail-section",
+  DEFAULT_DETAIL_SECTION_COLORS,
+  DEFAULT_DETAIL_SECTION_DARK_COLORS
+);
+var FIELD_SIZES = {
+  sm: { label: 12, value: 14, icon: 14, gap: 4 },
+  md: { label: 14, value: 16, icon: 16, gap: 6 },
+  lg: { label: 15, value: 19, icon: 18, gap: 8 }
+};
+var toCss = (value) => typeof value === "number" ? `${value}px` : value;
+var DetailGridContext = createContext(false);
+
+// src/components/CopyButton.tsx
+import { useEffect, useRef, useState } from "react";
+import Box from "@mui/material/Box";
+import { styled } from "@mui/material/styles";
+
+// src/components/visuallyHidden.ts
+var visuallyHidden = {
+  position: "absolute",
+  width: 1,
+  height: 1,
+  margin: -1,
+  padding: 0,
+  overflow: "hidden",
+  clip: "rect(0 0 0 0)",
+  whiteSpace: "nowrap",
+  border: 0
+};
+
+// src/components/CopyButton.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var { cssVar } = fieldColors;
+var Button = styled("button")({
+  all: "unset",
+  flexShrink: 0,
+  display: "inline-grid",
+  placeItems: "center",
+  width: 28,
+  height: 28,
+  borderRadius: 8,
+  cursor: "pointer",
+  color: cssVar.icon,
+  transition: "color 150ms, background-color 150ms",
+  "&:hover": { color: cssVar.accent, backgroundColor: "rgba(100, 116, 139, 0.12)" },
+  "&:focus-visible": { color: cssVar.accent, outline: `2px solid ${cssVar.accent}`, outlineOffset: 1 },
+  "& svg": { width: 16, height: 16 }
+});
+function CopyButton({ text, label, onCopy }) {
+  const [copied, setCopied] = useState(false);
+  const timer = useRef(void 0);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+    } catch {
+      return;
+    }
+    setCopied(true);
+    onCopy?.(text);
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { type: "button", onClick: copy, "aria-label": label, title: copied ? "Copied" : label, children: copied ? /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8.5l3 3 6-7", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, children: [
+      /* @__PURE__ */ jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.8", stroke: "currentColor", strokeWidth: "1.4" }),
+      /* @__PURE__ */ jsx("path", { d: "M10.5 3.5v-.2A1.8 1.8 0 0 0 8.7 1.5H4.3a1.8 1.8 0 0 0-1.8 1.8v4.4a1.8 1.8 0 0 0 1.8 1.8h.2", stroke: "currentColor", strokeWidth: "1.4" })
+    ] }) }),
+    /* @__PURE__ */ jsx(Box, { component: "span", role: "status", sx: visuallyHidden, children: copied ? "Copied" : "" })
+  ] });
+}
+
+// src/DetailField.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var { cssVar: cssVar2, defaultColorStyles, colorVariables } = fieldColors;
+var Root = styled2("div", { shouldForwardProp: (p) => p !== "orientation" && p !== "size" })(({ theme, orientation, size }) => ({
+  ...defaultColorStyles(theme),
+  display: "flex",
+  flexDirection: orientation === "inline" ? "row" : "column",
+  alignItems: orientation === "inline" ? "baseline" : "stretch",
+  gap: orientation === "inline" ? 16 : FIELD_SIZES[size].gap,
+  minWidth: 0,
+  fontFamily: theme.typography.fontFamily,
+  "& > dt, & > dd": { margin: 0 }
+}));
+var isEmpty = (value) => value == null || value === "" || value === false || Array.isArray(value) && value.length === 0;
+var textOf = (node) => typeof node === "string" || typeof node === "number" ? String(node) : void 0;
+var mergeSx = (...items) => items.flatMap((item) => Array.isArray(item) ? item : [item]);
+var DetailField = forwardRef(function DetailField2({
+  label,
+  value: valueProp,
+  children,
+  icon,
+  labelColor,
+  valueColor,
+  iconColor,
+  size = "md",
+  orientation = "stacked",
+  labelWidth = 160,
+  emptyValue = "\u2014",
+  loading = false,
+  loadingLines = 1,
+  copyable = false,
+  copyLabel,
+  onCopy,
+  helperText,
+  action,
+  maxLines,
+  span,
+  colors,
+  slotProps = {},
+  className,
+  style,
+  sx,
+  id
+}, ref) {
+  const inList = useContext(DetailGridContext);
+  const sizes = FIELD_SIZES[size];
+  const value = valueProp !== void 0 ? valueProp : children;
+  const empty = isEmpty(value);
+  const copyText = typeof copyable === "string" ? copyable : copyable ? textOf(value) : void 0;
+  const showCopy = Boolean(copyText) && !empty && !loading;
+  const inline = orientation === "inline";
+  const isText = empty || textOf(value) !== void 0;
+  const { sx: labelSx, ...labelProps } = slotProps.label ?? {};
+  const { sx: valueSx, ...valueProps } = slotProps.value ?? {};
+  const { sx: iconSx, ...iconProps } = slotProps.icon ?? {};
+  return /* @__PURE__ */ jsxs2(
+    Root,
+    {
+      ref,
+      id,
+      orientation,
+      size,
+      className: ["DaxDetailField-root", className].filter(Boolean).join(" "),
+      style: {
+        ...colorVariables({
+          ...colors,
+          ...labelColor && { label: labelColor },
+          ...valueColor && { value: valueColor },
+          ...iconColor && { icon: iconColor }
+        }),
+        ...style
+      },
+      sx: mergeSx(
+        span != null && { gridColumn: span === "full" ? "1 / -1" : `span ${span}` },
+        sx
+      ),
+      children: [
+        /* @__PURE__ */ jsxs2(
+          Box2,
+          {
+            component: inList ? "dt" : "div",
+            className: "DaxDetailField-label",
+            ...labelProps,
+            sx: mergeSx(
+              {
+                display: "flex",
+                alignItems: "center",
+                gap: "8px",
+                minWidth: 0,
+                color: cssVar2.label,
+                fontSize: sizes.label,
+                fontWeight: 500,
+                lineHeight: 1.4,
+                ...inline && { flex: `0 0 ${toCss(labelWidth)}` }
+              },
+              labelSx
+            ),
+            children: [
+              icon && /* @__PURE__ */ jsx2(
+                Box2,
+                {
+                  component: "span",
+                  "aria-hidden": true,
+                  className: "DaxDetailField-icon",
+                  ...iconProps,
+                  sx: mergeSx(
+                    {
+                      display: "inline-flex",
+                      flexShrink: 0,
+                      color: cssVar2.icon,
+                      "& svg": { width: sizes.icon + 2, height: sizes.icon + 2 }
+                    },
+                    iconSx
+                  ),
+                  children: icon
+                }
+              ),
+              /* @__PURE__ */ jsx2("span", { children: label })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2(
+          Box2,
+          {
+            component: inList ? "dd" : "div",
+            className: "DaxDetailField-value",
+            "aria-busy": loading || void 0,
+            ...valueProps,
+            sx: mergeSx(
+              {
+                // Browsers indent <dd> by default; values line up with the label's icon instead.
+                m: 0,
+                minWidth: 0,
+                flex: inline ? 1 : void 0,
+                color: empty && !loading ? cssVar2.empty : cssVar2.value,
+                fontSize: sizes.value,
+                fontWeight: 500,
+                lineHeight: 1.45,
+                overflowWrap: "anywhere"
+              },
+              valueSx
+            ),
+            children: [
+              loading ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+                /* @__PURE__ */ jsx2(Skeleton, { lines: loadingLines, width: loadingLines > 1 ? "100%" : "60%", lastLineWidth: "60%" }),
+                /* @__PURE__ */ jsx2(Box2, { component: "span", sx: visuallyHidden, children: "Loading" })
+              ] }) : /* @__PURE__ */ jsxs2(Box2, { sx: { display: "flex", alignItems: "center", gap: "8px", minWidth: 0 }, children: [
+                /* @__PURE__ */ jsx2(
+                  Box2,
+                  {
+                    className: "DaxDetailField-content",
+                    sx: {
+                      flex: "0 1 auto",
+                      minWidth: 0,
+                      ...isText ? maxLines && {
+                        display: "-webkit-box",
+                        WebkitLineClamp: maxLines,
+                        WebkitBoxOrient: "vertical",
+                        overflow: "hidden"
+                      } : (
+                        // Chips, links and other elements sit in a wrapping row.
+                        { display: "flex", flexWrap: "wrap", alignItems: "center", gap: "8px" }
+                      )
+                    },
+                    children: empty ? emptyValue : value
+                  }
+                ),
+                showCopy && /* @__PURE__ */ jsx2(
+                  CopyButton,
+                  {
+                    text: copyText,
+                    label: copyLabel ?? (textOf(label) ? `Copy ${textOf(label)}` : "Copy"),
+                    onCopy
+                  }
+                ),
+                action && /* @__PURE__ */ jsx2(Box2, { sx: { ml: "auto", flexShrink: 0 }, children: action })
+              ] }),
+              helperText && /* @__PURE__ */ jsx2(
+                Box2,
+                {
+                  className: "DaxDetailField-helper",
+                  sx: { mt: "4px", color: cssVar2.label, fontSize: sizes.label - 1, fontWeight: 400, lineHeight: 1.4 },
+                  children: helperText
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+// src/DetailSection.tsx
+import { forwardRef as forwardRef2, useId, useState as useState2 } from "react";
+import Box3 from "@mui/material/Box";
+import Collapse from "@mui/material/Collapse";
+import { styled as styled3 } from "@mui/material/styles";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var { cssVar: cssVar3, defaultColorStyles: defaultColorStyles2, colorVariables: colorVariables2 } = sectionColors;
+var Root2 = styled3("section")(({ theme }) => ({
+  ...defaultColorStyles2(theme),
+  fontFamily: theme.typography.fontFamily,
+  minWidth: 0
+}));
+var Title = styled3("span")({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8,
+  color: cssVar3.title,
+  fontSize: 16,
+  fontWeight: 600,
+  lineHeight: 1.4,
+  "& .DaxDetailSection-icon": { display: "inline-flex", color: cssVar3.icon, "& svg": { width: 18, height: 18 } }
+});
+var ToggleButton = styled3("button")({
+  all: "unset",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 8,
+  cursor: "pointer",
+  borderRadius: 6,
+  "&:focus-visible": { outline: `2px solid ${cssVar3.title}`, outlineOffset: 3 }
+});
+var DetailSection = forwardRef2(function DetailSection2({
+  title,
+  children,
+  icon,
+  action,
+  description,
+  titleColor,
+  lineColor,
+  hideLine = false,
+  headingLevel = 3,
+  gap = 20,
+  collapsible = false,
+  collapsed: collapsedProp,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  colors,
+  className,
+  style,
+  sx,
+  id
+}, ref) {
+  const titleId = useId();
+  const contentId = useId();
+  const [uncontrolled, setUncontrolled] = useState2(defaultCollapsed);
+  const collapsed = collapsible && (collapsedProp ?? uncontrolled);
+  const toggle = () => {
+    const next = !collapsed;
+    if (collapsedProp === void 0) setUncontrolled(next);
+    onCollapsedChange?.(next);
+  };
+  const titleContent = /* @__PURE__ */ jsxs3(Title, { children: [
+    icon && /* @__PURE__ */ jsx3("span", { className: "DaxDetailSection-icon", "aria-hidden": true, children: icon }),
+    /* @__PURE__ */ jsx3("span", { id: titleId, children: title }),
+    collapsible && /* @__PURE__ */ jsx3(
+      "svg",
+      {
+        viewBox: "0 0 16 16",
+        width: 16,
+        height: 16,
+        fill: "none",
+        "aria-hidden": true,
+        style: { transform: collapsed ? "rotate(-90deg)" : "none", transition: "transform 200ms" },
+        children: /* @__PURE__ */ jsx3("path", { d: "M4 6l4 4 4-4", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
+      }
+    )
+  ] });
+  const content = /* @__PURE__ */ jsx3(Box3, { id: contentId, className: "DaxDetailSection-content", sx: { pt: toCss(gap) }, children });
+  return /* @__PURE__ */ jsxs3(
+    Root2,
+    {
+      ref,
+      id,
+      "aria-labelledby": titleId,
+      className: ["DaxDetailSection-root", className].filter(Boolean).join(" "),
+      style: {
+        ...colorVariables2({
+          ...colors,
+          ...titleColor && { title: titleColor, icon: colors?.icon ?? titleColor },
+          ...lineColor && { line: lineColor }
+        }),
+        ...style
+      },
+      sx,
+      children: [
+        /* @__PURE__ */ jsxs3(Box3, { sx: { display: "flex", alignItems: "center", gap: "16px" }, children: [
+          /* @__PURE__ */ jsx3(Box3, { component: `h${headingLevel}`, sx: { m: 0, font: "inherit", flexShrink: 0, maxWidth: "100%" }, children: collapsible ? /* @__PURE__ */ jsx3(ToggleButton, { type: "button", "aria-expanded": !collapsed, "aria-controls": contentId, onClick: toggle, children: titleContent }) : titleContent }),
+          !hideLine && /* @__PURE__ */ jsx3(Box3, { "aria-hidden": true, sx: { flex: 1, height: "1px", backgroundColor: cssVar3.line } }),
+          hideLine && /* @__PURE__ */ jsx3(Box3, { sx: { flex: 1 } }),
+          action && /* @__PURE__ */ jsx3(Box3, { sx: { flexShrink: 0 }, children: action })
+        ] }),
+        description && /* @__PURE__ */ jsx3(Box3, { sx: { mt: "4px", color: cssVar3.description, fontSize: 14, lineHeight: 1.5 }, className: "DaxDetailSection-description", children: description }),
+        collapsible ? /* @__PURE__ */ jsx3(Collapse, { in: !collapsed, unmountOnExit: false, children: content }) : content
+      ]
+    }
+  );
+});
+
+// src/DetailGrid.tsx
+import { forwardRef as forwardRef3 } from "react";
+import Box4 from "@mui/material/Box";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DetailGrid = forwardRef3(function DetailGrid2({ children, columns = 2, minColumnWidth = 200, gap, rowGap = 24, columnGap = 32, className, style, sx, id }, ref) {
+  const colGap = toCss(gap ?? columnGap);
+  const minWidth = toCss(minColumnWidth);
+  const track = `minmax(max(min(${minWidth}, 100%), calc((100% - ${columns - 1} * ${colGap}) / ${columns})), 1fr)`;
+  return /* @__PURE__ */ jsx4(DetailGridContext.Provider, { value: true, children: /* @__PURE__ */ jsx4(
+    Box4,
+    {
+      ref,
+      component: "dl",
+      id,
+      className: ["DaxDetailGrid-root", className].filter(Boolean).join(" "),
+      style,
+      sx: [
+        {
+          m: 0,
+          display: "grid",
+          gridTemplateColumns: columns === 1 ? "minmax(0, 1fr)" : `repeat(auto-fill, ${track})`,
+          rowGap: toCss(gap ?? rowGap),
+          columnGap: colGap
+        },
+        ...Array.isArray(sx) ? sx : [sx]
+      ],
+      children
+    }
+  ) });
+});
+export {
+  DEFAULT_DETAIL_FIELD_COLORS,
+  DEFAULT_DETAIL_FIELD_DARK_COLORS,
+  DEFAULT_DETAIL_SECTION_COLORS,
+  DEFAULT_DETAIL_SECTION_DARK_COLORS,
+  DetailField,
+  DetailGrid,
+  DetailSection
+};
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/DetailField.tsx","../src/DetailField.constants.ts","../src/colorVariables.ts","../src/components/CopyButton.tsx","../src/components/visuallyHidden.ts","../src/DetailSection.tsx","../src/DetailGrid.tsx"],"sourcesContent":["import { forwardRef, useContext, type ReactNode } from 'react';\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport { Skeleton } from '@dax-ui/skeleton';\nimport { DetailGridContext, FIELD_SIZES, fieldColors, toCss } from './DetailField.constants';\nimport type { DetailFieldOrientation, DetailFieldProps, DetailFieldSize } from './DetailField.types';\nimport { CopyButton } from './components/CopyButton';\nimport { visuallyHidden } from './components/visuallyHidden';\n\nconst { cssVar, defaultColorStyles, colorVariables } = fieldColors;\n\nconst Root = styled('div', { shouldForwardProp: (p) => p !== 'orientation' && p !== 'size' })<{\n  orientation: DetailFieldOrientation;\n  size: DetailFieldSize;\n}>(({ theme, orientation, size }) => ({\n  ...defaultColorStyles(theme),\n  display: 'flex',\n  flexDirection: orientation === 'inline' ? 'row' : 'column',\n  alignItems: orientation === 'inline' ? 'baseline' : 'stretch',\n  gap: orientation === 'inline' ? 16 : FIELD_SIZES[size].gap,\n  minWidth: 0,\n  fontFamily: theme.typography.fontFamily,\n  '& > dt, & > dd': { margin: 0 },\n}));\n\nconst isEmpty = (value: ReactNode) =>\n  value == null || value === '' || value === false || (Array.isArray(value) && value.length === 0);\n\nconst textOf = (node: ReactNode): string | undefined =>\n  typeof node === 'string' || typeof node === 'number' ? String(node) : undefined;\n\nconst mergeSx = (...items: unknown[]) => items.flatMap((item) => (Array.isArray(item) ? item : [item]));\n\n/**\n * A read-only \"label + value\" pair: a small muted label with an icon, and the value below\n * (or beside) it. The value can be anything; empty values show a placeholder, loading values\n * a skeleton, and text values can be copied.\n */\nexport const DetailField = forwardRef<HTMLDivElement, DetailFieldProps>(function DetailField(\n  {\n    label,\n    value: valueProp,\n    children,\n    icon,\n    labelColor,\n    valueColor,\n    iconColor,\n    size = 'md',\n    orientation = 'stacked',\n    labelWidth = 160,\n    emptyValue = '—',\n    loading = false,\n    loadingLines = 1,\n    copyable = false,\n    copyLabel,\n    onCopy,\n    helperText,\n    action,\n    maxLines,\n    span,\n    colors,\n    slotProps = {},\n    className,\n    style,\n    sx,\n    id,\n  },\n  ref,\n) {\n  const inList = useContext(DetailGridContext);\n  const sizes = FIELD_SIZES[size];\n  const value = valueProp !== undefined ? valueProp : children;\n  const empty = isEmpty(value);\n  const copyText = typeof copyable === 'string' ? copyable : copyable ? textOf(value) : undefined;\n  const showCopy = Boolean(copyText) && !empty && !loading;\n  const inline = orientation === 'inline';\n  const isText = empty || textOf(value) !== undefined;\n\n  const { sx: labelSx, ...labelProps } = slotProps.label ?? {};\n  const { sx: valueSx, ...valueProps } = slotProps.value ?? {};\n  const { sx: iconSx, ...iconProps } = slotProps.icon ?? {};\n\n  return (\n    <Root\n      ref={ref}\n      id={id}\n      orientation={orientation}\n      size={size}\n      className={['DaxDetailField-root', className].filter(Boolean).join(' ')}\n      style={{\n        ...colorVariables({\n          ...colors,\n          ...(labelColor && { label: labelColor }),\n          ...(valueColor && { value: valueColor }),\n          ...(iconColor && { icon: iconColor }),\n        }),\n        ...style,\n      }}\n      sx={mergeSx(\n        span != null && { gridColumn: span === 'full' ? '1 / -1' : `span ${span}` },\n        sx,\n      )}\n    >\n      <Box\n        component={inList ? 'dt' : 'div'}\n        className=\"DaxDetailField-label\"\n        {...labelProps}\n        sx={mergeSx(\n          {\n            display: 'flex',\n            alignItems: 'center',\n            gap: '8px',\n            minWidth: 0,\n            color: cssVar.label,\n            fontSize: sizes.label,\n            fontWeight: 500,\n            lineHeight: 1.4,\n            ...(inline && { flex: `0 0 ${toCss(labelWidth)}` }),\n          },\n          labelSx,\n        )}\n      >\n        {icon && (\n          <Box\n            component=\"span\"\n            aria-hidden\n            className=\"DaxDetailField-icon\"\n            {...iconProps}\n            sx={mergeSx(\n              {\n                display: 'inline-flex',\n                flexShrink: 0,\n                color: cssVar.icon,\n                '& svg': { width: sizes.icon + 2, height: sizes.icon + 2 },\n              },\n              iconSx,\n            )}\n          >\n            {icon}\n          </Box>\n        )}\n        <span>{label}</span>\n      </Box>\n\n      <Box\n        component={inList ? 'dd' : 'div'}\n        className=\"DaxDetailField-value\"\n        aria-busy={loading || undefined}\n        {...valueProps}\n        sx={mergeSx(\n          {\n            // Browsers indent <dd> by default; values line up with the label's icon instead.\n            m: 0,\n            minWidth: 0,\n            flex: inline ? 1 : undefined,\n            color: empty && !loading ? cssVar.empty : cssVar.value,\n            fontSize: sizes.value,\n            fontWeight: 500,\n            lineHeight: 1.45,\n            overflowWrap: 'anywhere',\n          },\n          valueSx,\n        )}\n      >\n        {loading ? (\n          <>\n            <Skeleton lines={loadingLines} width={loadingLines > 1 ? '100%' : '60%'} lastLineWidth=\"60%\" />\n            <Box component=\"span\" sx={visuallyHidden}>\n              Loading\n            </Box>\n          </>\n        ) : (\n          <Box sx={{ display: 'flex', alignItems: 'center', gap: '8px', minWidth: 0 }}>\n            <Box\n              className=\"DaxDetailField-content\"\n              sx={{\n                flex: '0 1 auto',\n                minWidth: 0,\n                ...(isText\n                  ? maxLines && {\n                      display: '-webkit-box',\n                      WebkitLineClamp: maxLines,\n                      WebkitBoxOrient: 'vertical',\n                      overflow: 'hidden',\n                    }\n                  : // Chips, links and other elements sit in a wrapping row.\n                    { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '8px' }),\n              }}\n            >\n              {empty ? emptyValue : value}\n            </Box>\n            {showCopy && (\n              <CopyButton\n                text={copyText!}\n                label={copyLabel ?? (textOf(label) ? `Copy ${textOf(label)}` : 'Copy')}\n                onCopy={onCopy}\n              />\n            )}\n            {action && <Box sx={{ ml: 'auto', flexShrink: 0 }}>{action}</Box>}\n          </Box>\n        )}\n        {helperText && (\n          <Box\n            className=\"DaxDetailField-helper\"\n            sx={{ mt: '4px', color: cssVar.label, fontSize: sizes.label - 1, fontWeight: 400, lineHeight: 1.4 }}\n          >\n            {helperText}\n          </Box>\n        )}\n      </Box>\n    </Root>\n  );\n});\n","import { createContext } from 'react';\nimport { createColorVariables } from './colorVariables';\nimport type { DetailFieldColors, DetailFieldSize, DetailSectionColors } from './DetailField.types';\n\n/** Default field colors in light mode; override any of them with the `colors` prop. */\nexport const DEFAULT_DETAIL_FIELD_COLORS: DetailFieldColors = {\n  label: '#64748b',\n  value: '#1e293b',\n  icon: '#64748b',\n  empty: '#64748b',\n  accent: '#1f4d5a',\n};\n\n/** Default field colors in dark mode. */\nexport const DEFAULT_DETAIL_FIELD_DARK_COLORS: DetailFieldColors = {\n  label: '#94a3b8',\n  value: '#f1f5f9',\n  icon: '#94a3b8',\n  empty: '#94a3b8',\n  accent: '#7fd1c7',\n};\n\n/** Default section colors in light mode. */\nexport const DEFAULT_DETAIL_SECTION_COLORS: DetailSectionColors = {\n  title: '#1f4d5a',\n  line: '#e2e8f0',\n  icon: '#1f4d5a',\n  description: '#64748b',\n};\n\n/** Default section colors in dark mode. */\nexport const DEFAULT_DETAIL_SECTION_DARK_COLORS: DetailSectionColors = {\n  title: '#7fd1c7',\n  line: '#1e293b',\n  icon: '#7fd1c7',\n  description: '#94a3b8',\n};\n\nexport const fieldColors = createColorVariables(\n  'detail-field',\n  DEFAULT_DETAIL_FIELD_COLORS,\n  DEFAULT_DETAIL_FIELD_DARK_COLORS,\n);\n\nexport const sectionColors = createColorVariables(\n  'detail-section',\n  DEFAULT_DETAIL_SECTION_COLORS,\n  DEFAULT_DETAIL_SECTION_DARK_COLORS,\n);\n\nexport const FIELD_SIZES: Record<DetailFieldSize, { label: number; value: number; icon: number; gap: number }> = {\n  sm: { label: 12, value: 14, icon: 14, gap: 4 },\n  md: { label: 14, value: 16, icon: 16, gap: 6 },\n  lg: { label: 15, value: 19, icon: 18, gap: 8 },\n};\n\nexport const toCss = (value: number | string | undefined) => (typeof value === 'number' ? `${value}px` : value);\n\n/** Set by `DetailGrid` (a `<dl>`), so fields inside it render `<dt>`/`<dd>`. */\nexport const DetailGridContext = createContext(false);\n","import type { CSSObject, Theme } from '@mui/material/styles';\n\n/**\n * The color pattern shared by dax-ui components that follow light and dark mode.\n *\n * Parts read `var(--dax-<prefix>-<key>, var(--dax-<prefix>-default-<key>))`: the public\n * variable when anything sets it (the `colors` prop inline on the root, or any ancestor in\n * CSS), else a private default the root's class sets for the current color mode.\n */\n// Keys ending in \"label\" get a `-color` suffix (`--dax-detail-label-color`): Emotion reads any\n// `label:` in a style as its class-name label, which puts the color (with its `#`) into the\n// class name and makes the whole rule invalid.\nconst varKey = (key: string) => (key.endsWith('label') ? `${key}-color` : key);\n\nexport function createColorVariables<C extends object>(prefix: string, light: C, dark: C) {\n  const keys = Object.keys(light) as Array<keyof C & string>;\n  const pick = (colors: Partial<C>, infix: string) =>\n    Object.fromEntries(\n      Object.entries(colors)\n        .filter(([, value]) => value != null)\n        .map(([key, value]) => [`--dax-${prefix}-${infix}${varKey(key)}`, value]),\n    ) as Record<string, string>;\n\n  return {\n    /** `cssVar.key` for use in styles. */\n    cssVar: Object.fromEntries(\n      keys.map((key) => [key, `var(--dax-${prefix}-${varKey(key)}, var(--dax-${prefix}-default-${varKey(key)}))`]),\n    ) as Record<keyof C, string>,\n    /** Default colors for the current mode; spread into the root's styles. */\n    defaultColorStyles: (theme: Theme): CSSObject => ({\n      ...pick(light, 'default-'),\n      ...(theme.applyStyles('dark', pick(dark, 'default-')) as CSSObject),\n    }),\n    /** The `colors` prop as inline CSS variables. */\n    colorVariables: (colors?: Partial<C>) => pick(colors ?? {}, ''),\n  };\n}\n","import { useEffect, useRef, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport { fieldColors } from '../DetailField.constants';\nimport { visuallyHidden } from './visuallyHidden';\n\nconst { cssVar } = fieldColors;\n\nconst Button = styled('button')({\n  all: 'unset',\n  flexShrink: 0,\n  display: 'inline-grid',\n  placeItems: 'center',\n  width: 28,\n  height: 28,\n  borderRadius: 8,\n  cursor: 'pointer',\n  color: cssVar.icon,\n  transition: 'color 150ms, background-color 150ms',\n  '&:hover': { color: cssVar.accent, backgroundColor: 'rgba(100, 116, 139, 0.12)' },\n  '&:focus-visible': { color: cssVar.accent, outline: `2px solid ${cssVar.accent}`, outlineOffset: 1 },\n  '& svg': { width: 16, height: 16 },\n});\n\ninterface CopyButtonProps {\n  text: string;\n  label: string;\n  onCopy?: (text: string) => void;\n}\n\n/** Copies `text` to the clipboard and confirms with a check mark and a screen-reader message. */\nexport function CopyButton({ text, label, onCopy }: CopyButtonProps) {\n  const [copied, setCopied] = useState(false);\n  const timer = useRef<ReturnType<typeof setTimeout>>(undefined);\n  useEffect(() => () => clearTimeout(timer.current), []);\n\n  const copy = async () => {\n    try {\n      await navigator.clipboard.writeText(text);\n    } catch {\n      return;\n    }\n    setCopied(true);\n    onCopy?.(text);\n    clearTimeout(timer.current);\n    timer.current = setTimeout(() => setCopied(false), 2000);\n  };\n\n  return (\n    <>\n      <Button type=\"button\" onClick={copy} aria-label={label} title={copied ? 'Copied' : label}>\n        {copied ? (\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden>\n            <path d=\"M3.5 8.5l3 3 6-7\" stroke=\"currentColor\" strokeWidth=\"1.8\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n          </svg>\n        ) : (\n          <svg viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden>\n            <rect x=\"5.5\" y=\"5.5\" width=\"8\" height=\"8\" rx=\"1.8\" stroke=\"currentColor\" strokeWidth=\"1.4\" />\n            <path d=\"M10.5 3.5v-.2A1.8 1.8 0 0 0 8.7 1.5H4.3a1.8 1.8 0 0 0-1.8 1.8v4.4a1.8 1.8 0 0 0 1.8 1.8h.2\" stroke=\"currentColor\" strokeWidth=\"1.4\" />\n          </svg>\n        )}\n      </Button>\n      <Box component=\"span\" role=\"status\" sx={visuallyHidden}>\n        {copied ? 'Copied' : ''}\n      </Box>\n    </>\n  );\n}\n","/** Hides content visually while keeping it available to screen readers. */\nexport const visuallyHidden = {\n  position: 'absolute',\n  width: 1,\n  height: 1,\n  margin: -1,\n  padding: 0,\n  overflow: 'hidden',\n  clip: 'rect(0 0 0 0)',\n  whiteSpace: 'nowrap',\n  border: 0,\n} as const;\n","import { forwardRef, useId, useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Collapse from '@mui/material/Collapse';\nimport { styled } from '@mui/material/styles';\nimport { sectionColors, toCss } from './DetailField.constants';\nimport type { DetailSectionProps } from './DetailField.types';\n\nconst { cssVar, defaultColorStyles, colorVariables } = sectionColors;\n\nconst Root = styled('section')(({ theme }) => ({\n  ...defaultColorStyles(theme),\n  fontFamily: theme.typography.fontFamily,\n  minWidth: 0,\n}));\n\nconst Title = styled('span')({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 8,\n  color: cssVar.title,\n  fontSize: 16,\n  fontWeight: 600,\n  lineHeight: 1.4,\n  '& .DaxDetailSection-icon': { display: 'inline-flex', color: cssVar.icon, '& svg': { width: 18, height: 18 } },\n});\n\nconst ToggleButton = styled('button')({\n  all: 'unset',\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: 8,\n  cursor: 'pointer',\n  borderRadius: 6,\n  '&:focus-visible': { outline: `2px solid ${cssVar.title}`, outlineOffset: 3 },\n});\n\n/**\n * A titled group of details: a colored heading with a line extending to the right\n * (\"General Information ———\"), an optional action, and the content below. Can collapse.\n */\nexport const DetailSection = forwardRef<HTMLElement, DetailSectionProps>(function DetailSection(\n  {\n    title,\n    children,\n    icon,\n    action,\n    description,\n    titleColor,\n    lineColor,\n    hideLine = false,\n    headingLevel = 3,\n    gap = 20,\n    collapsible = false,\n    collapsed: collapsedProp,\n    defaultCollapsed = false,\n    onCollapsedChange,\n    colors,\n    className,\n    style,\n    sx,\n    id,\n  },\n  ref,\n) {\n  const titleId = useId();\n  const contentId = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultCollapsed);\n  const collapsed = collapsible && (collapsedProp ?? uncontrolled);\n\n  const toggle = () => {\n    const next = !collapsed;\n    if (collapsedProp === undefined) setUncontrolled(next);\n    onCollapsedChange?.(next);\n  };\n\n  const titleContent = (\n    <Title>\n      {icon && (\n        <span className=\"DaxDetailSection-icon\" aria-hidden>\n          {icon}\n        </span>\n      )}\n      <span id={titleId}>{title}</span>\n      {collapsible && (\n        <svg\n          viewBox=\"0 0 16 16\"\n          width={16}\n          height={16}\n          fill=\"none\"\n          aria-hidden\n          style={{ transform: collapsed ? 'rotate(-90deg)' : 'none', transition: 'transform 200ms' }}\n        >\n          <path d=\"M4 6l4 4 4-4\" stroke=\"currentColor\" strokeWidth=\"1.6\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n        </svg>\n      )}\n    </Title>\n  );\n\n  const content = (\n    <Box id={contentId} className=\"DaxDetailSection-content\" sx={{ pt: toCss(gap) }}>\n      {children}\n    </Box>\n  );\n\n  return (\n    <Root\n      ref={ref}\n      id={id}\n      aria-labelledby={titleId}\n      className={['DaxDetailSection-root', className].filter(Boolean).join(' ')}\n      style={{\n        ...colorVariables({\n          ...colors,\n          ...(titleColor && { title: titleColor, icon: colors?.icon ?? titleColor }),\n          ...(lineColor && { line: lineColor }),\n        }),\n        ...style,\n      }}\n      sx={sx}\n    >\n      <Box sx={{ display: 'flex', alignItems: 'center', gap: '16px' }}>\n        <Box component={`h${headingLevel}`} sx={{ m: 0, font: 'inherit', flexShrink: 0, maxWidth: '100%' }}>\n          {collapsible ? (\n            <ToggleButton type=\"button\" aria-expanded={!collapsed} aria-controls={contentId} onClick={toggle}>\n              {titleContent}\n            </ToggleButton>\n          ) : (\n            titleContent\n          )}\n        </Box>\n        {!hideLine && <Box aria-hidden sx={{ flex: 1, height: '1px', backgroundColor: cssVar.line }} />}\n        {hideLine && <Box sx={{ flex: 1 }} />}\n        {action && <Box sx={{ flexShrink: 0 }}>{action}</Box>}\n      </Box>\n      {description && (\n        <Box sx={{ mt: '4px', color: cssVar.description, fontSize: 14, lineHeight: 1.5 }} className=\"DaxDetailSection-description\">\n          {description}\n        </Box>\n      )}\n      {collapsible ? (\n        <Collapse in={!collapsed} unmountOnExit={false}>\n          {content}\n        </Collapse>\n      ) : (\n        content\n      )}\n    </Root>\n  );\n});\n","import { forwardRef } from 'react';\nimport Box from '@mui/material/Box';\nimport { DetailGridContext, toCss } from './DetailField.constants';\nimport type { DetailGridProps } from './DetailField.types';\n\n/**\n * Lays `DetailField`s out in up to four columns, dropping columns as space runs out down to\n * one on small screens. Renders a description list (`<dl>`), so each field is a term and its value.\n */\nexport const DetailGrid = forwardRef<HTMLDListElement, DetailGridProps>(function DetailGrid(\n  { children, columns = 2, minColumnWidth = 200, gap, rowGap = 24, columnGap = 32, className, style, sx, id },\n  ref,\n) {\n  const colGap = toCss(gap ?? columnGap)!;\n  const minWidth = toCss(minColumnWidth)!;\n  // At most `columns` tracks, each at least `minColumnWidth` (or the full width, if that's less): narrower containers get fewer columns.\n  const track = `minmax(max(min(${minWidth}, 100%), calc((100% - ${columns - 1} * ${colGap}) / ${columns})), 1fr)`;\n\n  return (\n    <DetailGridContext.Provider value>\n      <Box\n        ref={ref}\n        component=\"dl\"\n        id={id}\n        className={['DaxDetailGrid-root', className].filter(Boolean).join(' ')}\n        style={style}\n        sx={[\n          {\n            m: 0,\n            display: 'grid',\n            gridTemplateColumns: columns === 1 ? 'minmax(0, 1fr)' : `repeat(auto-fill, ${track})`,\n            rowGap: toCss(gap ?? rowGap),\n            columnGap: colGap,\n          },\n          ...(Array.isArray(sx) ? sx : [sx]),\n        ]}\n      >\n        {children}\n      </Box>\n    </DetailGridContext.Provider>\n  );\n});\n"],"mappings":"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","names":["Box","styled","Fragment","jsx","jsxs","cssVar","styled","DetailField","Box","forwardRef","useState","Box","styled","jsx","jsxs","cssVar","defaultColorStyles","colorVariables","Root","styled","forwardRef","DetailSection","useState","Box","forwardRef","Box","jsx","forwardRef","DetailGrid","Box"]}

package/package.json

@@ -1,6 +1,62 @@
 {
   "name": "@dax-ui/detail-field",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.4.0",
+  "description": "dax-ui DetailField: read-only label + value fields, titled sections and responsive grids for detail views",
+  "keywords": [
+    "dax-ui",
+    "react",
+    "design-system",
+    "mui",
+    "detail-field",
+    "description-list",
+    "details",
+    "read-only",
+    "field"
+  ],
+  "author": "Digital Auxilius",
+  "homepage": "https://github.com/FaaizHussain26/DAX-UI/tree/main/packages/detail-field#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/FaaizHussain26/DAX-UI.git",
+    "directory": "packages/detail-field"
+  },
+  "bugs": {
+    "url": "https://github.com/FaaizHussain26/DAX-UI/issues"
+  },
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib",
+    "CHANGELOG.md"
+  ],
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^9.5.0",
+    "@dax-ui/skeleton": "^0.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@dax-ui/builder": "^0.0.0",
+    "@dax-ui/chip": "^0.4.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "builder"
+  }
 }