@codefast/ui 0.0.9 → 0.0.11

package/src/radio-group.tsx

@@ -8,35 +8,29 @@ import { cn } from "./utils";
  * Component: RadioGroup
  * -------------------------------------------------------------------------- */
 
-type RadioGroupProps = RadioGroupPrimitive.RadioGroupProps;
-const RadioGroup = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Root>,
-  RadioGroupProps
->(({ className, ...props }, ref) => {
-  return (
-    <RadioGroupPrimitive.Root
-      className={cn("grid gap-2", className)}
-      {...props}
-      ref={ref}
-    />
-  );
+type RadioGroupElement = React.ElementRef<typeof RadioGroupPrimitive.Root>;
+type RadioGroupProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
+
+const RadioGroup = React.forwardRef<RadioGroupElement, RadioGroupProps>(({ className, ...props }, ref) => {
+  return <RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />;
 });
+
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: RadioGroupItem
  * -------------------------------------------------------------------------- */
 
-type RadioGroupItemProps = RadioGroupPrimitive.RadioGroupItemProps;
-const RadioGroupItem = React.forwardRef<
-  React.ElementRef<typeof RadioGroupPrimitive.Item>,
-  RadioGroupItemProps
->(({ className, ...props }, ref) => {
+type RadioGroupItemElement = React.ElementRef<typeof RadioGroupPrimitive.Item>;
+type RadioGroupItemProps = React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
+
+const RadioGroupItem = React.forwardRef<RadioGroupItemElement, RadioGroupItemProps>(({ className, ...props }, ref) => {
   return (
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "border-compound text-compound-foreground focus-visible:ring-offset-background focus-visible:ring-ring aria-checked:border-primary group aspect-square size-4 rounded-full border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "border-compound/70 hover:border-compound text-compound-foreground aria-checked:border-primary group peer aspect-square size-4 rounded-full border disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
         className,
       )}
       {...props}
@@ -49,15 +43,11 @@ const RadioGroupItem = React.forwardRef<
     </RadioGroupPrimitive.Item>
   );
 });
+
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  RadioGroup,
-  RadioGroupItem,
-  type RadioGroupProps,
-  type RadioGroupItemProps,
-};
+export { RadioGroup, RadioGroupItem, type RadioGroupProps, type RadioGroupItemProps };

package/src/radio.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: Radio
+ * -------------------------------------------------------------------------- */
+
+type RadioElement = HTMLInputElement;
+
+interface RadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  onValueChange?: (value: string) => void;
+}
+
+const Radio = React.forwardRef<RadioElement, RadioProps>(({ className, onValueChange, onChange, ...props }, ref) => {
+  return (
+    <input
+      ref={ref}
+      type="radio"
+      onChange={composeEventHandlers(onChange, (event) => onValueChange?.(event.currentTarget.value))}
+      className={cn(
+        "peer relative flex appearance-none items-center justify-center rounded-full",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "before:border-compound/70 before:size-4 before:rounded-full before:border",
+        "hover:before:border-compound",
+        "checked:before:border-primary",
+        "checked:after:bg-primary checked:after:absolute checked:after:size-2.5 checked:after:rounded-full",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+
+Radio.displayName = "Radio";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Radio };

package/src/resizable.tsx

@@ -12,13 +12,10 @@ import { cn } from "./utils";
 function ResizablePanelGroup({
   className,
   ...props
-}: ResizablePrimitive.PanelGroupProps): React.JSX.Element {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>): React.JSX.Element {
   return (
     <ResizablePrimitive.PanelGroup
-      className={cn(
-        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
-        className,
-      )}
+      className={cn("flex h-full w-full", "data-[panel-group-direction=vertical]:flex-col", className)}
       {...props}
     />
   );
@@ -38,13 +35,14 @@ function ResizableHandle({
   withHandle,
   className,
   ...props
-}: ResizablePrimitive.PanelResizeHandleProps & {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
   withHandle?: boolean;
 }): React.JSX.Element {
   return (
     <ResizablePrimitive.PanelResizeHandle
       className={cn(
-        "bg-border focus-visible:ring-ring focus-visible:ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "bg-border relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+        "focus-visible:ring-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
         className,
       )}
       {...props}

package/src/scroll-area.tsx

@@ -8,60 +8,49 @@ import { cn } from "./utils";
  * Component: ScrollArea
  * -------------------------------------------------------------------------- */
 
-type ScrollAreaProps = ScrollAreaPrimitive.ScrollAreaProps;
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  ScrollAreaProps
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn("relative overflow-hidden", className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
+type ScrollAreaElement = React.ElementRef<typeof ScrollAreaPrimitive.Root>;
+type ScrollAreaProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>;
+
+const ScrollArea = React.forwardRef<ScrollAreaElement, ScrollAreaProps>(({ className, children, ...props }, ref) => (
+  <ScrollAreaPrimitive.Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+    <ScrollAreaPrimitive.Viewport className="size-full rounded-[inherit]">{children}</ScrollAreaPrimitive.Viewport>
     <ScrollAreaScrollbar orientation="vertical" />
     <ScrollAreaScrollbar orientation="horizontal" />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));
+
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: ScrollAreaScrollbar
  * -------------------------------------------------------------------------- */
 
-type ScrollAreaScrollbarProps = ScrollAreaPrimitive.ScrollAreaScrollbarProps;
-const ScrollAreaScrollbar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>,
-  ScrollAreaScrollbarProps
->(({ className, orientation = "vertical", ...props }, ref) => (
-  <ScrollAreaPrimitive.Scrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-px",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-px",
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
-  </ScrollAreaPrimitive.Scrollbar>
-));
+type ScrollAreaScrollbarElement = React.ElementRef<typeof ScrollAreaPrimitive.Scrollbar>;
+type ScrollAreaScrollbarProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Scrollbar>;
+
+const ScrollAreaScrollbar = React.forwardRef<ScrollAreaScrollbarElement, ScrollAreaScrollbarProps>(
+  ({ className, orientation = "vertical", ...props }, ref) => (
+    <ScrollAreaPrimitive.Scrollbar
+      ref={ref}
+      orientation={orientation}
+      className={cn(
+        "flex touch-none select-none transition-colors",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-px",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-px",
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb className="bg-border relative flex-1 rounded-full" />
+    </ScrollAreaPrimitive.Scrollbar>
+  ),
+);
+
 ScrollAreaScrollbar.displayName = ScrollAreaPrimitive.Scrollbar.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  ScrollArea,
-  ScrollAreaScrollbar,
-  type ScrollAreaProps,
-  type ScrollAreaScrollbarProps,
-};
+export { ScrollArea, ScrollAreaScrollbar, type ScrollAreaProps, type ScrollAreaScrollbarProps };

package/src/section.tsx

@@ -5,16 +5,18 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Section
  * -------------------------------------------------------------------------- */
 
+type SectionElement = HTMLElement;
+
 interface SectionProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
-const Section = React.forwardRef<HTMLElement, SectionProps>(
-  ({ asChild, ...props }, ref) => {
-    const Comp = asChild ? Slot : "section";
 
-    return <Comp ref={ref} {...props} />;
-  },
-);
+const Section = React.forwardRef<SectionElement, SectionProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot : "section";
+
+  return <Component ref={ref} {...props} />;
+});
+
 Section.displayName = "Section";
 
 /* -----------------------------------------------------------------------------

package/src/segmented.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import * as React from "react";
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { createContextScope, type Scope } from "@radix-ui/react-context";
+import { composeEventHandlers } from "@radix-ui/primitive";
+import { cn } from "./utils";
+
+type RemovedProps = "value" | "asChild" | "defaultChecked" | "defaultValue";
+
+/* -----------------------------------------------------------------------------
+ * Component: Segmented
+ * -------------------------------------------------------------------------- */
+
+const SEGMENTED_NAME = "Segmented";
+
+type ScopedProps<P> = P & { __scopeSegmented?: Scope };
+
+const [createSegmentedContext] = createContextScope(SEGMENTED_NAME);
+
+interface Offset {
+  left: number;
+  top: number;
+}
+
+interface SegmentedContextValue {
+  offset: Offset;
+  setOffset: React.Dispatch<React.SetStateAction<Offset>>;
+}
+
+const [SegmentedProvider, useSegmentedContext] = createSegmentedContext<SegmentedContextValue>(SEGMENTED_NAME);
+
+type SegmentedElement = React.ElementRef<typeof ToggleGroupPrimitive.Root>;
+type SegmentedProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>,
+  RemovedProps | "disabled" | "type" | "onValueChange"
+> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+};
+
+const Segmented = React.forwardRef<SegmentedElement, SegmentedProps>(
+  (
+    {
+      __scopeSegmented,
+      children,
+      className,
+      value: valueProp,
+      onValueChange: onValueChangeProp,
+      defaultValue: defaultValueProp,
+      ...props
+    }: ScopedProps<SegmentedProps>,
+    ref,
+  ) => {
+    const [value, setValue] = useControllableState({
+      prop: valueProp,
+      onChange: onValueChangeProp,
+      defaultProp: defaultValueProp,
+    });
+    const childCount = React.Children.count(children);
+    const [offset, setOffset] = React.useState<Offset>({
+      left: 0,
+      top: 0,
+    });
+
+    return (
+      <SegmentedProvider scope={__scopeSegmented} offset={offset} setOffset={setOffset}>
+        <ToggleGroupPrimitive.Root
+          ref={ref}
+          className={cn(
+            "bg-background relative isolate inline-grid h-10 min-w-max auto-cols-fr grid-flow-col items-stretch rounded-md border text-center align-top shadow-sm",
+            className,
+          )}
+          value={value}
+          onValueChange={(valueChanged) => {
+            if (valueChanged) {
+              setValue(valueChanged);
+            }
+          }}
+          type="single"
+          {...props}
+          style={
+            {
+              "--offset-left": `${offset.left.toString()}px`,
+              "--offset-top": `${offset.top.toString()}px`,
+              ...props.style,
+            } as React.CSSProperties
+          }
+        >
+          {children}
+          <div
+            className={cn(
+              "pointer-events-none absolute -z-[1] h-full translate-x-[var(--offset-left)] transition-transform",
+              "before:bg-accent before:absolute before:inset-0 before:rounded",
+            )}
+            style={
+              {
+                width: `calc(100% / ${childCount.toString()})`,
+              } as React.CSSProperties
+            }
+          />
+        </ToggleGroupPrimitive.Root>
+      </SegmentedProvider>
+    );
+  },
+);
+
+Segmented.displayName = SEGMENTED_NAME;
+
+/* -----------------------------------------------------------------------------
+ * Component: SegmentedItem
+ * -------------------------------------------------------------------------- */
+
+const SEGMENTED_ITEM_NAME = "SegmentedItem";
+
+type SegmentedItemElement = React.ElementRef<typeof ToggleGroupPrimitive.Item>;
+type SegmentedItemProps = Omit<
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>,
+  RemovedProps | "disabled" | "type"
+> & {
+  value: string;
+};
+
+const SegmentedItem = React.forwardRef<SegmentedItemElement, SegmentedItemProps>(
+  ({ __scopeSegmented, children, className, onClick, ...props }: ScopedProps<SegmentedItemProps>, ref) => {
+    const { setOffset } = useSegmentedContext(SEGMENTED_ITEM_NAME, __scopeSegmented);
+
+    return (
+      <ToggleGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          "group flex select-none items-stretch rounded text-sm first:rounded-l-[inherit] [&:nth-last-child(2)]:rounded-r-[inherit]",
+          "hover:bg-accent/30",
+          "group-aria-checked:text-accent-foreground",
+          className,
+        )}
+        onClick={composeEventHandlers(onClick, (event) => {
+          setOffset({
+            left: event.currentTarget.offsetLeft,
+            top: event.currentTarget.offsetTop,
+          });
+        })}
+        {...props}
+      >
+        {/* Separator */}
+        <span
+          className={cn(
+            "bg-border my-1.5 w-px transition",
+            "group-first:opacity-0",
+            "group-[:where([data-state=on])+*]:opacity-0 group-aria-checked:opacity-0",
+            "group-focus-visible:opacity-0 group-[&:focus-visible+*]:opacity-0",
+            "group-[:where([data-state=on])+*]:scale-0 group-aria-checked:scale-0",
+            "group-focus-visible:scale-0 group-[&:focus-visible+*]:scale-0",
+          )}
+        />
+        {/* Label */}
+        <span className="flex grow items-center justify-center gap-2 px-3 py-1 [&_svg]:shrink-0">
+          {/* LabelActive */}
+          <span className="font-medium opacity-0 transition-opacity group-aria-checked:opacity-100">{children}</span>
+          {/* LabelInactive */}
+          <span className="absolute opacity-100 transition-opacity group-aria-checked:opacity-0">{children}</span>
+        </span>
+      </ToggleGroupPrimitive.Item>
+    );
+  },
+);
+
+SegmentedItem.displayName = SEGMENTED_ITEM_NAME;
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { Segmented, SegmentedItem, type SegmentedProps, type SegmentedItemProps };