@eggspot/ui 0.0.0

package/src/components/RadioGroup.tsx

@@ -0,0 +1,191 @@
+"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

@@ -0,0 +1,71 @@
+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

@@ -0,0 +1,57 @@
+"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 }