@lo-ink/ui 0.4.3 → 0.4.5

package/dist/Disclosure.d.ts

@@ -0,0 +1,9 @@
+import { type DetailsHTMLAttributes, type ReactNode } from "react";
+export interface DisclosureProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
+    /** The disclosure label. Keep interactive controls in the body. */
+    summary: ReactNode;
+    /** Noninteractive metadata included in the disclosure's accessible name. */
+    trailing?: ReactNode;
+}
+export declare const Disclosure: import("react").ForwardRefExoticComponent<DisclosureProps & import("react").RefAttributes<HTMLDetailsElement>>;
+//# sourceMappingURL=Disclosure.d.ts.map

package/dist/Disclosure.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Disclosure.d.ts","sourceRoot":"","sources":["../src/Disclosure.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAc,KAAK,qBAAqB,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/E,MAAM,WAAW,eAAgB,SAAQ,qBAAqB,CAAC,kBAAkB,CAAC;IAChF,mEAAmE;IACnE,OAAO,EAAE,SAAS,CAAC;IACnB,4EAA4E;IAC5E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,UAAU,gHA6BtB,CAAC"}

package/dist/Disclosure.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { classes } from "./utils.js";
+export const Disclosure = forwardRef(function Disclosure({ summary, trailing, children, className, ...props }, ref) {
+    return (_jsxs("details", { ...props, ref: ref, className: classes("lo-ui-disclosure", className), children: [_jsxs("summary", { className: "lo-ui-disclosure__summary", children: [_jsx("span", { className: "lo-ui-disclosure__label", children: summary }), trailing != null && (_jsx("span", { className: "lo-ui-disclosure__trailing", children: trailing })), _jsx("svg", { className: "lo-ui-disclosure__chevron", viewBox: "0 0 20 20", "aria-hidden": "true", focusable: "false", children: _jsx("path", { d: "m7.5 4 6 6-6 6" }) })] }), _jsx("div", { className: "lo-ui-disclosure__body", children: children })] }));
+});

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { Heading, Text, type HeadingProps, type TextProps, } from "./Typography.
 export { TextArea, type TextAreaProps } from "./TextArea.js";
 export { Surface, type SurfaceProps } from "./Surface.js";
 export { Dialog } from "./Dialog.js";
+export { Disclosure, type DisclosureProps } from "./Disclosure.js";
 export { Progress } from "./Progress.js";
 export { Tabs, type TabsProps, type TabOption } from "./Tabs.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,MAAM,EACN,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EACL,OAAO,EACP,IAAI,EACJ,KAAK,YAAY,EACjB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACvE,OAAO,EACL,QAAQ,EACR,MAAM,EACN,KAAK,qBAAqB,GAC3B,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAChE,OAAO,EACL,OAAO,EACP,IAAI,EACJ,KAAK,YAAY,EACjB,KAAK,SAAS,GACf,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,iBAAiB,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -9,5 +9,6 @@ export { Heading, Text, } from "./Typography.js";
 export { TextArea } from "./TextArea.js";
 export { Surface } from "./Surface.js";
 export { Dialog } from "./Dialog.js";
+export { Disclosure } from "./Disclosure.js";
 export { Progress } from "./Progress.js";
 export { Tabs } from "./Tabs.js";

package/dist/styles.css

@@ -513,6 +513,75 @@
   stroke-linejoin: round;
 }
 
+.lo-ui-disclosure__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--lo-space-3);
+  min-height: var(--lo-size-cell);
+  padding: 10px var(--lo-space-4);
+  font: inherit;
+  color: var(--lo-color-text);
+  cursor: pointer;
+  list-style: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.lo-ui-disclosure__summary::-webkit-details-marker {
+  display: none;
+}
+
+.lo-ui-disclosure__summary:focus-visible {
+  outline: 3px solid var(--lo-color-focus);
+  outline-offset: -3px;
+}
+
+.lo-ui-disclosure__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.lo-ui-disclosure__trailing {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 40%;
+  overflow-wrap: anywhere;
+  text-align: end;
+  color: var(--lo-color-text-secondary);
+  font-size: var(--lo-font-size-label);
+}
+
+.lo-ui-disclosure__chevron {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  fill: none;
+  stroke: var(--lo-color-text-secondary);
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.lo-ui-disclosure[open]
+  > .lo-ui-disclosure__summary
+  > .lo-ui-disclosure__chevron {
+  transform: rotate(90deg);
+}
+
+.lo-ui-disclosure:dir(rtl):not([open])
+  > .lo-ui-disclosure__summary
+  > .lo-ui-disclosure__chevron {
+  transform: scaleX(-1);
+}
+
+.lo-ui-disclosure__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lo-space-3);
+  padding: var(--lo-space-3) var(--lo-space-4) var(--lo-space-4);
+  overflow-wrap: anywhere;
+}
+
 .lo-ui-app-icon {
   width: 44px;
   height: 44px;
@@ -520,7 +589,7 @@
   overflow: hidden;
   display: inline-grid;
   place-items: center;
-  border-radius: 11px;
+  border-radius: 20%;
   color: var(--lo-color-accent-contrast);
   background: var(--lo-color-accent-fill);
   font-size: 18px;
@@ -531,14 +600,12 @@
 .lo-ui-app-icon--small {
   width: 32px;
   height: 32px;
-  border-radius: 8px;
   font-size: 14px;
 }
 
 .lo-ui-app-icon--large {
   width: 64px;
   height: 64px;
-  border-radius: 16px;
   font-size: 26px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lo-ink/ui",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "description": "Accessible React components for LO miniapps",
   "type": "module",
   "license": "MIT",

package/src/Disclosure.tsx

@@ -0,0 +1,40 @@
+import { forwardRef, type DetailsHTMLAttributes, type ReactNode } from "react";
+import { classes } from "./utils.js";
+
+export interface DisclosureProps extends DetailsHTMLAttributes<HTMLDetailsElement> {
+  /** The disclosure label. Keep interactive controls in the body. */
+  summary: ReactNode;
+  /** Noninteractive metadata included in the disclosure's accessible name. */
+  trailing?: ReactNode;
+}
+
+export const Disclosure = forwardRef<HTMLDetailsElement, DisclosureProps>(
+  function Disclosure(
+    { summary, trailing, children, className, ...props },
+    ref,
+  ) {
+    return (
+      <details
+        {...props}
+        ref={ref}
+        className={classes("lo-ui-disclosure", className)}
+      >
+        <summary className="lo-ui-disclosure__summary">
+          <span className="lo-ui-disclosure__label">{summary}</span>
+          {trailing != null && (
+            <span className="lo-ui-disclosure__trailing">{trailing}</span>
+          )}
+          <svg
+            className="lo-ui-disclosure__chevron"
+            viewBox="0 0 20 20"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path d="m7.5 4 6 6-6 6" />
+          </svg>
+        </summary>
+        <div className="lo-ui-disclosure__body">{children}</div>
+      </details>
+    );
+  },
+);

package/src/index.ts

@@ -18,5 +18,6 @@ export {
 export { TextArea, type TextAreaProps } from "./TextArea.js";
 export { Surface, type SurfaceProps } from "./Surface.js";
 export { Dialog } from "./Dialog.js";
+export { Disclosure, type DisclosureProps } from "./Disclosure.js";
 export { Progress } from "./Progress.js";
 export { Tabs, type TabsProps, type TabOption } from "./Tabs.js";

package/src/styles.css

@@ -513,6 +513,75 @@
   stroke-linejoin: round;
 }
 
+.lo-ui-disclosure__summary {
+  display: flex;
+  align-items: center;
+  gap: var(--lo-space-3);
+  min-height: var(--lo-size-cell);
+  padding: 10px var(--lo-space-4);
+  font: inherit;
+  color: var(--lo-color-text);
+  cursor: pointer;
+  list-style: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.lo-ui-disclosure__summary::-webkit-details-marker {
+  display: none;
+}
+
+.lo-ui-disclosure__summary:focus-visible {
+  outline: 3px solid var(--lo-color-focus);
+  outline-offset: -3px;
+}
+
+.lo-ui-disclosure__label {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.lo-ui-disclosure__trailing {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 40%;
+  overflow-wrap: anywhere;
+  text-align: end;
+  color: var(--lo-color-text-secondary);
+  font-size: var(--lo-font-size-label);
+}
+
+.lo-ui-disclosure__chevron {
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  fill: none;
+  stroke: var(--lo-color-text-secondary);
+  stroke-width: 1.8;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.lo-ui-disclosure[open]
+  > .lo-ui-disclosure__summary
+  > .lo-ui-disclosure__chevron {
+  transform: rotate(90deg);
+}
+
+.lo-ui-disclosure:dir(rtl):not([open])
+  > .lo-ui-disclosure__summary
+  > .lo-ui-disclosure__chevron {
+  transform: scaleX(-1);
+}
+
+.lo-ui-disclosure__body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--lo-space-3);
+  padding: var(--lo-space-3) var(--lo-space-4) var(--lo-space-4);
+  overflow-wrap: anywhere;
+}
+
 .lo-ui-app-icon {
   width: 44px;
   height: 44px;
@@ -520,7 +589,7 @@
   overflow: hidden;
   display: inline-grid;
   place-items: center;
-  border-radius: 11px;
+  border-radius: 20%;
   color: var(--lo-color-accent-contrast);
   background: var(--lo-color-accent-fill);
   font-size: 18px;
@@ -531,14 +600,12 @@
 .lo-ui-app-icon--small {
   width: 32px;
   height: 32px;
-  border-radius: 8px;
   font-size: 14px;
 }
 
 .lo-ui-app-icon--large {
   width: 64px;
   height: 64px;
-  border-radius: 16px;
   font-size: 26px;
 }