feat(cli): simplify cli (#397)

Author: cschroeter

.github/workflows/main.yml

@@ -13,6 +13,14 @@ jobs:
     name: main
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: oven-sh/setup-bun@v1
+      - uses: actions/checkout@v4
+      - uses: oven-sh/setup-bun@v2
 
+      - name: Install Dependencies
+        run: bun install
+
+      - name: Typecheck
+        run: bun run typecheck
+
+      - name: Lint
+        run: bun run lint

bun.lockb

@@ -1 +1 @@
-export * as Accordion from './primitives/accordion'
+export * as Accordion from './styled/accordion'

components/react/src/components/ui/accordion.tsx

@@ -1 +1 @@
-export * as Alert from './primitives/alert'
+export * as Alert from './styled/alert'

components/react/src/components/ui/alert.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
-import * as ArkAvatar from './primitives/avatar'
+import * as StyledAvatar from './styled/avatar'
 
-export interface AvatarProps extends ArkAvatar.RootProps {
+export interface AvatarProps extends StyledAvatar.RootProps {
   name?: string
   src?: string
 }
@@ -10,10 +10,10 @@ export const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {
   const { name, src, ...rootProps } = props
 
   return (
-    <ArkAvatar.Root ref={ref} {...rootProps}>
-      <ArkAvatar.Fallback>{getInitials(name) || <UserIcon />}</ArkAvatar.Fallback>
-      <ArkAvatar.Image src={src} alt={name} />
-    </ArkAvatar.Root>
+    <StyledAvatar.Root ref={ref} {...rootProps}>
+      <StyledAvatar.Fallback>{getInitials(name) || <UserIcon />}</StyledAvatar.Fallback>
+      <StyledAvatar.Image src={src} alt={name} />
+    </StyledAvatar.Root>
   )
 })
 

components/react/src/components/ui/avatar.tsx

@@ -1 +1 @@
-export { Badge, type BadgeProps } from './primitives/badge'
+export { Badge, type BadgeProps } from './styled/badge'

components/react/src/components/ui/badge.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
 import { Center, styled } from 'styled-system/jsx'
-import { Button as StyledButton, type ButtonProps as StyledButtonProps } from './primitives/button'
 import { Spinner } from './spinner'
+import { Button as StyledButton, type ButtonProps as StyledButtonProps } from './styled/button'
 
 interface ButtonLoadingProps {
   loading?: boolean

components/react/src/components/ui/button.tsx

@@ -1 +1 @@
-export * as Card from './primitives/card'
+export * as Card from './styled/card'

components/react/src/components/ui/card.tsx

@@ -1 +1 @@
-export * as Carousel from './primitives/carousel'
+export * as Carousel from './styled/carousel'

components/react/src/components/ui/carousel.tsx

@@ -1,24 +1,24 @@
 import { forwardRef } from 'react'
-import * as ArkCheckbox from './primitives/checkbox'
+import * as StyledCheckbox from './styled/checkbox'
 
-export interface CheckboxProps extends ArkCheckbox.RootProps {}
+export interface CheckboxProps extends StyledCheckbox.RootProps {}
 
 export const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>((props, ref) => {
   const { children, ...rootProps } = props
 
   return (
-    <ArkCheckbox.Root ref={ref} {...rootProps}>
-      <ArkCheckbox.Control>
-        <ArkCheckbox.Indicator>
+    <StyledCheckbox.Root ref={ref} {...rootProps}>
+      <StyledCheckbox.Control>
+        <StyledCheckbox.Indicator>
           <CheckIcon />
-        </ArkCheckbox.Indicator>
-        <ArkCheckbox.Indicator indeterminate>
+        </StyledCheckbox.Indicator>
+        <StyledCheckbox.Indicator indeterminate>
           <MinusIcon />
-        </ArkCheckbox.Indicator>
-      </ArkCheckbox.Control>
-      {children && <ArkCheckbox.Label>{children}</ArkCheckbox.Label>}
-      <ArkCheckbox.HiddenInput />
-    </ArkCheckbox.Root>
+        </StyledCheckbox.Indicator>
+      </StyledCheckbox.Control>
+      {children && <StyledCheckbox.Label>{children}</StyledCheckbox.Label>}
+      <StyledCheckbox.HiddenInput />
+    </StyledCheckbox.Root>
   )
 })
 

components/react/src/components/ui/checkbox.tsx

@@ -1 +1 @@
-export * as Clipboard from './primitives/clipboard'
+export * as Clipboard from './styled/clipboard'

components/react/src/components/ui/clipboard.tsx

@@ -1 +1 @@
-export * as Clipboard from './primitives/clipboard'
+export * as Clipboard from './styled/clipboard'

components/react/src/components/ui/clipobard.tsx

@@ -1 +1 @@
-export { Code, type CodeProps } from './primitives/code'
+export { Code, type CodeProps } from './styled/code'

components/react/src/components/ui/code.tsx

@@ -1 +1 @@
-export * as Collapsible from './primitives/collapsible'
+export * as Collapsible from './styled/collapsible'

components/react/src/components/ui/collapsible.tsx

@@ -1 +1 @@
-export * as ColorPicker from './primitives/color-picker'
+export * as ColorPicker from './styled/color-picker'

components/react/src/components/ui/color-picker.tsx

@@ -1 +1 @@
-export * as Combobox from './primitives/combobox'
+export * as Combobox from './styled/combobox'

components/react/src/components/ui/combobox.tsx

@@ -1 +1 @@
-export * as DatePicker from './primitives/date-picker'
+export * as DatePicker from './styled/date-picker'

components/react/src/components/ui/date-picker.tsx

@@ -1 +1 @@
-export * as Dialog from './primitives/dialog'
+export * as Dialog from './styled/dialog'

components/react/src/components/ui/dialog.tsx

@@ -1 +1 @@
-export * as Drawer from './primitives/drawer'
+export * as Drawer from './styled/drawer'

components/react/src/components/ui/drawer.tsx

@@ -1 +1 @@
-export * as Editable from './primitives/editable'
+export * as Editable from './styled/editable'

components/react/src/components/ui/editable.tsx

@@ -1 +1 @@
-export * as Field from './primitives/field'
+export * as Field from './styled/field'

components/react/src/components/ui/field.tsx

@@ -1 +1 @@
-export * as FileUpload from './primitives/file-upload'
+export * as FileUpload from './styled/file-upload'

components/react/src/components/ui/file-upload.tsx

@@ -1 +1 @@
-export { FormLabel, type FormLabelProps } from './primitives/form-label'
+export { FormLabel, type FormLabelProps } from './styled/form-label'

components/react/src/components/ui/form-label.tsx

@@ -1 +1 @@
-export { Heading, type HeadingProps } from './primitives/heading'
+export { Heading, type HeadingProps } from './styled/heading'

components/react/src/components/ui/heading.tsx

@@ -1 +1 @@
-export * as HoverCard from './primitives/hover-card'
+export * as HoverCard from './styled/hover-card'

components/react/src/components/ui/hover-card.tsx

@@ -1 +1 @@
-export { IconButton, type IconButtonProps } from './primitives/icon-button'
+export { IconButton, type IconButtonProps } from './styled/icon-button'

components/react/src/components/ui/icon-button.tsx

@@ -1 +1 @@
-export { Icon, type IconProps } from './primitives/icon'
+export { Icon, type IconProps } from './styled/icon'

components/react/src/components/ui/icon.tsx

@@ -1 +1 @@
-export { Input, type InputProps } from './primitives/input'
+export { Input, type InputProps } from './styled/input'

components/react/src/components/ui/input.tsx

@@ -1 +1 @@
-export { Kbd, type KbdProps } from './primitives/kbd'
+export { Kbd, type KbdProps } from './styled/kbd'

components/react/src/components/ui/kbd.tsx

@@ -1 +1 @@
-export { Link, type LinkProps } from './primitives/link'
+export { Link, type LinkProps } from './styled/link'

components/react/src/components/ui/link.tsx

@@ -1 +1 @@
-export * as Menu from './primitives/menu'
+export * as Menu from './styled/menu'

components/react/src/components/ui/menu.tsx

@@ -1,23 +1,23 @@
 import { forwardRef } from 'react'
-import * as ArkNumberInput from './primitives/number-input'
+import * as StyledNumberInput from './styled/number-input'
 
-export interface NumberInputProps extends ArkNumberInput.RootProps {}
+export interface NumberInputProps extends StyledNumberInput.RootProps {}
 
 export const NumberInput = forwardRef<HTMLDivElement, NumberInputProps>((props, ref) => {
   const { children, ...rootProps } = props
   return (
-    <ArkNumberInput.Root ref={ref} {...rootProps}>
-      {children && <ArkNumberInput.Label>{children}</ArkNumberInput.Label>}
-      <ArkNumberInput.Control>
-        <ArkNumberInput.Input />
-        <ArkNumberInput.IncrementTrigger>
+    <StyledNumberInput.Root ref={ref} {...rootProps}>
+      {children && <StyledNumberInput.Label>{children}</StyledNumberInput.Label>}
+      <StyledNumberInput.Control>
+        <StyledNumberInput.Input />
+        <StyledNumberInput.IncrementTrigger>
           <ChevronUpIcon />
-        </ArkNumberInput.IncrementTrigger>
-        <ArkNumberInput.DecrementTrigger>
+        </StyledNumberInput.IncrementTrigger>
+        <StyledNumberInput.DecrementTrigger>
           <ChevronDownIcon />
-        </ArkNumberInput.DecrementTrigger>
-      </ArkNumberInput.Control>
-    </ArkNumberInput.Root>
+        </StyledNumberInput.DecrementTrigger>
+      </StyledNumberInput.Control>
+    </StyledNumberInput.Root>
   )
 })
 

components/react/src/components/ui/number-input.tsx

@@ -2,39 +2,39 @@
 import { forwardRef } from 'react'
 import { Button } from './button'
 import { IconButton } from './icon-button'
-import * as ArkPagination from './primitives/pagination'
+import * as StyledPagination from './styled/pagination'
 
-export interface PaginationProps extends ArkPagination.RootProps {}
+export interface PaginationProps extends StyledPagination.RootProps {}
 
 export const Pagination = forwardRef<HTMLElement, PaginationProps>((props, ref) => {
   return (
-    <ArkPagination.Root ref={ref} {...props}>
-      <ArkPagination.PrevTrigger asChild>
+    <StyledPagination.Root ref={ref} {...props}>
+      <StyledPagination.PrevTrigger asChild>
         <IconButton variant="ghost" aria-label="Next Page">
           <ChevronLeftIcon />
         </IconButton>
-      </ArkPagination.PrevTrigger>
-      <ArkPagination.Context>
+      </StyledPagination.PrevTrigger>
+      <StyledPagination.Context>
         {(pagination) =>
           pagination.pages.map((page, index) =>
             page.type === 'page' ? (
-              <ArkPagination.Item key={index} {...page} asChild>
+              <StyledPagination.Item key={index} {...page} asChild>
                 <Button variant="outline">{page.value}</Button>
-              </ArkPagination.Item>
+              </StyledPagination.Item>
             ) : (
-              <ArkPagination.Ellipsis key={index} index={index}>
+              <StyledPagination.Ellipsis key={index} index={index}>
                 &#8230;
-              </ArkPagination.Ellipsis>
+              </StyledPagination.Ellipsis>
             ),
           )
         }
-      </ArkPagination.Context>
-      <ArkPagination.NextTrigger asChild>
+      </StyledPagination.Context>
+      <StyledPagination.NextTrigger asChild>
         <IconButton variant="ghost" aria-label="Next Page">
           <ChevronRightIcon />
         </IconButton>
-      </ArkPagination.NextTrigger>
-    </ArkPagination.Root>
+      </StyledPagination.NextTrigger>
+    </StyledPagination.Root>
   )
 })
 

components/react/src/components/ui/pagination.tsx

@@ -1,8 +1,8 @@
 import { forwardRef } from 'react'
 import { Input } from './input'
-import * as ArkPinInput from './primitives/pin-input'
+import * as StyledPinInput from './styled/pin-input'
 
-export interface PinInputProps extends ArkPinInput.RootProps {
+export interface PinInputProps extends StyledPinInput.RootProps {
   /**
    * The number of inputs to render.
    * @default 4
@@ -14,17 +14,17 @@ export const PinInput = forwardRef<HTMLDivElement, PinInputProps>((props, ref) =
   const { children, length = 4, ...rootProps } = props
 
   return (
-    <ArkPinInput.Root ref={ref} {...rootProps}>
-      {children && <ArkPinInput.Label>{children}</ArkPinInput.Label>}
-      <ArkPinInput.Control>
+    <StyledPinInput.Root ref={ref} {...rootProps}>
+      {children && <StyledPinInput.Label>{children}</StyledPinInput.Label>}
+      <StyledPinInput.Control>
         {Array.from({ length }, (_, index) => index).map((id, index) => (
-          <ArkPinInput.Input key={id} index={index} asChild>
+          <StyledPinInput.Input key={id} index={index} asChild>
             <Input size={rootProps.size} />
-          </ArkPinInput.Input>
+          </StyledPinInput.Input>
         ))}
-      </ArkPinInput.Control>
-      <ArkPinInput.HiddenInput />
-    </ArkPinInput.Root>
+      </StyledPinInput.Control>
+      <StyledPinInput.HiddenInput />
+    </StyledPinInput.Root>
   )
 })
 

components/react/src/components/ui/pin-input.tsx

@@ -1 +1 @@
-export * as Popover from './primitives/popover'
+export * as Popover from './styled/popover'

components/react/src/components/ui/popover.tsx

@@ -1,7 +1,7 @@
 import { forwardRef } from 'react'
-import * as ArkProgress from './primitives/progress'
+import * as StyledProgress from './styled/progress'
 
-export interface ProgressProps extends ArkProgress.RootProps {
+export interface ProgressProps extends StyledProgress.RootProps {
   /**
    * The type of progress to render.
    * @default linear
@@ -13,22 +13,22 @@ export const Progress = forwardRef<HTMLDivElement, ProgressProps>((props, ref) =
   const { children, type = 'linear', ...rootProps } = props
 
   return (
-    <ArkProgress.Root ref={ref} {...rootProps}>
-      {children && <ArkProgress.Label>{children}</ArkProgress.Label>}
+    <StyledProgress.Root ref={ref} {...rootProps}>
+      {children && <StyledProgress.Label>{children}</StyledProgress.Label>}
       {type === 'linear' && (
-        <ArkProgress.Track>
-          <ArkProgress.Range />
-        </ArkProgress.Track>
+        <StyledProgress.Track>
+          <StyledProgress.Range />
+        </StyledProgress.Track>
       )}
       {type === 'circular' && (
-        <ArkProgress.Circle>
-          <ArkProgress.CircleTrack />
-          <ArkProgress.CircleRange />
-          <ArkProgress.ValueText />
-        </ArkProgress.Circle>
+        <StyledProgress.Circle>
+          <StyledProgress.CircleTrack />
+          <StyledProgress.CircleRange />
+          <StyledProgress.ValueText />
+        </StyledProgress.Circle>
       )}
-      <ArkProgress.ValueText />
-    </ArkProgress.Root>
+      <StyledProgress.ValueText />
+    </StyledProgress.Root>
   )
 })
 

components/react/src/components/ui/progress.tsx

@@ -1 +1 @@
-export * as QrCode from './primitives/qr-code'
+export * as QrCode from './styled/qr-code'

components/react/src/components/ui/qr-code.tsx

@@ -1 +1 @@
-export * as RadioButtonGroup from './primitives/radio-button-group'
+export * as RadioButtonGroup from './styled/radio-button-group'

components/react/src/components/ui/radio-button-group.tsx

@@ -1 +1 @@
-export * as RadioGroup from './primitives/radio-group'
+export * as RadioGroup from './styled/radio-group'

components/react/src/components/ui/radio-group.tsx

@@ -1,29 +1,29 @@
 'use client'
 import { forwardRef } from 'react'
-import * as ArkRatingGroup from './primitives/rating-group'
+import * as StyledRatingGroup from './styled/rating-group'
 
-export interface RatingGroupProps extends ArkRatingGroup.RootProps {}
+export interface RatingGroupProps extends StyledRatingGroup.RootProps {}
 
 export const RatingGroup = forwardRef<HTMLDivElement, RatingGroupProps>((props, ref) => {
   const { children, ...rootProps } = props
   return (
-    <ArkRatingGroup.Root ref={ref} {...rootProps}>
-      {children && <ArkRatingGroup.Label>{children}</ArkRatingGroup.Label>}
-      <ArkRatingGroup.Control>
-        <ArkRatingGroup.Context>
+    <StyledRatingGroup.Root ref={ref} {...rootProps}>
+      {children && <StyledRatingGroup.Label>{children}</StyledRatingGroup.Label>}
+      <StyledRatingGroup.Control>
+        <StyledRatingGroup.Context>
           {({ items }) =>
             items.map((index) => (
-              <ArkRatingGroup.Item key={index} index={index}>
-                <ArkRatingGroup.ItemContext>
+              <StyledRatingGroup.Item key={index} index={index}>
+                <StyledRatingGroup.ItemContext>
                   {(item) => <StarIcon isHalf={item.half} />}
-                </ArkRatingGroup.ItemContext>
-              </ArkRatingGroup.Item>
+                </StyledRatingGroup.ItemContext>
+              </StyledRatingGroup.Item>
             ))
           }
-        </ArkRatingGroup.Context>
-      </ArkRatingGroup.Control>
-      <ArkRatingGroup.HiddenInput />
-    </ArkRatingGroup.Root>
+        </StyledRatingGroup.Context>
+      </StyledRatingGroup.Control>
+      <StyledRatingGroup.HiddenInput />
+    </StyledRatingGroup.Root>
   )
 })
 

components/react/src/components/ui/rating-group.tsx

@@ -1 +1 @@
-export * as SegmentGroup from './primitives/segment-group'
+export * as SegmentGroup from './styled/segment-group'

components/react/src/components/ui/segment-group.tsx

@@ -1 +1 @@
-export * as Select from './primitives/select'
+export * as Select from './styled/select'