@proyecto-viviana/ui 0.3.1 → 0.3.3

package/src/styles.css

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

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

@@ -0,0 +1,90 @@
+/**
+ * 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>
+  )
+}