@proyecto-viviana/ui 0.2.5 → 0.3.1

package/src/breadcrumbs/index.tsx

@@ -1,207 +0,0 @@
-/**
- * Breadcrumbs component for proyecto-viviana-ui
- *
- * Styled breadcrumbs component built on top of solidaria-components.
- * Inspired by Spectrum 2's Breadcrumbs component patterns.
- */
-
-import { type JSX, splitProps, createContext, useContext } from 'solid-js'
-import {
-  Breadcrumbs as HeadlessBreadcrumbs,
-  BreadcrumbItem as HeadlessBreadcrumbItem,
-  type BreadcrumbsProps as HeadlessBreadcrumbsProps,
-  type BreadcrumbItemProps as HeadlessBreadcrumbItemProps,
-  type BreadcrumbsRenderProps,
-  type BreadcrumbItemRenderProps,
-} from '@proyecto-viviana/solidaria-components'
-
-// ============================================
-// SIZE CONTEXT
-// ============================================
-
-export type BreadcrumbsSize = 'sm' | 'md' | 'lg'
-export type BreadcrumbsVariant = 'default' | 'subtle'
-
-interface BreadcrumbsContextValue {
-  size: BreadcrumbsSize
-  variant: BreadcrumbsVariant
-  showSeparator: boolean
-}
-
-const BreadcrumbsSizeContext = createContext<BreadcrumbsContextValue>({
-  size: 'md',
-  variant: 'default',
-  showSeparator: true,
-})
-
-// ============================================
-// TYPES
-// ============================================
-
-export interface BreadcrumbsProps<T> extends Omit<HeadlessBreadcrumbsProps<T>, 'class' | 'style'> {
-  /** The size of the breadcrumbs. */
-  size?: BreadcrumbsSize
-  /** The visual variant. */
-  variant?: BreadcrumbsVariant
-  /** Whether to show separators between items. */
-  showSeparator?: boolean
-  /** Additional CSS class name. */
-  class?: string
-}
-
-export interface BreadcrumbItemProps extends Omit<HeadlessBreadcrumbItemProps, 'class' | 'style'> {
-  /** Additional CSS class name. */
-  class?: string
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    text: 'text-sm',
-    icon: 'h-3 w-3',
-    gap: 'gap-1',
-  },
-  md: {
-    text: 'text-base',
-    icon: 'h-4 w-4',
-    gap: 'gap-1.5',
-  },
-  lg: {
-    text: 'text-lg',
-    icon: 'h-5 w-5',
-    gap: 'gap-2',
-  },
-}
-
-const variantStyles = {
-  default: {
-    item: 'text-primary-400 hover:text-primary-200',
-    current: 'text-primary-100 font-medium',
-    separator: 'text-primary-500',
-  },
-  subtle: {
-    item: 'text-primary-500 hover:text-primary-300',
-    current: 'text-primary-200',
-    separator: 'text-primary-600',
-  },
-}
-
-// ============================================
-// BREADCRUMBS COMPONENT
-// ============================================
-
-/**
- * Breadcrumbs show hierarchy and navigational context for a user's location within an application.
- *
- * Built on solidaria-components Breadcrumbs for full accessibility support.
- */
-export function Breadcrumbs<T>(props: BreadcrumbsProps<T>): JSX.Element {
-  const [local, headlessProps] = splitProps(props, [
-    'size',
-    'variant',
-    'showSeparator',
-    'class',
-  ])
-
-  const size = local.size ?? 'md'
-  const variant = local.variant ?? 'default'
-  const showSeparator = local.showSeparator ?? true
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: BreadcrumbsRenderProps): string => {
-    const base = 'flex items-center'
-    const sizeClass = sizeStyles[size].gap
-    const disabledClass = renderProps.isDisabled ? 'opacity-50' : ''
-    return [base, sizeClass, disabledClass, customClass].filter(Boolean).join(' ')
-  }
-
-  return (
-    <BreadcrumbsSizeContext.Provider value={{ size, variant, showSeparator }}>
-      <HeadlessBreadcrumbs
-        {...headlessProps}
-        class={getClassName}
-        children={props.children}
-      />
-    </BreadcrumbsSizeContext.Provider>
-  )
-}
-
-// ============================================
-// BREADCRUMB ITEM COMPONENT
-// ============================================
-
-/**
- * A BreadcrumbItem represents an individual breadcrumb in the navigation trail.
- */
-export function BreadcrumbItem(props: BreadcrumbItemProps): JSX.Element {
-  const [local, headlessProps] = splitProps(props, ['class'])
-  const ctx = useContext(BreadcrumbsSizeContext)
-  const customClass = local.class ?? ''
-
-  const getClassName = (renderProps: BreadcrumbItemRenderProps): string => {
-    const sizeClass = sizeStyles[ctx.size].text
-    const vStyles = variantStyles[ctx.variant]
-
-    let stateClass: string
-    if (renderProps.isCurrent) {
-      stateClass = vStyles.current
-    } else if (renderProps.isDisabled) {
-      stateClass = 'text-primary-600 cursor-not-allowed'
-    } else {
-      stateClass = vStyles.item
-    }
-
-    const cursorClass = renderProps.isCurrent || renderProps.isDisabled ? '' : 'cursor-pointer'
-    const transitionClass = 'transition-colors duration-150'
-    const focusClass = renderProps.isFocusVisible
-      ? 'ring-2 ring-accent-300 ring-offset-1 ring-offset-bg-400 outline-none rounded'
-      : ''
-
-    return [sizeClass, stateClass, cursorClass, transitionClass, focusClass, customClass].filter(Boolean).join(' ')
-  }
-
-  const vStyles = variantStyles[ctx.variant]
-  // Hide separator on first item, and on current (last) item
-  const separatorClass = `${sizeStyles[ctx.size].icon} ${vStyles.separator} mx-1 shrink-0 hidden data-current:hidden [&:not([data-current])]:block [li:first-child_&]:!hidden`
-
-  // Wrap children with separator icon
-  const renderChildren = () => (
-    <>
-      {/* Separator shows before items except first and current */}
-      {ctx.showSeparator && <ChevronIcon class={separatorClass} />}
-      {props.children as JSX.Element}
-    </>
-  )
-
-  return (
-    <HeadlessBreadcrumbItem
-      {...headlessProps}
-      class={getClassName}
-      children={renderChildren()}
-    />
-  )
-}
-
-// ============================================
-// ICONS
-// ============================================
-
-function ChevronIcon(props: { class?: string }): JSX.Element {
-  return (
-    <svg
-      class={props.class}
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke="currentColor"
-      stroke-width="2"
-    >
-      <path stroke-linecap="round" stroke-linejoin="round" d="M9 5l7 7-7 7" />
-    </svg>
-  )
-}
-
-// Attach sub-components for convenience
-Breadcrumbs.Item = BreadcrumbItem

package/src/button/Button.tsx

@@ -1,74 +0,0 @@
-/**
- * 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, [
-    '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}
-    >
-      {props.children}
-    </HeadlessButton>
-  );
-}

package/src/button/index.ts

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

package/src/button/types.ts

@@ -1,24 +0,0 @@
-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/calendar/DateField.tsx

@@ -1,200 +0,0 @@
-/**
- * DateField component for proyecto-viviana-ui
- *
- * Styled date field component with segment-based editing.
- */
-
-import { type JSX, splitProps } from 'solid-js';
-import {
-  DateField as HeadlessDateField,
-  DateInput,
-  DateSegment,
-  type DateFieldProps as HeadlessDateFieldProps,
-  type CalendarDate,
-  type DateValue,
-} from '@proyecto-viviana/solidaria-components';
-
-// ============================================
-// TYPES
-// ============================================
-
-export type DateFieldSize = 'sm' | 'md' | 'lg';
-
-export interface DateFieldProps<T extends DateValue = DateValue>
-  extends Omit<HeadlessDateFieldProps<T>, 'class' | 'style' | 'children'> {
-  /** The size of the field. @default 'md' */
-  size?: DateFieldSize;
-  /** Additional CSS class name. */
-  class?: string;
-  /** Label for the field. */
-  label?: string;
-  /** Description text. */
-  description?: string;
-  /** Error message. */
-  errorMessage?: string;
-}
-
-// ============================================
-// STYLES
-// ============================================
-
-const sizeStyles = {
-  sm: {
-    container: 'text-sm',
-    input: 'px-2 py-1 gap-0.5',
-    segment: 'px-0.5',
-    label: 'text-xs',
-  },
-  md: {
-    container: 'text-base',
-    input: 'px-3 py-2 gap-1',
-    segment: 'px-1',
-    label: 'text-sm',
-  },
-  lg: {
-    container: 'text-lg',
-    input: 'px-4 py-3 gap-1.5',
-    segment: 'px-1.5',
-    label: 'text-base',
-  },
-};
-
-// ============================================
-// DATE FIELD COMPONENT
-// ============================================
-
-/**
- * A date field allows users to enter and edit date values using a keyboard.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <DateField label="Birth date" />
- *
- * // Controlled
- * const [date, setDate] = createSignal<CalendarDate | null>(null);
- * <DateField
- *   label="Event date"
- *   value={date()}
- *   onChange={setDate}
- * />
- *
- * // With validation
- * <DateField
- *   label="Future date"
- *   minValue={today(getLocalTimeZone())}
- *   errorMessage="Date must be in the future"
- * />
- * ```
- */
-export function DateField<T extends DateValue = CalendarDate>(
-  props: DateFieldProps<T>
-): JSX.Element {
-  const [local, rest] = splitProps(props, [
-    'size',
-    'class',
-    'label',
-    'description',
-    'errorMessage',
-    'isInvalid',
-  ]);
-
-  const size = () => local.size ?? 'md';
-  const sizeConfig = () => sizeStyles[size()];
-  const isInvalid = () => local.isInvalid || !!local.errorMessage;
-
-  return (
-    <HeadlessDateField
-      {...rest}
-      isInvalid={isInvalid()}
-      class={`
-        flex flex-col gap-1
-        ${sizeConfig().container}
-        ${local.class ?? ''}
-      `}
-    >
-      {/* Label */}
-      {local.label && (
-        <label class={`font-medium text-primary-200 ${sizeConfig().label}`}>
-          {local.label}
-          {rest.isRequired && <span class="text-red-500 ml-0.5">*</span>}
-        </label>
-      )}
-
-      {/* Input container */}
-      <DateInput
-        class={({ isFocused, isDisabled }) => {
-          const base = `
-            inline-flex items-center
-            ${sizeConfig().input}
-            bg-bg-400 rounded-md border
-            transition-colors duration-150
-          `;
-
-          let borderClass = 'border-primary-600';
-          if (isInvalid()) {
-            borderClass = 'border-red-500';
-          } else if (isFocused) {
-            borderClass = 'border-accent';
-          }
-
-          const disabledClass = isDisabled
-            ? 'opacity-50 cursor-not-allowed'
-            : '';
-
-          const focusClass = isFocused
-            ? 'ring-2 ring-accent/30'
-            : '';
-
-          return `${base} ${borderClass} ${disabledClass} ${focusClass}`.trim();
-        }}
-      >
-        {(segment) => (
-          <DateSegment
-            segment={segment}
-            class={({ isFocused, isPlaceholder, isEditable }) => {
-              const base = `
-                ${sizeConfig().segment}
-                rounded
-                outline-none
-                tabular-nums
-              `;
-
-              let stateClass = '';
-              if (segment.type === 'literal') {
-                stateClass = 'text-primary-400';
-              } else if (isPlaceholder) {
-                stateClass = 'text-primary-500 italic';
-              } else {
-                stateClass = 'text-primary-100';
-              }
-
-              const focusClass = isFocused && isEditable
-                ? 'bg-accent text-white'
-                : '';
-
-              return `${base} ${stateClass} ${focusClass}`.trim();
-            }}
-          />
-        )}
-      </DateInput>
-
-      {/* Description */}
-      {local.description && !isInvalid() && (
-        <p class={`text-primary-400 ${sizeConfig().label}`}>
-          {local.description}
-        </p>
-      )}
-
-      {/* Error message */}
-      {isInvalid() && local.errorMessage && (
-        <p class={`text-red-500 ${sizeConfig().label}`}>
-          {local.errorMessage}
-        </p>
-      )}
-    </HeadlessDateField>
-  );
-}
-
-// Re-export types
-export type { CalendarDate, DateValue };