@jongh/cli 1.0.11 → 1.1.0

package/dist/components/Select/index.tsx

@@ -0,0 +1,231 @@
+import {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type CSSProperties,
+  type ReactNode,
+} from "react"
+import { createContext } from "../../hooks/createContext"
+import { useControlledState } from "../../hooks/useControllableState"
+import { Slot } from "@radix-ui/react-slot"
+import { RovingTabIndexRoot } from "../RovingIndex/RovingTabIndexRoot"
+import {
+  autoUpdate,
+  flip,
+  offset,
+  size,
+  useFloating,
+} from "@floating-ui/react-dom"
+import {
+  useRovingTabIndex,
+  useRovingTabIndexContext,
+} from "../RovingIndex/useRovingTabIndex"
+import {
+  getNextFocusableId,
+  getPrevFocusableId,
+} from "../../utils/getFocusableId"
+import { composeRefs } from "../../hooks/useComposedRefs"
+import { Primitive } from "src/components/Primitive"
+
+const CONTEXT_NAME = "select"
+
+interface SelectContext {
+  isOpen: boolean //option들의 열림/닫힘 여부
+  onOpenChange: (Open: boolean) => void
+  selected: string | null //option들 중 선택된 value
+  onSelectChange: (value: string) => void
+  floatingStyles?: CSSProperties
+  setFloating: (node: HTMLElement) => void
+  setReference: (node: HTMLElement | null) => void
+  dir: "horizontal" | "vertical"
+}
+
+const [SelectContextProvider, useSelectContext] =
+  createContext<SelectContext>(CONTEXT_NAME)
+
+export interface SelectProps extends ComponentPropsWithoutRef<"div"> {
+  isOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  defaultOpen?: boolean
+  selected?: string
+  onSelectChange?: (value: string) => void
+  defaultValue?: string
+  children: ReactNode
+  dir?: "horizontal" | "vertical"
+}
+
+export const SelectRoot = ({
+  isOpen,
+  onOpenChange,
+  defaultOpen,
+  selected,
+  onSelectChange,
+  defaultValue,
+  dir = "vertical",
+  children,
+  ...props
+}: SelectProps) => {
+  const [open = false, setIsOpen] = useControlledState({
+    prop: isOpen,
+    defaultProp: defaultOpen,
+    onChange: onOpenChange,
+  })
+
+  const [selectedValue, setSelectedValue] = useControlledState({
+    prop: selected,
+    defaultProp: defaultValue,
+    onChange: onSelectChange,
+  })
+
+  const { refs, floatingStyles } = useFloating({
+    strategy: "absolute",
+    open: open,
+    middleware: [
+      offset(), //trigger와 얼마나 떨어져있는지
+      flip(), //화면 밖으로 나가지 않도록
+      size({
+        apply({ elements, availableHeight }) {
+          elements.floating.style.maxHeight = `${availableHeight}px`
+        },
+      }),
+    ],
+    whileElementsMounted: autoUpdate,
+  })
+
+  return (
+    <SelectContextProvider
+      isOpen={open}
+      onOpenChange={setIsOpen}
+      selected={selectedValue || null}
+      onSelectChange={setSelectedValue}
+      setFloating={refs.setFloating}
+      setReference={refs.setReference}
+      dir={dir}
+      floatingStyles={floatingStyles}
+    >
+      <RovingTabIndexRoot active={selectedValue} dir="vertical">
+        <div tabIndex={-1} {...props}>
+          {children}
+        </div>
+      </RovingTabIndexRoot>
+    </SelectContextProvider>
+  )
+}
+
+export interface SelectTriggerProps
+  extends ComponentPropsWithoutRef<typeof Primitive.button> {
+  placeholder?: string
+}
+
+export const SelectTrigger = forwardRef<
+  React.ElementRef<typeof Primitive.button>,
+  SelectTriggerProps
+>((props, ref) => {
+  const { getOrderedItems } = useRovingTabIndexContext("rovingTabIndex")
+
+  const { setReference, onOpenChange, isOpen, selected } =
+    useSelectContext(CONTEXT_NAME)
+
+  const displayText = selected || props.placeholder || ""
+
+  return (
+    <Primitive.button
+      ref={composeRefs((node) => setReference(node), ref)}
+      onClick={(e) => {
+        e.preventDefault()
+        onOpenChange(!isOpen)
+        props?.onClick?.(e)
+      }}
+      onKeyDown={(e) => {
+        setTimeout(() => {
+          if (e.key === "ArrowDown") {
+            onOpenChange(true)
+            getOrderedItems()[0]?.element.focus()
+          }
+        })
+      }}
+      {...props}
+    >
+      <span>{displayText}</span>
+    </Primitive.button>
+  )
+})
+export interface SelectPortalProps {
+  children: ReactNode
+}
+export const SelectPortal = ({ children, ...props }: SelectPortalProps) => {
+  const { isOpen, floatingStyles, setFloating } = useSelectContext(CONTEXT_NAME)
+
+  if (!isOpen) {
+    return null
+  }
+
+  return (
+    <Slot
+      style={floatingStyles}
+      ref={(node) => {
+        if (node instanceof HTMLElement) {
+          setFloating(node)
+        }
+      }}
+      {...props}
+    >
+      {children}
+    </Slot>
+  )
+}
+
+export interface SelectItemProps
+  extends ComponentPropsWithoutRef<typeof Primitive.li> {
+  value: string
+}
+export const SelectItem = forwardRef<
+  React.ElementRef<typeof Primitive.li>,
+  SelectItemProps
+>(({ children, value, asChild, ...props }, ref) => {
+  const { onSelectChange, onOpenChange, dir } = useSelectContext(CONTEXT_NAME)
+  const { getOrderedItems, getRovingProps } = useRovingTabIndex(value)
+
+  return (
+    <Primitive.li
+      {...getRovingProps<typeof Primitive.li>({
+        onClick: () => {
+          onSelectChange?.(value)
+          onOpenChange(false)
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            onSelectChange?.(value)
+            onOpenChange(false)
+          }
+          const items = getOrderedItems()
+          let nextItem
+          if (dir === "horizontal") {
+            if (e.key === "ArrowRight") {
+              nextItem = getNextFocusableId(items, value)
+            } else if (e.key === "ArrowLeft") {
+              nextItem = getPrevFocusableId(items, value)
+            }
+          }
+          if (dir === "vertical") {
+            if (e.key === "ArrowDown") {
+              nextItem = getNextFocusableId(items, value)
+            } else if (e.key === "ArrowUp") {
+              nextItem = getPrevFocusableId(items, value)
+            }
+          }
+          nextItem?.element.focus()
+        },
+      })}
+      ref={ref}
+      {...props}
+    >
+      {children}
+    </Primitive.li>
+  )
+})
+
+export const Select = Object.assign(SelectRoot, {
+  Trigger: SelectTrigger,
+  Portal: SelectPortal,
+  Item: SelectItem,
+})

package/dist/components/Slider/index.tsx

@@ -0,0 +1,141 @@
+import { useState, type ComponentPropsWithoutRef } from "react"
+import { useControlledState } from "../../hooks/useControllableState"
+import { createContext } from "../../hooks/createContext"
+//TODO: props type 관련 정리 및 event composing 필요
+const [SliderProvider, useSliderContext] = createContext<{
+  min: number
+  max: number
+  value: number
+  onChange: (value: number) => void
+  isDragging: boolean
+  onPointerDown: (e: React.PointerEvent) => void
+  onPointerMove: (e: React.PointerEvent) => void
+  onPointerUp: (e: React.PointerEvent) => void
+}>("Slider")
+
+type SliderRootProps = {
+  min: number
+  max: number
+  value: number
+  defaultValue?: number
+  onChange: (value: number) => void
+  children: React.ReactNode
+}
+
+const getPercentage = (value: number, min: number, max: number) =>
+  ((value - min) / (max - min)) * 100
+
+const SliderRoot = ({
+  min = 0,
+  max = 100,
+  value,
+  onChange,
+  defaultValue,
+  children,
+  ...props
+}: SliderRootProps) => {
+  const [isDragging, setIsDragging] = useState(false)
+
+  const [innerValue = 0, setValue] = useControlledState({
+    prop: value,
+    defaultProp: defaultValue || min,
+    onChange,
+  })
+
+  const handlePointerDown = (e: React.PointerEvent) => {
+    e.preventDefault()
+    setIsDragging(true)
+    e.currentTarget.setPointerCapture(e.pointerId)
+  }
+
+  const handlePointerUp = (e: React.PointerEvent) => {
+    e.preventDefault()
+    setIsDragging(false)
+    e.currentTarget.releasePointerCapture(e.pointerId)
+    const { left, width } = e.currentTarget.getBoundingClientRect()
+    let percentage = (e.clientX - left) / width
+    percentage = Math.min(Math.max(percentage, 0), 1)
+
+    const newValue = min + percentage * (max - min)
+    setValue(newValue)
+  }
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    e.preventDefault()
+    if (!isDragging) return
+
+    const { left, width } = e.currentTarget.getBoundingClientRect()
+    let percentage = (e.clientX - left) / width
+    percentage = Math.min(Math.max(percentage, 0), 1)
+    const newValue = min + percentage * (max - min)
+    setValue(newValue)
+  }
+
+  return (
+    <SliderProvider
+      min={min}
+      max={max}
+      value={innerValue}
+      onChange={setValue}
+      isDragging={isDragging}
+      onPointerDown={handlePointerDown}
+      onPointerMove={handlePointerMove}
+      onPointerUp={handlePointerUp}
+    >
+      <div
+        onPointerDown={handlePointerDown}
+        onPointerUp={handlePointerUp}
+        onPointerMove={handlePointerMove}
+        {...props}
+      >
+        {children}
+      </div>
+    </SliderProvider>
+  )
+}
+
+const SliderTrack = ({
+  children,
+  ...props
+}: {
+  children?: React.ReactNode
+}) => {
+  return <span {...props}>{children}</span>
+}
+
+const SliderRange = ({ ...props }: ComponentPropsWithoutRef<"span">) => {
+  const { min, max, value } = useSliderContext()
+  const percentage = getPercentage(value, min, max)
+
+  return (
+    <span
+      {...props}
+      style={{
+        width: `${percentage}%`,
+      }}
+    />
+  )
+}
+
+const SliderThumb = ({ ...props }: ComponentPropsWithoutRef<"span">) => {
+  const { min, max, value } = useSliderContext()
+  const percentage = getPercentage(value, min, max)
+
+  return (
+    <span
+      {...props}
+      style={{
+        position: "absolute",
+        left: `${percentage}%`,
+        transform: "translateX(-50%)",
+      }}
+    />
+  )
+}
+
+export const Slider = Object.assign(SliderRoot, {
+  Root: SliderRoot,
+  Track: SliderTrack,
+  Range: SliderRange,
+  Thumb: SliderThumb,
+})

package/dist/components/Slider/style.ts

@@ -1,42 +1,29 @@
-import { define } from "../../../dev"
+import type { Assign } from "../../types"
+import { slider } from "@styled-system/recipes"
+import type { ComponentProps, HTMLStyledProps } from "styled-system/types"
+import { createStyleContext } from "../../utils/createStyleContext"
+import { Slider } from "."
 
-export const sliderRecipe = define.recipe({
-  className: "slider",
-  base: {
-    WebkitAppearance: "none",
-    height: "4px",
-    borderRadius: "lg",
-    backgroundColor: "grey_300",
-    backgroundImage: "linear-gradient(#7DD3FC, #7DD3FC)",
-    backgroundSize: "var(--range-size)",
-    backgroundRepeat: "no-repeat",
-    "&::-webkit-slider-thumb": {
-      WebkitAppearance: "none",
-      width: "20px",
-      height: "20px",
-      backgroundColor: "grey_300",
-      borderRadius: "rounded",
-      border: "none",
-      cursor: "pointer",
-    },
-    "&::-moz-range-thumb": {
-      WebkitAppearance: "none",
-      width: "20px",
-      height: "20px",
-      backgroundColor: "grey_300",
-      borderRadius: "rounded",
-      border: "none",
-      cursor: "pointer",
-    },
-  },
-  variants: {
-    orientation: {
-      horizontal: {
-        writingMode: "horizontal-tb",
-      },
-      vertical: {
-        writingMode: "vertical-rl",
-      },
-    },
-  },
-})
+const { withProvider, withContext } = createStyleContext(slider)
+
+export const Root = withProvider<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<"div">, ComponentProps<typeof Slider.Root>>
+>(Slider.Root, "root")
+
+export const Track = withContext<
+  HTMLSpanElement,
+  Assign<HTMLStyledProps<"span">, ComponentProps<typeof Slider.Track>>
+>(Slider.Track, "track")
+
+export const Range = withContext<
+  HTMLSpanElement,
+  Assign<HTMLStyledProps<"span">, ComponentProps<typeof Slider.Range>>
+>(Slider.Range, "range")
+
+export const Thumb = withContext<
+  HTMLSpanElement,
+  Assign<HTMLStyledProps<"span">, ComponentProps<typeof Slider.Thumb>>
+>(Slider.Thumb, "thumb")
+
+export const StyledSlider = Object.assign(Root, { Track, Range, Thumb })

package/dist/components/{Tab → Tabs}/Tab.tsx

@@ -1,19 +1,21 @@
-import { forwardRef, useId, type ReactNode } from "react"
+import { forwardRef, useId, type ReactNode, type ForwardedRef } from "react"
 import { useControlledState } from "../../hooks/useControllableState"
 import { Slot } from "@radix-ui/react-slot"
 import { TabProvider } from "./useTabContext"
 
-export interface TabProps {
-  children: ReactNode
+export type TabProps = {
+  children?: ReactNode
   selected?: string
   defaultValue?: string
   onSelect?: (value: string) => void
   asChild?: boolean
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const Tab = forwardRef<any, TabProps>(
-  ({ children, selected, defaultValue, onSelect, asChild }, ref) => {
+export const Tab = forwardRef(
+  (
+    { children, selected, defaultValue, onSelect, asChild, ...props }: TabProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => {
     const Element = asChild ? Slot : "div"
 
     const [value, setValue] = useControlledState({
@@ -28,7 +30,9 @@ export const Tab = forwardRef<any, TabProps>(
 
     return (
       <TabProvider selected={value} onSelect={onSelectItem} tabId={useId()}>
-        <Element ref={ref}>{children}</Element>
+        <Element ref={ref} {...props}>
+          {children}
+        </Element>
       </TabProvider>
     )
   },

package/dist/components/{Tab → Tabs}/TabContent.tsx

@@ -2,7 +2,7 @@ import { type ReactNode } from "react"
 import { useTabContext } from "./useTabContext"
 import { motion } from "framer-motion"
 
-interface TabContentProps {
+export interface TabContentProps {
   children: ReactNode
   value: string
 }
@@ -35,7 +35,8 @@ const cardVariant = {
     },
   },
 }
-export const TabContent = ({ children, value }: TabContentProps) => {
+
+export const TabContent = ({ children, value, ...props }: TabContentProps) => {
   const { selected, tabId } = useTabContext("tab")
 
   const isSelected = selected === value
@@ -51,6 +52,7 @@ export const TabContent = ({ children, value }: TabContentProps) => {
       variants={tabContentVariant}
       animate={isSelected ? "active" : "inactive"}
       initial="inactive"
+      {...props}
     >
       <motion.div key={value} variants={cardVariant}>
         {isSelected && children}

package/dist/components/Tabs/TabIndicator.tsx

@@ -0,0 +1,6 @@
+import { motion } from "framer-motion"
+
+export interface TabIndicatorProps {}
+export const TabIndicator = ({ ...props }: TabIndicatorProps) => {
+  return <motion.div {...props}></motion.div>
+}

package/dist/components/{Tab → Tabs}/TabList.tsx

@@ -6,9 +6,8 @@ import {
 } from "react"
 import { useTabContext } from "./useTabContext"
 
-import { css, cx } from "@styled-system/css"
-import { RovingTabIndexRoot, useRovingTabIndex } from "./useRovingTabIndex"
-import isHotkey from "is-hotkey"
+import { RovingTabIndexRoot, useRovingTabIndex } from "../RovingIndex"
+
 import { Slot } from "@radix-ui/react-slot"
 import { composeRefs } from "../../hooks/useComposedRefs"
 import {
@@ -16,44 +15,44 @@ import {
   getPrevFocusableId,
 } from "../../utils/getFocusableId"
 
-interface TabListProps {
+export interface TabListProps {
   children: ReactNode
   className?: string
 }
 
 const setIndicatorStyle = (target: HTMLElement) => {
   const targetRect = target.getBoundingClientRect()
-  const parentRect = target.parentElement?.getBoundingClientRect()
-  if (!targetRect || !parentRect) {
+  const parent = target.parentElement //TabList
+  const parentRect = parent?.getBoundingClientRect()
+
+  if (!targetRect || !parentRect || !parent) {
     return
   }
+  const scrollLeft = parent.scrollLeft //overflow일때 고려
+
+  const indicatorLeft = targetRect.left - parentRect.left + scrollLeft
+
   document.documentElement.style.setProperty(
     "--indicator-left",
-    `${Math.abs(parentRect.left - targetRect.left)}px`,
+    `${indicatorLeft}px`,
   )
   document.documentElement.style.setProperty(
     "--indicator-width",
-    `${Math.abs(targetRect.width)}px`,
+    `${targetRect.width}px`,
   )
 }
 
-export const TabList = ({ children, className }: TabListProps) => {
+export const TabList = ({ children, ...props }: TabListProps) => {
   const { selected } = useTabContext("tab")
   return (
-    <RovingTabIndexRoot as="div" active={selected}>
-      <div
-        role="tablist"
-        className={cx(
-          className,
-          css({ position: "relative", display: "flex" }),
-        )}
-      >
+    <RovingTabIndexRoot active={selected}>
+      <div role="tablist" {...props}>
         {children}
       </div>
     </RovingTabIndexRoot>
   )
 }
-type TabItemProps = ComponentPropsWithRef<"button"> & {
+export interface TabItemProps extends ComponentPropsWithRef<"button"> {
   value: string
 }
 
@@ -71,9 +70,9 @@ export const RovingItem = ({
         onKeyDown: (e) => {
           const items = getOrderedItems()
           let nextItem
-          if (isHotkey("right", e)) {
+          if (e.key === "ArrowRight") {
             nextItem = getNextFocusableId(items, value)
-          } else if (isHotkey("left", e)) {
+          } else if (e.key === "ArrowLeft") {
             nextItem = getPrevFocusableId(items, value)
           }
           nextItem?.element.focus()
@@ -86,7 +85,7 @@ export const RovingItem = ({
 }
 
 export const TabItem = forwardRef<HTMLButtonElement, TabItemProps>(
-  ({ children, className, value, ...props }: TabItemProps, forwardRef) => {
+  ({ children, value, ...props }: TabItemProps, forwardRef) => {
     const { selected, onSelect, tabId } = useTabContext("tab")
     const isSelected = selected === value
 

package/dist/components/Tabs/index.ts

@@ -0,0 +1,43 @@
+"use client"
+import { Tab, TabProps } from "./Tab"
+import { TabContent, TabContentProps } from "./TabContent"
+import { TabIndicator, TabIndicatorProps } from "./TabIndicator"
+import { TabList, TabListProps } from "./TabList"
+import { TabItem, TabItemProps } from "./TabList"
+import { type TabsVariantProps, tabs } from "styled-system/recipes"
+import type { Assign, HTMLStyledProps } from "styled-system/types"
+import { createStyleContext } from "../../utils/createStyleContext"
+
+const { withProvider, withContext } = createStyleContext(tabs)
+
+const Root = withProvider<
+  HTMLDivElement,
+  Assign<Assign<HTMLStyledProps<"div">, TabProps>, TabsVariantProps>
+>(Tab, "root")
+
+const Content = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<"div">, TabContentProps>
+>(TabContent, "content")
+
+const Indicator = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<"div">, TabIndicatorProps>
+>(TabIndicator, "indicator")
+
+const List = withContext<
+  HTMLDivElement,
+  Assign<HTMLStyledProps<"div">, TabListProps>
+>(TabList, "list")
+
+const Item = withContext<
+  HTMLButtonElement,
+  Assign<HTMLStyledProps<"button">, TabItemProps>
+>(TabItem, "item")
+
+export const Tabs = Object.assign(Root, {
+  Content,
+  List,
+  Item,
+  Indicator,
+})

package/dist/components/{Tab → Tabs}/useRovingTabIndex.tsx

@@ -101,7 +101,6 @@ export const RovingTabIndexRoot = <T extends ElementType>({
         {...{ [ROOT_SELECTOR]: true }}
         // tabIndex={isShiftTabbing ? -1 : 0}
         onFocus={(e) => {
-          console.log("parent focus")
           if (e.target !== e.currentTarget) return
           if (isShiftTabbing) return
           const orderedItems = getOrderedItems()

package/dist/components/index.ts

@@ -1,5 +1,5 @@
 export * from "./Button"
-// export * from "./TagButton/TagButton"
 export * from "./Accordion"
-// export * from "./Tab/index"
-// export * from "./Slider/Slider"
+export * from "./Tabs"
+export * from "./Slider"
+export * from "./Select"

package/dist/index.js

@@ -1,2 +1,2 @@
 #!/usr/bin/env node
-import y from"yargs";import{hideBin as w}from"yargs/helpers";import m from"node:path";import a from"fs-extra";import{packageDirectory as l}from"pkg-dir";import*as t from"@clack/prompts";async function i(){let o=await l(),n=m.join(o||process.cwd(),"park-ui.json");try{return await a.readJSON(n)}catch{t.note("\uC124\uC815 \uD30C\uC77C\uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");let e=await f();return await a.outputJSON(n,{...e},{spaces:2}),e}}var f=async()=>t.group({outputPath:()=>t.text({message:"\uCEF4\uD3EC\uB10C\uD2B8 \uC800\uC7A5 \uACBD\uB85C\uB97C \uC124\uC815\uD574\uC8FC\uC138\uC694",initialValue:"./src/components/ui",validate:o=>{if(!o)return"Please enter a path.";if(!o.startsWith("."))return"Please enter a relative path to the project root."}})},{onCancel:()=>{t.cancel("Operation cancelled."),process.exit(0)}});import*as s from"@clack/prompts";import r from"node:path";import d from"fs-extra";import{fileURLToPath as u}from"node:url";var g=r.dirname(u(import.meta.url)),h=r.join(g,"./components/Button/index.tsx");async function c(o,n){try{let e=h,p=r.join(process.cwd(),n,`${o}.tsx`);await d.copy(e,p),console.log(`${o} copied to ${n}`)}catch(e){throw new Error(`Failed to copy component: ${e}`)}}var C=async()=>{await y(w(process.argv)).command("components add [components..]","Add components to your project",o=>o.positional("components",{describe:"List of components to add",type:"string",array:!0,default:[]}).option("all",{type:"boolean",description:"Add all components",default:!1}),async o=>{if(o.components.length===0&&!o.all){s.note("Error: You need to specify at least one component or use the --all flag"),console.log('Run "cli --help" for more information');return}let n=await i();await c(o.components[0],n.outputPath)}).demandCommand(1,"You need at least one command before moving on").strict().help().argv};C();
+import P from"yargs";import{hideBin as C}from"yargs/helpers";import m from"node:path";import a from"fs-extra";import{packageDirectory as l}from"pkg-dir";import*as t from"@clack/prompts";var f="./src/components/ui",d="component.json";async function i(){let o=await l(),n=m.join(o||process.cwd(),d);try{return await a.readJSON(n)}catch{t.note("\uC124\uC815 \uD30C\uC77C\uC774 \uC874\uC7AC\uD558\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4");let e=await u();return await a.outputJSON(n,{...e},{spaces:2}),e}}var u=async()=>t.group({outputPath:()=>t.text({message:"\uCEF4\uD3EC\uB10C\uD2B8 \uC800\uC7A5 \uACBD\uB85C\uB97C \uC124\uC815\uD574\uC8FC\uC138\uC694",initialValue:f,validate:o=>{if(!o)return"Please enter a path.";if(!o.startsWith("."))return"Please enter a relative path to the project root."}})},{onCancel:()=>{t.cancel("Operation cancelled."),process.exit(0)}});import*as s from"@clack/prompts";import r from"node:path";import g from"fs-extra";import{fileURLToPath as h}from"node:url";var y=r.dirname(h(import.meta.url)),w=r.join(y,"./components/Button/index.tsx");async function c(o,n){try{let e=w,p=r.join(process.cwd(),n,`${o}.tsx`);await g.copy(e,p),console.log(`${o} copied to ${n}`)}catch(e){throw new Error(`Failed to copy component: ${e}`)}}var j=async()=>{await P(C(process.argv)).command("components add [components..]","Add components to your project",o=>o.positional("components",{describe:"List of components to add",type:"string",array:!0,default:[]}).option("all",{type:"boolean",description:"Add all components",default:!1}),async o=>{if(o.components.length===0&&!o.all){s.cancel("Error: You need to specify at least one component or use the --all flag"),console.log('Run "cli --help" for more information');return}let n=await i();await c(o.components[0],n.outputPath)}).demandCommand(1,"You need at least one command before moving on").strict().help().argv};j();