onno

Tiny (510B) utility for composing class variants using clsx

pnpm add onno

Features

• Framework agnostic
• Single tiny dependency on clsx (330B)
• Written in TypeScript with lovely type helpers
• Rigorously tested with 100% code coverage
• Perfect companion to Tailwind CSS

Usage

const button = onno({
  variants: {
    intent: {
      primary: "bg-blue-600 text-white",
      secondary: "bg-gray-200 text-black",
    },
    size: {
      sm: "h-8 px-1",
      md: "h-10 px-2",
      lg: "h-12 px-3",
    },
  },
})

// "bg-blue-600 text-white h-10 px-2"
const classes = button({
  intent: "primary",
  size: "md",
})

Variants

Todo

Defaults

Todo

Baseline Classes

Todo

Compound Classes

Todo

Additional Classes

Todo

TypeScript

Use OnnoProps to infer variant props from an OnnoFunction

import { onno, type OnnoProps } from "onno"

export const button = onno({
  variants: {
    size: {
      sm: "pretty small",
      lg: "really large",
    },
  },
})

export type ButtonProps = OnnoProps<typeof button>
export type ButtonSizeType = ButtonProps["size"] // "sm" | "lg" | undefined

Note that inferred OnnoProps include the className option alongside the variant types:

export type ButtonClassNameType = ButtonProps["className"] // clsx.ClassValue

By default all variants are optional. To require one or more variants, pass a union of required variant keys as the second argument to the OnnoProps type:

import { onno, type OnnoProps } from "onno"

export const button = onno({
  variants: {
    disabled: "not allowed",
    intent: {
      primary: "very punchy",
      secondary: "quite normal",
    },
    size: {
      sm: "pretty small",
      lg: "really large",
    },
  },
})

export type ButtonProps = OnnoProps<typeof button, "intent" | "size">

// Error: Property 'intent' is missing in type '{ size: "md" }'
const buttonProps: ButtonProps = { size: "md" }

License

MIT © Matthew Wagerfield