@codefast/ui 0.0.8 → 0.0.10

package/src/checkbox-group.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import { CheckIcon } from "@radix-ui/react-icons";
+import * as CheckboxGroupPrimitive from "./checkbox-group.primitive";
+import { cn } from "./utils";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxGroup
+ * -------------------------------------------------------------------------- */
+
+type CheckboxGroupElement = React.ElementRef<typeof CheckboxGroupPrimitive.Root>;
+type CheckboxGroupProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Root>;
+
+const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(({ className, ...props }, ref) => {
+  return <CheckboxGroupPrimitive.Root ref={ref} className={cn("grid gap-2", className)} {...props} />;
+});
+
+CheckboxGroup.displayName = "CheckboxGroup";
+
+/* -----------------------------------------------------------------------------
+ * Component: CheckboxGroupItem
+ * -------------------------------------------------------------------------- */
+
+type CheckboxGroupItemElement = React.ElementRef<typeof CheckboxGroupPrimitive.Item>;
+type CheckboxGroupItemProps = React.ComponentPropsWithoutRef<typeof CheckboxGroupPrimitive.Item>;
+
+const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <CheckboxGroupPrimitive.Item
+        ref={ref}
+        className={cn(
+          "border-compound/70 peer size-4 shrink-0 rounded-sm border shadow",
+          "hover:border-compound",
+          "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
+          "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}
+      >
+        <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
+          <CheckIcon className="size-3.5" />
+        </CheckboxGroupPrimitive.CheckboxGroupIndicator>
+      </CheckboxGroupPrimitive.Item>
+    );
+  },
+);
+
+CheckboxGroupItem.displayName = "CheckboxGroupItem";
+
+/* -----------------------------------------------------------------------------
+ * Exports
+ * -------------------------------------------------------------------------- */
+
+export { CheckboxGroup, CheckboxGroupItem, type CheckboxGroupProps, type CheckboxGroupItemProps };

package/src/checkbox.tsx

@@ -9,14 +9,18 @@ import { cn } from "./utils";
  * Component: Checkbox
  * -------------------------------------------------------------------------- */
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  CheckboxPrimitive.CheckboxProps
->(({ className, ...props }, ref) => (
+type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "border-compound focus-visible:ring-ring aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer size-4 shrink-0 rounded-sm border shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+      "border-compound/70 peer size-4 shrink-0 rounded-sm border shadow",
+      "hover:border-compound",
+      "aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground",
+      "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}
@@ -26,10 +30,11 @@ const Checkbox = React.forwardRef<
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));
+
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Checkbox };
+export { Checkbox, type CheckboxProps };

package/src/code.tsx

@@ -5,18 +5,22 @@ import { Slot } from "@radix-ui/react-slot";
  * Component: Code
  * -------------------------------------------------------------------------- */
 
-const Code = React.forwardRef<
-  HTMLElement,
-  React.HTMLAttributes<HTMLElement> & { asChild?: boolean }
->(({ asChild, ...props }, ref) => {
+type CodeElement = HTMLElement;
+
+interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  asChild?: boolean;
+}
+
+const Code = React.forwardRef<CodeElement, CodeProps>(({ asChild, ...props }, ref) => {
   const Comp = asChild ? Slot : "code";
 
   return <Comp ref={ref} {...props} />;
 });
+
 Code.displayName = "Code";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Code };
+export { Code, type CodeProps };

package/src/collapsible.tsx

@@ -1,27 +1,38 @@
 "use client";
 
+import type * as React from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
 /* -----------------------------------------------------------------------------
  * Component: Collapsible
  * -------------------------------------------------------------------------- */
 
+type CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
 const Collapsible = CollapsiblePrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: CollapsibleTrigger
  * -------------------------------------------------------------------------- */
 
+type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
 /* -----------------------------------------------------------------------------
  * Component: CollapsibleContent
  * -------------------------------------------------------------------------- */
 
+type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>;
 const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Collapsible, CollapsibleTrigger, CollapsibleContent };
+export {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  type CollapsibleProps,
+  type CollapsibleTriggerProps,
+  type CollapsibleContentProps,
+};

package/src/command.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import * as React from "react";
-import { type DialogProps } from "@radix-ui/react-dialog";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Command as CommandPrimitive } from "cmdk";
 import { cn } from "./utils";
@@ -11,10 +10,10 @@ import { Dialog, DialogContent } from "./dialog";
  * Component: Command
  * -------------------------------------------------------------------------- */
 
-const Command = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
->(({ className, ...props }, ref) => (
+type CommandElement = React.ElementRef<typeof CommandPrimitive>;
+type CommandProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive>;
+
+const Command = React.forwardRef<CommandElement, CommandProps>(({ className, ...props }, ref) => (
   <CommandPrimitive
     ref={ref}
     className={cn(
@@ -24,17 +23,20 @@ const Command = React.forwardRef<
     {...props}
   />
 ));
+
 Command.displayName = CommandPrimitive.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: CommandDialog
  * -------------------------------------------------------------------------- */
 
-function CommandDialog({ children, ...props }: DialogProps): React.JSX.Element {
+type CommandDialogProps = React.ComponentProps<typeof Dialog>;
+
+function CommandDialog({ children, ...props }: CommandDialogProps): React.JSX.Element {
   return (
     <Dialog {...props}>
-      <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
+      <DialogContent className="p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground focus:outline-none [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:size-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:size-5">
           {children}
         </Command>
       </DialogContent>
@@ -46,10 +48,10 @@ function CommandDialog({ children, ...props }: DialogProps): React.JSX.Element {
  * Component: CommandInput
  * -------------------------------------------------------------------------- */
 
-const CommandInput = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Input>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
->(({ className, ...props }, ref) => (
+type CommandInputElement = React.ElementRef<typeof CommandPrimitive.Input>;
+type CommandInputProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;
+
+const CommandInput = React.forwardRef<CommandInputElement, CommandInputProps>(({ className, ...props }, ref) => (
   <div className="flex items-center gap-2 border-b px-3" cmdk-input-wrapper="">
     <MagnifyingGlassIcon className="size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
@@ -62,48 +64,47 @@ const CommandInput = React.forwardRef<
     />
   </div>
 ));
+
 CommandInput.displayName = CommandPrimitive.Input.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: CommandList
  * -------------------------------------------------------------------------- */
 
-const CommandList = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
->(({ className, ...props }, ref) => (
+type CommandListElement = React.ElementRef<typeof CommandPrimitive.List>;
+type CommandListProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>;
+
+const CommandList = React.forwardRef<CommandListElement, CommandListProps>(({ className, ...props }, ref) => (
   <CommandPrimitive.List
     ref={ref}
     className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
     {...props}
   />
 ));
+
 CommandList.displayName = CommandPrimitive.List.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: CommandEmpty
  * -------------------------------------------------------------------------- */
 
-const CommandEmpty = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Empty>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
->((props, ref) => (
-  <CommandPrimitive.Empty
-    ref={ref}
-    className="py-6 text-center text-sm"
-    {...props}
-  />
+type CommandEmptyElement = React.ElementRef<typeof CommandPrimitive.Empty>;
+type CommandEmptyProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>;
+
+const CommandEmpty = React.forwardRef<CommandEmptyElement, CommandEmptyProps>((props, ref) => (
+  <CommandPrimitive.Empty ref={ref} className="py-6 text-center text-sm" {...props} />
 ));
+
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: CommandGroup
  * -------------------------------------------------------------------------- */
 
-const CommandGroup = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Group>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
->(({ className, ...props }, ref) => (
+type CommandGroupElement = React.ElementRef<typeof CommandPrimitive.Group>;
+type CommandGroupProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>;
+
+const CommandGroup = React.forwardRef<CommandGroupElement, CommandGroupProps>(({ className, ...props }, ref) => (
   <CommandPrimitive.Group
     ref={ref}
     className={cn(
@@ -113,32 +114,32 @@ const CommandGroup = React.forwardRef<
     {...props}
   />
 ));
+
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: CommandSeparator
  * -------------------------------------------------------------------------- */
 
-const CommandSeparator = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Separator
-    ref={ref}
-    className={cn("bg-border -mx-1 h-px", className)}
-    {...props}
-  />
-));
+type CommandSeparatorElement = React.ElementRef<typeof CommandPrimitive.Separator>;
+type CommandSeparatorProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>;
+
+const CommandSeparator = React.forwardRef<CommandSeparatorElement, CommandSeparatorProps>(
+  ({ className, ...props }, ref) => (
+    <CommandPrimitive.Separator ref={ref} className={cn("bg-border -mx-1 h-px", className)} {...props} />
+  ),
+);
+
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: CommandItem
  * -------------------------------------------------------------------------- */
 
-const CommandItem = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
->(({ className, ...props }, ref) => (
+type CommandItemElement = React.ElementRef<typeof CommandPrimitive.Item>;
+type CommandItemProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;
+
+const CommandItem = React.forwardRef<CommandItemElement, CommandItemProps>(({ className, ...props }, ref) => (
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
@@ -148,41 +149,30 @@ const CommandItem = React.forwardRef<
     {...props}
   />
 ));
+
 CommandItem.displayName = CommandPrimitive.Item.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: CommandLoading
  * -------------------------------------------------------------------------- */
 
-const CommandLoading = React.forwardRef<
-  React.ElementRef<typeof CommandPrimitive.Loading>,
-  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>
->(({ className, ...props }, ref) => (
-  <CommandPrimitive.Loading
-    ref={ref}
-    className={cn("flex justify-center p-2", className)}
-    {...props}
-  />
+type CommandLoadingElement = React.ElementRef<typeof CommandPrimitive.Loading>;
+type CommandLoadingProps = React.ComponentPropsWithoutRef<typeof CommandPrimitive.Loading>;
+
+const CommandLoading = React.forwardRef<CommandLoadingElement, CommandLoadingProps>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Loading ref={ref} className={cn("flex justify-center p-2", className)} {...props} />
 ));
+
 CommandLoading.displayName = CommandPrimitive.Loading.displayName;
 
 /* -----------------------------------------------------------------------------
  * Component: CommandShortcut
  * -------------------------------------------------------------------------- */
 
-function CommandShortcut({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLSpanElement>): React.JSX.Element {
-  return (
-    <span
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className,
-      )}
-      {...props}
-    />
-  );
+type CommandShortcutProps = React.HTMLAttributes<HTMLSpanElement>;
+
+function CommandShortcut({ className, ...props }: CommandShortcutProps): React.JSX.Element {
+  return <span className={cn("text-muted-foreground ml-auto text-xs tracking-widest", className)} {...props} />;
 }
 
 /* -----------------------------------------------------------------------------
@@ -200,4 +190,14 @@ export {
   CommandLoading,
   CommandShortcut,
   CommandSeparator,
+  type CommandProps,
+  type CommandDialogProps,
+  type CommandInputProps,
+  type CommandListProps,
+  type CommandEmptyProps,
+  type CommandGroupProps,
+  type CommandItemProps,
+  type CommandLoadingProps,
+  type CommandShortcutProps,
+  type CommandSeparatorProps,
 };

package/src/container.tsx

@@ -6,20 +6,22 @@ import { cn } from "./utils";
  * Component: Container
  * -------------------------------------------------------------------------- */
 
-const Container = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    asChild?: boolean;
-  }
->(({ className, asChild, ...props }, ref) => {
+type ContainerElement = HTMLDivElement;
+
+interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+  asChild?: boolean;
+}
+
+const Container = React.forwardRef<ContainerElement, ContainerProps>(({ className, asChild, ...props }, ref) => {
   const Comp = asChild ? Slot : "div";
 
   return <Comp ref={ref} className={cn("container", className)} {...props} />;
 });
+
 Container.displayName = "Container";
 
 /* -----------------------------------------------------------------------------
  * Exports
  * -------------------------------------------------------------------------- */
 
-export { Container };
+export { Container, type ContainerProps };