Installation

How to install dependencies and get required component for your app.

Install dependencies

Run the following command to install required dependencies.

Add style

Copy and paste the following code into your project.

Add component

Copy and paste the following code into your project.

src/lib/cva.ts
import { defineConfig } from "cva"
import { twMerge } from "tailwind-merge"
 
export const { cva, cx, compose } = defineConfig({
  hooks: {
    onComplete: (className) => twMerge(className),
  },
})
src/lib/call-handler.ts
// https://github.com/kobaltedev/kobalte/blob/main/packages/utils/src/assertion.ts
// https://github.com/kobaltedev/kobalte/blob/main/packages/utils/src/events.ts
 
import type { JSX } from "solid-js"
 
// Function assertions
export const isFunction = (value: unknown): value is Function =>
  typeof value === "function"
 
/** Call a JSX.EventHandlerUnion with the event. */
export const callHandler = <T, E extends Event>(
  event: E & { currentTarget: T; target: Element },
  handler: JSX.EventHandlerUnion<T, E> | undefined,
) => {
  if (handler) {
    if (isFunction(handler)) {
      handler(event)
    } else {
      handler[0](handler[1], event)
    }
  }
 
  return event.defaultPrevented
}
src/lib/combine-style.ts
// https://github.com/solidjs-community/solid-primitives/blob/main/packages/props/src/combineProps.ts
 
import type { JSX } from "solid-js"
 
const extractCSSregex = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g
 
export function stringStyleToObject(style: string): JSX.CSSProperties {
  const object: Record<string, string> = {}
  let match: RegExpExecArray | null
  while ((match = extractCSSregex.exec(style))) {
    object[match[1]] = match[2]
  }
  return object
}
 
export function combineStyle(a: string, b: string): string
export function combineStyle(
  a: JSX.CSSProperties | undefined,
  b: JSX.CSSProperties | undefined,
): JSX.CSSProperties
export function combineStyle(
  a: JSX.CSSProperties | string | undefined,
  b: JSX.CSSProperties | string | undefined,
): JSX.CSSProperties
export function combineStyle(
  a: JSX.CSSProperties | string | undefined,
  b: JSX.CSSProperties | string | undefined,
): JSX.CSSProperties | string {
  if (typeof a === "string") {
    if (typeof b === "string") return `${a};${b}`
 
    a = stringStyleToObject(a)
  } else if (typeof b === "string") {
    b = stringStyleToObject(b)
  }
 
  return { ...a, ...b }
}
src/hooks/use-mobile.ts
// https://github.com/solidjs-community/solid-primitives/blob/main/packages/media/src/index.ts
 
import { createSignal, onCleanup } from "solid-js"
import { isServer } from "solid-js/web"
 
export const useIsMobile = () => {
  if (isServer) {
    return () => false
  }
 
  const mql = window.matchMedia("(max-width: 767px)")
  const [state, setState] = createSignal(mql.matches)
  const update = () => setState(mql.matches)
  mql.addEventListener("change", update)
  onCleanup(() => {
    mql.removeEventListener("change", update)
  })
  return state
}
IntroductionTheming