@proyecto-viviana/ui 0.2.5 → 0.3.2

package/src/styles.css

@@ -1,450 +0,0 @@
-/*
- * Viviana UI Complete Styles (Theme + Components)
- *
- * WARNING: This file contains @theme which cannot be @imported in Tailwind v4.
- * Use components.css instead and copy the @theme block from theme.css.
- *
- * For proper usage, see theme.css documentation.
- */
-
-/* ===== THEME ===== */
-@theme {
-  /* Breakpoints */
-  --breakpoint-xxs: 320px;
-  --breakpoint-xs: 475px;
-
-  /* Background - Dark blue-gray */
-  --color-bg-100: #3B5260;
-  --color-bg-200: #293E4B;
-  --color-bg-300: #24313a;
-  --color-bg-400: #1D272E;
-  --color-bg-light: #515151;
-
-  /* Accent - Pink */
-  --color-accent: #DF5C9A;
-  --color-accent-200: #FFB2D7;
-  --color-accent-300: #FF88C0;
-  --color-accent-500: #DF5C9A;
-  --color-accent-highlight: #e2a2be;
-
-  /* Primary - Cyan/Blue */
-  --color-primary-100: #D9F2FF;
-  --color-primary-200: #D0E9F5;
-  --color-primary-300: #ADCCDC;
-  --color-primary-400: #B8DFFF;
-  --color-primary-500: #75ABC7;
-  --color-primary-600: #58748B;
-  --color-primary-700: #4F6D85;
-  --color-primary-800: #4C6477;
-
-  /* Success - Green */
-  --color-success-100: #E5FFF3;
-  --color-success-400: #C2FFC8;
-  --color-success-600: #559D87;
-
-  /* Warning - Yellow */
-  --color-warning-100: #FFFBE5;
-  --color-warning-400: #FFDD87;
-  --color-warning-600: #9D8D55;
-
-  /* Danger - Red */
-  --color-danger-100: #FFE5E5;
-  --color-danger-400: #FF8787;
-  --color-danger-600: #9D5555;
-
-  /* Cards */
-  --color-cards-bg: #373737;
-  --color-cards-bg-load: #484848;
-  --color-correct: #83f1a7;
-  --color-incorrect: #e74c3c;
-
-  /* Typography */
-  --font-sen: 'Sen', sans-serif;
-  --font-jost: 'Jost', sans-serif;
-  --font-sans: 'Sen', sans-serif;
-  --font-mono: 'JetBrains Mono', monospace;
-}
-
-/* ===== FONT UTILITIES ===== */
-.font-sen {
-  font-family: 'Sen', sans-serif;
-}
-
-.font-jost {
-  font-family: 'Jost', sans-serif;
-}
-
-/* ===== CUSTOM SHADOWS ===== */
-.drop-shadow-title-card {
-  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
-}
-
-.drop-shadow-logo {
-  filter: drop-shadow(0 0 10px rgba(223, 92, 154, 0.8));
-}
-
-.shadow-primary-chip {
-  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
-}
-
-/* ===== BUTTON COMPONENT ===== */
-.vui-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
-  font-weight: 500;
-  border-radius: 0.5rem;
-  transition: all 0.2s ease;
-  cursor: pointer;
-  border: none;
-  outline: none;
-}
-
-.vui-button:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 2px var(--color-bg-400), 0 0 0 4px var(--color-accent-300);
-}
-
-.vui-button:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.vui-button.is-pressed {
-  transform: scale(0.98);
-}
-
-/* Fill variants - pokeforos style */
-/* Primary = Pink accent (main CTA) */
-.vui-button--fill.vui-button--primary {
-  background: var(--color-accent);
-  color: white;
-}
-.vui-button--fill.vui-button--primary:hover:not(:disabled) {
-  background: var(--color-accent-300);
-}
-.vui-button--fill.vui-button--primary:active:not(:disabled) {
-  background: var(--color-accent-500);
-}
-
-/* Secondary = Cyan primary */
-.vui-button--fill.vui-button--secondary {
-  background: var(--color-primary-500);
-  color: white;
-}
-.vui-button--fill.vui-button--secondary:hover:not(:disabled) {
-  background: var(--color-primary-400);
-}
-.vui-button--fill.vui-button--secondary:active:not(:disabled) {
-  background: var(--color-primary-600);
-}
-
-/* Accent = Also pink (alias for primary look) */
-.vui-button--fill.vui-button--accent {
-  background: var(--color-accent);
-  color: white;
-}
-.vui-button--fill.vui-button--accent:hover:not(:disabled) {
-  background: var(--color-accent-300);
-}
-.vui-button--fill.vui-button--accent:active:not(:disabled) {
-  background: var(--color-accent-500);
-}
-
-/* Negative = Danger red */
-.vui-button--fill.vui-button--negative {
-  background: var(--color-danger-400);
-  color: white;
-}
-.vui-button--fill.vui-button--negative:hover:not(:disabled) {
-  background: var(--color-danger-600);
-}
-.vui-button--fill.vui-button--negative:active:not(:disabled) {
-  background: var(--color-danger-400);
-}
-
-/* Outline variants */
-.vui-button--outline.vui-button--primary {
-  border: 2px solid var(--color-accent);
-  color: var(--color-accent-200);
-  background: transparent;
-}
-.vui-button--outline.vui-button--primary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
-}
-
-.vui-button--outline.vui-button--secondary {
-  border: 2px solid var(--color-primary-500);
-  color: var(--color-primary-300);
-  background: transparent;
-}
-.vui-button--outline.vui-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-primary-500) 15%, transparent);
-}
-
-.vui-button--outline.vui-button--accent {
-  border: 2px solid var(--color-accent);
-  color: var(--color-accent-200);
-  background: transparent;
-}
-.vui-button--outline.vui-button--accent:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
-}
-
-.vui-button--outline.vui-button--negative {
-  border: 2px solid var(--color-danger-400);
-  color: var(--color-danger-100);
-  background: transparent;
-}
-.vui-button--outline.vui-button--negative:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--color-danger-400) 15%, transparent);
-}
-
-/* ===== CHIP COMPONENT ===== */
-.vui-chip {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
-  font-weight: 600;
-  border-radius: 9999px;
-  text-transform: uppercase;
-}
-
-.vui-chip--primary {
-  background: var(--color-primary-700);
-  color: var(--color-primary-100);
-  box-shadow: 0 2px 8px rgba(79, 109, 133, 0.4);
-}
-
-.vui-chip--accent {
-  background: var(--color-accent);
-  color: white;
-}
-
-.vui-chip--success {
-  background: var(--color-success-600);
-  color: var(--color-success-100);
-}
-
-.vui-chip--warning {
-  background: var(--color-warning-600);
-  color: var(--color-warning-100);
-}
-
-.vui-chip--danger {
-  background: var(--color-danger-600);
-  color: var(--color-danger-100);
-}
-
-/* ===== BADGE COMPONENT ===== */
-.vui-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.25rem 0.75rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 0.375rem;
-}
-
-.vui-badge--primary {
-  background: var(--color-primary-700);
-  color: var(--color-primary-100);
-}
-
-.vui-badge--accent {
-  background: var(--color-accent);
-  color: white;
-}
-
-.vui-badge--success {
-  background: var(--color-success-600);
-  color: var(--color-success-100);
-}
-
-.vui-badge--warning {
-  background: var(--color-warning-600);
-  color: var(--color-warning-100);
-}
-
-.vui-badge--danger {
-  background: var(--color-danger-600);
-  color: var(--color-danger-100);
-}
-
-/* ===== ALERT COMPONENT ===== */
-.vui-alert {
-  display: flex;
-  align-items: flex-start;
-  gap: 0.75rem;
-  padding: 1rem;
-  border-radius: 0.5rem;
-  border-width: 1px;
-}
-
-.vui-alert--info {
-  background: color-mix(in srgb, var(--color-primary-700) 20%, transparent);
-  border-color: var(--color-primary-600);
-  color: var(--color-primary-200);
-}
-
-.vui-alert--success {
-  background: color-mix(in srgb, var(--color-success-600) 20%, transparent);
-  border-color: var(--color-success-600);
-  color: var(--color-success-100);
-}
-
-.vui-alert--warning {
-  background: color-mix(in srgb, var(--color-warning-600) 20%, transparent);
-  border-color: var(--color-warning-600);
-  color: var(--color-warning-100);
-}
-
-.vui-alert--error {
-  background: color-mix(in srgb, var(--color-danger-600) 20%, transparent);
-  border-color: var(--color-danger-400);
-  color: var(--color-danger-100);
-}
-
-/* ===== AVATAR COMPONENT ===== */
-.vui-avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 9999px;
-  overflow: hidden;
-  background: var(--color-bg-300);
-  color: var(--color-primary-300);
-  font-weight: 600;
-}
-
-.vui-avatar--sm {
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.75rem;
-}
-
-.vui-avatar--md {
-  width: 2.5rem;
-  height: 2.5rem;
-  font-size: 0.875rem;
-}
-
-.vui-avatar--lg {
-  width: 3rem;
-  height: 3rem;
-  font-size: 1rem;
-}
-
-.vui-avatar--xl {
-  width: 4rem;
-  height: 4rem;
-  font-size: 1.25rem;
-}
-
-/* ===== CARD COMPONENT ===== */
-.vui-card {
-  background: var(--color-bg-300);
-  border: 1px solid var(--color-primary-600);
-  border-radius: 0.75rem;
-  overflow: hidden;
-}
-
-.vui-card--accent-border {
-  border-bottom-color: var(--color-accent-500);
-}
-
-/* ===== GRADIENTS ===== */
-.hero-gradient {
-  background: linear-gradient(135deg, var(--color-bg-300) 0%, var(--color-bg-400) 100%);
-}
-
-.gradient-text {
-  background: linear-gradient(135deg, var(--color-primary-300), var(--color-accent-300));
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-  background-clip: text;
-}
-
-/* ===== PROSE/DOCS ===== */
-.prose {
-  max-width: 65ch;
-}
-
-.prose h1 {
-  font-size: 2.25rem;
-  font-weight: 700;
-  margin-bottom: 1rem;
-  color: var(--color-primary-100);
-}
-
-.prose h2 {
-  font-size: 1.5rem;
-  font-weight: 600;
-  margin-top: 2rem;
-  margin-bottom: 0.75rem;
-  color: var(--color-primary-200);
-}
-
-.prose h3 {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin-top: 1.5rem;
-  margin-bottom: 0.5rem;
-  color: var(--color-primary-200);
-}
-
-.prose p {
-  margin-bottom: 1rem;
-  line-height: 1.75;
-  color: var(--color-primary-300);
-}
-
-.prose code {
-  background: var(--color-bg-300);
-  padding: 0.125rem 0.375rem;
-  border-radius: 0.25rem;
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  color: var(--color-accent-200);
-}
-
-.prose pre {
-  background: var(--color-bg-400);
-  color: var(--color-primary-100);
-  padding: 1rem;
-  border-radius: 0.5rem;
-  overflow-x: auto;
-  margin: 1rem 0;
-}
-
-.prose pre code {
-  background: transparent;
-  padding: 0;
-  color: inherit;
-}
-
-/* ===== SIDEBAR ===== */
-.sidebar-link {
-  display: block;
-  padding: 0.5rem 1rem;
-  border-radius: 0.375rem;
-  color: var(--color-primary-300);
-  transition: all 0.15s;
-}
-
-.sidebar-link:hover {
-  background: var(--color-bg-300);
-  color: var(--color-primary-100);
-}
-
-.sidebar-link.active {
-  background: var(--color-primary-700);
-  color: var(--color-primary-100);
-  font-weight: 500;
-}

package/src/switch/ToggleSwitch.tsx

@@ -1,112 +0,0 @@
-/**
- * ToggleSwitch component for proyecto-viviana-ui
- *
- * A styled switch component built on top of solidaria-components.
- * This component only handles styling - all behavior and accessibility
- * is provided by the headless Switch from solidaria-components.
- *
- * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
- */
-
-import { type JSX, splitProps, mergeProps as solidMergeProps } from 'solid-js';
-import { ToggleSwitch as HeadlessToggleSwitch, type ToggleSwitchProps as HeadlessToggleSwitchProps, type ToggleSwitchRenderProps } from '@proyecto-viviana/solidaria-components';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type SwitchSize = 'sm' | 'md' | 'lg';
-
-export interface ToggleSwitchProps extends Omit<HeadlessToggleSwitchProps, 'class' | 'children'> {
-  /** The size of the switch. */
-  size?: SwitchSize;
-  /** Additional CSS class name. */
-  class?: string;
-  /** Label text for the switch. */
-  children?: JSX.Element;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    track: 'h-5 w-9',
-    thumb: 'h-4 w-4',
-    translate: 'translate-x-4',
-  },
-  md: {
-    track: 'h-6 w-11',
-    thumb: 'h-5 w-5',
-    translate: 'translate-x-5',
-  },
-  lg: {
-    track: 'h-7 w-14',
-    thumb: 'h-6 w-6',
-    translate: 'translate-x-7',
-  },
-};
-
-// ============================================
-// COMPONENT
-// ============================================
-
-/**
- * A switch allows users to toggle between two mutually exclusive states.
- *
- * Built on solidaria-components Switch for full accessibility support.
- * Named "ToggleSwitch" to avoid conflict with SolidJS's built-in Switch component.
- */
-export function ToggleSwitch(props: ToggleSwitchProps): JSX.Element {
-  const defaultProps: Partial<ToggleSwitchProps> = {
-    size: 'md',
-  };
-
-  const merged = solidMergeProps(defaultProps, props);
-
-  const [local, headlessProps] = splitProps(merged, [
-    'size',
-    'class',
-  ]);
-
-  const size = () => sizeStyles[local.size!];
-
-  // Generate class based on render props
-  const getClassName = (renderProps: ToggleSwitchRenderProps): 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 (
-    <HeadlessToggleSwitch
-      {...headlessProps}
-      class={getClassName}
-    >
-      {(renderProps: ToggleSwitchRenderProps) => (
-        <>
-          <span
-            class={[
-              'relative rounded-full transition-colors duration-200',
-              'focus-within:ring-2 focus-within:ring-accent-300 focus-within:ring-offset-2 focus-within:ring-offset-bg-400',
-              size().track,
-              renderProps.isSelected ? 'bg-accent' : 'bg-bg-300',
-              renderProps.isDisabled ? 'cursor-not-allowed' : 'cursor-pointer',
-            ].join(' ')}
-          >
-            <span
-              class={[
-                'absolute top-0.5 left-0.5 rounded-full bg-white shadow transition-transform duration-200',
-                size().thumb,
-                renderProps.isSelected ? size().translate : 'translate-x-0',
-              ].join(' ')}
-            />
-          </span>
-          {props.children && <span class="text-primary-200">{props.children}</span>}
-        </>
-      )}
-    </HeadlessToggleSwitch>
-  );
-}

package/src/switch/index.tsx

@@ -1,90 +0,0 @@
-/**
- * Switch components for proyecto-viviana-ui
- *
- * This file exports:
- * - ToggleSwitch: The primary switch component built on solidaria-components
- *                 (named to avoid conflict with SolidJS's built-in Switch)
- * - TabSwitch: A custom two-option tab selector
- */
-
-import { type JSX, createSignal, createEffect } from 'solid-js'
-
-// Re-export ToggleSwitch (the solidaria-components based switch)
-export { ToggleSwitch, type ToggleSwitchProps, type SwitchSize } from './ToggleSwitch'
-
-// ============================================
-// TAB SWITCH (Two-option selector)
-// ============================================
-
-interface SwitchOption {
-  label: string
-  value: string
-}
-
-export interface TabSwitchProps {
-  options: SwitchOption[]
-  value?: string
-  onChange?: (value: string) => void
-  class?: string
-}
-
-/**
- * A tab-style switch that allows users to select between two options.
- * This is a custom component, not based on solidaria/react-aria.
- */
-export function TabSwitch(props: TabSwitchProps): JSX.Element {
-  const [leftSelected, setLeftSelected] = createSignal(
-    props.value ? props.value === props.options[0]?.value : true
-  )
-
-  createEffect(() => {
-    if (props.value !== undefined) {
-      setLeftSelected(props.value === props.options[0]?.value)
-    }
-  })
-
-  const toggle = () => {
-    const newLeftSelected = !leftSelected()
-    setLeftSelected(newLeftSelected)
-    const newValue = newLeftSelected ? props.options[0]?.value : props.options[1]?.value
-    if (newValue) {
-      props.onChange?.(newValue)
-    }
-  }
-
-  const leftSelectedStyle = 'left-0 w-[142px] border-l-2'
-  const rightSelectedStyle = 'left-[142px] w-[108px] border-r-2'
-  const textSelected = 'font-extrabold text-primary-300'
-  const textUnselected = 'font-medium text-primary-600 tracking-wider'
-
-  return (
-    <div
-      onClick={toggle}
-      class={`relative bg-bg-400 rounded-full w-[250px] cursor-pointer ${props.class ?? ''}`}
-    >
-      <div
-        class={`${
-          leftSelected() ? leftSelectedStyle : rightSelectedStyle
-        } transition-all duration-500 ease-in-out z-0 absolute bg-primary-600 rounded-full h-8 border-accent-300`}
-      />
-      <div class="flex z-10 h-8 justify-around">
-        <button
-          type="button"
-          class={`${
-            leftSelected() ? textSelected : textUnselected
-          } transition-all ease-in-out duration-500 z-10 text-lg flex justify-center items-center pointer-events-none`}
-        >
-          <span>{props.options[0]?.label ?? 'TENDENCIAS'}</span>
-        </button>
-        <button
-          type="button"
-          class={`${
-            leftSelected() ? textUnselected : textSelected
-          } transition-all ease-in-out duration-500 z-10 text-lg flex justify-center items-center pointer-events-none`}
-        >
-          <span>{props.options[1]?.label ?? 'ÚLTIMOS'}</span>
-        </button>
-      </div>
-    </div>
-  )
-}