@tempoxyz/ds 0.2.5 → 0.3.0

package/dist/web/components/Separator.css

@@ -1 +1 @@
-.z-tds_2f_web-tds_2f_web_2f_separator-align-self-0{align-self:stretch}.z-tds_2f_web-tds_2f_web_2f_separator-bg-1{background-color:var(--z-tds_2f_web-color-grayAlpha-300,light-dark(#0000001a,#ffffff21))}.z-tds_2f_web-tds_2f_web_2f_separator-flex-shrink-2{flex-shrink:0}.z-tds_2f_web-tds_2f_web_2f_separator-h-3{&[data-orientation=horizontal]{height:var(--z-tds_2f_web-spacing-1,1px)}}.z-tds_2f_web-tds_2f_web_2f_separator-w-4{&[data-orientation=horizontal]{width:100%}}.z-tds_2f_web-tds_2f_web_2f_separator-min-height-5{&[data-orientation=vertical]{min-height:1em}}.z-tds_2f_web-tds_2f_web_2f_separator-w-6{&[data-orientation=vertical]{width:var(--z-tds_2f_web-spacing-1,1px)}}
+.z_tds_2f_web-3KCWGI0{color:var(--z-tds_2f_web-color-content-tertiary,light-dark(var(--z-tds_2f_web-color-neutral-shade-040,#0006),var(--z-tds_2f_web-color-neutral-tint-040,#fff6)))}.z_tds_2f_web-3KCWGI1{flex-shrink:0}.z_tds_2f_web-3KCWGI2{font-family:var(--z-tds_2f_web-typography-body-b3-fontFamily,var(--z-tds_2f_web-fontFamily-body,Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))}.z_tds_2f_web-3KCWGI3{font-size:var(--z-tds_2f_web-typography-body-b3-fontSize,12px)}.z_tds_2f_web-3KCWGI4{font-weight:var(--z-tds_2f_web-typography-body-b3-fontWeight,400)}.z_tds_2f_web-3KCWGI5{letter-spacing:var(--z-tds_2f_web-typography-body-b3-letterSpacing,.15px)}.z_tds_2f_web-3KCWGI6{line-height:var(--z-tds_2f_web-typography-body-b3-lineHeight,16px)}.z_tds_2f_web-3KCWGI7{align-items:center}.z_tds_2f_web-3KCWGI8{align-self:stretch}.z_tds_2f_web-3KCWGI9{column-gap:var(--z-tds_2f_web-spacing-16,1rem)}.z_tds_2f_web-3KCWGIa{display:flex}.z_tds_2f_web-3KCWGIb{width:100%}.z_tds_2f_web-3KCWGIc{background-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}.z_tds_2f_web-3KCWGId{flex-grow:1}.z_tds_2f_web-3KCWGIe{height:var(--z-tds_2f_web-spacing-1,1px)}.z_tds_2f_web-3KCWGIf{border-style:none}.z_tds_2f_web-3KCWGIg{margin:var(--z-tds_2f_web-spacing-0,0rem)}.z_tds_2f_web-3KCWGIh{&[data-orientation=horizontal]{height:var(--z-tds_2f_web-spacing-16,1rem)}}.z_tds_2f_web-3KCWGIi{&[data-orientation=horizontal]{position:relative}}.z_tds_2f_web-3KCWGIj{&[data-orientation=horizontal]{width:100%}}.z_tds_2f_web-3KCWGIk{&[data-orientation=horizontal]:before{background-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}}.z_tds_2f_web-3KCWGIl{&[data-orientation=horizontal]:before{content:""}}.z_tds_2f_web-3KCWGIm{&[data-orientation=horizontal]:before{height:var(--z-tds_2f_web-spacing-1,1px)}}.z_tds_2f_web-3KCWGIn{&[data-orientation=horizontal]:before{inset-inline:var(--z-tds_2f_web-spacing-0,0rem)}}.z_tds_2f_web-3KCWGIo{&[data-orientation=horizontal]:before{position:absolute}}.z_tds_2f_web-3KCWGIp{&[data-orientation=horizontal]:before{top:calc(50% - .5px)}}.z_tds_2f_web-3KCWGIq{&[data-orientation=vertical]{background-color:var(--z-tds_2f_web-color-line-secondary,light-dark(var(--z-tds_2f_web-color-neutral-shade-008,#00000014),var(--z-tds_2f_web-color-neutral-tint-008,#ffffff14)))}}.z_tds_2f_web-3KCWGIr{&[data-orientation=vertical]{min-height:1em}}.z_tds_2f_web-3KCWGIs{&[data-orientation=vertical]{width:var(--z-tds_2f_web-spacing-1,1px)}}

package/dist/web/components/Separator.d.ts

@@ -1,16 +1,21 @@
 import * as BaseUi from '@base-ui/react/separator';
-import type { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
 import type * as zyzz from 'zyzz';
 /**
  * A 1px rule that renders a `div` with `role="separator"` and a matching `aria-orientation`.
- * A vertical separator stretches to the height of its flex row, with a minimum of `1em`.
+ * A horizontal separator is 16px tall and centers its rule, so it keeps 7.5px of space on each
+ * side. A vertical separator is the 1px rule alone, and stretches to the height of its flex row,
+ * with a minimum of `1em`. With `children`, a horizontal separator centers them as a label
+ * between two rules, such as `or`.
  *
  * - Place it between thematic groups, such as menu sections or toolbar clusters.
+ * - Label it only to join two alternatives, such as two ways to sign in.
  * - Do not use separators in place of headings to structure content.
  *
  * @example
  * <Separator />
  * <Separator orientation="vertical" />
+ * <Separator>or</Separator>
  *
  * @see {@link https://base-ui.com/react/components/separator | Base UI Separator}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role | MDN separator role}
@@ -19,9 +24,18 @@ import type * as zyzz from 'zyzz';
  */
 export declare function Separator(props: Separator.Props): import("react").JSX.Element;
 export declare namespace Separator {
-    type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> & zyzz.Props.Variants<typeof styles.separator> & Pick<BaseUi.Separator.Props, 'orientation' | 'render'>;
+    type Props = Omit<ComponentPropsWithRef<'div'>, 'children'> & zyzz.Props.Variants<typeof styles.separator> & Pick<BaseUi.Separator.Props, 'orientation' | 'render'> & {
+        /**
+         * A label between two rules, such as `or`, read in place by screen readers. A vertical
+         * separator ignores it. Absent, the separator is a single rule.
+         */
+        children?: ReactNode | undefined;
+    };
 }
 declare namespace styles {
+    const label: zyzz.style.ReturnType<"react">;
+    const labeled: zyzz.style.ReturnType<"react">;
+    const rule: zyzz.style.ReturnType<"react">;
     const separator: zyzz.style.ReturnType<"react">;
 }
 export {};

package/dist/web/components/Separator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/web/components/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAA;AAClD,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,OAAO,CAAA;AAClD,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,+BAS/C;AAED,yBAAiB,SAAS,CAAC;IACzB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,SAAS,CAAC,GAC5C,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,CAAC,CAAA;CACzD;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,SAAS,gCAWrB,CAAA;CACF"}
+{"version":3,"file":"Separator.d.ts","sourceRoot":"","sources":["../../../src/web/components/Separator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAA;AAElD,OAAO,KAAK,EAAE,qBAAqB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAC7D,OAAO,KAAK,KAAK,IAAI,MAAM,MAAM,CAAA;AAGjC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,SAAS,CAAC,KAAK,+BAkB/C;AA0BD,yBAAiB,SAAS,CAAC;IACzB,KAAY,KAAK,GAAG,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC,GAChE,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,MAAM,CAAC,SAAS,CAAC,GAC5C,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,EAAE,aAAa,GAAG,QAAQ,CAAC,GAAG;QACvD;;;WAGG;QACH,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,CAAA;KACjC,CAAA;CACJ;AAED,kBAAU,MAAM,CAAC;IACR,MAAM,KAAK,gCAGjB,CAAA;IAGM,MAAM,OAAO,gCAUnB,CAAA;IAEM,MAAM,IAAI,gCAGhB,CAAA;IAKM,MAAM,SAAS,gCA4BrB,CAAA;CACF"}

package/dist/web/components/Separator.js

@@ -1,18 +1,24 @@
 
 import { Props as __zyzzProps } from 'zyzz/runtime';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as BaseUi from '@base-ui/react/separator';
+import { useRender } from '@base-ui/react/use-render';
 import { style } from '../zyzz.config.js';
 /**
  * A 1px rule that renders a `div` with `role="separator"` and a matching `aria-orientation`.
- * A vertical separator stretches to the height of its flex row, with a minimum of `1em`.
+ * A horizontal separator is 16px tall and centers its rule, so it keeps 7.5px of space on each
+ * side. A vertical separator is the 1px rule alone, and stretches to the height of its flex row,
+ * with a minimum of `1em`. With `children`, a horizontal separator centers them as a label
+ * between two rules, such as `or`.
  *
  * - Place it between thematic groups, such as menu sections or toolbar clusters.
+ * - Label it only to join two alternatives, such as two ways to sign in.
  * - Do not use separators in place of headings to structure content.
  *
  * @example
  * <Separator />
  * <Separator orientation="vertical" />
+ * <Separator>or</Separator>
  *
  * @see {@link https://base-ui.com/react/components/separator | Base UI Separator}
  * @see {@link https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/separator_role | MDN separator role}
@@ -20,12 +26,41 @@ import { style } from '../zyzz.config.js';
  * @see {@link https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html | WCAG 2.2 Info and Relationships}
  */
 export function Separator(props) {
-    const { className, vars, ...attributes } = props;
-    return (_jsx(BaseUi.Separator, { ...attributes, ...styles.separator({ className, style: props.style, vars }) }));
+    const { children, className, orientation, render, vars, ...attributes } = props;
+    // A separator hides its children from assistive technology, so a labeled one renders a plain
+    // `div` whose label screen readers read in place, between two decorative rules. Children that
+    // React renders as nothing, such as `false` from a condition, leave the separator unlabeled.
+    const labeled = children !== undefined && children !== null && typeof children !== 'boolean' && children !== '';
+    if (labeled && orientation !== 'vertical')
+        return _jsx(Labeled, { ...props });
+    return (_jsx(BaseUi.Separator, { ...attributes, ...styles.separator({ className, style: props.style, vars }), orientation: orientation, render: render }));
+}
+/** A labeled separator, in the element that `render` names, or a `div`. */
+function Labeled(props) {
+    const { children, className, orientation: _orientation, ref, render, vars, ...attributes } = props;
+    return useRender({
+        defaultTagName: 'div',
+        props: {
+            ...attributes,
+            ...styles.labeled({ className, style: props.style, vars }),
+            children: (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", ...styles.rule() }), _jsx("span", { ...styles.label(), children: children }), _jsx("span", { "aria-hidden": "true", ...styles.rule() })] })),
+        },
+        ref,
+        render,
+        // A render function reads the state of a Base UI separator, which a label keeps horizontal.
+        state: { orientation: 'horizontal' },
+    });
 }
 var styles;
 (function (styles) {
-    styles.separator = __zyzzProps.create({className:"z-tds_2f_web-tds_2f_web_2f_separator-align-self-0 z-tds_2f_web-tds_2f_web_2f_separator-bg-1 z-tds_2f_web-tds_2f_web_2f_separator-flex-shrink-2 z-tds_2f_web-tds_2f_web_2f_separator-h-3 z-tds_2f_web-tds_2f_web_2f_separator-w-4 z-tds_2f_web-tds_2f_web_2f_separator-min-height-5 z-tds_2f_web-tds_2f_web_2f_separator-w-6"});
+    styles.label = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-3KCWGI0 z_tds_2f_web-3KCWGI1 z_tds_2f_web-3KCWGI2 z_tds_2f_web-3KCWGI3 z_tds_2f_web-3KCWGI4 z_tds_2f_web-3KCWGI5 z_tds_2f_web-3KCWGI6"});
+    // The label sits 16px from each rule.
+    styles.labeled = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-3KCWGI7 z_tds_2f_web-3KCWGI8 z_tds_2f_web-3KCWGI9 z_tds_2f_web-3KCWGIa z_tds_2f_web-3KCWGI1 z_tds_2f_web-3KCWGIb"});
+    styles.rule = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-3KCWGIc z_tds_2f_web-3KCWGId z_tds_2f_web-3KCWGIe"});
+    // A horizontal separator centers its rule in a 16px box, as the labeled one does. The rule is a
+    // pseudo-element, so a separator rendered as a void element, such as `hr`, still draws it. The
+    // reset drops the border and margins that a browser gives an `hr`.
+    styles.separator = /*#__PURE__*/__zyzzProps.create({className:"z_tds_2f_web-3KCWGI8 z_tds_2f_web-3KCWGIf z_tds_2f_web-3KCWGI1 z_tds_2f_web-3KCWGIg z_tds_2f_web-3KCWGIh z_tds_2f_web-3KCWGIi z_tds_2f_web-3KCWGIj z_tds_2f_web-3KCWGIk z_tds_2f_web-3KCWGIl z_tds_2f_web-3KCWGIm z_tds_2f_web-3KCWGIn z_tds_2f_web-3KCWGIo z_tds_2f_web-3KCWGIp z_tds_2f_web-3KCWGIq z_tds_2f_web-3KCWGIr z_tds_2f_web-3KCWGIs"});
 })(styles || (styles = {}));
 //# sourceMappingURL=Separator.js.map
 import './Separator.css';

package/dist/web/components/Separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../src/web/components/Separator.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,MAAM,0BAA0B,CAAA;AAGlD,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,SAAS,CAAC,KAAsB;IAC9C,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,GAAG,UAAU,EAAE,GAAG,KAAK,CAAA;IAEhD,OAAO,CACL,KAAC,MAAM,CAAC,SAAS,OACX,UAAU,KACV,MAAM,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC,GAC7D,CACH,CAAA;AACH,CAAC;AAQD,IAAU,MAAM,CAaf;AAbD,WAAU,MAAM;IACD,gBAAS,GAAG,KAAK,CAC5B;QACE,SAAS,EAAE,SAAS;QACpB,eAAe,EAAE,eAAe;QAChC,UAAU,EAAE,WAAW;QACvB,SAAS,EAAE;YACT,kCAAkC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE;YAC1E,gCAAgC,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,KAAK,EAAE,GAAG,EAAE;SAC3E;KACF,EACD,EAAE,EAAE,EAAE,mBAAmB,EAAE,CAC5B,CAAA;AACH,CAAC,EAbS,MAAM,KAAN,MAAM,QAaf"}
+{"version":3,"file":"Separator.js","sourceRoot":"","sources":["../../../src/web/components/Separator.tsx"],"names":[],"mappings":"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"}