@astryxdesign/cli 0.1.0 → 0.1.1-canary.a514b99

package/templates/blocks/components/AspectRatio/AspectRatioShowcase.tsx

@@ -2,26 +2,9 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {AspectRatio} from '@astryxdesign/core/AspectRatio';
 import {HStack, VStack} from '@astryxdesign/core/Layout';
 import {Text} from '@astryxdesign/core/Text';
-import {radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
-
-const s = stylex.create({
-  // Fixed height with auto width lets the aspect ratio drive the width,
-  // so all three containers share the same height but differ in width.
-  ratioBox: {
-    height: 120,
-    width: 'auto',
-    borderRadius: radiusVars['--radius-container'],
-  },
-  image: {
-    width: '100%',
-    height: '100%',
-    objectFit: 'cover',
-  },
-});
 
 const items = [
   {
@@ -49,8 +32,18 @@ export default function AspectRatioShowcase() {
     <HStack gap={4} vAlign="start">
       {items.map(({ratio, label, src, alt}) => (
         <VStack key={label} gap={2} hAlign="center">
-          <AspectRatio ratio={ratio} xstyle={s.ratioBox}>
-            <img src={src} alt={alt} {...stylex.props(s.image)} />
+          <AspectRatio
+            ratio={ratio}
+            style={{
+              height: 120,
+              width: 'auto',
+              borderRadius: 'var(--radius-container)',
+            }}>
+            <img
+              src={src}
+              alt={alt}
+              style={{width: '100%', height: '100%', objectFit: 'cover'}}
+            />
           </AspectRatio>
           <Text type="supporting" color="secondary">
             {label}

package/templates/blocks/components/Banner/BannerShowcase.tsx

@@ -4,17 +4,10 @@
 
 import {Banner} from '@astryxdesign/core/Banner';
 import {Stack} from '@astryxdesign/core/Layout';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    maxWidth: 800,
-  },
-});
 
 export default function BannerShowcase() {
   return (
-    <Stack direction="vertical" gap={3} xstyle={styles.root}>
+    <Stack direction="vertical" gap={3} style={{maxWidth: 800}}>
       <Banner status="info" title="A new software update is available." />
       <Banner status="success" title="Your changes have been saved." />
       <Banner

package/templates/blocks/components/Blockquote/BlockquoteShowcase.tsx

@@ -4,17 +4,10 @@
 
 import {Blockquote} from '@astryxdesign/core/Blockquote';
 import {Stack} from '@astryxdesign/core/Layout';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    width: 500,
-  },
-});
 
 export default function BlockquoteShowcase() {
   return (
-    <Stack direction="vertical" gap={4} xstyle={styles.root}>
+    <Stack direction="vertical" gap={4} style={{width: 500}}>
       <Blockquote>
         Design is not just what it looks like and feels like. Design is how it
         works.

package/templates/blocks/components/Carousel/CarouselShowcase.tsx

@@ -6,16 +6,6 @@ import {Carousel} from '@astryxdesign/core/Carousel';
 import {Card} from '@astryxdesign/core/Card';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Text, Heading} from '@astryxdesign/core/Text';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    maxWidth: 500,
-  },
-  card: {
-    minWidth: 200,
-  },
-});
 
 const ITEMS = [
   {title: 'Design', body: 'Create wireframes and prototypes.'},
@@ -32,9 +22,9 @@ export default function CarouselShowcase() {
       hasSnap
       hasButtons={false}
       aria-label="Workflow steps"
-      xstyle={styles.root}>
+      style={{maxWidth: 500}}>
       {ITEMS.map(item => (
-        <Card key={item.title} padding={3} xstyle={styles.card}>
+        <Card key={item.title} padding={3} style={{minWidth: 200}}>
           <Stack direction="vertical" gap={1}>
             <Heading level={5}>{item.title}</Heading>
             <Text type="supporting" color="secondary">

package/templates/blocks/components/ChatComposerDrawer/ChatComposerDrawerShowcase.tsx

@@ -8,15 +8,12 @@ import {Button} from '@astryxdesign/core/Button';
 import {Icon} from '@astryxdesign/core/Icon';
 import {Stack} from '@astryxdesign/core/Layout';
 import {PaperClipIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-import {colorVars, borderVars, radiusVars} from '@astryxdesign/core/theme/tokens.stylex';
+import type {CSSProperties} from 'react';
 
-const styles = stylex.create({
-  drawerBorder: {
-    border: `${borderVars['--border-width']} solid ${colorVars['--color-border']}`,
-    borderRadius: radiusVars['--radius-chat'],
-  },
-});
+const drawerBorder: CSSProperties = {
+  border: 'var(--border-width) solid var(--color-border)',
+  borderRadius: 'var(--radius-chat)',
+};
 
 export default function ChatComposerDrawerShowcase() {
   return (
@@ -27,7 +24,7 @@ export default function ChatComposerDrawerShowcase() {
           <ChatComposerDrawer
             count={4}
             label="Attachments"
-            xstyle={styles.drawerBorder}>
+            style={drawerBorder}>
             <Token label="design-spec.pdf" onRemove={() => {}} />
             <Token label="api-schema.json" onRemove={() => {}} />
             <Token label="screenshot.png" onRemove={() => {}} />

package/templates/blocks/components/ChatLayout/ChatLayoutPanelChat.tsx

@@ -11,21 +11,19 @@ import {
   ChatComposer,
 } from '@astryxdesign/core/Chat';
 import {Markdown} from '@astryxdesign/core/Markdown';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  panel: {
-    width: 450,
-    height: 600,
-    borderRadius: 8,
-    overflow: 'hidden',
-    border: '1px solid var(--color-border)',
-  },
-});
+import type {CSSProperties} from 'react';
+
+const panel: CSSProperties = {
+  width: 450,
+  height: 600,
+  borderRadius: 8,
+  overflow: 'hidden',
+  border: '1px solid var(--color-border)',
+};
 
 export default function ChatLayoutPanelChat() {
   return (
-    <div {...stylex.props(styles.panel)}>
+    <div style={panel}>
       <ChatLayout
         composer={
           <ChatComposer onSubmit={() => {}} placeholder="Ask something..." />

package/templates/blocks/components/ChatMessageList/ChatMessageListDensity.tsx

@@ -12,14 +12,6 @@ import {Text} from '@astryxdesign/core/Text';
 import {Avatar} from '@astryxdesign/core/Avatar';
 import {Divider} from '@astryxdesign/core/Divider';
 import {Fragment} from 'react';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  section: {
-    flex: 1,
-    minHeight: 0,
-  },
-});
 
 const DENSITIES = ['compact', 'balanced', 'spacious'] as const;
 
@@ -39,7 +31,7 @@ export default function ChatMessageListDensity() {
             <Text type="supporting" color="secondary">
               {density.charAt(0).toUpperCase() + density.slice(1)}
             </Text>
-            <VStack xstyle={styles.section}>
+            <VStack style={{flex: 1, minHeight: 0}}>
               <ChatMessageList density={density}>
                 <ChatMessage sender="user">
                   <ChatMessageBubble>

package/templates/blocks/components/ChatMessageList/ChatMessageListFullFeatured.tsx

@@ -15,18 +15,10 @@ import {Markdown} from '@astryxdesign/core/Markdown';
 import {CodeBlock} from '@astryxdesign/core/CodeBlock';
 import {Timestamp} from '@astryxdesign/core/Timestamp';
 import {Token} from '@astryxdesign/core/Token';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  container: {
-    maxWidth: 500,
-    justifyContent: 'center',
-  },
-});
 
 export default function ChatMessageListFullFeatured() {
   return (
-    <VStack xstyle={styles.container}>
+    <VStack style={{maxWidth: 500, justifyContent: 'center'}}>
       <ChatMessageList>
         <ChatSystemMessage variant="divider">Today</ChatSystemMessage>
 

package/templates/blocks/components/ChatMessageList/ChatMessageListShowcase.tsx

@@ -11,18 +11,10 @@ import {
 } from '@astryxdesign/core/Chat';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Timestamp} from '@astryxdesign/core/Timestamp';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  container: {
-    maxWidth: 600,
-    height: '100%',
-  },
-});
 
 export default function ChatMessageListShowcase() {
   return (
-    <VStack xstyle={styles.container}>
+    <VStack style={{maxWidth: 600, height: '100%'}}>
       <ChatMessageList density="balanced">
         <ChatSystemMessage variant="divider">
           March 15, 2026

package/templates/blocks/components/ChatMessageMetadata/ChatMessageMetadataShowcase.tsx

@@ -2,7 +2,6 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {
   ChatMessageList,
   ChatMessage,
@@ -21,15 +20,9 @@ import {
   HandThumbDownIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  container: {
-    maxWidth: 600,
-  },
-});
-
 export default function ChatMessageMetadataShowcase() {
   return (
-    <VStack xstyle={styles.container}>
+    <VStack style={{maxWidth: 600}}>
       <ChatMessageList>
         <ChatMessage sender="assistant">
           <ChatMessageBubble

package/templates/blocks/components/ChatSendButton/ChatSendButtonInComposer.tsx

@@ -2,19 +2,12 @@
 
 'use client';
 
-import * as stylex from '@stylexjs/stylex';
 import {ChatComposer} from '@astryxdesign/core/Chat';
 import {Stack} from '@astryxdesign/core/Layout';
 
-const styles = stylex.create({
-  root: {
-    maxWidth: 450,
-  },
-});
-
 export default function ChatSendButtonInComposer() {
   return (
-    <Stack direction="vertical" width="100%" xstyle={styles.root}>
+    <Stack direction="vertical" width="100%" style={{maxWidth: 450}}>
       <ChatComposer
         onSubmit={() => {}}
         value="Hello, how can you help?"

package/templates/blocks/components/Citation/CitationInlineText.tsx

@@ -25,12 +25,12 @@ export default function CitationInlineText() {
         .
       </Text>
       <Text type="body">
-        StyleX compiles atomic CSS at build time for optimal performance
+        TypeScript adds static types to JavaScript for safer refactoring
         <Citation
           source={{
-            title: 'StyleX Documentation',
-            url: 'https://stylexjs.com',
-            icon: 'https://stylexjs.com/img/favicon.ico',
+            title: 'TypeScript Documentation',
+            url: 'https://www.typescriptlang.org',
+            icon: 'https://www.typescriptlang.org/favicon-32x32.png',
           }}
           number={3}
           variant="label"

package/templates/blocks/components/Code/CodeInlineInParagraph.tsx

@@ -4,17 +4,10 @@
 
 import {Code} from '@astryxdesign/core/CodeBlock';
 import {Text} from '@astryxdesign/core/Text';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  root: {
-    maxWidth: 400,
-  },
-});
 
 export default function CodeInlineInParagraph() {
   return (
-    <Text type="body" xstyle={styles.root}>Use <Code>useState</Code>for local state and{' '}
+    <Text type="body" style={{maxWidth: 400}}>Use <Code>useState</Code>for local state and{' '}
       <Code>useEffect</Code>for side effects. If you need shared state
             across components, consider <Code>useContext</Code>or a state
             management library.

package/templates/blocks/components/CodeBlock/CodeBlockBashCommand.tsx

@@ -15,7 +15,7 @@ export default function CodeBlockBashCommand() {
         style={{width: '100%'}}
       />
       <CodeBlock
-        code="yarn add @stylexjs/stylex"
+        code="yarn add @astryxdesign/theme-neutral"
         language="bash"
         hasCopyButton
         style={{width: '100%'}}

package/templates/blocks/components/CodeBlock/CodeBlockJSONConfig.tsx

@@ -8,7 +8,7 @@ const code = `{
   "name": "@astryxdesign/core",
   "version": "0.0.5",
   "dependencies": {
-    "@stylexjs/stylex": "^0.17.5",
+    "@astryxdesign/theme-neutral": "^0.1.0",
     "react": "^19.0.0"
   },
   "scripts": {

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/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}>