@astryxdesign/cli 0.1.0 → 0.1.1-canary.080d887

package/templates/blocks/components/CommandPaletteEmpty/CommandPaletteEmptyShowcase.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+import {useMemo} from 'react';
+import {CommandPalette} from '@astryxdesign/core/CommandPalette';
+import {Text} from '@astryxdesign/core/Text';
+import {createStaticSource} from '@astryxdesign/core/Typeahead';
+
+export default function CommandPaletteEmptyShowcase() {
+  const emptySource = useMemo(() => createStaticSource([]), []);
+
+  return (
+    <CommandPalette
+      isOpen
+      isInline
+      onOpenChange={() => {}}
+      searchSource={emptySource}
+      emptyBootstrapText={
+        <Text type="supporting" color="secondary">
+          No commands available yet
+        </Text>
+      }
+    />
+  );
+}

package/templates/blocks/components/CommandPaletteItem/CommandPaletteItemShowcase.tsx

@@ -2,7 +2,7 @@
 
 'use client';
 
-import {useMemo} from 'react';
+import {useMemo, type CSSProperties} from 'react';
 import {
   CommandPalette,
   CommandPaletteList,
@@ -14,13 +14,10 @@ import {Icon} from '@astryxdesign/core/Icon';
 import {createStaticSource} from '@astryxdesign/core/Typeahead';
 import {Stack} from '@astryxdesign/core/Layout';
 import type {SearchableItem} from '@astryxdesign/core/Typeahead';
-import * as stylex from '@stylexjs/stylex';
 
-const styles = stylex.create({
-  itemLabel: {
-    flexGrow: 1,
-  },
-});
+const itemLabel: CSSProperties = {
+  flexGrow: 1,
+};
 
 type CommandItem = SearchableItem<{shortcut?: string}>;
 
@@ -48,7 +45,7 @@ export default function CommandPaletteItemShowcase() {
           searchSource={source}
           renderItem={(item: CommandItem) => (
             <>
-              <Text type="body" xstyle={styles.itemLabel}>
+              <Text type="body" style={itemLabel}>
                 {item.label}
               </Text>
               {item.auxiliaryData?.shortcut && (
@@ -65,18 +62,18 @@ export default function CommandPaletteItemShowcase() {
         <CommandPaletteList>
           <CommandPaletteItem value="home" onSelect={() => {}}>
             <Icon icon="externalLink" size="sm" />
-            <Text type="body" xstyle={styles.itemLabel}>Home</Text>
+            <Text type="body" style={itemLabel}>Home</Text>
           </CommandPaletteItem>
           <CommandPaletteItem value="search" isHighlighted onSelect={() => {}}>
             <Icon icon="search" size="sm" />
-            <Text type="body" xstyle={styles.itemLabel}>Search (highlighted)</Text>
+            <Text type="body" style={itemLabel}>Search (highlighted)</Text>
           </CommandPaletteItem>
           <CommandPaletteItem value="selected" isSelected onSelect={() => {}}>
             <Icon icon="check" size="sm" />
-            <Text type="body" xstyle={styles.itemLabel}>Selected item</Text>
+            <Text type="body" style={itemLabel}>Selected item</Text>
           </CommandPaletteItem>
           <CommandPaletteItem value="disabled" isDisabled>
-            <Text type="body" xstyle={styles.itemLabel}>Disabled item</Text>
+            <Text type="body" style={itemLabel}>Disabled item</Text>
           </CommandPaletteItem>
         </CommandPaletteList>
       </Stack>

package/templates/blocks/components/ContextMenu/ContextMenuShowcase.tsx

@@ -1,22 +1,8 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {ContextMenu} from '@astryxdesign/core/ContextMenu';
 
-const styles = stylex.create({
-  area: {
-    padding: '48px',
-    borderWidth: '2px',
-    borderStyle: 'dashed',
-    borderColor: '#d1d5db',
-    borderRadius: '8px',
-    textAlign: 'center',
-    color: '#6b7280',
-    userSelect: 'none',
-  },
-});
-
 export default function ContextMenuShowcase() {
   return (
     <ContextMenu
@@ -25,7 +11,19 @@ export default function ContextMenuShowcase() {
         {label: 'Copy', onClick: () => {}},
         {label: 'Paste', onClick: () => {}},
       ]}>
-      <div {...stylex.props(styles.area)}>Right-click this area</div>
+      <div
+        style={{
+          padding: '48px',
+          borderWidth: '2px',
+          borderStyle: 'dashed',
+          borderColor: '#d1d5db',
+          borderRadius: '8px',
+          textAlign: 'center',
+          color: '#6b7280',
+          userSelect: 'none',
+        }}>
+        Right-click this area
+      </div>
     </ContextMenu>
   );
 }

package/templates/blocks/components/DateInput/DateInputDateRange.doc.mjs

@@ -4,8 +4,8 @@
 export const doc = {
   type: 'block',
   exampleFor: 'DateInput',
-  name: 'DateInput — Date Range',
-  displayName: 'DateInput — Date Range',
+  name: 'DateInput — Min/Max Constraints',
+  displayName: 'DateInput — Min/Max Constraints',
   description:
     'Date input constrained to a min/max window. Use when only certain dates are valid, like booking availability or a fiscal quarter.',
   isReady: true,

package/templates/blocks/components/Divider/DividerShowcase.tsx

@@ -4,17 +4,10 @@
 
 import {Divider} from '@astryxdesign/core/Divider';
 import {Stack} from '@astryxdesign/core/Layout';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    width: 500,
-  },
-});
 
 export default function DividerShowcase() {
   return (
-    <Stack direction="vertical" gap={4} xstyle={styles.root}>
+    <Stack direction="vertical" gap={4} style={{width: 500}}>
       <Divider variant="subtle" />
       <Divider variant="strong" />
       <Divider label="or" />

package/templates/blocks/components/Divider/DividerVertical.tsx

@@ -2,19 +2,17 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Card} from '@astryxdesign/core/Card';
 import {Section} from '@astryxdesign/core/Section';
 import {HStack, VStack, StackItem} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
-const styles = stylex.create({
-  dividerFill: {
-    alignSelf: 'stretch',
-    height: 'auto',
-  },
-});
+const dividerFill: CSSProperties = {
+  alignSelf: 'stretch',
+  height: 'auto',
+};
 
 export default function DividerVertical() {
   return (
@@ -30,7 +28,7 @@ export default function DividerVertical() {
               </Text>
             </VStack>
           </StackItem>
-          <Divider orientation="vertical" xstyle={styles.dividerFill} />
+          <Divider orientation="vertical" style={dividerFill} />
           <StackItem size="fill">
             <VStack gap={1}>
               <Text type="label">Users</Text>
@@ -40,7 +38,7 @@ export default function DividerVertical() {
               </Text>
             </VStack>
           </StackItem>
-          <Divider orientation="vertical" xstyle={styles.dividerFill} />
+          <Divider orientation="vertical" style={dividerFill} />
           <StackItem size="fill">
             <VStack gap={1}>
               <Text type="label">Conversion</Text>

package/templates/blocks/components/Field/FieldShowcase.tsx

@@ -6,13 +6,6 @@ import {useState} from 'react';
 import {Field} from '@astryxdesign/core/Field';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {Stack} from '@astryxdesign/core/Layout';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    width: 320,
-  },
-});
 
 export default function FieldShowcase() {
   const [email, setEmail] = useState('');
@@ -23,7 +16,7 @@ export default function FieldShowcase() {
       : undefined;
 
   return (
-    <Stack direction="vertical" gap={3} xstyle={styles.root}>
+    <Stack direction="vertical" gap={3} style={{width: 320}}>
       <Field
         label="Email"
         inputID="field-email"

package/templates/blocks/components/FormLayout/FormLayoutHorizontal.tsx

@@ -3,20 +3,15 @@
 'use client';
 
 import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {FormLayout} from '@astryxdesign/core/FormLayout';
 import {TextInput} from '@astryxdesign/core/TextInput';
 
-const styles = stylex.create({
-  layout: {width: '100%', maxWidth: 400},
-});
-
 export default function FormLayoutHorizontal() {
   const [first, setFirst] = useState('Jordan');
   const [last, setLast] = useState('Rivera');
 
   return (
-    <FormLayout direction="horizontal" xstyle={styles.layout}>
+    <FormLayout direction="horizontal" style={{width: '100%', maxWidth: 400}}>
       <TextInput label="First Name" value={first} onChange={setFirst} />
       <TextInput label="Last Name" value={last} onChange={setLast} />
     </FormLayout>

package/templates/blocks/components/Grid/GridResponsiveAutoFit.tsx

@@ -2,20 +2,12 @@
 
 'use client';
 
-import {spacingVars} from '@astryxdesign/core/theme/tokens.stylex';
 import {Grid} from '@astryxdesign/core/Grid';
 import {Card} from '@astryxdesign/core/Card';
 import {Layout, LayoutContent, LayoutPanel} from '@astryxdesign/core/Layout';
 import {useResizable, ResizeHandle} from '@astryxdesign/core/Resizable';
 import {VStack} from '@astryxdesign/core/Stack';
 import {Text} from '@astryxdesign/core/Text';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  panel: {
-    padding: spacingVars['--spacing-4'],
-  },
-});
 
 const teams = [
   {name: 'Design Systems', members: 8},
@@ -47,7 +39,7 @@ export default function GridResponsiveAutoFit() {
             <LayoutPanel
               width={gridPanel.size}
               hasDivider={false}
-              xstyle={styles.panel}>
+              style={{padding: 'var(--spacing-4)'}}>
               <Grid
                 columns={{minWidth: 180, repeat: 'fit'}}
                 gap={4}

package/templates/blocks/components/HoverCard/HoverCardInlineTextHoverCard.tsx

@@ -2,21 +2,19 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 import {HoverCard} from '@astryxdesign/core/HoverCard';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
-const styles = stylex.create({
-  content: {maxWidth: 200},
-});
+const content: CSSProperties = {maxWidth: 200};
 
 export default function HoverCardInlineTextHoverCard() {
   return (
     <Text type="body">The component uses a{' '}
       <HoverCard
         content={
-          <VStack gap={1} xstyle={styles.content}>
+          <VStack gap={1} style={content}>
             <Text type="label">Focus trap</Text>
             <Text type="body" color="secondary">
               A pattern that keeps keyboard focus inside a container, preventing
@@ -30,7 +28,7 @@ export default function HoverCardInlineTextHoverCard() {
       </HoverCard>{' '}to keep keyboard navigation inside the{' '}
       <HoverCard
         content={
-          <VStack gap={1} xstyle={styles.content}>
+          <VStack gap={1} style={content}>
             <Text type="label">Modal dialog</Text>
             <Text type="body" color="secondary">
               An overlay that blocks interaction with the rest of the page until

package/templates/blocks/components/HoverCard/HoverCardInteractiveContent.tsx

@@ -2,24 +2,19 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {HoverCard} from '@astryxdesign/core/HoverCard';
 import {Icon} from '@astryxdesign/core/Icon';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import {LinkIcon} from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  content: {maxWidth: 280},
-});
-
 export default function HoverCardInteractiveContent() {
   return (
     <Text type="body">Read more in the{' '}
       <HoverCard
         placement="below"
         content={
-          <VStack gap={2} xstyle={styles.content}>
+          <VStack gap={2} style={{maxWidth: 280}}>
             <HStack gap={2} vAlign="start">
               <Icon icon={LinkIcon} size="sm" color="secondary" />
               <VStack gap={1}>

package/templates/blocks/components/HoverCard/HoverCardProfileHoverCard.tsx

@@ -2,7 +2,6 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {HoverCard} from '@astryxdesign/core/HoverCard';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Button} from '@astryxdesign/core/Button';
@@ -11,18 +10,13 @@ import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {CalendarIcon} from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  avatar: {flexShrink: 0},
-  content: {maxWidth: 280},
-});
-
 export default function HoverCardProfileHoverCard() {
   return (
     <HoverCard
       placement="below"
       content={
-        <HStack gap={3} vAlign="start" xstyle={styles.content}>
-          <Avatar name="Jane Doe" size={48} xstyle={styles.avatar} />
+        <HStack gap={3} vAlign="start" style={{maxWidth: 280}}>
+          <Avatar name="Jane Doe" size={48} style={{flexShrink: 0}} />
           <VStack gap={1}>
             <Heading level={3}>@janedoe</Heading>
             <Text type="body" color="secondary">

package/templates/blocks/components/HoverCard/HoverCardShowcase.tsx

@@ -7,20 +7,13 @@ import {Button} from '@astryxdesign/core/Button';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {Avatar} from '@astryxdesign/core/Avatar';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  card: {
-    width: 240,
-  },
-});
 
 export default function HoverCardShowcase() {
   return (
     <HoverCard
       placement="above"
       content={
-        <Stack direction="vertical" gap={2} xstyle={styles.card}>
+        <Stack direction="vertical" gap={2} style={{width: 240}}>
           <Stack direction="horizontal" gap={2} vAlign="center">
             <Avatar name="Jane Doe" size="medium" />
             <Stack direction="vertical" gap={0}>

package/templates/blocks/components/OverflowList/OverflowListOverflowBadges.tsx

@@ -2,23 +2,20 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {OverflowList} from '@astryxdesign/core/OverflowList';
 import {Badge} from '@astryxdesign/core/Badge';
 import {Card} from '@astryxdesign/core/Card';
 
-const styles = stylex.create({
-  resizable: {
-    resize: 'horizontal',
-    overflow: 'hidden',
-    minWidth: 80,
-    width: 300,
-  },
-});
-
 export default function OverflowListOverflowBadges() {
   return (
-    <Card padding={2} xstyle={styles.resizable}>
+    <Card
+      padding={2}
+      style={{
+        resize: 'horizontal',
+        overflow: 'hidden',
+        minWidth: 80,
+        width: 300,
+      }}>
       <OverflowList
         gap={1}
         overflowRenderer={overflowItems => (

package/templates/blocks/components/OverflowList/OverflowListOverflowDropdownActions.tsx

@@ -2,7 +2,6 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {OverflowList} from '@astryxdesign/core/OverflowList';
 import {Button} from '@astryxdesign/core/Button';
 import {DropdownMenu} from '@astryxdesign/core/DropdownMenu';
@@ -10,19 +9,17 @@ import {Card} from '@astryxdesign/core/Card';
 
 const actions = ['Save', 'Edit', 'Duplicate', 'Share', 'Archive', 'Delete'];
 
-const styles = stylex.create({
-  resizable: {
-    resize: 'horizontal',
-    overflow: 'hidden',
-    minWidth: 100,
-    width: 350,
-    maxWidth: '100%',
-  },
-});
-
 export default function OverflowListOverflowDropdownActions() {
   return (
-    <Card padding={2} xstyle={styles.resizable}>
+    <Card
+      padding={2}
+      style={{
+        resize: 'horizontal',
+        overflow: 'hidden',
+        minWidth: 100,
+        width: 350,
+        maxWidth: '100%',
+      }}>
       <OverflowList
         gap={2}
         overflowRenderer={overflowItems => (

package/templates/blocks/components/Overlay/OverlayBottomStrip.tsx

@@ -2,27 +2,12 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {Overlay} from '@astryxdesign/core/Overlay';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {Badge} from '@astryxdesign/core/Badge';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
-const styles = stylex.create({
-  frame: {
-    width: 420,
-    maxWidth: '100%',
-    borderRadius: 12,
-    overflow: 'clip',
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
-
 export default function OverlayBottomStrip() {
   return (
     <Overlay
@@ -39,11 +24,13 @@ export default function OverlayBottomStrip() {
           </Text>
         </VStack>
       }>
-      <AspectRatio ratio={16 / 9} xstyle={styles.frame}>
+      <AspectRatio
+        ratio={16 / 9}
+        style={{width: 420, maxWidth: '100%', borderRadius: 12, overflow: 'clip'}}>
         <img
           src="https://lookaside.facebook.com/assets/astryx/illustrative-horizontal-1.png"
           alt="Product highlight preview"
-          {...stylex.props(styles.image)}
+          style={{width: '100%', height: '100%', objectFit: 'cover'}}
         />
       </AspectRatio>
     </Overlay>

package/templates/blocks/components/Overlay/OverlayHoverReveal.tsx

@@ -2,24 +2,23 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
+import type {CSSProperties} from 'react';
 import {Overlay} from '@astryxdesign/core/Overlay';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {Button} from '@astryxdesign/core/Button';
 
-const styles = stylex.create({
-  frame: {
-    width: 420,
-    maxWidth: '100%',
-    borderRadius: 12,
-    overflow: 'clip',
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
+const frame: CSSProperties = {
+  width: 420,
+  maxWidth: '100%',
+  borderRadius: 12,
+  overflow: 'clip',
+};
+
+const image: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  objectFit: 'cover',
+};
 
 export default function OverlayHoverReveal() {
   return (
@@ -27,11 +26,11 @@ export default function OverlayHoverReveal() {
       showOn="hover"
       align="center"
       content={<Button label="Quick view" variant="secondary" size="sm" />}>
-      <AspectRatio ratio={16 / 9} xstyle={styles.frame}>
+      <AspectRatio ratio={16 / 9} style={frame}>
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-working-horizontal-1.png"
           alt="Workspace preview"
-          {...stylex.props(styles.image)}
+          style={image}
         />
       </AspectRatio>
     </Overlay>

package/templates/blocks/components/Overlay/OverlayShowcase.tsx

@@ -2,47 +2,31 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {Overlay} from '@astryxdesign/core/Overlay';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {Button} from '@astryxdesign/core/Button';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 
-const styles = stylex.create({
-  frame: {
-    width: 520,
-    maxWidth: '100%',
-    borderRadius: 16,
-    overflow: 'clip',
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-  content: {
-    textAlign: 'center',
-  },
-});
-
 export default function OverlayShowcase() {
   return (
     <Overlay
       align="center"
       content={
-        <VStack gap={2} xstyle={styles.content}>
+        <VStack gap={2} style={{textAlign: 'center'}}>
           <Text type="supporting" weight="bold" color="inherit">
             Design system foundations
           </Text>
           <Button label="Open gallery" variant="secondary" size="sm" />
         </VStack>
       }>
-      <AspectRatio ratio={16 / 9} xstyle={styles.frame}>
+      <AspectRatio
+        ratio={16 / 9}
+        style={{width: 520, maxWidth: '100%', borderRadius: 16, overflow: 'clip'}}>
         <img
           src="https://lookaside.facebook.com/assets/astryx/light-scene-horizontal-1.png"
           alt="Abstract landscape"
-          {...stylex.props(styles.image)}
+          style={{width: '100%', height: '100%', objectFit: 'cover'}}
         />
       </AspectRatio>
     </Overlay>

package/templates/blocks/components/Pagination/PaginationDotsCarousel.tsx

@@ -10,7 +10,6 @@ import {Stack} from '@astryxdesign/core/Layout';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Icon} from '@astryxdesign/core/Icon';
 import {StarIcon} from '@heroicons/react/24/solid';
-import * as stylex from '@stylexjs/stylex';
 
 const REVIEWS = [
   {
@@ -43,17 +42,6 @@ const REVIEWS = [
   },
 ];
 
-const styles = stylex.create({
-  root: {
-    maxWidth: 480,
-    width: '100%',
-  },
-  pagination: {
-    justifyContent: 'center',
-    paddingTop: 4,
-  },
-});
-
 function Stars({count}: {count: number}) {
   return (
     <Stack direction="horizontal" gap={0}>
@@ -69,7 +57,7 @@ export default function PaginationDotsCarousel() {
   const review = REVIEWS[page - 1];
 
   return (
-    <Stack direction="vertical" gap={3} xstyle={styles.root}>
+    <Stack direction="vertical" gap={3} style={{maxWidth: 480, width: '100%'}}>
       <Card padding={5}>
         <Stack direction="vertical" gap={3}>
           <Stars count={review.stars} />
@@ -96,7 +84,7 @@ export default function PaginationDotsCarousel() {
         onChange={setPage}
         totalPages={REVIEWS.length}
         variant="dots"
-        xstyle={styles.pagination}
+        style={{justifyContent: 'center', paddingTop: 4}}
       />
     </Stack>
   );