@useatlas/create 0.0.6 → 0.0.7

package/templates/nextjs-standalone/src/components/ui/faceted.tsx

@@ -0,0 +1,283 @@
+"use client";
+
+import { Check, ChevronsUpDown } from "lucide-react";
+import * as React from "react";
+
+import { Badge } from "@/components/ui/badge";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from "@/components/ui/command";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+type FacetedValue<Multiple extends boolean> = Multiple extends true
+  ? string[]
+  : string;
+
+interface FacetedContextValue<Multiple extends boolean = boolean> {
+  value?: FacetedValue<Multiple>;
+  onItemSelect?: (value: string) => void;
+  multiple?: Multiple;
+}
+
+const FacetedContext = React.createContext<FacetedContextValue<boolean> | null>(
+  null,
+);
+
+function useFacetedContext(name: string) {
+  const context = React.useContext(FacetedContext);
+  if (!context) {
+    throw new Error(`\`${name}\` must be within Faceted`);
+  }
+  return context;
+}
+
+interface FacetedProps<Multiple extends boolean = false>
+  extends React.ComponentProps<typeof Popover> {
+  value?: FacetedValue<Multiple>;
+  onValueChange?: (value: FacetedValue<Multiple> | undefined) => void;
+  children?: React.ReactNode;
+  multiple?: Multiple;
+}
+
+function Faceted<Multiple extends boolean = false>(
+  props: FacetedProps<Multiple>,
+) {
+  const {
+    open: openProp,
+    onOpenChange: onOpenChangeProp,
+    value,
+    onValueChange,
+    children,
+    multiple = false,
+    ...facetedProps
+  } = props;
+
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const isControlled = openProp !== undefined;
+  const open = isControlled ? openProp : uncontrolledOpen;
+
+  const onOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(newOpen);
+      }
+      onOpenChangeProp?.(newOpen);
+    },
+    [isControlled, onOpenChangeProp],
+  );
+
+  const onItemSelect = React.useCallback(
+    (selectedValue: string) => {
+      if (!onValueChange) return;
+
+      if (multiple) {
+        const currentValue = (Array.isArray(value) ? value : []) as string[];
+        const newValue = currentValue.includes(selectedValue)
+          ? currentValue.filter((v) => v !== selectedValue)
+          : [...currentValue, selectedValue];
+        onValueChange(newValue as FacetedValue<Multiple>);
+      } else {
+        if (value === selectedValue) {
+          onValueChange(undefined);
+        } else {
+          onValueChange(selectedValue as FacetedValue<Multiple>);
+        }
+
+        requestAnimationFrame(() => onOpenChange(false));
+      }
+    },
+    [multiple, value, onValueChange, onOpenChange],
+  );
+
+  const contextValue = React.useMemo<FacetedContextValue<typeof multiple>>(
+    () => ({ value, onItemSelect, multiple }),
+    [value, onItemSelect, multiple],
+  );
+
+  return (
+    <FacetedContext.Provider value={contextValue}>
+      <Popover open={open} onOpenChange={onOpenChange} {...facetedProps}>
+        {children}
+      </Popover>
+    </FacetedContext.Provider>
+  );
+}
+
+function FacetedTrigger(props: React.ComponentProps<typeof PopoverTrigger>) {
+  const { className, children, ...triggerProps } = props;
+
+  return (
+    <PopoverTrigger
+      {...triggerProps}
+      className={cn("justify-between text-left", className)}
+    >
+      {children}
+    </PopoverTrigger>
+  );
+}
+
+interface FacetedBadgeListProps extends React.ComponentProps<"div"> {
+  options?: { label: string; value: string }[];
+  max?: number;
+  badgeClassName?: string;
+  placeholder?: string;
+}
+
+function FacetedBadgeList(props: FacetedBadgeListProps) {
+  const {
+    options = [],
+    max = 2,
+    placeholder = "Select options...",
+    className,
+    badgeClassName,
+    ...badgeListProps
+  } = props;
+
+  const context = useFacetedContext("FacetedBadgeList");
+  const values = Array.isArray(context.value)
+    ? context.value
+    : ([context.value].filter(Boolean) as string[]);
+
+  const getLabel = React.useCallback(
+    (value: string) => {
+      const option = options.find((opt) => opt.value === value);
+      return option?.label ?? value;
+    },
+    [options],
+  );
+
+  if (!values || values.length === 0) {
+    return (
+      <div
+        {...badgeListProps}
+        className="flex w-full items-center gap-1 text-muted-foreground"
+      >
+        {placeholder}
+        <ChevronsUpDown className="ml-auto size-4 shrink-0 opacity-50" />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      {...badgeListProps}
+      className={cn("flex flex-wrap items-center gap-1", className)}
+    >
+      {values.length > max ? (
+        <Badge
+          variant="secondary"
+          className={cn("rounded-sm px-1 font-normal", badgeClassName)}
+        >
+          {values.length} selected
+        </Badge>
+      ) : (
+        values.map((value) => (
+          <Badge
+            key={value}
+            variant="secondary"
+            className={cn("rounded-sm px-1 font-normal", badgeClassName)}
+          >
+            <span className="truncate">{getLabel(value)}</span>
+          </Badge>
+        ))
+      )}
+    </div>
+  );
+}
+
+function FacetedContent(props: React.ComponentProps<typeof PopoverContent>) {
+  const { className, children, ...contentProps } = props;
+
+  return (
+    <PopoverContent
+      {...contentProps}
+      align="start"
+      className={cn(
+        "w-[200px] origin-(--radix-popover-content-transform-origin) p-0",
+        className,
+      )}
+    >
+      <Command>{children}</Command>
+    </PopoverContent>
+  );
+}
+
+const FacetedInput = CommandInput;
+
+const FacetedList = CommandList;
+
+const FacetedEmpty = CommandEmpty;
+
+const FacetedGroup = CommandGroup;
+
+interface FacetedItemProps extends React.ComponentProps<typeof CommandItem> {
+  value: string;
+}
+
+function FacetedItem(props: FacetedItemProps) {
+  const { value, onSelect, className, children, ...itemProps } = props;
+  const context = useFacetedContext("FacetedItem");
+
+  const isSelected = context.multiple
+    ? Array.isArray(context.value) && context.value.includes(value)
+    : context.value === value;
+
+  const onItemSelect = React.useCallback(
+    (currentValue: string) => {
+      if (onSelect) {
+        onSelect(currentValue);
+      } else if (context.onItemSelect) {
+        context.onItemSelect(currentValue);
+      }
+    },
+    [onSelect, context],
+  );
+
+  return (
+    <CommandItem
+      aria-selected={isSelected}
+      data-selected={isSelected}
+      className={cn("gap-2", className)}
+      onSelect={() => onItemSelect(value)}
+      {...itemProps}
+    >
+      <span
+        className={cn(
+          "flex size-4 items-center justify-center rounded-sm border border-primary",
+          isSelected
+            ? "bg-primary text-primary-foreground"
+            : "opacity-50 [&_svg]:invisible",
+        )}
+      >
+        <Check className="size-4" />
+      </span>
+      {children}
+    </CommandItem>
+  );
+}
+
+const FacetedSeparator = CommandSeparator;
+
+export {
+  Faceted,
+  FacetedBadgeList,
+  FacetedContent,
+  FacetedEmpty,
+  FacetedGroup,
+  FacetedInput,
+  FacetedItem,
+  FacetedList,
+  FacetedSeparator,
+  FacetedTrigger,
+};

package/templates/nextjs-standalone/src/components/ui/form.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import type { Label as LabelPrimitive } from "radix-ui"
+import { Slot } from "radix-ui"
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useFormState,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+} from "react-hook-form"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+
+const Form = FormProvider
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+> = {
+  name: TName
+}
+
+const FormFieldContext = React.createContext<FormFieldContextValue>(
+  {} as FormFieldContextValue
+)
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+>({
+  ...props
+}: ControllerProps<TFieldValues, TName>) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  )
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext)
+  const itemContext = React.useContext(FormItemContext)
+  const { getFieldState } = useFormContext()
+  const formState = useFormState({ name: fieldContext.name })
+  const fieldState = getFieldState(fieldContext.name, formState)
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>")
+  }
+
+  const { id } = itemContext
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}
+
+type FormItemContextValue = {
+  id: string
+}
+
+const FormItemContext = React.createContext<FormItemContextValue>(
+  {} as FormItemContextValue
+)
+
+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+  const id = React.useId()
+
+  return (
+    <FormItemContext.Provider value={{ id }}>
+      <div
+        data-slot="form-item"
+        className={cn("grid gap-2", className)}
+        {...props}
+      />
+    </FormItemContext.Provider>
+  )
+}
+
+function FormLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  const { error, formItemId } = useFormField()
+
+  return (
+    <Label
+      data-slot="form-label"
+      data-error={!!error}
+      className={cn("data-[error=true]:text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  )
+}
+
+function FormControl({ ...props }: React.ComponentProps<typeof Slot.Root>) {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+
+  return (
+    <Slot.Root
+      data-slot="form-control"
+      id={formItemId}
+      aria-describedby={
+        !error
+          ? `${formDescriptionId}`
+          : `${formDescriptionId} ${formMessageId}`
+      }
+      aria-invalid={!!error}
+      {...props}
+    />
+  )
+}
+
+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+  const { formDescriptionId } = useFormField()
+
+  return (
+    <p
+      data-slot="form-description"
+      id={formDescriptionId}
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+  const { error, formMessageId } = useFormField()
+  const body = error ? String(error?.message ?? "") : props.children
+
+  if (!body) {
+    return null
+  }
+
+  return (
+    <p
+      data-slot="form-message"
+      id={formMessageId}
+      className={cn("text-sm text-destructive", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  )
+}
+
+export {
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+}

package/templates/nextjs-standalone/src/components/ui/label.tsx

@@ -0,0 +1,24 @@
+"use client"
+
+import * as React from "react"
+import { Label as LabelPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

package/templates/nextjs-standalone/src/components/ui/popover.tsx

@@ -0,0 +1,89 @@
+"use client"
+
+import * as React from "react"
+import { Popover as PopoverPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Popover({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />
+}
+
+function PopoverTrigger({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95",
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+}
+
+function PopoverAnchor({
+  ...props
+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-1 text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverTitle({ className, ...props }: React.ComponentProps<"h2">) {
+  return (
+    <div
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function PopoverDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverDescription,
+}

package/templates/nextjs-standalone/src/components/ui/progress.tsx

@@ -0,0 +1,31 @@
+"use client"
+
+import * as React from "react"
+import { Progress as ProgressPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Progress({
+  className,
+  value,
+  ...props
+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn(
+        "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+        className
+      )}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="h-full w-full flex-1 bg-primary transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  )
+}
+
+export { Progress }

package/templates/nextjs-standalone/src/components/ui/scroll-area.tsx

@@ -8,15 +8,19 @@ import { cn } from "@/lib/utils"
 function ScrollArea({
   className,
   children,
+  viewportRef,
   ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+  viewportRef?: React.Ref<HTMLDivElement>
+}) {
   return (
     <ScrollAreaPrimitive.Root
       data-slot="scroll-area"
-      className={cn("relative", className)}
+      className={cn("relative overflow-hidden", className)}
       {...props}
     >
       <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
         data-slot="scroll-area-viewport"
         className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
       >

package/templates/nextjs-standalone/src/components/ui/slider.tsx

@@ -0,0 +1,63 @@
+"use client"
+
+import * as React from "react"
+import { Slider as SliderPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
+  const _values = React.useMemo(
+    () =>
+      Array.isArray(value)
+        ? value
+        : Array.isArray(defaultValue)
+          ? defaultValue
+          : [min, max],
+    [value, defaultValue, min, max]
+  )
+
+  return (
+    <SliderPrimitive.Root
+      data-slot="slider"
+      defaultValue={defaultValue}
+      value={value}
+      min={min}
+      max={max}
+      className={cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      )}
+      {...props}
+    >
+      <SliderPrimitive.Track
+        data-slot="slider-track"
+        className={cn(
+          "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+        )}
+      >
+        <SliderPrimitive.Range
+          data-slot="slider-range"
+          className={cn(
+            "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+          )}
+        />
+      </SliderPrimitive.Track>
+      {Array.from({ length: _values.length }, (_, index) => (
+        <SliderPrimitive.Thumb
+          data-slot="slider-thumb"
+          key={index}
+          className="block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+        />
+      ))}
+    </SliderPrimitive.Root>
+  )
+}
+
+export { Slider }