@proyecto-viviana/silapse 0.4.0

package/src/text/index.tsx

@@ -0,0 +1,52 @@
+/**
+ * Text component for proyecto-viviana-silapse
+ *
+ * Styling-only wrapper around solidaria-components Text.
+ */
+
+import { type JSX, splitProps } from 'solid-js';
+import {
+  Text as HeadlessText,
+  type TextProps as HeadlessTextProps,
+} from '@proyecto-viviana/solidaria-components';
+
+export type TextVariant = 'default' | 'muted' | 'success' | 'danger';
+export type TextSize = 'sm' | 'md' | 'lg';
+
+export interface TextProps extends Omit<HeadlessTextProps, 'class'> {
+  variant?: TextVariant;
+  size?: TextSize;
+  class?: string;
+}
+
+const variantStyles: Record<TextVariant, string> = {
+  default: 'text-primary-100',
+  muted: 'text-primary-400',
+  success: 'text-green-500',
+  danger: 'text-danger-400',
+};
+
+const sizeStyles: Record<TextSize, string> = {
+  sm: 'text-sm',
+  md: 'text-base',
+  lg: 'text-lg',
+};
+
+export function Text(props: TextProps): JSX.Element {
+  const [local, headlessProps] = splitProps(props, ['variant', 'size', 'class']);
+  const variant = () => local.variant ?? 'default';
+  const size = () => local.size ?? 'md';
+  return (
+    <HeadlessText
+      {...headlessProps}
+      class={`${variantStyles[variant()]} ${sizeStyles[size()]} ${local.class ?? ''}`}
+    />
+  );
+}
+
+// Sub-component re-exports
+export { Heading } from './Heading';
+export type { HeadingProps, HeadingLevel } from './Heading';
+export { StyledKeyboard } from './Keyboard';
+export type { KeyboardProps as StyledKeyboardProps } from './Keyboard';
+

package/src/textfield/TextArea.tsx

@@ -0,0 +1,193 @@
+/**
+ * TextArea component for proyecto-viviana-silapse
+ *
+ * Styled multiline text field with auto-resize support.
+ * Built on top of solidaria-components TextField + TextArea.
+ */
+
+import { type JSX, splitProps, Show, useContext } from 'solid-js'
+import {
+  TextField as HeadlessTextField,
+  Label as HeadlessLabel,
+  TextArea as HeadlessTextArea,
+  TextFieldContext,
+  type TextFieldProps as HeadlessTextFieldProps,
+  type TextFieldRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+import { useProviderProps } from '../provider'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type TextAreaSize = 'sm' | 'md' | 'lg'
+export type TextAreaVariant = 'outline' | 'filled'
+
+export interface TextAreaProps extends Omit<HeadlessTextFieldProps, 'class' | 'style' | 'children'> {
+  /** The size of the text area. */
+  size?: TextAreaSize
+  /** The visual variant of the text area. */
+  variant?: TextAreaVariant
+  /** Additional CSS class name. */
+  class?: string
+  /** Label text for the textarea. */
+  label?: string
+  /** Description text shown below the textarea. */
+  description?: string
+  /** Error message shown when invalid. */
+  errorMessage?: string
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    textarea: 'min-h-[60px] px-2 py-1.5 text-sm',
+    label: 'text-sm',
+    description: 'text-xs',
+  },
+  md: {
+    textarea: 'min-h-[80px] px-3 py-2 text-base',
+    label: 'text-sm',
+    description: 'text-sm',
+  },
+  lg: {
+    textarea: 'min-h-[100px] px-4 py-3 text-lg',
+    label: 'text-base',
+    description: 'text-sm',
+  },
+}
+
+function TextAreaDescription(props: { class?: string; children?: JSX.Element }): JSX.Element | null {
+  const context = useContext(TextFieldContext)
+  if (!context) return null
+  const descriptionProps = () => {
+    const { ref: _ref, ...rest } = context.descriptionProps as Record<string, unknown>
+    return rest
+  }
+  return (
+    <p {...descriptionProps()} class={props.class}>
+      {props.children}
+    </p>
+  )
+}
+
+function TextAreaError(props: { class?: string; children?: JSX.Element }): JSX.Element | null {
+  const context = useContext(TextFieldContext)
+  if (!context) return null
+  const errorMessageProps = () => {
+    const { ref: _ref, ...rest } = context.errorMessageProps as Record<string, unknown>
+    return rest
+  }
+  return (
+    <p {...errorMessageProps()} class={props.class}>
+      {props.children}
+    </p>
+  )
+}
+
+// ============================================
+// COMPONENT
+// ============================================
+
+/**
+ * TextAreas are multiline text inputs, useful for cases where users have
+ * a sizable amount of text to enter.
+ */
+export function TextArea(props: TextAreaProps): JSX.Element {
+  const mergedProps = useProviderProps(props)
+  const [local, headlessProps] = splitProps(mergedProps, [
+    'size',
+    'variant',
+    'class',
+    'label',
+    'description',
+    'errorMessage',
+  ])
+
+  const size = () => sizeStyles[local.size ?? 'md']
+
+  const containerClasses = () => {
+    const base = 'flex flex-col'
+    const custom = local.class ?? ''
+    return [base, custom].filter(Boolean).join(' ')
+  }
+
+  const textareaClasses = (renderProps: TextFieldRenderProps) => {
+    const base = 'w-full rounded-md transition-all duration-200 outline-none resize-none overflow-hidden'
+    const sizeClass = size().textarea
+
+    const variantClass = local.variant === 'filled'
+      ? 'bg-bg-200 border border-transparent'
+      : 'bg-transparent border border-bg-400'
+
+    let stateClass = ''
+    if (renderProps.isDisabled) {
+      stateClass = 'bg-bg-200 text-primary-500 cursor-not-allowed'
+    } else if (renderProps.isInvalid) {
+      stateClass = 'border-danger-500 focus:border-danger-400 focus:ring-2 focus:ring-danger-400/20'
+    } else {
+      stateClass = 'text-primary-100 placeholder:text-primary-500 focus:border-accent focus:ring-2 focus:ring-accent/20'
+    }
+
+    const hoverClass = renderProps.isDisabled ? '' : 'hover:border-accent-300'
+
+    return [base, sizeClass, variantClass, stateClass, hoverClass].filter(Boolean).join(' ')
+  }
+
+  const labelClasses = () => {
+    const base = 'block font-medium text-primary-200 mb-1'
+    const sizeClass = size().label
+    return [base, sizeClass].filter(Boolean).join(' ')
+  }
+
+  const descriptionClasses = () => {
+    const base = 'mt-1 text-primary-400'
+    const sizeClass = size().description
+    return [base, sizeClass].filter(Boolean).join(' ')
+  }
+
+  const errorClasses = () => {
+    const base = 'mt-1 text-danger-400'
+    const sizeClass = size().description
+    return [base, sizeClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessTextField
+      {...headlessProps}
+      label={local.label}
+      description={local.description}
+      errorMessage={local.errorMessage}
+      class={containerClasses()}
+      children={(renderProps) => (
+        <>
+          <Show when={local.label}>
+            <HeadlessLabel class={labelClasses()}>
+              {local.label}
+              <Show when={renderProps.isRequired}>
+                <span class="text-danger-400 ml-0.5">*</span>
+              </Show>
+            </HeadlessLabel>
+          </Show>
+
+          <HeadlessTextArea class={textareaClasses(renderProps)} />
+
+          <Show when={local.description && !renderProps.isInvalid}>
+            <TextAreaDescription class={descriptionClasses()}>
+              {local.description}
+            </TextAreaDescription>
+          </Show>
+
+          <Show when={local.errorMessage && renderProps.isInvalid}>
+            <TextAreaError class={errorClasses()}>
+              {local.errorMessage}
+            </TextAreaError>
+          </Show>
+        </>
+      )}
+    />
+  )
+}

package/src/textfield/index.tsx

@@ -0,0 +1,191 @@
+/**
+ * TextField component for proyecto-viviana-silapse
+ *
+ * Styled text field built on top of solidaria-components.
+ */
+
+import { type JSX, splitProps, Show, useContext } from 'solid-js'
+import {
+  TextField as HeadlessTextField,
+  Label as HeadlessLabel,
+  Input as HeadlessInput,
+  TextFieldContext,
+  type TextFieldProps as HeadlessTextFieldProps,
+  type TextFieldRenderProps,
+} from '@proyecto-viviana/solidaria-components'
+import { useProviderProps } from '../provider'
+
+// ============================================
+// TYPES
+// ============================================
+
+export type TextFieldSize = 'sm' | 'md' | 'lg'
+export type TextFieldVariant = 'outline' | 'filled'
+
+export interface TextFieldProps extends Omit<HeadlessTextFieldProps, 'class' | 'style' | 'children'> {
+  /** The size of the text field. */
+  size?: TextFieldSize
+  /** The visual variant of the text field. */
+  variant?: TextFieldVariant
+  /** Additional CSS class name. */
+  class?: string
+  /** Label text for the input. */
+  label?: string
+  /** Description text shown below the input. */
+  description?: string
+  /** Error message shown when invalid. */
+  errorMessage?: string
+}
+
+// ============================================
+// STYLES
+// ============================================
+
+const sizeStyles = {
+  sm: {
+    input: 'h-8 px-2 text-sm',
+    label: 'text-sm',
+    description: 'text-xs',
+  },
+  md: {
+    input: 'h-10 px-3 text-base',
+    label: 'text-sm',
+    description: 'text-sm',
+  },
+  lg: {
+    input: 'h-12 px-4 text-lg',
+    label: 'text-base',
+    description: 'text-sm',
+  },
+}
+
+function TextFieldDescription(props: { class?: string; children?: JSX.Element }): JSX.Element | null {
+  const context = useContext(TextFieldContext)
+  if (!context) return null
+  const descriptionProps = () => {
+    const { ref: _ref, ...rest } = context.descriptionProps as Record<string, unknown>
+    return rest
+  }
+  return (
+    <p {...descriptionProps()} class={props.class}>
+      {props.children}
+    </p>
+  )
+}
+
+function TextFieldError(props: { class?: string; children?: JSX.Element }): JSX.Element | null {
+  const context = useContext(TextFieldContext)
+  if (!context) return null
+  const errorMessageProps = () => {
+    const { ref: _ref, ...rest } = context.errorMessageProps as Record<string, unknown>
+    return rest
+  }
+  return (
+    <p {...errorMessageProps()} class={props.class}>
+      {props.children}
+    </p>
+  )
+}
+
+// ============================================
+// COMPONENT
+// ============================================
+
+export { TextArea } from './TextArea';
+export type { TextAreaProps, TextAreaSize, TextAreaVariant } from './TextArea';
+
+export function TextField(props: TextFieldProps): JSX.Element {
+  const mergedProps = useProviderProps(props)
+  const [local, headlessProps] = splitProps(mergedProps, [
+    'size',
+    'variant',
+    'class',
+    'label',
+    'description',
+    'errorMessage',
+  ])
+
+  const size = () => sizeStyles[local.size ?? 'md']
+
+  const containerClasses = () => {
+    const base = 'flex flex-col'
+    const custom = local.class ?? ''
+    return [base, custom].filter(Boolean).join(' ')
+  }
+
+  const inputClasses = (renderProps: TextFieldRenderProps) => {
+    const base = 'w-full rounded-md transition-all duration-200 outline-none'
+    const sizeClass = size().input
+
+    const variantClass = local.variant === 'filled'
+      ? 'bg-bg-200 border border-transparent'
+      : 'bg-transparent border border-bg-400'
+
+    let stateClass = ''
+    if (renderProps.isDisabled) {
+      stateClass = 'bg-bg-200 text-primary-500 cursor-not-allowed'
+    } else if (renderProps.isInvalid) {
+      stateClass = 'border-danger-500 focus:border-danger-400 focus:ring-2 focus:ring-danger-400/20'
+    } else {
+      stateClass = 'text-primary-100 placeholder:text-primary-500 focus:border-accent focus:ring-2 focus:ring-accent/20'
+    }
+
+    const hoverClass = renderProps.isDisabled ? '' : 'hover:border-accent-300'
+
+    return [base, sizeClass, variantClass, stateClass, hoverClass].filter(Boolean).join(' ')
+  }
+
+  const labelClasses = () => {
+    const base = 'block font-medium text-primary-200 mb-1'
+    const sizeClass = size().label
+    return [base, sizeClass].filter(Boolean).join(' ')
+  }
+
+  const descriptionClasses = () => {
+    const base = 'mt-1 text-primary-400'
+    const sizeClass = size().description
+    return [base, sizeClass].filter(Boolean).join(' ')
+  }
+
+  const errorClasses = () => {
+    const base = 'mt-1 text-danger-400'
+    const sizeClass = size().description
+    return [base, sizeClass].filter(Boolean).join(' ')
+  }
+
+  return (
+    <HeadlessTextField
+      {...headlessProps}
+      label={local.label}
+      description={local.description}
+      errorMessage={local.errorMessage}
+      class={containerClasses()}
+      children={(renderProps) => (
+        <>
+          <Show when={local.label}>
+            <HeadlessLabel class={labelClasses()}>
+              {local.label}
+              <Show when={renderProps.isRequired}>
+                <span class="text-danger-400 ml-0.5">*</span>
+              </Show>
+            </HeadlessLabel>
+          </Show>
+
+          <HeadlessInput class={inputClasses(renderProps)} />
+
+          <Show when={local.description && !renderProps.isInvalid}>
+            <TextFieldDescription class={descriptionClasses()}>
+              {local.description}
+            </TextFieldDescription>
+          </Show>
+
+          <Show when={local.errorMessage && renderProps.isInvalid}>
+            <TextFieldError class={errorClasses()}>
+              {local.errorMessage}
+            </TextFieldError>
+          </Show>
+        </>
+      )}
+    />
+  )
+}

package/src/theme/types.ts

@@ -0,0 +1,10 @@
+/**
+ * Theme type definition for proyecto-viviana-silapse
+ */
+
+export interface Theme {
+  /** CSS class to apply to the root element. */
+  className: string;
+  /** CSS custom properties for the theme. */
+  properties: Record<string, string>;
+}

package/src/theme-dark/index.ts

@@ -0,0 +1,63 @@
+/**
+ * Theme Dark module for proyecto-viviana-silapse
+ *
+ * Dark mode CSS custom properties. Apply the class to the root element
+ * or use the Provider component with colorScheme="dark".
+ */
+
+import type { Theme } from '../theme/types';
+
+export const themeDarkClass = 'vui-theme-dark';
+
+export const darkTheme: Theme = {
+  className: themeDarkClass,
+  properties: {
+    // Backgrounds
+    '--vui-bg-100': '#0a0a0a',
+    '--vui-bg-200': '#141414',
+    '--vui-bg-300': '#1e1e1e',
+    '--vui-bg-400': '#282828',
+    '--vui-bg-500': '#333333',
+
+    // Text / Primary
+    '--vui-text-primary': '#f5f5f5',
+    '--vui-text-secondary': '#a3a3a3',
+    '--vui-text-tertiary': '#737373',
+    '--vui-text-disabled': '#525252',
+
+    // Accent
+    '--vui-accent': '#818cf8',
+    '--vui-accent-hover': '#a5b4fc',
+    '--vui-accent-active': '#6366f1',
+    '--vui-accent-subtle': 'rgba(129, 140, 248, 0.15)',
+
+    // Border
+    '--vui-border': '#374151',
+    '--vui-border-hover': '#4b5563',
+    '--vui-border-focus': '#818cf8',
+
+    // Focus
+    '--vui-focus-ring': 'rgba(129, 140, 248, 0.5)',
+
+    // Status: Error/Danger
+    '--vui-danger': '#f87171',
+    '--vui-danger-subtle': 'rgba(248, 113, 113, 0.15)',
+
+    // Status: Success
+    '--vui-success': '#4ade80',
+    '--vui-success-subtle': 'rgba(74, 222, 128, 0.15)',
+
+    // Status: Warning
+    '--vui-warning': '#fbbf24',
+    '--vui-warning-subtle': 'rgba(251, 191, 36, 0.15)',
+
+    // Status: Info
+    '--vui-info': '#60a5fa',
+    '--vui-info-subtle': 'rgba(96, 165, 250, 0.15)',
+
+    // Overlay
+    '--vui-overlay-bg': 'rgba(0, 0, 0, 0.6)',
+    '--vui-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3)',
+    '--vui-shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.3)',
+  },
+};

package/src/theme-default/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Theme Default module for proyecto-viviana-silapse
+ *
+ * Re-exports the light theme as the default theme.
+ */
+
+export { themeLightClass as themeDefaultClass } from '../theme-light';
+export { lightTheme as defaultTheme } from '../theme-light';

package/src/theme-express/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Theme Express compatibility module.
+ */
+
+export const themeExpressClass = 'vui-theme-express';
+

package/src/theme-light/index.ts

@@ -0,0 +1,63 @@
+/**
+ * Theme Light module for proyecto-viviana-silapse
+ *
+ * Light theme CSS custom properties. Apply the class to the root element
+ * or use the Provider component with colorScheme="light".
+ */
+
+import type { Theme } from '../theme/types';
+
+export const themeLightClass = 'vui-theme-light';
+
+export const lightTheme: Theme = {
+  className: themeLightClass,
+  properties: {
+    // Backgrounds
+    '--vui-bg-100': '#ffffff',
+    '--vui-bg-200': '#fafafa',
+    '--vui-bg-300': '#f5f5f5',
+    '--vui-bg-400': '#eeeeee',
+    '--vui-bg-500': '#e0e0e0',
+
+    // Text / Primary
+    '--vui-text-primary': '#1a1a1a',
+    '--vui-text-secondary': '#666666',
+    '--vui-text-tertiary': '#999999',
+    '--vui-text-disabled': '#bdbdbd',
+
+    // Accent
+    '--vui-accent': '#6366f1',
+    '--vui-accent-hover': '#5558e6',
+    '--vui-accent-active': '#4f46e5',
+    '--vui-accent-subtle': 'rgba(99, 102, 241, 0.1)',
+
+    // Border
+    '--vui-border': '#e5e7eb',
+    '--vui-border-hover': '#d1d5db',
+    '--vui-border-focus': '#6366f1',
+
+    // Focus
+    '--vui-focus-ring': 'rgba(99, 102, 241, 0.5)',
+
+    // Status: Error/Danger
+    '--vui-danger': '#ef4444',
+    '--vui-danger-subtle': 'rgba(239, 68, 68, 0.1)',
+
+    // Status: Success
+    '--vui-success': '#22c55e',
+    '--vui-success-subtle': 'rgba(34, 197, 94, 0.1)',
+
+    // Status: Warning
+    '--vui-warning': '#f59e0b',
+    '--vui-warning-subtle': 'rgba(245, 158, 11, 0.1)',
+
+    // Status: Info
+    '--vui-info': '#3b82f6',
+    '--vui-info-subtle': 'rgba(59, 130, 246, 0.1)',
+
+    // Overlay
+    '--vui-overlay-bg': 'rgba(0, 0, 0, 0.4)',
+    '--vui-shadow': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1)',
+    '--vui-shadow-lg': '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)',
+  },
+};