@aortl/admin-react 0.5.2 → 0.7.0

package/dist/Card.d.ts

@@ -18,6 +18,8 @@ export interface CardProps extends Omit<ComponentProps<"div">, "title"> {
     title?: ReactNode;
     /** Renders as `<Card.Description>`. */
     description?: ReactNode;
+    /** Trailing header controls (close, edit, …). Renders as `<Card.Toolbar>`. */
+    toolbar?: ReactNode;
     /** Renders as `<Card.Actions>`. */
     actions?: ReactNode;
 }
@@ -26,9 +28,13 @@ export interface CardProps extends Omit<ComponentProps<"div">, "title"> {
  * an optional title (with icon), description, children, and actions. For
  * anything outside that shape, use `<Card.Container>` and compose by hand.
  */
-declare function CardRoot({ bordered, compact, icon, title, description, actions, className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
+declare function CardRoot({ bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }: CardProps): import("react/jsx-runtime").JSX.Element;
 export type CardBodyProps = ComponentProps<"div">;
 declare function CardBody({ className, ...rest }: CardBodyProps): import("react/jsx-runtime").JSX.Element;
+export type CardHeaderProps = ComponentProps<"div">;
+declare function CardHeader({ className, ...rest }: CardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export type CardToolbarProps = ComponentProps<"div">;
+declare function CardToolbar({ className, ...rest }: CardToolbarProps): import("react/jsx-runtime").JSX.Element;
 export interface CardTitleProps extends ComponentProps<"h3"> {
     /** Leading icon. */
     icon?: IconProp;
@@ -41,6 +47,8 @@ declare function CardActions({ className, ...rest }: CardActionsProps): import("
 export declare const Card: typeof CardRoot & {
     Container: typeof CardContainer;
     Body: typeof CardBody;
+    Header: typeof CardHeader;
+    Toolbar: typeof CardToolbar;
     Title: typeof CardTitle;
     Description: typeof CardDescription;
     Actions: typeof CardActions;

package/dist/Card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,2CAOnF;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,2CAYX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAClD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC1D,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AACD,iBAAS,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAOxE;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AACvD,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAEpE;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,eAAO,MAAM,IAAI;;;;;;CAMf,CAAC"}
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../src/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAAc,KAAK,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,cAAc,CAAC,KAAK,CAAC;IAC/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,iBAAS,aAAa,CAAC,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,kBAAkB,2CAOnF;AAED,MAAM,WAAW,SAAU,SAAQ,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,sCAAsC;IACtC,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iCAAiC;IACjC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,uCAAuC;IACvC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,8EAA8E;IAC9E,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,mCAAmC;IACnC,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB;AAED;;;;GAIG;AACH,iBAAS,QAAQ,CAAC,EAChB,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,KAAK,EACL,WAAW,EACX,OAAO,EACP,OAAO,EACP,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,SAAS,2CAoBX;AAED,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAClD,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,aAAa,2CAEtD;AAED,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACpD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,eAAe,2CAE1D;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,MAAM,WAAW,cAAe,SAAQ,cAAc,CAAC,IAAI,CAAC;IAC1D,oBAAoB;IACpB,IAAI,CAAC,EAAE,QAAQ,CAAC;CACjB;AACD,iBAAS,SAAS,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,2CAOxE;AAED,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,GAAG,CAAC,CAAC;AACvD,iBAAS,eAAe,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,2CAEpE;AAED,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AACrD,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CAE5D;AAED,eAAO,MAAM,IAAI;;;;;;;;CAQf,CAAC"}

package/dist/PropertyList.d.ts

@@ -0,0 +1,44 @@
+import { ComponentProps, ReactNode } from 'react';
+export interface PropertyListProps extends Omit<ComponentProps<"section">, "title"> {
+    striped?: boolean;
+    /** Reveals a copy button on every item's value cell. Per-item `copyable`
+     *  on `<PropertyList.Item>` opts in for individual rows. */
+    copyable?: boolean;
+    /** Collapses the whole section when every item rendered the auto em-dash
+     *  fallback for an empty value. */
+    hideIfAllEmpty?: boolean;
+    /** Optional section heading rendered as `<h3 class="property-list-title">`
+     *  above the items grid. */
+    title?: ReactNode;
+}
+declare function PropertyListRoot({ striped, copyable, hideIfAllEmpty, title, className, children, ...rest }: PropertyListProps): import("react/jsx-runtime").JSX.Element;
+export interface PropertyListItemProps extends Omit<ComponentProps<"dd">, "title" | "label"> {
+    label?: ReactNode;
+    value?: ReactNode;
+    /** Right-aligns the value cell + applies `tabular-nums`. Mirrors `Table.Cell.numeric`. */
+    numeric?: boolean;
+    /** Opts this row into the copy affordance regardless of list-level `copyable`. */
+    copyable?: boolean;
+    /** Overrides the text the copy button writes to the clipboard. */
+    copyValue?: string;
+}
+declare function PropertyListItem({ label, value, numeric, copyable, copyValue, children, ...rest }: PropertyListItemProps): import("react/jsx-runtime").JSX.Element;
+export type PropertyListLabelProps = ComponentProps<"dt">;
+declare function PropertyListLabel({ className, ...rest }: PropertyListLabelProps): import("react/jsx-runtime").JSX.Element;
+export interface PropertyListValueProps extends ComponentProps<"dd"> {
+    numeric?: boolean;
+    copyable?: boolean;
+    /** Marks the cell as carrying an auto-rendered em-dash. The list-level
+     *  `hideIfAllEmpty` collapses the section when every value is empty. */
+    empty?: boolean;
+    /** Overrides the text the copy button writes to the clipboard. */
+    copyValue?: string;
+}
+declare function PropertyListValue({ numeric, copyable, empty, copyValue, className, children, ...rest }: PropertyListValueProps): import("react/jsx-runtime").JSX.Element;
+export declare const PropertyList: typeof PropertyListRoot & {
+    Item: typeof PropertyListItem;
+    Label: typeof PropertyListLabel;
+    Value: typeof PropertyListValue;
+};
+export {};
+//# sourceMappingURL=PropertyList.d.ts.map

package/dist/PropertyList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PropertyList.d.ts","sourceRoot":"","sources":["../src/PropertyList.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,cAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA+C9E,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,OAAO,CAAC;IACjF,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;gEAC4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;uCACmC;IACnC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB;gCAC4B;IAC5B,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,iBAAS,gBAAgB,CAAC,EACxB,OAAO,EACP,QAAQ,EACR,cAAc,EACd,KAAK,EACL,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,iBAAiB,2CAoBnB;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC1F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,0FAA0F;IAC1F,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kFAAkF;IAClF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD,iBAAS,gBAAgB,CAAC,EACxB,KAAK,EACL,KAAK,EACL,OAAO,EACP,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,qBAAqB,2CAmBvB;AAED,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,IAAI,CAAC,CAAC;AAC1D,iBAAS,iBAAiB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE,EAAE,sBAAsB,2CAExE;AAED,MAAM,WAAW,sBAAuB,SAAQ,cAAc,CAAC,IAAI,CAAC;IAClE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;4EACwE;IACxE,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,iBAAiB,CAAC,EACzB,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,EACT,SAAS,EACT,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,sBAAsB,2CA2CxB;AAED,eAAO,MAAM,YAAY;;;;CAIvB,CAAC"}

package/dist/admin.scoped.css

@@ -1,7 +1,5 @@
 /*! @aortl/admin-css scoped variant — @scope (._ao-admin-root); admin classes prefixed with _ao-. */
 /*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
-@layer properties;
-@layer theme, base, components, utilities;
 @font-face {
   font-family: "IBM Plex Sans";
   font-style: normal;
@@ -50,6 +48,26 @@
   src: url(https://fonts.gstatic.com/s/ibmplexmono/v20/-F6qfjptAgt5VM-kVkqdyU8n3twJwlBFgg.woff2) format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
+@property --tw-rotate-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-y {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-rotate-z {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-x {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-skew-y {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-ordinal {
   syntax: "*";
   inherits: false;
@@ -70,6 +88,28 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-leading {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-font-weight {
+  syntax: "*";
+  inherits: false;
+}
+@property --tw-border-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
+@property --tw-duration {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-shadow {
   syntax: "*";
   inherits: false;
@@ -135,28 +175,6 @@
   inherits: false;
   initial-value: 0 0 #0000;
 }
-@property --tw-leading {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-font-weight {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-outline-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-duration {
-  syntax: "*";
-  inherits: false;
-}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;
@@ -177,6 +195,24 @@
   inherits: false;
 }
 @scope (._ao-admin-root) {
+:scope :where(
+  h1, h2, h3, h4, h5, h6,
+  p, a,
+  ul, ol, li, dl, dt, dd,
+  blockquote, pre, code,
+  button, input, textarea, select, label, fieldset, legend,
+  table, thead, tbody, tfoot, tr, th, td
+) {
+  font-family: inherit;
+  font-style: inherit;
+  font-variant: normal;
+  font-weight: inherit;
+  color: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+  text-decoration: inherit;
+  line-height: inherit;
+}
 :scope {
   color-scheme: light dark;
 }
@@ -188,11 +224,21 @@
 }
 @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     :scope, :scope *, :scope::before, :scope ::before, :scope::after, :scope ::after, :scope::backdrop, :scope ::backdrop {
+      --tw-rotate-x: initial;
+      --tw-rotate-y: initial;
+      --tw-rotate-z: initial;
+      --tw-skew-x: initial;
+      --tw-skew-y: initial;
       --tw-ordinal: initial;
       --tw-slashed-zero: initial;
       --tw-numeric-figure: initial;
       --tw-numeric-spacing: initial;
       --tw-numeric-fraction: initial;
+      --tw-leading: initial;
+      --tw-font-weight: initial;
+      --tw-border-style: solid;
+      --tw-outline-style: solid;
+      --tw-duration: initial;
       --tw-shadow: 0 0 #0000;
       --tw-shadow-color: initial;
       --tw-shadow-alpha: 100%;
@@ -207,11 +253,6 @@
       --tw-ring-offset-width: 0px;
       --tw-ring-offset-color: #fff;
       --tw-ring-offset-shadow: 0 0 #0000;
-      --tw-leading: initial;
-      --tw-font-weight: initial;
-      --tw-border-style: solid;
-      --tw-outline-style: solid;
-      --tw-duration: initial;
       --tw-translate-x: 0;
       --tw-translate-y: 0;
       --tw-translate-z: 0;
@@ -236,6 +277,7 @@
     --text-xl--line-height: calc(1.75 / 1.25);
     --font-weight-medium: 500;
     --font-weight-semibold: 600;
+    --font-weight-bold: 700;
     --tracking-wide: 0.025em;
     --leading-tight: 1.25;
     --leading-snug: 1.375;
@@ -1124,6 +1166,101 @@
     -webkit-user-select: none;
     user-select: none;
   }
+:scope._ao-property-list, :scope ._ao-property-list {
+    display: flex;
+    flex-direction: column;
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    color: var(--color-text);
+  }
+:scope._ao-property-list-title, :scope ._ao-property-list-title {
+    margin-bottom: calc(var(--spacing) * 2);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+    --tw-font-weight: var(--font-weight-bold);
+    font-weight: var(--font-weight-bold);
+    color: var(--color-text);
+  }
+:scope._ao-property-list-items, :scope ._ao-property-list-items {
+    display: grid;
+    grid-template-columns: max-content 1fr;
+  }
+:scope._ao-property-list-label, :scope ._ao-property-list-label, :scope._ao-property-list-value, :scope ._ao-property-list-value {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    min-height: 2rem;
+  }
+:scope._ao-property-list-label, :scope ._ao-property-list-label {
+    color: var(--color-text-muted);
+  }
+:scope._ao-property-list-value, :scope ._ao-property-list-value {
+    gap: 0.5rem;
+    min-width: 0;
+  }
+:scope._ao-property-list-value-numeric, :scope ._ao-property-list-value-numeric {
+    justify-content: flex-end;
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
+  }
+:scope._ao-property-list-striped dt:nth-of-type(2n + 2), :scope ._ao-property-list-striped dt:nth-of-type(2n + 2), :scope._ao-property-list-striped dd:nth-of-type(2n + 2), :scope ._ao-property-list-striped dd:nth-of-type(2n + 2) {
+    background-color: var(--color-surface-muted);
+  }
+:scope._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))), :scope ._ao-property-list-hide-if-empty:not(:has(._ao-property-list-value:not(._ao-property-list-value-empty))) {
+    display: none;
+  }
+:scope._ao-property-list-copy, :scope ._ao-property-list-copy {
+    margin-left: auto;
+    display: inline-flex;
+    cursor: pointer;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+    background-color: transparent;
+    color: var(--color-text-muted);
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-text);
+      }
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+    }
+    &:focus-visible {
+      outline-offset: 2px;
+    }
+    &:focus-visible {
+      outline-color: var(--color-primary);
+    }
+    display: none;
+    flex-shrink: 0;
+    padding: 0.125rem;
+    transition: opacity 100ms ease, color 100ms ease;
+  }
+:scope._ao-property-list-copyable ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-copy, :scope._ao-property-list-value-copyable ._ao-property-list-copy, :scope ._ao-property-list-value-copyable ._ao-property-list-copy {
+    display: inline-flex;
+    opacity: 0;
+    pointer-events: none;
+  }
+:scope._ao-property-list-copyable ._ao-property-list-label:hover + ._ao-property-list-value ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-label:hover + ._ao-property-list-value ._ao-property-list-copy, :scope._ao-property-list-copyable ._ao-property-list-value:hover ._ao-property-list-copy, :scope ._ao-property-list-copyable ._ao-property-list-value:hover ._ao-property-list-copy, :scope._ao-property-list-label:has(+ ._ao-property-list-value-copyable):hover + ._ao-property-list-value ._ao-property-list-copy, :scope ._ao-property-list-label:has(+ ._ao-property-list-value-copyable):hover + ._ao-property-list-value ._ao-property-list-copy, :scope._ao-property-list-value-copyable:hover ._ao-property-list-copy, :scope ._ao-property-list-value-copyable:hover ._ao-property-list-copy, :scope._ao-property-list-copy:focus-visible, :scope ._ao-property-list-copy:focus-visible, :scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied] {
+    opacity: 1;
+    pointer-events: auto;
+  }
+:scope._ao-property-list-copy ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy ._ao-property-list-copy-icon-copied {
+    display: none;
+  }
+:scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon {
+    display: none;
+  }
+:scope._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied, :scope ._ao-property-list-copy[data-copied] ._ao-property-list-copy-icon-copied {
+    display: inline-flex;
+  }
+:scope._ao-property-list-copy[data-copied], :scope ._ao-property-list-copy[data-copied] {
+    color: var(--color-success);
+  }
 :scope._ao-btn, :scope ._ao-btn {
     display: inline-flex;
     cursor: pointer;
@@ -1997,6 +2134,18 @@
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
   }
+:scope._ao-card-header, :scope ._ao-card-header {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+  }
+:scope._ao-card-toolbar, :scope ._ao-card-toolbar {
+    margin-top: calc(var(--spacing) * -0.5);
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+  }
 :scope._ao-card-description, :scope ._ao-card-description {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -3446,9 +3595,6 @@
 :scope._ao-block, :scope ._ao-block {
     display: block;
   }
-:scope._ao-contents, :scope ._ao-contents {
-    display: contents;
-  }
 :scope._ao-grid, :scope ._ao-grid {
     display: grid;
   }
@@ -3464,6 +3610,9 @@
 :scope._ao-flex-1, :scope ._ao-flex-1 {
     flex: 1;
   }
+:scope._ao-transform, :scope ._ao-transform {
+    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
+  }
 :scope._ao-text-right, :scope ._ao-text-right {
     text-align: right;
   }
@@ -3471,10 +3620,6 @@
     --tw-numeric-spacing: tabular-nums;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
-:scope._ao-shadow, :scope ._ao-shadow {
-    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
 :scope._ao-select-all, :scope ._ao-select-all {
     -webkit-user-select: all;
     user-select: all;

package/dist/index.cjs

@@ -697,18 +697,18 @@ function CardContainer({ bordered, compact, className, ...rest }) {
 * an optional title (with icon), description, children, and actions. For
 * anything outside that shape, use `<Card.Container>` and compose by hand.
 */
-function CardRoot({ bordered, compact, icon, title, description, actions, className, children, ...rest }) {
-	const hasTitle = icon !== void 0 || title !== void 0;
+function CardRoot({ bordered, compact, icon, title, description, toolbar, actions, className, children, ...rest }) {
+	const titleEl = icon !== void 0 || title !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
+		icon,
+		children: title
+	}) : null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardContainer, {
 		bordered,
 		compact,
 		className,
 		...rest,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardBody, { children: [
-			hasTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardTitle, {
-				icon,
-				children: title
-			}) : null,
+			toolbar !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CardHeader, { children: [titleEl, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardToolbar, { children: toolbar })] }) : titleEl,
 			description !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardDescription, { children: description }) : null,
 			children,
 			actions !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CardActions, { children: actions }) : null
@@ -721,6 +721,18 @@ function CardBody({ className, ...rest }) {
 		...rest
 	});
 }
+function CardHeader({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("card-header", className),
+		...rest
+	});
+}
+function CardToolbar({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className: cn("card-toolbar", className),
+		...rest
+	});
+}
 function CardTitle({ icon, className, children, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("h3", {
 		className: cn("card-title", className),
@@ -743,6 +755,8 @@ function CardActions({ className, ...rest }) {
 var Card = Object.assign(CardRoot, {
 	Container: CardContainer,
 	Body: CardBody,
+	Header: CardHeader,
+	Toolbar: CardToolbar,
 	Title: CardTitle,
 	Description: CardDescription,
 	Actions: CardActions
@@ -1153,6 +1167,117 @@ var Tooltip = Object.assign(TooltipShorthand, {
 	Popup: TooltipPopup
 });
 //#endregion
+//#region src/PropertyList.tsx
+function CopyGlyph({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M7 7m0 2a2 2 0 0 1 2 -2h8a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-8a2 2 0 0 1 -2 -2z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M15 7v-2a2 2 0 0 0 -2 -2h-8a2 2 0 0 0 -2 2v8a2 2 0 0 0 2 2h2" })]
+	});
+}
+function CheckGlyph({ className }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: "14",
+		height: "14",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M5 12l5 5l10 -10" })
+	});
+}
+function PropertyListRoot({ striped, copyable, hideIfAllEmpty, title, className, children, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+		className: cn([
+			"property-list",
+			striped && "property-list-striped",
+			copyable && "property-list-copyable",
+			hideIfAllEmpty && "property-list-hide-if-empty"
+		], className),
+		...rest,
+		children: [title !== void 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+			className: cn("property-list-title", void 0),
+			children: title
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dl", {
+			className: cn("property-list-items", void 0),
+			children
+		})]
+	});
+}
+function isEmptyValue(value) {
+	if (value == null) return true;
+	if (typeof value === "string") return value.trim() === "";
+	return false;
+}
+function PropertyListItem({ label, value, numeric, copyable, copyValue, children, ...rest }) {
+	if (children !== void 0) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
+	const empty = isEmptyValue(value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PropertyListLabel, { children: label }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PropertyListValue, {
+		numeric,
+		copyable,
+		empty,
+		copyValue: copyValue ?? (typeof value === "string" ? value : void 0),
+		...rest,
+		children: empty ? "—" : value
+	})] });
+}
+function PropertyListLabel({ className, ...rest }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+		className: cn("property-list-label", className),
+		...rest
+	});
+}
+function PropertyListValue({ numeric, copyable, empty, copyValue, className, children, ...rest }) {
+	const ddRef = (0, react.useRef)(null);
+	const [copied, setCopied] = (0, react.useState)(false);
+	async function handleCopy() {
+		const text = copyValue ?? ddRef.current?.textContent?.trim() ?? "";
+		if (!text) return;
+		try {
+			await navigator.clipboard.writeText(text);
+			setCopied(true);
+			setTimeout(() => setCopied(false), 1200);
+		} catch {}
+	}
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dd", {
+		ref: ddRef,
+		className: cn([
+			"property-list-value",
+			numeric && "property-list-value-numeric",
+			copyable && "property-list-value-copyable",
+			empty && "property-list-value-empty"
+		], className),
+		...rest,
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			"aria-label": "Copy",
+			className: cn("property-list-copy", void 0),
+			onClick: handleCopy,
+			"data-copied": copied ? "true" : void 0,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CopyGlyph, { className: cn("property-list-copy-icon", void 0) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckGlyph, { className: cn("property-list-copy-icon-copied", void 0) })]
+		})]
+	});
+}
+var PropertyList = Object.assign(PropertyListRoot, {
+	Item: PropertyListItem,
+	Label: PropertyListLabel,
+	Value: PropertyListValue
+});
+//#endregion
 //#region src/Table.tsx
 function TableRoot({ striped, bordered, relaxed, sticky, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("table", {
@@ -1403,6 +1528,7 @@ exports.Menu = Menu;
 exports.Navbar = Navbar;
 exports.Pagination = Pagination;
 exports.Progress = Progress;
+exports.PropertyList = PropertyList;
 exports.Radio = Radio;
 exports.RadioGroup = RadioGroup;
 exports.Select = Select;