@byyuurin/ui-kit

A utility toolkit for designing themed UI components.

Installation

npm i @byyuurin/ui-kit

cv - A Utility for Creating Component Variants

cv simplifies defining UI component variants with conditional styling and parts support.

Basic Usage

import { cv } from '@byyuurin/ui-kit'

const ui = cv({
  base: 'p-2',
  variants: {
    type: {
      solid: 'bg-blue color-white',
      outline: 'color-blue border border-blue',
    },
  },
})

ui({ type: 'solid' }).base() // "p-2 bg-blue color-white"

Conditional Variants

const ui = cv({
  base: 'btn',
  variants: {
    type: { default: '', ghost: '' },
    color: { red: '', blue: '' },
  },
  compoundVariants: [
    { type: 'default', color: 'red', class: 'bg-red color-white' },
    { type: 'ghost', color: 'red', class: 'border border-red color-red' },
  ],
})

ui({ type: 'default', color: 'red' }).base() // "btn bg-red color-white"

Parts Support

const ui = cv({
  parts: {
    base: 'p-2 flex items-center',
    icon: 'color-white',
  },
  variants: {
    type: {
      solid: { base: 'bg-blue color-white' },
      outline: { base: 'color-blue border border-blue' },
    },
  },
})

ui({ type: 'solid' }).base() // "p-2 flex items-center bg-blue color-white"

Merging with ct

You can define a theme with ct and pass it to cv:

import { ct, cv } from '@byyuurin/ui-kit'

const theme = ct({ base: 'p-2', variants: { type: { solid: 'bg-blue' } } })
const ui = cv(theme)

Custom Merge Rules

import { createCR, createCV, cx } from '@byyuurin/ui-kit'

const cr = createCR([
  [/^bg-(.+)$/, ([type]) => {
    if (/^op(?:acity)?-?(.+)$/.test(type))
      return 'opacity'

    return 'color'
  }],
])

const cv = createCV((...classValues) => cr(cx(...classValues)))

// Define UI variants
const ui = cv({
  base: 'p-2 bg-blue bg-opacity-80 hover:bg-opacity-100',
})

// Example Usage
ui().base() // "p-2 bg-blue bg-opacity-80 hover:bg-opacity-100"
ui().base({ class: 'bg-red bg-opacity-50' }) // "p-2 bg-red bg-opacity-50 hover:bg-opacity-100"

cv offers a powerful way to manage component variants with conditional logic and atomic styling.

cx - A Utility for Merging Class Names

cx is a simple utility for merging class names based on different conditions.

Usage

import { cx } from '@byyuurin/ui-kit'

cx('btn', 'primary') // "btn primary"
cx('btn', { primary: true, disabled: false }) // "btn primary"
cx('btn', ['primary', false && 'disabled']) // "btn primary"

It works with strings, objects, and arrays, making it easy to conditionally combine class names.

License

MIT License © 2024-PRESENT Yuurin