@astryxdesign/core 0.1.2 → 0.1.3-canary.102854d

package/dist/VisuallyHidden/VisuallyHidden.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VisuallyHidden.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/VisuallyHidden.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,KAAK,SAAS,EAAW,MAAM,OAAO,CAAC;AAChF,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C;;;;;;GAMG;AACH,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAC/C,SAAS,CAAC,WAAW,CAAC,EACtB,WAAW,GAAG,OAAO,CACtB;IACC,6CAA6C;IAC7C,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;IAE7B,yEAAyE;IACzE,QAAQ,EAAE,SAAS,CAAC;IAEpB;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,WAAW,CAAC;CAClB;AAyBD;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,cAAc,CAAC,EAC7B,QAAQ,EACR,EAAE,EAAE,OAAgB,EACpB,GAAG,EACH,GAAG,KAAK,EACT,EAAE,mBAAmB,0FAarB;yBAlBe,cAAc"}

package/dist/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,65 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file VisuallyHidden.tsx
+ * @input Uses React createElement/ElementType, stylex
+ * @output Exports VisuallyHidden component and VisuallyHiddenProps
+ * @position Accessibility primitive; renders content in the a11y tree while
+ *   hiding it visually (icon-only labels, aria-live regions, SR-only context)
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ * - /packages/core/src/VisuallyHidden/VisuallyHidden.test.tsx
+ * - /apps/storybook/stories/VisuallyHidden.stories.tsx
+ */
+import { createElement } from 'react';
+import * as stylex from '@stylexjs/stylex';
+
+/**
+ * VisuallyHidden is deliberately styling-free: it exists to *not* be seen, so it
+ * intentionally omits `xstyle`/`className`/`style`. The clip block is fixed and
+ * non-overridable — styling a visually-hidden node is always a mistake. The
+ * accessibility pass-throughs from `BaseProps` (`aria-*`, `role`, `id`,
+ * `data-*`, event handlers) remain, since the live-region use case needs them.
+ */
+
+/**
+ * Renders its children in the accessibility tree while hiding them visually.
+ *
+ * Use for content that assistive technology must perceive but sighted users
+ * should not see: accessible names for icon-only controls, `aria-live`
+ * announcement regions, and supplementary screen-reader context.
+ *
+ * @example
+ * ```
+ * // Accessible name for an icon-only button
+ * <IconButton icon="trash" label="">
+ *   <VisuallyHidden>Delete incident</VisuallyHidden>
+ * </IconButton>
+ *
+ * // Live region for announcements
+ * <VisuallyHidden as="div" aria-live="polite">
+ *   {`Moved ${task} to ${column}`}
+ * </VisuallyHidden>
+ * ```
+ */
+export function VisuallyHidden({
+  children,
+  as: element = 'span',
+  ref,
+  ...props
+}) {
+  return /*#__PURE__*/createElement(element, {
+    ref: ref,
+    // Spread consumer props (aria-*, role, id, data-*, handlers) first, then
+    // the fixed clip styles, so the visually-hidden class can never be
+    // displaced. There is no consumer className/style to merge — by design.
+    ...props,
+    ...{
+      className: "x10l6tqk x1i1rx1s xjm9jq1 xkdpibf x1717udv xb3r6kr xzpqnlu xuxw1ft xng3xce x13vifvy x1o0tod x47corl x87ps6o"
+    }
+  }, children);
+}
+VisuallyHidden.displayName = 'VisuallyHidden';

package/dist/VisuallyHidden/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * @input Imports from VisuallyHidden.tsx
+ * @output Exports VisuallyHidden component and props type
+ * @position Package entry point for VisuallyHidden
+ *
+ * SYNC: When modified, update /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ */
+export { VisuallyHidden } from './VisuallyHidden';
+export type { VisuallyHiddenProps } from './VisuallyHidden';
+//# sourceMappingURL=index.d.ts.map

package/dist/VisuallyHidden/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/VisuallyHidden/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EAAC,mBAAmB,EAAC,MAAM,kBAAkB,CAAC"}

package/dist/VisuallyHidden/index.js

@@ -0,0 +1,13 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports from VisuallyHidden.tsx
+ * @output Exports VisuallyHidden component and props type
+ * @position Package entry point for VisuallyHidden
+ *
+ * SYNC: When modified, update /packages/core/src/VisuallyHidden/VisuallyHidden.doc.mjs
+ */
+export { VisuallyHidden } from "./VisuallyHidden.js";

package/dist/astryx.css

@@ -14,6 +14,8 @@
   @property --x-counterReset { syntax: "*"; inherits: false;}
   @property --x-fontSize { syntax: "*"; inherits: false;}
   @property --x-gap { syntax: "*"; inherits: false;}
+  @property --x-gridAutoRows { syntax: "*"; inherits: false;}
+  @property --x-gridTemplateColumns { syntax: "*"; inherits: false;}
   @property --x-height { syntax: "*"; inherits: false;}
   @property --x-left { syntax: "*"; inherits: false;}
   @property --x-marginInline { syntax: "*"; inherits: false;}
@@ -21,6 +23,7 @@
   @property --x-maxWidth { syntax: "*"; inherits: false;}
   @property --x-minHeight { syntax: "*"; inherits: false;}
   @property --x-minWidth { syntax: "*"; inherits: false;}
+  @property --x-paddingInlineStart { syntax: "*"; inherits: false;}
   @property --x-right { syntax: "*"; inherits: false;}
   @property --x-top { syntax: "*"; inherits: false;}
   @property --x-transform { syntax: "*"; inherits: false;}
@@ -253,6 +256,7 @@
   @media (hover: hover){.x1pkcbo2.x1pkcbo2:hover{--table-row-overlay:var(--color-overlay-hover)}}
   .xln7xf2:not(#\#){font:inherit}
   .x10a8y8t:not(#\#){inset:0}
+  .x1anvkwx:not(#\#){inset:auto}
   .xh3736h:not(#\#){inset:unset}
   .xkdpibf:not(#\#){margin:-1px}
   .x1ghz6dp:not(#\#){margin:0}
@@ -410,6 +414,7 @@
   .xq2gx43:not(#\#):not(#\#){transition:none}
   .x1ey1afo:not(#\#):not(#\#){transition:opacity var(--duration-fast)}
   .x1ob6yzd:not(#\#):not(#\#){transition:transform var(--duration-fast) var(--ease-standard)}
+  .xr21g96.xr21g96:where(.x1g2q90y:focus-visible *):not(#\#):not(#\#){outline:2px solid var(--color-accent)}
   .x6q1khz:focus-within:not(#\#):not(#\#){border-color:var(--color-accent)}
   .xk2sxw7:focus-within:not(#\#):not(#\#){border-color:var(--color-error)}
   .xyq33ac:focus-within:not(#\#):not(#\#){border-color:var(--color-success)}
@@ -442,6 +447,7 @@
   .x1bv1mxo:not(#\#):not(#\#):not(#\#){-webkit-mask-image:linear-gradient(to bottom,transparent,black 36px)}
   .xo9xo30:not(#\#):not(#\#):not(#\#){-webkit-mask-image:linear-gradient(to bottom,transparent,black 48px)}
   .x5lxg6s:not(#\#):not(#\#):not(#\#){-webkit-overflow-scrolling:touch}
+  .xpdipgo:not(#\#):not(#\#):not(#\#){-webkit-touch-callout:none}
   .x1pha0wt:not(#\#):not(#\#):not(#\#){align-items:baseline}
   .x6s0dn4:not(#\#):not(#\#):not(#\#){align-items:center}
   .xpqajaz:not(#\#):not(#\#):not(#\#){align-items:end}
@@ -737,6 +743,7 @@
   .xv8on6e:not(#\#):not(#\#):not(#\#){font-weight:var(--text-supporting-weight)}
   .xu6a5m6:not(#\#):not(#\#):not(#\#){grid-auto-columns:1fr}
   .x1mt1orb:not(#\#):not(#\#):not(#\#){grid-auto-flow:column}
+  .xhij9v2:not(#\#):not(#\#):not(#\#){grid-auto-rows:var(--x-gridAutoRows)}
   .xcrlgei:not(#\#):not(#\#):not(#\#){grid-column-start:1}
   .x1agbcgv:not(#\#):not(#\#):not(#\#){grid-row-start:1}
   .x134kloy:not(#\#):not(#\#):not(#\#){grid-template-columns:1fr auto 1fr}
@@ -745,6 +752,7 @@
   .x1wthsqz:not(#\#):not(#\#):not(#\#){grid-template-columns:auto repeat(7,1fr)}
   .x1mzazjb:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(7,1fr)}
   .x189bvgu:not(#\#):not(#\#):not(#\#){grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
+  .xqketvx:not(#\#):not(#\#):not(#\#){grid-template-columns:var(--x-gridTemplateColumns)}
   .xihq33y:not(#\#):not(#\#):not(#\#){grid-template-rows:0fr}
   .x1tu4anv:not(#\#):not(#\#):not(#\#){grid-template-rows:1fr}
   .xtijo5x:not(#\#):not(#\#):not(#\#){inset-inline-end:0}
@@ -862,6 +870,7 @@
   .x31w388:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-6)}
   .xchaq28:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-7)}
   .x1j3hnjz:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--spacing-8)}
+  .xnvo3vl:not(#\#):not(#\#):not(#\#){padding-inline-start:var(--x-paddingInlineStart)}
   .x67bb7w:not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .x47corl:not(#\#):not(#\#):not(#\#){pointer-events:none}
   .x1tsffl5:not(#\#):not(#\#):not(#\#){position-anchor:--outline-active}
@@ -941,6 +950,7 @@
   .x1ahifba:not(#\#):not(#\#):not(#\#){transition-delay:0s}
   .x10b1n17:not(#\#):not(#\#):not(#\#){transition-delay:var(--duration-fast)}
   .x11bq7d0:not(#\#):not(#\#):not(#\#){transition-duration:.06s}
+  .xx6bhzk:not(#\#):not(#\#):not(#\#){transition-duration:.15s}
   .x13dflua:not(#\#):not(#\#):not(#\#){transition-duration:.2s}
   .xjd9b36:not(#\#):not(#\#):not(#\#){transition-duration:1ms}
   .x2rcmwa:not(#\#):not(#\#):not(#\#){transition-duration:var(--duration-fast-max)}
@@ -969,6 +979,7 @@
   .x1wbls7o:not(#\#):not(#\#):not(#\#){transition-property:opacity,background-color,transform}
   .xnpjden:not(#\#):not(#\#):not(#\#){transition-property:opacity,background-color}
   .x1kx2cm7:not(#\#):not(#\#):not(#\#){transition-property:opacity,box-shadow}
+  .xsm4mo9:not(#\#):not(#\#):not(#\#){transition-property:opacity,display,overlay}
   .x1apppo2:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,max-width}
   .x4bbghf:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform,overlay,display}
   .x6o7n8i:not(#\#):not(#\#):not(#\#){transition-property:opacity,transform}
@@ -976,6 +987,7 @@
   .x19991ni:not(#\#):not(#\#):not(#\#){transition-property:opacity}
   .x1xuz8iz:not(#\#):not(#\#):not(#\#){transition-property:top,height}
   .x18dpk69:not(#\#):not(#\#):not(#\#){transition-property:transform,background-color}
+  .xefglzl:not(#\#):not(#\#):not(#\#){transition-property:transform,color,background-color}
   .xh3q6i0:not(#\#):not(#\#):not(#\#){transition-property:transform,width,height}
   .x11xpdln:not(#\#):not(#\#):not(#\#){transition-property:transform}
   .xxrbq2n:not(#\#):not(#\#):not(#\#){transition-property:width}
@@ -1003,6 +1015,7 @@
   .x6cuj84:not(#\#):not(#\#):not(#\#){z-index:500}
   .x1q2oy4v:not(#\#):not(#\#):not(#\#){z-index:9999}
   .x1v2claj.x1v2claj:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){opacity:1}
+  .xs4y3kv.xs4y3kv:where(.x1g2q90y:focus-visible *):not(#\#):not(#\#):not(#\#){outline-offset:2px}
   .x3730vf.x3730vf:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){pointer-events:auto}
   .xuqivmr.xuqivmr:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){transform:translateY(0)}
   .x7v6acp.x7v6acp:where(.x84s7jz:focus-within *):not(#\#):not(#\#):not(#\#){visibility:visible}
@@ -1024,6 +1037,10 @@
   .xttggg:is([dir="rtl"] *):not(#\#):not(#\#):not(#\#){transform:translateX(100%)}
   .x9cjr8z:popover-open:not(#\#):not(#\#):not(#\#){transform:translateY(0)}
   .x1rm9qnc:focus-within:not(#\#):not(#\#):not(#\#){z-index:1}
+  .x1vej5at:has(+ [popover] + [popover]:last-child):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
+  .xxd14kb:has(+ [popover]:last-child):not(#\#):not(#\#):not(#\#){border-end-end-radius:var(--radius-element)}
+  .x1ir7nn6:has(+ [popover] + [popover]:last-child):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
+  .xpufgd0:has(+ [popover]:last-child):not(#\#):not(#\#):not(#\#){border-start-end-radius:var(--radius-element)}
   .x92e2el:has(> [data-astryx-edge-comp]:last-child):not(#\#):not(#\#):not(#\#){margin-inline-end:var(--x-4drmnv)}
   .x1kftj4p:has(> [data-astryx-edge-comp]:first-child):not(#\#):not(#\#):not(#\#){margin-inline-start:var(--x-126w13d)}
   .xdjuwb3:has(:focus-visible):not(#\#):not(#\#):not(#\#){outline-offset:2px}
@@ -1045,6 +1062,7 @@
   .x1wzlfcn:last-child:not(#\#):not(#\#):not(#\#){padding-inline-end:max(var(--container-padding-inline-end,var(--spacing-4)),var(--spacing-2))}
   .x1dnou9g:nth-child(even):not(#\#):not(#\#):not(#\#){background-color:var(--color-background-muted)}
   .x1uwx2nv:hover:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
+  .x1cqbx0l:hover:not(#\#):not(#\#):not(#\#){color:var(--color-icon-primary)}
   .x1c52tdz:focus:not(#\#):not(#\#):not(#\#){background-color:var(--color-overlay-hover)}
   .x1rsz1da:focus:not(#\#):not(#\#):not(#\#){clip-path:none}
   .xodanix:focus:not(#\#):not(#\#):not(#\#){inset-inline-start:var(--spacing-2)}
@@ -1101,6 +1119,9 @@
   @media (hover: hover){.x8o3jvd.x8o3jvd:hover:not(#\#):not(#\#):not(#\#){background-image:none}}
   @media (hover: hover){.xw6ruzt.xw6ruzt:hover:not(#\#):not(#\#):not(#\#){box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-accent) 20%,transparent)}}
   @media (hover: hover){.xhouywz.xhouywz:hover:not(#\#):not(#\#):not(#\#){box-shadow:var(--shadow-med)}}
+  @media (hover: hover){.x17qfo7y.x17qfo7y:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-accent),var(--color-tint-hover) 15%)}}
+  @media (hover: hover){.x4z56r7.x4z56r7:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-primary),var(--color-tint-hover) 15%)}}
+  @media (hover: hover){.x7ruf5d.x7ruf5d:hover:not(#\#):not(#\#):not(#\#){color:color-mix(in srgb,var(--color-text-secondary),var(--color-tint-hover) 15%)}}
   @media (hover: hover){.x140uwzg.x140uwzg:hover:not(#\#):not(#\#):not(#\#){color:var(--color-text-primary)}}
   @media (hover: hover){.xzomjkg.xzomjkg:hover:not(#\#):not(#\#):not(#\#){opacity:.85}}
   .xib2hle:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-color:var(--color-border-emphasized)}
@@ -1183,6 +1204,7 @@
   .x102lyln:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-lg) - 8px)}
   .x184gfjb:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-md) - 4px)}
   .xrmxcn7:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-md) - 8px)}
+  .x1u5rhrp:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-md) + var(--spacing-1))}
   .xzj98nu:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-sm) - 4px)}
   .xzydfjl:not(#\#):not(#\#):not(#\#):not(#\#){height:calc(var(--size-element-sm) - 8px)}
   .xg7h5cd:not(#\#):not(#\#):not(#\#):not(#\#){height:fit-content}