@astryxdesign/cli 0.1.0 → 0.1.1-canary.a514b99

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/MoreMenu/MoreMenuInToolbar.tsx

@@ -15,20 +15,10 @@ import {
   ShareIcon,
   TrashIcon,
 } from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  card: {
-    marginTop: 100,
-  },
-  moreMenuWrapper: {
-    marginInlineEnd: 8,
-  },
-});
 
 export default function MoreMenuInToolbar() {
   return (
-    <Card width="100%" height="100%" xstyle={styles.card}>
+    <Card width="100%" height="100%" style={{marginTop: 100}}>
       <Toolbar
         label="Project actions"
         size="sm"
@@ -44,7 +34,7 @@ export default function MoreMenuInToolbar() {
         centerContent={<Heading level={5}>Title</Heading>}
         endContent={
           <>
-            <div {...stylex.props(styles.moreMenuWrapper)}>
+            <div style={{marginInlineEnd: 8}}>
               <MoreMenu
                 label="More actions"
                 size="sm"

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>
   );

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

@@ -2,23 +2,21 @@
 
 'use client';
 
-import {useState} from 'react';
+import {useState, type CSSProperties} from 'react';
 import {Pagination} from '@astryxdesign/core/Pagination';
 import {Heading} from '@astryxdesign/core/Text';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Table} from '@astryxdesign/core/Table';
-import * as stylex from '@stylexjs/stylex';
 
-const styles = stylex.create({
-  root: {
-    width: '100%',
-    maxWidth: 500,
-  },
-  pagination: {
-    paddingTop: 8,
-    flexDirection: 'row-reverse',
-  },
-});
+const root: CSSProperties = {
+  width: '100%',
+  maxWidth: 500,
+};
+
+const pagination: CSSProperties = {
+  paddingTop: 8,
+  flexDirection: 'row-reverse',
+};
 
 const DATA = [
   {
@@ -42,7 +40,7 @@ export default function PaginationPageSize() {
   const [pageSize, setPageSize] = useState(10);
 
   return (
-    <Stack direction="vertical" xstyle={styles.root}>
+    <Stack direction="vertical" style={root}>
       <Heading level={4}>Transactions</Heading>
       <Table
         idKey="id"
@@ -61,7 +59,7 @@ export default function PaginationPageSize() {
         onPageSizeChange={setPageSize}
         pageSizeOptions={[10, 25, 50, 100]}
         variant="count"
-        xstyle={styles.pagination}
+        style={pagination}
       />
     </Stack>
   );

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

@@ -5,13 +5,6 @@
 import {useState} from 'react';
 import {Pagination} from '@astryxdesign/core/Pagination';
 import {Stack} from '@astryxdesign/core/Layout';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    width: '100%',
-  },
-});
 
 export default function PaginationVariants() {
   const [pagesPage, setPagesPage] = useState(3);
@@ -20,7 +13,7 @@ export default function PaginationVariants() {
   const [dotsPage, setDotsPage] = useState(3);
 
   return (
-    <Stack direction="vertical" gap={5} hAlign="center" xstyle={styles.root}>
+    <Stack direction="vertical" gap={5} hAlign="center" style={{width: '100%'}}>
       <Pagination
         page={dotsPage}
         onChange={setDotsPage}

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

@@ -6,18 +6,6 @@ import {useState} from 'react';
 import {Pagination} from '@astryxdesign/core/Pagination';
 import {Table} from '@astryxdesign/core/Table';
 import {Stack} from '@astryxdesign/core/Layout';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    width: '100%',
-    maxWidth: 500,
-  },
-  pagination: {
-    justifyContent: 'center',
-    paddingTop: 8,
-  },
-});
 
 const ALL_DATA = [
   {id: '1', name: 'Olivia Chen', role: 'Engineer', status: 'Active'},
@@ -42,7 +30,7 @@ export default function PaginationWithTable() {
   const pageData = ALL_DATA.slice(start, start + PAGE_SIZE);
 
   return (
-    <Stack direction="vertical" xstyle={styles.root}>
+    <Stack direction="vertical" style={{width: '100%', maxWidth: 500}}>
       <Table
         idKey="id"
         columns={[
@@ -59,7 +47,7 @@ export default function PaginationWithTable() {
         pageSize={PAGE_SIZE}
         variant="count"
         size="sm"
-        xstyle={styles.pagination}
+        style={{justifyContent: 'center', paddingTop: 8}}
       />
     </Stack>
   );

package/templates/blocks/components/Tokenizer/TokenizerClear.tsx

@@ -3,16 +3,11 @@
 'use client';
 
 import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
-const styles = stylex.create({
-  fixed: {width: 400},
-});
-
 const users: SearchableItem[] = [
   {id: '1', label: 'Alice Johnson'},
   {id: '2', label: 'Bob Smith'},
@@ -42,7 +37,7 @@ export default function TokenizerClear() {
         value={value}
         onChange={items => setValue(items)}
         hasClear
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
     </Stack>
   );

package/templates/blocks/components/Tokenizer/TokenizerCreatable.tsx

@@ -3,16 +3,11 @@
 'use client';
 
 import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
-const styles = stylex.create({
-  fixed: {width: 400},
-});
-
 const emptySource: SearchSource = {
   search: () => [],
   bootstrap: () => [],
@@ -49,7 +44,7 @@ export default function TokenizerCreatable() {
           onChange={items => setTags(items)}
           hasCreate
           placeholder="Type a tag and press Enter..."
-          xstyle={styles.fixed}
+          style={{width: 400}}
         />
       </Stack>
       <Stack direction="vertical" gap={1}>
@@ -64,7 +59,7 @@ export default function TokenizerCreatable() {
           hasCreate
           hasEntriesOnFocus
           placeholder="Search or type a new name..."
-          xstyle={styles.fixed}
+          style={{width: 400}}
         />
       </Stack>
     </Stack>

package/templates/blocks/components/Tokenizer/TokenizerEndContent.tsx

@@ -3,17 +3,12 @@
 'use client';
 
 import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
 import {Button} from '@astryxdesign/core/Button';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
-const styles = stylex.create({
-  fixed: {width: 400},
-});
-
 const users: SearchableItem[] = [
   {id: '1', label: 'Alice Johnson'},
   {id: '2', label: 'Bob Smith'},
@@ -44,7 +39,7 @@ export default function TokenizerEndContent() {
         value={value}
         onChange={items => setValue(items)}
         endContent={<Button label="Apply" variant="primary" size="sm" />}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
     </Stack>
   );

package/templates/blocks/components/Tokenizer/TokenizerIcon.tsx

@@ -3,17 +3,12 @@
 'use client';
 
 import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import {MagnifyingGlassIcon} from '@heroicons/react/24/outline';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
-const styles = stylex.create({
-  fixed: {width: 400},
-});
-
 const users: SearchableItem[] = [
   {id: '1', label: 'Alice Johnson'},
   {id: '2', label: 'Bob Smith'},
@@ -43,7 +38,7 @@ export default function TokenizerIcon() {
         value={value}
         onChange={items => setValue(items)}
         startIcon={MagnifyingGlassIcon}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
     </Stack>
   );

package/templates/blocks/components/Tokenizer/TokenizerMaxEntries.tsx

@@ -3,16 +3,11 @@
 'use client';
 
 import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
-const styles = stylex.create({
-  fixed: {width: 400},
-});
-
 const skills: SearchableItem[] = [
   {id: '1', label: 'React'},
   {id: '2', label: 'TypeScript'},
@@ -52,7 +47,7 @@ export default function TokenizerMaxEntries() {
         value={value}
         onChange={items => setValue(items)}
         maxEntries={MAX_SKILLS}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
     </Stack>
   );

package/templates/blocks/components/Tokenizer/TokenizerOverflow.tsx

@@ -3,16 +3,11 @@
 'use client';
 
 import {useState} from 'react';
-import * as stylex from '@stylexjs/stylex';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
 import type {SearchableItem, SearchSource} from '@astryxdesign/core/Typeahead';
 
-const styles = stylex.create({
-  fixed: {width: 400, maxWidth: 400},
-});
-
 const users: SearchableItem[] = [
   {id: '1', label: 'Alice Johnson'},
   {id: '2', label: 'Bob Smith'},
@@ -45,7 +40,7 @@ export default function TokenizerOverflow() {
           value={inlineValue}
           onChange={items => setInlineValue(items)}
           tokenOverflowBehavior="unfocusedInline"
-          xstyle={styles.fixed}
+          style={{width: 400, maxWidth: 400}}
         />
       </Stack>
       <Stack direction="vertical" gap={1}>
@@ -59,7 +54,7 @@ export default function TokenizerOverflow() {
           value={layerValue}
           onChange={items => setLayerValue(items)}
           tokenOverflowBehavior="unfocusedLayer"
-          xstyle={styles.fixed}
+          style={{width: 400, maxWidth: 400}}
         />
       </Stack>
     </Stack>

package/templates/blocks/components/Tokenizer/TokenizerShowcase.tsx

@@ -2,14 +2,9 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {Tokenizer} from '@astryxdesign/core/Tokenizer';
 import type {SearchSource} from '@astryxdesign/core/Typeahead';
 
-const styles = stylex.create({
-  fixed: {width: 400},
-});
-
 const source: SearchSource = {
   search: () => [],
   bootstrap: () => [],
@@ -26,7 +21,7 @@ export default function TokenizerShowcase() {
         {id: '2', label: 'Engineering'},
       ]}
       onChange={() => {}}
-      xstyle={styles.fixed}
+      style={{width: 400}}
     />
   );
 }