@eggspot/ui 0.0.0 → 0.0.3

package/src/components/RadioGroup.tsx

@@ -1,191 +0,0 @@
-"use client"
-
-import { Label } from "@eggspot/ui/components/Label"
-import { cn } from "@eggspot/ui/lib/utils"
-import { useControllableState } from "@radix-ui/react-use-controllable-state"
-import { cva, VariantProps } from "class-variance-authority"
-import { Circle } from "lucide-react"
-import {
-  Radio as AriaRadio,
-  RadioGroup as AriaRadioGroup,
-  RadioGroupProps as AriaRadioGroupProps,
-  RadioProps as AriaRadioProps,
-  composeRenderProps,
-} from "react-aria-components"
-
-function BaseRadioGroup({ className, ...props }: AriaRadioGroupProps) {
-  return (
-    <AriaRadioGroup
-      aria-label="radio"
-      className={composeRenderProps(className, (className, renderProps) =>
-        cn("group/radiogroup flex flex-col flex-wrap gap-2", className)
-      )}
-      {...props}
-    />
-  )
-}
-
-const radioVariants = cva(
-  [
-    "group/radio flex cursor-pointer items-center text-sm",
-    /* Disabled */
-    "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-70",
-    /* Invalid */
-    "data-[invalid]:text-error-11",
-  ],
-  {
-    variants: {
-      variant: {
-        default: ["group/default gap-x-2"],
-        card: [
-          "gap-x-3.5",
-          "border-gray-7 rounded-md border p-3.5 transition-all duration-200",
-          /* Selected */
-          "bg-gray-2 data-selected:border-accent-9 data-selected:bg-accent-2 data-selected:border-1",
-          /* Hovered */
-          "data-hovered:border-gray-8",
-          /* Focus Visible */
-          "ring-offset-2 data-focus-visible:ring-2 data-pressed:scale-[0.99]",
-        ],
-      },
-    },
-  }
-)
-
-function Radio({
-  className,
-  children,
-  variant = "default",
-  ...props
-}: AriaRadioProps & VariantProps<typeof radioVariants>) {
-  return (
-    <AriaRadio className={radioVariants({ variant })} {...props}>
-      {composeRenderProps(children, (children, renderProps) => (
-        <>
-          <span
-            className={cn(
-              "transition-colors",
-              "bg-gray-2 text-accent-contrast ring-offset-gray-1 flex aspect-square size-4 items-center justify-center rounded-full border",
-              /* Focus */
-              "group-data-[focused]/radio:outline-none",
-              /* Focus Visible */
-              "group-data-[focus-visible]/default:ring-2 group-data-[focus-visible]/default:ring-offset-2",
-              /* Selected */
-              "group-data-[selected]/radio:bg-accent-9 group-data-[selected]/radio:border-accent-9",
-              /* Hovered */
-              "group-data-hovered/radio:border-gray-8",
-              /* Pressed */
-              "group-data-pressed/radio:scale-[0.95]",
-              /* Selected Dark */
-              "dark:group-data-[selected]/radio:border-none",
-              /* Disabled */
-              "group-data-[disabled]/radio:cursor-not-allowed group-data-[disabled]/radio:opacity-50"
-            )}
-          >
-            {renderProps.isSelected && (
-              <Circle
-                className={cn(
-                  "animate-in fade-in-0 zoom-in-60 size-1.5 fill-current text-current"
-                )}
-              />
-            )}
-          </span>
-          {children}
-        </>
-      ))}
-    </AriaRadio>
-  )
-}
-
-interface RadioOption {
-  value: string | number
-  label: string
-}
-
-interface RadioGroupProps<T extends RadioOption>
-  extends Omit<AriaRadioGroupProps, "value" | "onChange" | "defaultValue"> {
-  /** The label for the radio group. */
-  label?: string
-
-  /** The options for the radio group. */
-  options: Array<T>
-
-  /** The variant for the radio group. */
-  variant?: "default" | "card"
-
-  /** The class name for the radio group. */
-  className?: string
-
-  /** Whether to show an asterisk for the label. */
-  withAsterisk?: boolean
-
-  /** The tooltip for the radio group. */
-  tooltip?: React.ReactNode
-
-  /** Custom rendering function for each option in the radio group. */
-  renderOption?: (option: T) => React.ReactNode
-
-  /** If this prop is set, the radio group operates in a controlled manner and uses this value as its state. */
-  value?: T
-
-  /** If this prop is set, the radio group will call this function with the new value whenever the value changes. */
-  onChange?: (value: T | undefined) => void
-
-  /** Initial value used when the component is uncontrolled. */
-  defaultValue?: T
-}
-
-function RadioGroup<T extends RadioOption>({
-  options,
-  renderOption,
-  variant = "default",
-  className,
-  label,
-  withAsterisk,
-  tooltip,
-  value: controlledValue,
-  onChange: controlledOnChange,
-  defaultValue,
-  ...props
-}: RadioGroupProps<T>) {
-  const [value, onChange] = useControllableState<T | undefined>({
-    prop: controlledValue,
-    defaultProp: defaultValue,
-    onChange: controlledOnChange,
-  })
-
-  return (
-    <BaseRadioGroup
-      value={JSON.stringify(value)}
-      onChange={(v) => onChange(JSON.parse(v))}
-      {...props}
-    >
-      {label && (
-        <Label withAsterisk={withAsterisk} tooltip={tooltip}>
-          {label}
-        </Label>
-      )}
-      <div
-        className={cn(
-          "grid",
-          variant === "card" && "gap-2.5",
-          variant === "default" && "gap-1.5",
-          className
-        )}
-      >
-        {options.map((option) => (
-          <Radio
-            key={option.value}
-            value={JSON.stringify(option)}
-            variant={variant}
-          >
-            {renderOption ? renderOption(option) : option.label}
-          </Radio>
-        ))}
-      </div>
-    </BaseRadioGroup>
-  )
-}
-
-export { BaseRadioGroup, Radio, RadioGroup }
-export type { RadioGroupProps, RadioOption }

package/src/components/Resizable.tsx

@@ -1,71 +0,0 @@
-import * as React from "react"
-import { cn } from "@eggspot/ui/lib/utils"
-import { GripVerticalIcon } from "lucide-react"
-import * as AriaResizable from "react-resizable-panels"
-
-function ResizablePanelGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof AriaResizable.PanelGroup>) {
-  return (
-    <AriaResizable.PanelGroup
-      data-slot="resizable-panel-group"
-      className={cn(
-        "flex h-full w-full",
-        "data-[panel-group-direction=vertical]:flex-col",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-const ResizablePanel = React.forwardRef<
-  React.ComponentRef<typeof AriaResizable.Panel>,
-  React.ComponentProps<typeof AriaResizable.Panel>
->((props, ref) => {
-  return (
-    <AriaResizable.Panel ref={ref} data-slot="resizable-panel" {...props} />
-  )
-})
-
-ResizablePanel.displayName = "ResizablePanel"
-
-function ResizableHandle({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof AriaResizable.PanelResizeHandle> & {
-  withHandle?: boolean
-}) {
-  return (
-    <AriaResizable.PanelResizeHandle
-      data-slot="resizable-handle"
-      className={cn(
-        "relative flex items-center justify-center",
-        "data-[panel-group-direction=horizontal]:h-full data-[panel-group-direction=horizontal]:w-px data-[panel-group-direction=horizontal]:self-center",
-        "data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full",
-        "bg-gray-6",
-        // "cursor-grab! data-resize-handle-active:cursor-grabbing!",
-        "hover:bg-gray-7 data-resize-handle-active:bg-accent-9",
-        "transition-colors duration-150",
-        className
-      )}
-      {...props}
-    >
-      {withHandle && (
-        <div
-          className={cn(
-            "bg-gray-5 text-gray-11 pointer-events-none z-10 flex h-5 w-3 items-center justify-center rounded-full shadow-sm",
-            "opacity-0 transition-opacity group-hover:opacity-100",
-            "data-[panel-group-direction=vertical]:rotate-90"
-          )}
-        >
-          <GripVerticalIcon className="size-3" aria-hidden="true" />
-        </div>
-      )}
-    </AriaResizable.PanelResizeHandle>
-  )
-}
-
-export { ResizableHandle, ResizablePanel, ResizablePanelGroup }

package/src/components/ScrollArea.tsx

@@ -1,57 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@eggspot/ui/lib/utils"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
-
-function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollBar />
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  )
-}
-
-function ScrollBar({
-  className,
-  orientation = "vertical",
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
-    <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
-      orientation={orientation}
-      className={cn(
-        "flex touch-none p-px transition-colors select-none",
-        orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
-        orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
-        className
-      )}
-      {...props}
-    >
-      <ScrollAreaPrimitive.ScrollAreaThumb
-        data-slot="scroll-area-thumb"
-        className="bg-gray-11/20 relative flex-1 rounded-full"
-      />
-    </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
-}
-
-export { ScrollArea, ScrollBar }