@astryxdesign/cli 0.4.5 → 0.4.6-canary.cea9ecd

package/assets/templates/blocks/components/AvatarGroup/AvatarGroupInteractive.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+'use client';
+
+import {AvatarGroup, AvatarGroupOverflow} from '@astryxdesign/core/AvatarGroup';
+import {Avatar} from '@astryxdesign/core/Avatar';
+import {Stack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+
+const MEMBERS = [
+  {name: 'Alex Daniels', key: 'alex', href: '/team/alex'},
+  {name: 'Ann Smith', key: 'ann', href: '/team/ann'},
+  {name: 'Carol Davis', key: 'carol', href: '/team/carol'},
+];
+
+const TOTAL_MEMBERS = 18;
+
+export default function AvatarGroupInteractive() {
+  return (
+    <Stack direction="vertical" gap={8}>
+      <Stack direction="vertical" gap={3}>
+        <Text type="supporting" color="secondary">
+          Reviewers
+        </Text>
+        <AvatarGroup size="lg" aria-label="Reviewers">
+          {MEMBERS.map(m => (
+            <Avatar key={m.key} name={m.name} href={m.href} />
+          ))}
+          <AvatarGroupOverflow
+            count={TOTAL_MEMBERS - MEMBERS.length}
+            onClick={() => {}}
+          />
+        </AvatarGroup>
+      </Stack>
+      <Stack direction="vertical" gap={3}>
+        <Text type="supporting" color="secondary">
+          Compact, static
+        </Text>
+        <AvatarGroup size="sm" aria-label="Attendees">
+          {MEMBERS.map(m => (
+            <Avatar key={m.key} name={m.name} />
+          ))}
+          <AvatarGroupOverflow count={TOTAL_MEMBERS - MEMBERS.length} />
+        </AvatarGroup>
+      </Stack>
+    </Stack>
+  );
+}

package/assets/templates/blocks/components/AvatarGroup/AvatarGroupShowcase.doc.mjs

@@ -6,7 +6,7 @@ export const doc = {
   name: 'AvatarGroup',
   displayName: 'Avatar Group',
   description:
-    'Overlapping avatar rows with max limit and server-side overflow count. Shows team members in a compact facepile layout.',
+    'Overlapping avatar rows with a sliced visible set and a server-side overflow count. Shows team members in a compact facepile layout.',
   isReady: true,
   isShowcase: true,
   aspectRatio: 16 / 9,

package/assets/templates/blocks/components/Breadcrumbs/BreadcrumbsCustomSeparator.tsx

@@ -2,25 +2,38 @@
 
 'use client';
 
+import * as stylex from '@stylexjs/stylex';
 import {Breadcrumbs, BreadcrumbItem} from '@astryxdesign/core/Breadcrumbs';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
+import {rtlStyles} from '@astryxdesign/core/utils';
 
+// Only a glyph the bidi algorithm does not already flip needs rtlStyles.mirror.
+// U+203A has Unicode Bidi_Mirrored=Yes, so the browser mirrors it under RTL on
+// its own and a second flip would point it back the wrong way; U+2192 has
+// Bidi_Mirrored=No and stays pointing left-to-right unless we mirror it.
 const SEPARATORS = [
-  {char: '›', label: 'Chevron'},
-  {char: '→', label: 'Arrow'},
-  {char: '·', label: 'Dot'},
+  {char: '›', label: 'Chevron', needsRtlMirror: false},
+  {char: '→', label: 'Arrow', needsRtlMirror: true},
+  {char: '·', label: 'Dot', needsRtlMirror: false},
 ];
 
 export default function BreadcrumbsCustomSeparator() {
   return (
     <Stack direction="vertical" gap={4}>
-      {SEPARATORS.map(({char, label}) => (
+      {SEPARATORS.map(({char, label, needsRtlMirror}) => (
         <Stack key={label} direction="vertical" gap={1}>
           <Text type="supporting" color="secondary">
             {label}
           </Text>
-          <Breadcrumbs separator={char}>
+          <Breadcrumbs
+            separator={
+              needsRtlMirror ? (
+                <span {...stylex.props(rtlStyles.mirror)}>{char}</span>
+              ) : (
+                char
+              )
+            }>
             <BreadcrumbItem href="/">Home</BreadcrumbItem>
             <BreadcrumbItem href="/docs">Docs</BreadcrumbItem>
             <BreadcrumbItem isCurrent>API Reference</BreadcrumbItem>

package/assets/templates/blocks/components/Selector/SelectorOptionDescriptions.doc.mjs

@@ -0,0 +1,14 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/** @type {import('@astryxdesign/cli/authoring').TemplateDoc} */
+export const doc = {
+  type: 'block',
+  exampleFor: 'Selector',
+  name: 'Selector — Option descriptions',
+  displayName: 'Selector — Option descriptions',
+  description:
+    'Options carry a description, so the dropdown draws a two-line row. The closed trigger is sized by padding, so it is the size token for a one-line value and exactly one line taller for a two-line one; both on the 4px rhythm. An InputGroup pins the row, so the value folds back onto one line there.',
+  isReady: true,
+  aspectRatio: 16 / 9,
+  componentsUsed: ['Selector', 'SelectorOption', 'InputGroup', 'Button', 'Stack'],
+};

package/assets/templates/blocks/components/Selector/SelectorOptionDescriptions.tsx

@@ -0,0 +1,76 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useState} from 'react';
+import {Selector, SelectorOption} from '@astryxdesign/core/Selector';
+import {InputGroup} from '@astryxdesign/core/InputGroup';
+import {Button} from '@astryxdesign/core/Button';
+import {Stack} from '@astryxdesign/core/Layout';
+import {LockClosedIcon, GlobeAltIcon} from '@heroicons/react/24/outline';
+
+const VISIBILITY = [
+  {
+    value: 'private',
+    label: 'Private',
+    icon: LockClosedIcon,
+    description: 'Only members can access this space and its content.',
+  },
+  {
+    value: 'public',
+    label: 'Public',
+    icon: GlobeAltIcon,
+    description: 'Anyone at the company can find and join this space.',
+  },
+];
+
+export default function SelectorOptionDescriptions() {
+  const [condensed, setCondensed] = useState<string | undefined>('private');
+  const [full, setFull] = useState<string | undefined>('private');
+  const [grouped, setGrouped] = useState<string | undefined>('private');
+
+  return (
+    <Stack direction="vertical" gap={6}>
+      <Selector
+        style={{width: 320}}
+        label="Visibility"
+        description="Default trigger: one line at the size token."
+        options={VISIBILITY}
+        value={condensed}
+        onChange={setCondensed}
+      />
+      <Selector
+        style={{width: 320}}
+        label="Visibility"
+        description="A stacked SelectorOption: the description gets its own line, and the trigger grows by exactly one line."
+        options={VISIBILITY}
+        value={full}
+        onChange={setFull}
+        renderValue={option => (
+          <SelectorOption
+            icon={option.icon}
+            label={option.label ?? option.value}
+            description={option.description}
+          />
+        )}
+      />
+      <InputGroup label="Visibility">
+        <Selector
+          label="Visibility"
+          isLabelHidden
+          options={VISIBILITY}
+          value={grouped}
+          onChange={setGrouped}
+          renderValue={option => (
+            <SelectorOption
+              icon={option.icon}
+              label={option.label ?? option.value}
+              description={option.description}
+            />
+          )}
+        />
+        <Button label="Save" />
+      </InputGroup>
+    </Stack>
+  );
+}