@proyecto-viviana/ui 0.3.2 → 0.3.4

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 RadioProps as HeadlessRadioProps } from '@proyecto-viviana/solidaria-components';
+import { type RadioGroupProps as HeadlessRadioGroupProps, type RadioProps as HeadlessRadioProps } from '@proyecto-viviana/solidaria-components';
 export type RadioGroupOrientation = 'horizontal' | 'vertical';
 export type RadioGroupSize = 'sm' | 'md' | 'lg';
-export type RadioGroupProps = {
+export interface RadioGroupProps extends Omit<HeadlessRadioGroupProps, 'class' | 'style'> {
     /** The size of the radio buttons. */
     size?: RadioGroupSize;
     /** Additional CSS class name. */
@@ -19,32 +19,10 @@ export type RadioGroupProps = {
     description?: string;
     /** Error message when invalid. */
     errorMessage?: string;
-    /** 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'> {
+}
+export interface RadioProps extends Omit<HeadlessRadioProps, 'class' | 'style'> {
     /** 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.
@@ -53,7 +31,14 @@ export interface RadioProps extends Omit<HeadlessRadioProps, 'class' | 'style' |
  */
 export declare function RadioGroup(props: RadioGroupProps): JSX.Element;
 /**
- * A radio button allows a user to select a single option from a list of mutually exclusive options.
+ * 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.
  *
  * 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,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"}
+{"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"}

package/dist/test-utils/index.d.ts

@@ -1,4 +1,4 @@
-import userEvent from '@testing-library/user-event';
+import userEvent, { type UserEvent } from '@testing-library/user-event';
 /**
  * Pointer map matching react-spectrum's test setup.
  * Ensures pointer events have realistic dimensions so they aren't mistaken for virtual clicks.
@@ -38,7 +38,7 @@ export declare const pointerMap: ({
  * - pointerMap - Realistic pointer event dimensions
  * - pointerEventsCheck: Never - Skip pointer-events CSS check (jsdom doesn't handle this well)
  */
-export declare function setupUser(): import("@testing-library/user-event").UserEvent;
+export declare function setupUser(): UserEvent;
 export { render, screen, fireEvent, cleanup } from '@solidjs/testing-library';
 export { userEvent };
 //# sourceMappingURL=index.d.ts.map

package/dist/test-utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test-utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,6BAA6B,CAAC;AAGpD;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOtB,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,SAAS,oDAMxB;AAED,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/test-utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,EAAE,EAAE,KAAK,SAAS,EAA2B,MAAM,6BAA6B,CAAC;AAEjG;;;GAGG;AACH,eAAO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAOtB,CAAC;AASF;;;;;GAKG;AACH,wBAAgB,SAAS,IAAI,SAAS,CAQrC;AAED,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAC9E,OAAO,EAAE,SAAS,EAAE,CAAC"}

package/package.json

@@ -1,45 +1,46 @@
 {
   "name": "@proyecto-viviana/ui",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Styled UI components for SolidJS - inspired by React Spectrum",
   "type": "module",
-  "main": "./dist/index.ssr.js",
+  "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "solid": "./dist/index.jsx",
+      "solid": "./src/index.ts",
+      "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./theme.css": {
       "import": "./dist/theme.css",
-      "default": "./dist/theme.css"
+      "default": "./src/theme.css"
     },
     "./styles.css": {
       "import": "./dist/styles.css",
-      "default": "./dist/styles.css"
+      "default": "./src/styles.css"
     },
     "./components.css": {
       "import": "./dist/components.css",
-      "default": "./dist/components.css"
+      "default": "./src/components.css"
     }
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": [
     "*.css"
   ],
   "scripts": {
-    "build": "deno task build",
+    "build": "tsup && rm -f tsconfig.build.tsbuildinfo && tsc -p tsconfig.build.json",
     "dev": "tsup --watch",
-    "prepublishOnly": "deno task build"
+    "prepublishOnly": "echo 'Use deno task release from root'"
   },
   "dependencies": {
-    "@proyecto-viviana/solid-stately": "^0.2.2",
-    "@proyecto-viviana/solidaria": "^0.2.2",
-    "@proyecto-viviana/solidaria-components": "^0.2.2"
+    "@proyecto-viviana/solidaria": "workspace:*",
+    "@proyecto-viviana/solidaria-components": "workspace:*"
   },
   "peerDependencies": {
     "solid-js": "^1.9.0"

package/src/alert/index.tsx

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,313 @@
+/**
+ * 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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,43 @@
+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>
+  )
+}