@proyecto-viviana/ui 0.2.5 → 0.3.1

package/dist/radio/index.d.ts

@@ -5,10 +5,10 @@
  * SSR-compatible - renders children and UI elements directly without render props.
  */
 import { type JSX } from 'solid-js';
-import { type RadioGroupProps as HeadlessRadioGroupProps, type RadioProps as HeadlessRadioProps } from '@proyecto-viviana/solidaria-components';
+import { type RadioProps as HeadlessRadioProps } from '@proyecto-viviana/solidaria-components';
 export type RadioGroupOrientation = 'horizontal' | 'vertical';
 export type RadioGroupSize = 'sm' | 'md' | 'lg';
-export interface RadioGroupProps extends Omit<HeadlessRadioGroupProps, 'class' | 'style'> {
+export type RadioGroupProps = {
     /** The size of the radio buttons. */
     size?: RadioGroupSize;
     /** Additional CSS class name. */
@@ -19,10 +19,32 @@ export interface RadioGroupProps extends Omit<HeadlessRadioGroupProps, 'class' |
     description?: string;
     /** Error message when invalid. */
     errorMessage?: string;
-}
-export interface RadioProps extends Omit<HeadlessRadioProps, 'class' | 'style'> {
+    /** The current value (controlled). */
+    value?: string;
+    /** The default value (uncontrolled). */
+    defaultValue?: string;
+    /** Callback when value changes. */
+    onChange?: (value: string) => void;
+    /** The orientation of the radio group. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Whether the radio group is disabled. */
+    isDisabled?: boolean;
+    /** Whether the radio group is read only. */
+    isReadOnly?: boolean;
+    /** Whether the radio group is required. */
+    isRequired?: boolean;
+    /** Whether the radio group is invalid. */
+    isInvalid?: boolean;
+    /** The children of the component. */
+    children?: JSX.Element;
+    /** The name of the radio group (for form submission). */
+    name?: string;
+};
+export interface RadioProps extends Omit<HeadlessRadioProps, 'class' | 'style' | 'children'> {
     /** Additional CSS class name. */
     class?: string;
+    /** The content/label for the radio button. */
+    children?: JSX.Element;
 }
 /**
  * A radio group allows users to select a single option from a list of mutually exclusive options.
@@ -31,14 +53,7 @@ export interface RadioProps extends Omit<HeadlessRadioProps, 'class' | 'style'>
  */
 export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
 /**
- * A radio button allows users to select a single option from a list.
- * Must be used within a RadioGroup.
- * SSR-compatible - renders static JSX without render prop children.
- *
- * Note: Unlike other styled components, Radio does not use render props for children.
- * Instead, it relies on data attributes set by the headless Radio component for styling.
- * However, since we need dynamic styling based on state, we accept that this component
- * has some limitations compared to the render-props-based original implementation.
+ * A radio button allows a user to select a single option from a list of mutually exclusive options.
  *
  * Built on solidaria-components Radio for full accessibility support.
  */

package/dist/radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/radio/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA+C,MAAM,UAAU,CAAA;AAChF,OAAO,EAGL,KAAK,eAAe,IAAI,uBAAuB,EAC/C,KAAK,UAAU,IAAI,kBAAkB,EAGtC,MAAM,wCAAwC,CAAA;AAM/C,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAQ/C,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,uBAAuB,EAAE,OAAO,GAAG,OAAO,CAAC;IACvF,qCAAqC;IACrC,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7E,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AA4BD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA2C9D;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CAgCpD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/radio/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,KAAK,GAAG,EAA+C,MAAM,UAAU,CAAA;AAChF,OAAO,EAGL,KAAK,UAAU,IAAI,kBAAkB,EAGtC,MAAM,wCAAwC,CAAA;AAM/C,MAAM,MAAM,qBAAqB,GAAG,YAAY,GAAG,UAAU,CAAA;AAC7D,MAAM,MAAM,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAQ/C,MAAM,MAAM,eAAe,GAAG;IAC5B,qCAAqC;IACrC,IAAI,CAAC,EAAE,cAAc,CAAA;IACrB,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iCAAiC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,kCAAkC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,0CAA0C;IAC1C,WAAW,CAAC,EAAE,YAAY,GAAG,UAAU,CAAA;IACvC,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;IACtB,yDAAyD;IACzD,IAAI,CAAC,EAAE,MAAM,CAAA;CACd,CAAA;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,kBAAkB,EAAE,OAAO,GAAG,OAAO,GAAG,UAAU,CAAC;IAC1F,iCAAiC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CACvB;AA4BD;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,GAAG,CAAC,OAAO,CA6C9D;AAMD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,GAAG,GAAG,CAAC,OAAO,CA8CpD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/ui",
-  "version": "0.2.5",
+  "version": "0.3.1",
   "description": "Styled UI components for SolidJS - inspired by React Spectrum",
   "type": "module",
   "main": "./dist/index.ssr.js",
@@ -9,38 +9,37 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "solid": "./src/index.ts",
-      "import": "./dist/index.js",
+      "solid": "./dist/index.jsx",
       "default": "./dist/index.js"
     },
     "./theme.css": {
       "import": "./dist/theme.css",
-      "default": "./src/theme.css"
+      "default": "./dist/theme.css"
     },
     "./styles.css": {
       "import": "./dist/styles.css",
-      "default": "./src/styles.css"
+      "default": "./dist/styles.css"
     },
     "./components.css": {
       "import": "./dist/components.css",
-      "default": "./src/components.css"
+      "default": "./dist/components.css"
     }
   },
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "sideEffects": [
     "*.css"
   ],
   "scripts": {
-    "build": "tsup && rm -f tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
+    "build": "deno task build",
     "dev": "tsup --watch",
-    "prepublishOnly": "bun run build"
+    "prepublishOnly": "deno task build"
   },
   "dependencies": {
-    "@proyecto-viviana/solidaria": "^0.1.5",
-    "@proyecto-viviana/solidaria-components": "^0.1.5"
+    "@proyecto-viviana/solid-stately": "^0.2.1",
+    "@proyecto-viviana/solidaria": "^0.2.1",
+    "@proyecto-viviana/solidaria-components": "^0.2.1"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/alert/index.tsx

@@ -1,48 +0,0 @@
-import type { JSX } from 'solid-js'
-import { Show } from 'solid-js'
-
-export type AlertVariant = 'info' | 'success' | 'warning' | 'error'
-
-export interface AlertProps {
-  children: JSX.Element
-  variant?: AlertVariant
-  title?: string
-  dismissible?: boolean
-  onDismiss?: () => void
-  class?: string
-}
-
-const variantStyles: Record<AlertVariant, string> = {
-  info: 'bg-primary-700 text-primary-200 border border-primary-500',
-  success: 'bg-success-600 text-success-100 border border-success-400',
-  warning: 'bg-warning-600 text-warning-100 border border-warning-400',
-  error: 'bg-danger-600 text-danger-100 border border-danger-400',
-}
-
-export function Alert(props: AlertProps) {
-  const variant = () => props.variant ?? 'info'
-
-  return (
-    <div
-      class={`flex items-center min-h-[50px] font-normal rounded-lg px-4 py-2 ${variantStyles[variant()]} ${props.class ?? ''}`}
-      role="alert"
-    >
-      <div class="flex items-center gap-3 flex-1">
-        <Show when={props.title}>
-          <span class="font-semibold font-jost">{props.title}</span>
-          <span class="opacity-50">|</span>
-        </Show>
-        <div class="flex-1">{props.children}</div>
-        <Show when={props.dismissible}>
-          <button
-            class="hover:opacity-70 transition-opacity ml-2"
-            onClick={props.onDismiss}
-            aria-label="Dismiss"
-          >
-            ✕
-          </button>
-        </Show>
-      </div>
-    </div>
-  )
-}

package/src/autocomplete/index.tsx

@@ -1,313 +0,0 @@
-/**
- * SearchAutocomplete component for proyecto-viviana-ui
- *
- * A styled autocomplete component combining a search input with a
- * filterable dropdown list of options.
- */
-
-import { type JSX, splitProps, createMemo, Show, For, createSignal } from 'solid-js'
-import {
-  Autocomplete,
-  useAutocompleteInput,
-  useAutocompleteCollection,
-  useAutocompleteState,
-} from '@proyecto-viviana/solidaria-components'
-
-// ============================================
-// TYPES
-// ============================================
-
-export type SearchAutocompleteSize = 'sm' | 'md' | 'lg'
-
-export interface SearchAutocompleteItem {
-  id: string
-  name: string
-  [key: string]: unknown
-}
-
-export interface SearchAutocompleteProps<T extends SearchAutocompleteItem = SearchAutocompleteItem> {
-  /** The items to display in the dropdown. */
-  items: T[]
-  /** The size of the autocomplete. @default 'md' */
-  size?: SearchAutocompleteSize
-  /** Placeholder text for the input. */
-  placeholder?: string
-  /** Accessible label for the input. */
-  'aria-label'?: string
-  /** Label text shown above the input. */
-  label?: string
-  /** Description text shown below the input. */
-  description?: string
-  /** The current input value (controlled). */
-  inputValue?: string
-  /** The default input value (uncontrolled). */
-  defaultInputValue?: string
-  /** Handler called when the input value changes. */
-  onInputChange?: (value: string) => void
-  /** Handler called when an item is selected. */
-  onSelect?: (item: T) => void
-  /** Additional CSS class name. */
-  class?: string
-  /** Whether the input is disabled. */
-  isDisabled?: boolean
-  /**
-   * Custom filter function. By default, filters by case-insensitive name match.
-   */
-  filter?: (textValue: string, inputValue: string) => boolean
-  /**
-   * Custom render function for items.
-   */
-  renderItem?: (item: T) => JSX.Element
-  /**
-   * Key to use for the display text. @default 'name'
-   */
-  textKey?: keyof T
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    container: 'text-sm',
-    input: 'h-8 px-3 text-sm',
-    label: 'text-xs mb-1',
-    list: 'max-h-48',
-    item: 'px-3 py-1.5 text-sm',
-  },
-  md: {
-    container: 'text-base',
-    input: 'h-10 px-4 text-base',
-    label: 'text-sm mb-1.5',
-    list: 'max-h-64',
-    item: 'px-4 py-2 text-base',
-  },
-  lg: {
-    container: 'text-lg',
-    input: 'h-12 px-5 text-lg',
-    label: 'text-base mb-2',
-    list: 'max-h-80',
-    item: 'px-5 py-2.5 text-lg',
-  },
-}
-
-// ============================================
-// INNER COMPONENTS
-// ============================================
-
-function AutocompleteInput(props: {
-  placeholder?: string
-  'aria-label'?: string
-  isDisabled?: boolean
-  size: SearchAutocompleteSize
-}) {
-  const ctx = useAutocompleteInput()
-  if (!ctx) return null
-
-  const styles = () => sizeStyles[props.size]
-
-  return (
-    <input
-      ref={ctx.inputRef}
-      type="text"
-      placeholder={props.placeholder}
-      aria-label={props['aria-label']}
-      disabled={props.isDisabled}
-      value={ctx.inputProps.value()}
-      onInput={(e) => ctx.inputProps.onChange(e.currentTarget.value)}
-      onKeyDown={ctx.inputProps.onKeyDown}
-      onFocus={ctx.inputProps.onFocus}
-      onBlur={ctx.inputProps.onBlur}
-      aria-activedescendant={ctx.inputProps['aria-activedescendant']()}
-      aria-controls={ctx.inputProps['aria-controls']}
-      aria-autocomplete={ctx.inputProps['aria-autocomplete']}
-      autocomplete={ctx.inputProps.autoComplete}
-      autocorrect={ctx.inputProps.autoCorrect}
-      spellcheck={ctx.inputProps.spellCheck !== 'false'}
-      class={[
-        'w-full rounded-md border border-bg-200 bg-bg-50',
-        'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500',
-        'placeholder:text-text-400',
-        'disabled:opacity-50 disabled:cursor-not-allowed',
-        styles().input,
-      ].join(' ')}
-    />
-  )
-}
-
-function AutocompleteList<T extends SearchAutocompleteItem>(props: {
-  items: T[]
-  size: SearchAutocompleteSize
-  onSelect?: (item: T) => void
-  renderItem?: (item: T) => JSX.Element
-  textKey: keyof T
-}) {
-  const ctx = useAutocompleteCollection()
-  const state = useAutocompleteState()
-  if (!ctx) return null
-
-  const styles = () => sizeStyles[props.size]
-
-  // Filter items based on input
-  const filteredItems = createMemo(() => {
-    if (!ctx.filter) return props.items
-    return props.items.filter((item) => {
-      const textValue = String(item[props.textKey] ?? item.name ?? '')
-      return ctx.filter!(textValue)
-    })
-  })
-
-  const handleSelect = (item: T) => {
-    props.onSelect?.(item)
-    state?.setInputValue(String(item[props.textKey] ?? item.name ?? ''))
-  }
-
-  return (
-    <Show when={filteredItems().length > 0}>
-      <ul
-        ref={ctx.collectionRef}
-        id={ctx.collectionProps.id}
-        role="listbox"
-        aria-label={ctx.collectionProps['aria-label']}
-        class={[
-          'mt-1 w-full rounded-md border border-bg-200 bg-bg-50 shadow-lg',
-          'overflow-auto',
-          styles().list,
-        ].join(' ')}
-      >
-        <For each={filteredItems()}>
-          {(item) => {
-            const itemId = `autocomplete-item-${item.id}`
-            const isFocused = () => state?.focusedNodeId() === itemId
-
-            return (
-              <li
-                id={itemId}
-                role="option"
-                aria-selected={isFocused()}
-                onClick={() => handleSelect(item)}
-                onMouseEnter={() => state?.setFocusedNodeId(itemId)}
-                onMouseLeave={() => {
-                  if (state?.focusedNodeId() === itemId) {
-                    state?.setFocusedNodeId(null)
-                  }
-                }}
-                class={[
-                  'cursor-pointer transition-colors',
-                  isFocused()
-                    ? 'bg-primary-100 text-primary-900'
-                    : 'hover:bg-bg-100',
-                  styles().item,
-                ].join(' ')}
-              >
-                {props.renderItem ? props.renderItem(item) : String(item[props.textKey] ?? item.name)}
-              </li>
-            )
-          }}
-        </For>
-      </ul>
-    </Show>
-  )
-}
-
-// ============================================
-// SEARCH AUTOCOMPLETE COMPONENT
-// ============================================
-
-/**
- * A styled autocomplete component for searching and selecting from a list.
- *
- * @example
- * ```tsx
- * const items = [
- *   { id: '1', name: 'Apple' },
- *   { id: '2', name: 'Banana' },
- *   { id: '3', name: 'Cherry' },
- * ];
- *
- * <SearchAutocomplete
- *   items={items}
- *   placeholder="Search fruits..."
- *   aria-label="Fruit search"
- *   onSelect={(item) => console.log('Selected:', item)}
- * />
- *
- * // With custom filter
- * <SearchAutocomplete
- *   items={items}
- *   filter={(textValue, inputValue) =>
- *     textValue.toLowerCase().startsWith(inputValue.toLowerCase())
- *   }
- *   onSelect={(item) => console.log('Selected:', item)}
- * />
- *
- * // With label and description
- * <SearchAutocomplete
- *   items={items}
- *   label="Search"
- *   description="Type to filter the list"
- *   placeholder="Start typing..."
- * />
- * ```
- */
-export function SearchAutocomplete<T extends SearchAutocompleteItem = SearchAutocompleteItem>(
-  props: SearchAutocompleteProps<T>
-): JSX.Element {
-  const [local, autocompleteProps] = splitProps(props, [
-    'items',
-    'size',
-    'placeholder',
-    'aria-label',
-    'label',
-    'description',
-    'onSelect',
-    'class',
-    'isDisabled',
-    'renderItem',
-    'textKey',
-  ])
-
-  const size = () => local.size ?? 'md'
-  const textKey = () => local.textKey ?? 'name'
-  const styles = () => sizeStyles[size()]
-
-  // Default filter: case-insensitive contains
-  const defaultFilter = (textValue: string, inputValue: string) => {
-    if (!inputValue) return true
-    return textValue.toLowerCase().includes(inputValue.toLowerCase())
-  }
-
-  return (
-    <div class={['vui-search-autocomplete relative', styles().container, local.class].filter(Boolean).join(' ')}>
-      <Show when={local.label}>
-        <label class={['block font-medium text-text-700', styles().label].join(' ')}>
-          {local.label}
-        </label>
-      </Show>
-
-      <Autocomplete
-        {...autocompleteProps}
-        filter={autocompleteProps.filter ?? defaultFilter}
-      >
-        <AutocompleteInput
-          placeholder={local.placeholder}
-          aria-label={local['aria-label']}
-          isDisabled={local.isDisabled}
-          size={size()}
-        />
-        <AutocompleteList
-          items={local.items}
-          size={size()}
-          onSelect={local.onSelect}
-          renderItem={local.renderItem}
-          textKey={textKey() as keyof T}
-        />
-      </Autocomplete>
-
-      <Show when={local.description}>
-        <p class="mt-1 text-sm text-text-500">{local.description}</p>
-      </Show>
-    </div>
-  )
-}

package/src/avatar/index.tsx

@@ -1,75 +0,0 @@
-import { Show } from 'solid-js'
-
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-export interface AvatarProps {
-  src?: string
-  alt?: string
-  size?: AvatarSize
-  fallback?: string
-  online?: boolean
-  class?: string
-}
-
-const sizeStyles: Record<AvatarSize, { container: string; text: string; indicator: string }> = {
-  xs: { container: 'w-6 h-6', text: 'text-xs', indicator: 'w-1.5 h-1.5' },
-  sm: { container: 'w-8 h-8', text: 'text-sm', indicator: 'w-2 h-2' },
-  md: { container: 'w-10 h-10', text: 'text-base', indicator: 'w-2.5 h-2.5' },
-  lg: { container: 'w-14 h-14', text: 'text-lg', indicator: 'w-3 h-3' },
-  xl: { container: 'w-20 h-20', text: 'text-xl', indicator: 'w-4 h-4' },
-}
-
-export function Avatar(props: AvatarProps) {
-  const size = () => props.size ?? 'md'
-  const styles = () => sizeStyles[size()]
-
-  const initials = () => {
-    if (props.fallback) return props.fallback.slice(0, 2).toUpperCase()
-    if (props.alt) return props.alt.slice(0, 2).toUpperCase()
-    return '?'
-  }
-
-  return (
-    <div class={`relative inline-block ${props.class ?? ''}`}>
-      <div
-        class={`${styles().container} rounded-full overflow-hidden bg-bg-200 flex items-center justify-center ring-2 ring-accent/50`}
-      >
-        <Show
-          when={props.src}
-          fallback={
-            <span class={`${styles().text} font-medium text-primary-300`}>
-              {initials()}
-            </span>
-          }
-        >
-          <img
-            src={props.src}
-            alt={props.alt ?? 'Avatar'}
-            class="w-full h-full object-cover"
-          />
-        </Show>
-      </div>
-      <Show when={props.online !== undefined}>
-        <span
-          class={`absolute bottom-0 right-0 ${styles().indicator} rounded-full ring-2 ring-bg-400 ${
-            props.online ? 'bg-success-400' : 'bg-bg-light'
-          }`}
-        />
-      </Show>
-    </div>
-  )
-}
-
-export interface AvatarGroupProps {
-  children: any
-  max?: number
-  size?: AvatarSize
-}
-
-export function AvatarGroup(props: AvatarGroupProps) {
-  return (
-    <div class="flex -space-x-2">
-      {props.children}
-    </div>
-  )
-}

package/src/badge/index.tsx

@@ -1,43 +0,0 @@
-import type { JSX } from 'solid-js'
-import { Show } from 'solid-js'
-
-export type BadgeVariant = 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger'
-export type BadgeSize = 'sm' | 'md' | 'lg'
-
-export interface BadgeProps {
-  children?: JSX.Element
-  count?: number
-  variant?: BadgeVariant
-  size?: BadgeSize
-  class?: string
-}
-
-const variantStyles: Record<BadgeVariant, string> = {
-  primary: 'bg-primary-500 text-white',
-  secondary: 'bg-bg-300 text-primary-300',
-  accent: 'bg-accent-300 text-black',
-  success: 'bg-success-400 text-white',
-  warning: 'bg-warning-400 text-black',
-  danger: 'bg-danger-400 text-white',
-}
-
-const sizeStyles: Record<BadgeSize, string> = {
-  sm: 'w-5 h-5 text-xs',
-  md: 'w-7 h-7 text-xs',
-  lg: 'w-9 h-9 text-sm',
-}
-
-export function Badge(props: BadgeProps) {
-  const variant = () => props.variant ?? 'accent'
-  const size = () => props.size ?? 'md'
-
-  return (
-    <div
-      class={`flex items-center justify-center rounded-full border-b border-white font-semibold ${variantStyles[variant()]} ${sizeStyles[size()]} ${props.class ?? ''}`}
-    >
-      <Show when={props.count !== undefined} fallback={props.children}>
-        <span>{props.count}</span>
-      </Show>
-    </div>
-  )
-}