azamat-ui-kit-cli 0.2.2

package/vendor/src/families/migration-map.ts

@@ -0,0 +1,79 @@
+export type FamilyMigrationStatus =
+  | "canonical"
+  | "family-member"
+  | "family-member helper"
+  | "canonical composed member"
+  | "transitional"
+  | "advanced"
+
+export type FamilyMigrationEntry = {
+  component: string
+  family: "InputFamily" | "SelectFamily" | "CardFamily" | "FormFamily" | "DataTableFamily"
+  member?: string
+  status: FamilyMigrationStatus
+  notes?: string
+}
+
+export const componentFamilyMigrationMap: FamilyMigrationEntry[] = [
+  { component: "Input", family: "InputFamily", member: "Root", status: "canonical" },
+  { component: "ClearableInput", family: "InputFamily", member: "Clearable", status: "family-member" },
+  { component: "SearchInput", family: "InputFamily", member: "Search", status: "family-member" },
+  { component: "PasswordInput", family: "InputFamily", member: "Password", status: "family-member" },
+  { component: "NumberInput", family: "InputFamily", member: "Number", status: "family-member" },
+  { component: "DateInput", family: "InputFamily", member: "Date", status: "family-member" },
+  { component: "DateRangeInput", family: "InputFamily", member: "DateRange", status: "family-member" },
+  { component: "MoneyInput", family: "InputFamily", member: "Money", status: "family-member" },
+  { component: "QuantityInput", family: "InputFamily", member: "Quantity", status: "family-member" },
+  { component: "MaskedInput", family: "InputFamily", member: "Masked", status: "family-member" },
+  { component: "PhoneInput", family: "InputFamily", member: "Phone", status: "family-member" },
+  { component: "OtpInput", family: "InputFamily", member: "Otp", status: "family-member" },
+  { component: "ColorInput", family: "InputFamily", member: "Color", status: "family-member" },
+  { component: "TagInput", family: "InputFamily", member: "Tag", status: "advanced" },
+  { component: "QuantityStepper", family: "InputFamily", member: "QuantityStepper", status: "advanced" },
+
+  { component: "Select", family: "SelectFamily", member: "Root", status: "canonical" },
+  { component: "SimpleSelect", family: "SelectFamily", member: "Simple", status: "family-member" },
+  { component: "AsyncSelect", family: "SelectFamily", member: "Async", status: "family-member" },
+  { component: "AsyncMultiSelect", family: "SelectFamily", member: "AsyncMulti", status: "family-member" },
+  { component: "Combobox", family: "SelectFamily", member: "Combobox", status: "family-member" },
+  { component: "FormSelect", family: "SelectFamily", member: "Form.Select", status: "family-member" },
+  { component: "FormAsyncSelect", family: "SelectFamily", member: "Form.Async", status: "family-member" },
+
+  { component: "Card", family: "CardFamily", member: "Root", status: "canonical" },
+  { component: "InfoCard", family: "CardFamily", member: "Info", status: "canonical composed member" },
+  { component: "SmartCard", family: "CardFamily", member: "Info", status: "transitional", notes: "Prefer InfoCard or CardFamily.Info in docs and new usage." },
+  { component: "StatCard", family: "CardFamily", member: "Stat", status: "family-member" },
+  { component: "StatisticCard", family: "CardFamily", member: "Statistic", status: "family-member" },
+  { component: "EntityCard", family: "CardFamily", member: "Entity", status: "family-member" },
+  { component: "FileCard", family: "CardFamily", member: "File", status: "family-member" },
+
+  { component: "FormFieldShell", family: "FormFamily", member: "Field", status: "canonical" },
+  { component: "FormInput", family: "FormFamily", member: "Input", status: "family-member" },
+  { component: "FormTextarea", family: "FormFamily", member: "Textarea", status: "family-member" },
+  { component: "FormSelect", family: "FormFamily", member: "Select", status: "family-member" },
+  { component: "FormAsyncSelect", family: "FormFamily", member: "AsyncSelect", status: "family-member" },
+  { component: "FormSwitch", family: "FormFamily", member: "Switch", status: "family-member" },
+  { component: "FormSearchInput", family: "FormFamily", member: "Search", status: "family-member" },
+  { component: "FormPasswordInput", family: "FormFamily", member: "Password", status: "family-member" },
+  { component: "FormNumberInput", family: "FormFamily", member: "Number", status: "family-member" },
+  { component: "FormPhoneInput", family: "FormFamily", member: "Phone", status: "family-member" },
+  { component: "FormDateInput", family: "FormFamily", member: "Date", status: "family-member" },
+  { component: "FormDateRangeInput", family: "FormFamily", member: "DateRange", status: "family-member" },
+  { component: "FormDatePicker", family: "FormFamily", member: "DatePicker", status: "family-member" },
+  { component: "FormDateRangePicker", family: "FormFamily", member: "DateRangePicker", status: "family-member" },
+  { component: "SmartFormShell", family: "FormFamily", member: "Shell", status: "transitional" },
+  { component: "FormBuilder", family: "FormFamily", member: "Builder", status: "advanced" },
+
+  { component: "DataTable", family: "DataTableFamily", member: "Root", status: "canonical" },
+  { component: "DataTableToolbar", family: "DataTableFamily", member: "Toolbar", status: "family-member" },
+  { component: "DataTablePagination", family: "DataTableFamily", member: "Pagination", status: "family-member" },
+  { component: "DataTableColumnVisibilityMenu", family: "DataTableFamily", member: "ColumnVisibilityMenu", status: "family-member" },
+  { component: "DataTableSortableHeader", family: "DataTableFamily", member: "SortableHeader", status: "family-member" },
+  { component: "DataTableRowActions", family: "DataTableFamily", member: "RowActions", status: "family-member" },
+  { component: "DataTableBulkActions", family: "DataTableFamily", member: "BulkActions", status: "family-member" },
+  { component: "DataTableViewPresets", family: "DataTableFamily", member: "ViewPresets", status: "family-member" },
+  { component: "createDataTableSelectColumn", family: "DataTableFamily", member: "createSelectColumn", status: "family-member helper" },
+  { component: "createDataTableActionsColumn", family: "DataTableFamily", member: "createActionsColumn", status: "family-member helper" },
+  { component: "TableExportMenu", family: "DataTableFamily", member: "ExportMenu", status: "advanced" },
+  { component: "TableImportButton", family: "DataTableFamily", member: "ImportButton", status: "advanced" },
+] as const

package/vendor/src/families/queries.ts

@@ -0,0 +1,63 @@
+import { componentFamilyCatalog, type ComponentFamilyCatalogEntry, type ComponentFamilyName } from "@/families/catalog"
+import {
+  componentFamilyMigrationMap,
+  type FamilyMigrationEntry,
+  type FamilyMigrationStatus,
+} from "@/families/migration-map"
+
+const familyCatalogMap = new Map<ComponentFamilyName, ComponentFamilyCatalogEntry>(
+  componentFamilyCatalog.map((entry) => [entry.family, entry])
+)
+
+const componentMigrationMap = new Map<string, FamilyMigrationEntry[]>()
+
+for (const entry of componentFamilyMigrationMap) {
+  const existingEntries = componentMigrationMap.get(entry.component) ?? []
+  existingEntries.push(entry)
+  componentMigrationMap.set(entry.component, existingEntries)
+}
+
+function getFamilyCatalogEntry(family: ComponentFamilyName) {
+  return familyCatalogMap.get(family)
+}
+
+function getFamilyMembers(family: ComponentFamilyName) {
+  return componentFamilyMigrationMap.filter((entry) => entry.family === family)
+}
+
+function getComponentFamilyEntry(component: string) {
+  return componentMigrationMap.get(component)?.[0]
+}
+
+function getComponentFamilyEntries(component: string) {
+  return componentMigrationMap.get(component) ?? []
+}
+
+function listComponentsByStatus(status: FamilyMigrationStatus) {
+  return componentFamilyMigrationMap.filter((entry) => entry.status === status)
+}
+
+function listTransitionalComponents() {
+  return listComponentsByStatus("transitional")
+}
+
+function listAdvancedComponents() {
+  return listComponentsByStatus("advanced")
+}
+
+function listCanonicalComponents() {
+  return componentFamilyMigrationMap.filter(
+    (entry) => entry.status === "canonical" || entry.status === "canonical composed member"
+  )
+}
+
+export {
+  getComponentFamilyEntry,
+  getComponentFamilyEntries,
+  getFamilyCatalogEntry,
+  getFamilyMembers,
+  listAdvancedComponents,
+  listCanonicalComponents,
+  listComponentsByStatus,
+  listTransitionalComponents,
+}

package/vendor/src/families/select-family.ts

@@ -0,0 +1,33 @@
+import { FormAsyncSelect, FormSelect } from "@/components/form"
+import { AsyncMultiSelect, AsyncSelect, Combobox, SimpleSelect } from "@/components/inputs"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+
+const SelectFamily = {
+  Root: Select,
+  Trigger: SelectTrigger,
+  Value: SelectValue,
+  Content: SelectContent,
+  Group: SelectGroup,
+  Label: SelectLabel,
+  Item: SelectItem,
+  Separator: SelectSeparator,
+  Simple: SimpleSelect,
+  Async: AsyncSelect,
+  AsyncMulti: AsyncMultiSelect,
+  Combobox,
+  Form: {
+    Select: FormSelect,
+    Async: FormAsyncSelect,
+  },
+} as const
+
+export { SelectFamily }

package/vendor/src/families/views.ts

@@ -0,0 +1,81 @@
+import { componentFamilyCatalog, type ComponentFamilyCatalogEntry, type ComponentFamilyName } from "@/families/catalog"
+import type { FamilyMigrationEntry } from "@/families/migration-map"
+import {
+  getFamilyCatalogEntry,
+  getFamilyMembers,
+  listAdvancedComponents,
+  listCanonicalComponents,
+  listTransitionalComponents,
+} from "@/families/queries"
+
+export type ComponentFamilyView = ComponentFamilyCatalogEntry & {
+  canonicalEntries: FamilyMigrationEntry[]
+  memberEntries: FamilyMigrationEntry[]
+  transitionalEntries: FamilyMigrationEntry[]
+  advancedEntries: FamilyMigrationEntry[]
+}
+
+function toSortedEntries(entries: FamilyMigrationEntry[]) {
+  return [...entries].sort((left, right) => left.component.localeCompare(right.component))
+}
+
+function getFamilyView(family: ComponentFamilyName): ComponentFamilyView | undefined {
+  const catalogEntry = getFamilyCatalogEntry(family)
+
+  if (!catalogEntry) return undefined
+
+  const familyMembers = getFamilyMembers(family)
+  const canonicalEntries = toSortedEntries(
+    familyMembers.filter(
+      (entry) => entry.status === "canonical" || entry.status === "canonical composed member"
+    )
+  )
+  const transitionalEntries = toSortedEntries(
+    familyMembers.filter((entry) => entry.status === "transitional")
+  )
+  const advancedEntries = toSortedEntries(
+    familyMembers.filter((entry) => entry.status === "advanced")
+  )
+  const memberEntries = toSortedEntries(
+    familyMembers.filter(
+      (entry) => entry.status === "family-member" || entry.status === "family-member helper"
+    )
+  )
+
+  return {
+    ...catalogEntry,
+    canonicalEntries,
+    memberEntries,
+    transitionalEntries,
+    advancedEntries,
+  }
+}
+
+function listFamilyViews() {
+  return componentFamilyCatalog
+    .map((entry) => getFamilyView(entry.family))
+    .filter((entry): entry is ComponentFamilyView => Boolean(entry))
+}
+
+function getFamilyNavigation() {
+  return componentFamilyCatalog.map((entry) => ({
+    family: entry.family,
+    label: entry.label,
+    description: entry.description,
+    canonicalCount: entry.canonical.length,
+    memberCount: entry.members.length,
+    transitionalCount: entry.transitional?.length ?? 0,
+    advancedCount: entry.advanced?.length ?? 0,
+  }))
+}
+
+function getMetadataSummary() {
+  return {
+    families: componentFamilyCatalog.length,
+    canonical: listCanonicalComponents().length,
+    transitional: listTransitionalComponents().length,
+    advanced: listAdvancedComponents().length,
+  }
+}
+
+export { getFamilyNavigation, getFamilyView, getMetadataSummary, listFamilyViews }

package/vendor/src/hooks/index.ts

@@ -0,0 +1,6 @@
+export * from "./use-session-storage-state"
+export * from "./use-before-unload-when-dirty"
+export * from "./use-is-mobile"
+export * from "./use-disclosure"
+export * from "./use-debounce"
+export * from "./use-data-table-view-state"

package/vendor/src/hooks/use-before-unload-when-dirty.ts

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+function useBeforeUnloadWhenDirty(isDirty: boolean, message = "Changes you made may not be saved.") {
+  React.useEffect(() => {
+    if (!isDirty) return
+
+    const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+      event.preventDefault()
+      event.returnValue = message
+      return message
+    }
+
+    window.addEventListener("beforeunload", handleBeforeUnload)
+
+    return () => {
+      window.removeEventListener("beforeunload", handleBeforeUnload)
+    }
+  }, [isDirty, message])
+}
+
+export { useBeforeUnloadWhenDirty }

package/vendor/src/hooks/use-data-table-view-state.ts

@@ -0,0 +1,122 @@
+import * as React from "react"
+
+export type DataTableViewStorage = "local" | "session" | "memory"
+
+export type UseDataTableViewStateOptions<TValue extends string> = {
+  key: string
+  defaultValue?: TValue
+  allowedValues?: readonly TValue[]
+  storage?: DataTableViewStorage
+  syncAcrossTabs?: boolean
+  serialize?: (value: TValue) => string
+  deserialize?: (value: string) => TValue
+  onValueChange?: (value: TValue | undefined) => void
+}
+
+export type UseDataTableViewStateReturn<TValue extends string> = {
+  value: TValue | undefined
+  setValue: (value: TValue | undefined) => void
+  clearValue: () => void
+  resetValue: () => void
+  isDefaultValue: boolean
+}
+
+const defaultSerialize = <TValue extends string>(value: TValue) => value
+const defaultDeserialize = <TValue extends string>(value: string) => value as TValue
+
+function getStorage(storage: DataTableViewStorage) {
+  if (typeof window === "undefined" || storage === "memory") return undefined
+  return storage === "local" ? window.localStorage : window.sessionStorage
+}
+
+function isAllowedValue<TValue extends string>(
+  value: TValue | undefined,
+  allowedValues?: readonly TValue[]
+) {
+  if (value === undefined) return true
+  if (!allowedValues?.length) return true
+  return allowedValues.includes(value)
+}
+
+function useDataTableViewState<TValue extends string>({
+  key,
+  defaultValue,
+  allowedValues,
+  storage = "local",
+  syncAcrossTabs = true,
+  serialize = defaultSerialize,
+  deserialize = defaultDeserialize,
+  onValueChange,
+}: UseDataTableViewStateOptions<TValue>): UseDataTableViewStateReturn<TValue> {
+  const readValue = React.useCallback(() => {
+    const fallbackValue = isAllowedValue(defaultValue, allowedValues) ? defaultValue : undefined
+    const targetStorage = getStorage(storage)
+
+    if (!targetStorage) return fallbackValue
+
+    try {
+      const storedValue = targetStorage.getItem(key)
+      if (!storedValue) return fallbackValue
+
+      const parsedValue = deserialize(storedValue)
+      return isAllowedValue(parsedValue, allowedValues) ? parsedValue : fallbackValue
+    } catch {
+      return fallbackValue
+    }
+  }, [allowedValues, defaultValue, deserialize, key, storage])
+
+  const [value, setInternalValue] = React.useState<TValue | undefined>(readValue)
+
+  const setValue = React.useCallback(
+    (nextValue: TValue | undefined) => {
+      const normalizedValue = isAllowedValue(nextValue, allowedValues) ? nextValue : undefined
+      const targetStorage = getStorage(storage)
+
+      setInternalValue(normalizedValue)
+
+      if (targetStorage) {
+        try {
+          if (normalizedValue === undefined) {
+            targetStorage.removeItem(key)
+          } else {
+            targetStorage.setItem(key, serialize(normalizedValue))
+          }
+        } catch {
+          // Ignore storage failures. State still updates in memory.
+        }
+      }
+
+      onValueChange?.(normalizedValue)
+    },
+    [allowedValues, key, onValueChange, serialize, storage]
+  )
+
+  const clearValue = React.useCallback(() => setValue(undefined), [setValue])
+  const resetValue = React.useCallback(() => setValue(defaultValue), [defaultValue, setValue])
+
+  React.useEffect(() => {
+    setInternalValue(readValue())
+  }, [readValue])
+
+  React.useEffect(() => {
+    if (!syncAcrossTabs || storage !== "local" || typeof window === "undefined") return undefined
+
+    const handleStorage = (event: StorageEvent) => {
+      if (event.storageArea !== window.localStorage || event.key !== key) return
+      setInternalValue(readValue())
+    }
+
+    window.addEventListener("storage", handleStorage)
+    return () => window.removeEventListener("storage", handleStorage)
+  }, [key, readValue, storage, syncAcrossTabs])
+
+  return {
+    value,
+    setValue,
+    clearValue,
+    resetValue,
+    isDefaultValue: value === defaultValue,
+  }
+}
+
+export { useDataTableViewState }

package/vendor/src/hooks/use-debounce.ts

@@ -0,0 +1,52 @@
+import * as React from "react"
+
+function useDebouncedValue<TValue>(value: TValue, delay = 300) {
+  const [debouncedValue, setDebouncedValue] = React.useState(value)
+
+  React.useEffect(() => {
+    const timer = window.setTimeout(() => {
+      setDebouncedValue(value)
+    }, delay)
+
+    return () => {
+      window.clearTimeout(timer)
+    }
+  }, [delay, value])
+
+  return debouncedValue
+}
+
+function useDebouncedCallback<TArgs extends unknown[]>(
+  callback: (...args: TArgs) => void,
+  delay = 300
+) {
+  const callbackRef = React.useRef(callback)
+  const timerRef = React.useRef<number | null>(null)
+
+  React.useEffect(() => {
+    callbackRef.current = callback
+  }, [callback])
+
+  React.useEffect(() => {
+    return () => {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current)
+      }
+    }
+  }, [])
+
+  return React.useCallback(
+    (...args: TArgs) => {
+      if (timerRef.current) {
+        window.clearTimeout(timerRef.current)
+      }
+
+      timerRef.current = window.setTimeout(() => {
+        callbackRef.current(...args)
+      }, delay)
+    },
+    [delay]
+  )
+}
+
+export { useDebouncedCallback, useDebouncedValue }

package/vendor/src/hooks/use-disclosure.ts

@@ -0,0 +1,38 @@
+import * as React from "react"
+
+export type UseDisclosureOptions = {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}
+
+function useDisclosure({ defaultOpen = false, open, onOpenChange }: UseDisclosureOptions = {}) {
+  const isControlled = open !== undefined
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen)
+  const currentOpen = isControlled ? open : internalOpen
+
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      if (!isControlled) {
+        setInternalOpen(nextOpen)
+      }
+
+      onOpenChange?.(nextOpen)
+    },
+    [isControlled, onOpenChange]
+  )
+
+  const openDisclosure = React.useCallback(() => setOpen(true), [setOpen])
+  const closeDisclosure = React.useCallback(() => setOpen(false), [setOpen])
+  const toggleDisclosure = React.useCallback(() => setOpen(!currentOpen), [currentOpen, setOpen])
+
+  return {
+    open: currentOpen,
+    setOpen,
+    openDisclosure,
+    closeDisclosure,
+    toggleDisclosure,
+  } as const
+}
+
+export { useDisclosure }

package/vendor/src/hooks/use-is-mobile.ts

@@ -0,0 +1,28 @@
+import * as React from "react"
+
+const DEFAULT_MOBILE_BREAKPOINT = 768
+
+function useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+  const [isMobile, setIsMobile] = React.useState(false)
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return
+
+    const query = window.matchMedia(`(max-width: ${breakpoint - 1}px)`)
+
+    const update = () => {
+      setIsMobile(query.matches)
+    }
+
+    update()
+    query.addEventListener("change", update)
+
+    return () => {
+      query.removeEventListener("change", update)
+    }
+  }, [breakpoint])
+
+  return isMobile
+}
+
+export { useIsMobile, DEFAULT_MOBILE_BREAKPOINT }

package/vendor/src/hooks/use-session-storage-state.ts

@@ -0,0 +1,85 @@
+import * as React from "react"
+
+type SessionStorageOptions<T> = {
+  serialize?: (value: T) => string
+  deserialize?: (value: string) => T
+}
+
+type SetSessionStorageStateAction<T> = T | ((previousValue: T) => T)
+
+const defaultSerialize = JSON.stringify
+const defaultDeserialize = JSON.parse
+
+function getInitialValue<T>(initialValue: T | (() => T)) {
+  return typeof initialValue === "function"
+    ? (initialValue as () => T)()
+    : initialValue
+}
+
+function useSessionStorageState<T>(
+  key: string,
+  initialValue: T | (() => T),
+  options: SessionStorageOptions<T> = {}
+) {
+  const { serialize = defaultSerialize, deserialize = defaultDeserialize } = options
+
+  const readValue = React.useCallback(() => {
+    const fallbackValue = getInitialValue(initialValue)
+
+    if (typeof window === "undefined") {
+      return fallbackValue
+    }
+
+    try {
+      const item = window.sessionStorage.getItem(key)
+      return item ? (deserialize(item) as T) : fallbackValue
+    } catch {
+      return fallbackValue
+    }
+  }, [deserialize, initialValue, key])
+
+  const [state, setState] = React.useState<T>(readValue)
+
+  const setValue = React.useCallback(
+    (value: SetSessionStorageStateAction<T>) => {
+      setState((previousValue) => {
+        const nextValue =
+          typeof value === "function"
+            ? (value as (previousValue: T) => T)(previousValue)
+            : value
+
+        if (typeof window !== "undefined") {
+          try {
+            window.sessionStorage.setItem(key, serialize(nextValue))
+          } catch {
+            // Ignore storage failures. State still updates in memory.
+          }
+        }
+
+        return nextValue
+      })
+    },
+    [key, serialize]
+  )
+
+  const removeValue = React.useCallback(() => {
+    if (typeof window !== "undefined") {
+      try {
+        window.sessionStorage.removeItem(key)
+      } catch {
+        // Ignore storage failures.
+      }
+    }
+
+    setState(getInitialValue(initialValue))
+  }, [initialValue, key])
+
+  React.useEffect(() => {
+    setState(readValue())
+  }, [readValue])
+
+  return [state, setValue, removeValue] as const
+}
+
+export { useSessionStorageState }
+export type { SessionStorageOptions, SetSessionStorageStateAction }

package/vendor/src/index.ts

@@ -0,0 +1,38 @@
+export * from './components/ui/button'
+export * from './components/ui/input'
+export * from './components/ui/textarea'
+export * from './components/ui/checkbox'
+export * from './components/ui/switch'
+export * from './components/ui/dialog'
+export * from './components/ui/dropdown-menu'
+export * from './components/ui/popover'
+export * from './components/ui/select'
+export * from './components/ui/table'
+export * from './components/ui/badge'
+export * from './components/ui/card'
+export * from './components/ui/tabs'
+export * from './components/ui/collapse'
+export * from './components/ui/skeleton'
+export * from './components/ui/divider'
+export * from './components/ui/segmented-control'
+export * from './components/ui/spinner'
+export * from './components/ui/tooltip'
+
+export * from './components/actions/public'
+export * from './components/layout/public'
+export * from './components/filters'
+export * from './components/overlay'
+export * from './components/navigation'
+export * from './components/inputs'
+export * from './components/form/public'
+export * from './components/feedback'
+export * from './components/display'
+export * from './components/data-table/public'
+export * from './components/notifications'
+export * from './components/command'
+export * from './components/calendar'
+export * from './components/upload'
+export * from './components/wizard'
+export * from './components/charts/public'
+export * from './hooks'
+export * from './lib/utils'

package/vendor/src/lib/utils.ts

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