@proyecto-viviana/ui 0.1.0 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proyecto-viviana/ui",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Styled UI components for SolidJS - inspired by React Spectrum",
   "type": "module",
   "main": "./dist/index.js",
@@ -8,7 +8,7 @@
   "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "solid": "./dist/index.js",
+      "solid": "./src/index.ts",
       "import": "./dist/index.js",
       "types": "./dist/index.d.ts"
     },
@@ -17,7 +17,8 @@
     "./components.css": "./dist/components.css"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
   "sideEffects": [
     "*.css"
@@ -28,8 +29,8 @@
     "prepublishOnly": "bun run build"
   },
   "dependencies": {
-    "@proyecto-viviana/solidaria": "^0.0.1",
-    "@proyecto-viviana/solidaria-components": "^0.0.1"
+    "@proyecto-viviana/solidaria": "^0.0.2",
+    "@proyecto-viviana/solidaria-components": "^0.0.2"
   },
   "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/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>
+  )
+}

package/src/button/Button.tsx

@@ -0,0 +1,75 @@
+/**
+ * Button component for proyecto-viviana-ui
+ *
+ * A styled button component built on top of solidaria-components.
+ * This component only handles styling - all behavior and accessibility
+ * is provided by the headless Button from solidaria-components.
+ */
+
+import { type JSX, splitProps, mergeProps as solidMergeProps } from 'solid-js';
+import { Button as HeadlessButton, type ButtonRenderProps } from '@proyecto-viviana/solidaria-components';
+import type { ButtonProps } from './types';
+
+/**
+ * Buttons allow users to perform an action or to navigate to another page.
+ * They have multiple styles for various needs, and are ideal for calling attention to
+ * where a user needs to do something in order to move forward in a flow.
+ *
+ * Built on solidaria-components Button for full accessibility support.
+ * Styles are defined in components.css using the vui-button class system.
+ */
+export function Button(props: ButtonProps): JSX.Element {
+  const defaultProps: Partial<ButtonProps> = {
+    variant: 'primary',
+    buttonStyle: 'fill',
+    size: 'md',
+  };
+
+  const merged = solidMergeProps(defaultProps, props);
+
+  const [local, headlessProps] = splitProps(merged, [
+    'children',
+    'variant',
+    'buttonStyle',
+    'size',
+    'fullWidth',
+    'staticColor',
+    'class',
+  ]);
+
+  // Generate class based on render props
+  const getClassName = (renderProps: ButtonRenderProps): string => {
+    const classList = [
+      'vui-button',
+      `vui-button--${local.buttonStyle}`,
+      `vui-button--${local.variant}`,
+      `vui-button--${local.size}`,
+    ];
+
+    if (renderProps.isPressed) {
+      classList.push('is-pressed');
+    }
+
+    if (local.fullWidth) {
+      classList.push('vui-button--full-width');
+    }
+
+    if (local.class) {
+      classList.push(local.class);
+    }
+
+    return classList.join(' ');
+  };
+
+  return (
+    <HeadlessButton
+      {...headlessProps}
+      class={getClassName}
+      data-variant={local.variant}
+      data-style={local.buttonStyle}
+      data-static-color={local.staticColor || undefined}
+    >
+      {local.children}
+    </HeadlessButton>
+  );
+}

package/src/button/index.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonStyle, ButtonSize, StaticColor } from './types';

package/src/button/types.ts

@@ -0,0 +1,24 @@
+import type { JSX } from 'solid-js';
+import type { ButtonProps as HeadlessButtonProps } from '@proyecto-viviana/solidaria-components';
+
+export type ButtonVariant = 'primary' | 'secondary' | 'accent' | 'positive' | 'negative' | 'ghost' | 'link';
+export type ButtonStyle = 'fill' | 'outline';
+export type ButtonSize = 'sm' | 'md' | 'lg';
+export type StaticColor = 'white' | 'black';
+
+export interface ButtonProps extends Omit<HeadlessButtonProps, 'class' | 'children' | 'style'> {
+  /** The content to display in the button. */
+  children?: JSX.Element;
+  /** The visual style of the button. */
+  variant?: ButtonVariant;
+  /** The background style of the button. */
+  buttonStyle?: ButtonStyle;
+  /** The size of the button. */
+  size?: ButtonSize;
+  /** Whether the button should take up the full width of its container. */
+  fullWidth?: boolean;
+  /** The static color style to apply. Useful when the button appears over a color background. */
+  staticColor?: StaticColor;
+  /** Additional CSS class name. */
+  class?: string;
+}

package/src/checkbox/index.tsx

@@ -0,0 +1,258 @@
+/**
+ * Checkbox component for proyecto-viviana-ui
+ *
+ * A styled checkbox component built on top of solidaria-components.
+ * This component only handles styling - all behavior and accessibility
+ * is provided by the headless Checkbox from solidaria-components.
+ */
+
+import { type JSX, splitProps, mergeProps as solidMergeProps, Show } from 'solid-js'
+import {
+  Checkbox as HeadlessCheckbox,
+  CheckboxGroup as HeadlessCheckboxGroup,
+  type CheckboxProps as HeadlessCheckboxProps,
+  type CheckboxGroupProps as HeadlessCheckboxGroupProps,
+  type CheckboxRenderProps,
+  type CheckboxGroupRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type CheckboxSize = 'sm' | 'md' | 'lg'
+
+export interface CheckboxProps extends Omit<HeadlessCheckboxProps, 'class' | 'children' | 'style'> {
+  /** The size of the checkbox. */
+  size?: CheckboxSize
+  /** Additional CSS class name. */
+  class?: string
+  /** Label text for the checkbox. */
+  children?: JSX.Element
+}
+
+export interface CheckboxGroupProps extends Omit<HeadlessCheckboxGroupProps, 'class' | 'children' | 'style'> {
+  /** Additional CSS class name. */
+  class?: string
+  /** Children checkboxes. */
+  children?: JSX.Element
+  /** Label for the group. */
+  label?: string
+  /** Description for the group. */
+  description?: string
+  /** Error message when invalid. */
+  errorMessage?: string
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    box: 'h-4 w-4',
+    icon: 'h-3 w-3',
+    label: 'text-sm',
+  },
+  md: {
+    box: 'h-5 w-5',
+    icon: 'h-3.5 w-3.5',
+    label: 'text-base',
+  },
+  lg: {
+    box: 'h-6 w-6',
+    icon: 'h-4 w-4',
+    label: 'text-lg',
+  },
+}
+
+// ============================================
+// ICONS
+// ============================================
+
+function CheckIcon(props: { class?: string }) {
+  return (
+    <svg
+      class={props.class}
+      viewBox="0 0 12 10"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 5L4.5 8.5L11 1"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+function IndeterminateIcon(props: { class?: string }) {
+  return (
+    <svg
+      class={props.class}
+      viewBox="0 0 12 2"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 1H11"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+      />
+    </svg>
+  )
+}
+
+// ============================================
+// CHECKBOX COMPONENT
+// ============================================
+
+/**
+ * A checkbox allows users to select one or more items from a set.
+ *
+ * Built on solidaria-components Checkbox for full accessibility support.
+ */
+export function Checkbox(props: CheckboxProps): JSX.Element {
+  const defaultProps: Partial<CheckboxProps> = {
+    size: 'md',
+  }
+
+  const merged = solidMergeProps(defaultProps, props)
+
+  const [local, headlessProps] = splitProps(merged, [
+    'size',
+    'class',
+    'children',
+  ])
+
+  const size = () => sizeStyles[local.size!]
+
+  // Generate class based on render props
+  const getClassName = (renderProps: CheckboxRenderProps): string => {
+    const base = 'inline-flex items-center gap-2 cursor-pointer'
+    const disabledClass = renderProps.isDisabled ? 'cursor-not-allowed opacity-50' : ''
+    const custom = local.class || ''
+    return [base, disabledClass, custom].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessCheckbox
+      {...headlessProps}
+      class={getClassName}
+    >
+      {(renderProps: CheckboxRenderProps) => {
+        const boxClasses = () => {
+          const base = 'relative flex items-center justify-center rounded border-2 transition-all duration-200'
+          const sizeClass = size().box
+
+          let colorClass: string
+          if (renderProps.isDisabled) {
+            colorClass = 'border-bg-300 bg-bg-200'
+          } else if (renderProps.isSelected || renderProps.isIndeterminate) {
+            colorClass = 'border-accent bg-accent'
+          } else {
+            colorClass = 'border-primary-600 bg-transparent hover:border-accent-300'
+          }
+
+          const focusClass = renderProps.isFocusVisible
+            ? 'ring-2 ring-accent-300 ring-offset-2 ring-offset-bg-400'
+            : ''
+          const cursorClass = renderProps.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer'
+
+          return [base, sizeClass, colorClass, focusClass, cursorClass].filter(Boolean).join(' ')
+        }
+
+        const iconClasses = () => {
+          const base = 'text-white transition-opacity duration-200'
+          const sizeClass = size().icon
+          const visibilityClass = (renderProps.isSelected || renderProps.isIndeterminate)
+            ? 'opacity-100'
+            : 'opacity-0'
+
+          return [base, sizeClass, visibilityClass].filter(Boolean).join(' ')
+        }
+
+        const labelClasses = () => {
+          const base = 'text-primary-200'
+          const sizeClass = size().label
+          const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+
+          return [base, sizeClass, disabledClass].filter(Boolean).join(' ')
+        }
+
+        return (
+          <>
+            <span class={boxClasses()}>
+              <Show
+                when={!renderProps.isIndeterminate}
+                fallback={<IndeterminateIcon class={iconClasses()} />}
+              >
+                <CheckIcon class={iconClasses()} />
+              </Show>
+            </span>
+            <Show when={local.children}>
+              <span class={labelClasses()}>{local.children}</span>
+            </Show>
+          </>
+        )
+      }}
+    </HeadlessCheckbox>
+  )
+}
+
+// ============================================
+// CHECKBOX GROUP COMPONENT
+// ============================================
+
+/**
+ * A checkbox group allows users to select multiple items from a list.
+ *
+ * Built on solidaria-components CheckboxGroup for full accessibility support.
+ */
+export function CheckboxGroup(props: CheckboxGroupProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, [
+    'class',
+    'children',
+    'label',
+    'description',
+    'errorMessage',
+  ])
+
+  // Generate class based on render props
+  const getClassName = (renderProps: CheckboxGroupRenderProps): string => {
+    const base = 'flex flex-col gap-2'
+    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
+    const custom = local.class || ''
+    return [base, disabledClass, custom].filter(Boolean).join(' ')
+  }
+
+  // Render children function for the headless component
+  const renderChildren = (renderProps: CheckboxGroupRenderProps) => (
+    <>
+      <Show when={local.label}>
+        <span class="text-sm font-medium text-primary-200">{local.label}</span>
+      </Show>
+      <div class="flex flex-col gap-2">
+        {local.children}
+      </div>
+      <Show when={local.description && !renderProps.isInvalid}>
+        <span class="text-sm text-primary-400">{local.description}</span>
+      </Show>
+      <Show when={local.errorMessage && renderProps.isInvalid}>
+        <span class="text-sm text-danger-400">{local.errorMessage}</span>
+      </Show>
+    </>
+  )
+
+  return (
+    <HeadlessCheckboxGroup
+      {...headlessProps}
+      class={getClassName}
+      children={renderChildren as any}
+    />
+  )
+}