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

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/Slider/SliderShowcase.tsx

@@ -2,8 +2,17 @@
 
 'use client';
 
+import {useState} from 'react';
 import {Slider} from '@astryxdesign/core/Slider';
 
 export default function SliderShowcase() {
-  return <Slider label="Volume" value={50} style={{width: 300}} />;
+  const [value, setValue] = useState(50);
+  return (
+    <Slider
+      label="Volume"
+      value={value}
+      onChange={setValue}
+      style={{width: 300}}
+    />
+  );
 }

package/templates/blocks/components/ToggleButton/ToggleButtonGroup.doc.mjs

@@ -3,7 +3,7 @@
 /** @type {import('../../../../../core/src/docs-types').TemplateDoc} */
 export const doc = {
   type: 'block',
-  exampleFor: 'ToggleButton',
+  exampleFor: 'ToggleButtonGroup',
   name: 'ToggleButton — Group',
   displayName: 'ToggleButton — Group',
   description: 'Toggle button groups in single-select and multi-select modes. Single selection acts as a view mode switcher; multiple selection forms a formatting toolbar.',

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

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

@@ -3,15 +3,10 @@
 '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 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 TokenizerStates() {
         value={[users[0], users[2]]}
         onChange={() => {}}
         isDisabled
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
       <Tokenizer
         label="Error message"
@@ -54,7 +49,7 @@ export default function TokenizerStates() {
         onChange={items => setErrorValue(items)}
         isRequired
         status={{type: 'error', message: 'At least one reviewer is required'}}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
       <Tokenizer
         label="Warning message"
@@ -66,7 +61,7 @@ export default function TokenizerStates() {
           type: 'warning',
           message: 'Consider adding at least 2 approvers',
         }}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
       <Tokenizer
         label="Success message"
@@ -75,7 +70,7 @@ export default function TokenizerStates() {
         value={successValue}
         onChange={items => setSuccessValue(items)}
         status={{type: 'success', message: 'All required reviewers added'}}
-        xstyle={styles.fixed}
+        style={{width: 400}}
       />
     </Stack>
   );

package/templates/blocks/components/Toolbar/ToolbarCardHeader.tsx

@@ -9,19 +9,10 @@ import {Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Section} from '@astryxdesign/core/Section';
 import {FunnelIcon, PlusIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  card: {
-    width: 500,
-    height: '100%',
-    marginTop: 260,
-  },
-});
 
 export default function ToolbarCardHeader() {
   return (
-    <Card xstyle={styles.card}>
+    <Card style={{width: 500, height: '100%', marginTop: 260}}>
       <Toolbar
         label="User list actions"
         size="sm"

package/templates/blocks/components/Toolbar/ToolbarSizes.tsx

@@ -9,13 +9,6 @@ import {Heading} from '@astryxdesign/core/Text';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Card} from '@astryxdesign/core/Card';
 import {FunnelIcon, PlusIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  container: {
-    width: 500,
-  },
-});
 
 const SIZES = [
   {size: 'sm' as const, label: 'Small'},
@@ -25,7 +18,7 @@ const SIZES = [
 
 export default function ToolbarSizes() {
   return (
-    <Stack direction="vertical" gap={4} xstyle={styles.container}>
+    <Stack direction="vertical" gap={4} style={{width: 500}}>
       {SIZES.map(({size, label}) => (
         <Card key={size}>
           <Toolbar

package/templates/blocks/components/Toolbar/ToolbarTableFilter.tsx

@@ -9,21 +9,14 @@ import {TextInput} from '@astryxdesign/core/TextInput';
 import {MoreMenu} from '@astryxdesign/core/MoreMenu';
 import {Stack} from '@astryxdesign/core/Layout';
 import {Table} from '@astryxdesign/core/Table';
-import * as stylex from '@stylexjs/stylex';
 import {
   MagnifyingGlassIcon,
   ChevronDownIcon,
 } from '@heroicons/react/24/outline';
 
-const styles = stylex.create({
-  container: {
-    width: '100%',
-  },
-});
-
 export default function ToolbarTableFilter() {
   return (
-    <Stack direction="vertical" xstyle={styles.container}>
+    <Stack direction="vertical" style={{width: '100%'}}>
       <Toolbar
         label="Table filters"
         size="sm"

package/templates/blocks/components/Toolbar/ToolbarThreeSlot.tsx

@@ -9,19 +9,10 @@ import {Heading} from '@astryxdesign/core/Text';
 import {Card} from '@astryxdesign/core/Card';
 import {Section} from '@astryxdesign/core/Section';
 import {ArrowLeftIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
-
-const styles = stylex.create({
-  card: {
-    width: 600,
-    height: '100%',
-    marginTop: 260,
-  },
-});
 
 export default function ToolbarThreeSlot() {
   return (
-    <Card xstyle={styles.card}>
+    <Card style={{width: 600, height: '100%', marginTop: 260}}>
       <Toolbar
         label="Document toolbar"
         dividers={['bottom']}

package/templates/blocks/components/Toolbar/ToolbarWithTabs.tsx

@@ -2,7 +2,7 @@
 
 'use client';
 
-import {useState} from 'react';
+import {useState, type CSSProperties} from 'react';
 import {Toolbar} from '@astryxdesign/core/Toolbar';
 import {Button} from '@astryxdesign/core/Button';
 import {Icon} from '@astryxdesign/core/Icon';
@@ -10,21 +10,18 @@ import {TabList, Tab} from '@astryxdesign/core/TabList';
 import {Card} from '@astryxdesign/core/Card';
 import {Section} from '@astryxdesign/core/Section';
 import {PlusIcon} from '@heroicons/react/24/outline';
-import * as stylex from '@stylexjs/stylex';
 
-const styles = stylex.create({
-  card: {
-    width: '100%',
-    maxWidth: 500,
-    height: '100%',
-    marginTop: 200,
-  },
-});
+const card: CSSProperties = {
+  width: '100%',
+  maxWidth: 500,
+  height: '100%',
+  marginTop: 200,
+};
 
 export default function ToolbarWithTabs() {
   const [tab, setTab] = useState('overview');
   return (
-    <Card xstyle={styles.card}>
+    <Card style={card}>
       <Toolbar
         label="Section navigation"
         dividers={['bottom']}