Fix: emit one module per file so subpath imports stay small

.changeset/per-module-build.md

@@ -0,0 +1,5 @@
+---
+"@lambdacurry/forms": minor
+---
+
+Publish one file per source module so subpath imports stay small. `ui/checkbox`, `ui/dialog` and `ui/tabs` no longer load the shared `filter-selector-<hash>.js` chunk with the data-table filter, calendar, `react-day-picker`, `date-fns` and `input-otp`; each now loads only its own Radix primitive and `cn`. The package also declares `"sideEffects": false` so barrel imports tree-shake, and every declared dependency is left external instead of being partially inlined (previously `cmdk`, several Radix packages and a copy of `react-dom` ended up in the bundle). Public exports and subpath imports are unchanged.

package.json

@@ -22,7 +22,7 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.4",
-    "@playwright/test": "^1.54.2",
+    "@playwright/test": "^1.64.1",
     "@types/react-dom": "^19",
     "turbo": "^2.3.3"
   },

packages/components/package.json

@@ -33,6 +33,7 @@
   "files": [
     "dist"
   ],
+  "sideEffects": false,
   "scripts": {
     "prepublishOnly": "yarn run build",
     "build": "vite build",

packages/components/src/ui/badge.tsx

@@ -1,7 +1,7 @@
 import { cva, type VariantProps } from 'class-variance-authority';
 import type * as React from 'react';
 
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 const badgeVariants = cva(
   'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',

packages/components/src/ui/button.tsx

@@ -2,7 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { cva, type VariantProps } from 'class-variance-authority';
 import type * as React from 'react';
 import type { ButtonHTMLAttributes } from 'react';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",

packages/components/src/ui/calendar.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { type DayButton, DayPicker } from 'react-day-picker';
 
 import { Button, buttonVariants } from './button';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 function Calendar({
   className,

packages/components/src/ui/checkbox-field.tsx

@@ -12,7 +12,7 @@ import {
   FormLabel,
   FormMessage,
 } from './form';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface CheckboxFieldComponents extends FieldComponents {
   Checkbox?: React.ComponentType<React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>>;

packages/components/src/ui/checkbox.tsx

@@ -2,7 +2,7 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { CheckIcon } from 'lucide-react';
 import type * as React from 'react';
 
-import { cn } from '../ui';
+import { cn } from './utils/cn';
 
 function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
   return (

packages/components/src/ui/command.tsx

@@ -3,7 +3,7 @@ import { Command as CommandPrimitive } from 'cmdk';
 import type * as React from 'react';
 import { forwardRef } from 'react';
 
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 const Command = ({ className, ...props }: React.ComponentPropsWithoutRef<typeof CommandPrimitive>) => (
   <CommandPrimitive

packages/components/src/ui/data-table-filter/components/filter-actions.tsx

@@ -1,7 +1,7 @@
 import { FilterXIcon } from 'lucide-react';
 import { memo } from 'react';
 import { Button } from '../../button';
-import { cn } from '../../utils';
+import { cn } from '../../utils/cn';
 import type { DataTableFilterActions } from '../core/types';
 import { type Locale, t } from '../lib/i18n';
 

packages/components/src/ui/data-table-filter/components/filter-selector.tsx

@@ -4,7 +4,7 @@ import { Button } from '../../button';
 import { Checkbox } from '../../checkbox';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
-import { cn } from '../../utils';
+import { cn } from '../../utils/cn';
 import type {
   Column,
   ColumnDataType,

packages/components/src/ui/data-table-filter/components/filter-value.tsx

@@ -18,7 +18,7 @@ import { DebouncedInput } from '../../debounced-input';
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from '../../popover';
 import { Slider } from '../../slider';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../tabs';
-import { cn } from '../../utils';
+import { cn } from '../../utils/cn';
 import { numberFilterOperators } from '../core/operators';
 import type {
   Column,

packages/components/src/ui/data-table/data-table-faceted-filter.tsx

@@ -15,7 +15,7 @@ import {
 } from '../command';
 import { Popover, PopoverContent, PopoverTrigger } from '../popover';
 import { Separator } from '../separator';
-import { cn } from '../utils';
+import { cn } from '../utils/cn';
 
 interface DataTableFacetedFilterProps<TData> {
   column?: Column<TData, unknown>;

packages/components/src/ui/data-table/data-table.tsx

@@ -1,6 +1,6 @@
 import { flexRender, type Table as TableType } from '@tanstack/react-table';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../table';
-import { cn } from '../utils';
+import { cn } from '../utils/cn';
 import { DataTablePagination } from './data-table-pagination';
 
 interface DataTableProps<TData> {

packages/components/src/ui/date-picker-field.tsx

@@ -13,7 +13,7 @@ import {
   FormMessage,
 } from './form';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface DatePickerFieldProps<
   TFieldValues extends FieldValues = FieldValues,

packages/components/src/ui/dialog.tsx

@@ -2,7 +2,7 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { XIcon } from 'lucide-react';
 import type * as React from 'react';
 
-import { cn } from '../ui';
+import { cn } from './utils/cn';
 
 function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
   return <DialogPrimitive.Root data-slot="dialog" {...props} />;

packages/components/src/ui/dropdown-menu.tsx

@@ -1,7 +1,7 @@
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import { Check, ChevronRight, Circle } from 'lucide-react';
 import type * as React from 'react';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 const DropdownMenu = DropdownMenuPrimitive.Root;
 

packages/components/src/ui/form.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Controller, type ControllerProps, type FieldPath, type FieldValues } from 'react-hook-form';
 import { Label } from './label';
 import type { InputProps } from './text-input';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface FieldComponents {
   FormControl: React.ComponentType<FormControlProps>;

packages/components/src/ui/label.tsx

@@ -1,7 +1,7 @@
 import * as LabelPrimitive from '@radix-ui/react-label';
 import { cva, type VariantProps } from 'class-variance-authority';
 import type * as React from 'react';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 const labelVariants = cva('text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70');
 

packages/components/src/ui/otp-input-field.tsx

@@ -13,7 +13,7 @@ import {
   FormMessage,
 } from './form';
 import { OTPInput } from './otp-input';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export type { OTPInputProps };
 

packages/components/src/ui/otp-input.tsx

@@ -1,5 +1,5 @@
 import { OTPInput as OTPInputPrimitive, type OTPInputProps } from 'input-otp';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export type { OTPInputProps };
 

packages/components/src/ui/password-field.tsx

@@ -12,7 +12,7 @@ import {
   FormMessage,
 } from './form';
 import { type InputProps, TextInput } from './text-input';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface PasswordToggleButtonProps {
   isVisible: boolean;

packages/components/src/ui/phone-input-field.tsx

@@ -10,7 +10,7 @@ import {
   FormMessage,
 } from './form';
 import { type PhoneInputProps, PhoneNumberInput } from './phone-input';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface PhoneInputFieldProps extends Omit<PhoneInputProps, 'value' | 'onChange'> {
   control?: Control<FieldValues>;

packages/components/src/ui/phone-input.tsx

@@ -2,7 +2,7 @@ import { AsYouType } from 'libphonenumber-js';
 import type { ChangeEvent, InputHTMLAttributes, KeyboardEvent, Ref } from 'react';
 import { useCallback, useEffect, useRef } from 'react';
 
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 // Constants
 const US_PHONE_LENGTH = 10;

packages/components/src/ui/popover.tsx

@@ -1,6 +1,6 @@
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import type * as React from 'react';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 const Popover = PopoverPrimitive.Root;
 

packages/components/src/ui/radio-group-field.tsx

@@ -11,7 +11,7 @@ import {
   FormMessage,
 } from './form';
 import { RadioGroup } from './radio-group';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface RadioGroupFieldComponents extends FieldComponents {
   RadioGroup?: React.ComponentType<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>>;

packages/components/src/ui/radio-group-item-field.tsx

@@ -1,7 +1,7 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import type * as React from 'react';
 import { Label } from './label';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface RadioGroupItemFieldComponents {
   RadioGroupItem?: React.ComponentType<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>>;

packages/components/src/ui/radio-group.tsx

@@ -1,7 +1,7 @@
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import { Circle } from 'lucide-react';
 import type * as React from 'react';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface RadioGroupItemComponents {
   RadioGroupItem?: React.ComponentType<

packages/components/src/ui/select.tsx

@@ -3,7 +3,7 @@ import { Popover } from '@radix-ui/react-popover';
 import { Check as DefaultCheckIcon, ChevronDown as DefaultChevronIcon } from 'lucide-react';
 import { useOverlayTriggerState } from 'react-stately';
 import { PopoverTrigger } from './popover';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from './command';
 import {
   forwardRef,

packages/components/src/ui/separator.tsx

@@ -1,7 +1,7 @@
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as React from 'react';
 
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,

packages/components/src/ui/slider.tsx

@@ -3,7 +3,7 @@
 import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as React from 'react';
 
-import { cn } from '../ui/';
+import { cn } from './utils/cn';
 
 function Slider({
   className,

packages/components/src/ui/switch-field.tsx

@@ -2,7 +2,7 @@ import * as SwitchPrimitives from '@radix-ui/react-switch';
 import type * as React from 'react';
 import type { Control, FieldPath, FieldValues } from 'react-hook-form';
 import { type FieldComponents, FormControl, FormDescription, FormField, FormItem, FormLabel } from './form';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 // Default styled Switch component
 const DefaultSwitchPrimitive = (props: React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>) => (

packages/components/src/ui/switch.tsx

@@ -1,6 +1,6 @@
 import * as SwitchPrimitives from '@radix-ui/react-switch';
 import type * as React from 'react';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitives.Root>) {
   return (

packages/components/src/ui/table.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (

packages/components/src/ui/tabs.tsx

@@ -3,7 +3,7 @@
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import type * as React from 'react';
 
-import { cn } from '../ui';
+import { cn } from './utils/cn';
 
 function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
   return <TabsPrimitive.Root data-slot="tabs" className={cn('flex flex-col gap-2', className)} {...props} />;

packages/components/src/ui/text-field.tsx

@@ -10,7 +10,7 @@ import {
   FormMessage,
 } from './form';
 import { type InputProps, TextInput } from './text-input';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export const FieldPrefix = ({ children, className }: { children: React.ReactNode; className?: string }) => {
   return (

packages/components/src/ui/text-input.tsx

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   ref?: React.Ref<HTMLInputElement>;

packages/components/src/ui/textarea.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { cn } from './utils';
+import { cn } from './utils/cn';
 
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
   CustomTextarea?: React.ForwardRefExoticComponent<

packages/components/src/ui/utils/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

packages/components/src/ui/utils/index.ts

@@ -1,10 +1,4 @@
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
+export * from './cn';
 export * from './debounce';
 export * from './filters';
 export * from './use-filter-sync';