@codefast/ui 0.0.50 → 0.0.52

package/src/react/checkbox-group.primitive.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { createCheckboxScope } from '@radix-ui/react-checkbox';
-import { createContextScope, type Scope } from '@radix-ui/react-context';
+import { createContextScope } from '@radix-ui/react-context';
 import * as RovingFocusGroup from '@radix-ui/react-roving-focus';
 import { createRovingFocusGroupScope } from '@radix-ui/react-roving-focus';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { useDirection } from '@radix-ui/react-direction';
 import { Primitive } from '@radix-ui/react-primitive';
+import type { Scope } from '@radix-ui/react-context';
 
 /* -------------------------------------------------------------------------------------------------
  * Component: CheckboxGroup
@@ -16,11 +17,10 @@ const CHECKBOX_GROUP_NAME = 'CheckboxGroup';
 
 type ScopedProps<P> = P & { __scopeCheckboxGroup?: Scope };
 
-const [createCheckboxGroupContext, createCheckboxGroupScope] =
-  createContextScope(CHECKBOX_GROUP_NAME, [
-    createRovingFocusGroupScope,
-    createCheckboxScope,
-  ]);
+const [createCheckboxGroupContext, createCheckboxGroupScope] = createContextScope(CHECKBOX_GROUP_NAME, [
+  createRovingFocusGroupScope,
+  createCheckboxScope,
+]);
 
 const useRovingFocusGroupScope = createRovingFocusGroupScope();
 const useCheckboxScope = createCheckboxScope();
@@ -39,15 +39,10 @@ const [CheckboxGroupProvider, useCheckboxGroupContext] =
 
 type CheckboxGroupElement = React.ElementRef<typeof Primitive.div>;
 
-interface CheckboxGroupProps
-  extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
+interface CheckboxGroupProps extends React.ComponentPropsWithoutRef<typeof Primitive.div> {
   name?: CheckboxGroupContextValue['name'];
-  required?: React.ComponentPropsWithoutRef<
-    typeof CheckboxPrimitive.Root
-  >['required'];
-  disabled?: React.ComponentPropsWithoutRef<
-    typeof CheckboxPrimitive.Root
-  >['disabled'];
+  required?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['required'];
+  disabled?: React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>['disabled'];
   dir?: RovingFocusGroup.RovingFocusGroupProps['dir'];
   orientation?: RovingFocusGroup.RovingFocusGroupProps['orientation'];
   loop?: RovingFocusGroup.RovingFocusGroupProps['loop'];
@@ -56,10 +51,7 @@ interface CheckboxGroupProps
   onValueChange?: (value: string[]) => void;
 }
 
-const CheckboxGroup = React.forwardRef<
-  CheckboxGroupElement,
-  CheckboxGroupProps
->(
+const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(
   (
     {
       __scopeCheckboxGroup,
@@ -76,8 +68,7 @@ const CheckboxGroup = React.forwardRef<
     }: ScopedProps<CheckboxGroupProps>,
     ref,
   ) => {
-    const rovingFocusGroupScope =
-      useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
     const direction = useDirection(dir);
     const [value = [], setValue] = useControllableState({
       prop: valueProp,
@@ -94,9 +85,7 @@ const CheckboxGroup = React.forwardRef<
 
     const handleItemUncheck = React.useCallback(
       (itemValue: string) => {
-        setValue((prevValue = []) =>
-          prevValue.filter((val) => val !== itemValue),
-        );
+        setValue((prevValue = []) => prevValue.filter((val) => val !== itemValue));
       },
       [setValue],
     );
@@ -111,21 +100,9 @@ const CheckboxGroup = React.forwardRef<
         onItemCheck={handleItemCheck}
         onItemUncheck={handleItemUncheck}
       >
-        <RovingFocusGroup.Root
-          asChild
-          {...rovingFocusGroupScope}
-          orientation={orientation}
-          dir={direction}
-          loop={loop}
-        >
+        <RovingFocusGroup.Root asChild {...rovingFocusGroupScope} orientation={orientation} dir={direction} loop={loop}>
           {/* eslint-disable-next-line react/jsx-pascal-case -- radix-ui */}
-          <Primitive.div
-            ref={ref}
-            role="group"
-            data-disabled={disabled ? '' : undefined}
-            dir={direction}
-            {...props}
-          />
+          <Primitive.div ref={ref} role="group" data-disabled={disabled ? '' : undefined} dir={direction} {...props} />
         </RovingFocusGroup.Root>
       </CheckboxGroupProvider>
     );
@@ -150,32 +127,16 @@ interface CheckboxGroupItemProps
   value: string;
 }
 
-const CheckboxGroupItem = React.forwardRef<
-  CheckboxGroupItemElement,
-  CheckboxGroupItemProps
->(
-  (
-    {
-      __scopeCheckboxGroup,
-      disabled,
-      ...props
-    }: ScopedProps<CheckboxGroupItemProps>,
-    ref,
-  ) => {
+const CheckboxGroupItem = React.forwardRef<CheckboxGroupItemElement, CheckboxGroupItemProps>(
+  ({ __scopeCheckboxGroup, disabled, ...props }: ScopedProps<CheckboxGroupItemProps>, ref) => {
     const context = useCheckboxGroupContext(ITEM_NAME, __scopeCheckboxGroup);
     const isDisabled = context.disabled || disabled;
-    const rovingFocusGroupScope =
-      useRovingFocusGroupScope(__scopeCheckboxGroup);
+    const rovingFocusGroupScope = useRovingFocusGroupScope(__scopeCheckboxGroup);
     const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
     const checked = context.value?.includes(props.value);
 
     return (
-      <RovingFocusGroup.Item
-        asChild
-        {...rovingFocusGroupScope}
-        focusable={!isDisabled}
-        active={checked}
-      >
+      <RovingFocusGroup.Item asChild {...rovingFocusGroupScope} focusable={!isDisabled} active={checked}>
         <CheckboxPrimitive.Root
           ref={ref}
           name={context.name}
@@ -205,29 +166,14 @@ CheckboxGroupItem.displayName = ITEM_NAME;
 
 const INDICATOR_NAME = `${CHECKBOX_GROUP_NAME}Indicator`;
 
-type CheckboxGroupIndicatorElement = React.ElementRef<
-  typeof CheckboxPrimitive.Indicator
->;
-type CheckboxGroupIndicatorProps = React.ComponentPropsWithoutRef<
-  typeof CheckboxPrimitive.Indicator
->;
-
-const CheckboxGroupIndicator = React.forwardRef<
-  CheckboxGroupIndicatorElement,
-  CheckboxGroupIndicatorProps
->(
-  (
-    {
-      __scopeCheckboxGroup,
-      ...props
-    }: ScopedProps<CheckboxGroupIndicatorProps>,
-    ref,
-  ) => {
+type CheckboxGroupIndicatorElement = React.ElementRef<typeof CheckboxPrimitive.Indicator>;
+type CheckboxGroupIndicatorProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Indicator>;
+
+const CheckboxGroupIndicator = React.forwardRef<CheckboxGroupIndicatorElement, CheckboxGroupIndicatorProps>(
+  ({ __scopeCheckboxGroup, ...props }: ScopedProps<CheckboxGroupIndicatorProps>, ref) => {
     const checkboxScope = useCheckboxScope(__scopeCheckboxGroup);
 
-    return (
-      <CheckboxPrimitive.Indicator ref={ref} {...checkboxScope} {...props} />
-    );
+    return <CheckboxPrimitive.Indicator ref={ref} {...checkboxScope} {...props} />;
   },
 );
 

package/src/react/checkbox-group.tsx

@@ -9,24 +9,11 @@ import * as CheckboxGroupPrimitive from './checkbox-group.primitive';
  * Component: CheckboxGroup
  * -------------------------------------------------------------------------- */
 
-type CheckboxGroupElement = React.ElementRef<
-  typeof CheckboxGroupPrimitive.Root
->;
-type CheckboxGroupProps = React.ComponentPropsWithoutRef<
-  typeof CheckboxGroupPrimitive.Root
->;
+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}
-    />
-  );
+const CheckboxGroup = React.forwardRef<CheckboxGroupElement, CheckboxGroupProps>(({ className, ...props }, ref) => {
+  return <CheckboxGroupPrimitive.Root ref={ref} className={cn('grid gap-2', className)} {...props} />;
 });
 
 CheckboxGroup.displayName = 'CheckboxGroup';
@@ -35,32 +22,27 @@ 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-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxGroupPrimitive.CheckboxGroupIndicator className="flex size-full items-center justify-center text-current">
-        <CheckIcon className="size-3.5" />
-      </CheckboxGroupPrimitive.CheckboxGroupIndicator>
-    </CheckboxGroupPrimitive.Item>
-  );
-});
+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-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50',
+          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';
 
@@ -68,9 +50,4 @@ CheckboxGroupItem.displayName = 'CheckboxGroupItem';
  * Exports
  * -------------------------------------------------------------------------- */
 
-export {
-  CheckboxGroup,
-  CheckboxGroupItem,
-  type CheckboxGroupProps,
-  type CheckboxGroupItemProps,
-};
+export { CheckboxGroup, CheckboxGroupItem, type CheckboxGroupProps, type CheckboxGroupItemProps };

package/src/react/checkbox.tsx

@@ -10,26 +10,22 @@ import { cn } from '../lib/utils';
  * -------------------------------------------------------------------------- */
 
 type CheckboxElement = React.ElementRef<typeof CheckboxPrimitive.Root>;
-type CheckboxProps = React.ComponentPropsWithoutRef<
-  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-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator className="flex size-full items-center justify-center text-current">
-        <CheckIcon className="size-3.5" />
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  ),
-);
+const Checkbox = React.forwardRef<CheckboxElement, CheckboxProps>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      'border-input hover:border-primary aria-checked:border-primary aria-checked:bg-primary aria-checked:text-primary-foreground peer flex size-4 shrink-0 rounded-sm border shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator className="flex size-full items-center justify-center text-current">
+      <CheckIcon className="size-3.5" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+));
 
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 

package/src/react/code.tsx

@@ -11,13 +11,11 @@ interface CodeProps extends React.HTMLAttributes<HTMLElement> {
   asChild?: boolean;
 }
 
-const Code = React.forwardRef<CodeElement, CodeProps>(
-  ({ asChild, ...props }, ref) => {
-    const Component = asChild ? Slot : 'code';
+const Code = React.forwardRef<CodeElement, CodeProps>(({ asChild, ...props }, ref) => {
+  const Component = asChild ? Slot : 'code';
 
-    return <Component ref={ref} {...props} />;
-  },
-);
+  return <Component ref={ref} {...props} />;
+});
 
 Code.displayName = 'Code';
 

package/src/react/collapsible.tsx

@@ -8,47 +8,37 @@ import { cn } from '../lib/utils';
  * Component: Collapsible
  * -------------------------------------------------------------------------- */
 
-type CollapsibleProps = React.ComponentPropsWithoutRef<
-  typeof CollapsiblePrimitive.Root
->;
+type CollapsibleProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
 const Collapsible = CollapsiblePrimitive.Root;
 
 /* -----------------------------------------------------------------------------
  * Component: CollapsibleTrigger
  * -------------------------------------------------------------------------- */
 
-type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<
-  typeof CollapsiblePrimitive.CollapsibleTrigger
->;
+type CollapsibleTriggerProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleTrigger>;
 const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
 
 /* -----------------------------------------------------------------------------
  * Component: CollapsibleContent
  * -------------------------------------------------------------------------- */
 
-type CollapsibleContentElement = React.ElementRef<
-  typeof CollapsiblePrimitive.CollapsibleContent
->;
-type CollapsibleContentProps = React.ComponentPropsWithoutRef<
-  typeof CollapsiblePrimitive.CollapsibleContent
->;
-
-const CollapsibleContent = React.forwardRef<
-  CollapsibleContentElement,
-  CollapsibleContentProps
->(({ className, ...props }, ref) => (
-  <CollapsiblePrimitive.CollapsibleContent
-    ref={ref}
-    className={cn(
-      'data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden',
-      className,
-    )}
-    {...props}
-  />
-));
-
-CollapsibleContent.displayName =
-  CollapsiblePrimitive.CollapsibleContent.displayName;
+type CollapsibleContentElement = React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>;
+type CollapsibleContentProps = React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>;
+
+const CollapsibleContent = React.forwardRef<CollapsibleContentElement, CollapsibleContentProps>(
+  ({ className, ...props }, ref) => (
+    <CollapsiblePrimitive.CollapsibleContent
+      ref={ref}
+      className={cn(
+        'data-[state=open]:animate-collapsible-open data-[state=closed]:animate-collapsible-closed overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+
+CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
 
 /* -----------------------------------------------------------------------------
  * Exports