cn util and state recipes

utilsFoundations

The cn helper every component uses to combine classes, and the shared focus and invalid rings that make a state look the same on every control.

bunx --bun shadcn@4.17.0 add @waimakers/utils
Kit dependencies
None
npm dependencies
clsx@2.1.1tailwind-merge@3.6.0

From the registry

clsx + tailwind-merge class combiner used by every kit component, and the class recipes the kit's controls share so a state looks the same everywhere: focusRing (a 2px --text outline 2px off the edge), invalidRing (aria-invalid draws a 2px --danger edge, the border plus a solid 1px ring), and inputGroupFocusRing/inputGroupInvalidRing, the same two for a group that wraps an input. Tailwind must scan this file, so keep it inside the app's sources.

Files it writes

  • lib/utils.tslib